@lobehub/chat 0.161.5 → 0.161.7

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 # Changelog
 
+### [Version 0.161.7](https://github.com/lobehub/lobe-chat/compare/v0.161.6...v0.161.7)
+
+<sup>Released on **2024-05-22**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor to serverDB ENV.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor to serverDB ENV, closes [#2612](https://github.com/lobehub/lobe-chat/issues/2612) ([fa1409e](https://github.com/lobehub/lobe-chat/commit/fa1409e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.161.6](https://github.com/lobehub/lobe-chat/compare/v0.161.5...v0.161.6)
+
+<sup>Released on **2024-05-22**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.161.5](https://github.com/lobehub/lobe-chat/compare/v0.161.4...v0.161.5)
 
 <sup>Released on **2024-05-22**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.161.5",
+  "version": "0.161.7",
   "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)/@topic/default.tsx

@@ -1,9 +1,14 @@
+// import TopicListContent from './features/TopicListContent';
+import React, { Suspense, lazy } from 'react';
+
 import { isMobileDevice } from '@/utils/responsive';
 
 import Desktop from './_layout/Desktop';
 import Mobile from './_layout/Mobile';
+import SkeletonList from './features/SkeletonList';
 import SystemRole from './features/SystemRole';
-import TopicListContent from './features/TopicListContent';
+
+const TopicContent = lazy(() => import('./features/TopicListContent'));
 
 const Topic = () => {
   const mobile = isMobileDevice();
@@ -14,7 +19,9 @@ const Topic = () => {
     <>
       {!mobile && <SystemRole />}
       <Layout>
-        <TopicListContent />
+        <Suspense fallback={<SkeletonList />}>
+          <TopicContent />
+        </Suspense>
       </Layout>
     </>
   );

package/src/app/(main)/chat/(workspace)/@topic/features/{TopicListContent/SkeletonList.tsx → SkeletonList.tsx}

@@ -1,3 +1,5 @@
+'use client';
+
 import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';

package/src/app/(main)/chat/(workspace)/@topic/features/TopicListContent/index.tsx

@@ -3,20 +3,19 @@
 import { EmptyCard } from '@lobehub/ui';
 import { useThemeMode } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import React, { Suspense, memo, useCallback, useRef } from 'react';
+import React, { memo, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
 import { imageUrl } from '@/const/url';
-import { isServerMode } from '@/const/version';
 import { useChatStore } from '@/store/chat';
 import { topicSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
 import { useUserStore } from '@/store/user';
 import { ChatTopic } from '@/types/topic';
 
-import { Placeholder, SkeletonList } from './SkeletonList';
+import { Placeholder, SkeletonList } from '../SkeletonList';
 import TopicItem from './TopicItem';
 
 const TopicListContent = memo(() => {
@@ -34,21 +33,19 @@ const TopicListContent = memo(() => {
     s.updateGuideState,
   ]);
 
-  const topics = useChatStore(
-    (s) => [
-      {
-        favorite: false,
-        id: 'default',
-        title: t('topic.defaultTitle'),
-      } as ChatTopic,
-      ...topicSelectors.displayTopics(s),
+  const activeTopicList = useChatStore(topicSelectors.displayTopics, isEqual);
+
+  const topics = useMemo(
+    () => [
+      { favorite: false, id: 'default', title: t('topic.defaultTitle') } as ChatTopic,
+      ...(activeTopicList || []),
     ],
-    isEqual,
+    [activeTopicList],
   );
 
   const [sessionId] = useSessionStore((s) => [s.activeId]);
 
-  const { isLoading } = useFetchTopics(sessionId);
+  useFetchTopics(sessionId);
 
   const itemContent = useCallback(
     (index: number, { id, favorite, title }: ChatTopic) =>
@@ -62,13 +59,9 @@ const TopicListContent = memo(() => {
 
   const activeIndex = topics.findIndex((topic) => topic.id === activeTopicId);
 
-  // first time loading
-  if (!topicsInit) return <SkeletonList />;
-
-  // in server mode and re-loading
-  if (isServerMode && isLoading) return <SkeletonList />;
+  // first time loading or has no data
+  if (!topicsInit || !activeTopicList) return <SkeletonList />;
 
-  // in client mode no need the loading state for better UX
   return (
     <>
       {topicLength === 0 && visible && (
@@ -111,8 +104,4 @@ const TopicListContent = memo(() => {
 
 TopicListContent.displayName = 'TopicListContent';
 
-export default memo(() => (
-  <Suspense fallback={<SkeletonList />}>
-    <TopicListContent />
-  </Suspense>
-));
+export default TopicListContent;

package/src/config/__tests__/client.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import { getClientConfig } from '../client';
+import { getDebugConfig } from '../debug';
 
 // 测试前重置 process.env
 vi.stubGlobal('process', {
@@ -17,7 +17,7 @@ describe('getClientConfig', () => {
     process.env.NEXT_PUBLIC_I18N_DEBUG_BROWSER = '1';
     process.env.NEXT_PUBLIC_I18N_DEBUG_SERVER = '1';
 
-    const config = getClientConfig();
+    const config = getDebugConfig();
     expect(config.I18N_DEBUG).toBe(true);
     expect(config.I18N_DEBUG_BROWSER).toBe(true);
     expect(config.I18N_DEBUG_SERVER).toBe(true);
@@ -31,7 +31,7 @@ describe('getClientConfig', () => {
     process.env.NEXT_PUBLIC_I18N_DEBUG_BROWSER = '0';
     process.env.NEXT_PUBLIC_I18N_DEBUG_SERVER = '0';
 
-    const config = getClientConfig();
+    const config = getDebugConfig();
 
     expect(config.I18N_DEBUG).toBe(false);
     expect(config.I18N_DEBUG_BROWSER).toBe(false);

package/src/config/db.ts

@@ -0,0 +1,16 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix , typescript-sort-keys/interface */
+import { createEnv } from '@t3-oss/env-nextjs';
+import { z } from 'zod';
+
+export const getServerDBConfig = () => {
+  return createEnv({
+    client: {
+      NEXT_PUBLIC_ENABLED_SERVER_SERVICE: z.boolean(),
+    },
+    runtimeEnv: {
+      NEXT_PUBLIC_ENABLED_SERVER_SERVICE: process.env.NEXT_PUBLIC_SERVICE_MODE === 'server',
+    },
+  });
+};
+
+export const serverDBEnv = getServerDBConfig();

package/src/config/{client.ts → debug.ts}

@@ -1,32 +1,22 @@
-/**
- * the client config is only used in Vercel deployment
- */
-
-/* eslint-disable sort-keys-fix/sort-keys-fix , typescript-sort-keys/interface */
-
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace NodeJS {
     interface ProcessEnv {
+      NEXT_PUBLIC_DEVELOPER_DEBUG: string;
       NEXT_PUBLIC_I18N_DEBUG: string;
       NEXT_PUBLIC_I18N_DEBUG_BROWSER: string;
-      NEXT_PUBLIC_I18N_DEBUG_SERVER: string;
-
-      NEXT_PUBLIC_DEVELOPER_DEBUG: string;
 
-      NEXT_PUBLIC_SERVICE_MODE?: 'server' | 'browser';
+      NEXT_PUBLIC_I18N_DEBUG_SERVER: string;
     }
   }
 }
 
-export const getClientConfig = () => ({
-  ENABLED_SERVER_SERVICE: process.env.NEXT_PUBLIC_SERVICE_MODE === 'server',
+export const getDebugConfig = () => ({
+  // developer debug mode
+  DEBUG_MODE: process.env.NEXT_PUBLIC_DEVELOPER_DEBUG === '1',
 
   // i18n debug mode
   I18N_DEBUG: process.env.NEXT_PUBLIC_I18N_DEBUG === '1',
   I18N_DEBUG_BROWSER: process.env.NEXT_PUBLIC_I18N_DEBUG_BROWSER === '1',
   I18N_DEBUG_SERVER: process.env.NEXT_PUBLIC_I18N_DEBUG_SERVER === '1',
-
-  // developer debug mode
-  DEBUG_MODE: process.env.NEXT_PUBLIC_DEVELOPER_DEBUG === '1',
 });

package/src/const/version.ts

@@ -1,6 +1,6 @@
 import pkg from '@/../package.json';
-import { getClientConfig } from '@/config/client';
+import { getServerDBConfig } from '@/config/db';
 
 export const CURRENT_VERSION = pkg.version;
 
-export const isServerMode = getClientConfig().ENABLED_SERVER_SERVICE;
+export const isServerMode = getServerDBConfig().NEXT_PUBLIC_ENABLED_SERVER_SERVICE;

package/src/layout/GlobalProvider/index.tsx

@@ -2,7 +2,7 @@ import dynamic from 'next/dynamic';
 import { cookies } from 'next/headers';
 import { FC, ReactNode } from 'react';
 
-import { getClientConfig } from '@/config/client';
+import { getDebugConfig } from '@/config/debug';
 import { getServerFeatureFlagsValue } from '@/config/featureFlags';
 import { LOBE_LOCALE_COOKIE } from '@/const/locale';
 import {
@@ -26,7 +26,7 @@ let DebugUI: FC = () => null;
 // refs: https://webpack.js.org/plugins/internal-plugins/#constplugin
 if (process.env.NODE_ENV === 'development') {
   // eslint-disable-next-line unicorn/no-lonely-if
-  if (getClientConfig().DEBUG_MODE) {
+  if (getDebugConfig().DEBUG_MODE) {
     DebugUI = dynamic(() => import('@/features/DebugUI'), { ssr: false }) as FC;
   }
 }

package/src/locales/create.ts

@@ -4,13 +4,13 @@ import resourcesToBackend from 'i18next-resources-to-backend';
 import { initReactI18next } from 'react-i18next';
 import { isRtlLang } from 'rtl-detect';
 
-import { getClientConfig } from '@/config/client';
+import { getDebugConfig } from '@/config/debug';
 import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
 import { COOKIE_CACHE_DAYS } from '@/const/settings';
 import { normalizeLocale } from '@/locales/resources';
 import { isDev, isOnServerSide } from '@/utils/env';
 
-const { I18N_DEBUG, I18N_DEBUG_BROWSER, I18N_DEBUG_SERVER } = getClientConfig();
+const { I18N_DEBUG, I18N_DEBUG_BROWSER, I18N_DEBUG_SERVER } = getDebugConfig();
 const debugMode = I18N_DEBUG ?? isOnServerSide ? I18N_DEBUG_SERVER : I18N_DEBUG_BROWSER;
 
 export const createI18nNext = (lang?: string) => {

package/src/store/chat/slices/topic/action.test.ts

@@ -12,12 +12,14 @@ import { ChatTopic } from '@/types/topic';
 
 import { useChatStore } from '../../store';
 
+vi.mock('zustand/traditional');
 // Mock topicService 和 messageService
 vi.mock('@/services/topic', () => ({
   topicService: {
     removeTopics: vi.fn(),
     removeAllTopic: vi.fn(),
     removeTopic: vi.fn(),
+    cloneTopic: vi.fn(),
     createTopic: vi.fn(),
     updateTopicFavorite: vi.fn(),
     updateTopicTitle: vi.fn(),
@@ -31,9 +33,23 @@ vi.mock('@/services/topic', () => ({
 vi.mock('@/services/message', () => ({
   messageService: {
     removeMessages: vi.fn(),
+    getMessages: vi.fn(),
   },
 }));
 
+vi.mock('@/components/AntdStaticMethods', () => ({
+  message: {
+    loading: vi.fn(),
+    success: vi.fn(),
+    error: vi.fn(),
+    destroy: vi.fn(),
+  },
+}));
+
+vi.mock('i18next', () => ({
+  t: vi.fn((key, params) => (params.title ? key + '_' + params.title : key)),
+}));
+
 beforeEach(() => {
   // Setup initial state and mocks before each test
   vi.clearAllMocks();
@@ -222,7 +238,7 @@ describe('topic action', () => {
         expect(result.current.data).toEqual(topics);
       });
       expect(useChatStore.getState().topicsInit).toBeTruthy();
-      expect(useChatStore.getState().topics).toEqual(topics);
+      expect(useChatStore.getState().topicMaps).toEqual({ [sessionId]: topics });
     });
   });
   describe('useSearchTopics', () => {
@@ -411,7 +427,7 @@ describe('topic action', () => {
       const topics = [{ id: 'topic-1', title: 'Test Topic' }] as ChatTopic[];
       const { result } = renderHook(() => useChatStore());
       await act(async () => {
-        useChatStore.setState({ topics });
+        useChatStore.setState({ topicMaps: { test: topics }, activeId: 'test' });
       });
 
       // Mock the `updateTopicTitleInSummary` and `refreshTopic` for spying
@@ -437,4 +453,82 @@ describe('topic action', () => {
       // TODO: need to test with fetchPresetTaskResult
     });
   });
+  describe('createTopic', () => {
+    it('should create a new topic and update the store', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const activeId = 'test-session-id';
+      const newTopicId = 'new-topic-id';
+      const messages = [{ id: 'message-1' }, { id: 'message-2' }] as ChatMessage[];
+
+      await act(async () => {
+        useChatStore.setState({
+          activeId,
+          messagesMap: {
+            [messageMapKey(activeId)]: messages,
+          },
+        });
+      });
+
+      const createTopicSpy = vi.spyOn(topicService, 'createTopic').mockResolvedValue(newTopicId);
+      const refreshTopicSpy = vi.spyOn(result.current, 'refreshTopic');
+
+      await act(async () => {
+        const topicId = await result.current.createTopic();
+        expect(topicId).toBe(newTopicId);
+      });
+
+      expect(createTopicSpy).toHaveBeenCalledWith({
+        sessionId: activeId,
+        messages: messages.map((m) => m.id),
+        title: 'topic.defaultTitle',
+      });
+      expect(refreshTopicSpy).toHaveBeenCalled();
+    });
+  });
+  describe('duplicateTopic', () => {
+    it('should duplicate a topic and switch to the new topic', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const topicId = 'topic-1';
+      const newTopicId = 'new-topic-id';
+      const topics = [{ id: topicId, title: 'Original Topic' }] as ChatTopic[];
+
+      await act(async () => {
+        useChatStore.setState({ activeId: 'abc', topicMaps: { abc: topics } });
+      });
+
+      const cloneTopicSpy = vi.spyOn(topicService, 'cloneTopic').mockResolvedValue(newTopicId);
+      const refreshTopicSpy = vi.spyOn(result.current, 'refreshTopic');
+      const switchTopicSpy = vi.spyOn(result.current, 'switchTopic');
+
+      await act(async () => {
+        await result.current.duplicateTopic(topicId);
+      });
+
+      expect(cloneTopicSpy).toHaveBeenCalledWith(topicId, 'duplicateTitle_Original Topic');
+      expect(refreshTopicSpy).toHaveBeenCalled();
+      expect(switchTopicSpy).toHaveBeenCalledWith(newTopicId);
+    });
+  });
+  describe('autoRenameTopicTitle', () => {
+    it('should auto-rename the topic title based on the messages', async () => {
+      const { result } = renderHook(() => useChatStore());
+      const topicId = 'topic-1';
+      const activeId = 'test-session-id';
+      const messages = [{ id: 'message-1', content: 'Hello' }] as ChatMessage[];
+
+      await act(async () => {
+        useChatStore.setState({ activeId });
+      });
+
+      const getMessagesSpy = vi.spyOn(messageService, 'getMessages').mockResolvedValue(messages);
+      const summaryTopicTitleSpy = vi.spyOn(result.current, 'summaryTopicTitle');
+
+      await act(async () => {
+        await result.current.autoRenameTopicTitle(topicId);
+      });
+
+      expect(getMessagesSpy).toHaveBeenCalledWith(activeId, topicId);
+      expect(summaryTopicTitleSpy).toHaveBeenCalledWith(topicId, messages);
+    });
+  });
 });

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

@@ -1,6 +1,7 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix, typescript-sort-keys/interface */
 // Note: To make the code more logic and readable, we just disable the auto sort key eslint rule
 // DON'T REMOVE THE FIRST LINE
+import isEqual from 'fast-deep-equal';
 import { t } from 'i18next';
 import { produce } from 'immer';
 import useSWR, { SWRResponse, mutate } from 'swr';
@@ -191,7 +192,16 @@ export const chatTopic: StateCreator<
         suspense: true,
         fallbackData: [],
         onSuccess: (topics) => {
-          set({ topics, topicsInit: true }, false, n('useFetchTopics(success)', { sessionId }));
+          const nextMap = { ...get().topicMaps, [sessionId]: topics };
+
+          // no need to update map if the topics have been init and the map is the same
+          if (get().topicsInit && isEqual(nextMap, get().topicMaps)) return;
+
+          set(
+            { topicMaps: nextMap, topicsInit: true },
+            false,
+            n('useFetchTopics(success)', { sessionId }),
+          );
         },
       },
     ),

package/src/store/chat/slices/topic/initialState.ts

@@ -6,6 +6,7 @@ export interface ChatTopicState {
   isSearchingTopic: boolean;
   searchTopics: ChatTopic[];
   topicLoadingIds: string[];
+  topicMaps: Record<string, ChatTopic[]>;
   topicRenamingId?: string;
   topicSearchKeywords: string;
   topics: ChatTopic[];
@@ -20,6 +21,7 @@ export const initialTopicState: ChatTopicState = {
   isSearchingTopic: false,
   searchTopics: [],
   topicLoadingIds: [],
+  topicMaps: {},
   topicSearchKeywords: '',
   topics: [],
   topicsInit: false,

package/src/store/chat/slices/topic/selectors.test.ts

@@ -8,23 +8,25 @@ import { topicSelectors } from '../../selectors';
 
 const initialStore = initialState as ChatStore;
 
-const mockTopics = [
-  { id: 'topic1', name: 'Topic 1' },
-  { id: 'topic2', name: 'Topic 2' },
-];
+const topicMaps = {
+  test: [
+    { id: 'topic1', name: 'Topic 1', favorite: true },
+    { id: 'topic2', name: 'Topic 2' },
+  ],
+};
 
 describe('topicSelectors', () => {
   describe('currentTopics', () => {
-    it('should return an empty array if there are no topics', () => {
+    it('should return undefined if there are no topics with activeId', () => {
       const topics = topicSelectors.currentTopics(initialStore);
-      expect(topics).toEqual([]);
+      expect(topics).toBeUndefined();
     });
 
     it('should return all current topics from the store', () => {
-      const state = merge(initialStore, { topics: mockTopics });
+      const state = merge(initialStore, { topicMaps, activeId: 'test' });
 
       const topics = topicSelectors.currentTopics(state);
-      expect(topics).toEqual(mockTopics);
+      expect(topics).toEqual(topicMaps.test);
     });
   });
 
@@ -35,9 +37,59 @@ describe('topicSelectors', () => {
     });
 
     it('should return the number of current topics', () => {
-      const state = merge(initialStore, { topics: mockTopics });
+      const state = merge(initialStore, { topicMaps, activeId: 'test' });
       const length = topicSelectors.currentTopicLength(state);
-      expect(length).toBe(mockTopics.length);
+      expect(length).toBe(topicMaps.test.length);
+    });
+  });
+
+  describe('currentActiveTopic', () => {
+    it('should return undefined if there is no active topic', () => {
+      const topic = topicSelectors.currentActiveTopic(initialStore);
+      expect(topic).toBeUndefined();
+    });
+
+    it('should return the current active topic', () => {
+      const state = merge(initialStore, { topicMaps, activeId: 'test', activeTopicId: 'topic1' });
+      const topic = topicSelectors.currentActiveTopic(state);
+      expect(topic).toEqual(topicMaps.test[0]);
+    });
+  });
+
+  describe('currentUnFavTopics', () => {
+    it('should return all unfavorited topics', () => {
+      const state = merge(initialStore, { topics: topicMaps.test });
+      const topics = topicSelectors.currentUnFavTopics(state);
+      expect(topics).toEqual([topicMaps.test[1]]);
+    });
+  });
+
+  describe('displayTopics', () => {
+    it('should return current topics if not searching', () => {
+      const state = merge(initialStore, { topicMaps, activeId: 'test' });
+      const topics = topicSelectors.displayTopics(state);
+      expect(topics).toEqual(topicMaps.test);
+    });
+
+    it('should return search topics if searching', () => {
+      const searchTopics = [{ id: 'search1', name: 'Search 1' }];
+      const state = merge(initialStore, { isSearchingTopic: true, searchTopics });
+      const topics = topicSelectors.displayTopics(state);
+      expect(topics).toEqual(searchTopics);
+    });
+  });
+
+  describe('getTopicById', () => {
+    it('should return undefined if topic is not found', () => {
+      const state = merge(initialStore, { topicMaps, activeId: 'test' });
+      const topic = topicSelectors.getTopicById('notfound')(state);
+      expect(topic).toBeUndefined();
+    });
+
+    it('should return the topic with the given id', () => {
+      const state = merge(initialStore, { topicMaps, activeId: 'test' });
+      const topic = topicSelectors.getTopicById('topic1')(state);
+      expect(topic).toEqual(topicMaps.test[0]);
     });
   });
 });

package/src/store/chat/slices/topic/selectors.ts

@@ -2,24 +2,24 @@ import { ChatTopic } from '@/types/topic';
 
 import { ChatStore } from '../../store';
 
-const currentTopics = (s: ChatStore): ChatTopic[] => s.topics;
+const currentTopics = (s: ChatStore): ChatTopic[] | undefined => s.topicMaps[s.activeId];
 
 const currentActiveTopic = (s: ChatStore): ChatTopic | undefined => {
-  return s.topics.find((topic) => topic.id === s.activeTopicId);
+  return currentTopics(s)?.find((topic) => topic.id === s.activeTopicId);
 };
 const searchTopics = (s: ChatStore): ChatTopic[] => s.searchTopics;
 
-const displayTopics = (s: ChatStore): ChatTopic[] =>
+const displayTopics = (s: ChatStore): ChatTopic[] | undefined =>
   s.isSearchingTopic ? searchTopics(s) : currentTopics(s);
 
 const currentUnFavTopics = (s: ChatStore): ChatTopic[] => s.topics.filter((s) => !s.favorite);
 
-const currentTopicLength = (s: ChatStore): number => currentTopics(s).length;
+const currentTopicLength = (s: ChatStore): number => currentTopics(s)?.length || 0;
 
 const getTopicById =
   (id: string) =>
   (s: ChatStore): ChatTopic | undefined =>
-    currentTopics(s).find((topic) => topic.id === id);
+    currentTopics(s)?.find((topic) => topic.id === id);
 
 export const topicSelectors = {
   currentActiveTopic,