Feat: Upload files in the chat box #3221 (#9483)

### What problem does this PR solve?
Feat: Upload files in the chat box #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/next-chats/hooks/use-send-chat-message.ts

@@ -18,6 +18,7 @@ import { useParams, useSearchParams } from 'umi';
 import { v4 as uuid } from 'uuid';
 import { IMessage } from '../chat/interface';
 import { useFindPrologueFromDialogList } from './use-select-conversation-list';
+import { useUploadFile } from './use-upload-file';
 
 export const useSetChatRouteParams = () => {
   const [currentQueryParameters, setSearchParams] = useSearchParams();
@@ -137,6 +138,8 @@ export const useSendMessage = (controller: AbortController) => {
   const { conversationId, isNew } = useGetChatSearchParams();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
 
+  const { handleUploadFile, fileIds, clearFileIds } = useUploadFile();
+
   const { send, answer, done } = useSendMessageWithSse(
     api.completeConversation,
   );
@@ -238,29 +241,35 @@ export const useSendMessage = (controller: AbortController) => {
     }
   }, [answer, addNewestAnswer, conversationId, isNew]);
 
-  const handlePressEnter = useCallback(
-    (documentIds: string[]) => {
-      if (trim(value) === '') return;
-      const id = uuid();
+  const handlePressEnter = useCallback(() => {
+    if (trim(value) === '') return;
+    const id = uuid();
 
-      addNewestQuestion({
-        content: value,
-        doc_ids: documentIds,
+    addNewestQuestion({
+      content: value,
+      doc_ids: fileIds,
+      id,
+      role: MessageType.User,
+    });
+    if (done) {
+      setValue('');
+      handleSendMessage({
         id,
+        content: value.trim(),
         role: MessageType.User,
+        doc_ids: fileIds,
       });
-      if (done) {
-        setValue('');
-        handleSendMessage({
-          id,
-          content: value.trim(),
-          role: MessageType.User,
-          doc_ids: documentIds,
-        });
-      }
-    },
-    [addNewestQuestion, handleSendMessage, done, setValue, value],
-  );
+    }
+    clearFileIds();
+  }, [
+    value,
+    addNewestQuestion,
+    fileIds,
+    done,
+    clearFileIds,
+    setValue,
+    handleSendMessage,
+  ]);
 
   return {
     handlePressEnter,
@@ -275,5 +284,6 @@ export const useSendMessage = (controller: AbortController) => {
     derivedMessages,
     removeMessageById,
     stopOutputMessage,
+    handleUploadFile,
   };
 };

web/src/pages/next-chats/hooks/use-send-multiple-message.ts

@@ -12,6 +12,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 import { IMessage } from '../chat/interface';
 import { useBuildFormRefs } from './use-build-form-refs';
+import { useUploadFile } from './use-upload-file';
 
 export function useSendMultipleChatMessage(
   controller: AbortController,
@@ -24,10 +25,12 @@ export function useSendMultipleChatMessage(
   const { conversationId } = useGetChatSearchParams();
 
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
-  const { send, answer, done } = useSendMessageWithSse(
+  const { send, answer, allDone } = useSendMessageWithSse(
     api.completeConversation,
   );
 
+  const { handleUploadFile, fileIds, clearFileIds } = useUploadFile();
+
   const { setFormRef, getLLMConfigById, isLLMConfigEmpty } =
     useBuildFormRefs(chatBoxIds);
 
@@ -182,12 +185,12 @@ export function useSendMultipleChatMessage(
           id,
           role: MessageType.User,
           chatBoxId,
+          doc_ids: fileIds,
         });
       }
     });
 
-    if (done) {
-      // TODO:
+    if (allDone) {
       setValue('');
       chatBoxIds.forEach((chatBoxId) => {
         if (!isLLMConfigEmpty(chatBoxId)) {
@@ -196,18 +199,22 @@ export function useSendMultipleChatMessage(
               id,
               content: value.trim(),
               role: MessageType.User,
+              doc_ids: fileIds,
             },
             chatBoxId,
           });
         }
       });
     }
+    clearFileIds();
   }, [
     value,
     chatBoxIds,
-    done,
+    allDone,
+    clearFileIds,
     isLLMConfigEmpty,
     addNewestQuestion,
+    fileIds,
     setValue,
     sendMessage,
   ]);
@@ -229,7 +236,8 @@ export function useSendMultipleChatMessage(
     handleInputChange,
     handlePressEnter,
     stopOutputMessage,
-    sendLoading: false,
+    sendLoading: !allDone,
     setFormRef,
+    handleUploadFile,
   };
 }

web/src/pages/next-chats/hooks/use-upload-file.ts

@@ -0,0 +1,27 @@
+import { FileUploadProps } from '@/components/file-upload';
+import { useUploadAndParseFile } from '@/hooks/use-chat-request';
+import { useCallback, useState } from 'react';
+
+export function useUploadFile() {
+  const { uploadAndParseFile } = useUploadAndParseFile();
+  const [fileIds, setFileIds] = useState<string[]>([]);
+
+  const handleUploadFile: NonNullable<FileUploadProps['onUpload']> =
+    useCallback(
+      async (files) => {
+        if (Array.isArray(files) && files.length) {
+          const ret = await uploadAndParseFile(files[0]);
+          if (ret.code === 0 && Array.isArray(ret.data)) {
+            setFileIds((list) => [...list, ...ret.data]);
+          }
+        }
+      },
+      [uploadAndParseFile],
+    );
+
+  const clearFileIds = useCallback(() => {
+    setFileIds([]);
+  }, []);
+
+  return { handleUploadFile, clearFileIds, fileIds };
+}