feat: Supports user input field type password

ui/src/components/ai-chat/component/user-form/index.vue

@@ -16,7 +16,7 @@
         <el-icon class="mr-8 arrow-icon" :class="showUserInput ? 'rotate-90' : ''"
           ><CaretRight
         /></el-icon>
-        {{ $t('chat.userInput') }}
+        {{ inputFieldConfig.title }}
       </div>
       <el-scrollbar max-height="160">
         <el-collapse-transition>
@@ -63,6 +63,7 @@ const props = defineProps<{
 const dynamicsFormRefresh = ref(0)
 const inputFieldList = ref<FormField[]>([])
 const apiInputFieldList = ref<FormField[]>([])
+const inputFieldConfig = ref({ title: t('chat.userInput') })
 const showUserInput = ref(true)
 const emit = defineEmits(['update:api_form_data', 'update:form_data'])
 
@@ -260,6 +261,11 @@ function handleInputFieldList() {
                 }
               })
           : []
+
+      //
+      inputFieldConfig.value = v.properties.user_input_config?.title
+        ? v.properties.user_input_config
+        : { title: t('chat.userInput') }
     })
 }
 /**

ui/src/components/dynamics-form/constructor/items/TextInputConstructor.vue

@@ -1,4 +1,11 @@
 <template>
+  <el-form-item
+    class="defaultValueItem"
+    prop="show_password"
+    :label="$t('dynamicsForm.TextInput.showPassword')"
+  >
+    <el-switch v-model="formValue.show_password" />
+  </el-form-item>
   <el-form-item :label="$t('dynamicsForm.TextInput.length.label')" required>
     <el-row class="w-full">
       <el-col :span="11">
@@ -70,7 +77,8 @@
       :minlength="formValue.minlength"
       :placeholder="$t('dynamicsForm.default.placeholder')"
       show-word-limit
-      type="text"
+      :type="formValue.show_password ? 'password' : 'text'"
+      :show-password="formValue.show_password"
     />
   </el-form-item>
 </template>
@@ -103,7 +111,9 @@ const getData = () => {
     attrs: {
       maxlength: formValue.value.maxlength,
       minlength: formValue.value.minlength,
-      'show-word-limit': true
+      'show-word-limit': true,
+      type: formValue.value.show_password ? 'password' : 'text',
+      'show-password': formValue.value.show_password
     },
     default_value: formValue.value.default_value,
     show_default_value: formValue.value.show_default_value,
@@ -135,6 +145,7 @@ const rander = (form_data: any) => {
   formValue.value.maxlength = attrs.maxlength
   formValue.value.default_value = form_data.default_value
   formValue.value.show_default_value = form_data.show_default_value
+  formValue.value.show_password = attrs['show-password']
 }
 const rangeRules = [
   {
@@ -165,7 +176,8 @@ onMounted(() => {
   formValue.value.minlength = 0
   formValue.value.maxlength = 20
   formValue.value.default_value = ''
-  console.log(formValue.value.show_default_value)
+  formValue.value.show_password = false
+
   if (formValue.value.show_default_value === undefined) {
     formValue.value.show_default_value = true
   }

ui/src/locales/lang/en-US/dynamics-form.ts

@@ -96,6 +96,7 @@ export default {
       requiredMessage2: 'and',
       requiredMessage3: 'characters',
       requiredMessage4: 'Text length is a required parameter'
-    }
+    },
+    showPassword: 'Show Password'
   }
 }

ui/src/locales/lang/zh-CN/dynamics-form.ts

@@ -96,6 +96,7 @@ export default {
       requiredMessage2: '到',
       requiredMessage3: '个字符',
       requiredMessage4: '文本长度为必填参数'
-    }
+    },
+    showPassword: '密文显示'
   }
 }

ui/src/locales/lang/zh-Hant/dynamics-form.ts

@@ -96,6 +96,7 @@ export default {
       requiredMessage2: '到',
       requiredMessage3: '個字元',
       requiredMessage4: '文字長度為必填參數'
-    }
+    },
+    showPassword: '密文顯示'
   }
 }

ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue

@@ -1,12 +1,23 @@
 <template>
   <div class="flex-between mb-16">
     <h5 class="lighter">{{ $t('chat.userInput') }}</h5>
-    <el-button link type="primary" @click="openAddDialog()">
-      <el-icon class="mr-4">
-        <Plus />
-      </el-icon>
-      {{ $t('common.add') }}
-    </el-button>
+    <div>
+      <el-button
+        type="primary"
+        link
+        @click="openChangeTitleDialog"
+      >
+        <el-icon>
+          <Setting />
+        </el-icon>
+      </el-button>
+      <el-button link type="primary" @click="openAddDialog()">
+        <el-icon class="mr-4">
+          <Plus />
+        </el-icon>
+        {{ $t('common.add') }}
+      </el-button>
+    </div>
   </div>
   <el-table
     v-if="props.nodeModel.properties.user_input_field_list?.length > 0"
@@ -92,6 +103,7 @@
   </el-table>
 
   <UserFieldFormDialog ref="UserFieldFormDialogRef" @refresh="refreshFieldList" />
+  <UserInputTitleDialog ref="UserInputTitleDialogRef" @refresh="refreshFieldTitle"/>
 </template>
 
 <script setup lang="ts">
@@ -100,15 +112,22 @@ import { set } from 'lodash'
 import UserFieldFormDialog from './UserFieldFormDialog.vue'
 import { MsgError } from '@/utils/message'
 import { t } from '@/locales'
+import UserInputTitleDialog from '@/workflow/nodes/base-node/component/UserInputTitleDialog.vue'
 const props = defineProps<{ nodeModel: any }>()
 
 const UserFieldFormDialogRef = ref()
+const UserInputTitleDialogRef = ref()
 const inputFieldList = ref<any[]>([])
+const inputFieldConfig = ref({ title: t('chat.userInput') })
 
 function openAddDialog(data?: any, index?: any) {
   UserFieldFormDialogRef.value.open(data, index)
 }
 
+function openChangeTitleDialog() {
+  UserInputTitleDialogRef.value.open(inputFieldConfig.value)
+}
+
 function deleteField(index: any) {
   inputFieldList.value.splice(index, 1)
   props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
@@ -138,6 +157,13 @@ function refreshFieldList(data: any, index: any) {
   props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
 }
 
+function refreshFieldTitle(data: any) {
+  inputFieldConfig.value = data
+  UserInputTitleDialogRef.value.close()
+
+  console.log('inputFieldConfig', inputFieldConfig.value)
+}
+
 const getDefaultValue = (row: any) => {
   if (row.default_value) {
     const default_value = row.option_list
@@ -186,6 +212,7 @@ onMounted(() => {
     }
   })
   set(props.nodeModel.properties, 'user_input_field_list', inputFieldList)
+  set(props.nodeModel.properties, 'user_input_config', inputFieldConfig)
 })
 </script>
 

ui/src/workflow/nodes/base-node/component/UserInputTitleDialog.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-dialog
+    :title="$t('common.setting')"
+    v-model="dialogVisible"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :destroy-on-close="true"
+    :before-close="close"
+    append-to-body
+  >
+    <el-form
+      label-position="top"
+      ref="fieldFormRef"
+      :rules="rules"
+      :model="form"
+      require-asterisk-position="right"
+    >
+      <el-form-item :label="$t('common.title')" prop="title">
+        <el-input
+          v-model="form.title"
+          maxlength="64"
+          show-word-limit
+          @blur="form.title = form.title.trim()"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
+        <el-button type="primary" @click="submit(fieldFormRef)" :loading="loading">
+          {{ isEdit ? $t('common.save') : $t('common.add') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import type { FormInstance } from 'element-plus'
+import { cloneDeep } from 'lodash'
+import { t } from '@/locales'
+const emit = defineEmits(['refresh'])
+
+const fieldFormRef = ref()
+const loading = ref<boolean>(false)
+const isEdit = ref(false)
+
+const form = ref<any>({
+  title: t('chat.userInput') ,
+})
+
+const rules = reactive({
+  title: [{ required: true, message: t('dynamicsForm.paramForm.name.requiredMessage'), trigger: 'blur' }],
+})
+
+const dialogVisible = ref<boolean>(false)
+
+const open = (row: any) => {
+  if (row) {
+    form.value = cloneDeep(row)
+    isEdit.value = true
+  }
+
+  dialogVisible.value = true
+}
+
+const close = () => {
+  dialogVisible.value = false
+  isEdit.value = false
+}
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      emit('refresh', form.value)
+    }
+  })
+}
+
+defineExpose({ open, close })
+</script>
+<style lang="scss" scoped></style>