💄 style: add optimistic loading for image uploading (lobehub#2700)

* 🚸 refactor: add optimistic loading for file uploading * ✅ test: fix tests * 🚸 style: improve error fallback * ♻️ refactor: improve swr type * ✅ test: fix tests
whyliam · May 28, 2024 · f99c9ce · f99c9ce
1 parent ee6cb65
commit f99c9ce
Show file tree

Hide file tree

Showing 48 changed files with 418 additions and 79 deletions.
diff --git a/locales/ar/error.json b/locales/ar/error.json
@@ -136,5 +136,9 @@
       "apiKey": "مفتاح واجهة برمجة التطبيقات المخصص",
       "password": "كلمة المرور"
     }
+  },
+  "upload": {
+    "desc": "التفاصيل: {{detail}}",
+    "title": "فشل تحميل الملف، يرجى التحقق من الاتصال بالشبكة أو المحاولة لاحقًا"
   }
-}
+}
diff --git a/locales/bg-BG/error.json b/locales/bg-BG/error.json
@@ -136,5 +136,9 @@
       "apiKey": "Персонализиран API ключ",
       "password": "Парола"
     }
+  },
+  "upload": {
+    "desc": "Подробности: {{detail}}",
+    "title": "Неуспешно качване на файл, моля проверете интернет връзката или опитайте по-късно"
   }
 }
diff --git a/locales/de-DE/error.json b/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."
   }
 }
diff --git a/locales/en-US/error.json b/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"
   }
 }
diff --git a/locales/es-ES/error.json b/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"
   }
 }
diff --git a/locales/fr-FR/error.json b/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"
   }
 }
diff --git a/locales/it-IT/error.json b/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"
   }
 }
diff --git a/locales/ja-JP/error.json b/locales/ja-JP/error.json
@@ -136,5 +136,9 @@
       "apiKey": "カスタムAPIキー",
       "password": "パスワード"
     }
+  },
+  "upload": {
+    "desc": "詳細: {{detail}}",
+    "title": "ファイルのアップロードに失敗しました。ネットワーク接続を確認するか、後でもう一度お試しください"
   }
 }
diff --git a/locales/ko-KR/error.json b/locales/ko-KR/error.json
@@ -136,5 +136,9 @@
       "apiKey": "사용자 정의 API Key",
       "password": "비밀번호"
     }
+  },
+  "upload": {
+    "desc": "상세 내용: {{detail}}",
+    "title": "파일 업로드 실패, 네트워크 연결을 확인하거나 나중에 다시 시도해주세요"
   }
 }
diff --git a/locales/nl-NL/error.json b/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"
   }
 }
diff --git a/locales/pl-PL/error.json b/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"
   }
 }
diff --git a/locales/pt-BR/error.json b/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"
   }
 }
diff --git a/locales/ru-RU/error.json b/locales/ru-RU/error.json
@@ -136,5 +136,9 @@
       "apiKey": "Пользовательский ключ API",
       "password": "Пароль"
     }
+  },
+  "upload": {
+    "desc": "Подробности: {{detail}}",
+    "title": "Ошибка загрузки файла. Проверьте подключение к сети или попробуйте позже"
   }
 }
diff --git a/locales/tr-TR/error.json b/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"
   }
 }
diff --git a/locales/vi-VN/error.json b/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"
   }
 }
diff --git a/locales/zh-CN/error.json b/locales/zh-CN/error.json
@@ -136,5 +136,9 @@
       "apiKey": "自定义 API Key",
       "password": "密码"
     }
+  },
+  "upload": {
+    "desc": "详情: {{detail}}",
+    "title": "文件上传失败，请检查网络连接或稍后再试"
   }
 }
diff --git a/locales/zh-TW/error.json b/locales/zh-TW/error.json
@@ -136,5 +136,9 @@
       "apiKey": "自定義 API Key",
       "password": "密碼"
     }
+  },
+  "upload": {
+    "desc": "詳情: {{detail}}",
+    "title": "檔案上傳失敗，請檢查網路連線或稍後再試"
   }
-}
+}
diff --git a/...pp/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/LocalFiles.tsx b/...pp/(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(() => {

diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/SendMore.tsx b/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: [
           {

diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/index.tsx b/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>

diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/Files.tsx b/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(() => {

diff --git a/src/components/FileList/EditableFileList.tsx b/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>

diff --git a/src/components/FileList/FileListViewer.tsx b/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>
+  );
+});
diff --git a/src/components/FileList/index.ts b/src/components/FileList/index.ts
@@ -0,0 +1,2 @@
+export { EditableFileList } from './EditableFileList';
+export { ImageFileListViewer } from './FileListViewer';
diff --git a/src/components/FileList/index.tsx b/src/components/FileList/index.tsx
diff --git a/src/components/FileList/type.tsx b/src/components/FileList/type.tsx
@@ -0,0 +1,7 @@
+export interface ImageFileItem {
+  alt?: string;
+  id: string;
+  loading?: boolean;
+  onRemove?: (id: string) => void;
+  url: string;
+}