From 9ee6b9a6c9da1ee3835f85da8b6662de5fb49987 Mon Sep 17 00:00:00 2001
From: ayang <473033518@qq.com>
Date: Fri, 16 May 2025 14:32:11 +0800
Subject: [PATCH] feat: add file upload failure handling and alert message

---
 src/components/Assistant/FileList.tsx | 89 ++++++++++++++++++---------
 src/components/Common/Tooltip2.tsx    | 42 +++++++++++++
 src/components/Search/InputExtra.tsx  |  7 ++-
 src/locales/en/translation.json       |  4 ++
 src/locales/zh/translation.json       |  4 ++
 src/stores/chatStore.ts               |  4 +-
 6 files changed, 118 insertions(+), 32 deletions(-)
 create mode 100644 src/components/Common/Tooltip2.tsx

diff --git a/src/components/Assistant/FileList.tsx b/src/components/Assistant/FileList.tsx
index 7335158a..8bdebe07 100644
--- a/src/components/Assistant/FileList.tsx
+++ b/src/components/Assistant/FileList.tsx
@@ -4,10 +4,11 @@ import { X } from "lucide-react";
 import { useAsyncEffect } from "ahooks";
 import { useTranslation } from "react-i18next";
 
-import { useChatStore } from "@/stores/chatStore";
+import { UploadFile, useChatStore } from "@/stores/chatStore";
 import { useConnectStore } from "@/stores/connectStore";
 import FileIcon from "../Common/Icons/FileIcon";
 import platformAdapter from "@/utils/platformAdapter";
+import Tooltip2 from "../Common/Tooltip2";
 
 interface FileListProps {
   sessionId: string;
@@ -39,29 +40,42 @@ const FileList = (props: FileListProps) => {
 
       if (uploaded) continue;
 
-      const attachmentIds: any = await platformAdapter.commands(
-        "upload_attachment",
-        {
-          serverId,
-          sessionId,
-          filePaths: [path],
+      try {
+        const attachmentIds: any = await platformAdapter.commands(
+          "upload_attachment",
+          {
+            serverId,
+            sessionId,
+            filePaths: [path],
+          }
+        );
+
+        if (!attachmentIds) {
+          throw new Error("Failed to get attachment id");
+        } else {
+          Object.assign(item, {
+            uploaded: true,
+            attachmentId: attachmentIds[0],
+          });
         }
-      );
 
-      if (!attachmentIds) continue;
-
-      Object.assign(item, {
-        uploaded: true,
-        attachmentId: attachmentIds[0],
-      });
-
-      setUploadFiles(uploadFiles);
+        setUploadFiles(uploadFiles);
+      } catch (error) {
+        Object.assign(item, {
+          uploadFailed: true,
+          failedMessage: String(error),
+        });
+      }
     }
   }, [uploadFiles]);
 
-  const deleteFile = async (id: string, attachmentId: string) => {
+  const deleteFile = async (file: UploadFile) => {
+    const { id, uploadFailed, attachmentId } = file;
+
     setUploadFiles(uploadFiles.filter((file) => file.id !== id));
 
+    if (uploadFailed) return;
+
     platformAdapter.commands("delete_attachment", {
       serverId,
       id: attachmentId,
@@ -71,16 +85,25 @@ const FileList = (props: FileListProps) => {
   return (
     <div className="flex flex-wrap gap-y-2 -mx-1 text-sm">
       {uploadFiles.map((file) => {
-        const { id, name, extname, size, uploaded, attachmentId } = file;
+        const {
+          id,
+          name,
+          extname,
+          size,
+          uploaded,
+          attachmentId,
+          uploadFailed,
+          failedMessage,
+        } = file;
 
         return (
           <div key={id} className="w-1/3 px-1">
             <div className="relative group flex items-center gap-1 p-1 rounded-[4px] bg-[#dedede] dark:bg-[#202126]">
-              {attachmentId && (
+              {(uploadFailed || attachmentId) && (
                 <div
                   className="absolute flex justify-center items-center size-[14px] bg-red-600 top-0 right-0 rounded-full cursor-pointer translate-x-[5px] -translate-y-[5px] transition opacity-0 group-hover:opacity-100 "
                   onClick={() => {
-                    deleteFile(id, attachmentId);
+                    deleteFile(file);
                   }}
                 >
                   <X className="size-[10px] text-white" />
@@ -94,16 +117,24 @@ const FileList = (props: FileListProps) => {
                   {name}
                 </div>
 
-                <div className="text-xs text-[#999999]">
-                  {uploaded ? (
-                    <div className="flex gap-2">
-                      {extname && <span>{extname}</span>}
-                      <span>
-                        {filesize(size, { standard: "jedec", spacer: "" })}
-                      </span>
-                    </div>
+                <div className="text-xs">
+                  {uploadFailed && failedMessage ? (
+                    <Tooltip2 content={failedMessage}>
+                      <span className="text-red-500">Upload Failed</span>
+                    </Tooltip2>
                   ) : (
-                    <span>{t("assistant.fileList.uploading")}</span>
+                    <div className="text-[#999]">
+                      {uploaded ? (
+                        <div className="flex gap-2">
+                          {extname && <span>{extname}</span>}
+                          <span>
+                            {filesize(size, { standard: "jedec", spacer: "" })}
+                          </span>
+                        </div>
+                      ) : (
+                        <span>{t("assistant.fileList.uploading")}</span>
+                      )}
+                    </div>
                   )}
                 </div>
               </div>
diff --git a/src/components/Common/Tooltip2.tsx b/src/components/Common/Tooltip2.tsx
new file mode 100644
index 00000000..0db6c2ab
--- /dev/null
+++ b/src/components/Common/Tooltip2.tsx
@@ -0,0 +1,42 @@
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  PopoverPanelProps,
+} from "@headlessui/react";
+import { useBoolean } from "ahooks";
+import clsx from "clsx";
+import { FC, ReactNode } from "react";
+
+interface Tooltip2Props extends PopoverPanelProps {
+  content: string;
+  children: ReactNode;
+}
+
+const Tooltip2: FC<Tooltip2Props> = (props) => {
+  const { content, children, anchor = "top", ...rest } = props;
+  const [visible, { setTrue, setFalse }] = useBoolean(false);
+
+  return (
+    <Popover>
+      <PopoverButton onMouseOver={setTrue} onMouseOut={setFalse}>
+        {children}
+      </PopoverButton>
+      <PopoverPanel
+        {...rest}
+        static
+        anchor={anchor}
+        className={clsx(
+          "fixed z-1000 p-2 rounded-md text-xs text-white bg-black/75 hidden",
+          {
+            "!block": visible,
+          }
+        )}
+      >
+        {content}
+      </PopoverPanel>
+    </Popover>
+  );
+};
+
+export default Tooltip2;
diff --git a/src/components/Search/InputExtra.tsx b/src/components/Search/InputExtra.tsx
index 1eb41a7a..09f9b8d5 100644
--- a/src/components/Search/InputExtra.tsx
+++ b/src/components/Search/InputExtra.tsx
@@ -73,6 +73,7 @@ const InputExtra = ({
   const modifierKeyPressed = useShortcutsStore((state) => {
     return state.modifierKeyPressed;
   });
+  const addError = useAppStore((state) => state.addError);
 
   const state = useReactive<State>({
     screenshotableMonitors: [],
@@ -104,6 +105,8 @@ const InputExtra = ({
       const stat = await getFileMetadata(path);
 
       if (stat.size / 1024 / 1024 > 100) {
+        addError(t("search.input.uploadFileHints.maxSize"));
+
         continue;
       }
 
@@ -184,8 +187,8 @@ const InputExtra = ({
 
   return (
     <Menu>
-      <MenuButton className="size-6">
-        <Tooltip content="支持截图、上传文件，最多 50个，单个文件最大 100 MB。">
+      <MenuButton as="div" className="size-6">
+        <Tooltip content={t("search.input.uploadFileHints.tooltip")}>
           <div className="size-full flex justify-center items-center rounded-lg transition hover:bg-[#EDEDED] dark:hover:bg-[#202126]">
             <Plus
               className={clsx("size-5", {
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 3e9f0fc2..41de741d 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -287,6 +287,10 @@
       "searchPopover": {
         "title": "Search Scope",
         "allScope": "All Scope"
+      },
+      "uploadFileHints": {
+        "tooltip": "Support screenshots, upload files, up to 50, single file up to 100 MB.",
+        "maxSize": "The file size cannot exceed 100 MB."
       }
     },
     "main": {
diff --git a/src/locales/zh/translation.json b/src/locales/zh/translation.json
index 9d040071..d8e33b34 100644
--- a/src/locales/zh/translation.json
+++ b/src/locales/zh/translation.json
@@ -287,6 +287,10 @@
       "searchPopover": {
         "title": "搜索范围",
         "allScope": "所有范围"
+      },
+      "uploadFileHints": {
+        "tooltip": "支持截图、上传文件，最多 50个，单个文件最大 100 MB。",
+        "maxSize": "文件大小不能超过 100 MB。"
       }
     },
     "main": {
diff --git a/src/stores/chatStore.ts b/src/stores/chatStore.ts
index ab8ffe76..c92d7b54 100644
--- a/src/stores/chatStore.ts
+++ b/src/stores/chatStore.ts
@@ -5,12 +5,14 @@ import {
 } from "zustand/middleware";
 import { Metadata } from "tauri-plugin-fs-pro-api";
 
-interface UploadFile extends Metadata {
+export interface UploadFile extends Metadata {
   id: string;
   path: string;
   icon: string;
   uploaded?: boolean;
   attachmentId?: string;
+  uploadFailed?: boolean;
+  failedMessage?: string;
 }
 
 export type IChatStore = {