Feat/attachments (#9526)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>

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

@@ -1,5 +1,6 @@
 import {
   memo,
+  useCallback,
   useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -19,6 +20,10 @@ import type { StartNodeType } from '../nodes/start/types'
 import { TransferMethod } from '../../base/text-generation/types'
 import Button from '@/app/components/base/button'
 import { useFeatures } from '@/app/components/base/features/hooks'
+import {
+  getProcessedInputs,
+} from '@/app/components/base/chat/chat/utils'
+import { useCheckInputsForms } from '@/app/components/base/chat/chat/check-input-forms-hooks'
 
 type Props = {
   onRun: () => void
@@ -37,6 +42,7 @@ const InputsPanel = ({ onRun }: Props) => {
   } = useWorkflowRun()
   const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
   const startVariables = startNode?.data.variables
+  const { checkInputsForm } = useCheckInputsForms()
 
   const variables = useMemo(() => {
     const data = startVariables || []
@@ -56,34 +62,40 @@ const InputsPanel = ({ onRun }: Props) => {
   }, [fileSettings?.image?.enabled, startVariables])
 
   const handleValueChange = (variable: string, v: any) => {
+    const {
+      inputs,
+      setInputs,
+    } = workflowStore.getState()
     if (variable === '__image') {
       workflowStore.setState({
         files: v,
       })
     }
     else {
-      workflowStore.getState().setInputs({
+      setInputs({
         ...inputs,
         [variable]: v,
       })
     }
   }
 
-  const doRun = () => {
+  const doRun = useCallback(() => {
+    if (!checkInputsForm(inputs, variables as any))
+      return
     onRun()
-    handleRun({ inputs, files })
-  }
+    handleRun({ inputs: getProcessedInputs(inputs, variables as any), files })
+  }, [files, handleRun, inputs, onRun, variables, checkInputsForm])
 
-  const canRun = (() => {
+  const canRun = useMemo(() => {
     if (files?.some(item => (item.transfer_method as any) === TransferMethod.local_file && !item.upload_file_id))
       return false
 
     return true
-  })()
+  }, [files])
 
   return (
     <>
-      <div className='px-4 pb-2'>
+      <div className='pt-3 px-4 pb-2'>
         {
           variables.map((variable, index) => (
             <div