@lobehub/chat 0.69.0 → 0.70.0

package/.eslintrc.js

@@ -12,5 +12,6 @@ config.rules['unicorn/prefer-code-point'] = 0;
 config.rules['no-extra-boolean-cast'] = 0;
 config.rules['unicorn/no-useless-undefined'] = 0;
 config.rules['react/no-unknown-property'] = 0;
+config.rules['unicorn/prefer-ternary'] = 0;
 
 module.exports = config;

package/.github/workflows/contributor-help.yml

@@ -1,9 +1,7 @@
 name: Contributor Helper
 
 on:
-  # 🌏 Think about the planet! No need to update stats too frequently
   schedule: [{ cron: '0 18 * * *' }]
-  # 💡 The following line lets you run workflow manually from the action tab!
   workflow_dispatch:
 jobs:
   contributor:
@@ -21,8 +19,8 @@ jobs:
       - name: Commit and push if changed
         run: |-
           git diff
-          git config --global user.email "actions@github.com"
-          git config --global user.name "github-actions"
+          git config --global user.name "lobehubbot"
+          git config --global user.email "i@lobehub.com"
           git pull
           git add -A
           git commit -m "🤖 docs: Auto update contributors" || exit 0

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [Version 0.70.0](https://github.com/lobehub/lobe-chat/compare/v0.69.1...v0.70.0)
+
+<sup>Released on **2023-09-08**</sup>
+
+#### ✨ Features
+
+- **misc**: Refactor to url state.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Refactor to url state, closes [#157](https://github.com/lobehub/lobe-chat/issues/157) ([2efac2b](https://github.com/lobehub/lobe-chat/commit/2efac2b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.69.1](https://github.com/lobehub/lobe-chat/compare/v0.69.0...v0.69.1)
+
+<sup>Released on **2023-09-06**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Mirgrate openai-edge to openai.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Mirgrate openai-edge to openai, closes [#145](https://github.com/lobehub/lobe-chat/issues/145) ([75ee574](https://github.com/lobehub/lobe-chat/commit/75ee574))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.69.0](https://github.com/lobehub/lobe-chat/compare/v0.68.1...v0.69.0)
 
 <sup>Released on **2023-09-06**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.69.0",
+  "version": "0.70.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -66,7 +66,7 @@
     "@emoji-mart/data": "^1",
     "@emoji-mart/react": "^1",
     "@icons-pack/react-simple-icons": "^9",
-    "@lobehub/chat-plugin-sdk": "^1.15.1",
+    "@lobehub/chat-plugin-sdk": "^1.17.0",
     "@lobehub/chat-plugins-gateway": "^1.5.0",
     "@lobehub/ui": "latest",
     "@vercel/analytics": "^1",
@@ -85,7 +85,7 @@
     "lucide-react": "latest",
     "nanoid": "^4",
     "next": "13.4.7",
-    "openai-edge": "^1",
+    "openai": "^4.4.0",
     "polished": "^4",
     "react": "^18",
     "react-dom": "^18",

package/src/const/url.ts

@@ -1,4 +1,5 @@
 import pkg from '../../package.json';
+import { INBOX_SESSION_ID } from './session';
 
 export const GITHUB = pkg.homepage;
 export const CHANGELOG = `${pkg.homepage}/blob/master/CHANGELOG.md`;
@@ -8,3 +9,5 @@ export const DISCORD = 'https://discord.gg/AYFPHvv2jT';
 
 export const PLUGINS_INDEX_URL =
   process.env.PLUGINS_INDEX_URL ?? 'https://chat-plugins.lobehub.com';
+
+export const SESSION_CHAT_URL = (id: string = INBOX_SESSION_ID) => `/chat#session=${id}`;

package/src/features/MobileTabBar/index.tsx

@@ -7,6 +7,7 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
 
 const useStyles = createStyles(({ css, token }) => ({
   active: css`
@@ -20,6 +21,7 @@ export default memo<{ className?: string }>(({ className }) => {
   const [tab, setTab] = useGlobalStore((s) => [s.sidebarKey, s.switchSideBar]);
   const { t } = useTranslation('common');
   const { styles } = useStyles();
+  const switchSession = useSessionStore((s) => s.switchSession);
   const items: MobileTabBarProps['items'] = useMemo(
     () => [
       {
@@ -28,7 +30,7 @@ export default memo<{ className?: string }>(({ className }) => {
         ),
         key: 'chat',
         onClick: () => {
-          Router.push('/chat');
+          switchSession();
         },
         title: t('tab.chat'),
       },

package/src/features/SideBar/TopActions.tsx

@@ -5,6 +5,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { GlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
 
 export interface TopActionProps {
   setTab: GlobalStore['switchSideBar'];
@@ -13,7 +14,7 @@ export interface TopActionProps {
 
 const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
   const { t } = useTranslation('common');
-
+  const switchBackToChat = useSessionStore((s) => s.switchBackToChat);
   return (
     <>
       <ActionIcon
@@ -22,7 +23,7 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
         onClick={() => {
           // 如果已经在 chat 路径下了，那么就不用再跳转了
           if (Router.asPath.startsWith('/chat')) return;
-          Router.push('/chat');
+          switchBackToChat();
           setTab('chat');
         }}
         size="large"
@@ -31,7 +32,7 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
       <ActionIcon
         active={tab === 'market'}
         icon={Sticker}
-        onClick={() => setTab('market')}
+        // onClick={() => setTab('market')}
         size="large"
         title={t('tab.market')}
       />

package/src/pages/api/openai.ts

@@ -1,5 +1,5 @@
-import { OpenAIStream, OpenAIStreamCallbacks, StreamingTextResponse } from 'ai';
-import { Configuration, OpenAIApi } from 'openai-edge';
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+import OpenAI, { ClientOptions } from 'openai';
 
 import { getServerConfig } from '@/config/server';
 import { createErrorResponse } from '@/pages/api/error';
@@ -10,25 +10,29 @@ import { OpenAIStreamPayload } from '@/types/openai';
 export const createOpenAI = (userApiKey: string | null, endpoint?: string | null) => {
   const { OPENAI_API_KEY, OPENAI_PROXY_URL } = getServerConfig();
 
-  const config = new Configuration({
+  const baseURL = endpoint ? endpoint : OPENAI_PROXY_URL ? OPENAI_PROXY_URL : undefined;
+
+  const config: ClientOptions = {
     apiKey: !userApiKey ? OPENAI_API_KEY : userApiKey,
-  });
+  };
 
-  const basePath = endpoint ? endpoint : OPENAI_PROXY_URL ? OPENAI_PROXY_URL : undefined;
+  // a bug with openai: https://github.com/openai/openai-node/issues/283
+  // TODO: should refactor when openai fix the bug
+  if (baseURL) {
+    config.baseURL = baseURL;
+  }
 
-  return new OpenAIApi(config, basePath);
+  return new OpenAI(config);
 };
 
 interface CreateChatCompletionOptions {
   OPENAI_API_KEY: string | null;
-  callbacks?: (payload: OpenAIStreamPayload) => OpenAIStreamCallbacks;
   endpoint?: string | null;
   payload: OpenAIStreamPayload;
 }
 
 export const createChatCompletion = async ({
   payload,
-  callbacks,
   OPENAI_API_KEY,
   endpoint,
 }: CreateChatCompletionOptions) => {
@@ -47,37 +51,30 @@ export const createChatCompletion = async ({
 
   // ============  2. 发送请求   ============ //
 
-  const requestParams = { messages: formatMessages, stream: true, ...params };
-
-  let response: Response;
-
   try {
-    response = await openai.createChatCompletion(requestParams);
+    const response = await openai.chat.completions.create({
+      messages: formatMessages,
+      ...params,
+      stream: true,
+    });
+    const stream = OpenAIStream(response);
+    return new StreamingTextResponse(stream);
   } catch (error) {
-    // 如果 await 超时报错，说明是 OpenAI 服务端的问题
-    return createErrorResponse(ChatErrorType.GatewayTimeout, { message: error });
-  }
-
-  // ============  4. 处理异常响应   ============ //
-  if (!response.ok) {
-    let error;
-
-    try {
-      // 正常情况下应该是 OpenAI 的 JSON
-      error = await response.clone().json();
-    } catch {
-      // 如果不是 JSON，那么可能是其他接口端的响应，读 text 为结果
-      const result = await response.text();
-
-      error = { message: result };
+    // Check if the error is an OpenAI APIError
+    if (error instanceof OpenAI.APIError) {
+      return createErrorResponse(ChatErrorType.OpenAIBizError, {
+        endpoint: !!endpoint ? endpoint : undefined,
+        error: error.error ?? error.cause,
+      });
     }
 
-    return createErrorResponse(ChatErrorType.OpenAIBizError, { ...error, endpoint });
-  }
-
-  // ============  5. 发送正常相应   ============ //
-
-  const stream = OpenAIStream(response, callbacks?.(requestParams));
+    // track the error that not an OpenAI APIError
+    console.error(error);
 
-  return new StreamingTextResponse(stream);
+    // return as a GatewayTimeout error
+    return createErrorResponse(ChatErrorType.InternalServerError, {
+      endpoint,
+      error: JSON.stringify(error),
+    });
+  }
 };

package/src/pages/chat/features/Conversation/ChatList/Plugins/IFrameRender/index.tsx

@@ -1,4 +1,4 @@
-import { PluginRenderProps } from '@lobehub/chat-plugin-sdk';
+import { PluginRenderProps } from '@lobehub/chat-plugin-sdk/client';
 import { Skeleton } from 'antd';
 import { memo, useEffect, useRef, useState } from 'react';
 

package/src/pages/chat/features/Conversation/ChatList/Plugins/IFrameRender/utils.ts

@@ -1,4 +1,4 @@
-import { PluginChannel } from '@lobehub/chat-plugin-sdk';
+import { PluginChannel } from '@lobehub/chat-plugin-sdk/client';
 
 export const onPluginReady = (e: MessageEvent, onReady: () => void) => {
   if (e.data.type === PluginChannel.pluginReadyForRender) {

package/src/pages/chat/features/Conversation/ChatList/Plugins/SystemJsRender/index.tsx

@@ -1,4 +1,4 @@
-import { PluginRender, PluginRenderProps } from '@lobehub/chat-plugin-sdk';
+import { PluginRender, PluginRenderProps } from '@lobehub/chat-plugin-sdk/client';
 import { Skeleton } from 'antd';
 import { memo, useEffect, useState } from 'react';
 

package/src/pages/chat/features/Header/Mobile.tsx

@@ -4,21 +4,19 @@ import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { INBOX_SESSION_ID } from '@/const/session';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/selectors';
+import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
-const MobileHeader = memo<{ settings?: boolean }>(({ settings = true }) => {
+const MobileHeader = memo(() => {
   const { t } = useTranslation('common');
 
-  const [id, title, model] = useSessionStore((s) => [
-    s.activeId,
+  const [isInbox, title, model] = useSessionStore((s) => [
+    sessionSelectors.isInboxSession(s),
     agentSelectors.currentAgentTitle(s),
     agentSelectors.currentAgentModel(s),
   ]);
 
-  const isInbox = id === INBOX_SESSION_ID;
   const [toggleConfig] = useGlobalStore((s) => [s.toggleMobileTopic]);
 
   const displayTitle = isInbox ? t('inbox.title') : title;
@@ -30,11 +28,11 @@ const MobileHeader = memo<{ settings?: boolean }>(({ settings = true }) => {
       right={
         <>
           <ActionIcon icon={LayoutList} onClick={() => toggleConfig()} />
-          {settings && (
+          {!isInbox && (
             <ActionIcon
               icon={Settings}
               onClick={() => {
-                Router.push(`/chat/${id}/setting`);
+                Router.push({ hash: location.hash, pathname: `/chat/setting` });
               }}
             />
           )}

package/src/pages/chat/features/Header/PC.tsx

@@ -7,31 +7,30 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { INBOX_SESSION_ID } from '@/const/session';
 import { useGlobalStore } from '@/store/global';
 import { useSessionChatInit, useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/selectors';
+import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
 import PluginTag from './PluginTag';
 import ShareButton from './ShareButton';
 
-const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
+const Header = memo(() => {
   const init = useSessionChatInit();
 
   const { t } = useTranslation('common');
 
-  const [id, title, description, avatar, backgroundColor, model, plugins] = useSessionStore((s) => [
-    s.activeId,
-
-    agentSelectors.currentAgentTitle(s),
-    agentSelectors.currentAgentDescription(s),
-    agentSelectors.currentAgentAvatar(s),
-    agentSelectors.currentAgentBackgroundColor(s),
-    agentSelectors.currentAgentModel(s),
-    agentSelectors.currentAgentPlugins(s),
-  ]);
+  const [isInbox, title, description, avatar, backgroundColor, model, plugins] = useSessionStore(
+    (s) => [
+      sessionSelectors.isInboxSession(s),
+      agentSelectors.currentAgentTitle(s),
+      agentSelectors.currentAgentDescription(s),
+      agentSelectors.currentAgentAvatar(s),
+      agentSelectors.currentAgentBackgroundColor(s),
+      agentSelectors.currentAgentModel(s),
+      agentSelectors.currentAgentPlugins(s),
+    ],
+  );
 
-  const isInbox = id === INBOX_SESSION_ID;
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
     s.toggleChatSideBar,
@@ -77,11 +76,11 @@ const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
             size={{ fontSize: 24 }}
             title={t('roleAndArchive')}
           />
-          {settings && (
+          {!isInbox && (
             <ActionIcon
               icon={Settings}
               onClick={() => {
-                Router.push(`/chat/${id}/setting`);
+                Router.push({ hash: location.hash, pathname: `/chat/setting` });
               }}
               size={{ fontSize: 24 }}
               title={t('header.session', { ns: 'setting' })}

package/src/pages/chat/features/Header/index.tsx

@@ -4,12 +4,12 @@ import { memo } from 'react';
 import Mobile from './Mobile';
 import PC from './PC';
 
-const Header = memo<{ settings?: boolean }>((props) => {
+const Header = memo(() => {
   const { mobile } = useResponsive();
 
-  if (mobile) return <Mobile {...props} />;
+  if (mobile) return <Mobile />;
 
-  return <PC {...props} />;
+  return <PC />;
 });
 
 export default Header;

package/src/pages/chat/{SessionList → features/SessionList}/Inbox.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
 import { INBOX_SESSION_ID } from '@/const/session';
+import { SESSION_CHAT_URL } from '@/const/url';
 import { useSessionStore } from '@/store/session';
 
 const { Item } = List;
@@ -14,7 +15,7 @@ const Inbox = memo(() => {
   const ref = useRef(null);
   const isHovering = useHover(ref);
   const { t } = useTranslation('common');
-  const [activeId] = useSessionStore((s) => [s.activeId]);
+  const [activeId, switchSession] = useSessionStore((s) => [s.activeId, s.switchSession]);
 
   const avatarRender = useMemo(
     () => (
@@ -29,7 +30,13 @@ const Inbox = memo(() => {
   );
 
   return (
-    <Link href={'/chat'}>
+    <Link
+      href={SESSION_CHAT_URL()}
+      onClick={(e) => {
+        e.preventDefault();
+        switchSession(INBOX_SESSION_ID);
+      }}
+    >
       <Item
         active={activeId === INBOX_SESSION_ID}
         avatar={avatarRender}

package/src/pages/chat/{SessionList → features/SessionList}/List/index.tsx

@@ -2,6 +2,7 @@ import isEqual from 'fast-deep-equal';
 import Link from 'next/link';
 import { memo } from 'react';
 
+import { SESSION_CHAT_URL } from '@/const/url';
 import { useSessionHydrated, useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
@@ -11,6 +12,7 @@ import SkeletonList from './SkeletonList';
 
 const SessionList = memo(() => {
   const list = useSessionStore(sessionSelectors.sessionList, isEqual);
+  const activeSession = useSessionStore((s) => s.activeSession);
 
   const isInit = useSessionHydrated();
 
@@ -18,7 +20,14 @@ const SessionList = memo(() => {
     <SkeletonList />
   ) : list.length > 0 ? (
     list.map(({ id }) => (
-      <Link href={`/chat/${id}`} key={id}>
+      <Link
+        href={SESSION_CHAT_URL(id)}
+        key={id}
+        onClick={(e) => {
+          e.preventDefault();
+          activeSession(id);
+        }}
+      >
         <SessionItem id={id} />
       </Link>
     ))

package/src/pages/chat/features/Sidebar/index.tsx

@@ -8,6 +8,8 @@ import { Flexbox } from 'react-layout-kit';
 import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/slices/session/selectors';
 
 import Mobile from './Mobile';
 import SystemRole from './SystemRole';
@@ -37,13 +39,15 @@ interface SideBarProps {
   mobile?: boolean;
   systemRole?: boolean;
 }
-const SideBar = memo<SideBarProps>(({ systemRole = true, mobile }) => {
+const SideBar = memo<SideBarProps>(({ mobile }) => {
   const { styles } = useStyles(mobile);
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
     s.toggleChatSideBar,
   ]);
 
+  const isInbox = useSessionStore(sessionSelectors.isInboxSession);
+
   const { t } = useTranslation('common');
 
   const topic = (
@@ -79,7 +83,7 @@ const SideBar = memo<SideBarProps>(({ systemRole = true, mobile }) => {
         style={{ flex: 'none', height: '100%', minWidth: CHAT_SIDEBAR_WIDTH }}
       >
         <SafeSpacing />
-        {systemRole && <SystemRole mobile={mobile} />}
+        {!isInbox && <SystemRole mobile={mobile} />}
 
         {topic}
       </DraggablePanelContainer>

package/src/pages/chat/index.page.tsx

@@ -1,11 +1,10 @@
 import { useResponsive } from 'antd-style';
 import Head from 'next/head';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { INBOX_SESSION_ID } from '@/const/session';
-import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Conversation from './features/Conversation';
@@ -15,13 +14,12 @@ import Layout from './layout';
 import Mobile from './mobile';
 
 const Chat = memo(() => {
-  const { t } = useTranslation('common');
   const { mobile } = useResponsive();
-  const pageTitle = genSiteHeadTitle(t('inbox.title'));
-
-  useOnFinishHydrationSession(() => {
-    useSessionStore.getState().activeSession(INBOX_SESSION_ID);
-  });
+  const [avatar, title] = useSessionStore((s) => [
+    agentSelectors.currentAgentAvatar(s),
+    agentSelectors.currentAgentTitle(s),
+  ]);
+  const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
 
   return (
     <>
@@ -32,10 +30,10 @@ const Chat = memo(() => {
         <Mobile />
       ) : (
         <Layout>
-          <Header settings={false} />
+          <Header />
           <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
             <Conversation />
-            <SideBar systemRole={false} />
+            <SideBar />
           </Flexbox>
         </Layout>
       )}

package/src/pages/chat/layout.tsx

@@ -4,13 +4,18 @@ import { Flexbox } from 'react-layout-kit';
 
 import AppLayout from '@/layout/AppLayout';
 import { useSwitchSideBarOnInit } from '@/store/global';
+import { usePluginStore } from '@/store/plugin';
 
-import { Sessions } from './SessionList';
+import { Sessions } from './features/SessionList';
 
 const ChatLayout = memo<PropsWithChildren>(({ children }) => {
   const { mobile } = useResponsive();
+
   useSwitchSideBarOnInit('chat');
 
+  const useFetchPluginList = usePluginStore((s) => s.useFetchPluginList);
+  useFetchPluginList();
+
   return (
     <AppLayout>
       <Sessions />

package/src/pages/chat/{[id] → mobile}/index.page.tsx

@@ -1,20 +1,18 @@
-import { useResponsive } from 'antd-style';
 import Head from 'next/head';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import AppMobileLayout from '@/layout/AppMobileLayout';
+import Header from '@/pages/chat/features/Header';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Conversation from '../features/Conversation';
-import Header from '../features/Header';
 import SideBar from '../features/Sidebar';
-import Layout from './layout';
-import Mobile from './mobile';
+import ChatLayout from '../layout';
 
 const Chat = memo(() => {
-  const { mobile } = useResponsive();
   const [avatar, title] = useSessionStore((s) => [
     agentSelectors.currentAgentAvatar(s),
     agentSelectors.currentAgentTitle(s),
@@ -27,22 +25,14 @@ const Chat = memo(() => {
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      {mobile ? (
-        <Mobile>
+      <AppMobileLayout navBar={<Header />}>
+        <ChatLayout>
           <Flexbox height={'calc(100vh - 44px)'} horizontal>
             <Conversation mobile />
             <SideBar mobile />
           </Flexbox>
-        </Mobile>
-      ) : (
-        <Layout>
-          <Header />
-          <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
-            <Conversation />
-            <SideBar />
-          </Flexbox>
-        </Layout>
-      )}
+        </ChatLayout>
+      </AppMobileLayout>
     </>
   );
 });

package/src/pages/chat/mobile.tsx

@@ -2,10 +2,10 @@ import { useTheme } from 'antd-style';
 import { memo } from 'react';
 
 import AppMobileLayout from '@/layout/AppMobileLayout';
-import Header from '@/pages/chat/SessionList/Header';
 import { useSwitchSideBarOnInit } from '@/store/global';
 
-import { Sessions } from './SessionList';
+import { Sessions } from './features/SessionList';
+import Header from './features/SessionList/Header';
 
 const ChatMobileLayout = memo(() => {
   useSwitchSideBarOnInit('chat');