@lobehub/chat 0.107.11 → 0.107.13

package/.github/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: lobehub
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: lobehub/lobe-chat
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

package/CHANGELOG.md

@@ -2,6 +2,85 @@
 
 # Changelog
 
+### [Version 0.107.13](https://github.com/lobehub/lobe-chat/compare/v0.107.12...v0.107.13)
+
+<sup>Released on **2023-12-03**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor Image components.
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix a bug that can't send only images with empty content, Fix image gallery sort index, Fix image gallery sort index, Fix image sort index, Fix image upload error, Fix import.
+
+#### 💄 Styles
+
+- **misc**: Change image fit to cover mode, Fix empty files style, Move file inside chat input in mobile mode, Update editable image style, Update image default background color, Update image editable style, Update image grid, Update Image grid, Update image remove button hover style.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor Image components ([72dcd18](https://github.com/lobehub/lobe-chat/commit/72dcd18))
+
+#### What's fixed
+
+- **misc**: Fix a bug that can't send only images with empty content ([9601520](https://github.com/lobehub/lobe-chat/commit/9601520))
+- **misc**: Fix image gallery sort index ([16548d3](https://github.com/lobehub/lobe-chat/commit/16548d3))
+- **misc**: Fix image gallery sort index ([5636599](https://github.com/lobehub/lobe-chat/commit/5636599))
+- **misc**: Fix image sort index ([29cf223](https://github.com/lobehub/lobe-chat/commit/29cf223))
+- **misc**: Fix image upload error ([c7745c7](https://github.com/lobehub/lobe-chat/commit/c7745c7))
+- **misc**: Fix import ([af797d6](https://github.com/lobehub/lobe-chat/commit/af797d6))
+
+#### Styles
+
+- **misc**: Change image fit to cover mode ([9fdc459](https://github.com/lobehub/lobe-chat/commit/9fdc459))
+- **misc**: Fix empty files style ([bbe14c4](https://github.com/lobehub/lobe-chat/commit/bbe14c4))
+- **misc**: Move file inside chat input in mobile mode ([b6401c1](https://github.com/lobehub/lobe-chat/commit/b6401c1))
+- **misc**: Update editable image style ([a96ca4c](https://github.com/lobehub/lobe-chat/commit/a96ca4c))
+- **misc**: Update image default background color ([fadc024](https://github.com/lobehub/lobe-chat/commit/fadc024))
+- **misc**: Update image editable style ([8dea792](https://github.com/lobehub/lobe-chat/commit/8dea792))
+- **misc**: Update image grid ([901d10c](https://github.com/lobehub/lobe-chat/commit/901d10c))
+- **misc**: Update Image grid ([c68788d](https://github.com/lobehub/lobe-chat/commit/c68788d))
+- **misc**: Update image remove button hover style ([5bc916c](https://github.com/lobehub/lobe-chat/commit/5bc916c))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.107.12](https://github.com/lobehub/lobe-chat/compare/v0.107.11...v0.107.12)
+
+<sup>Released on **2023-12-02**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix topic not refresh when switching sessions quickly.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix topic not refresh when switching sessions quickly, closes [#555](https://github.com/lobehub/lobe-chat/issues/555) ([1806c05](https://github.com/lobehub/lobe-chat/commit/1806c05))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.107.11](https://github.com/lobehub/lobe-chat/compare/v0.107.10...v0.107.11)
 
 <sup>Released on **2023-12-01**</sup>

package/README.md

@@ -395,6 +395,8 @@ If you want to deploy this service yourself on Zeabur, you can follow these step
 
 </div>
 
+<br/>
+
 ### Environment Variable
 
 This project provides some additional configuration items set with environment variables:
@@ -485,7 +487,37 @@ Contributions of all types are more than welcome; if you are interested in contr
 [![][submit-agents-shield]][submit-agents-link]
 [![][submit-plugin-shield]][submit-plugin-link]
 
-[![][contributors-contrib]][contributors-link]
+<a href="https://github.com/lobehub/lobe-chat/graphs/contributors" target="_blank">
+  <table>
+    <tr>
+      <th colspan="2">
+        <br><img src="https://contrib.rocks/image?repo=lobehub/lobe-chat"><br><br>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
+        </picture>
+      </td>
+      <td rowspan="2">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=light">
+        </picture>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
+        </picture>
+      </td>
+    </tr>
+  </table>
+</a>
 
 <div align="right">
 
@@ -530,8 +562,6 @@ This project is [MIT](./LICENSE) licensed.
 [chat-plugins-gateway]: https://github.com/lobehub/chat-plugins-gateway
 [codespaces-link]: https://codespaces.new/lobehub/lobe-chat
 [codespaces-shield]: https://github.com/codespaces/badge.svg
-[contributors-contrib]: https://contrib.rocks/image?repo=lobehub/lobe-chat
-[contributors-link]: https://github.com/lobehub/lobe-chat/graphs/contributors
 [deploy-button-image]: https://vercel.com/button
 [deploy-link]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat
 [deploy-on-zeabur-button-image]: https://zeabur.com/button.svg

package/README.zh-CN.md

@@ -369,6 +369,8 @@ $ docker run -d -p 3210:3210 \
 
 </div>
 
+<br/>
+
 ### 环境变量
 
 本项目提供了一些额外的配置项，使用环境变量进行设置：
@@ -459,7 +461,37 @@ $ bun run dev
 [![][submit-agents-shield]][submit-agents-link]
 [![][submit-plugin-shield]][submit-plugin-link]
 
-[![][contributors-contrib]][contributors-link]
+<a href="https://github.com/lobehub/lobe-chat/graphs/contributors" target="_blank">
+  <table>
+    <tr>
+      <th colspan="2">
+        <br><img src="https://contrib.rocks/image?repo=lobehub/lobe-chat"><br><br>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
+        </picture>
+      </td>
+      <td rowspan="2">
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=4x7&color_scheme=light">
+        </picture>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <picture>
+          <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=dark">
+          <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=131470832&repo_ids=643445235&image_size=2x3&color_scheme=light">
+        </picture>
+      </td>
+    </tr>
+  </table>
+</a>
 
 <div align="right">
 
@@ -504,8 +536,6 @@ This project is [MIT](./LICENSE) licensed.
 [chat-plugins-gateway]: https://github.com/lobehub/chat-plugins-gateway
 [codespaces-link]: https://codespaces.new/lobehub/lobe-chat
 [codespaces-shield]: https://github.com/codespaces/badge.svg
-[contributors-contrib]: https://contrib.rocks/image?repo=lobehub/lobe-chat
-[contributors-link]: https://github.com/lobehub/lobe-chat/graphs/contributors
 [deploy-button-image]: https://vercel.com/button
 [deploy-link]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Flobehub%2Flobe-chat&env=OPENAI_API_KEY&envDescription=Find%20your%20OpenAI%20API%20Key%20by%20click%20the%20right%20Learn%20More%20button.&envLink=https%3A%2F%2Fplatform.openai.com%2Faccount%2Fapi-keys&project-name=lobe-chat&repository-name=lobe-chat
 [deploy-on-zeabur-button-image]: https://zeabur.com/button.svg

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.107.11",
+  "version": "0.107.13",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",
@@ -106,7 +106,6 @@
     "react-intersection-observer": "^9",
     "react-layout-kit": "^1",
     "react-lazy-load": "^4",
-    "react-spring-lightbox": "^1",
     "react-wrap-balancer": "^1.1.0",
     "remark": "^14",
     "remark-gfm": "^3",

package/src/app/chat/(desktop)/features/ChatInput/DragUpload.tsx

@@ -6,7 +6,7 @@ import { memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
-import { useFileStore } from '@/store/files';
+import { useFileStore } from '@/store/file';
 
 const useStyles = createStyles(({ css, token, stylish }) => {
   return {

package/src/app/chat/(desktop)/features/ChatInput/Footer/LocalFiles.tsx

@@ -1,10 +1,10 @@
 import { memo } from 'react';
 
-import FileList from '@/app/chat/components/FileList';
-import { useFileStore } from '@/store/files';
+import EditableFileList from '@/components/FileList/EditableFileList';
+import { useFileStore } from '@/store/file';
 
 export const LocalFiles = memo(() => {
   const inputFilesList = useFileStore((s) => s.inputFilesList);
 
-  return <FileList items={inputFilesList} />;
+  return <EditableFileList items={inputFilesList} padding={0} />;
 });

package/src/app/chat/(mobile)/features/ChatInput/Files.tsx

@@ -1,16 +1,17 @@
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
-import FileList from '@/app/chat/components/FileList';
-import { useFileStore } from '@/store/files';
+import EditableFileList from '@/components/FileList/EditableFileList';
+import { useFileStore } from '@/store/file';
 
 const Files = memo(() => {
   const inputFilesList = useFileStore((s) => s.inputFilesList);
 
+  if (!inputFilesList || inputFilesList?.length === 0) return null;
+
   return (
-    <Flexbox padding={12}>
-      <FileList alwaysShowClose items={inputFilesList} />
-    </Flexbox>
+    <div style={{ position: 'relative', width: '100vw' }}>
+      <EditableFileList alwaysShowClose items={inputFilesList} padding={'0 8px'} />
+    </div>
   );
 });
 

package/src/app/chat/(mobile)/features/ChatInput/Mobile.tsx

@@ -3,6 +3,7 @@ import { rgba } from 'polished';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import Files from '@/app/chat/(mobile)/features/ChatInput/Files';
 import ActionBar from '@/app/chat/features/ChatInput/ActionBar';
 import InputAreaInner from '@/app/chat/features/ChatInput/InputAreaInner';
 import STT from '@/app/chat/features/ChatInput/STT';
@@ -28,6 +29,7 @@ const ChatInputArea = memo(() => {
 
   return (
     <Flexbox className={styles.container} gap={12}>
+      <Files />
       <ActionBar mobile padding={'0 8px'} rightAreaStartRender={<SaveTopic mobile />} />
       <Flexbox className={styles.inner} gap={8} horizontal>
         <STT mobile />

package/src/app/chat/(mobile)/features/ChatInput/index.tsx

@@ -4,7 +4,6 @@ import { memo } from 'react';
 import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_TEXTAREA_HEIGHT_MOBILE } from '@/const/layoutTokens';
 
-import Files from './Files';
 import ChatInputArea from './Mobile';
 
 const useStyles = createStyles(
@@ -25,7 +24,6 @@ const ChatInputMobileLayout = memo(() => {
 
   return (
     <>
-      <Files />
       <SafeSpacing height={CHAT_TEXTAREA_HEIGHT_MOBILE} mobile position={'bottom'} />
       <div className={styles}>
         <ChatInputArea />

package/src/app/chat/features/ChatHeader/ShareButton/Preview.tsx

@@ -6,9 +6,9 @@ import { domToJpeg, domToPng, domToSvg, domToWebp } from 'modern-screenshot';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import ChatList from 'src/app/chat/features/Conversation/ChatList';
 
 import pkg from '@/../package.json';
+import ChatList from '@/app/chat/features/Conversation/ChatList';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 

package/src/app/chat/features/ChatInput/ActionBar/Clear.tsx

@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
 import HotKeys from '@/components/HotKeys';
 import { CLEAN_MESSAGE_KEY, PREFIX_KEY } from '@/const/hotkeys';
 import { useChatStore } from '@/store/chat';
-import { useFileStore } from '@/store/files';
+import { useFileStore } from '@/store/file';
 
 const Clear = memo(() => {
   const { t } = useTranslation('setting');

package/src/app/chat/features/ChatInput/ActionBar/FileUpload.tsx

@@ -6,7 +6,7 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center } from 'react-layout-kit';
 
-import { useFileStore } from '@/store/files';
+import { useFileStore } from '@/store/file';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 

package/src/app/chat/features/ChatInput/useSend.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
-import { filesSelectors, useFileStore } from '@/store/files';
-import { useChatStore } from 'src/store/chat';
+import { useChatStore } from '@/store/chat';
+import { filesSelectors, useFileStore } from '@/store/file';
 
 export const useSendMessage = () => {
   const [sendMessage, updateInputMessage] = useChatStore((s) => [

package/src/app/chat/features/Conversation/ChatList/Messages/User.tsx

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

package/src/app/settings/common/Common.tsx

@@ -11,7 +11,7 @@ import { DEFAULT_SETTINGS } from '@/const/settings';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { localeOptions } from '@/locales/options';
 import { useChatStore } from '@/store/chat';
-import { useFileStore } from '@/store/files';
+import { useFileStore } from '@/store/file';
 import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { usePluginStore } from '@/store/plugin';
 import { useSessionStore } from '@/store/session';

package/src/components/FileList/EditableFileList.tsx

@@ -0,0 +1,35 @@
+import { ImageGallery } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import FileItem from '@/components/FileList/FileItem';
+
+interface EditableFileListProps {
+  alwaysShowClose?: boolean;
+  editable?: boolean;
+  items: string[];
+  padding?: number | string;
+}
+
+const EditableFileList = memo<EditableFileListProps>(
+  ({ items, editable = true, alwaysShowClose, padding = 12 }) => {
+    const { mobile } = useResponsive();
+    return (
+      <Flexbox
+        gap={mobile ? 4 : 6}
+        horizontal
+        padding={padding}
+        style={{ overflow: 'auto', width: '100%' }}
+      >
+        <ImageGallery>
+          {items.map((i) => (
+            <FileItem alwaysShowClose={alwaysShowClose} editable={editable} id={i} key={i} />
+          ))}
+        </ImageGallery>
+      </Flexbox>
+    );
+  },
+);
+
+export default EditableFileList;

package/src/components/FileList/FileGrid.tsx

@@ -0,0 +1,36 @@
+import { CSSProperties, ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { MAX_SIZE_DESKTOP, MIN_IMAGE_SIZE, useStyles } from '@/components/FileList/style';
+
+interface FileGridProps {
+  children: ReactNode;
+  className?: string;
+  col?: number;
+  gap?: number;
+  max?: number;
+  min?: number;
+  style?: CSSProperties;
+}
+
+const FileGrid = memo<FileGridProps>(
+  ({
+    gap = 4,
+    col = 3,
+    max = MAX_SIZE_DESKTOP,
+    min = MIN_IMAGE_SIZE,
+    children,
+    className,
+    style,
+  }) => {
+    const { styles, cx } = useStyles({ col, gap, max, min });
+
+    return (
+      <Flexbox className={cx(styles.container, className)} gap={gap} horizontal style={style}>
+        {children}
+      </Flexbox>
+    );
+  },
+);
+
+export default FileGrid;

package/src/components/FileList/FileItem.tsx

@@ -0,0 +1,73 @@
+import { ActionIcon, Image } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { Trash } from 'lucide-react';
+import { CSSProperties, memo, useCallback } from 'react';
+
+import { useFileStore } from '@/store/file';
+
+import { MIN_IMAGE_SIZE } from './style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  deleteButton: css`
+    color: #fff;
+    background: ${token.colorBgMask};
+
+    &:hover {
+      background: ${token.colorError};
+    }
+  `,
+  editableImage: css`
+    background: ${token.colorBgContainer};
+    border: 1px solid ${token.colorBorderSecondary};
+  `,
+  image: css`
+    margin-block: 0 !important;
+  `,
+}));
+
+interface FileItemProps {
+  alwaysShowClose?: boolean;
+  className?: string;
+  editable?: boolean;
+  id: string;
+  onClick?: () => void;
+  style?: CSSProperties;
+}
+const FileItem = memo<FileItemProps>(({ editable, id, alwaysShowClose }) => {
+  const [useFetchFile, removeFile] = useFileStore((s) => [s.useFetchFile, s.removeFile]);
+  const IMAGE_SIZE = editable ? MIN_IMAGE_SIZE : '100%';
+  const { data, isLoading } = useFetchFile(id);
+  const { styles, cx } = useStyles();
+
+  const handleRemoveFile = useCallback(
+    (e: any) => {
+      e.stopPropagation();
+      removeFile(id);
+    },
+    [id],
+  );
+
+  return (
+    <Image
+      actions={
+        editable && (
+          <ActionIcon
+            className={styles.deleteButton}
+            glass
+            icon={Trash}
+            onClick={handleRemoveFile}
+            size={'small'}
+          />
+        )
+      }
+      alt={data?.name || id || ''}
+      alwaysShowActions={alwaysShowClose}
+      isLoading={isLoading}
+      size={IMAGE_SIZE as any}
+      src={data?.url}
+      wrapperClassName={cx(styles.image, editable && styles.editableImage)}
+    />
+  );
+});
+
+export default FileItem;

package/src/components/FileList/index.tsx

@@ -0,0 +1,62 @@
+import { ImageGallery } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
+import { memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { MAX_SIZE_DESKTOP, MAX_SIZE_MOBILE } from '@/components/FileList/style';
+
+import FileGrid from './FileGrid';
+import FileItem from './FileItem';
+
+interface FileListProps {
+  items: string[];
+}
+
+const FileList = memo<FileListProps>(({ items }) => {
+  const { mobile } = useResponsive();
+
+  const { firstRow, lastRow } = useMemo(() => {
+    if (items.length === 4) {
+      return {
+        firstRow: items.slice(0, 2),
+        lastRow: items.slice(2, 4),
+      };
+    }
+
+    const firstCol = items.length % 3 === 0 ? 3 : items.length % 3;
+
+    return {
+      firstRow: items.slice(0, firstCol),
+      lastRow: items.slice(firstCol, items.length),
+    };
+  }, [items]);
+
+  const { gap, max } = useMemo(
+    () => ({
+      gap: mobile ? 4 : 6,
+      max: mobile ? MAX_SIZE_MOBILE : MAX_SIZE_DESKTOP,
+    }),
+    [mobile],
+  );
+
+  return (
+    <ImageGallery>
+      <Flexbox gap={gap}>
+        <FileGrid col={firstRow.length} gap={gap} max={max}>
+          {firstRow.map((i) => (
+            <FileItem id={i} key={i} />
+          ))}
+        </FileGrid>
+        {lastRow.length > 0 && (
+          <FileGrid col={lastRow.length > 2 ? 3 : lastRow.length} gap={gap} max={max}>
+            {lastRow.map((i) => (
+              <FileItem id={i} key={i} />
+            ))}
+          </FileGrid>
+        )}
+      </Flexbox>
+    </ImageGallery>
+  );
+});
+
+export default FileList;

package/src/components/FileList/style.ts

@@ -0,0 +1,24 @@
+import { createStyles } from 'antd-style';
+
+export const MIN_IMAGE_SIZE = 64;
+export const MAX_SIZE_DESKTOP = 640;
+export const MAX_SIZE_MOBILE = 280;
+export const useStyles = createStyles(
+  ({ css }, { col, gap, max, min }: { col: number; gap: number; max: number; min: number }) => ({
+    container: css`
+      display: grid;
+      grid-gap: ${gap}px;
+      grid-template-columns: repeat(${col}, 1fr);
+
+      width: 100%;
+      max-width: ${max}px;
+
+      & > div {
+        width: 100%;
+        min-width: ${min}px;
+        min-height: ${min}px;
+        max-height: ${(max - gap * (col - 1)) / col}px;
+      }
+    `,
+  }),
+);

package/src/features/AgentSetting/AgentPlugin/MarketList.tsx

@@ -6,9 +6,9 @@ import { LucideBlocks, LucideSettings, LucideStore, LucideTrash2 } from 'lucide-
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
-import DevModal from 'src/features/PluginDevModal';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
+import DevModal from '@/features/PluginDevModal';
 import { pluginHelpers, usePluginStore } from '@/store/plugin';
 import { pluginSelectors } from '@/store/plugin/selectors';
 

package/src/layout/AppLayout.desktop.tsx

@@ -8,6 +8,7 @@ import { useIsPWA } from '@/hooks/useIsPWA';
 const AppLayoutDesktop = memo<PropsWithChildren>(({ children }) => {
   const isPWA = useIsPWA();
   const theme = useTheme();
+
   return (
     <Flexbox
       height={'100%'}

package/src/layout/GlobalLayout/Locale.tsx

@@ -16,6 +16,7 @@ const InnerLocale = memo<LocaleLayoutProps>(({ children, lang }) => {
     lang,
     async () =>
       await import(`antd/locale/${lang?.includes('-') ? lang?.replace('-', '_') : 'en-US'}.js`),
+    { revalidateOnFocus: false },
   );
   const [i18n] = useState(createI18nNext(lang));