@lobehub/chat 0.82.7 → 0.82.9

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 # Changelog
 
+### [Version 0.82.9](https://github.com/lobehub/lobe-chat/compare/v0.82.8...v0.82.9)
+
+<sup>Released on **2023-10-05**</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.82.8](https://github.com/lobehub/lobe-chat/compare/v0.82.7...v0.82.8)
+
+<sup>Released on **2023-09-30**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor / route to reduce page js size.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor / route to reduce page js size ([79f0347](https://github.com/lobehub/lobe-chat/commit/79f0347))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.82.7](https://github.com/lobehub/lobe-chat/compare/v0.82.6...v0.82.7)
 
 <sup>Released on **2023-09-30**</sup>

package/next.config.mjs

@@ -1,7 +1,12 @@
+import analyzer from '@next/bundle-analyzer';
 import nextPWA from 'next-pwa';
 
 const isProd = process.env.NODE_ENV === 'production';
 
+const withBundleAnalyzer = analyzer({
+  enabled: process.env.ANALYZE === 'true',
+});
+
 const withPWA = nextPWA({
   dest: 'public',
   register: true,
@@ -29,4 +34,4 @@ const nextConfig = {
   },
 };
 
-export default isProd ? withPWA(nextConfig) : nextConfig;
+export default isProd ? withBundleAnalyzer(withPWA(nextConfig)) : nextConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.82.7",
+  "version": "0.82.9",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",
@@ -24,6 +24,7 @@
   "sideEffects": false,
   "scripts": {
     "build": "next build",
+    "build:analyze": "ANALYZE=true next build",
     "dev": "next dev -p 3010",
     "i18n": "npm run i18n:workflow && lobe-i18n",
     "i18n:workflow": "ts-node --project ./tsconfig.json scripts/i18nWorkflow/index.ts",
@@ -106,6 +107,7 @@
     "swr": "^2",
     "systemjs": "^6",
     "ts-md5": "^1",
+    "ua-parser-js": "^1",
     "url-join": "^5",
     "use-merge-value": "^1",
     "utility-types": "^3",
@@ -117,6 +119,7 @@
     "@commitlint/cli": "^17",
     "@lobehub/i18n-cli": "latest",
     "@lobehub/lint": "latest",
+    "@next/bundle-analyzer": "^13",
     "@next/eslint-plugin-next": "^13",
     "@testing-library/jest-dom": "^6",
     "@testing-library/react": "^14",
@@ -127,6 +130,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/systemjs": "^6",
+    "@types/ua-parser-js": "^0.7",
     "@types/uuid": "^9",
     "@umijs/lint": "^4",
     "@vitest/coverage-v8": "latest",

package/src/app/chat/{features/Header → (desktop)/features/ChatHeader}/Desktop.tsx

@@ -12,8 +12,8 @@ import { useSessionChatInit, useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
-import PluginTag from './PluginTag';
-import ShareButton from './ShareButton';
+import PluginTag from '../../../components/ChatHeader/PluginTag';
+import ShareButton from '../../../components/ChatHeader/ShareButton';
 
 const Header = memo(() => {
   const init = useSessionChatInit();

package/src/app/chat/{features/Header → (desktop)/features/ChatHeader}/index.tsx

@@ -1,8 +1,8 @@
 import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 
+import Mobile from '../../../components/ChatHeader/Mobile';
 import Desktop from './Desktop';
-import Mobile from './Mobile';
 
 const Header = memo(() => {
   const { mobile } = useResponsive();

package/src/app/chat/(desktop)/features/ChatInput/index.tsx

@@ -0,0 +1,22 @@
+import { useResponsive } from 'antd-style';
+import { memo, useState } from 'react';
+
+import { ChatInputContent } from '../../../components/ChatInput';
+import Mobile from '../../../components/ChatInput/Mobile';
+import Desktop from './Desktop';
+
+const ChatInput = () => {
+  const [expand, setExpand] = useState<boolean>(false);
+
+  const { mobile } = useResponsive();
+
+  const Render = mobile ? Mobile : Desktop;
+
+  return (
+    <Render expand={expand}>
+      <ChatInputContent expand={expand} onExpandChange={setExpand} />
+    </Render>
+  );
+};
+
+export default memo(ChatInput);

package/src/app/chat/{features/SessionList/Header → (desktop)/features/SessionHeader}/Desktop.tsx

@@ -7,7 +7,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { useSessionStore } from '@/store/session';
 
-import SessionSearchBar from '../../SessionSearchBar';
+import SessionSearchBar from '../../../features/SessionSearchBar';
 
 export const useStyles = createStyles(({ css, token }) => ({
   logo: css`

package/src/app/chat/{features/SessionList/Header → (desktop)/features/SessionHeader}/index.tsx

@@ -1,8 +1,8 @@
 import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 
+import Mobile from '../../../(mobile)/features/SessionHeader';
 import Desktop from './Desktop';
-import Mobile from './Mobile';
 
 const Header = memo(() => {
   const { mobile } = useResponsive();

package/src/app/chat/{features → (desktop)/features}/SessionList/Desktop.tsx

@@ -4,7 +4,7 @@ import { ReactNode, memo } from 'react';
 
 import FolderPanel from '@/features/FolderPanel';
 
-import Header from './Header';
+import Header from '../SessionHeader';
 
 const useStyles = createStyles(({ stylish }) => stylish.noScrollbar);
 

package/src/app/chat/(desktop)/features/SessionList/index.tsx

@@ -0,0 +1,20 @@
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+
+import { SessionListContent } from '../../../components/SessionList';
+import Mobile from '../../../components/SessionList/Mobile';
+import Desktop from './Desktop';
+
+const ResponsiveSessionList = memo(() => {
+  const { mobile } = useResponsive();
+
+  const Wrapper = mobile ? Mobile : Desktop;
+
+  return (
+    <Wrapper>
+      <SessionListContent />
+    </Wrapper>
+  );
+});
+
+export default ResponsiveSessionList;

package/src/app/chat/{features/Sidebar → (desktop)/features/SideBar}/Desktop.tsx

@@ -6,9 +6,9 @@ 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 { sessionSelectors } from '@/store/session/selectors';
 
-import SystemRole from './SystemRole';
+import SystemRole from '../../../components/Inspector/SystemRole';
 
 const useStyles = createStyles(({ css, token }) => ({
   content: css`
@@ -23,7 +23,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const SideBar = memo<{ children: ReactNode }>(({ children }) => {
+const Desktop = memo<{ children: ReactNode }>(({ children }) => {
   const { styles } = useStyles();
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
@@ -55,4 +55,4 @@ const SideBar = memo<{ children: ReactNode }>(({ children }) => {
   );
 });
 
-export default SideBar;
+export default Desktop;

package/src/app/chat/(desktop)/features/SideBar/index.tsx

@@ -0,0 +1,20 @@
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+
+import { InspectorContent } from '../../../components/Inspector';
+import Mobile from '../../../components/Inspector/Mobile';
+import Desktop from './Desktop';
+
+const SideBar = memo(() => {
+  const { mobile } = useResponsive();
+
+  const Render = mobile ? Mobile : Desktop;
+
+  return (
+    <Render>
+      <InspectorContent />
+    </Render>
+  );
+});
+
+export default SideBar;

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

@@ -0,0 +1,24 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Conversation from '../features/Conversation';
+import PageTitle from '../features/PageTitle';
+import ChatHeader from './features/ChatHeader';
+import ChatInput from './features/ChatInput';
+import SideBar from './features/SideBar';
+
+const DesktopPage = memo(() => {
+  return (
+    <>
+      <PageTitle />
+      <ChatHeader />
+      <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
+        <Conversation chatInput={<ChatInput />} />
+        <SideBar />
+      </Flexbox>
+    </>
+  );
+});
+export default DesktopPage;

package/src/app/chat/{layout.desktop.tsx → (desktop)/layout/Desktop.tsx}

@@ -5,14 +5,14 @@ import AppLayout from '@/layout/AppLayout';
 import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 
-import { Sessions } from './features/SessionList';
+import ResponsiveSessionList from '../features/SessionList';
 
-const ChatLayout = memo<PropsWithChildren>(({ children }) => {
+const Desktop = memo<PropsWithChildren>(({ children }) => {
   useSwitchSideBarOnInit(SidebarTabKey.Chat);
 
   return (
     <AppLayout>
-      <Sessions />
+      <ResponsiveSessionList />
       <Flexbox
         flex={1}
         height={'100vh'}
@@ -25,4 +25,4 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
   );
 });
 
-export default ChatLayout;
+export default Desktop;

package/src/app/chat/(desktop)/layout/index.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useResponsive } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+
+import { useEffectAfterSessionHydrated } from '@/store/session/hooks';
+
+import MobileLayout from '../../(mobile)/layout';
+import DesktopLayout from './Desktop';
+
+const Chat = memo<PropsWithChildren>(({ children }) => {
+  const { mobile } = useResponsive();
+
+  const RenderLayout = mobile ? MobileLayout : DesktopLayout;
+
+  useEffectAfterSessionHydrated(
+    (store) => {
+      store.setState({ isMobile: mobile });
+    },
+    [mobile],
+  );
+
+  return <RenderLayout>{children}</RenderLayout>;
+});
+export default Chat;

package/src/app/chat/(mobile)/features/ChatHeader.tsx

@@ -0,0 +1 @@
+export { default } from '../../components/ChatHeader/Mobile';

package/src/app/chat/(mobile)/features/ChatInput.tsx

@@ -0,0 +1,14 @@
+import { memo } from 'react';
+
+import { ChatInputContent } from '../../components/ChatInput';
+import Mobile from '../../components/ChatInput/Mobile';
+
+const ChatInput = () => {
+  return (
+    <Mobile>
+      <ChatInputContent mobile />
+    </Mobile>
+  );
+};
+
+export default memo(ChatInput);

package/src/app/chat/(mobile)/features/SessionList.tsx

@@ -0,0 +1,12 @@
+import { memo } from 'react';
+
+import { SessionListContent } from '../../components/SessionList';
+import Wrapper from '../../components/SessionList/Mobile';
+
+const SessionList = memo(() => (
+  <Wrapper>
+    <SessionListContent />
+  </Wrapper>
+));
+
+export default SessionList;

package/src/app/chat/(mobile)/features/Topics.tsx

@@ -0,0 +1,12 @@
+import { memo } from 'react';
+
+import { InspectorContent } from '../../components/Inspector';
+import Mobile from '../../components/Inspector/Mobile';
+
+const Topics = memo(() => (
+  <Mobile>
+    <InspectorContent />
+  </Mobile>
+));
+
+export default Topics;

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

@@ -0,0 +1,20 @@
+'use client';
+
+import { memo } from 'react';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+
+import PageTitle from '../features/PageTitle';
+import SessionHeader from './features/SessionHeader';
+import SessionList from './features/SessionList';
+
+const ChatMobilePage = memo(() => {
+  return (
+    <AppMobileLayout navBar={<SessionHeader />} showTabBar>
+      <PageTitle />
+      <SessionList />
+    </AppMobileLayout>
+  );
+});
+
+export default ChatMobilePage;

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

@@ -0,0 +1,15 @@
+'use client';
+
+import { PropsWithChildren, memo } from 'react';
+
+import { useEffectAfterSessionHydrated } from '@/store/session';
+
+const ChatMobileLayout = memo<PropsWithChildren>(({ children }) => {
+  useEffectAfterSessionHydrated((store) => {
+    store.setState({ isMobile: true });
+  }, []);
+
+  return children;
+});
+
+export default ChatMobileLayout;

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

@@ -0,0 +1,21 @@
+'use client';
+
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+
+import Conversation from '../../features/Conversation';
+import Header from '../features/ChatHeader';
+import ChatInput from '../features/ChatInput';
+import Topics from '../features/Topics';
+
+const Chat = memo(() => (
+  <AppMobileLayout navBar={<Header />}>
+    <Flexbox height={'calc(100vh - 44px)'} horizontal>
+      <Conversation chatInput={<ChatInput />} mobile />
+      <Topics />
+    </Flexbox>
+  </AppMobileLayout>
+));
+export default Chat;

package/src/app/chat/{features/Header → components/ChatHeader}/Mobile.tsx

@@ -4,13 +4,14 @@ import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import ShareButton from '@/app/chat/features/Header/ShareButton';
 import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
 
+import ShareButton from './ShareButton';
+
 const MobileHeader = memo(() => {
   const { t } = useTranslation('common');
   const router = useRouter();

package/src/app/chat/{features/Header → components/ChatHeader}/ShareButton/Preview.tsx

@@ -6,14 +6,14 @@ import { toJpeg, toPng, toSvg } from 'html-to-image';
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import ChatList from 'src/app/chat/features/Conversation/ChatList';
 
-import pkg from '@/../package.json';
-import ChatList from '@/app/chat/features/Conversation/ChatList';
-import PluginTag from '@/app/chat/features/Header/PluginTag';
+import PluginTag from '@/app/chat/components/ChatHeader/PluginTag';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/slices/agentConfig';
 import { sessionSelectors } from '@/store/session/slices/session/selectors';
 
+import pkg from '../../../../../../package.json';
 import { useStyles } from './style';
 
 export enum ImageType {

package/src/app/chat/{features/Conversation/Input → components/ChatInput}/ActionBar/Token.tsx

@@ -1,24 +1,27 @@
 import { TokenTag, Tooltip } from '@lobehub/ui';
-import { encode } from 'gpt-tokenizer';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { ModelTokens } from '@/const/modelTokens';
+import { useTokenCount } from '@/hooks/useTokenCount';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors, chatSelectors } from '@/store/session/selectors';
 
 const Token = memo<{ input: string }>(({ input }) => {
   const { t } = useTranslation('common');
 
-  const inputTokenCount = useMemo(() => encode(input).length, [input]);
+  const inputTokenCount = useTokenCount(input);
 
-  const [totalToken, systemRoleToken, chatsToken, model] = useSessionStore((s) => [
-    chatSelectors.totalTokenCount(s),
-    chatSelectors.systemRoleTokenCount(s),
-    chatSelectors.chatsTokenCount(s),
+  const [messageString, systemRole, model] = useSessionStore((s) => [
+    chatSelectors.chatsMessageString(s),
+    agentSelectors.currentAgentSystemRole(s),
     agentSelectors.currentAgentModel(s),
   ]);
 
+  const systemRoleToken = useTokenCount(systemRole);
+  const chatsToken = useTokenCount(messageString);
+
+  const totalToken = systemRoleToken + chatsToken;
   return (
     <Tooltip placement={'bottom'} title={t('tokenDetail', { chatsToken, systemRoleToken })}>
       <TokenTag

package/src/app/chat/{features/Conversation/Input → components/ChatInput}/index.tsx

@@ -1,6 +1,7 @@
 import { ChatInputArea } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
-import { memo, useState } from 'react';
+import dynamic from 'next/dynamic';
+import { Suspense, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { CHAT_TEXTAREA_HEIGHT } from '@/const/layoutTokens';
@@ -8,32 +9,39 @@ import { useSessionStore } from '@/store/session';
 
 import ActionLeft from './ActionBar/ActionLeft';
 import ActionsRight from './ActionBar/ActionRight';
-import Token from './ActionBar/Token';
-import Desktop from './Desktop';
 import Footer from './Footer';
-import Mobile from './Mobile';
 
-const ChatInput = () => {
-  const { t } = useTranslation('common');
-  const [expand, setExpand] = useState<boolean>(false);
-  const [message, setMessage] = useState('');
-  const { mobile } = useResponsive();
+const Token = dynamic(() => import('./ActionBar/Token'), { ssr: false });
 
-  const [isLoading, sendMessage, stopGenerateMessage] = useSessionStore((s) => [
-    !!s.chatLoadingId,
-    s.sendMessage,
-    s.stopGenerateMessage,
-  ]);
+interface ChatContentProps {
+  expand?: boolean;
+  mobile?: boolean;
+  onExpandChange?: (expand: boolean) => void;
+}
 
-  const Render = mobile ? Mobile : Desktop;
+export const ChatInputContent = memo<ChatContentProps>(
+  ({ expand, onExpandChange, mobile: defaultMobile }) => {
+    const { t } = useTranslation('common');
 
-  return (
-    <Render expand={expand}>
+    const [message, setMessage] = useState('');
+    const { mobile: runtimeMobile } = useResponsive();
+
+    const mobile = runtimeMobile || defaultMobile;
+
+    const [isLoading, sendMessage, stopGenerateMessage] = useSessionStore((s) => [
+      !!s.chatLoadingId,
+      s.sendMessage,
+      s.stopGenerateMessage,
+    ]);
+
+    return (
       <ChatInputArea
         actions={
           <>
             <ActionLeft />
-            <Token input={message} />
+            <Suspense>
+              <Token input={message} />
+            </Suspense>
           </>
         }
         actionsRight={<ActionsRight />}
@@ -41,7 +49,7 @@ const ChatInput = () => {
         footer={<Footer />}
         loading={isLoading}
         minHeight={mobile ? 0 : CHAT_TEXTAREA_HEIGHT}
-        onExpandChange={setExpand}
+        onExpandChange={onExpandChange}
         onInputChange={setMessage}
         onSend={sendMessage}
         onStop={stopGenerateMessage}
@@ -52,8 +60,6 @@ const ChatInput = () => {
         }}
         value={message}
       />
-    </Render>
-  );
-};
-
-export default memo(ChatInput);
+    );
+  },
+);

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

@@ -0,0 +1,17 @@
+import { Flexbox } from 'react-layout-kit';
+
+import { Topic } from './Topic';
+import TopicSearchBar from './TopicSearchBar';
+
+export const InspectorContent = () => {
+  return (
+    <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
+      <Flexbox padding={16}>
+        <TopicSearchBar />
+      </Flexbox>
+      <Flexbox gap={16} paddingInline={16} style={{ overflowY: 'auto', position: 'relative' }}>
+        <Topic />
+      </Flexbox>
+    </Flexbox>
+  );
+};

package/src/app/chat/{features → components}/SessionList/Mobile.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, memo } from 'react';
 
-import SessionSearchBar from '../SessionSearchBar';
+import SessionSearchBar from '../../features/SessionSearchBar';
 
 const Sessions = memo<{ children: ReactNode }>(({ children }) => {
   return (

package/src/app/chat/{features → components}/SessionList/index.tsx

@@ -1,20 +1,13 @@
 import { CollapseProps } from 'antd';
-import { useResponsive } from 'antd-style';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import CollapseGroup from './CollapseGroup';
-import Desktop from './Desktop';
 import Inbox from './Inbox';
 import SessionList from './List';
-import Mobile from './Mobile';
 
-export const Sessions = memo(() => {
-  const { mobile } = useResponsive();
+export const SessionListContent = memo(() => {
   const { t } = useTranslation('common');
-
-  const Render = mobile ? Mobile : Desktop;
-
   const items: CollapseProps['items'] = useMemo(
     () => [
       {
@@ -27,9 +20,9 @@ export const Sessions = memo(() => {
   );
 
   return (
-    <Render>
+    <>
       <Inbox />
       <CollapseGroup defaultActiveKey={['sessionList']} items={items} />
-    </Render>
+    </>
   );
 });