Feat/attachments (#9526)

Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: JzoNg <jzongcode@gmail.com>
2025-12-10 03:16:51 +08:00 · 2024-10-21 10:32:37 +08:00
parent 4fd2743efa
commit 7a1d6fe509
445 changed files with 11759 additions and 6922 deletions
--- a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
+++ b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
@@ -15,7 +15,6 @@ import {
  getUrl,
  stopChatMessageResponding,
 } from '@/service/share'
-import AnswerIcon from '@/app/components/base/answer-icon'

 const ChatWrapper = () => {
  const {
@@ -56,7 +55,7 @@ const ChatWrapper = () => {
    appConfig,
    {
      inputs: (currentConversationId ? currentConversationItem?.inputs : newConversationInputs) as any,
-      promptVariables: inputsForms,
+      inputsForm: inputsForms,
    },
    appPrevChatList,
    taskId => stopChatMessageResponding('', taskId, isInstalledApp, appId),
@@ -65,19 +64,18 @@ const ChatWrapper = () => {
  useEffect(() => {
    if (currentChatInstanceRef.current)
      currentChatInstanceRef.current.handleStop = handleStop
+  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const doSend: OnSend = useCallback((message, files, last_answer) => {
    const data: any = {
      query: message,
+      files,
      inputs: currentConversationId ? currentConversationItem?.inputs : newConversationInputs,
      conversation_id: currentConversationId,
      parent_message_id: last_answer?.id || getLastAnswer(chatListRef.current)?.id || null,
    }

-    if (appConfig?.file_upload?.image.enabled && files?.length)
-      data.files = files
-
    handleSend(
      getUrl('chat-messages', isInstalledApp, appId || ''),
      data,
@@ -152,35 +150,31 @@ const ChatWrapper = () => {
    isMobile,
  ])

-  const answerIcon = (appData?.site && appData.site.use_icon_as_answer_icon)
-    ? <AnswerIcon
-      iconType={appData.site.icon_type}
-      icon={appData.site.icon}
-      background={appData.site.icon_background}
-      imageUrl={appData.site.icon_url}
-    />
-    : null
-
  return (
-    <Chat
-      appData={appData}
-      config={appConfig}
-      chatList={chatList}
-      isResponding={isResponding}
-      chatContainerInnerClassName={`mx-auto pt-6 w-full max-w-full ${isMobile && 'px-4'}`}
-      chatFooterClassName='pb-4'
-      chatFooterInnerClassName={`mx-auto w-full max-w-full ${isMobile && 'px-4'}`}
-      onSend={doSend}
-      onRegenerate={doRegenerate}
-      onStopResponding={handleStop}
-      chatNode={chatNode}
-      allToolIcons={appMeta?.tool_icons || {}}
-      onFeedback={handleFeedback}
-      suggestedQuestions={suggestedQuestions}
-      answerIcon={answerIcon}
-      hideProcessDetail
-      themeBuilder={themeBuilder}
-    />
+    <div
+      className='h-full bg-chatbot-bg overflow-hidden'
+    >
+      <Chat
+        appData={appData}
+        config={appConfig}
+        chatList={chatList}
+        isResponding={isResponding}
+        chatContainerInnerClassName={`mx-auto pt-6 w-full max-w-[720px] ${isMobile && 'px-4'}`}
+        chatFooterClassName='pb-4'
+        chatFooterInnerClassName={`mx-auto w-full max-w-[720px] ${isMobile && 'px-4'}`}
+        onSend={doSend}
+        inputs={currentConversationId ? currentConversationItem?.inputs as any : newConversationInputs}
+        inputsForm={inputsForms}
+        onRegenerate={doRegenerate}
+        onStopResponding={handleStop}
+        chatNode={chatNode}
+        allToolIcons={appMeta?.tool_icons || {}}
+        onFeedback={handleFeedback}
+        suggestedQuestions={suggestedQuestions}
+        hideProcessDetail
+        themeBuilder={themeBuilder}
+      />
+    </div>
  )
 }

--- a/web/app/components/base/chat/chat-with-history/config-panel/form-input.tsx
+++ b/web/app/components/base/chat/chat-with-history/config-panel/form-input.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { memo } from 'react'
+import Textarea from '@/app/components/base/textarea'

 type InputProps = {
  form: any
@@ -23,9 +24,9 @@ const FormInput: FC<InputProps> = ({

  if (type === 'paragraph') {
    return (
-      <textarea
+      <Textarea
        value={value}
-        className='grow h-[104px] rounded-lg bg-gray-100 px-2.5 py-2 outline-none appearance-none resize-none'
+        className='resize-none'
        onChange={e => onChange(variable, e.target.value)}
        placeholder={`${label}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
      />
--- a/web/app/components/base/chat/chat-with-history/config-panel/form.tsx
+++ b/web/app/components/base/chat/chat-with-history/config-panel/form.tsx
@@ -1,24 +1,26 @@
-import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useChatWithHistoryContext } from '../context'
 import Input from './form-input'
 import { PortalSelect } from '@/app/components/base/select'
+import { InputVarType } from '@/app/components/workflow/types'
+import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'

 const Form = () => {
  const { t } = useTranslation()
  const {
    inputsForms,
    newConversationInputs,
+    newConversationInputsRef,
    handleNewConversationInputsChange,
    isMobile,
  } = useChatWithHistoryContext()

-  const handleFormChange = useCallback((variable: string, value: string) => {
+  const handleFormChange = (variable: string, value: any) => {
    handleNewConversationInputsChange({
-      ...newConversationInputs,
+      ...newConversationInputsRef.current,
      [variable]: value,
    })
-  }, [newConversationInputs, handleNewConversationInputsChange])
+  }

  const renderField = (form: any) => {
    const {
@@ -48,6 +50,34 @@ const Form = () => {
        />
      )
    }
+    if (form.type === InputVarType.singleFile) {
+      return (
+        <FileUploaderInAttachmentWrapper
+          value={newConversationInputs[variable] ? [newConversationInputs[variable]] : []}
+          onChange={files => handleFormChange(variable, files[0])}
+          fileConfig={{
+            allowed_file_types: form.allowed_file_types,
+            allowed_file_extensions: form.allowed_file_extensions,
+            allowed_file_upload_methods: form.allowed_file_upload_methods,
+            number_limits: 1,
+          }}
+        />
+      )
+    }
+    if (form.type === InputVarType.multiFiles) {
+      return (
+        <FileUploaderInAttachmentWrapper
+          value={newConversationInputs[variable]}
+          onChange={files => handleFormChange(variable, files)}
+          fileConfig={{
+            allowed_file_types: form.allowed_file_types,
+            allowed_file_extensions: form.allowed_file_extensions,
+            allowed_file_upload_methods: form.allowed_file_upload_methods,
+            number_limits: form.max_length,
+          }}
+        />
+      )
+    }

    return (
      <PortalSelect
--- a/web/app/components/base/chat/chat-with-history/context.tsx
+++ b/web/app/components/base/chat/chat-with-history/context.tsx
@@ -30,6 +30,7 @@ export type ChatWithHistoryContextValue = {
  conversationList: AppConversationData['data']
  showConfigPanelBeforeChat: boolean
  newConversationInputs: Record<string, any>
+  newConversationInputsRef: RefObject<Record<string, any>>
  handleNewConversationInputsChange: (v: Record<string, any>) => void
  inputsForms: any[]
  handleNewConversation: () => void
@@ -57,6 +58,7 @@ export const ChatWithHistoryContext = createContext<ChatWithHistoryContextValue>
  conversationList: [],
  showConfigPanelBeforeChat: false,
  newConversationInputs: {},
+  newConversationInputsRef: { current: {} },
  handleNewConversationInputsChange: () => {},
  inputsForms: [],
  handleNewConversation: () => {},
--- a/web/app/components/base/chat/chat-with-history/hooks.tsx
+++ b/web/app/components/base/chat/chat-with-history/hooks.tsx
@@ -37,6 +37,8 @@ import type {
 import { useToastContext } from '@/app/components/base/toast'
 import { changeLanguage } from '@/i18n/i18next-config'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
+import { InputVarType } from '@/app/components/workflow/types'
+import { TransferMethod } from '@/types/app'

 export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
  const isInstalledApp = useMemo(() => !!installedAppInfo, [installedAppInfo])
@@ -127,7 +129,7 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
    setNewConversationInputs(newInputs)
  }, [])
  const inputsForms = useMemo(() => {
-    return (appParams?.user_input_form || []).filter((item: any) => item.paragraph || item.select || item['text-input'] || item.number).map((item: any) => {
+    return (appParams?.user_input_form || []).filter((item: any) => !item.external_data_tool).map((item: any) => {
      if (item.paragraph) {
        return {
          ...item.paragraph,
@@ -147,6 +149,20 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
        }
      }

+      if (item['file-list']) {
+        return {
+          ...item['file-list'],
+          type: 'file-list',
+        }
+      }
+
+      if (item.file) {
+        return {
+          ...item.file,
+          type: 'file',
+        }
+      }
+
      return {
        ...item['text-input'],
        type: 'text-input',
@@ -206,21 +222,38 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {

  const { notify } = useToastContext()
  const checkInputsRequired = useCallback((silent?: boolean) => {
-    if (inputsForms.length) {
-      for (let i = 0; i < inputsForms.length; i += 1) {
-        const item = inputsForms[i]
-
-        if (item.required && !newConversationInputsRef.current[item.variable]) {
-          if (!silent) {
-            notify({
-              type: 'error',
-              message: t('appDebug.errorMessage.valueOfVarRequired', { key: item.variable }),
-            })
-          }
+    let hasEmptyInput = ''
+    let fileIsUploading = false
+    const requiredVars = inputsForms.filter(({ required }) => required)
+    if (requiredVars.length) {
+      requiredVars.forEach(({ variable, label, type }) => {
+        if (hasEmptyInput)
          return
+
+        if (fileIsUploading)
+          return
+
+        if (!newConversationInputsRef.current[variable] && !silent)
+          hasEmptyInput = label as string
+
+        if ((type === InputVarType.singleFile || type === InputVarType.multiFiles) && newConversationInputsRef.current[variable] && !silent) {
+          const files = newConversationInputsRef.current[variable]
+          if (Array.isArray(files))
+            fileIsUploading = files.find(item => item.transferMethod === TransferMethod.local_file && !item.uploadedId)
+          else
+            fileIsUploading = files.transferMethod === TransferMethod.local_file && !files.uploadedId
        }
-      }
-      return true
+      })
+    }
+
+    if (hasEmptyInput) {
+      notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: hasEmptyInput }) })
+      return false
+    }
+
+    if (fileIsUploading) {
+      notify({ type: 'info', message: t('appDebug.errorMessage.waitForFileUpload') })
+      return
    }

    return true
@@ -377,6 +410,7 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
    setShowConfigPanelBeforeChat,
    setShowNewConversationItemInList,
    newConversationInputs,
+    newConversationInputsRef,
    handleNewConversationInputsChange,
    inputsForms,
    handleNewConversation,
--- a/web/app/components/base/chat/chat-with-history/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/index.tsx
@@ -125,6 +125,7 @@ const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
    conversationList,
    showConfigPanelBeforeChat,
    newConversationInputs,
+    newConversationInputsRef,
    handleNewConversationInputsChange,
    inputsForms,
    handleNewConversation,
@@ -158,6 +159,7 @@ const ChatWithHistoryWrap: FC<ChatWithHistoryWrapProps> = ({
      conversationList,
      showConfigPanelBeforeChat,
      newConversationInputs,
+      newConversationInputsRef,
      handleNewConversationInputsChange,
      inputsForms,
      handleNewConversation,
--- a/web/app/components/base/chat/chat/answer/agent-content.tsx
+++ b/web/app/components/base/chat/chat/answer/agent-content.tsx
@@ -2,41 +2,32 @@ import type { FC } from 'react'
 import { memo } from 'react'
 import type {
  ChatItem,
-  VisionFile,
 } from '../../types'
 import { Markdown } from '@/app/components/base/markdown'
 import Thought from '@/app/components/base/chat/chat/thought'
-import ImageGallery from '@/app/components/base/image-gallery'
-import type { Emoji } from '@/app/components/tools/types'
+import { FileList } from '@/app/components/base/file-uploader'
+import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'

 type AgentContentProps = {
  item: ChatItem
  responding?: boolean
-  allToolIcons?: Record<string, string | Emoji>
 }
 const AgentContent: FC<AgentContentProps> = ({
  item,
  responding,
-  allToolIcons,
 }) => {
  const {
    annotation,
    agent_thoughts,
  } = item

-  const getImgs = (list?: VisionFile[]) => {
-    if (!list)
-      return []
-    return list.filter(file => file.type === 'image' && file.belongs_to === 'assistant')
-  }
-
  if (annotation?.logAnnotation)
    return <Markdown content={annotation?.logAnnotation.content || ''} />

  return (
    <div>
      {agent_thoughts?.map((thought, index) => (
-        <div key={index}>
+        <div key={index} className='px-2 py-1'>
          {thought.thought && (
            <Markdown content={thought.thought} />
          )}
@@ -45,14 +36,20 @@ const AgentContent: FC<AgentContentProps> = ({
          {!!thought.tool && (
            <Thought
              thought={thought}
-              allToolIcons={allToolIcons || {}}
              isFinished={!!thought.observation || !responding}
            />
          )}

-          {getImgs(thought.message_files).length > 0 && (
-            <ImageGallery srcs={getImgs(thought.message_files).map(file => file.url)} />
-          )}
+          {
+            !!thought.message_files?.length && (
+              <FileList
+                files={getProcessedFilesFromResponse(thought.message_files.map((item: any) => ({ ...item, related_id: item.id })))}
+                showDeleteAction={false}
+                showDownloadAction={true}
+                canPreview={true}
+              />
+            )
+          }
        </div>
      ))}
    </div>
--- a/web/app/components/base/chat/chat/answer/basic-content.tsx
+++ b/web/app/components/base/chat/chat/answer/basic-content.tsx
@@ -2,6 +2,7 @@ import type { FC } from 'react'
 import { memo } from 'react'
 import type { ChatItem } from '../../types'
 import { Markdown } from '@/app/components/base/markdown'
+import cn from '@/utils/classnames'

 type BasicContentProps = {
  item: ChatItem
@@ -15,9 +16,17 @@ const BasicContent: FC<BasicContentProps> = ({
  } = item

  if (annotation?.logAnnotation)
-    return <Markdown content={annotation?.logAnnotation.content || ''} />
+    return <Markdown content={annotation?.logAnnotation.content || ''} className='px-2 py-1' />

-  return <Markdown content={content} className={`${item.isError && '!text-[#F04438]'}`} />
+  return (
+    <Markdown
+      className={cn(
+        'px-2 py-1',
+        item.isError && '!text-[#F04438]',
+      )}
+      content={content}
+    />
+  )
 }

 export default memo(BasicContent)
--- a/web/app/components/base/chat/chat/answer/index.tsx
+++ b/web/app/components/base/chat/chat/answer/index.tsx
@@ -18,10 +18,10 @@ import { AnswerTriangle } from '@/app/components/base/icons/src/vender/solid/gen
 import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
 import Citation from '@/app/components/base/chat/chat/citation'
 import { EditTitle } from '@/app/components/app/annotation/edit-annotation-modal/edit-item'
-import type { Emoji } from '@/app/components/tools/types'
 import type { AppData } from '@/models/share'
 import AnswerIcon from '@/app/components/base/answer-icon'
 import cn from '@/utils/classnames'
+import { FileList } from '@/app/components/base/file-uploader'

 type AnswerProps = {
  item: ChatItem
@@ -30,7 +30,6 @@ type AnswerProps = {
  config?: ChatConfig
  answerIcon?: ReactNode
  responding?: boolean
-  allToolIcons?: Record<string, string | Emoji>
  showPromptLog?: boolean
  chatAnswerContainerInner?: string
  hideProcessDetail?: boolean
@@ -44,7 +43,6 @@ const Answer: FC<AnswerProps> = ({
  config,
  answerIcon,
  responding,
-  allToolIcons,
  showPromptLog,
  chatAnswerContainerInner,
  hideProcessDetail,
@@ -59,6 +57,8 @@ const Answer: FC<AnswerProps> = ({
    more,
    annotation,
    workflowProcess,
+    allFiles,
+    message_files,
  } = item
  const hasAgentThoughts = !!agent_thoughts?.length

@@ -135,7 +135,6 @@ const Answer: FC<AnswerProps> = ({
                <WorkflowProcess
                  data={workflowProcess}
                  item={item}
-                  hideInfo
                  hideProcessDetail={hideProcessDetail}
                />
              )
@@ -146,7 +145,6 @@ const Answer: FC<AnswerProps> = ({
                <WorkflowProcess
                  data={workflowProcess}
                  item={item}
-                  hideInfo
                  hideProcessDetail={hideProcessDetail}
                />
              )
@@ -168,7 +166,28 @@ const Answer: FC<AnswerProps> = ({
                <AgentContent
                  item={item}
                  responding={responding}
-                  allToolIcons={allToolIcons}
+                />
+              )
+            }
+            {
+              !!allFiles?.length && (
+                <FileList
+                  className='my-1'
+                  files={allFiles}
+                  showDeleteAction={false}
+                  showDownloadAction
+                  canPreview
+                />
+              )
+            }
+            {
+              !!message_files?.length && (
+                <FileList
+                  className='my-1'
+                  files={message_files}
+                  showDeleteAction={false}
+                  showDownloadAction
+                  canPreview
                />
              )
            }
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -12,7 +12,7 @@ import cn from '@/utils/classnames'
 import CopyBtn from '@/app/components/base/copy-btn'
 import { MessageFast } from '@/app/components/base/icons/src/vender/solid/communication'
 import AudioBtn from '@/app/components/base/audio-btn'
-import AnnotationCtrlBtn from '@/app/components/app/configuration/toolbox/annotation/annotation-ctrl-btn'
+import AnnotationCtrlBtn from '@/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-btn'
 import EditReplyModal from '@/app/components/app/annotation/edit-annotation-modal'
 import {
  ThumbsDown,
--- a/web/app/components/base/chat/chat/answer/tool-detail.tsx
+++ b/web/app/components/base/chat/chat/answer/tool-detail.tsx
@@ -0,0 +1,71 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiArrowDownSLine,
+  RiArrowRightSLine,
+  RiHammerFill,
+  RiLoader2Line,
+} from '@remixicon/react'
+import type { ToolInfoInThought } from '../type'
+import cn from '@/utils/classnames'
+
+type ToolDetailProps = {
+  payload: ToolInfoInThought
+}
+const ToolDetail = ({
+  payload,
+}: ToolDetailProps) => {
+  const { t } = useTranslation()
+  const { name, label, input, isFinished, output } = payload
+  const toolLabel = name.startsWith('dataset_') ? t('dataset.knowledge') : label
+  const [expand, setExpand] = useState(false)
+
+  return (
+    <div
+      className={cn(
+        'rounded-xl',
+        !expand && 'border-l-[0.25px] border-components-panel-border bg-workflow-process-bg',
+        expand && 'border-[0.5px] border-components-panel-border-subtle bg-background-section-burn',
+      )}
+    >
+      <div
+        className={cn(
+          'flex items-center system-xs-medium text-text-tertiary px-2.5 py-2 cursor-pointer',
+          expand && 'pb-1.5',
+        )}
+        onClick={() => setExpand(!expand)}
+      >
+        {isFinished && <RiHammerFill className='mr-1 w-3.5 h-3.5' />}
+        {!isFinished && <RiLoader2Line className='mr-1 w-3.5 h-3.5 animate-spin' />}
+        {t(`tools.thought.${isFinished ? 'used' : 'using'}`)}
+        <div className='mx-1 text-text-secondary'>{toolLabel}</div>
+        {!expand && <RiArrowRightSLine className='w-4 h-4' />}
+        {expand && <RiArrowDownSLine className='ml-auto w-4 h-4' />}
+      </div>
+      {
+        expand && (
+          <>
+            <div className='mb-0.5 mx-1 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary'>
+              <div className='flex items-center justify-between px-2 pt-1 h-7 system-xs-semibold-uppercase'>
+                {t('tools.thought.requestTitle')}
+              </div>
+              <div className='pt-1 px-3 pb-2 code-xs-regular break-words'>
+                {input}
+              </div>
+            </div>
+            <div className='mx-1 mb-1 rounded-[10px] bg-components-panel-on-panel-item-bg text-text-secondary'>
+              <div className='flex items-center justify-between px-2 pt-1 h-7 system-xs-semibold-uppercase'>
+                {t('tools.thought.responseTitle')}
+              </div>
+              <div className='pt-1 px-3 pb-2 code-xs-regular break-words'>
+                {output}
+              </div>
+            </div>
+          </>
+        )
+      }
+    </div>
+  )
+}
+
+export default ToolDetail
--- a/web/app/components/base/chat/chat/answer/workflow-process.tsx
+++ b/web/app/components/base/chat/chat/answer/workflow-process.tsx
@@ -20,7 +20,6 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 type WorkflowProcessProps = {
  data: WorkflowProcess
  item?: ChatItem
-  grayBg?: boolean
  expand?: boolean
  hideInfo?: boolean
  hideProcessDetail?: boolean
@@ -28,7 +27,6 @@ type WorkflowProcessProps = {
 const WorkflowProcessItem = ({
  data,
  item,
-  grayBg,
  expand = false,
  hideInfo = false,
  hideProcessDetail = false,
@@ -40,6 +38,8 @@ const WorkflowProcessItem = ({
  const failed = data.status === WorkflowRunningStatus.Failed || data.status === WorkflowRunningStatus.Stopped

  const background = useMemo(() => {
+    if (collapse)
+      return 'linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%)'
    if (running && !collapse)
      return 'linear-gradient(180deg, #E1E4EA 0%, #EAECF0 100%)'

@@ -67,41 +67,36 @@ const WorkflowProcessItem = ({
  return (
    <div
      className={cn(
-        'mb-2 rounded-xl border-[0.5px] border-black/8',
-        collapse ? 'py-[7px]' : hideInfo ? 'pt-2 pb-1' : 'py-2',
-        collapse && (!grayBg ? 'bg-white' : 'bg-gray-50'),
-        hideInfo ? 'mx-[-8px] px-1' : 'w-full px-3',
+        '-mx-1 px-2.5 rounded-xl border-[0.5px]',
+        collapse ? 'py-[7px] border-components-panel-border' : 'pt-[7px] px-1 pb-1 border-components-panel-border-subtle',
      )}
      style={{
        background,
      }}
    >
      <div
-        className={cn(
-          'flex items-center h-[18px] cursor-pointer',
-          hideInfo && 'px-[6px]',
-        )}
+        className={cn('flex items-center cursor-pointer', !collapse && 'px-1.5')}
        onClick={() => setCollapse(!collapse)}
      >
        {
          running && (
-            <RiLoader2Line className='shrink-0 mr-1 w-3 h-3 text-[#667085] animate-spin' />
+            <RiLoader2Line className='shrink-0 mr-1 w-3.5 h-3.5 text-text-tertiary' />
          )
        }
        {
          succeeded && (
-            <CheckCircle className='shrink-0 mr-1 w-3 h-3 text-[#12B76A]' />
+            <CheckCircle className='shrink-0 mr-1 w-3.5 h-3.5 text-text-success' />
          )
        }
        {
          failed && (
-            <RiErrorWarningFill className='shrink-0 mr-1 w-3 h-3 text-[#F04438]' />
+            <RiErrorWarningFill className='shrink-0 mr-1 w-3.5 h-3.5 text-text-destructive' />
          )
        }
-        <div className='grow text-xs font-medium text-gray-700'>
+        <div className={cn('system-xs-medium text-text-secondary', !collapse && 'grow')}>
          {t('workflow.common.workflowProcess')}
        </div>
-        <RiArrowRightSLine className={`'ml-1 w-3 h-3 text-gray-500' ${collapse ? '' : 'rotate-90'}`} />
+        <RiArrowRightSLine className={`'ml-1 w-4 h-4 text-text-tertiary' ${collapse ? '' : 'rotate-90'}`} />
      </div>
      {
        !collapse && (
--- a/web/app/components/base/chat/chat/chat-input-area/hooks.ts
+++ b/web/app/components/base/chat/chat/chat-input-area/hooks.ts
@@ -0,0 +1,47 @@
+import {
+  useCallback,
+  useRef,
+  useState,
+} from 'react'
+import type { TextAreaRef } from 'rc-textarea'
+
+export const useTextAreaHeight = () => {
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const textareaRef = useRef<TextAreaRef>(null)
+  const textValueRef = useRef<HTMLDivElement>(null)
+  const holdSpaceRef = useRef<HTMLDivElement>(null)
+  const [isMultipleLine, setIsMultipleLine] = useState(false)
+
+  const handleComputeHeight = useCallback(() => {
+    const textareaElement = textareaRef.current?.resizableTextArea.textArea
+    if (wrapperRef.current && textareaElement && textValueRef.current && holdSpaceRef.current) {
+      const { width: wrapperWidth } = wrapperRef.current.getBoundingClientRect()
+      const { height: textareaHeight } = textareaElement.getBoundingClientRect()
+      const { width: textValueWidth } = textValueRef.current.getBoundingClientRect()
+      const { width: holdSpaceWidth } = holdSpaceRef.current.getBoundingClientRect()
+
+      if (textareaHeight > 32) {
+        setIsMultipleLine(true)
+      }
+      else {
+        if (textValueWidth + holdSpaceWidth >= wrapperWidth)
+          setIsMultipleLine(true)
+        else
+          setIsMultipleLine(false)
+      }
+    }
+  }, [])
+
+  const handleTextareaResize = useCallback(() => {
+    handleComputeHeight()
+  }, [handleComputeHeight])
+
+  return {
+    wrapperRef,
+    textareaRef,
+    textValueRef,
+    holdSpaceRef,
+    handleTextareaResize,
+    isMultipleLine,
+  }
+}
--- a/web/app/components/base/chat/chat/chat-input-area/index.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/index.tsx
@@ -0,0 +1,209 @@
+import {
+  useCallback,
+  useRef,
+  useState,
+} from 'react'
+import Textarea from 'rc-textarea'
+import { useTranslation } from 'react-i18next'
+import Recorder from 'js-audio-recorder'
+import type {
+  EnableType,
+  OnSend,
+} from '../../types'
+import type { Theme } from '../../embedded-chatbot/theme/theme-context'
+import type { InputForm } from '../type'
+import { useCheckInputsForms } from '../check-input-forms-hooks'
+import { useTextAreaHeight } from './hooks'
+import Operation from './operation'
+import cn from '@/utils/classnames'
+import { FileListInChatInput } from '@/app/components/base/file-uploader'
+import { useFile } from '@/app/components/base/file-uploader/hooks'
+import {
+  FileContextProvider,
+  useFileStore,
+} from '@/app/components/base/file-uploader/store'
+import VoiceInput from '@/app/components/base/voice-input'
+import { useToastContext } from '@/app/components/base/toast'
+import FeatureBar from '@/app/components/base/features/new-feature-panel/feature-bar'
+import type { FileUpload } from '@/app/components/base/features/types'
+import { TransferMethod } from '@/types/app'
+
+type ChatInputAreaProps = {
+  showFeatureBar?: boolean
+  showFileUpload?: boolean
+  featureBarDisabled?: boolean
+  onFeatureBarClick?: (state: boolean) => void
+  visionConfig?: FileUpload
+  speechToTextConfig?: EnableType
+  onSend?: OnSend
+  inputs?: Record<string, any>
+  inputsForm?: InputForm[]
+  theme?: Theme | null
+}
+const ChatInputArea = ({
+  showFeatureBar,
+  showFileUpload,
+  featureBarDisabled,
+  onFeatureBarClick,
+  visionConfig,
+  speechToTextConfig = { enabled: true },
+  onSend,
+  inputs = {},
+  inputsForm = [],
+  theme,
+}: ChatInputAreaProps) => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const {
+    wrapperRef,
+    textareaRef,
+    textValueRef,
+    holdSpaceRef,
+    handleTextareaResize,
+    isMultipleLine,
+  } = useTextAreaHeight()
+  const [query, setQuery] = useState('')
+  const isUseInputMethod = useRef(false)
+  const [showVoiceInput, setShowVoiceInput] = useState(false)
+  const filesStore = useFileStore()
+  const {
+    handleDragFileEnter,
+    handleDragFileLeave,
+    handleDragFileOver,
+    handleDropFile,
+    handleClipboardPasteFile,
+    isDragActive,
+  } = useFile(visionConfig!)
+  const { checkInputsForm } = useCheckInputsForms()
+
+  const handleSend = () => {
+    if (onSend) {
+      const { files, setFiles } = filesStore.getState()
+      if (files.find(item => item.transferMethod === TransferMethod.local_file && !item.uploadedId)) {
+        notify({ type: 'info', message: t('appDebug.errorMessage.waitForFileUpload') })
+        return
+      }
+      if (!query || !query.trim()) {
+        notify({ type: 'info', message: t('appAnnotation.errorMessage.queryRequired') })
+        return
+      }
+      if (checkInputsForm(inputs, inputsForm)) {
+        onSend(query, files)
+        setQuery('')
+        setFiles([])
+      }
+    }
+  }
+
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.code === 'Enter') {
+      e.preventDefault()
+      // prevent send message when using input method enter
+      if (!e.shiftKey && !isUseInputMethod.current)
+        handleSend()
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    isUseInputMethod.current = e.nativeEvent.isComposing
+    if (e.code === 'Enter' && !e.shiftKey) {
+      setQuery(query.replace(/\n$/, ''))
+      e.preventDefault()
+    }
+  }
+
+  const handleShowVoiceInput = useCallback(() => {
+    (Recorder as any).getPermission().then(() => {
+      setShowVoiceInput(true)
+    }, () => {
+      notify({ type: 'error', message: t('common.voiceInput.notAllow') })
+    })
+  }, [t, notify])
+
+  const operation = (
+    <Operation
+      ref={holdSpaceRef}
+      fileConfig={visionConfig}
+      speechToTextConfig={speechToTextConfig}
+      onShowVoiceInput={handleShowVoiceInput}
+      onSend={handleSend}
+      theme={theme}
+    />
+  )
+
+  return (
+    <>
+      <div
+        className={cn(
+          'relative pb-[9px] bg-components-panel-bg-blur border border-components-chat-input-border rounded-xl shadow-md z-10',
+          isDragActive && 'border border-dashed border-components-option-card-option-selected-border',
+        )}
+      >
+        <div className='relative px-[9px] pt-[9px] max-h-[158px] overflow-x-hidden overflow-y-auto'>
+          <FileListInChatInput fileConfig={visionConfig!} />
+          <div
+            ref={wrapperRef}
+            className='flex items-center justify-between'
+          >
+            <div className='flex items-center relative grow w-full'>
+              <div
+                ref={textValueRef}
+                className='absolute w-auto h-auto p-1 leading-6 body-lg-regular pointer-events-none whitespace-pre invisible'
+              >
+                {query}
+              </div>
+              <Textarea
+                ref={textareaRef}
+                className={cn(
+                  'p-1 w-full leading-6 body-lg-regular text-text-tertiary outline-none',
+                )}
+                placeholder={t('common.chat.inputPlaceholder') || ''}
+                autoSize={{ minRows: 1 }}
+                onResize={handleTextareaResize}
+                value={query}
+                onChange={(e) => {
+                  setQuery(e.target.value)
+                  handleTextareaResize()
+                }}
+                onKeyUp={handleKeyUp}
+                onKeyDown={handleKeyDown}
+                onPaste={handleClipboardPasteFile}
+                onDragEnter={handleDragFileEnter}
+                onDragLeave={handleDragFileLeave}
+                onDragOver={handleDragFileOver}
+                onDrop={handleDropFile}
+              />
+            </div>
+            {
+              !isMultipleLine && operation
+            }
+          </div>
+          {
+            showVoiceInput && (
+              <VoiceInput
+                onCancel={() => setShowVoiceInput(false)}
+                onConverted={text => setQuery(text)}
+              />
+            )
+          }
+        </div>
+        {
+          isMultipleLine && (
+            <div className='px-[9px]'>{operation}</div>
+          )
+        }
+      </div>
+      {showFeatureBar && <FeatureBar showFileUpload={showFileUpload} disabled={featureBarDisabled} onFeatureBarClick={onFeatureBarClick} />}
+    </>
+  )
+}
+
+const ChatInputAreaWrapper = (props: ChatInputAreaProps) => {
+  return (
+    <FileContextProvider>
+      <ChatInputArea {...props} />
+    </FileContextProvider>
+  )
+}
+
+export default ChatInputAreaWrapper
--- a/web/app/components/base/chat/chat/chat-input-area/operation.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
@@ -0,0 +1,76 @@
+import {
+  forwardRef,
+  memo,
+} from 'react'
+import {
+  RiMicLine,
+  RiSendPlane2Fill,
+} from '@remixicon/react'
+import type {
+  EnableType,
+} from '../../types'
+import type { Theme } from '../../embedded-chatbot/theme/theme-context'
+import Button from '@/app/components/base/button'
+import ActionButton from '@/app/components/base/action-button'
+import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
+import type { FileUpload } from '@/app/components/base/features/types'
+import cn from '@/utils/classnames'
+
+type OperationProps = {
+  fileConfig?: FileUpload
+  speechToTextConfig?: EnableType
+  onShowVoiceInput?: () => void
+  onSend: () => void
+  theme?: Theme | null
+}
+const Operation = forwardRef<HTMLDivElement, OperationProps>(({
+  fileConfig,
+  speechToTextConfig,
+  onShowVoiceInput,
+  onSend,
+  theme,
+}, ref) => {
+  return (
+    <div
+      className={cn(
+        'shrink-0 flex items-center justify-end',
+      )}
+    >
+      <div
+        className='flex items-center pl-1'
+        ref={ref}
+      >
+        <div className='flex items-center space-x-1'>
+          {fileConfig?.enabled && <FileUploaderInChatInput fileConfig={fileConfig} />}
+          {
+            speechToTextConfig?.enabled && (
+              <ActionButton
+                size='l'
+                onClick={onShowVoiceInput}
+              >
+                <RiMicLine className='w-5 h-5' />
+              </ActionButton>
+            )
+          }
+        </div>
+        <Button
+          className='ml-3 px-0 w-8'
+          variant='primary'
+          onClick={onSend}
+          style={
+            theme
+              ? {
+                backgroundColor: theme.primaryColor,
+              }
+              : {}
+          }
+        >
+          <RiSendPlane2Fill className='w-4 h-4' />
+        </Button>
+      </div>
+    </div>
+  )
+})
+Operation.displayName = 'Operation'
+
+export default memo(Operation)
--- a/web/app/components/base/chat/chat/chat-input.tsx
+++ b/web/app/components/base/chat/chat/chat-input.tsx
@@ -1,258 +0,0 @@
-import type { FC } from 'react'
-import {
-  memo,
-  useRef,
-  useState,
-} from 'react'
-import { useContext } from 'use-context-selector'
-import Recorder from 'js-audio-recorder'
-import { useTranslation } from 'react-i18next'
-import Textarea from 'rc-textarea'
-import type {
-  EnableType,
-  OnSend,
-  VisionConfig,
-} from '../types'
-import { TransferMethod } from '../types'
-import { useChatWithHistoryContext } from '../chat-with-history/context'
-import type { Theme } from '../embedded-chatbot/theme/theme-context'
-import { CssTransform } from '../embedded-chatbot/theme/utils'
-import Tooltip from '@/app/components/base/tooltip'
-import { ToastContext } from '@/app/components/base/toast'
-import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import VoiceInput from '@/app/components/base/voice-input'
-import { Microphone01 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
-import { Microphone01 as Microphone01Solid } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
-import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
-import { Send03 } from '@/app/components/base/icons/src/vender/solid/communication'
-import ChatImageUploader from '@/app/components/base/image-uploader/chat-image-uploader'
-import ImageList from '@/app/components/base/image-uploader/image-list'
-import {
-  useClipboardUploader,
-  useDraggableUploader,
-  useImageFiles,
-} from '@/app/components/base/image-uploader/hooks'
-import cn from '@/utils/classnames'
-
-type ChatInputProps = {
-  visionConfig?: VisionConfig
-  speechToTextConfig?: EnableType
-  onSend?: OnSend
-  theme?: Theme | null
-  noSpacing?: boolean
-}
-const ChatInput: FC<ChatInputProps> = ({
-  visionConfig,
-  speechToTextConfig,
-  onSend,
-  theme,
-  noSpacing,
-}) => {
-  const { appData } = useChatWithHistoryContext()
-  const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
-  const [voiceInputShow, setVoiceInputShow] = useState(false)
-  const textAreaRef = useRef<HTMLTextAreaElement>(null)
-  const {
-    files,
-    onUpload,
-    onRemove,
-    onReUpload,
-    onImageLinkLoadError,
-    onImageLinkLoadSuccess,
-    onClear,
-  } = useImageFiles()
-  const { onPaste } = useClipboardUploader({ onUpload, visionConfig, files })
-  const { onDragEnter, onDragLeave, onDragOver, onDrop, isDragActive } = useDraggableUploader<HTMLTextAreaElement>({ onUpload, files, visionConfig })
-  const isUseInputMethod = useRef(false)
-  const [query, setQuery] = useState('')
-  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const value = e.target.value
-    setQuery(value)
-  }
-
-  const handleSend = () => {
-    if (onSend) {
-      if (files.find(item => item.type === TransferMethod.local_file && !item.fileId)) {
-        notify({ type: 'info', message: t('appDebug.errorMessage.waitForImgUpload') })
-        return
-      }
-      if (!query || !query.trim()) {
-        notify({ type: 'info', message: t('appAnnotation.errorMessage.queryRequired') })
-        return
-      }
-      onSend(query, files.filter(file => file.progress !== -1).map(fileItem => ({
-        type: 'image',
-        transfer_method: fileItem.type,
-        url: fileItem.url,
-        upload_file_id: fileItem.fileId,
-      })))
-      setQuery('')
-      onClear()
-    }
-  }
-
-  const handleKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault()
-      // prevent send message when using input method enter
-      if (!e.shiftKey && !isUseInputMethod.current)
-        handleSend()
-    }
-  }
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    isUseInputMethod.current = e.nativeEvent.isComposing
-    if (e.key === 'Enter' && !e.shiftKey) {
-      setQuery(query.replace(/\n$/, ''))
-      e.preventDefault()
-    }
-  }
-
-  const logError = (message: string) => {
-    notify({ type: 'error', message })
-  }
-  const handleVoiceInputShow = () => {
-    (Recorder as any).getPermission().then(() => {
-      setVoiceInputShow(true)
-    }, () => {
-      logError(t('common.voiceInput.notAllow'))
-    })
-  }
-
-  const [isActiveIconFocused, setActiveIconFocused] = useState(false)
-
-  const media = useBreakpoints()
-  const isMobile = media === MediaType.mobile
-  const sendIconThemeStyle = theme
-    ? {
-      color: (isActiveIconFocused || query || (query.trim() !== '')) ? theme.primaryColor : '#d1d5db',
-    }
-    : {}
-  const sendBtn = (
-    <div
-      className='group flex items-center justify-center w-8 h-8 rounded-lg hover:bg-[#EBF5FF] cursor-pointer'
-      onMouseEnter={() => setActiveIconFocused(true)}
-      onMouseLeave={() => setActiveIconFocused(false)}
-      onClick={handleSend}
-      style={isActiveIconFocused ? CssTransform(theme?.chatBubbleColorStyle ?? '') : {}}
-    >
-      <Send03
-        style={sendIconThemeStyle}
-        className={`
-          w-5 h-5 text-gray-300 group-hover:text-primary-600
-          ${!!query.trim() && 'text-primary-600'}
-        `}
-      />
-    </div>
-  )
-
-  return (
-    <>
-      <div className={cn('relative', !noSpacing && 'px-8')}>
-        <div
-          className={`
-            p-[5.5px] max-h-[150px] bg-white border-[1.5px] border-gray-200 rounded-xl overflow-y-auto
-            ${isDragActive && 'border-primary-600'} mb-2
-          `}
-        >
-          {
-            visionConfig?.enabled && (
-              <>
-                <div className={cn('absolute bottom-2 flex items-center', noSpacing ? 'left-2' : 'left-10')}>
-                  <ChatImageUploader
-                    settings={visionConfig}
-                    onUpload={onUpload}
-                    disabled={files.length >= visionConfig.number_limits}
-                  />
-                  <div className='mx-1 w-[1px] h-4 bg-black/5' />
-                </div>
-                <div className='pl-[52px]'>
-                  <ImageList
-                    list={files}
-                    onRemove={onRemove}
-                    onReUpload={onReUpload}
-                    onImageLinkLoadSuccess={onImageLinkLoadSuccess}
-                    onImageLinkLoadError={onImageLinkLoadError}
-                  />
-                </div>
-              </>
-            )
-          }
-          <Textarea
-            ref={textAreaRef}
-            className={`
-              block w-full px-2 pr-[118px] py-[7px] leading-5 max-h-none text-sm text-gray-700 outline-none appearance-none resize-none
-              ${visionConfig?.enabled && 'pl-12'}
-            `}
-            value={query}
-            onChange={handleContentChange}
-            onKeyUp={handleKeyUp}
-            onKeyDown={handleKeyDown}
-            onPaste={onPaste}
-            onDragEnter={onDragEnter}
-            onDragLeave={onDragLeave}
-            onDragOver={onDragOver}
-            onDrop={onDrop}
-            autoSize
-          />
-          <div className={cn('absolute bottom-[7px] flex items-center h-8', noSpacing ? 'right-2' : 'right-10')}>
-            <div className='flex items-center px-1 h-5 rounded-md bg-gray-100 text-xs font-medium text-gray-500'>
-              {query.trim().length}
-            </div>
-            {
-              query
-                ? (
-                  <div className='flex justify-center items-center ml-2 w-8 h-8 cursor-pointer hover:bg-gray-100 rounded-lg' onClick={() => setQuery('')}>
-                    <XCircle className='w-4 h-4 text-[#98A2B3]' />
-                  </div>
-                )
-                : speechToTextConfig?.enabled
-                  ? (
-                    <div
-                      className='group flex justify-center items-center ml-2 w-8 h-8 hover:bg-primary-50 rounded-lg cursor-pointer'
-                      onClick={handleVoiceInputShow}
-                    >
-                      <Microphone01 className='block w-4 h-4 text-gray-500 group-hover:hidden' />
-                      <Microphone01Solid className='hidden w-4 h-4 text-primary-600 group-hover:block' />
-                    </div>
-                  )
-                  : null
-            }
-            <div className='mx-2 w-[1px] h-4 bg-black opacity-5' />
-            {isMobile
-              ? sendBtn
-              : (
-                <Tooltip
-                  popupContent={
-                    <div>
-                      <div>{t('common.operation.send')} Enter</div>
-                      <div>{t('common.operation.lineBreak')} Shift Enter</div>
-                    </div>
-                  }
-                >
-                  {sendBtn}
-                </Tooltip>
-              )}
-          </div>
-          {
-            voiceInputShow && (
-              <VoiceInput
-                onCancel={() => setVoiceInputShow(false)}
-                onConverted={(text) => {
-                  setQuery(text)
-                  textAreaRef.current?.focus()
-                }}
-              />
-            )
-          }
-        </div>
-      </div>
-      {appData?.site?.custom_disclaimer && <div className='text-xs text-gray-500 mt-1 text-center'>
-        {appData.site.custom_disclaimer}
-      </div>}
-    </>
-  )
-}
-
-export default memo(ChatInput)
--- a/web/app/components/base/chat/chat/check-input-forms-hooks.ts
+++ b/web/app/components/base/chat/chat/check-input-forms-hooks.ts
@@ -0,0 +1,54 @@
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { InputForm } from './type'
+import { useToastContext } from '@/app/components/base/toast'
+import { InputVarType } from '@/app/components/workflow/types'
+import { TransferMethod } from '@/types/app'
+
+export const useCheckInputsForms = () => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+
+  const checkInputsForm = useCallback((inputs: Record<string, any>, inputsForm: InputForm[]) => {
+    let hasEmptyInput = ''
+    let fileIsUploading = false
+    const requiredVars = inputsForm.filter(({ required }) => required)
+
+    if (requiredVars?.length) {
+      requiredVars.forEach(({ variable, label, type }) => {
+        if (hasEmptyInput)
+          return
+
+        if (fileIsUploading)
+          return
+
+        if (!inputs[variable])
+          hasEmptyInput = label as string
+
+        if ((type === InputVarType.singleFile || type === InputVarType.multiFiles) && inputs[variable]) {
+          const files = inputs[variable]
+          if (Array.isArray(files))
+            fileIsUploading = files.find(item => item.transferMethod === TransferMethod.local_file && !item.uploadedId)
+          else
+            fileIsUploading = files.transferMethod === TransferMethod.local_file && !files.uploadedId
+        }
+      })
+    }
+
+    if (hasEmptyInput) {
+      notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: hasEmptyInput }) })
+      return false
+    }
+
+    if (fileIsUploading) {
+      notify({ type: 'info', message: t('appDebug.errorMessage.waitForFileUpload') })
+      return
+    }
+
+    return true
+  }, [notify, t])
+
+  return {
+    checkInputsForm,
+  }
+}
--- a/web/app/components/base/chat/chat/context.tsx
+++ b/web/app/components/base/chat/chat/context.tsx
@@ -10,7 +10,6 @@ export type ChatContextValue = Pick<ChatProps, 'config'
  | 'showPromptLog'
  | 'questionIcon'
  | 'answerIcon'
-  | 'allToolIcons'
  | 'onSend'
  | 'onRegenerate'
  | 'onAnnotationEdited'
@@ -35,7 +34,6 @@ export const ChatContextProvider = ({
  showPromptLog,
  questionIcon,
  answerIcon,
-  allToolIcons,
  onSend,
  onRegenerate,
  onAnnotationEdited,
@@ -51,7 +49,6 @@ export const ChatContextProvider = ({
      showPromptLog,
      questionIcon,
      answerIcon,
-      allToolIcons,
      onSend,
      onRegenerate,
      onAnnotationEdited,
--- a/web/app/components/base/chat/chat/hooks.ts
+++ b/web/app/components/base/chat/chat/hooks.ts
@@ -6,23 +6,31 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { produce, setAutoFreeze } from 'immer'
+import { uniqBy } from 'lodash-es'
 import { useParams, usePathname } from 'next/navigation'
 import { v4 as uuidV4 } from 'uuid'
 import type {
  ChatConfig,
  ChatItem,
  Inputs,
-  PromptVariable,
-  VisionFile,
 } from '../types'
+import type { InputForm } from './type'
+import {
+  getProcessedInputs,
+  processOpeningStatement,
+} from './utils'
 import { TransferMethod } from '@/types/app'
 import { useToastContext } from '@/app/components/base/toast'
 import { ssePost } from '@/service/base'
-import { replaceStringWithValues } from '@/app/components/app/configuration/prompt-value-panel'
 import type { Annotation } from '@/models/log'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import useTimestamp from '@/hooks/use-timestamp'
 import { AudioPlayerManager } from '@/app/components/base/audio-btn/audio.player.manager'
+import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import {
+  getProcessedFiles,
+  getProcessedFilesFromResponse,
+} from '@/app/components/base/file-uploader/utils'

 type GetAbortController = (abortController: AbortController) => void
 type SendCallback = {
@@ -32,50 +40,11 @@ type SendCallback = {
  isPublicAPI?: boolean
 }

-export const useCheckPromptVariables = () => {
-  const { t } = useTranslation()
-  const { notify } = useToastContext()
-
-  const checkPromptVariables = useCallback((promptVariablesConfig: {
-    inputs: Inputs
-    promptVariables: PromptVariable[]
-  }) => {
-    const {
-      promptVariables,
-      inputs,
-    } = promptVariablesConfig
-    let hasEmptyInput = ''
-    const requiredVars = promptVariables.filter(({ key, name, required, type }) => {
-      if (type !== 'string' && type !== 'paragraph' && type !== 'select')
-        return false
-      const res = (!key || !key.trim()) || (!name || !name.trim()) || (required || required === undefined || required === null)
-      return res
-    })
-
-    if (requiredVars?.length) {
-      requiredVars.forEach(({ key, name }) => {
-        if (hasEmptyInput)
-          return
-
-        if (!inputs[key])
-          hasEmptyInput = name
-      })
-    }
-
-    if (hasEmptyInput) {
-      notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: hasEmptyInput }) })
-      return false
-    }
-  }, [notify, t])
-
-  return checkPromptVariables
-}
-
 export const useChat = (
  config?: ChatConfig,
-  promptVariablesConfig?: {
+  formSettings?: {
    inputs: Inputs
-    promptVariables: PromptVariable[]
+    inputsForm: InputForm[]
  },
  prevChatList?: ChatItem[],
  stopChat?: (taskId: string) => void,
@@ -93,7 +62,6 @@ export const useChat = (
  const [suggestedQuestions, setSuggestQuestions] = useState<string[]>([])
  const conversationMessagesAbortControllerRef = useRef<AbortController | null>(null)
  const suggestedQuestionsAbortControllerRef = useRef<AbortController | null>(null)
-  const checkPromptVariables = useCheckPromptVariables()
  const params = useParams()
  const pathname = usePathname()
  useEffect(() => {
@@ -113,8 +81,8 @@ export const useChat = (
  }, [])

  const getIntroduction = useCallback((str: string) => {
-    return replaceStringWithValues(str, promptVariablesConfig?.promptVariables || [], promptVariablesConfig?.inputs || {})
-  }, [promptVariablesConfig?.inputs, promptVariablesConfig?.promptVariables])
+    return processOpeningStatement(str, formSettings?.inputs || {}, formSettings?.inputsForm || [])
+  }, [formSettings?.inputs, formSettings?.inputsForm])
  useEffect(() => {
    if (config?.opening_statement) {
      handleUpdateChatList(produce(chatListRef.current, (draft) => {
@@ -196,7 +164,11 @@ export const useChat = (

  const handleSend = useCallback(async (
    url: string,
-    data: any,
+    data: {
+      query: string
+      files?: FileEntity[]
+      [key: string]: any
+    },
    {
      onGetConversationMessages,
      onGetSuggestedQuestions,
@@ -211,9 +183,6 @@ export const useChat = (
      return false
    }

-    if (promptVariablesConfig?.inputs && promptVariablesConfig?.promptVariables)
-      checkPromptVariables(promptVariablesConfig)
-
    const questionId = `question-${Date.now()}`
    const questionItem = {
      id: questionId,
@@ -244,13 +213,17 @@ export const useChat = (
    handleResponding(true)
    hasStopResponded.current = false

+    const { query, files, inputs, ...restData } = data
    const bodyParams = {
      response_mode: 'streaming',
      conversation_id: conversationId.current,
-      ...data,
+      files: getProcessedFiles(files || []),
+      query,
+      inputs: getProcessedInputs(inputs || {}, formSettings?.inputsForm || []),
+      ...restData,
    }
    if (bodyParams?.files?.length) {
-      bodyParams.files = bodyParams.files.map((item: VisionFile) => {
+      bodyParams.files = bodyParams.files.map((item) => {
        if (item.transfer_method === TransferMethod.local_file) {
          return {
            ...item,
@@ -443,6 +416,8 @@ export const useChat = (
            return
          }
          responseItem.citation = messageEnd.metadata?.retriever_resources || []
+          const processedFilesFromResponse = getProcessedFilesFromResponse(messageEnd.files || [])
+          responseItem.allFiles = uniqBy([...(responseItem.allFiles || []), ...(processedFilesFromResponse || [])], 'id')

          const newListWithAnswer = produce(
            chatListRef.current.filter(item => item.id !== responseItem.id && item.id !== placeholderAnswerId),
@@ -567,15 +542,17 @@ export const useChat = (
      })
    return true
  }, [
-    checkPromptVariables,
    config?.suggested_questions_after_answer,
    updateCurrentQA,
    t,
    notify,
-    promptVariablesConfig,
    handleUpdateChatList,
    handleResponding,
    formatTime,
+    params.token,
+    params.appId,
+    pathname,
+    formSettings,
  ])

  const handleAnnotationEdited = useCallback((query: string, answer: string, index: number) => {
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -22,10 +22,11 @@ import type {
 import type { ThemeBuilder } from '../embedded-chatbot/theme/theme-context'
 import Question from './question'
 import Answer from './answer'
-import ChatInput from './chat-input'
+import ChatInputArea from './chat-input-area'
 import TryToAsk from './try-to-ask'
 import { ChatContextProvider } from './context'
-import classNames from '@/utils/classnames'
+import type { InputForm } from './type'
+import cn from '@/utils/classnames'
 import type { Emoji } from '@/app/components/tools/types'
 import Button from '@/app/components/base/button'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
@@ -43,6 +44,8 @@ export type ChatProps = {
  onStopResponding?: () => void
  noChatInput?: boolean
  onSend?: OnSend
+  inputs?: Record<string, any>
+  inputsForm?: InputForm[]
  onRegenerate?: OnRegenerate
  chatContainerClassName?: string
  chatContainerInnerClassName?: string
@@ -62,6 +65,9 @@ export type ChatProps = {
  hideProcessDetail?: boolean
  hideLogModal?: boolean
  themeBuilder?: ThemeBuilder
+  showFeatureBar?: boolean
+  showFileUpload?: boolean
+  onFeatureBarClick?: (state: boolean) => void
  noSpacing?: boolean
 }

@@ -69,6 +75,8 @@ const Chat: FC<ChatProps> = ({
  appData,
  config,
  onSend,
+  inputs,
+  inputsForm,
  onRegenerate,
  chatList,
  isResponding,
@@ -83,7 +91,6 @@ const Chat: FC<ChatProps> = ({
  showPromptLog,
  questionIcon,
  answerIcon,
-  allToolIcons,
  onAnnotationAdded,
  onAnnotationEdited,
  onAnnotationRemoved,
@@ -93,6 +100,9 @@ const Chat: FC<ChatProps> = ({
  hideProcessDetail,
  hideLogModal,
  themeBuilder,
+  showFeatureBar,
+  showFileUpload,
+  onFeatureBarClick,
  noSpacing,
 }) => {
  const { t } = useTranslation()
@@ -187,7 +197,6 @@ const Chat: FC<ChatProps> = ({
      showPromptLog={showPromptLog}
      questionIcon={questionIcon}
      answerIcon={answerIcon}
-      allToolIcons={allToolIcons}
      onSend={onSend}
      onRegenerate={onRegenerate}
      onAnnotationAdded={onAnnotationAdded}
@@ -198,12 +207,12 @@ const Chat: FC<ChatProps> = ({
      <div className='relative h-full'>
        <div
          ref={chatContainerRef}
-          className={classNames('relative h-full overflow-y-auto overflow-x-hidden', chatContainerClassName)}
+          className={cn('relative h-full overflow-y-auto overflow-x-hidden', chatContainerClassName)}
        >
          {chatNode}
          <div
            ref={chatContainerInnerRef}
-            className={classNames('w-full', !noSpacing && 'px-8', chatContainerInnerClassName)}
+            className={cn('w-full', !noSpacing && 'px-8', chatContainerInnerClassName)}
          >
            {
              chatList.map((item, index) => {
@@ -219,7 +228,6 @@ const Chat: FC<ChatProps> = ({
                      config={config}
                      answerIcon={answerIcon}
                      responding={isLast && isResponding}
-                      allToolIcons={allToolIcons}
                      showPromptLog={showPromptLog}
                      chatAnswerContainerInner={chatAnswerContainerInner}
                      hideProcessDetail={hideProcessDetail}
@@ -248,7 +256,7 @@ const Chat: FC<ChatProps> = ({
        >
          <div
            ref={chatFooterInnerRef}
-            className={`${chatFooterInnerClassName}`}
+            className={cn('relative', chatFooterInnerClassName)}
          >
            {
              !noStopResponding && isResponding && (
@@ -270,12 +278,17 @@ const Chat: FC<ChatProps> = ({
            }
            {
              !noChatInput && (
-                <ChatInput
-                  visionConfig={config?.file_upload?.image}
+                <ChatInputArea
+                  showFeatureBar={showFeatureBar}
+                  showFileUpload={showFileUpload}
+                  featureBarDisabled={isResponding}
+                  onFeatureBarClick={onFeatureBarClick}
+                  visionConfig={config?.file_upload}
                  speechToTextConfig={config?.speech_to_text}
                  onSend={onSend}
+                  inputs={inputs}
+                  inputsForm={inputsForm}
                  theme={themeBuilder?.theme}
-                  noSpacing={noSpacing}
                />
              )
            }
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -8,10 +8,9 @@ import {
 import type { ChatItem } from '../types'
 import type { Theme } from '../embedded-chatbot/theme/theme-context'
 import { CssTransform } from '../embedded-chatbot/theme/utils'
-import { QuestionTriangle } from '@/app/components/base/icons/src/vender/solid/general'
 import { User } from '@/app/components/base/icons/src/public/avatar'
 import { Markdown } from '@/app/components/base/markdown'
-import ImageGallery from '@/app/components/base/image-gallery'
+import { FileList } from '@/app/components/base/file-uploader'

 type QuestionProps = {
  item: ChatItem
@@ -28,21 +27,20 @@ const Question: FC<QuestionProps> = ({
    message_files,
  } = item

-  const imgSrcs = message_files?.length ? message_files.map(item => item.url) : []
  return (
    <div className='flex justify-end mb-2 last:mb-0 pl-10'>
      <div className='group relative mr-4'>
-        <QuestionTriangle
-          className='absolute -right-2 top-0 w-2 h-3 text-[#D1E9FF]/50'
-          style={theme ? { color: theme.chatBubbleColor } : {}}
-        />
        <div
-          className='px-4 py-3 bg-[#D1E9FF]/50 rounded-b-2xl rounded-tl-2xl text-sm text-gray-900'
+          className='px-4 py-3 bg-[#D1E9FF]/50 rounded-2xl text-sm text-gray-900'
          style={theme?.chatBubbleColorStyle ? CssTransform(theme.chatBubbleColorStyle) : {}}
        >
          {
-            !!imgSrcs.length && (
-              <ImageGallery srcs={imgSrcs} />
+            !!message_files?.length && (
+              <FileList
+                files={message_files}
+                showDeleteAction={false}
+                showDownloadAction={true}
+              />
            )
          }
          <Markdown content={content} />
--- a/web/app/components/base/chat/chat/thought/index.tsx
+++ b/web/app/components/base/chat/chat/thought/index.tsx
@@ -2,12 +2,10 @@
 import type { FC } from 'react'
 import React from 'react'
 import type { ThoughtItem, ToolInfoInThought } from '../type'
-import Tool from '@/app/components/base/chat/chat/thought/tool'
-import type { Emoji } from '@/app/components/tools/types'
+import ToolDetail from '@/app/components/base/chat/chat/answer/tool-detail'

 export type IThoughtProps = {
  thought: ThoughtItem
-  allToolIcons: Record<string, string | Emoji>
  isFinished: boolean
 }

@@ -24,7 +22,6 @@ function getValue(value: string, isValueArray: boolean, index: number) {

 const Thought: FC<IThoughtProps> = ({
  thought,
-  allToolIcons,
  isFinished,
 }) => {
  const [toolNames, isValueArray]: [string[], boolean] = (() => {
@@ -50,10 +47,9 @@ const Thought: FC<IThoughtProps> = ({
  return (
    <div className='my-2 space-y-2'>
      {toolThoughtList.map((item: ToolInfoInThought, index) => (
-        <Tool
+        <ToolDetail
          key={index}
          payload={item}
-          allToolIcons={allToolIcons}
        />
      ))}
    </div>
--- a/web/app/components/base/chat/chat/type.ts
+++ b/web/app/components/base/chat/chat/type.ts
@@ -1,6 +1,8 @@
 import type { TypeWithI18N } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { Annotation, MessageRating } from '@/models/log'
-import type { VisionFile } from '@/types/app'
+import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import type { InputVarType } from '@/app/components/workflow/types'
+import type { FileResponse } from '@/types/workflow'

 export type MessageMore = {
  time: string
@@ -42,7 +44,7 @@ export type ThoughtItem = {
  observation: string
  position: number
  files?: string[]
-  message_files?: VisionFile[]
+  message_files?: FileEntity[]
 }

 export type CitationItem = {
@@ -88,9 +90,9 @@ export type IChatItem = {
  useCurrentUserAvatar?: boolean
  isOpeningStatement?: boolean
  suggestedQuestions?: string[]
-  log?: { role: string; text: string; files?: VisionFile[] }[]
+  log?: { role: string; text: string; files?: FileEntity[] }[]
  agent_thoughts?: ThoughtItem[]
-  message_files?: VisionFile[]
+  message_files?: FileEntity[]
  workflow_run_id?: string
  // for agent log
  conversationId?: string
@@ -112,6 +114,7 @@ export type Metadata = {
 export type MessageEnd = {
  id: string
  metadata: Metadata
+  files?: FileResponse[]
 }

 export type MessageReplace = {
@@ -129,3 +132,11 @@ export type AnnotationReply = {
  annotation_id: string
  annotation_author_name: string
 }
+
+export type InputForm = {
+  type: InputVarType
+  label: string
+  variable: any
+  required: boolean
+  [key: string]: any
+}
--- a/web/app/components/base/chat/chat/utils.ts
+++ b/web/app/components/base/chat/chat/utils.ts
@@ -0,0 +1,32 @@
+import type { InputForm } from './type'
+import { InputVarType } from '@/app/components/workflow/types'
+import { getProcessedFiles } from '@/app/components/base/file-uploader/utils'
+
+export const processOpeningStatement = (openingStatement: string, inputs: Record<string, any>, inputsForm: InputForm[]) => {
+  if (!openingStatement)
+    return openingStatement
+
+  return openingStatement.replace(/\{\{([^}]+)\}\}/g, (match, key) => {
+    const name = inputs[key]
+    if (name) { // has set value
+      return name
+    }
+
+    const valueObj = inputsForm.find(v => v.variable === key)
+    return valueObj ? `{{${valueObj.label}}}` : match
+  })
+}
+
+export const getProcessedInputs = (inputs: Record<string, any>, inputsForm: InputForm[]) => {
+  const processedInputs = { ...inputs }
+
+  inputsForm.forEach((item) => {
+    if (item.type === InputVarType.multiFiles && inputs[item.variable])
+      processedInputs[item.variable] = getProcessedFiles(inputs[item.variable])
+
+    if (item.type === InputVarType.singleFile && inputs[item.variable])
+      processedInputs[item.variable] = getProcessedFiles([inputs[item.variable]])[0]
+  })
+
+  return processedInputs
+}
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@@ -58,7 +58,7 @@ const ChatWrapper = () => {
    appConfig,
    {
      inputs: (currentConversationId ? currentConversationItem?.inputs : newConversationInputs) as any,
-      promptVariables: inputsForms,
+      inputsForm: inputsForms,
    },
    appPrevChatList,
    taskId => stopChatMessageResponding('', taskId, isInstalledApp, appId),
@@ -72,14 +72,12 @@ const ChatWrapper = () => {
  const doSend: OnSend = useCallback((message, files, last_answer) => {
    const data: any = {
      query: message,
+      files,
      inputs: currentConversationId ? currentConversationItem?.inputs : newConversationInputs,
      conversation_id: currentConversationId,
      parent_message_id: last_answer?.id || getLastAnswer(chatListRef.current)?.id || null,
    }

-    if (appConfig?.file_upload?.image.enabled && files?.length)
-      data.files = files
-
    handleSend(
      getUrl('chat-messages', isInstalledApp, appId || ''),
      data,
@@ -159,6 +157,8 @@ const ChatWrapper = () => {
      chatFooterClassName='pb-4'
      chatFooterInnerClassName={cn('mx-auto w-full max-w-full tablet:px-4', isMobile && 'px-4')}
      onSend={doSend}
+      inputs={currentConversationId ? currentConversationItem?.inputs as any : newConversationInputs}
+      inputsForm={inputsForms}
      onRegenerate={doRegenerate}
      onStopResponding={handleStop}
      chatNode={chatNode}
--- a/web/app/components/base/chat/embedded-chatbot/config-panel/form-input.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/config-panel/form-input.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { memo } from 'react'
+import Textarea from '@/app/components/base/textarea'

 type InputProps = {
  form: any
@@ -23,9 +24,9 @@ const FormInput: FC<InputProps> = ({

  if (type === 'paragraph') {
    return (
-      <textarea
+      <Textarea
        value={value}
-        className='grow h-[104px] rounded-lg bg-gray-100 px-2.5 py-2 outline-none appearance-none resize-none'
+        className='resize-none'
        onChange={e => onChange(variable, e.target.value)}
        placeholder={`${label}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
      />
--- a/web/app/components/base/chat/embedded-chatbot/config-panel/form.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/config-panel/form.tsx
@@ -1,24 +1,26 @@
-import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useEmbeddedChatbotContext } from '../context'
 import Input from './form-input'
 import { PortalSelect } from '@/app/components/base/select'
+import { InputVarType } from '@/app/components/workflow/types'
+import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'

 const Form = () => {
  const { t } = useTranslation()
  const {
    inputsForms,
    newConversationInputs,
+    newConversationInputsRef,
    handleNewConversationInputsChange,
    isMobile,
  } = useEmbeddedChatbotContext()

-  const handleFormChange = useCallback((variable: string, value: string) => {
+  const handleFormChange = (variable: string, value: any) => {
    handleNewConversationInputsChange({
-      ...newConversationInputs,
+      ...newConversationInputsRef.current,
      [variable]: value,
    })
-  }, [newConversationInputs, handleNewConversationInputsChange])
+  }

  const renderField = (form: any) => {
    const {
@@ -49,6 +51,46 @@ const Form = () => {
      )
    }

+    if (form.type === 'number') {
+      return (
+        <input
+          className="grow h-9 rounded-lg bg-gray-100 px-2.5 outline-none appearance-none"
+          type="number"
+          value={newConversationInputs[variable] || ''}
+          onChange={e => handleFormChange(variable, e.target.value)}
+          placeholder={`${label}${!required ? `(${t('appDebug.variableTable.optional')})` : ''}`}
+        />
+      )
+    }
+    if (form.type === InputVarType.singleFile) {
+      return (
+        <FileUploaderInAttachmentWrapper
+          value={newConversationInputs[variable] ? [newConversationInputs[variable]] : []}
+          onChange={files => handleFormChange(variable, files[0])}
+          fileConfig={{
+            allowed_file_types: form.allowed_file_types,
+            allowed_file_extensions: form.allowed_file_extensions,
+            allowed_file_upload_methods: form.allowed_file_upload_methods,
+            number_limits: 1,
+          }}
+        />
+      )
+    }
+    if (form.type === InputVarType.multiFiles) {
+      return (
+        <FileUploaderInAttachmentWrapper
+          value={newConversationInputs[variable]}
+          onChange={files => handleFormChange(variable, files)}
+          fileConfig={{
+            allowed_file_types: form.allowed_file_types,
+            allowed_file_extensions: form.allowed_file_extensions,
+            allowed_file_upload_methods: form.allowed_file_upload_methods,
+            number_limits: form.max_length,
+          }}
+        />
+      )
+    }
+
    return (
      <PortalSelect
        popupClassName='w-[200px]'
--- a/web/app/components/base/chat/embedded-chatbot/context.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/context.tsx
@@ -29,6 +29,7 @@ export type EmbeddedChatbotContextValue = {
  conversationList: AppConversationData['data']
  showConfigPanelBeforeChat: boolean
  newConversationInputs: Record<string, any>
+  newConversationInputsRef: RefObject<Record<string, any>>
  handleNewConversationInputsChange: (v: Record<string, any>) => void
  inputsForms: any[]
  handleNewConversation: () => void
@@ -51,6 +52,7 @@ export const EmbeddedChatbotContext = createContext<EmbeddedChatbotContextValue>
  conversationList: [],
  showConfigPanelBeforeChat: false,
  newConversationInputs: {},
+  newConversationInputsRef: { current: {} },
  handleNewConversationInputsChange: () => {},
  inputsForms: [],
  handleNewConversation: () => {},
--- a/web/app/components/base/chat/embedded-chatbot/hooks.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
@@ -30,6 +30,8 @@ import type {
 } from '@/models/share'
 import { useToastContext } from '@/app/components/base/toast'
 import { changeLanguage } from '@/i18n/i18next-config'
+import { InputVarType } from '@/app/components/workflow/types'
+import { TransferMethod } from '@/types/app'

 export const useEmbeddedChatbot = () => {
  const isInstalledApp = false
@@ -94,7 +96,7 @@ export const useEmbeddedChatbot = () => {
    setNewConversationInputs(newInputs)
  }, [])
  const inputsForms = useMemo(() => {
-    return (appParams?.user_input_form || []).filter((item: any) => item.paragraph || item.select || item['text-input'] || item.number).map((item: any) => {
+    return (appParams?.user_input_form || []).filter((item: any) => !item.external_data_tool).map((item: any) => {
      if (item.paragraph) {
        let value = initInputs[item.paragraph.variable]
        if (value && item.paragraph.max_length && value.length > item.paragraph.max_length)
@@ -123,6 +125,20 @@ export const useEmbeddedChatbot = () => {
        }
      }

+      if (item['file-list']) {
+        return {
+          ...item['file-list'],
+          type: 'file-list',
+        }
+      }
+
+      if (item.file) {
+        return {
+          ...item.file,
+          type: 'file',
+        }
+      }
+
      let value = initInputs[item['text-input'].variable]
      if (value && item['text-input'].max_length && value.length > item['text-input'].max_length)
        value = value.slice(0, item['text-input'].max_length)
@@ -192,21 +208,38 @@ export const useEmbeddedChatbot = () => {

  const { notify } = useToastContext()
  const checkInputsRequired = useCallback((silent?: boolean) => {
-    if (inputsForms.length) {
-      for (let i = 0; i < inputsForms.length; i += 1) {
-        const item = inputsForms[i]
-
-        if (item.required && !newConversationInputsRef.current[item.variable]) {
-          if (!silent) {
-            notify({
-              type: 'error',
-              message: t('appDebug.errorMessage.valueOfVarRequired', { key: item.variable }),
-            })
-          }
+    let hasEmptyInput = ''
+    let fileIsUploading = false
+    const requiredVars = inputsForms.filter(({ required }) => required)
+    if (requiredVars.length) {
+      requiredVars.forEach(({ variable, label, type }) => {
+        if (hasEmptyInput)
          return
+
+        if (fileIsUploading)
+          return
+
+        if (!newConversationInputsRef.current[variable] && !silent)
+          hasEmptyInput = label as string
+
+        if ((type === InputVarType.singleFile || type === InputVarType.multiFiles) && newConversationInputsRef.current[variable] && !silent) {
+          const files = newConversationInputsRef.current[variable]
+          if (Array.isArray(files))
+            fileIsUploading = files.find(item => item.transferMethod === TransferMethod.local_file && !item.uploadedId)
+          else
+            fileIsUploading = files.transferMethod === TransferMethod.local_file && !files.uploadedId
        }
-      }
-      return true
+      })
+    }
+
+    if (hasEmptyInput) {
+      notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: hasEmptyInput }) })
+      return false
+    }
+
+    if (fileIsUploading) {
+      notify({ type: 'info', message: t('appDebug.errorMessage.waitForFileUpload') })
+      return
    }

    return true
@@ -278,6 +311,7 @@ export const useEmbeddedChatbot = () => {
    setShowConfigPanelBeforeChat,
    setShowNewConversationItemInList,
    newConversationInputs,
+    newConversationInputsRef,
    handleNewConversationInputsChange,
    inputsForms,
    handleNewConversation,
--- a/web/app/components/base/chat/embedded-chatbot/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/index.tsx
@@ -124,6 +124,7 @@ const EmbeddedChatbotWrapper = () => {
    conversationList,
    showConfigPanelBeforeChat,
    newConversationInputs,
+    newConversationInputsRef,
    handleNewConversationInputsChange,
    inputsForms,
    handleNewConversation,
@@ -151,6 +152,7 @@ const EmbeddedChatbotWrapper = () => {
    conversationList,
    showConfigPanelBeforeChat,
    newConversationInputs,
+    newConversationInputsRef,
    handleNewConversationInputsChange,
    inputsForms,
    handleNewConversation,
--- a/web/app/components/base/chat/types.ts
+++ b/web/app/components/base/chat/types.ts
@@ -1,11 +1,11 @@
 import type {
  ModelConfig,
-  VisionFile,
  VisionSettings,
 } from '@/types/app'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import type { NodeTracing } from '@/types/workflow'
 import type { WorkflowRunningStatus } from '@/app/components/workflow/types'
+import type { FileEntity } from '@/app/components/base/file-uploader/types'

 export type { VisionFile } from '@/types/app'
 export { TransferMethod } from '@/types/app'
@@ -55,15 +55,17 @@ export type WorkflowProcess = {
  tracing: NodeTracing[]
  expand?: boolean // for UI
  resultText?: string
+  files?: FileEntity[]
 }

 export type ChatItem = IChatItem & {
  isError?: boolean
  workflowProcess?: WorkflowProcess
  conversationId?: string
+  allFiles?: FileEntity[]
 }

-export type OnSend = (message: string, files?: VisionFile[], last_answer?: ChatItem | null) => void
+export type OnSend = (message: string, files?: FileEntity[], last_answer?: ChatItem | null) => void

 export type OnRegenerate = (chatItem: ChatItem) => void

--- a/web/app/components/base/chat/utils.ts
+++ b/web/app/components/base/chat/utils.ts
@@ -1,6 +1,7 @@
 import { addFileInfos, sortAgentSorts } from '../../tools/utils'
 import { UUID_NIL } from './constants'
 import type { ChatItem } from './types'
+import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'

 async function decodeBase64AndDecompress(base64String: string) {
  const binaryString = atob(base64String)
@@ -30,6 +31,7 @@ function getLastAnswer(chatList: ChatItem[]) {

 function appendQAToChatList(chatList: ChatItem[], item: any) {
  // we append answer first and then question since will reverse the whole chatList later
+  const answerFiles = item.message_files?.filter((file: any) => file.belongs_to === 'assistant') || []
  chatList.push({
    id: item.id,
    content: item.answer,
@@ -37,13 +39,14 @@ function appendQAToChatList(chatList: ChatItem[], item: any) {
    feedback: item.feedback,
    isAnswer: true,
    citation: item.retriever_resources,
-    message_files: item.message_files?.filter((file: any) => file.belongs_to === 'assistant') || [],
+    message_files: getProcessedFilesFromResponse(answerFiles.map((item: any) => ({ ...item, related_id: item.id }))),
  })
+  const questionFiles = item.message_files?.filter((file: any) => file.belongs_to === 'user') || []
  chatList.push({
    id: `question-${item.id}`,
    content: item.query,
    isAnswer: false,
-    message_files: item.message_files?.filter((file: any) => file.belongs_to === 'user') || [],
+    message_files: getProcessedFilesFromResponse(questionFiles.map((item: any) => ({ ...item, related_id: item.id }))),
  })
 }