feat: default value option for select input fields (#21192)

Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: GuanMu <ballmanjq@gmail.com>

web/app/components/app/configuration/config-var/config-modal/index.tsx

@@ -20,6 +20,7 @@ import FileUploadSetting from '@/app/components/workflow/nodes/_base/components/
 import Checkbox from '@/app/components/base/checkbox'
 import { DEFAULT_FILE_UPLOAD_SETTING } from '@/app/components/workflow/constants'
 import { DEFAULT_VALUE_MAX_LEN } from '@/config'
+import { SimpleSelect } from '@/app/components/base/select'
 
 const TEXT_MAX_LENGTH = 256
 
@@ -234,9 +235,30 @@ const ConfigModal: FC<IConfigModalProps> = ({
 
           )}
           {type === InputVarType.select && (
-            <Field title={t('appDebug.variableConfig.options')}>
-              <ConfigSelect options={options || []} onChange={handlePayloadChange('options')} />
-            </Field>
+            <>
+              <Field title={t('appDebug.variableConfig.options')}>
+                <ConfigSelect options={options || []} onChange={handlePayloadChange('options')} />
+              </Field>
+              {options && options.length > 0 && (
+                <Field title={t('appDebug.variableConfig.defaultValue')}>
+                  <SimpleSelect
+                    key={`default-select-${options.join('-')}`}
+                    className="w-full"
+                    items={[
+                      { value: '', name: t('appDebug.variableConfig.noDefaultValue') },
+                      ...options.filter(opt => opt.trim() !== '').map(option => ({
+                        value: option,
+                        name: option,
+                      })),
+                    ]}
+                    defaultValue={tempPayload.default || ''}
+                    onSelect={item => handlePayloadChange('default')(item.value === '' ? undefined : item.value)}
+                    placeholder={t('appDebug.variableConfig.selectDefaultValue')}
+                    allowSearch={false}
+                  />
+                </Field>
+              )}
+            </>
           )}
 
           {[InputVarType.singleFile, InputVarType.multiFiles].includes(type) && (

web/app/components/base/chat/chat-with-history/hooks.tsx

@@ -211,7 +211,7 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
         const isInputInOptions = item.select.options.includes(initInputs[item.select.variable])
         return {
           ...item.select,
-          default: (isInputInOptions ? initInputs[item.select.variable] : undefined) || item.default,
+          default: (isInputInOptions ? initInputs[item.select.variable] : undefined) || item.select.default,
           type: 'select',
         }
       }

web/app/components/base/chat/chat-with-history/inputs-form/content.tsx

@@ -73,7 +73,7 @@ const InputsFormContent = ({ showTip }: Props) => {
           {form.type === InputVarType.select && (
             <PortalSelect
               popupClassName='w-[200px]'
-              value={inputsFormValue?.[form.variable]}
+              value={inputsFormValue?.[form.variable] ?? form.default ?? ''}
               items={form.options.map((option: string) => ({ value: option, name: option }))}
               onSelect={item => handleFormChange(form.variable, item.value as string)}
               placeholder={form.label}

web/app/components/base/chat/embedded-chatbot/hooks.tsx

@@ -199,7 +199,7 @@ export const useEmbeddedChatbot = () => {
         const isInputInOptions = item.select.options.includes(initInputs[item.select.variable])
         return {
           ...item.select,
-          default: (isInputInOptions ? initInputs[item.select.variable] : undefined) || item.default,
+          default: (isInputInOptions ? initInputs[item.select.variable] : undefined) || item.select.default,
           type: 'select',
         }
       }

web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx

@@ -73,7 +73,7 @@ const InputsFormContent = ({ showTip }: Props) => {
           {form.type === InputVarType.select && (
             <PortalSelect
               popupClassName='w-[200px]'
-              value={inputsFormValue?.[form.variable]}
+              value={inputsFormValue?.[form.variable] ?? form.default ?? ''}
               items={form.options.map((option: string) => ({ value: option, name: option }))}
               onSelect={item => handleFormChange(form.variable, item.value as string)}
               placeholder={form.label}

web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx

@@ -158,7 +158,7 @@ const FormItem: FC<Props> = ({
           type === InputVarType.select && (
             <Select
               className="w-full"
-              defaultValue={value || ''}
+              defaultValue={value || payload.default || ''}
               items={payload.options?.map(option => ({ name: option, value: option })) || []}
               onSelect={i => onChange(i.value)}
               allowSearch={false}

web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx

@@ -47,7 +47,22 @@ const ChatWrapper = (
   const startVariables = startNode?.data.variables
   const appDetail = useAppStore(s => s.appDetail)
   const workflowStore = useWorkflowStore()
-  const inputs = useStore(s => s.inputs)
+  const { inputs, setInputs } = useStore(s => ({
+    inputs: s.inputs,
+    setInputs: s.setInputs,
+  }))
+
+  const initialInputs = useMemo(() => {
+    const initInputs: Record<string, any> = {}
+    if (startVariables) {
+      startVariables.forEach((variable) => {
+        if (variable.default)
+          initInputs[variable.variable] = variable.default
+      })
+    }
+    return initInputs
+  }, [startVariables])
+
   const features = useFeatures(s => s.features)
   const config = useMemo(() => {
     return {
@@ -82,6 +97,11 @@ const ChatWrapper = (
     taskId => stopChatMessageResponding(appDetail!.id, taskId),
   )
 
+  const handleRestartChat = useCallback(() => {
+    handleRestart()
+    setInputs(initialInputs)
+  }, [handleRestart, setInputs, initialInputs])
+
   const doSend: OnSend = useCallback((message, files, isRegenerate = false, parentAnswer: ChatItem | null = null) => {
     handleSend(
       {
@@ -115,9 +135,18 @@ const ChatWrapper = (
 
   useImperativeHandle(ref, () => {
     return {
-      handleRestart,
+      handleRestart: handleRestartChat,
     }
-  }, [handleRestart])
+  }, [handleRestartChat])
+
+  useEffect(() => {
+    if (Object.keys(initialInputs).length > 0) {
+      setInputs({
+        ...initialInputs,
+        ...inputs,
+      })
+    }
+  }, [initialInputs])
 
   useEffect(() => {
     if (isResponding)