@lobehub/chat 0.120.3 → 0.120.4

package/src/config/server.ts

@@ -16,6 +16,8 @@ declare global {
 
       IMGUR_CLIENT_ID?: string;
 
+      METADATA_BASE_URL?: string;
+
       AGENTS_INDEX_URL?: string;
 
       PLUGINS_INDEX_URL?: string;
@@ -51,6 +53,8 @@ export const getServerConfig = () => {
     OPENAI_PROXY_URL: process.env.OPENAI_PROXY_URL,
     OPENAI_FUNCTION_REGIONS: regions,
 
+    METADATA_BASE_URL: process.env.METADATA_BASE_URL,
+
     AZURE_API_KEY: process.env.AZURE_API_KEY,
     AZURE_API_VERSION: process.env.AZURE_API_VERSION,
     USE_AZURE_OPENAI: process.env.USE_AZURE_OPENAI === '1',

package/src/const/url.ts

@@ -17,5 +17,5 @@ export const AGENTS_INDEX_GITHUB = 'https://github.com/lobehub/lobe-chat-agents'
 export const AGENTS_INDEX_GITHUB_ISSUE = urlJoin(AGENTS_INDEX_GITHUB, 'issues/new');
 
 export const SESSION_CHAT_URL = (id: string = INBOX_SESSION_ID, mobile?: boolean) =>
-  mobile ? `/chat/mobile#session=${id}` : `/chat#session=${id}`;
+  mobile ? `/chat/mobile?session=${id}` : `/chat?session=${id}`;
 export const MANUAL_UPGRADE_URL = 'https://github.com/lobehub/lobe-chat/wiki/Upstream-Sync';

package/src/database/models/__tests__/message.test.ts

@@ -329,14 +329,15 @@ describe('MessageModel', () => {
   describe('duplicateMessages', () => {
     it('should duplicate messages and update parentId for copied messages', async () => {
       // 创建原始消息和父消息
-      const parentMessageData: DB_Message = {
+      const parentMessageData: CreateMessageParams = {
         content: 'Parent message content',
         role: 'user',
         sessionId: 'session1',
+        topicId: undefined,
       };
       const parentMessage = await MessageModel.create(parentMessageData);
 
-      const childMessageData: DB_Message = {
+      const childMessageData: CreateMessageParams = {
         content: 'Child message content',
         role: 'user',
         sessionId: 'session1',

package/src/database/models/message.ts

@@ -46,14 +46,13 @@ class _MessageModel extends BaseModel {
   }: QueryMessageParams): Promise<ChatMessage[]> {
     const offset = current * pageSize;
 
-    const query =
-      topicId !== undefined
-        ? // TODO: The query {"sessionId":"xxx","topicId":"xxx"} on messages would benefit of a compound index [sessionId+topicId]
-          this.table.where({ sessionId, topicId }) // Use a compound index
-        : this.table
-            .where('sessionId')
-            .equals(sessionId)
-            .and((message) => !message.topicId);
+    const query = !!topicId
+      ? // TODO: The query {"sessionId":"xxx","topicId":"xxx"} on messages would benefit of a compound index [sessionId+topicId]
+        this.table.where({ sessionId, topicId }) // Use a compound index
+      : this.table
+          .where('sessionId')
+          .equals(sessionId)
+          .and((message) => !message.topicId);
 
     const dbMessages: DBModel<DB_Message>[] = await query
       .sortBy('createdAt')
@@ -221,7 +220,12 @@ class _MessageModel extends BaseModel {
     tts,
     ...item
   }: DBModel<DB_Message>): ChatMessage => {
-    return { ...item, extra: { fromModel, translate, tts }, meta: {} };
+    return {
+      ...item,
+      extra: { fromModel, translate, tts },
+      meta: {},
+      topicId: item.topicId ?? undefined,
+    };
   };
 }
 

package/src/database/schemas/message.ts

@@ -31,7 +31,7 @@ export const DB_MessageSchema = z.object({
   parentId: z.string().optional(),
   quotaId: z.string().optional(),
   sessionId: z.string(),
-  topicId: z.string().optional(),
+  topicId: z.string().nullable().optional(),
 });
 
 export type DB_Message = z.infer<typeof DB_MessageSchema>;

package/src/features/ChatInput/useChatInput.ts

@@ -1,7 +1,6 @@
 import { TextAreaRef } from 'antd/es/input/TextArea';
 import { useCallback, useRef, useState } from 'react';
 
-import { useIsMobile } from '@/hooks/useIsMobile';
 import { useChatStore } from '@/store/chat';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
@@ -20,15 +19,12 @@ export const useChatInput = () => {
     s.updateInputMessage,
     s.stopGenerateMessage,
   ]);
-  const mobile = useIsMobile();
 
   const handleSend = useCallback(() => {
     setExpand(false);
-    if (mobile) {
-      ref?.current?.blur();
-    }
+
     onSend();
-  }, [onSend, mobile]);
+  }, [onSend]);
 
   return {
     canUpload,

package/src/features/Conversation/hooks/useInitConversation.ts

@@ -28,8 +28,6 @@ export const useInitConversation = () => {
   checkPluginsIsInstalled(plugins);
 
   useEffect(() => {
-    useChatStore.persist.rehydrate();
-
     // // when activeId changed, switch topic to undefined
     const unsubscribe = useSessionStore.subscribe(
       (s) => s.activeId,

package/src/features/Conversation/index.tsx

@@ -2,6 +2,7 @@ import { createStyles } from 'antd-style';
 import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import ChatHydration from '@/components/StoreHydration/ChatHydration';
 import { useGlobalStore } from '@/store/global';
 import { settingsSelectors } from '@/store/global/selectors';
 
@@ -50,12 +51,16 @@ const Conversation = memo<ConversationProps>(({ chatInput, mobile }) => {
   const init = useInitConversation();
 
   return (
-    //  relative is required, ChatInput's absolute position needs it
-    <Flexbox flex={1} style={{ position: 'relative' }}>
+    <Flexbox
+      flex={1}
+      //  position: 'relative' is required, ChatInput's absolute position needs it
+      style={{ position: 'relative' }}
+    >
       <div className={styles}>
         {init ? <ChatList mobile={mobile} /> : <SkeletonList mobile={mobile} />}
       </div>
       {chatInput}
+      <ChatHydration />
     </Flexbox>
   );
 });

package/src/features/SideBar/TopActions.tsx

@@ -1,10 +1,10 @@
 import { ActionIcon } from '@lobehub/ui';
-import { Bot, MessageSquare } from 'lucide-react';
+import { Compass, MessageSquare } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { GlobalStore } from '@/store/global';
+import { GlobalStore, useGlobalStore } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 
@@ -15,7 +15,7 @@ export interface TopActionProps {
 
 const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
   const { t } = useTranslation('common');
-  const switchBackToChat = useSessionStore((s) => s.switchBackToChat);
+  const switchBackToChat = useGlobalStore((s) => s.switchBackToChat);
 
   return (
     <>
@@ -23,7 +23,7 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
         href={'/chat'}
         onClick={(e) => {
           e.preventDefault();
-          switchBackToChat();
+          switchBackToChat(useSessionStore.getState().activeId);
           setTab(SidebarTabKey.Chat);
         }}
       >
@@ -38,7 +38,7 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
       <Link href={'/market'}>
         <ActionIcon
           active={tab === SidebarTabKey.Market}
-          icon={Bot}
+          icon={Compass}
           onClick={() => {
             setTab(SidebarTabKey.Market);
           }}

package/src/layout/GlobalLayout/StoreHydration.tsx

@@ -2,32 +2,32 @@ import { useResponsive } from 'antd-style';
 import { useRouter } from 'next/navigation';
 import { memo, useEffect } from 'react';
 
-import { useGlobalStore } from '@/store/global';
-import { useEffectAfterSessionHydrated, useSessionStore } from '@/store/session';
+import { useEffectAfterGlobalHydrated, useGlobalStore } from '@/store/global';
 
 const StoreHydration = memo(() => {
-  const router = useRouter();
-
   const useFetchGlobalConfig = useGlobalStore((s) => s.useFetchGlobalConfig);
+  useFetchGlobalConfig();
 
   useEffect(() => {
     // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
-    useSessionStore.persist.rehydrate();
     useGlobalStore.persist.rehydrate();
   }, []);
 
-  useFetchGlobalConfig();
-
   const { mobile } = useResponsive();
-
-  useEffectAfterSessionHydrated(
+  useEffectAfterGlobalHydrated(
     (store) => {
-      store.setState({ isMobile: mobile });
+      const prevState = store.getState().isMobile;
+
+      if (prevState !== mobile) {
+        store.setState({ isMobile: mobile });
+      }
     },
     [mobile],
   );
 
-  useEffectAfterSessionHydrated(
+  const router = useRouter();
+
+  useEffectAfterGlobalHydrated(
     (store) => {
       store.setState({ router });
     },
@@ -36,6 +36,7 @@ const StoreHydration = memo(() => {
 
   useEffect(() => {
     router.prefetch('/chat');
+    router.prefetch('/chat/settings');
     router.prefetch('/market');
     router.prefetch('/settings/common');
     router.prefetch('/settings/agent');

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

@@ -168,7 +168,7 @@ export const chatMessage: StateCreator<
     // if message is empty and no files, then stop
     if (!message && (!fileIdList || fileIdList?.length === 0)) return;
 
-    let newMessage: CreateMessageParams = {
+    const newMessage: CreateMessageParams = {
       content: message,
       // if message has attached with files, then add files to message and the agent
       files: fileIdList,

package/src/store/chat/store.ts

@@ -1,12 +1,9 @@
-import { PersistOptions, devtools, persist } from 'zustand/middleware';
+import { devtools, subscribeWithSelector } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
-import { createHyperStorage } from '@/store/middleware/createHyperStorage';
 import { isDev } from '@/utils/env';
-import { isInStandaloneMode } from '@/utils/matchMedia';
-import { isMobileScreen } from '@/utils/screen';
 
 import { ChatStoreState, initialState } from './initialState';
 import { ChatEnhanceAction, chatEnhance } from './slices/enchance/action';
@@ -36,42 +33,13 @@ const createStore: StateCreator<ChatStore, [['zustand/devtools', never]]> = (...
   ...chatPlugin(...params),
 });
 
-const persistOptions: PersistOptions<ChatStore> = {
-  name: 'LobeChat_Chat',
-
-  // 手动控制 Hydration ，避免 ssr 报错
-  skipHydration: true,
-
-  storage: createHyperStorage(() => {
-    const isMobileAndPWA = isMobileScreen() && isInStandaloneMode();
-    const selectors = [{ activeTopicId: 'topic' }];
-
-    if (isMobileAndPWA)
-      return {
-        localStorage: {
-          selectors,
-        },
-      };
-
-    return {
-      localStorage: false,
-      url: {
-        mode: 'hash',
-        selectors,
-      },
-    };
-  }),
-  version: 0,
-};
-
 //  ===============  实装 useStore ============ //
 
 export const useChatStore = createWithEqualityFn<ChatStore>()(
-  persist(
+  subscribeWithSelector(
     devtools(createStore, {
       name: 'LobeChat_Chat' + (isDev ? '_DEV' : ''),
     }),
-    persistOptions,
   ),
   shallow,
 );

package/src/store/global/slices/common/action.ts

@@ -3,6 +3,8 @@ import { gt } from 'semver';
 import useSWR, { SWRResponse } from 'swr';
 import type { StateCreator } from 'zustand/vanilla';
 
+import { INBOX_SESSION_ID } from '@/const/session';
+import { SESSION_CHAT_URL } from '@/const/url';
 import { CURRENT_VERSION } from '@/const/version';
 import { globalService } from '@/services/global';
 import type { GlobalStore } from '@/store/global';
@@ -18,6 +20,7 @@ const n = setNamespace('settings');
  * 设置操作
  */
 export interface CommonAction {
+  switchBackToChat: (sessionId?: string) => void;
   /**
    * 切换侧边栏选项
    * @param key - 选中的侧边栏选项
@@ -38,6 +41,9 @@ export const createCommonSlice: StateCreator<
   [],
   CommonAction
 > = (set, get) => ({
+  switchBackToChat: (sessionId) => {
+    get().router?.push(SESSION_CHAT_URL(sessionId || INBOX_SESSION_ID, get().isMobile));
+  },
   switchSideBar: (key) => {
     set({ sidebarKey: key }, false, n('switchSideBar', key));
   },

package/src/store/global/slices/common/initialState.ts

@@ -1,3 +1,5 @@
+import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+
 export enum SidebarTabKey {
   Chat = 'chat',
   Market = 'market',
@@ -33,17 +35,20 @@ export interface GlobalPreference {
 
 export interface GlobalCommonState {
   hasNewVersion?: boolean;
+  isMobile?: boolean;
   latestVersion?: string;
   /**
    *  用户偏好的 UI 状态
    *  @localStorage
    */
   preference: GlobalPreference;
+  router?: AppRouterInstance;
   settingsTab: SettingsTabs;
   sidebarKey: SidebarTabKey;
 }
 
 export const initialCommonState: GlobalCommonState = {
+  isMobile: false,
   preference: {
     guide: {},
     inputHeight: 200,

package/src/store/session/index.ts

@@ -1,3 +1,2 @@
-export * from './hooks';
 export type { SessionStore } from './store';
 export { useSessionStore } from './store';

package/src/store/session/initialState.ts

@@ -10,9 +10,13 @@ export interface SessionState {
    * @description 当前正在编辑或查看的会话
    */
   activeId: string;
-  fetchSessionsLoading: boolean;
   isMobile?: boolean;
   isSearching: boolean;
+  isSessionsFirstFetchFinished: boolean;
+  /**
+   * 后续看看是否可以将 router 部分的逻辑移出去
+   * @deprecated
+   */
   router?: AppRouterInstance;
   searchKeywords: string;
   searchSessions: LobeAgentSession[];
@@ -21,9 +25,9 @@ export interface SessionState {
 
 export const initialState: SessionStoreState = {
   activeId: 'inbox',
-  fetchSessionsLoading: true,
   isMobile: false,
   isSearching: false,
+  isSessionsFirstFetchFinished: false,
   searchKeywords: '',
   searchSessions: [],
   sessions: [],

package/src/store/session/slices/agent/selectors.ts

@@ -78,7 +78,9 @@ const currentAgentMeta = (s: SessionStore): MetaData => {
   const defaultMeta = {
     avatar: isInbox ? DEFAULT_INBOX_AVATAR : DEFAULT_AVATAR,
     backgroundColor: DEFAULT_BACKGROUND_COLOR,
-    description: isInbox ? t('inbox.desc') : currentAgentSystemRole(s) || t('noDescription'),
+    description: isInbox
+      ? t('inbox.desc', { ns: 'chat' })
+      : currentAgentSystemRole(s) || t('noDescription'),
     title: isInbox ? t('inbox.title', { ns: 'chat' }) : t('defaultSession'),
   };
 

package/src/store/session/slices/session/action.ts

@@ -46,10 +46,6 @@ export interface SessionAction {
   duplicateSession: (id: string) => Promise<void>;
   /**
    * Pins or unpins a session.
-   *
-   * @param {string} id - The ID of the session to pin or unpin.
-   * @param {boolean} [pinned] - Optional. If set to true, it pins the session. If set to false or omitted, it unpins the session.
-   * @returns {Promise<void>} A promise that resolves when the session is successfully pinned or unpinned.
    */
   pinSession: (id: string, pinned?: boolean) => Promise<void>;
   /**
@@ -61,7 +57,6 @@ export interface SessionAction {
    * @param id - sessionId
    */
   removeSession: (id: string) => void;
-  switchBackToChat: () => void;
   /**
    * switch session url
    */
@@ -80,7 +75,9 @@ export const createSessionSlice: StateCreator<
   SessionAction
 > = (set, get) => ({
   activeSession: (sessionId) => {
-    set({ activeId: sessionId }, false, n('activeSession'));
+    if (get().activeId === sessionId) return;
+
+    set({ activeId: sessionId }, false, n(`activeSession/${sessionId}`));
   },
 
   clearSessions: async () => {
@@ -147,30 +144,29 @@ export const createSessionSlice: StateCreator<
       get().switchSession();
     }
   },
-
-  switchBackToChat: () => {
-    const { activeId, router } = get();
-
-    const id = activeId || INBOX_SESSION_ID;
-
-    get().activeSession(id);
-
-    router?.push(SESSION_CHAT_URL(id, get().isMobile));
-  },
   switchSession: (sessionId = INBOX_SESSION_ID) => {
     const { isMobile, router } = get();
 
     get().activeSession(sessionId);
 
+    // TODO: 后续可以把 router 移除
     router?.push(SESSION_CHAT_URL(sessionId, isMobile));
   },
 
   useFetchSessions: () =>
     useSWR<LobeSessions>(FETCH_SESSIONS_KEY, sessionService.getSessions, {
       onSuccess: (data) => {
+        // 由于 https://github.com/lobehub/lobe-chat/pull/541 的关系
+        // 只有触发了 refreshSessions 才会更新 sessions，进而触发页面 rerender
+        // 因此这里不能补充判断，否则会导致页面不更新
+        // TODO：后续的根本解法应该是解除 inbox 和 session 的数据耦合
+        // 避免互相依赖的情况出现
+
+        // if (get().isSessionsFirstFetchFinished && isEqual(get().sessions, data)) return;
+
         set(
           {
-            fetchSessionsLoading: false,
+            isSessionsFirstFetchFinished: true,
             sessions: data,
           },
           false,

package/src/store/session/slices/session/selectors/list.ts

@@ -49,6 +49,11 @@ const hasCustomAgents = (s: SessionStore) => defaultSessions(s).length > 0;
 
 const isInboxSession = (s: SessionStore) => s.activeId === INBOX_SESSION_ID;
 
+const isSessionListInit = (s: SessionStore) => s.isSessionsFirstFetchFinished;
+
+// use to judge whether a session is fully activated
+const isSomeSessionActive = (s: SessionStore) => !!s.activeId && isSessionListInit(s);
+
 export const sessionSelectors = {
   currentSession,
   currentSessionSafe,
@@ -57,6 +62,8 @@ export const sessionSelectors = {
   hasCustomAgents,
   hasPinnedSessionList,
   isInboxSession,
+  isSessionListInit,
+  isSomeSessionActive,
   pinnedSessionList,
   searchSessions,
   unpinnedSessionList,

package/src/store/session/store.ts

@@ -1,13 +1,10 @@
-import { PersistOptions, devtools, persist, subscribeWithSelector } from 'zustand/middleware';
+import { devtools, subscribeWithSelector } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
 import { isDev } from '@/utils/env';
-import { isInStandaloneMode } from '@/utils/matchMedia';
-import { isMobileScreen } from '@/utils/screen';
 
-import { createHyperStorage } from '../middleware/createHyperStorage';
 import { SessionStoreState, initialState } from './initialState';
 import { AgentAction, createAgentSlice } from './slices/agent/action';
 import { SessionAction, createSessionSlice } from './slices/session/action';
@@ -21,51 +18,13 @@ const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (
   ...createSessionSlice(...parameters),
 });
 
-//  ===============  persist 本地缓存中间件配置 ============ //
-
-const persistOptions: PersistOptions<SessionStore> = {
-  name: 'LOBE_CHAT',
-
-  // 手动控制 Hydration ，避免 ssr 报错
-  skipHydration: true,
-
-  storage: createHyperStorage(() => {
-    const isMobileAndPWA = isMobileScreen() && isInStandaloneMode();
-
-    const selectors = [
-      // map state key to storage key
-      { activeId: 'session' },
-    ];
-
-    if (isMobileAndPWA)
-      return {
-        localStorage: {
-          selectors,
-        },
-      };
-
-    return {
-      localStorage: false,
-      url: {
-        mode: 'hash',
-        selectors,
-      },
-    };
-  }),
-
-  version: 2,
-};
-
 //  ===============  实装 useStore ============ //
 
 export const useSessionStore = createWithEqualityFn<SessionStore>()(
-  persist(
-    subscribeWithSelector(
-      devtools(createStore, {
-        name: 'LobeChat_Session' + (isDev ? '_DEV' : ''),
-      }),
-    ),
-    persistOptions,
+  subscribeWithSelector(
+    devtools(createStore, {
+      name: 'LobeChat_Session' + (isDev ? '_DEV' : ''),
+    }),
   ),
   shallow,
 );

package/src/app/chat/(mobile)/layout.mobile.tsx

@@ -1,17 +0,0 @@
-'use client';
-
-import { PropsWithChildren, memo } from 'react';
-
-import SessionHeader from '@/app/chat/(mobile)/features/SessionHeader';
-import AppLayoutMobile from '@/layout/AppLayout.mobile';
-import { useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
-
-export default memo(({ children }: PropsWithChildren) => {
-  useSwitchSideBarOnInit(SidebarTabKey.Chat);
-  return (
-    <AppLayoutMobile navBar={<SessionHeader />} showTabBar>
-      {children}
-    </AppLayoutMobile>
-  );
-});

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

@@ -1,30 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import Conversation from '@/features/Conversation';
-import { useSessionStore } from '@/store/session';
-
-import ChatInput from '../features/ChatInput';
-import Layout from './layout.mobile';
-
-const TopicList = dynamic(() => import('../features/TopicList'));
-
-const Chat = memo(() => {
-  // due to mobile side don't have sessionList, so we need to fetch sessions here
-  // refs: https://github.com/lobehub/lobe-chat/pull/541
-  const useFetchSessions = useSessionStore((s) => s.useFetchSessions);
-  useFetchSessions();
-
-  return (
-    <Layout>
-      <Flexbox height={'calc(100% - 44px)'} horizontal>
-        <Conversation chatInput={<ChatInput />} mobile />
-        <TopicList />
-      </Flexbox>
-    </Layout>
-  );
-});
-export default Chat;

package/src/app/chat/(mobile)/mobile/layout.mobile.tsx

@@ -1,11 +0,0 @@
-'use client';
-
-import { PropsWithChildren } from 'react';
-
-import AppLayoutMobile from '@/layout/AppLayout.mobile';
-
-import ChatHeader from '../features/ChatHeader';
-
-export default ({ children }: PropsWithChildren) => (
-  <AppLayoutMobile navBar={<ChatHeader />}>{children}</AppLayoutMobile>
-);

package/src/store/session/hooks/index.ts

@@ -1,4 +0,0 @@
-export * from './useEffectAfterHydrated';
-export * from './useOnFinishHydrationSession';
-export * from './useSessionChatInit';
-export * from './useSessionHydrated';