@lobehub/chat 0.162.7 → 0.162.9

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.162.9](https://github.com/lobehub/lobe-chat/compare/v0.162.8...v0.162.9)
+
+<sup>Released on **2024-05-29**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor the settings to add optimistic updating.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor the settings to add optimistic updating, closes [#2709](https://github.com/lobehub/lobe-chat/issues/2709) ([fade53e](https://github.com/lobehub/lobe-chat/commit/fade53e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [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`                                                                                                                                                                                    |
+| [Christian Missionary](https://chat-preview.lobehub.com/market?agent=jesus-missionary)<br/><sup>By **[epochaudio](https://github.com/epochaudio)** on **2024-05-28**</sup>   | As a missionary of Jesus, I will enlighten your understanding and practical application of God's word based on the teachings of the Bible. Whether in times of confusion or seeking spiritual growth, I am here to serve you by this source of wisdom.<br/>`bible-teaching` `christian-mission` `theology-preaching` |
+| [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`                                                                                                                                                                                          |
+
+> 📊 Total agents: [<kbd>**280**</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=jesus-missionary)<br/><sup>By **[epochaudio](https://github.com/epochaudio)** on **2024-05-28**</sup>    | 作为一名耶稣传教士，我将依据圣经教导以启迪你对神的话语的理解和实际运用。无论是在困惑还是寻求灵性成长的过程中，我都在这智慧的源泉旁为你服务<br/>`圣经教学` `基督传教` `神学布道` |
+| [日常小助手](https://chat-preview.lobehub.com/market?agent=junior-helper)<br/><sup>By **[Qinks6](https://github.com/Qinks6)** on **2024-05-28**</sup>               | 一个能搜索、能画图的小可爱<br/>`助手` `搜索` `绘图` `信息查询` `用户交互`                                                                                                       |
+
+> 📊 Total agents: [<kbd>**280**</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.9",
   "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/app/(main)/settings/common/features/Theme/index.tsx

@@ -41,7 +41,6 @@ const Theme = memo(() => {
       {
         children: (
           <SelectWithImg
-            defaultValue={themeMode}
             height={60}
             onChange={setThemeMode}
             options={[
@@ -65,6 +64,7 @@ const Theme = memo(() => {
               },
             ]}
             unoptimized={false}
+            value={themeMode}
             width={100}
           />
         ),

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/Error/AccessCodeForm.tsx

@@ -5,7 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useChatStore } from '@/store/chat';
 import { useUserStore } from '@/store/user';
-import { settingsSelectors } from '@/store/user/selectors';
+import { keyVaultsConfigSelectors } from '@/store/user/selectors';
 
 import { FormAction } from './style';
 
@@ -16,7 +16,7 @@ interface AccessCodeFormProps {
 const AccessCodeForm = memo<AccessCodeFormProps>(({ id }) => {
   const { t } = useTranslation('error');
   const [password, updateKeyVaults] = useUserStore((s) => [
-    settingsSelectors.password(s),
+    keyVaultsConfigSelectors.password(s),
     s.updateKeyVaults,
   ]);
   const [resend, deleteMessage] = useChatStore((s) => [s.regenerateMessage, s.deleteMessage]);

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>
   );
 });