@lobehub/chat 0.107.12 → 0.107.13

package/CHANGELOG.md

@@ -2,6 +2,60 @@
 
 # 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>

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.12",
+  "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/Footer/LocalFiles.tsx

@@ -1,10 +1,10 @@
 import { memo } from 'react';
 
-import FileList from '@/app/chat/components/FileList';
+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 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/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/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));
 

package/src/store/chat/actions/message.test.ts

@@ -0,0 +1,481 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import useSWR, { mutate } from 'swr';
+import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { LOADING_FLAT } from '@/const/message';
+import { chatService } from '@/services/chat';
+import { messageService } from '@/services/message';
+import { topicService } from '@/services/topic';
+import { chatSelectors } from '@/store/chat/selectors';
+import { ChatMessage } from '@/types/chatMessage';
+
+import { useChatStore } from '../store';
+
+// Mock service
+vi.mock('@/services/message', () => ({
+  messageService: {
+    getMessages: vi.fn(),
+    updateMessageError: vi.fn(),
+    removeMessage: vi.fn(),
+    createAssistantMessage: vi.fn(() => Promise.resolve('content-content-content')),
+    removeMessages: vi.fn(() => Promise.resolve()),
+    create: vi.fn(() => Promise.resolve('new-message-id')),
+    updateMessageContent: vi.fn(),
+    clearAllMessage: vi.fn(() => Promise.resolve()),
+  },
+}));
+vi.mock('@/services/topic', () => ({
+  topicService: {
+    removeTopic: vi.fn(() => Promise.resolve()),
+  },
+}));
+vi.mock('@/services/chat', () => ({
+  chatService: {
+    createAssistantMessage: vi.fn(() => Promise.resolve('assistant-message')),
+  },
+}));
+
+vi.mock('@/store/chat/selectors', () => ({
+  chatSelectors: {
+    currentChats: vi.fn(),
+  },
+}));
+
+const realCoreProcessMessage = useChatStore.getState().coreProcessMessage;
+const realRefreshMessages = useChatStore.getState().refreshMessages;
+// Mock state
+const mockState = {
+  activeId: 'session-id',
+  activeTopicId: 'topic-id',
+  messages: [],
+  refreshMessages: vi.fn(),
+  refreshTopic: vi.fn(),
+  coreProcessMessage: vi.fn(),
+  saveToTopic: vi.fn(),
+};
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  useChatStore.setState(mockState, false);
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('chatMessage actions', () => {
+  it('clearMessage should remove messages from the active session and topic', async () => {
+    const { result } = renderHook(() => useChatStore());
+    const clearSpy = vi.spyOn(result.current, 'clearMessage');
+    const switchTopicSpy = vi.spyOn(result.current, 'switchTopic');
+
+    await act(async () => {
+      await result.current.clearMessage();
+    });
+
+    expect(clearSpy).toHaveBeenCalled();
+    expect(result.current.refreshMessages).toHaveBeenCalled();
+    expect(result.current.refreshTopic).toHaveBeenCalled();
+    expect(switchTopicSpy).toHaveBeenCalled();
+  });
+
+  it('deleteMessage should remove a message by id', async () => {
+    const { result } = renderHook(() => useChatStore());
+    const messageId = 'message-id';
+    const deleteSpy = vi.spyOn(result.current, 'deleteMessage');
+
+    await act(async () => {
+      await result.current.deleteMessage(messageId);
+    });
+
+    expect(deleteSpy).toHaveBeenCalledWith(messageId);
+    expect(result.current.refreshMessages).toHaveBeenCalled();
+  });
+
+  it('clearAllMessages should remove all messages', async () => {
+    const { result } = renderHook(() => useChatStore());
+    const clearAllSpy = vi.spyOn(result.current, 'clearAllMessages');
+
+    await act(async () => {
+      await result.current.clearAllMessages();
+    });
+
+    expect(clearAllSpy).toHaveBeenCalled();
+    expect(result.current.refreshMessages).toHaveBeenCalled();
+  });
+
+  it('updateInputMessage should update the input message state', () => {
+    const { result } = renderHook(() => useChatStore());
+    const newInputMessage = 'Updated message';
+    act(() => {
+      result.current.updateInputMessage(newInputMessage);
+    });
+
+    expect(result.current.inputMessage).toEqual(newInputMessage);
+  });
+
+  describe('clearMessage', () => {
+    beforeEach(() => {
+      vi.clearAllMocks(); // 清除 mocks
+      useChatStore.setState(mockState, false); // 重置 state
+    });
+
+    afterEach(() => {
+      vi.restoreAllMocks(); // 恢复所有模拟
+    });
+
+    it('should remove messages from the active session and topic, then refresh topics and messages', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const switchTopicSpy = vi.spyOn(result.current, 'switchTopic');
+      const refreshTopicSpy = vi.spyOn(result.current, 'refreshTopic');
+
+      await act(async () => {
+        await result.current.clearMessage();
+      });
+
+      expect(mockState.refreshMessages).toHaveBeenCalled();
+      expect(refreshTopicSpy).toHaveBeenCalled();
+      expect(switchTopicSpy).toHaveBeenCalled();
+
+      // 检查 activeTopicId 是否被清除，需要在状态更新后进行检查
+      expect(useChatStore.getState().activeTopicId).toBeUndefined();
+    });
+
+    it('should call removeTopic if there is an activeTopicId', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const switchTopicSpy = vi.spyOn(result.current, 'switchTopic');
+      const refreshTopicSpy = vi.spyOn(result.current, 'refreshTopic');
+
+      await act(async () => {
+        await result.current.clearMessage();
+      });
+
+      expect(mockState.activeTopicId).not.toBeUndefined(); // 确保在测试前 activeTopicId 存在
+      expect(refreshTopicSpy).toHaveBeenCalled();
+      expect(mockState.refreshMessages).toHaveBeenCalled();
+      expect(topicService.removeTopic).toHaveBeenCalledWith(mockState.activeTopicId);
+      expect(switchTopicSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('sendMessage', () => {
+    it('should not send message if there is no active session', async () => {
+      useChatStore.setState({ activeId: undefined });
+      const { result } = renderHook(() => useChatStore());
+      const message = 'Test message';
+
+      await act(async () => {
+        await result.current.sendMessage(message);
+      });
+
+      expect(messageService.create).not.toHaveBeenCalled();
+      expect(result.current.refreshMessages).not.toHaveBeenCalled();
+      expect(result.current.coreProcessMessage).not.toHaveBeenCalled();
+    });
+
+    it('should not send message if message is empty and there are no files', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const message = '';
+
+      await act(async () => {
+        await result.current.sendMessage(message);
+      });
+
+      expect(messageService.create).not.toHaveBeenCalled();
+      expect(result.current.refreshMessages).not.toHaveBeenCalled();
+      expect(result.current.coreProcessMessage).not.toHaveBeenCalled();
+    });
+
+    it('should not send message if message is empty and there are empty files', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const message = '';
+
+      await act(async () => {
+        await result.current.sendMessage(message, []);
+      });
+
+      expect(messageService.create).not.toHaveBeenCalled();
+      expect(result.current.refreshMessages).not.toHaveBeenCalled();
+      expect(result.current.coreProcessMessage).not.toHaveBeenCalled();
+    });
+
+    it('should create message and call coreProcessMessage if message or files are provided', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const message = 'Test message';
+      const files = [{ id: 'file-id', url: 'file-url' }];
+
+      // Mock messageService.create to resolve with a message id
+      (messageService.create as Mock).mockResolvedValue('new-message-id');
+
+      await act(async () => {
+        await result.current.sendMessage(message, files);
+      });
+
+      expect(messageService.create).toHaveBeenCalledWith({
+        content: message,
+        files: files.map((f) => f.id),
+        role: 'user',
+        sessionId: mockState.activeId,
+        topicId: mockState.activeTopicId,
+      });
+      expect(result.current.refreshMessages).toHaveBeenCalled();
+      expect(result.current.coreProcessMessage).toHaveBeenCalled();
+    });
+
+    // it('should auto-create topic and switch to it if enabled and threshold is reached', async () => {
+    //   const { result } = renderHook(() => useChatStore());
+    //   const message = 'Test message';
+    //   const autoCreateTopicThreshold = 5;
+    //   const enableAutoCreateTopic = true;
+    //
+    //   // Mock state with the necessary settings
+    //   useChatStore.setState({
+    //     ...mockState,
+    //     messages: Array(autoCreateTopicThreshold).fill({}), // Fill with dummy messages to reach threshold
+    //   });
+    //
+    //   // Mock messageService.create to resolve with a message id
+    //   (messageService.create as vi.Mock).mockResolvedValue('new-message-id');
+    //
+    //   await act(async () => {
+    //     await result.current.sendMessage(message);
+    //   });
+    //
+    //   expect(result.current.saveToTopic).toHaveBeenCalled();
+    //   expect(result.current.switchTopic).toHaveBeenCalled();
+    // });
+    // 其他可能的测试用例...
+  });
+
+  describe('resendMessage action', () => {
+    it('should resend a message by id and refresh messages', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const messageId = 'message-id';
+
+      // Mock the currentChats selector to return a list that includes the message to be resent
+      (chatSelectors.currentChats as Mock).mockReturnValue([
+        // ... other messages
+        { id: messageId, role: 'user', content: 'Resend this message' },
+        // ... other messages
+      ]);
+
+      // Mock the coreProcessMessage function to resolve immediately
+      mockState.coreProcessMessage.mockResolvedValue(undefined);
+
+      await act(async () => {
+        await result.current.resendMessage(messageId);
+      });
+
+      expect(messageService.removeMessage).not.toHaveBeenCalledWith(messageId);
+      expect(mockState.coreProcessMessage).toHaveBeenCalledWith(expect.any(Array), messageId);
+    });
+
+    it('should not perform any action if the message id does not exist', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const messageId = 'non-existing-message-id';
+
+      // Mock the currentChats selector to return a list that does not include the message to be resent
+      (chatSelectors.currentChats as Mock).mockReturnValue([
+        // ... other messages
+      ]);
+
+      await act(async () => {
+        await result.current.resendMessage(messageId);
+      });
+
+      expect(messageService.removeMessage).not.toHaveBeenCalledWith(messageId);
+      expect(mockState.coreProcessMessage).not.toHaveBeenCalled();
+      expect(mockState.refreshMessages).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('updateMessageContent action', () => {
+    it('should call messageService.updateMessageContent with correct parameters', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const messageId = 'message-id';
+      const newContent = 'Updated content';
+
+      await act(async () => {
+        await result.current.updateMessageContent(messageId, newContent);
+      });
+
+      expect(messageService.updateMessageContent).toHaveBeenCalledWith(messageId, newContent);
+    });
+
+    it('should dispatch message update action', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const messageId = 'message-id';
+      const newContent = 'Updated content';
+      const dispatchMessageSpy = vi.spyOn(result.current, 'dispatchMessage');
+
+      await act(async () => {
+        await result.current.updateMessageContent(messageId, newContent);
+      });
+
+      expect(dispatchMessageSpy).toHaveBeenCalledWith({
+        id: messageId,
+        key: 'content',
+        type: 'updateMessage',
+        value: newContent,
+      });
+    });
+
+    it('should refresh messages after updating content', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const messageId = 'message-id';
+      const newContent = 'Updated content';
+
+      await act(async () => {
+        await result.current.updateMessageContent(messageId, newContent);
+      });
+
+      expect(result.current.refreshMessages).toHaveBeenCalled();
+    });
+  });
+
+  describe('coreProcessMessage action', () => {
+    it('should handle the core AI message processing', async () => {
+      useChatStore.setState({ coreProcessMessage: realCoreProcessMessage });
+
+      const { result } = renderHook(() => useChatStore());
+      const userMessage = {
+        id: 'user-message-id',
+        role: 'user',
+        content: 'Hello, world!',
+        sessionId: mockState.activeId,
+        topicId: mockState.activeTopicId,
+      } as ChatMessage;
+      const messages = [userMessage];
+
+      // 模拟 AI 响应
+      const aiResponse = 'Hello, human!';
+      (chatService.createAssistantMessage as Mock).mockResolvedValue(aiResponse);
+
+      // 模拟消息创建
+      (messageService.create as Mock).mockResolvedValue('assistant-message-id');
+
+      await act(async () => {
+        await result.current.coreProcessMessage(messages, userMessage.id);
+      });
+
+      // 验证是否创建了代表 AI 响应的消息
+      expect(messageService.create).toHaveBeenCalledWith(
+        expect.objectContaining({
+          role: 'assistant',
+          content: LOADING_FLAT,
+          fromModel: expect.anything(),
+          parentId: userMessage.id,
+          sessionId: mockState.activeId,
+          topicId: mockState.activeTopicId,
+        }),
+      );
+
+      // 验证 AI 服务是否被调用
+      expect(chatService.createAssistantMessage).toHaveBeenCalled();
+
+      // 验证消息列表是否刷新
+      expect(mockState.refreshMessages).toHaveBeenCalled();
+    });
+  });
+
+  describe('stopGenerateMessage action', () => {
+    it('should stop generating message and set loading states correctly', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const toggleChatLoadingSpy = vi.spyOn(result.current, 'toggleChatLoading');
+      const abortController = new AbortController();
+
+      // 设置模拟 abortController
+      useChatStore.setState({ abortController });
+
+      await act(async () => {
+        result.current.stopGenerateMessage();
+      });
+
+      expect(abortController.signal.aborted).toBe(true);
+      expect(toggleChatLoadingSpy).toHaveBeenCalledWith(false, undefined, expect.any(String));
+    });
+
+    it('should not do anything if there is no abortController', async () => {
+      const { result } = renderHook(() => useChatStore());
+
+      // 确保没有设置 abortController
+      useChatStore.setState({ abortController: undefined });
+
+      await act(async () => {
+        result.current.stopGenerateMessage();
+      });
+
+      // 由于没有 abortController，不应调用任何方法
+      expect(result.current.abortController).toBeUndefined();
+    });
+  });
+
+  describe('refreshMessages action', () => {
+    beforeEach(() => {
+      vi.mock('swr', async () => {
+        const actual = await vi.importActual('swr');
+        return {
+          ...(actual as any),
+          mutate: vi.fn(),
+        };
+      });
+    });
+    afterEach(() => {
+      // 在每个测试用例开始前恢复到实际的 SWR 实现
+      vi.resetAllMocks();
+    });
+    it('should refresh messages by calling mutate with current activeId and activeTopicId', async () => {
+      useChatStore.setState({ refreshMessages: realRefreshMessages });
+
+      const { result } = renderHook(() => useChatStore());
+      const activeId = useChatStore.getState().activeId;
+      const activeTopicId = useChatStore.getState().activeTopicId;
+
+      // 在这里，我们不需要再次模拟 mutate，因为它已经在顶部被模拟了
+      await act(async () => {
+        await result.current.refreshMessages();
+      });
+
+      // 确保 mutate 调用了正确的参数
+      expect(mutate).toHaveBeenCalledWith([activeId, activeTopicId]);
+    });
+    it('should handle errors during refreshing messages', async () => {
+      useChatStore.setState({ refreshMessages: realRefreshMessages });
+      const { result } = renderHook(() => useChatStore());
+
+      // 设置模拟错误
+      (mutate as Mock).mockImplementation(() => {
+        throw new Error('Mutate error');
+      });
+
+      await act(async () => {
+        await expect(result.current.refreshMessages()).rejects.toThrow('Mutate error');
+      });
+
+      // 确保恢复 mutate 的模拟，以免影响其他测试
+      (mutate as Mock).mockReset();
+    });
+  });
+
+  describe('useFetchMessages hook', () => {
+    // beforeEach(() => {
+    //   vi.mocked(useSWR).mockRestore();
+    // });
+
+    it('should fetch messages for given session and topic ids', async () => {
+      const sessionId = 'session-id';
+      const topicId = 'topic-id';
+      const messages = [{ id: 'message-id', content: 'Hello' }];
+
+      // 设置模拟返回值
+      (messageService.getMessages as Mock).mockResolvedValue(messages);
+
+      // renderHook 在 @testing-library/react-hooks 中使用，所以我们使用 render 来替代
+      const { result } = renderHook(() => useChatStore().useFetchMessages(sessionId, topicId));
+
+      // 等待异步操作完成
+      await waitFor(() => {
+        expect(result.current.data).toEqual(messages);
+      });
+    });
+  });
+});

package/src/store/chat/actions/message.ts

@@ -146,10 +146,13 @@ export const chatMessage: StateCreator<
   },
   sendMessage: async (message, files) => {
     const { coreProcessMessage, activeTopicId, activeId } = get();
-    if (!message || !activeId) return;
+    if (!activeId) return;
 
     const fileIdList = files?.map((f) => f.id);
 
+    // if message is empty and no files, then stop
+    if (!message && (!fileIdList || fileIdList?.length === 0)) return;
+
     let newMessage: CreateMessageParams = {
       content: message,
       // if message has attached with files, then add files to message and the agent

package/src/app/chat/components/FileList/FileItem.style.ts

@@ -1,84 +0,0 @@
-import { createStyles } from 'antd-style';
-
-export const IMAGE_SIZE = 64;
-const imageBorderRaidus = 8;
-
-export const useStyles = createStyles(({ css, cx, token, isDarkMode }) => {
-  const closeIcon = cx(css`
-    cursor: pointer;
-
-    position: absolute;
-    top: -6px;
-    right: -6px;
-
-    width: 16px;
-    height: 16px;
-
-    color: ${isDarkMode ? token.colorTextQuaternary : token.colorTextTertiary};
-
-    opacity: 0;
-    background: ${isDarkMode ? token.colorTextSecondary : token.colorBgContainer};
-    border-radius: 50%;
-
-    transition: all 0.2s ease-in;
-
-    &:hover {
-      scale: 1.2;
-    }
-  `);
-
-  return {
-    alwaysShowClose: css`
-      opacity: 1 !important;
-    `,
-    closeIcon,
-    container: css`
-      cursor: pointer;
-
-      position: relative;
-
-      width: ${IMAGE_SIZE}px;
-      height: ${IMAGE_SIZE}px;
-
-      border-radius: ${imageBorderRaidus}px;
-
-      &:hover {
-        .${closeIcon} {
-          opacity: 1;
-        }
-      }
-    `,
-    image: css`
-      opacity: ${isDarkMode ? 0.6 : 1};
-      object-fit: cover;
-      border-radius: 8px;
-      animation: fade-in 0.3s ease-in;
-
-      @keyframes fade-in {
-        from {
-          scale: 1.2;
-          opacity: 1;
-        }
-
-        to {
-          scale: 1;
-          opacity: 1;
-        }
-      }
-    `,
-    imageCtn: css`
-      position: relative;
-    `,
-    imageWrapper: css`
-      overflow: hidden;
-      width: ${IMAGE_SIZE}px;
-      height: ${IMAGE_SIZE}px;
-      border-radius: ${imageBorderRaidus}px;
-    `,
-    notFound: css`
-      color: ${token.colorTextSecondary};
-      background: ${token.colorFillTertiary};
-      border-radius: ${imageBorderRaidus}px;
-    `,
-  };
-});

package/src/app/chat/components/FileList/FileItem.tsx

@@ -1,73 +0,0 @@
-import { CloseCircleFilled } from '@ant-design/icons';
-import { Icon } from '@lobehub/ui';
-import { Skeleton } from 'antd';
-import { LucideImageOff } from 'lucide-react';
-import Image from 'next/image';
-import { memo } from 'react';
-import { Center, Flexbox } from 'react-layout-kit';
-
-import { useFileStore } from '@/store/file';
-
-import { IMAGE_SIZE, useStyles } from './FileItem.style';
-
-interface FileItemProps {
-  alwaysShowClose?: boolean;
-  editable: boolean;
-  id: string;
-  onClick: () => void;
-}
-const FileItem = memo<FileItemProps>(({ editable, id, onClick, alwaysShowClose }) => {
-  const { styles, cx } = useStyles();
-  const [useFetchFile, removeFile] = useFileStore((s) => [s.useFetchFile, s.removeFile]);
-
-  const { data, isLoading } = useFetchFile(id);
-
-  return (
-    <Flexbox className={styles.container} onClick={onClick}>
-      {isLoading ? (
-        <Skeleton
-          active
-          title={{
-            style: { borderRadius: 8, height: IMAGE_SIZE },
-            width: IMAGE_SIZE,
-          }}
-        />
-      ) : (
-        <Flexbox className={styles.imageCtn}>
-          <div className={styles.imageWrapper}>
-            {data ? (
-              <Image
-                alt={data.name || ''}
-                className={styles.image}
-                fetchPriority={'high'}
-                height={IMAGE_SIZE}
-                loading={'lazy'}
-                src={data.url}
-                width={IMAGE_SIZE}
-              />
-            ) : (
-              <Center className={styles.notFound} height={'100%'}>
-                <Icon icon={LucideImageOff} size={{ fontSize: 28 }} />
-              </Center>
-            )}
-          </div>
-        </Flexbox>
-      )}
-      {/* only show close icon when editable */}
-      {editable && (
-        <Center
-          className={cx(styles.closeIcon, alwaysShowClose && styles.alwaysShowClose)}
-          onClick={(e) => {
-            e.stopPropagation();
-
-            removeFile(id);
-          }}
-        >
-          <CloseCircleFilled />
-        </Center>
-      )}
-    </Flexbox>
-  );
-});
-
-export default FileItem;

package/src/app/chat/components/FileList/Lightbox.tsx

@@ -1,46 +0,0 @@
-import { createStyles } from 'antd-style';
-import { memo } from 'react';
-import Lightbox from 'react-spring-lightbox';
-
-import { filesSelectors, useFileStore } from '@/store/file';
-
-const useStyles = createStyles(({ css, token }) => ({
-  wrapper: css`
-    background: ${token.colorBgMask};
-    backdrop-filter: blur(4px);
-  `,
-}));
-
-interface LightBoxProps {
-  index: number;
-  items: string[];
-  onNext: () => void;
-  onOpenChange: (open: boolean) => void;
-  onPrev: () => void;
-  open: boolean;
-}
-
-const LightBox = memo<LightBoxProps>(({ onOpenChange, open, items, index, onNext, onPrev }) => {
-  const { styles } = useStyles();
-
-  const list = useFileStore(filesSelectors.getImageDetailByList(items));
-  return (
-    <Lightbox
-      className={styles.wrapper}
-      currentIndex={index}
-      images={list.map((i) => ({
-        alt: i.name,
-        loading: 'lazy',
-        src: i.url,
-      }))}
-      isOpen={open}
-      onClose={() => {
-        onOpenChange(false);
-      }}
-      onNext={onNext}
-      onPrev={onPrev}
-    />
-  );
-});
-
-export default LightBox;

package/src/app/chat/components/FileList/index.tsx

@@ -1,60 +0,0 @@
-import { memo, useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import FileItem from './FileItem';
-import Lightbox from './Lightbox';
-
-// TODO：后续看情况是否做图片过多的滚动功能
-// const useStyles = createStyles(({ css }) => ({
-//   container: css`
-//     width: ${IMAGE_SIZE * 5 + 4 * 8 + IMAGE_SIZE / 2}px;
-//     overflow-x: scroll;
-//     height: ${IMAGE_SIZE + 12}px;
-//   `,
-// }));
-
-interface FileListProps {
-  alwaysShowClose?: boolean;
-  editable?: boolean;
-  items: string[];
-}
-
-const FileList = memo<FileListProps>(({ items, editable = true, alwaysShowClose }) => {
-  // const { styles } = useStyles();
-
-  const [showLightbox, setShowLightbox] = useState(false);
-  const [currentImageIndex, setCurrentIndex] = useState(0);
-
-  const gotoPrevious = () => currentImageIndex > 0 && setCurrentIndex(currentImageIndex - 1);
-  const gotoNext = () =>
-    currentImageIndex + 1 < items.length && setCurrentIndex(currentImageIndex + 1);
-
-  return (
-    <>
-      <Flexbox align={'flex-end'} gap={8} horizontal>
-        {items.map((i, index) => (
-          <FileItem
-            alwaysShowClose={alwaysShowClose}
-            editable={editable}
-            id={i}
-            key={i}
-            onClick={() => {
-              setCurrentIndex(index);
-              setShowLightbox(true);
-            }}
-          />
-        ))}
-      </Flexbox>
-      <Lightbox
-        index={currentImageIndex}
-        items={items}
-        onNext={gotoNext}
-        onOpenChange={setShowLightbox}
-        onPrev={gotoPrevious}
-        open={showLightbox}
-      />
-    </>
-  );
-});
-
-export default FileList;