@lobehub/chat 0.120.3 → 0.120.5

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

@@ -1,17 +1,30 @@
 'use client';
 
-import { memo } from 'react';
+import { useRouter } from 'next/navigation';
+import { memo, useEffect } from 'react';
+
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
+import { useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/slices/common/initialState';
 
 import PageTitle from '../features/PageTitle';
+import SessionHeader from './features/SessionHeader';
 import SessionList from './features/SessionList';
-import Layout from './layout.mobile';
 
 const ChatMobilePage = memo(() => {
+  useSwitchSideBarOnInit(SidebarTabKey.Chat);
+
+  const router = useRouter();
+  useEffect(() => {
+    router.prefetch('/chat/mobile');
+    router.prefetch('/settings');
+  }, []);
+
   return (
-    <Layout>
+    <AppLayoutMobile navBar={<SessionHeader />} showTabBar>
       <PageTitle />
       <SessionList />
-    </Layout>
+    </AppLayoutMobile>
   );
 });
 

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

@@ -1,3 +1,31 @@
-import Index from './index';
+'use client';
 
-export default () => <Index />;
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import ChatHeader from '@/app/chat/(mobile)/features/ChatHeader';
+import Conversation from '@/features/Conversation';
+import AppLayoutMobile from '@/layout/AppLayout.mobile';
+import { useSessionStore } from '@/store/session';
+
+import ChatInput from '../features/ChatInput';
+
+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 (
+    <AppLayoutMobile navBar={<ChatHeader />}>
+      <Flexbox height={'calc(100% - 44px)'} horizontal>
+        <Conversation chatInput={<ChatInput />} mobile />
+        <TopicList />
+      </Flexbox>
+    </AppLayoutMobile>
+  );
+});
+export default Chat;

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

@@ -0,0 +1,44 @@
+'use client';
+
+import { useResponsive } from 'antd-style';
+import { useRouter } from 'next/navigation';
+import { useQueryState } from 'nuqs';
+import { parseAsString } from 'nuqs/parsers';
+import { memo, useEffect } from 'react';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { useSessionStore } from '@/store/session';
+
+// sync outside state to useSessionStore
+const SessionHydration = memo(() => {
+  const useStoreUpdater = createStoreUpdater(useSessionStore);
+
+  const { mobile } = useResponsive();
+  useStoreUpdater('isMobile', mobile);
+
+  const router = useRouter();
+  // TODO: 后续可以把 router 从 useSessionStore 移除
+  useStoreUpdater('router', router);
+
+  // two-way bindings the url and session store
+  const [session, setSession] = useQueryState(
+    'session',
+    parseAsString.withDefault('inbox').withOptions({ history: 'replace', throttleMs: 500 }),
+  );
+  useStoreUpdater('activeId', session);
+
+  useEffect(() => {
+    const unsubscribe = useSessionStore.subscribe(
+      (s) => s.activeId,
+      (state) => setSession(state),
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  return null;
+});
+
+export default SessionHydration;

package/src/app/chat/features/ChatHeader/ShareButton/style.ts

@@ -38,7 +38,7 @@ export const useStyles = createStyles(({ css, token, stylish, cx }, withBackgrou
       overflow: hidden scroll;
 
       width: 100%;
-      max-height: 40vh;
+      max-height: 40dvh;
 
       background: ${token.colorBgLayout};
       border: 1px solid ${token.colorBorder};

package/src/app/chat/features/SessionListContent/DefaultMode.tsx

@@ -16,13 +16,18 @@ const SessionListContent = memo(() => {
   const { t } = useTranslation('chat');
   const unpinnedSessionList = useSessionStore(sessionSelectors.unpinnedSessionList, isEqual);
   const pinnedList = useSessionStore(sessionSelectors.pinnedSessionList, isEqual);
-  const hasPinnedSessionList = useSessionStore(sessionSelectors.hasPinnedSessionList);
+  const [hasPinnedSessionList, useFetchSessions] = useSessionStore((s) => [
+    sessionSelectors.hasPinnedSessionList(s),
+    s.useFetchSessions,
+  ]);
 
   const [sessionGroupKeys, updatePreference] = useGlobalStore((s) => [
     preferenceSelectors.sessionGroupKeys(s),
     s.updatePreference,
   ]);
 
+  useFetchSessions();
+
   const items = [
     hasPinnedSessionList && {
       children: <SessionList dataSource={pinnedList} />,

package/src/app/chat/features/SessionListContent/List/index.tsx

@@ -4,7 +4,8 @@ import { memo } from 'react';
 import LazyLoad from 'react-lazy-load';
 
 import { SESSION_CHAT_URL } from '@/const/url';
-import { useSessionHydrated, useSessionStore } from '@/store/session';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
 import { LobeAgentSession } from '@/types/session';
 
 import AddButton from './AddButton';
@@ -21,9 +22,12 @@ interface SessionListProps {
   dataSource: LobeAgentSession[];
 }
 const SessionList = memo<SessionListProps>(({ dataSource }) => {
-  const [activeSession, switchSession] = useSessionStore((s) => [s.activeSession, s.switchSession]);
+  const [activeSession, switchSession, isInit] = useSessionStore((s) => [
+    s.activeSession,
+    s.switchSession,
+    sessionSelectors.isSessionListInit(s),
+  ]);
   const { styles } = useStyles();
-  const isInit = useSessionHydrated();
 
   const { mobile } = useResponsive();
 

package/src/app/chat/features/TopicListContent/Header.tsx

@@ -8,7 +8,7 @@ import { Flexbox } from 'react-layout-kit';
 import { useChatStore } from '@/store/chat';
 import { topicSelectors } from '@/store/chat/selectors';
 
-import SidebarHeader from '../SidebarHeader';
+import SidebarHeader from '../../components/SidebarHeader';
 import TopicSearchBar from './TopicSearchBar';
 
 const Header = memo(() => {

package/src/app/chat/page.tsx

@@ -2,6 +2,7 @@ import { isMobileDevice } from '@/utils/responsive';
 
 import DesktopPage from './(desktop)';
 import MobilePage from './(mobile)';
+import SessionHydration from './components/SessionHydration';
 import Migration from './features/Migration';
 
 const Page = () => {
@@ -10,9 +11,12 @@ const Page = () => {
   const Page = mobile ? MobilePage : DesktopPage;
 
   return (
-    <Migration>
-      <Page />
-    </Migration>
+    <>
+      <Migration>
+        <Page />
+      </Migration>
+      <SessionHydration />
+    </>
   );
 };
 

package/src/app/home/Redirect.tsx

@@ -24,11 +24,11 @@ const Redirect = memo(() => {
       useGlobalStore.getState().switchSideBar(SidebarTabKey.Chat);
 
       if (hasData) {
-        router.push('/chat');
+        router.replace('/chat');
 
         switchSession();
       } else {
-        router.push('/welcome');
+        router.replace('/welcome');
       }
     });
   }, []);

package/src/app/metadata.ts

@@ -1,9 +1,14 @@
 import { Metadata } from 'next';
 
+import { getServerConfig } from '@/config/server';
+
 import pkg from '../../package.json';
 
 const title = 'LobeChat';
 const { description, homepage } = pkg;
+
+const { METADATA_BASE_URL = 'https://chat-preview.lobehub.com/' } = getServerConfig();
+
 const metadata: Metadata = {
   appleWebApp: {
     statusBarStyle: 'black-translucent',
@@ -18,6 +23,7 @@ const metadata: Metadata = {
       'https://registry.npmmirror.com/@lobehub/assets-favicons/latest/files/assets/favicon.ico',
   },
   manifest: '/manifest.json',
+  metadataBase: new URL(METADATA_BASE_URL),
   openGraph: {
     description: description,
     images: [

package/src/app/welcome/features/Banner/index.tsx

@@ -3,11 +3,13 @@
 import { Icon } from '@lobehub/ui';
 import { Button } from 'antd';
 import { SendHorizonal } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import DataImporter from '@/features/DataImporter';
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 
 import Hero from './Hero';
@@ -15,13 +17,10 @@ import { useStyles } from './style';
 
 const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
   const { t } = useTranslation('welcome');
+  const router = useRouter();
   const { styles } = useStyles();
-  const [switchSession, switchBackToChat, router, isMobile] = useSessionStore((s) => [
-    s.switchSession,
-    s.switchBackToChat,
-    s.router,
-    s.isMobile,
-  ]);
+  const [switchSession] = useSessionStore((s) => [s.switchSession]);
+  const [switchBackToChat, isMobile] = useGlobalStore((s) => [s.switchBackToChat, s.isMobile]);
 
   return (
     <>
@@ -46,7 +45,7 @@ const Banner = memo<{ mobile?: boolean }>(({ mobile }) => {
         </DataImporter>
         <Button
           block={mobile}
-          onClick={() => (isMobile ? router?.push('/chat') : switchBackToChat())}
+          onClick={() => (isMobile ? router.push('/chat') : switchBackToChat())}
           size={'large'}
           type={'primary'}
         >

package/src/components/StoreHydration/ChatHydration/index.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useQueryState } from 'nuqs';
+import { memo, useEffect } from 'react';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { useChatStore } from '@/store/chat';
+
+// sync outside state to useChatStore
+const ChatHydration = memo(() => {
+  const useStoreUpdater = createStoreUpdater(useChatStore);
+
+  // two-way bindings the topic params to chat store
+  const [topic, setTopic] = useQueryState('topic', { history: 'replace', throttleMs: 500 });
+  useStoreUpdater('activeTopicId', topic);
+
+  useEffect(() => {
+    const unsubscribe = useChatStore.subscribe(
+      (s) => s.activeTopicId,
+      (state) => {
+        setTopic(!state ? null : state);
+      },
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  return null;
+});
+
+export default ChatHydration;

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/locales/default/common.ts

@@ -13,6 +13,7 @@ export default {
   close: '关闭',
   confirmRemoveSessionItemAlert: '即将删除该助手，删除后该将无法找回，请确认你的操作',
   copy: '复制',
+  copyFail: '复制失败',
   copySuccess: '复制成功',
   defaultAgent: '自定义助手',
   defaultSession: '自定义助手',

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