feat(web): app's chat support audio/video/document file

web/src/views/ApplicationConfig/components/Chat.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:27:39 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-03 14:21:54
+ * @Last Modified time: 2026-03-04 18:51:20
  */
 /**
  * Chat debugging component for application testing
@@ -13,7 +13,7 @@
 import { type FC, useEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx'
-import { Flex, Dropdown, type MenuProps, App } from 'antd'
+import { Flex, Dropdown, type MenuProps, App, Divider } from 'antd'
 
 import ChatIcon from '@/assets/images/application/chat.png'
 import DebuggingEmpty from '@/assets/images/application/debuggingEmpty.png'
@@ -25,7 +25,7 @@ import type { ChatItem } from '@/components/Chat/types'
 import { type SSEMessage } from '@/utils/stream'
 import ChatInput from '@/components/Chat/ChatInput'
 import UploadFiles from '@/views/Conversation/components/FileUpload'
-// import AudioRecorder from '@/components/AudioRecorder'
+import AudioRecorder from '@/components/AudioRecorder'
 import UploadFileListModal from '@/views/Conversation/components/UploadFileListModal'
 import type { UploadFileListModalRef } from '@/views/Conversation/types'
 import type { Variable } from './VariableList/types'
@@ -88,7 +88,7 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
       content: '',
       created_at: Date.now(),
     };
-    
+
     if (isCluster) {
       updateChatList(prev => prev.map(item => ({
         ...item,
@@ -134,7 +134,7 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
     })
   }
   /** Update assistant message when error occurs */
-  const updateErrorAssistantMessage  = (message_length: number, model_config_id?: string) => {
+  const updateErrorAssistantMessage = (message_length: number, model_config_id?: string) => {
     if (message_length > 0 || !model_config_id) return
 
     updateChatList(prev => {
@@ -217,6 +217,8 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
             }
           }
           if (!isCanSend) {
+            setLoading(false)
+            setCompareLoading(false)
             return
           }
           runCompare(data.app_id, {
@@ -243,7 +245,15 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
             "stream": true,
             "timeout": 60,
           }, handleStreamMessage)
-            .finally(() => setLoading(false));
+            .catch(() => {
+              setLoading(false)
+              setCompareLoading(false)
+              updateClusterErrorAssistantMessage(0)
+            })
+            .finally(() => {
+              setLoading(false)
+              setCompareLoading(false)
+            })
         }, 0)
       })
       .catch(() => {
@@ -288,7 +298,7 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
     })
   }
   /** Update cluster message when error occurs */
-  const updateClusterErrorAssistantMessage  = (message_length: number) => {
+  const updateClusterErrorAssistantMessage = (message_length: number) => {
     if (message_length > 0) return
 
     updateChatList(prev => {
@@ -331,7 +341,7 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
           data.map(item => {
             const { conversation_id, content, message_length } = item.data as { conversation_id: string, content: string, message_length: number };
 
-            switch(item.event) {
+            switch (item.event) {
               case 'start':
                 if (conversation_id && conversationId !== conversation_id) {
                   setConversationId(conversation_id);
@@ -354,27 +364,35 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
         };
 
         setTimeout(() => {
-            draftRun(
-              data.app_id,
-              { 
-                message, 
-                conversation_id: conversationId, 
-                stream: true,
-                files: fileList.map(file => {
-                  if (file.url) {
-                    return file
-                  } else {
-                    return {
-                      type: file.type,
-                      transfer_method: 'local_file',
-                      upload_file_id: file.response.data.file_id
-                    }
+          draftRun(
+            data.app_id,
+            {
+              message,
+              conversation_id: conversationId,
+              stream: true,
+              files: fileList.map(file => {
+                if (file.url) {
+                  return file
+                } else {
+                  return {
+                    type: file.type,
+                    transfer_method: 'local_file',
+                    upload_file_id: file.response.data.file_id
                   }
-                }),
-              }, 
-              handleStreamMessage
-            )
-              .finally(() => setLoading(false))
+                }
+              }),
+            },
+            handleStreamMessage
+          )
+            .catch(() => {
+              setLoading(false)
+              setCompareLoading(false)
+              updateClusterErrorAssistantMessage(0)
+            })
+            .finally(() => {
+              setLoading(false)
+              setCompareLoading(false)
+            })
         }, 0)
       })
       .catch(() => {
@@ -393,12 +411,17 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
   const fileChange = (file?: any) => {
     setFileList([...fileList, file])
   }
-  // const handleRecordingComplete = async (file: any) => {
-  //   console.log('file', file)
-  // }
+  const handleRecordingComplete = async (file: any) => {
+    setFileList([...fileList, {
+      uid: file.file_id,
+      response: { data: file },
+      thumbUrl: file.url,
+      type: file.type
+    }])
+  }
 
   const handleShowUpload: MenuProps['onClick'] = ({ key }) => {
-    switch(key) {
+    switch (key) {
       case 'define':
         uploadFileListModalRef.current?.handleOpen()
         break
@@ -415,99 +438,98 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
   return (
     <div className="rb:relative rb:h-full rb:flex rb:flex-col">
       {chatList.length === 0
-        ? <Empty 
-          url={DebuggingEmpty} 
+        ? <Empty
+          url={DebuggingEmpty}
           size={[300, 200]}
-          title={t('application.debuggingEmpty')} 
-          subTitle={t('application.debuggingEmptyDesc')} 
+          title={t('application.debuggingEmpty')}
+          subTitle={t('application.debuggingEmptyDesc')}
           className="rb:h-full"
         />
-      : <>
-        <div className={clsx(`rb:relative rb:grid rb:grid-cols-${chatList.length} rb:overflow-hidden rb:w-full rb:flex-1 rb:min-h-0`)}>
-          {chatList.map((chat, index) => (
-            <div key={index} className={clsx('rb:flex rb:flex-col', {
-              "rb:border-r rb:border-[#DFE4ED]": index !== chatList.length - 1 && chatList.length > 1,
-            })}>
-              {chat.label &&
-                <div className={clsx(
-                  "rb:grid rb:bg-[#F0F3F8] rb:text-center rb:flex-[0_0_auto]",
-                  {
-                    'rb:rounded-tr-xl': index === chatList.length - 1,
-                    'rb:rounded-tl-xl': index === 0,
-                  }
-                )}>
-                  <div className='rb:relative rb:p-[10px_12px] rb:overflow-hidden'>
-                    <div className="rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap rb:w-[calc(100%-24px)]">{chat.label}</div>
-                    <div 
-                      className="rb:w-4 rb:h-4 rb:cursor-pointer rb:absolute rb:top-3 rb:right-3 rb:bg-cover rb:bg-[url('@/assets/images/close.svg')] rb:hover:bg-[url('@/assets/images/close_hover.svg')]" 
-                      onClick={() => handleDelete(index)}
-                    ></div>
+        : <>
+          <div className={clsx(`rb:relative rb:grid rb:grid-cols-${chatList.length} rb:overflow-hidden rb:w-full rb:flex-1 rb:min-h-0`)}>
+            {chatList.map((chat, index) => (
+              <div key={index} className={clsx('rb:flex rb:flex-col', {
+                "rb:border-r rb:border-[#DFE4ED]": index !== chatList.length - 1 && chatList.length > 1,
+              })}>
+                {chat.label &&
+                  <div className={clsx(
+                    "rb:grid rb:bg-[#F0F3F8] rb:text-center rb:flex-[0_0_auto]",
+                    {
+                      'rb:rounded-tr-xl': index === chatList.length - 1,
+                      'rb:rounded-tl-xl': index === 0,
+                    }
+                  )}>
+                    <div className='rb:relative rb:p-[10px_12px] rb:overflow-hidden'>
+                      <div className="rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap rb:w-[calc(100%-24px)]">{chat.label}</div>
+                      <div
+                        className="rb:w-4 rb:h-4 rb:cursor-pointer rb:absolute rb:top-3 rb:right-3 rb:bg-cover rb:bg-[url('@/assets/images/close.svg')] rb:hover:bg-[url('@/assets/images/close_hover.svg')]"
+                        onClick={() => handleDelete(index)}
+                      ></div>
+                    </div>
                   </div>
-                </div>
-              }
-              <ChatContent
-                classNames={{
-                  'rb:mx-[16px] rb:mt-6': true,
-                  'rb:h-[calc(100vh-282px)]': isCluster,
-                  'rb:h-[calc(100vh-380px)]': !isCluster,
-                }} 
-                contentClassNames={{
-                  'rb:max-w-[400px]!': chatList.length === 1,
-                  'rb:max-w-[260px]!': chatList.length === 2,
-                  'rb:max-w-[150px]!': chatList.length === 3,
-                  'rb:max-w-[108px]!': chatList.length === 4,
-                }}
-                empty={<Empty url={ChatIcon} title={t('application.chatEmpty')} isNeedSubTitle={false} size={[240, 200]} className="rb:h-full" />}
-                data={chat.list || []}
-                streamLoading={compareLoading}
-                labelPosition="top"
-                labelFormat={(item) => item.role === 'user' ? t('application.you') : chat.label}
-                errorDesc={t('application.ReplyException')}
-              />
-            </div>
-          ))}
-        </div>
-        <div className="rb:relative rb:flex rb:items-center rb:gap-2.5 rb:m-4 rb:mb-1">
-          <ChatInput
-            message={message}
-            className="rb:relative!"
-            loading={loading}
-            fileChange={updateFileList}
-            fileList={fileList}
-            onSend={isCluster ? handleClusterSend : handleSend}
-            onChange={handleMessageChange}
-          >
-            <Flex justify="space-between" className="rb:flex-1">
-              <Flex gap={8} align="center">
-                <Dropdown
-                  menu={{
-                    items: [
-                      { key: 'define', label: t('memoryConversation.addRemoteFile') },
-                      {
-                        key: 'upload', label: (
-                          <UploadFiles
-                            fileType={['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']}
-                            onChange={fileChange}
-                          />
-                        )
-                      },
-                    ],
-                    onClick: handleShowUpload
+                }
+                <ChatContent
+                  classNames={{
+                    'rb:mx-[16px] rb:mt-6': true,
+                    'rb:h-[calc(100vh-282px)]': isCluster,
+                    'rb:h-[calc(100vh-380px)]': !isCluster,
                   }}
-                >
-                  <div
-                    className="rb:size-6 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/link.svg')] rb:hover:bg-[url('@/assets/images/conversation/link_hover.svg')]"
-                  ></div>
-                </Dropdown>
+                  contentClassNames={{
+                    'rb:max-w-[400px]!': chatList.length === 1,
+                    'rb:max-w-[260px]!': chatList.length === 2,
+                    'rb:max-w-[150px]!': chatList.length === 3,
+                    'rb:max-w-[108px]!': chatList.length === 4,
+                  }}
+                  empty={<Empty url={ChatIcon} title={t('application.chatEmpty')} isNeedSubTitle={false} size={[240, 200]} className="rb:h-full" />}
+                  data={chat.list || []}
+                  streamLoading={compareLoading}
+                  labelPosition="top"
+                  labelFormat={(item) => item.role === 'user' ? t('application.you') : chat.label}
+                  errorDesc={t('application.ReplyException')}
+                />
+              </div>
+            ))}
+          </div>
+          <div className="rb:relative rb:flex rb:items-center rb:gap-2.5 rb:m-4 rb:mb-1">
+            <ChatInput
+              message={message}
+              className="rb:relative!"
+              loading={loading}
+              fileChange={updateFileList}
+              fileList={fileList}
+              onSend={isCluster ? handleClusterSend : handleSend}
+              onChange={handleMessageChange}
+            >
+              <Flex justify="space-between" className="rb:flex-1">
+                <Flex gap={8} align="center">
+                  <Dropdown
+                    menu={{
+                      items: [
+                        { key: 'define', label: t('memoryConversation.addRemoteFile') },
+                        {
+                          key: 'upload', label: (
+                            <UploadFiles
+                              onChange={fileChange}
+                            />
+                          )
+                        },
+                      ],
+                      onClick: handleShowUpload
+                    }}
+                  >
+                    <div
+                      className="rb:size-6 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/link.svg')] rb:hover:bg-[url('@/assets/images/conversation/link_hover.svg')]"
+                    ></div>
+                  </Dropdown>
+                </Flex>
+                <Flex align="center">
+                  <AudioRecorder onRecordingComplete={handleRecordingComplete} />
+                  <Divider type="vertical" className="rb:ml-1.5! rb:mr-3!" />
+                </Flex>
               </Flex>
-              {/* <Flex align="center">
-                <AudioRecorder onRecordingComplete={handleRecordingComplete} />
-                <Divider type="vertical" className="rb:ml-1.5! rb:mr-3!" />
-              </Flex> */}
-            </Flex>
-          </ChatInput>
-        </div>
-      </>
+            </ChatInput>
+          </div>
+        </>
       }
 
       <UploadFileListModal