diff --git a/web/app/components/app/configuration/config-var/config-modal/index.tsx b/web/app/components/app/configuration/config-var/config-modal/index.tsx
index 194ee12e2e..f8510a5cb8 100644
--- a/web/app/components/app/configuration/config-var/config-modal/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/index.tsx
@@ -153,12 +153,12 @@ const ConfigModal: FC<IConfigModalProps> = ({
     }
     else if ([InputVarType.singleFile, InputVarType.multiFiles].includes(type)) {
       if (tempPayload.allowed_file_types?.length === 0) {
-        const errorMessages = t('workflow.errorMsg.fieldRequired', { field: t('appDebug.variableConig.file.supportFileTypes') })
+        const errorMessages = t('workflow.errorMsg.fieldRequired', { field: t('appDebug.variableConfig.file.supportFileTypes') })
         Toast.notify({ type: 'error', message: errorMessages })
         return
       }
       if (tempPayload.allowed_file_types?.includes(SupportUploadFileTypes.custom) && !tempPayload.allowed_file_extensions?.length) {
-        const errorMessages = t('workflow.errorMsg.fieldRequired', { field: t('appDebug.variableConig.file.custom.name') })
+        const errorMessages = t('workflow.errorMsg.fieldRequired', { field: t('appDebug.variableConfig.file.custom.name') })
         Toast.notify({ type: 'error', message: errorMessages })
         return
       }
@@ -178,7 +178,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
       <div className='mb-8'>
         <div className='space-y-2'>
 
-          <Field title={t('appDebug.variableConig.fieldType')}>
+          <Field title={t('appDebug.variableConfig.fieldType')}>
             <div className='grid grid-cols-3 gap-2'>
               <SelectTypeItem type={InputVarType.textInput} selected={type === InputVarType.textInput} onClick={handleTypeChange(InputVarType.textInput)} />
               <SelectTypeItem type={InputVarType.paragraph} selected={type === InputVarType.paragraph} onClick={handleTypeChange(InputVarType.paragraph)} />
@@ -191,7 +191,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
             </div>
           </Field>
 
-          <Field title={t('appDebug.variableConig.varName')}>
+          <Field title={t('appDebug.variableConfig.varName')}>
             <Input
               value={variable}
               onChange={e => handlePayloadChange('variable')(e.target.value)}
@@ -199,7 +199,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
               placeholder={t('appDebug.variableConfig.inputPlaceholder')!}
             />
           </Field>
-          <Field title={t('appDebug.variableConig.labelName')}>
+          <Field title={t('appDebug.variableConfig.labelName')}>
             <Input
               value={label as string}
               onChange={e => handlePayloadChange('label')(e.target.value)}
@@ -229,7 +229,7 @@ const ConfigModal: FC<IConfigModalProps> = ({
 
           <div className='!mt-5 flex items-center h-6 space-x-2'>
             <Checkbox checked={tempPayload.required} onCheck={() => handlePayloadChange('required')(!tempPayload.required)} />
-            <span className='text-text-secondary system-sm-semibold'>{t('appDebug.variableConig.required')}</span>
+            <span className='text-text-secondary system-sm-semibold'>{t('appDebug.variableConfig.required')}</span>
           </div>
         </div>
       </div>
diff --git a/web/app/components/app/configuration/config-var/select-type-item/index.tsx b/web/app/components/app/configuration/config-var/select-type-item/index.tsx
index f96e80cb78..b71486b4eb 100644
--- a/web/app/components/app/configuration/config-var/select-type-item/index.tsx
+++ b/web/app/components/app/configuration/config-var/select-type-item/index.tsx
@@ -22,7 +22,7 @@ const SelectTypeItem: FC<ISelectTypeItemProps> = ({
   onClick,
 }) => {
   const { t } = useTranslation()
-  const typeName = t(`appDebug.variableConig.${i18nFileTypeMap[type] || type}`)
+  const typeName = t(`appDebug.variableConfig.${i18nFileTypeMap[type] || type}`)
 
   return (
     <div
diff --git a/web/app/components/base/chat/chat/chat-input-area/operation.tsx b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
index c31ef19abe..d1524f29ce 100644
--- a/web/app/components/base/chat/chat/chat-input-area/operation.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
@@ -38,7 +38,7 @@ const Operation = forwardRef<HTMLDivElement, OperationProps>(({
         ref={ref}
       >
         <div className='flex items-center space-x-1'>
-          <FileUploaderInChatInput />
+          {visionConfig?.enabled && <FileUploaderInChatInput />}
           {
             speechToTextConfig?.enabled && (
               <ActionButton
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
index 9f158695c7..f8636d7d2a 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
@@ -140,7 +140,7 @@ const OpeningSettingModal = ({
             onClick={() => { setTempSuggestedQuestions([...tempSuggestedQuestions, '']) }}
             className='mt-1 flex items-center h-9 px-3 gap-2 rounded-lg cursor-pointer text-gray-400  bg-gray-100 hover:bg-gray-200'>
             <RiAddLine className='w-4 h-4' />
-            <div className='text-gray-500 text-[13px]'>{t('appDebug.variableConig.addOption')}</div>
+            <div className='text-gray-500 text-[13px]'>{t('appDebug.variableConfig.addOption')}</div>
           </div>
         )}
       </div>
diff --git a/web/app/components/workflow/hooks/use-nodes-sync-draft.ts b/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
index 203386f5a7..a25a4f1812 100644
--- a/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
+++ b/web/app/components/workflow/hooks/use-nodes-sync-draft.ts
@@ -75,8 +75,8 @@ export const useNodesSyncDraft = () => {
             },
           },
           features: {
-            opening_statement: features.opening?.opening_statement || '',
-            suggested_questions: features.opening?.suggested_questions || [],
+            opening_statement: features.opening?.enabled ? (features.opening?.opening_statement || '') : '',
+            suggested_questions: features.opening?.enabled ? (features.opening?.suggested_questions || []) : [],
             suggested_questions_after_answer: features.suggested,
             text_to_speech: features.text2speech,
             speech_to_text: features.speech2text,
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
index 6b66fe89cf..30b6a66171 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
@@ -15,6 +15,7 @@ import Select from '@/app/components/base/select'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
+import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
 import { Resolution } from '@/types/app'
 import { useFeatures } from '@/app/components/base/features/hooks'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
@@ -156,7 +157,10 @@ const FormItem: FC<Props> = ({
           )
         }
 
-        {/* #TODO# file type new form  */}
+        {/* #TODO# file upload  */}
+        {(type === InputVarType.singleFile || type === InputVarType.multiFiles) && (
+          <FileUploaderInAttachmentWrapper onChange={() => {}} />
+        )}
         {
           type === InputVarType.files && (
             <TextGenerationImageUploader
diff --git a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
index 53f929b2e0..b186206a6f 100644
--- a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
@@ -46,14 +46,14 @@ const FileTypeItem: FC<Props> = ({
           <div>
             <div className='flex items-center p-3 pb-2 border-b border-divider-subtle'>
               <span className='shrink-0 w-4 h-4 bg-[#00B2EA]'></span>
-              <div className='mx-2 grow text-text-primary system-sm-medium'>{t(`appDebug.variableConig.file.${type}.name`)}</div>
+              <div className='mx-2 grow text-text-primary system-sm-medium'>{t(`appDebug.variableConfig.file.${type}.name`)}</div>
               <Checkbox className='shrink-0' checked={selected} />
             </div>
             <div className='p-3' onClick={e => e.stopPropagation()}>
               <TagInput
                 items={customFileTypes}
                 onChange={onCustomFileTypesChange}
-                placeholder={t('appDebug.variableConig.file.custom.createPlaceholder')!}
+                placeholder={t('appDebug.variableConfig.file.custom.createPlaceholder')!}
               />
             </div>
           </div>
@@ -63,8 +63,8 @@ const FileTypeItem: FC<Props> = ({
             {/* TODO: Wait File type icon */}
             <span className='shrink-0 w-4 h-4 bg-[#00B2EA]'></span>
             <div className='mx-2 grow'>
-              <div className='text-text-primary system-sm-medium'>{t(`appDebug.variableConig.file.${type}.name`)}</div>
-              <div className='mt-1 text-text-tertiary system-2xs-regular-uppercase'>{type !== SupportUploadFileTypes.custom ? FILE_EXTS[type].join(', ') : t('appDebug.variableConig.file.custom.description')}</div>
+              <div className='text-text-primary system-sm-medium'>{t(`appDebug.variableConfig.file.${type}.name`)}</div>
+              <div className='mt-1 text-text-tertiary system-2xs-regular-uppercase'>{type !== SupportUploadFileTypes.custom ? FILE_EXTS[type].join(', ') : t('appDebug.variableConfig.file.custom.description')}</div>
             </div>
             <Checkbox className='shrink-0' checked={selected} />
           </div>
diff --git a/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx b/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
index d915f59036..21f33aad0a 100644
--- a/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
+++ b/web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx
@@ -87,7 +87,7 @@ const FileUploadSetting: FC<Props> = ({
     <div>
       {!inFeaturePanel && (
         <Field
-          title={t('appDebug.variableConig.file.supportFileTypes')}
+          title={t('appDebug.variableConfig.file.supportFileTypes')}
         >
           <div className='space-y-1'>
             {
@@ -135,10 +135,10 @@ const FileUploadSetting: FC<Props> = ({
       {isMultiple && (
         <Field
           className='mt-4'
-          title={t('appDebug.variableConig.maxNumberOfUploads')!}
+          title={t('appDebug.variableConfig.maxNumberOfUploads')!}
         >
           <div>
-            <div className='mb-1.5 text-text-tertiary body-xs-regular'>{t('appDebug.variableConig.maxNumberTip')}</div>
+            <div className='mb-1.5 text-text-tertiary body-xs-regular'>{t('appDebug.variableConfig.maxNumberTip')}</div>
             <InputNumberWithSlider
               value={max_length}
               min={1}
@@ -150,7 +150,7 @@ const FileUploadSetting: FC<Props> = ({
       )}
       {inFeaturePanel && (
         <Field
-          title={t('appDebug.variableConig.file.supportFileTypes')}
+          title={t('appDebug.variableConfig.file.supportFileTypes')}
           className='mt-4'
         >
           <div className='space-y-1'>
diff --git a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
index 3b71fa284d..101125c290 100644
--- a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
@@ -42,8 +42,8 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConv
   const features = useFeatures(s => s.features)
   const config = useMemo(() => {
     return {
-      opening_statement: features.opening?.opening_statement || '',
-      suggested_questions: features.opening?.suggested_questions || [],
+      opening_statement: features.opening?.enabled ? (features.opening?.opening_statement || '') : '',
+      suggested_questions: features.opening?.enabled ? (features.opening?.suggested_questions || []) : [],
       suggested_questions_after_answer: features.suggested,
       text_to_speech: features.text2speech,
       speech_to_text: features.speech2text,
@@ -51,7 +51,7 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConv
       sensitive_word_avoidance: features.moderation,
       file_upload: features.file,
     }
-  }, [features])
+  }, [features.opening, features.suggested, features.text2speech, features.speech2text, features.citation, features.moderation, features.file])
   const setShowFeaturesPanel = useStore(s => s.setShowFeaturesPanel)
 
   const {
@@ -104,7 +104,8 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConv
         chatContainerClassName='px-3'
         chatContainerInnerClassName='pt-6 w-full max-w-full mx-auto'
         chatFooterClassName='px-4 rounded-bl-2xl'
-        chatFooterInnerClassName='pb-2'
+        chatFooterInnerClassName='pb-0'
+        showFileUpload
         showFeatureBar
         onFeatureBarClick={setShowFeaturesPanel}
         onSend={doSend}
diff --git a/web/app/components/workflow/panel/debug-and-preview/index.tsx b/web/app/components/workflow/panel/debug-and-preview/index.tsx
index c6647d79b8..08db7d8092 100644
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/index.tsx
@@ -85,6 +85,7 @@ const DebugAndPreview = () => {
                   <RiEqualizer2Line className='w-4 h-4' />
                 </ActionButton>
               </Tooltip>
+              {expanded && <div className='absolute z-10 bottom-[-17px] right-[5px] w-3 h-3 bg-components-panel-on-panel-item-bg border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle rotate-45'/>}
             </div>
           )}
           <div className='mx-3 w-[1px] h-3.5 bg-gray-200'></div>