Fix: Delete the uploaded file in the chat input box, the corresponding file ID is not deleted #9701 (#9702)

### What problem does this PR solve?

Fix: Delete the uploaded file in the chat input box, the corresponding
file ID is not deleted #9701
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/next-chats/chat/chat-box/single-chat-box.tsx

@@ -36,6 +36,7 @@ export function SingleChatBox({ controller }: IProps) {
     removeMessageById,
     stopOutputMessage,
     handleUploadFile,
+    removeFile,
   } = useSendMessage(controller);
   const { data: userInfo } = useFetchUserInfo();
   const { data: currentDialog } = useFetchDialog();
@@ -97,6 +98,7 @@ export function SingleChatBox({ controller }: IProps) {
         stopOutputMessage={stopOutputMessage}
         onUpload={handleUploadFile}
         isUploading={isUploading}
+        removeFile={removeFile}
       />
       {visible && (
         <PdfDrawer

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

@@ -138,7 +138,7 @@ export const useSendMessage = (controller: AbortController) => {
   const { conversationId, isNew } = useGetChatSearchParams();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
 
-  const { handleUploadFile, fileIds, clearFileIds, isUploading } =
+  const { handleUploadFile, fileIds, clearFileIds, isUploading, removeFile } =
     useUploadFile();
 
   const { send, answer, done } = useSendMessageWithSse(
@@ -287,5 +287,6 @@ export const useSendMessage = (controller: AbortController) => {
     stopOutputMessage,
     handleUploadFile,
     isUploading,
+    removeFile,
   };
 };

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

@@ -3,16 +3,21 @@ import { useUploadAndParseFile } from '@/hooks/use-chat-request';
 import { useCallback, useState } from 'react';
 
 export function useUploadFile() {
-  const { uploadAndParseFile, loading } = useUploadAndParseFile();
+  const { uploadAndParseFile, loading, cancel } = useUploadAndParseFile();
   const [fileIds, setFileIds] = useState<string[]>([]);
+  const [fileMap, setFileMap] = useState<Map<File, string>>(new Map());
 
   const handleUploadFile: NonNullable<FileUploadProps['onUpload']> =
     useCallback(
-      async (files) => {
+      async (files, options) => {
         if (Array.isArray(files) && files.length) {
-          const ret = await uploadAndParseFile(files[0]);
+          const ret = await uploadAndParseFile({ file: files[0], options });
           if (ret.code === 0 && Array.isArray(ret.data)) {
             setFileIds((list) => [...list, ...ret.data]);
+            setFileMap((map) => {
+              map.set(files[0], ret.data[0]);
+              return map;
+            });
           }
         }
       },
@@ -21,7 +26,28 @@ export function useUploadFile() {
 
   const clearFileIds = useCallback(() => {
     setFileIds([]);
+    setFileMap(new Map());
   }, []);
 
-  return { handleUploadFile, clearFileIds, fileIds, isUploading: loading };
+  const removeFile = useCallback(
+    (file: File) => {
+      if (loading) {
+        cancel();
+        return;
+      }
+      const id = fileMap.get(file);
+      if (id) {
+        setFileIds((list) => list.filter((item) => item !== id));
+      }
+    },
+    [cancel, fileMap, loading],
+  );
+
+  return {
+    handleUploadFile,
+    clearFileIds,
+    fileIds,
+    isUploading: loading,
+    removeFile,
+  };
 }