@lobehub/chat 0.70.0 → 0.70.2

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.70.2](https://github.com/lobehub/lobe-chat/compare/v0.70.1...v0.70.2)
+
+<sup>Released on **2023-09-08**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: 修正移动端路由问题.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: 修正移动端路由问题 ([ae3d2f4](https://github.com/lobehub/lobe-chat/commit/ae3d2f4))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.70.1](https://github.com/lobehub/lobe-chat/compare/v0.70.0...v0.70.1)
+
+<sup>Released on **2023-09-08**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor settingsSelectors to globalSelectors.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor settingsSelectors to globalSelectors ([38917e8](https://github.com/lobehub/lobe-chat/commit/38917e8))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.70.0](https://github.com/lobehub/lobe-chat/compare/v0.69.1...v0.70.0)
 
 <sup>Released on **2023-09-08**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.70.0",
+  "version": "0.70.2",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/const/url.ts

@@ -10,4 +10,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}`;
+export const SESSION_CHAT_URL = (id: string = INBOX_SESSION_ID, mobile?: boolean) =>
+  mobile ? `/chat/mobile#session=${id}` : `/chat#session=${id}`;

package/src/helpers/export.ts

@@ -1,4 +1,4 @@
-import { settingsSelectors, useGlobalStore } from '@/store/global';
+import { globalSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { createConfigFile, exportConfigFile } from '@/utils/config';
@@ -6,7 +6,7 @@ import { createConfigFile, exportConfigFile } from '@/utils/config';
 const getSessions = () => sessionSelectors.exportSessions(useSessionStore.getState());
 const getSession = (id: string) => sessionSelectors.getSessionById(id)(useSessionStore.getState());
 
-const getSettings = () => settingsSelectors.exportSettings(useGlobalStore.getState());
+const getSettings = () => globalSelectors.exportSettings(useGlobalStore.getState());
 
 // =============   导出所有角色   ============= //
 

package/src/layout/AppMobileLayout.tsx

@@ -6,6 +6,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import MobileTabBar from '@/features/MobileTabBar';
+import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
 
 const useStyles = createStyles(({ css }) => ({
   container: css`
@@ -45,6 +46,10 @@ const AppMobileLayout = memo<AppMobileLayoutProps>(
   ({ children, showTabBar, navBar, style, className }) => {
     const { styles, cx } = useStyles();
 
+    useOnFinishHydrationSession(() => {
+      useSessionStore.setState({ isMobile: true });
+    }, []);
+
     return (
       <>
         <Head>

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

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
+import { usePluginStore } from '@/store/plugin';
 
 import ChatList from './ChatList';
 import ChatInput from './Input';
@@ -12,6 +13,10 @@ import ChatScrollAnchor from './ScrollAnchor';
 const Conversation = memo<{ mobile?: boolean }>(({ mobile }) => {
   const ref = useRef(null);
   const { t } = useTranslation('common');
+
+  const useFetchPluginList = usePluginStore((s) => s.useFetchPluginList);
+  useFetchPluginList();
+
   return (
     <Flexbox flex={1} style={{ position: 'relative' }}>
       <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>

package/src/pages/chat/features/SessionList/Inbox.tsx

@@ -15,7 +15,12 @@ const Inbox = memo(() => {
   const ref = useRef(null);
   const isHovering = useHover(ref);
   const { t } = useTranslation('common');
-  const [activeId, switchSession] = useSessionStore((s) => [s.activeId, s.switchSession]);
+
+  const [mobile, activeId, switchSession] = useSessionStore((s) => [
+    s.isMobile,
+    s.activeId,
+    s.switchSession,
+  ]);
 
   const avatarRender = useMemo(
     () => (
@@ -31,7 +36,7 @@ const Inbox = memo(() => {
 
   return (
     <Link
-      href={SESSION_CHAT_URL()}
+      href={SESSION_CHAT_URL(INBOX_SESSION_ID, mobile)}
       onClick={(e) => {
         e.preventDefault();
         switchSession(INBOX_SESSION_ID);

package/src/pages/chat/features/SessionList/List/Item/index.tsx

@@ -6,7 +6,7 @@ import { memo, useMemo, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { settingsSelectors, useGlobalStore } from '@/store/global';
+import { globalSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 
@@ -36,7 +36,7 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   const isHovering = useHover(ref);
 
   const { styles } = useStyles();
-  const [defaultModel] = useGlobalStore((s) => [settingsSelectors.currentAgentConfig(s).model]);
+  const [defaultModel] = useGlobalStore((s) => [globalSelectors.defaultAgentConfig(s).model]);
 
   const [
     active,

package/src/pages/chat/features/SessionList/List/index.tsx

@@ -1,3 +1,4 @@
+import { useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import Link from 'next/link';
 import { memo } from 'react';
@@ -12,20 +13,24 @@ import SkeletonList from './SkeletonList';
 
 const SessionList = memo(() => {
   const list = useSessionStore(sessionSelectors.sessionList, isEqual);
-  const activeSession = useSessionStore((s) => s.activeSession);
+  const [activeSession, switchSession] = useSessionStore((s) => [s.activeSession, s.switchSession]);
 
   const isInit = useSessionHydrated();
 
+  const { mobile } = useResponsive();
+
   return !isInit ? (
     <SkeletonList />
   ) : list.length > 0 ? (
     list.map(({ id }) => (
       <Link
-        href={SESSION_CHAT_URL(id)}
+        href={SESSION_CHAT_URL(id, mobile)}
         key={id}
         onClick={(e) => {
           e.preventDefault();
-          activeSession(id);
+
+          if (mobile) switchSession(id);
+          else activeSession(id);
         }}
       >
         <SessionItem id={id} />

package/src/pages/chat/layout.tsx

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

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

@@ -10,7 +10,6 @@ import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Conversation from '../features/Conversation';
 import SideBar from '../features/Sidebar';
-import ChatLayout from '../layout';
 
 const Chat = memo(() => {
   const [avatar, title] = useSessionStore((s) => [
@@ -26,12 +25,10 @@ const Chat = memo(() => {
         <title>{pageTitle}</title>
       </Head>
       <AppMobileLayout navBar={<Header />}>
-        <ChatLayout>
-          <Flexbox height={'calc(100vh - 44px)'} horizontal>
-            <Conversation mobile />
-            <SideBar mobile />
-          </Flexbox>
-        </ChatLayout>
+        <Flexbox height={'calc(100vh - 44px)'} horizontal>
+          <Conversation mobile />
+          <SideBar mobile />
+        </Flexbox>
       </AppMobileLayout>
     </>
   );

package/src/pages/settings/Settings/Agent.tsx

@@ -2,11 +2,11 @@ import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 
 import AgentSetting from '@/features/AgentSetting';
-import { settingsSelectors, useGlobalStore } from '@/store/global';
+import { globalSelectors, useGlobalStore } from '@/store/global';
 
 const Agent = memo(() => {
-  const config = useGlobalStore(settingsSelectors.currentAgentConfig, isEqual);
-  const meta = useGlobalStore(settingsSelectors.currentAgentMeta, isEqual);
+  const config = useGlobalStore(globalSelectors.defaultAgentConfig, isEqual);
+  const meta = useGlobalStore(globalSelectors.defaultAgentMeta, isEqual);
   const [updateAgent] = useGlobalStore((s) => [s.updateDefaultAgent]);
 
   return (

package/src/pages/settings/Settings/Common.tsx

@@ -12,7 +12,7 @@ import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { options } from '@/locales/options';
-import { settingsSelectors, useGlobalStore } from '@/store/global';
+import { globalSelectors, useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { ConfigKeys } from '@/types/settings';
 
@@ -29,7 +29,7 @@ const Common = memo(() => {
   const [form] = AntForm.useForm();
   const clearSessions = useSessionStore((s) => s.clearSessions);
 
-  const settings = useGlobalStore(settingsSelectors.currentSettings, isEqual);
+  const settings = useGlobalStore(globalSelectors.currentSettings, isEqual);
   const [setThemeMode, setSettings, resetSettings] = useGlobalStore((s) => [
     s.switchThemeMode,
     s.setSettings,

package/src/store/global/selectors.ts

@@ -1,20 +1,18 @@
-import { merge } from 'lodash-es';
-
 import { DEFAULT_AGENT_META } from '@/const/meta';
 import { DEFAULT_AGENT, DEFAULT_AGENT_CONFIG, DEFAULT_SETTINGS } from '@/const/settings';
 import { GlobalSettings } from '@/types/settings';
+import { merge } from '@/utils/merge';
 
 import { GlobalStore } from './store';
 
 const currentSettings = (s: GlobalStore) => merge({}, DEFAULT_SETTINGS, s.settings);
 
-const currentDefaultAgent = (s: GlobalStore) => merge({}, DEFAULT_AGENT, s.settings.defaultAgent);
+const defaultAgent = (s: GlobalStore) => merge({}, DEFAULT_AGENT, s.settings.defaultAgent);
 
-const currentAgentConfig = (s: GlobalStore) =>
-  merge({}, DEFAULT_AGENT_CONFIG, currentDefaultAgent(s).config);
+const defaultAgentConfig = (s: GlobalStore) =>
+  merge({}, DEFAULT_AGENT_CONFIG, defaultAgent(s).config);
 
-const currentAgentMeta = (s: GlobalStore) =>
-  merge({}, DEFAULT_AGENT_META, currentDefaultAgent(s).meta);
+const defaultAgentMeta = (s: GlobalStore) => merge({}, DEFAULT_AGENT_META, defaultAgent(s).meta);
 
 export const exportSettings = (s: GlobalStore) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -23,10 +21,10 @@ export const exportSettings = (s: GlobalStore) => {
   return settings as GlobalSettings;
 };
 
-export const settingsSelectors = {
-  currentAgentConfig,
-  currentAgentMeta,
-  currentDefaultAgent,
+export const globalSelectors = {
   currentSettings,
+  defaultAgent,
+  defaultAgentConfig,
+  defaultAgentMeta,
   exportSettings,
 };

package/src/store/session/slices/chat/selectors/token.ts

@@ -5,25 +5,24 @@ import { agentSelectors } from '@/store/session/slices/agentConfig';
 import type { SessionStore } from '../../../store';
 import { currentChatsWithHistoryConfig } from './chat';
 
+// TODO: We should find a smaller package to do this. gpt-tokenizer has 2M Size
+const count = (text: string) => encode(text).length;
+
 export const systemRoleSel = (s: SessionStore): string => {
   const config = agentSelectors.currentAgentConfig(s);
 
   return config.systemRole;
 };
 
-const systemRoleTokens = (s: SessionStore): number[] => {
+export const systemRoleTokenCount = (s: SessionStore): number => {
   const systemRole = systemRoleSel(s);
 
-  return encode(systemRole || '');
+  return count(systemRole || '');
 };
 
-const chatsTokens = (s: SessionStore): number[] => {
+export const chatsTokenCount = (s: SessionStore): number => {
   const chats = currentChatsWithHistoryConfig(s);
-  return encode(chats.map((m) => m.content).join(''));
+  return count(chats.map((m) => m.content).join(''));
 };
 
-export const chatsTokenCount = (s: SessionStore) => chatsTokens(s).length;
-
-export const systemRoleTokenCount = (s: SessionStore) => systemRoleTokens(s).length;
-
-export const totalTokenCount = (s: SessionStore) => chatsTokens(s).length + systemRoleTokenCount(s);
+export const totalTokenCount = (s: SessionStore) => chatsTokenCount(s) + systemRoleTokenCount(s);

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

@@ -158,13 +158,13 @@ export const createSessionSlice: StateCreator<
 
     get().activeSession(id);
 
-    Router.push(SESSION_CHAT_URL(id));
+    Router.push(SESSION_CHAT_URL(id, get().isMobile));
   },
   switchSession: (sessionId = INBOX_SESSION_ID) => {
     if (get().activeId === sessionId) return;
 
     get().activeSession(sessionId);
 
-    Router.push(SESSION_CHAT_URL(sessionId));
+    Router.push(SESSION_CHAT_URL(sessionId, get().isMobile));
   },
 });

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

@@ -13,6 +13,7 @@ export interface SessionState {
   activeId: string | undefined;
   // 默认会话
   inbox: LobeAgentSession;
+  isMobile?: boolean;
   searchKeywords: string;
   sessions: Record<string, LobeAgentSession>;
 }
@@ -40,6 +41,7 @@ export const initInbox = merge({}, initLobeSession, {
 export const initialSessionState: SessionState = {
   activeId: undefined,
   inbox: initInbox,
+  isMobile: false,
   searchKeywords: '',
   sessions: {},
 };