Fix variable config (#23070)

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

                   <SimpleSelect
                     key={`default-select-${options.join('-')}`}
                     className="w-full"
+                    optionWrapClassName="max-h-[140px] overflow-y-auto"
                     items={[
                       { value: '', name: t('appDebug.variableConfig.noDefaultValue') },
                       ...options.filter(opt => opt.trim() !== '').map(option => ({

web/app/components/base/select/index.tsx

       defaultSelect = existed
 
     setSelectedItem(defaultSelect)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultValue])
 
   const filteredItems: Item[]
       defaultSelect = existed
 
     setSelectedItem(defaultSelect)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultValue])
 
   const listboxRef = useRef<HTMLDivElement>(null)
             >
               <span
                 className={`
-              grow truncate
+              grow truncate text-text-secondary
               ${!selectedItem?.name && 'text-components-input-text-placeholder'}
             `}
               >

web/app/components/share/text-generation/run-once/index.tsx

   useEffect(() => {
     const newInputs: Record<string, any> = {}
     promptConfig.prompt_variables.forEach((item) => {
-      if (item.type === 'string' || item.type === 'paragraph')
+      if (item.type === 'select')
+        newInputs[item.key] = item.default
+      else if (item.type === 'string' || item.type === 'paragraph')
         newInputs[item.key] = ''
       else
         newInputs[item.key] = undefined

web/app/components/workflow/panel/inputs-panel.tsx

 import {
   memo,
   useCallback,
+  useEffect,
   useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
 const InputsPanel = ({ onRun }: Props) => {
   const { t } = useTranslation()
   const workflowStore = useWorkflowStore()
+  const { inputs, setInputs } = useStore(s => ({
+    inputs: s.inputs,
+    setInputs: s.setInputs,
+  }))
   const fileSettings = useFeatures(s => s.features.file)
   const nodes = useNodes<StartNodeType>()
-  const inputs = useStore(s => s.inputs)
   const files = useStore(s => s.files)
   const workflowRunningData = useStore(s => s.workflowRunningData)
   const {
   const startVariables = startNode?.data.variables
   const { checkInputsForm } = useCheckInputsForms()
 
+  const initialInputs = useMemo(() => {
+    const initInputs: Record<string, any> = {}
+    if (startVariables) {
+      startVariables.forEach((variable) => {
+        if (variable.default)
+          initInputs[variable.variable] = variable.default
+      })
+    }
+    return initInputs
+  }, [startVariables])
+
+  useEffect(() => {
+    setInputs({
+      ...initialInputs,
+      ...inputs,
+    })
+  }, [initialInputs])
+
   const variables = useMemo(() => {
     const data = startVariables || []
     if (fileSettings?.image?.enabled) {

web/utils/model-config.ts

         options: content.options,
         is_context_var,
         hide: content.hide,
+        default: content.default,
       })
     }
     else if (type === 'file') {
           variable: item.key,
           required: item.required !== false, // default true
           options: item.options,
-          default: '',
+          default: item.default ?? '',
           hide: item.hide,
         },
       } as any)