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/hooks/logic-hooks.ts

@@ -12,7 +12,7 @@ import { PaginationProps, message } from 'antd';
 import { FormInstance } from 'antd/lib';
 import axios from 'axios';
 import { EventSourceParserStream } from 'eventsource-parser/stream';
-import { omit } from 'lodash';
+import { has, isEmpty, omit } from 'lodash';
 import {
   ChangeEventHandler,
   useCallback,
@@ -166,11 +166,43 @@ export const useFetchAppConf = () => {
   return appConf;
 };
 
+function useSetDoneRecord() {
+  const [doneRecord, setDoneRecord] = useState<Record<string, boolean>>({});
+
+  const clearDoneRecord = useCallback(() => {
+    setDoneRecord({});
+  }, []);
+
+  const setDoneRecordById = useCallback((id: string, val: boolean) => {
+    setDoneRecord((prev) => ({ ...prev, [id]: val }));
+  }, []);
+
+  const allDone = useMemo(() => {
+    return Object.values(doneRecord).every((val) => val);
+  }, [doneRecord]);
+
+  useEffect(() => {
+    if (!isEmpty(doneRecord) && allDone) {
+      clearDoneRecord();
+    }
+  }, [allDone, clearDoneRecord, doneRecord]);
+
+  return {
+    doneRecord,
+    setDoneRecord,
+    setDoneRecordById,
+    clearDoneRecord,
+    allDone,
+  };
+}
+
 export const useSendMessageWithSse = (
   url: string = api.completeConversation,
 ) => {
   const [answer, setAnswer] = useState<IAnswer>({} as IAnswer);
   const [done, setDone] = useState(true);
+  const { doneRecord, clearDoneRecord, setDoneRecordById, allDone } =
+    useSetDoneRecord();
   const timer = useRef<any>();
   const sseRef = useRef<AbortController>();
 
@@ -188,6 +220,17 @@ export const useSendMessageWithSse = (
     }, 1000);
   }, []);
 
+  const setDoneValue = useCallback(
+    (body: any, value: boolean) => {
+      if (has(body, 'chatBoxId')) {
+        setDoneRecordById(body.chatBoxId, value);
+      } else {
+        setDone(value);
+      }
+    },
+    [setDoneRecordById],
+  );
+
   const send = useCallback(
     async (
       body: any,
@@ -195,7 +238,7 @@ export const useSendMessageWithSse = (
     ): Promise<{ response: Response; data: ResponseType } | undefined> => {
       initializeSseRef();
       try {
-        setDone(false);
+        setDoneValue(body, false);
         const response = await fetch(url, {
           method: 'POST',
           headers: {
@@ -236,23 +279,34 @@ export const useSendMessageWithSse = (
             }
           }
         }
-        setDone(true);
+        setDoneValue(body, true);
         resetAnswer();
         return { data: await res, response };
       } catch (e) {
-        setDone(true);
+        setDoneValue(body, true);
+
         resetAnswer();
         // Swallow fetch errors silently
       }
     },
-    [initializeSseRef, url, resetAnswer],
+    [initializeSseRef, setDoneValue, url, resetAnswer],
   );
 
   const stopOutputMessage = useCallback(() => {
     sseRef.current?.abort();
   }, []);
 
-  return { send, answer, done, setDone, resetAnswer, stopOutputMessage };
+  return {
+    send,
+    answer,
+    done,
+    doneRecord,
+    allDone,
+    setDone,
+    resetAnswer,
+    stopOutputMessage,
+    clearDoneRecord,
+  };
 };
 
 export const useSpeechWithSse = (url: string = api.tts) => {