@lobehub/chat 0.162.7 → 0.162.8

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.162.8](https://github.com/lobehub/lobe-chat/compare/v0.162.7...v0.162.8)
+
+<sup>Released on **2024-05-28**</sup>
+
+#### 💄 Styles
+
+- **misc**: Add optimistic loading for image uploading.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Add optimistic loading for image uploading, closes [#2700](https://github.com/lobehub/lobe-chat/issues/2700) ([f99c9ce](https://github.com/lobehub/lobe-chat/commit/f99c9ce))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.162.7](https://github.com/lobehub/lobe-chat/compare/v0.162.6...v0.162.7)
 
 <sup>Released on **2024-05-28**</sup>

package/README.md

@@ -262,14 +262,14 @@ Our marketplace is not just a showcase platform but also a collaborative space.
 
 <!-- AGENT LIST -->
 
-| Recent Submits                                                                                                                                                                               | Description                                                                                                                                                                                                                                                                                                               |
-| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [C# .NET Technology Expert](https://chat-preview.lobehub.com/market?agent=dotnet-expert)<br/><sup>By **[johnnyqian](https://github.com/johnnyqian)** on **2024-05-28**</sup>                 | C# .NET Technology Expert<br/>`net` `developer` `net-core` `azure` `c` `microsoft` `sql-server` `entity-framework` `ef` `ef-core`                                                                                                                                                                                         |
-| [Daily Assistant](https://chat-preview.lobehub.com/market?agent=junior-helper)<br/><sup>By **[Qinks6](https://github.com/Qinks6)** on **2024-05-28**</sup>                                   | A cute little helper that can search and draw<br/>`assistant` `search` `drawing` `information-retrieval` `user-interaction`                                                                                                                                                                                               |
-| [Node.js Optimizer](https://chat-preview.lobehub.com/market?agent=node-js-devoloper)<br/><sup>By **[chrisuhg](https://github.com/chrisuhg)** on **2024-05-28**</sup>                         | Specializes in Node.js code review, performance optimization, asynchronous programming, error handling, code refactoring, dependency management, security enhancement, test coverage, and documentation writing.<br/>`node-js` `code-optimization` `performance-optimization` `asynchronous-programming` `error-handling` |
-| [Foreign Colleague Evaluation Assistant](https://chat-preview.lobehub.com/market?agent=praise-assistant)<br/><sup>By **[johnnyqian](https://github.com/johnnyqian)** on **2024-05-27**</sup> | Give positive feedback to your colleagues<br/>`foreign-company` `evaluate` `review` `software-engineer` `praise`                                                                                                                                                                                                          |
-
-> 📊 Total agents: [<kbd>**278**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+| Recent Submits                                                                                                                                                               | Description                                                                                                                                                                                                                                                                                                               |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Dart/Flutter Dev](https://chat-preview.lobehub.com/market?agent=dart-flutter)<br/><sup>By **[rezmeplxrf](https://github.com/rezmeplxrf)** on **2024-05-28**</sup>           | Dart/Flutter Expert. Never nest more than 3 levels deep. Use riverpod, flutter_riverpod, riverpod_hook, flutter_hook for state management.<br/>`dart` `flutter` `development` `state-management` `riverpod`                                                                                                               |
+| [C# .NET Technology Expert](https://chat-preview.lobehub.com/market?agent=dotnet-expert)<br/><sup>By **[johnnyqian](https://github.com/johnnyqian)** on **2024-05-28**</sup> | C# .NET Technology Expert<br/>`net` `developer` `net-core` `azure` `c` `microsoft` `sql-server` `entity-framework` `ef` `ef-core`                                                                                                                                                                                         |
+| [Daily Assistant](https://chat-preview.lobehub.com/market?agent=junior-helper)<br/><sup>By **[Qinks6](https://github.com/Qinks6)** on **2024-05-28**</sup>                   | A cute little helper that can search and draw<br/>`assistant` `search` `drawing` `information-retrieval` `user-interaction`                                                                                                                                                                                               |
+| [Node.js Optimizer](https://chat-preview.lobehub.com/market?agent=node-js-devoloper)<br/><sup>By **[chrisuhg](https://github.com/chrisuhg)** on **2024-05-28**</sup>         | Specializes in Node.js code review, performance optimization, asynchronous programming, error handling, code refactoring, dependency management, security enhancement, test coverage, and documentation writing.<br/>`node-js` `code-optimization` `performance-optimization` `asynchronous-programming` `error-handling` |
+
+> 📊 Total agents: [<kbd>**279**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/README.zh-CN.md

@@ -250,14 +250,14 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 <!-- AGENT LIST -->
 
-| 最近新增                                                                                                                                                               | 助手说明                                                                                                                                                            |
-| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [C# .NET 技术专家](https://chat-preview.lobehub.com/market?agent=dotnet-expert)<br/><sup>By **[johnnyqian](https://github.com/johnnyqian)** on **2024-05-28**</sup>    | C# .NET 技术专家<br/>`net` `developer` `net-core` `azure` `c` `microsoft` `sql-server` `entity-framework` `ef` `ef-core`                                            |
-| [日常小助手](https://chat-preview.lobehub.com/market?agent=junior-helper)<br/><sup>By **[Qinks6](https://github.com/Qinks6)** on **2024-05-28**</sup>                  | 一个能搜索、能画图的小可爱<br/>`助手` `搜索` `绘图` `信息查询` `用户交互`                                                                                           |
-| [Node.js 优化师](https://chat-preview.lobehub.com/market?agent=node-js-devoloper)<br/><sup>By **[chrisuhg](https://github.com/chrisuhg)** on **2024-05-28**</sup>      | 擅长 Node.js 代码审查、性能优化、异步编程、错误处理、代码重构、依赖管理、安全增强、测试覆盖率和文档编写。<br/>`node-js` `代码优化` `性能优化` `异步编程` `错误处理` |
-| [外企同事评价助手](https://chat-preview.lobehub.com/market?agent=praise-assistant)<br/><sup>By **[johnnyqian](https://github.com/johnnyqian)** on **2024-05-27**</sup> | 给你的同事好评<br/>`foreign-company` `evaluate` `review` `software-engineer` `praise`                                                                               |
-
-> 📊 Total agents: [<kbd>**278**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
+| 最近新增                                                                                                                                                            | 助手说明                                                                                                                                                                    |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Dart/Flutter Dev](https://chat-preview.lobehub.com/market?agent=dart-flutter)<br/><sup>By **[rezmeplxrf](https://github.com/rezmeplxrf)** on **2024-05-28**</sup>  | Dart/Flutter 전문가. 3단계 이상 중첩하지 않음. 상태 관리에 riverpod, flutter_riverpod, riverpod_hook, flutter_hook 사용.<br/>`dart` `flutter` `개발` `상태-관리` `riverpod` |
+| [C# .NET 技术专家](https://chat-preview.lobehub.com/market?agent=dotnet-expert)<br/><sup>By **[johnnyqian](https://github.com/johnnyqian)** on **2024-05-28**</sup> | C# .NET 技术专家<br/>`net` `developer` `net-core` `azure` `c` `microsoft` `sql-server` `entity-framework` `ef` `ef-core`                                                    |
+| [日常小助手](https://chat-preview.lobehub.com/market?agent=junior-helper)<br/><sup>By **[Qinks6](https://github.com/Qinks6)** on **2024-05-28**</sup>               | 一个能搜索、能画图的小可爱<br/>`助手` `搜索` `绘图` `信息查询` `用户交互`                                                                                                   |
+| [Node.js 优化师](https://chat-preview.lobehub.com/market?agent=node-js-devoloper)<br/><sup>By **[chrisuhg](https://github.com/chrisuhg)** on **2024-05-28**</sup>   | 擅长 Node.js 代码审查、性能优化、异步编程、错误处理、代码重构、依赖管理、安全增强、测试覆盖率和文档编写。<br/>`node-js` `代码优化` `性能优化` `异步编程` `错误处理`         |
+
+> 📊 Total agents: [<kbd>**279**</kbd> ](https://github.com/lobehub/lobe-chat-agents)
 
  <!-- AGENT LIST -->
 

package/locales/ar/error.json

@@ -136,5 +136,9 @@
       "apiKey": "مفتاح واجهة برمجة التطبيقات المخصص",
       "password": "كلمة المرور"
     }
+  },
+  "upload": {
+    "desc": "التفاصيل: {{detail}}",
+    "title": "فشل تحميل الملف، يرجى التحقق من الاتصال بالشبكة أو المحاولة لاحقًا"
   }
-}
+}

package/locales/bg-BG/error.json

@@ -136,5 +136,9 @@
       "apiKey": "Персонализиран API ключ",
       "password": "Парола"
     }
+  },
+  "upload": {
+    "desc": "Подробности: {{detail}}",
+    "title": "Неуспешно качване на файл, моля проверете интернет връзката или опитайте по-късно"
   }
 }

package/locales/de-DE/error.json

@@ -136,5 +136,9 @@
       "apiKey": "Benutzerdefinierter API-Schlüssel",
       "password": "Passwort"
     }
+  },
+  "upload": {
+    "desc": "Details: {{detail}}",
+    "title": "Dateiupload fehlgeschlagen. Bitte überprüfen Sie Ihre Netzwerkverbindung und versuchen Sie es später erneut."
   }
 }

package/locales/en-US/error.json

@@ -136,5 +136,9 @@
       "apiKey": "Custom API Key",
       "password": "Password"
     }
+  },
+  "upload": {
+    "desc": "Details: {{detail}}",
+    "title": "File upload failed. Please check your network connection or try again later"
   }
 }

package/locales/es-ES/error.json

@@ -136,5 +136,9 @@
       "apiKey": "Clave de API personalizada",
       "password": "Contraseña"
     }
+  },
+  "upload": {
+    "desc": "Detalles: {{detail}}",
+    "title": "Error al subir el archivo, por favor verifica la conexión a internet o inténtalo de nuevo más tarde"
   }
 }

package/locales/fr-FR/error.json

@@ -136,5 +136,9 @@
       "apiKey": "Clé API personnalisée",
       "password": "Mot de passe"
     }
+  },
+  "upload": {
+    "desc": "Détails : {{detail}}",
+    "title": "Échec de l'envoi du fichier, veuillez vérifier votre connexion réseau ou réessayer plus tard"
   }
 }

package/locales/it-IT/error.json

@@ -136,5 +136,9 @@
       "apiKey": "Chiave API personalizzata",
       "password": "Password"
     }
+  },
+  "upload": {
+    "desc": "Dettagli: {{detail}}",
+    "title": "Caricamento del file fallito, controlla la connessione di rete o riprova più tardi"
   }
 }

package/locales/ja-JP/error.json

@@ -136,5 +136,9 @@
       "apiKey": "カスタムAPIキー",
       "password": "パスワード"
     }
+  },
+  "upload": {
+    "desc": "詳細: {{detail}}",
+    "title": "ファイルのアップロードに失敗しました。ネットワーク接続を確認するか、後でもう一度お試しください"
   }
 }

package/locales/ko-KR/error.json

@@ -136,5 +136,9 @@
       "apiKey": "사용자 정의 API Key",
       "password": "비밀번호"
     }
+  },
+  "upload": {
+    "desc": "상세 내용: {{detail}}",
+    "title": "파일 업로드 실패, 네트워크 연결을 확인하거나 나중에 다시 시도해주세요"
   }
 }

package/locales/nl-NL/error.json

@@ -136,5 +136,9 @@
       "apiKey": "Custom API Key",
       "password": "Password"
     }
+  },
+  "upload": {
+    "desc": "Details: {{detail}}",
+    "title": "Bestand uploaden mislukt, controleer uw internetverbinding of probeer het later opnieuw"
   }
 }

package/locales/pl-PL/error.json

@@ -136,5 +136,9 @@
       "apiKey": "Niestandardowy klucz API",
       "password": "Hasło"
     }
+  },
+  "upload": {
+    "desc": "Szczegóły: {{detail}}",
+    "title": "Nie udało się przesłać pliku. Sprawdź połączenie sieciowe lub spróbuj ponownie później"
   }
 }

package/locales/pt-BR/error.json

@@ -136,5 +136,9 @@
       "apiKey": "Chave de API personalizada",
       "password": "Senha"
     }
+  },
+  "upload": {
+    "desc": "Detalhes: {{detail}}",
+    "title": "Falha ao enviar o arquivo, verifique a conexão de rede ou tente novamente mais tarde"
   }
 }

package/locales/ru-RU/error.json

@@ -136,5 +136,9 @@
       "apiKey": "Пользовательский ключ API",
       "password": "Пароль"
     }
+  },
+  "upload": {
+    "desc": "Подробности: {{detail}}",
+    "title": "Ошибка загрузки файла. Проверьте подключение к сети или попробуйте позже"
   }
 }

package/locales/tr-TR/error.json

@@ -136,5 +136,9 @@
       "apiKey": "Özel API Anahtarı",
       "password": "Şifre"
     }
+  },
+  "upload": {
+    "desc": "Detay: {{detail}}",
+    "title": "Dosya yükleme başarısız, lütfen ağ bağlantınızı kontrol edin veya daha sonra tekrar deneyin"
   }
 }

package/locales/vi-VN/error.json

@@ -136,5 +136,9 @@
       "apiKey": "Khóa API tùy chỉnh",
       "password": "Mật khẩu"
     }
+  },
+  "upload": {
+    "desc": "Chi tiết: {{detail}}",
+    "title": "Tải lên tệp thất bại, vui lòng kiểm tra kết nối mạng hoặc thử lại sau"
   }
 }

package/locales/zh-CN/error.json

@@ -136,5 +136,9 @@
       "apiKey": "自定义 API Key",
       "password": "密码"
     }
+  },
+  "upload": {
+    "desc": "详情: {{detail}}",
+    "title": "文件上传失败，请检查网络连接或稍后再试"
   }
 }

package/locales/zh-TW/error.json

@@ -136,5 +136,9 @@
       "apiKey": "自定義 API Key",
       "password": "密碼"
     }
+  },
+  "upload": {
+    "desc": "詳情: {{detail}}",
+    "title": "檔案上傳失敗，請檢查網路連線或稍後再試"
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.162.7",
+  "version": "0.162.8",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/LocalFiles.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 
-import EditableFileList from '@/components/FileList/EditableFileList';
+import { EditableFileList } from '@/features/FileList';
 import { useFileStore } from '@/store/file';
 
 export const LocalFiles = memo(() => {

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/SendMore.tsx

@@ -27,7 +27,11 @@ const useStyles = createStyles(({ css, prefixCls }) => {
 
 const isMac = isMacOS();
 
-const SendMore = memo(() => {
+interface SendMoreProps {
+  disabled?: boolean;
+}
+
+const SendMore = memo<SendMoreProps>(({ disabled }) => {
   const { t } = useTranslation('chat');
 
   const { styles } = useStyles();
@@ -55,6 +59,7 @@ const SendMore = memo(() => {
 
   return (
     <Dropdown
+      disabled={disabled}
       menu={{
         items: [
           {

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/index.tsx

@@ -14,6 +14,7 @@ import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
+import { filesSelectors, useFileStore } from '@/store/file';
 import { useUserStore } from '@/store/user';
 import { modelProviderSelectors, preferenceSelectors } from '@/store/user/selectors';
 import { isMacOS } from '@/utils/platform';
@@ -60,10 +61,11 @@ const Footer = memo<FooterProps>(({ setExpand }) => {
 
   const { theme, styles } = useStyles();
 
-  const [loading, stopGenerateMessage] = useChatStore((s) => [
+  const [isAIGenerating, stopGenerateMessage] = useChatStore((s) => [
     chatSelectors.isAIGenerating(s),
     s.stopGenerateMessage,
   ]);
+  const isImageUploading = useFileStore(filesSelectors.isImageUploading);
 
   const model = useAgentStore(agentSelectors.currentAgentModel);
 
@@ -123,7 +125,7 @@ const Footer = memo<FooterProps>(({ setExpand }) => {
         </Flexbox>
         <SaveTopic />
         <Flexbox style={{ minWidth: 92 }}>
-          {loading ? (
+          {isAIGenerating ? (
             <Button
               className={styles.loadingButton}
               icon={<StopLoadingIcon />}
@@ -134,6 +136,7 @@ const Footer = memo<FooterProps>(({ setExpand }) => {
           ) : (
             <Space.Compact>
               <Button
+                disabled={isImageUploading}
                 onClick={() => {
                   sendMessage();
                   setExpand?.(false);
@@ -142,7 +145,7 @@ const Footer = memo<FooterProps>(({ setExpand }) => {
               >
                 {t('input.send')}
               </Button>
-              <SendMore />
+              <SendMore disabled={isImageUploading} />
             </Space.Compact>
           )}
         </Flexbox>

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/Files.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import EditableFileList from '@/components/FileList/EditableFileList';
+import { EditableFileList } from '@/features/FileList';
 import { useFileStore } from '@/store/file';
 
 const Files = memo(() => {

package/src/components/FileList/EditableFileList.tsx

@@ -3,18 +3,22 @@ import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import ImageFileItem from './ImageFileItem';
+import ImageItem from '@/components/ImageItem';
+
+import { ImageFileItem } from './type';
 
 interface EditableFileListProps {
   alwaysShowClose?: boolean;
   editable?: boolean;
-  items: string[];
+  items: ImageFileItem[];
+  onRemove?: (id: string) => void;
   padding?: number | string;
 }
 
-const EditableFileList = memo<EditableFileListProps>(
-  ({ items, editable = true, alwaysShowClose, padding = 12 }) => {
+export const EditableFileList = memo<EditableFileListProps>(
+  ({ items, editable = true, alwaysShowClose, onRemove, padding = 12 }) => {
     const { mobile } = useResponsive();
+
     return (
       <Flexbox
         gap={mobile ? 4 : 6}
@@ -24,7 +28,15 @@ const EditableFileList = memo<EditableFileListProps>(
       >
         <ImageGallery>
           {items.map((i) => (
-            <ImageFileItem alwaysShowClose={alwaysShowClose} editable={editable} id={i} key={i} />
+            <ImageItem
+              alt={i.alt}
+              alwaysShowClose={alwaysShowClose}
+              editable={editable}
+              key={i.id}
+              loading={i.loading}
+              onRemove={() => onRemove?.(i.id)}
+              url={i.url}
+            />
           ))}
         </ImageGallery>
       </Flexbox>

package/src/components/FileList/FileListViewer.tsx

@@ -0,0 +1,19 @@
+import { ImageGallery } from '@lobehub/ui';
+import { memo } from 'react';
+
+import GalleyGrid from '@/components/GalleyGrid';
+import ImageItem from '@/components/ImageItem';
+
+import { ImageFileItem } from './type';
+
+interface FileListProps {
+  items: ImageFileItem[];
+}
+
+export const ImageFileListViewer = memo<FileListProps>(({ items }) => {
+  return (
+    <ImageGallery>
+      <GalleyGrid items={items} renderItem={ImageItem} />
+    </ImageGallery>
+  );
+});

package/src/components/FileList/index.ts

@@ -0,0 +1,2 @@
+export { EditableFileList } from './EditableFileList';
+export { ImageFileListViewer } from './FileListViewer';

package/src/components/FileList/type.tsx

@@ -0,0 +1,7 @@
+export interface ImageFileItem {
+  alt?: string;
+  id: string;
+  loading?: boolean;
+  onRemove?: (id: string) => void;
+  url: string;
+}

package/src/components/ImageItem/index.tsx

@@ -0,0 +1,75 @@
+import { ActionIcon, Image } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Trash } from 'lucide-react';
+import { CSSProperties, memo } from 'react';
+
+import { usePlatform } from '@/hooks/usePlatform';
+
+import { MIN_IMAGE_SIZE } from './style';
+
+const useStyles = createStyles(({ css, token }) => ({
+  deleteButton: css`
+    color: #fff;
+    background: ${token.colorBgMask};
+
+    &:hover {
+      background: ${token.colorError};
+    }
+  `,
+  editableImage: css`
+    background: ${token.colorBgContainer};
+    box-shadow: 0 0 0 1px ${token.colorFill} inset;
+  `,
+  image: css`
+    margin-block: 0 !important;
+  `,
+}));
+
+interface FileItemProps {
+  alt?: string;
+  alwaysShowClose?: boolean;
+  className?: string;
+  editable?: boolean;
+  loading?: boolean;
+  onClick?: () => void;
+  onRemove?: () => void;
+  style?: CSSProperties;
+  url?: string;
+}
+
+const ImageItem = memo<FileItemProps>(
+  ({ editable, alt, onRemove, url, loading, alwaysShowClose }) => {
+    const IMAGE_SIZE = editable ? MIN_IMAGE_SIZE : '100%';
+    const { styles, cx } = useStyles();
+    const { isSafari } = usePlatform();
+
+    return (
+      <Image
+        actions={
+          editable && (
+            <ActionIcon
+              className={styles.deleteButton}
+              glass
+              icon={Trash}
+              onClick={(e) => {
+                e.stopPropagation();
+                onRemove?.();
+              }}
+              size={'small'}
+            />
+          )
+        }
+        alt={alt || ''}
+        alwaysShowActions={alwaysShowClose}
+        height={isSafari ? 'auto' : '100%'}
+        isLoading={loading}
+        size={IMAGE_SIZE as any}
+        src={url}
+        style={{ height: isSafari ? 'auto' : '100%' }}
+        wrapperClassName={cx(styles.image, editable && styles.editableImage)}
+      />
+    );
+  },
+);
+
+export default ImageItem;

package/src/features/Conversation/Messages/User.tsx

@@ -1,8 +1,8 @@
 import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import FileList from '@/components/FileList';
 import { LOADING_FLAT } from '@/const/message';
+import { FileListPreviewer } from '@/features/FileList';
 import { ChatMessage } from '@/types/message';
 
 import BubblesLoading from '../components/BubblesLoading';
@@ -17,7 +17,7 @@ export const UserMessage = memo<
   return (
     <Flexbox gap={8} id={id}>
       {editableContent}
-      {res.files && res.files?.length > 0 && <FileList items={res.files} />}
+      {res.files && res.files?.length > 0 && <FileListPreviewer items={res.files} />}
     </Flexbox>
   );
 });

package/src/features/FileList/EditableFileList.tsx

@@ -0,0 +1,31 @@
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+
+import { EditableFileList as Base } from '@/components/FileList';
+import { filesSelectors, useFileStore } from '@/store/file';
+
+interface EditableFileListProps {
+  alwaysShowClose?: boolean;
+  editable?: boolean;
+  items: string[];
+  padding?: number | string;
+}
+
+export const EditableFileList = memo<EditableFileListProps>(
+  ({ items, editable = true, alwaysShowClose, padding }) => {
+    const [removeFile] = useFileStore((s) => [s.removeFile]);
+    const list = useFileStore(filesSelectors.getImageDetailByList(items), isEqual);
+
+    return (
+      <Base
+        alwaysShowClose={alwaysShowClose}
+        editable={editable}
+        items={list}
+        onRemove={(id) => removeFile(id)}
+        padding={padding}
+      />
+    );
+  },
+);
+
+export default EditableFileList;

package/src/features/FileList/FileListPreviewer.tsx

@@ -0,0 +1,17 @@
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+
+import { ImageFileListViewer } from '@/components/FileList';
+import { filesSelectors, useFileStore } from '@/store/file';
+
+interface FileListProps {
+  items: string[];
+}
+
+export const FileListPreviewer = memo<FileListProps>(({ items }) => {
+  const useFetchFiles = useFileStore((s) => s.useFetchFiles);
+  const data = useFileStore(filesSelectors.getImageDetailByList(items), isEqual);
+  useFetchFiles(items);
+
+  return <ImageFileListViewer items={data} />;
+});

package/src/features/FileList/index.tsx

@@ -0,0 +1,2 @@
+export { EditableFileList } from './EditableFileList';
+export { FileListPreviewer } from './FileListPreviewer';

package/src/libs/swr/index.ts

@@ -1,8 +1,22 @@
 import useSWR, { SWRHook } from 'swr';
 
 /**
- * 这一类请求方法是比较「死」的请求模式，只会在第一次请求时触发。不会自动刷新，刷新需要搭配 refreshXXX 这样的方法实现，
- * 适用于 messages、topics、sessions 等由用户在客户端交互产生的数据。
+ * This type of request method is relatively flexible data, which will be triggered on the first time
+ *
+ * Refresh rules have two types:
+ *
+ * - when the user refocuses, it will be refreshed outside the 5mins interval.
+ * - can be combined with refreshXXX methods to refresh data
+ *
+ * Suitable for messages, topics, sessions, and other data that users will interact with on the client.
+ *
+ * 这一类请求方法是相对灵活的数据，会在请求时触发
+ *
+ * 刷新规则有两种：
+ * - 当用户重新聚焦时，在 5mins 间隔外会重新刷新一次
+ * - 可以搭配 refreshXXX 这样的方法刷新数据
+ *
+ * 适用于 messages、topics、sessions 等用户会在客户端交互的数据
  */
 // @ts-ignore
 export const useClientDataSWR: SWRHook = (key, fetch, config) =>
@@ -11,6 +25,23 @@ export const useClientDataSWR: SWRHook = (key, fetch, config) =>
     // Cause issue like this: https://github.com/lobehub/lobe-chat/issues/532
     // we need to set it to 0.
     dedupingInterval: 0,
+    focusThrottleInterval: 5 * 60 * 1000,
+    refreshWhenOffline: false,
+    revalidateOnFocus: true,
+    revalidateOnReconnect: true,
+    ...config,
+  });
+
+/**
+ * This type of request method is relatively "dead" request mode, which will only be triggered on the first request.
+ * it suitable for first time request like `initUserState`
+
+ * 这一类请求方法是相对“死”的请求模式，只会在第一次请求时触发。
+ * 适用于第一次请求，例如 `initUserState`
+ */
+// @ts-ignore
+export const useOnlyFetchOnceSWR: SWRHook = (key, fetch, config) =>
+  useSWR(key, fetch, {
     refreshWhenOffline: false,
     revalidateOnFocus: false,
     revalidateOnReconnect: false,

package/src/locales/default/error.ts

@@ -164,4 +164,5 @@ export default {
       password: '密码',
     },
   },
+  upload: { desc: '详情: {{detail}}', title: '文件上传失败，请检查网络连接或稍后再试' },
 };

package/src/services/__tests__/chat.test.ts

@@ -8,9 +8,9 @@ import {
   LobeAnthropicAI,
   LobeAzureOpenAI,
   LobeBedrockAI,
+  LobeDeepSeekAI,
   LobeGoogleAI,
   LobeGroq,
-  LobeDeepSeekAI,
   LobeMistralAI,
   LobeMoonshotAI,
   LobeOllamaAI,
@@ -136,6 +136,7 @@ describe('ChatService', () => {
           useFileStore.setState({
             imagesMap: {
               file1: {
+                id: 'file1',
                 name: 'abc.png',
                 saveMode: 'url',
                 fileType: 'image/png',
@@ -193,6 +194,7 @@ describe('ChatService', () => {
           useFileStore.setState({
             imagesMap: {
               file1: {
+                id: 'file1',
                 name: 'abc.png',
                 saveMode: 'url',
                 fileType: 'image/png',
@@ -234,6 +236,7 @@ describe('ChatService', () => {
           useFileStore.setState({
             imagesMap: {
               file1: {
+                id: 'file1',
                 name: 'abc.png',
                 saveMode: 'url',
                 fileType: 'image/png',

package/src/services/file/client.test.ts

@@ -90,6 +90,7 @@ describe('FileService', () => {
 
       expect(FileModel.findById).toHaveBeenCalledWith(fileId);
       expect(result).toEqual({
+        id: '1',
         base64Url: 'data:image/png;base64,AA==',
         fileType: 'image/png',
         name: 'test',
@@ -120,6 +121,7 @@ describe('FileService', () => {
       expect(FileModel.findById).toHaveBeenCalledWith(fileId);
       expect(result).toEqual({
         fileType: 'image/png',
+        id: '1',
         name: 'test.png',
         saveMode: 'url',
         url: 'https://example.com/test.png',

package/src/services/file/client.ts

@@ -28,6 +28,7 @@ export class ClientService implements IFileService {
 
       return {
         fileType: item.fileType,
+        id,
         name: item.metadata.filename,
         saveMode: 'url',
         url: urlJoin(fileEnv.NEXT_PUBLIC_S3_DOMAIN!, item.url!),
@@ -41,6 +42,7 @@ export class ClientService implements IFileService {
     return {
       base64Url: `data:${item.fileType};base64,${base64}`,
       fileType: item.fileType,
+      id,
       name: item.name,
       saveMode: 'local',
       url,

package/src/store/agent/slices/chat/action.ts

@@ -1,12 +1,12 @@
 import isEqual from 'fast-deep-equal';
 import { produce } from 'immer';
-import useSWR, { SWRResponse, mutate } from 'swr';
+import { SWRResponse, mutate } from 'swr';
 import { DeepPartial } from 'utility-types';
 import { StateCreator } from 'zustand/vanilla';
 
 import { INBOX_SESSION_ID } from '@/const/session';
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
-import { useClientDataSWR } from '@/libs/swr';
+import { useClientDataSWR, useOnlyFetchOnceSWR } from '@/libs/swr';
 import { sessionService } from '@/services/session';
 import { AgentState } from '@/store/agent/slices/chat/initialState';
 import { useSessionStore } from '@/store/session';
@@ -112,7 +112,7 @@ export const createChatSlice: StateCreator<
       },
     ),
   useInitAgentStore: (defaultAgentConfig) =>
-    useSWR<DeepPartial<LobeAgentConfig>>(
+    useOnlyFetchOnceSWR<DeepPartial<LobeAgentConfig>>(
       'fetchInboxAgentConfig',
       () => sessionService.getSessionConfig(INBOX_SESSION_ID),
       {
@@ -130,7 +130,6 @@ export const createChatSlice: StateCreator<
             get().internal_dispatchAgentMap(INBOX_SESSION_ID, data, 'initInbox');
           }
         },
-        revalidateOnFocus: false,
       },
     ),
 

package/src/store/file/slices/images/action.test.ts

@@ -2,6 +2,7 @@ import { act, renderHook } from '@testing-library/react';
 import useSWR from 'swr';
 import { Mock, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { notification } from '@/components/AntdStaticMethods';
 import { DB_File } from '@/database/client/schemas/files';
 import { fileService } from '@/services/file';
 import { uploadService } from '@/services/upload';
@@ -10,6 +11,13 @@ import { useFileStore as useStore } from '../../store';
 
 vi.mock('zustand/traditional');
 
+// Mock necessary modules and functions
+vi.mock('@/components/AntdStaticMethods', () => ({
+  notification: {
+    error: vi.fn(),
+  },
+}));
+
 // Mock for useSWR
 vi.mock('swr', () => ({
   default: vi.fn(),
@@ -120,7 +128,6 @@ describe('useFileStore:images', () => {
       vi.spyOn(uploadService, 'uploadFile').mockRejectedValue(new Error(errorMessage));
 
       // Mock console.error for testing
-      const consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
 
       await act(async () => {
         await result.current.uploadFile(testFile);
@@ -136,11 +143,9 @@ describe('useFileStore:images', () => {
       });
       // 由于上传失败，inputFilesList 应该没有变化
       expect(result.current.inputFilesList).toEqual([]);
-      // 确保错误被正确记录
-      expect(consoleErrorMock).toHaveBeenCalledWith('upload error:', expect.any(Error));
 
-      // Cleanup mock
-      consoleErrorMock.mockRestore();
+      // 确保错误提示被调用
+      expect(notification.error).toHaveBeenCalled();
     });
 
     it('uploadFile should upload the file and update inputFilesList', async () => {

package/src/store/file/slices/images/action.ts

@@ -1,7 +1,9 @@
+import { t } from 'i18next';
 import { produce } from 'immer';
 import useSWR, { SWRResponse } from 'swr';
 import { StateCreator } from 'zustand/vanilla';
 
+import { notification } from '@/components/AntdStaticMethods';
 import { fileService } from '@/services/file';
 import { uploadService } from '@/services/upload';
 import { FilePreview } from '@/types/files';
@@ -13,13 +15,19 @@ const n = setNamespace('image');
 
 export interface FileAction {
   clearImageList: () => void;
+
+  internal_addFile: (id: string) => void;
+  internal_removeFile: (id: string) => void;
+  internal_toggleLoading: (id: string, loading: boolean) => void;
+  loadFileDetail: (id: string) => Promise<void>;
   removeAllFiles: () => Promise<void>;
   removeFile: (id: string) => Promise<void>;
 
   setImageMapItem: (id: string, item: FilePreview) => void;
-  uploadFile: (file: File) => Promise<void>;
 
+  uploadFile: (file: File) => Promise<void>;
   useFetchFile: (id: string) => SWRResponse<FilePreview>;
+  useFetchFiles: (ids: string[]) => SWRResponse<void>;
 }
 
 export const createFileSlice: StateCreator<
@@ -31,18 +39,47 @@ export const createFileSlice: StateCreator<
   clearImageList: () => {
     set({ inputFilesList: [] }, false, n('clearImageList'));
   },
-  removeAllFiles: async () => {
-    await fileService.removeAllFiles();
+  internal_addFile: (id: string) => {
+    set(({ inputFilesList }) => ({ inputFilesList: [...inputFilesList, id] }), false, n('addFile'));
   },
-  removeFile: async (id) => {
-    await fileService.removeFile(id);
-
+  internal_removeFile: (id: string) => {
     set(
       ({ inputFilesList }) => ({ inputFilesList: inputFilesList.filter((i) => i !== id) }),
       false,
       n('removeFile'),
     );
   },
+  internal_toggleLoading: (id: string, loading) => {
+    if (loading) {
+      set(
+        ({ uploadingIds }) => ({ uploadingIds: [...uploadingIds, id] }),
+        false,
+        'toggleLoading/loading',
+      );
+    } else {
+      set(
+        ({ uploadingIds }) => ({ uploadingIds: uploadingIds.filter((i) => i !== id) }),
+        false,
+        'toggleLoading/stopLoading',
+      );
+    }
+  },
+
+  loadFileDetail: async (id) => {
+    // initFile preview
+    const item = await fileService.getFile(id);
+    get().setImageMapItem(item.id, item);
+  },
+
+  removeAllFiles: async () => {
+    await fileService.removeAllFiles();
+  },
+  removeFile: async (id) => {
+    get().internal_removeFile(id);
+
+    await fileService.removeFile(id);
+  },
+
   setImageMapItem: (id, item) => {
     set(
       produce((draft) => {
@@ -54,29 +91,51 @@ export const createFileSlice: StateCreator<
       n('setImageMapItem'),
     );
   },
+
   uploadFile: async (file) => {
-    try {
-      const result = await uploadService.uploadFile({
-        createdAt: file.lastModified,
-        data: await file.arrayBuffer(),
-        fileType: file.type,
-        name: file.name,
-        saveMode: 'local',
-        size: file.size,
-      });
+    const fileItem = {
+      createdAt: file.lastModified,
+      data: await file.arrayBuffer(),
+      fileType: file.type,
+      name: file.name,
+      saveMode: 'local' as const,
+      size: file.size,
+    };
+
+    // at first create a temp id for the file for optimistic rendering
+    const tempId = Date.now().toString();
+    get().internal_addFile(tempId);
+
+    get().internal_toggleLoading(tempId, true);
+
+    // create a local Url for display
+    const url = URL.createObjectURL(new Blob([fileItem.data!], { type: fileItem.fileType }));
+    get().setImageMapItem(tempId, { ...fileItem, id: tempId, url });
 
+    try {
+      // after finish upload, mark the `loading=false` to show the uploaded item
+      const result = await uploadService.uploadFile(fileItem);
       const data = await fileService.createFile(result);
+      get().internal_toggleLoading(tempId, false);
 
-      set(
-        ({ inputFilesList }) => ({ inputFilesList: [...inputFilesList, data.id] }),
-        false,
-        n('uploadFile'),
-      );
+      // after finish upload, remove the temp id and add the final one
+      get().internal_removeFile(tempId);
+      get().internal_addFile(data.id);
+
+      // initFile preview
+      await get().loadFileDetail(data.id);
     } catch (error) {
-      // 提示用户上传失败
-      console.error('upload error:', error);
+      get().internal_removeFile(tempId);
+      get().internal_toggleLoading(tempId, false);
+
+      // show error message
+      notification.error({
+        description: t('upload.desc', { detail: error, ns: 'error' }),
+        message: t('upload.title', { ns: 'error' }),
+      });
     }
   },
+
   useFetchFile: (id) =>
     useSWR(id, async (id) => {
       const item = await fileService.getFile(id);
@@ -85,4 +144,10 @@ export const createFileSlice: StateCreator<
 
       return item;
     }),
+  useFetchFiles: (ids) =>
+    useSWR(ids, async (ids) => {
+      const pools = ids.map(async (id) => get().loadFileDetail(id));
+
+      await Promise.all(pools);
+    }),
 });

package/src/store/file/slices/images/initialState.ts

@@ -3,9 +3,11 @@ import { FilePreview } from '@/types/files';
 export interface ImageFileState {
   imagesMap: Record<string, FilePreview>;
   inputFilesList: string[];
+  uploadingIds: string[];
 }
 
 export const initialImageFileState: ImageFileState = {
   imagesMap: {},
   inputFilesList: [],
+  uploadingIds: [],
 };

package/src/store/file/{selectors.test.ts → slices/images/selectors.test.ts}

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 
-import { FilesStoreState } from './initialState';
+import { FilesStoreState } from '../../initialState';
 import { filesSelectors } from './selectors';
 
 describe('filesSelectors', () => {
@@ -11,6 +11,7 @@ describe('filesSelectors', () => {
     state = {
       imagesMap: {
         '1': {
+          id: '1',
           name: 'a',
           fileType: 'image/png',
           saveMode: 'local',
@@ -18,6 +19,7 @@ describe('filesSelectors', () => {
           url: 'blob:abc',
         },
         '2': {
+          id: '2',
           name: 'b',
           fileType: 'image/png',
           saveMode: 'url',
@@ -25,6 +27,7 @@ describe('filesSelectors', () => {
           url: 'url2',
         },
       },
+      uploadingIds: [],
       // 假设 '3' 是不存在的 ID
       inputFilesList: ['1', '2', '3'],
     };

package/src/store/file/slices/images/selectors.ts

@@ -1,7 +1,10 @@
 import { FilesStoreState } from '../../initialState';
 
 const getImageDetailByList = (list: string[]) => (s: FilesStoreState) =>
-  list.map((i) => s.imagesMap[i]).filter(Boolean);
+  list
+    .map((i) => s.imagesMap[i])
+    .filter(Boolean)
+    .map((i) => ({ ...i, loading: s.uploadingIds.includes(i.id) }));
 
 const imageDetailList = (s: FilesStoreState) => getImageDetailByList(s.inputFilesList)(s);
 
@@ -25,10 +28,13 @@ const getImageUrlOrBase64ByList = (idList: string[]) => (s: FilesStoreState) =>
 
 const imageUrlOrBase64List = (s: FilesStoreState) => getImageUrlOrBase64ByList(s.inputFilesList)(s);
 
+const isImageUploading = (s: FilesStoreState) => s.uploadingIds.length > 0;
+
 export const filesSelectors = {
   getImageDetailByList,
   getImageUrlOrBase64ById,
   getImageUrlOrBase64ByList,
   imageDetailList,
   imageUrlOrBase64List,
+  isImageUploading,
 };

package/src/store/global/action.ts

@@ -7,7 +7,7 @@ import type { StateCreator } from 'zustand/vanilla';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { SESSION_CHAT_URL } from '@/const/url';
 import { CURRENT_VERSION } from '@/const/version';
-import { useClientDataSWR } from '@/libs/swr';
+import { useOnlyFetchOnceSWR } from '@/libs/swr';
 import { globalService } from '@/services/global';
 import type { GlobalStore } from '@/store/global/index';
 import { merge } from '@/utils/merge';
@@ -93,7 +93,7 @@ export const globalActionSlice: StateCreator<
     }),
 
   useInitSystemStatus: () =>
-    useClientDataSWR<SystemStatus>(
+    useOnlyFetchOnceSWR<SystemStatus>(
       'initSystemStatus',
       () => get().statusStorage.getFromLocalStorage(),
       {

package/src/store/user/slices/common/action.ts

@@ -3,6 +3,7 @@ import { DeepPartial } from 'utility-types';
 import type { StateCreator } from 'zustand/vanilla';
 
 import { DEFAULT_PREFERENCE } from '@/const/user';
+import { useOnlyFetchOnceSWR } from '@/libs/swr';
 import { userService } from '@/services/user';
 import { ClientService } from '@/services/user/client';
 import type { UserStore } from '@/store/user';
@@ -69,7 +70,7 @@ export const createCommonSlice: StateCreator<
     ),
 
   useInitUserState: (isLogin, serverConfig, options) =>
-    useSWR<UserInitializationState>(
+    useOnlyFetchOnceSWR<UserInitializationState>(
       !!isLogin ? GET_USER_STATE_KEY : null,
       () => userService.getUserState(),
       {
@@ -123,7 +124,6 @@ export const createCommonSlice: StateCreator<
             }
           }
         },
-        revalidateOnFocus: false,
       },
     ),
 });

package/src/tools/dalle/Render/Item/Image.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import ImageFileItem from '@/components/FileList/ImageFileItem';
+import ImageFileItem from './ImageFileItem';
 
 interface ImagePreviewProps {
   imageId?: string;

package/src/{components/FileList → tools/dalle/Render/Item}/ImageFileItem.tsx

@@ -6,7 +6,7 @@ import { CSSProperties, memo, useCallback } from 'react';
 import { usePlatform } from '@/hooks/usePlatform';
 import { useFileStore } from '@/store/file';
 
-import { MIN_IMAGE_SIZE } from './style';
+const MIN_IMAGE_SIZE = 64;
 
 export const useStyles = createStyles(({ css, token }) => ({
   deleteButton: css`

package/src/types/files.ts

@@ -4,6 +4,7 @@ export interface FilePreview {
   base64Url?: string;
   data?: ArrayBuffer;
   fileType: string;
+  id: string;
   name: string;
   saveMode: 'local' | 'url';
   url: string;

package/src/components/FileList/index.tsx

@@ -1,22 +0,0 @@
-import { ImageGallery } from '@lobehub/ui';
-import { memo, useMemo } from 'react';
-
-import GalleyGrid from '@/components/GalleyGrid';
-
-import ImageFileItem from './ImageFileItem';
-
-interface FileListProps {
-  items: string[];
-}
-
-const FileList = memo<FileListProps>(({ items }) => {
-  const data = useMemo(() => items.map((id) => ({ id })), [items]);
-
-  return (
-    <ImageGallery>
-      <GalleyGrid items={data} renderItem={ImageFileItem} />
-    </ImageGallery>
-  );
-});
-
-export default FileList;