@lobehub/chat 0.82.7 → 0.82.8

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [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.8",
   "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/Conversation/Input/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/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,11 +9,12 @@ 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 Token = dynamic(() => import('./ActionBar/Token'), { ssr: false });
+
 const ChatInput = () => {
   const { t } = useTranslation('common');
   const [expand, setExpand] = useState<boolean>(false);
@@ -33,7 +35,9 @@ const ChatInput = () => {
         actions={
           <>
             <ActionLeft />
-            <Token input={message} />
+            <Suspense>
+              <Token input={message} />
+            </Suspense>
           </>
         }
         actionsRight={<ActionsRight />}

package/src/app/home/Redirect.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { memo, useEffect } from 'react';
+
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
+
+const Redirect = memo(() => {
+  const router = useRouter();
+
+  useEffect(() => {
+    useSessionStore.persist.onFinishHydration(() => {
+      const store = useSessionStore.getState();
+      const hasSession = sessionSelectors.hasSessionList(store);
+
+      if (hasSession) {
+        router.push('/chat');
+        store.switchSession();
+      } else {
+        router.push('/welcome');
+      }
+    });
+  }, []);
+
+  return null;
+});
+
+export default Redirect;

package/src/app/home/index.tsx

@@ -1,31 +1,20 @@
 'use client';
 
-import { memo } from 'react';
-
-import {
-  useEffectAfterSessionHydrated,
-  useSessionHydrated,
-  useSessionStore,
-} from '@/store/session';
-import { sessionSelectors } from '@/store/session/selectors';
-
-import Welcome from '../welcome';
-import Loading from './Loading';
-
-const Home = memo(() => {
-  const hydrated = useSessionHydrated();
-  const [hasSession, switchSession] = useSessionStore((s) => [
-    sessionSelectors.hasSessionList(s),
-    s.switchSession,
-  ]);
-
-  useEffectAfterSessionHydrated(() => {
-    if (hasSession) switchSession();
-  }, [hasSession]);
-
-  if (!hydrated) return <Loading />;
-
-  return !hasSession ? <Welcome /> : <Loading />;
-});
-
-export default Home;
+import { Icon, Logo } from '@lobehub/ui';
+import { t } from 'i18next';
+import { Loader2 } from 'lucide-react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+const Loading = () => (
+  <Flexbox height={'100vh'} width={'100%'}>
+    <Center flex={1} gap={12} width={'100%'}>
+      <Logo extra={'Chat'} size={48} type={'combine'} />
+      <Center gap={16} horizontal>
+        <Icon icon={Loader2} spin />
+        {t('appInitializing', { ns: 'common' })}
+      </Center>
+    </Center>
+  </Flexbox>
+);
+
+export default Loading;

package/src/app/market/features/SideBar/AgentInfo/TokenTag.tsx

@@ -1,6 +1,7 @@
 import { createStyles } from 'antd-style';
-import { encode } from 'gpt-tokenizer';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
+
+import { useTokenCount } from '@/hooks/useTokenCount';
 
 const useStyles = createStyles(
   ({ css, token }) => css`
@@ -17,7 +18,7 @@ const useStyles = createStyles(
 
 const TokenTag = memo<{ systemRole: string }>(({ systemRole }) => {
   const { styles } = useStyles();
-  const value = useMemo(() => encode(systemRole).length, [systemRole]);
+  const value = useTokenCount(systemRole);
 
   return <div className={styles}>{value}</div>;
 });

package/src/app/page.tsx

@@ -1,7 +1,11 @@
 import Page from './home';
+import Redirect from './home/Redirect';
 
-const Index = () => {
-  return <Page />;
-};
+const Index = () => (
+  <>
+    <Page />
+    <Redirect />
+  </>
+);
 
 export default Index;

package/src/app/welcome/{layout.desktop.tsx → DesktopLayout/Desktop.tsx}

@@ -3,10 +3,11 @@ import Link from 'next/link';
 import { PropsWithChildren, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
-import AppLayout from '../../layout/AppLayout';
-import { useStyles } from './features/Banner/style';
+import AppLayout from '@/layout/AppLayout';
 
-const WelcomeLayout = memo<PropsWithChildren>(({ children }) => {
+import { useStyles } from '../features/Banner/style';
+
+const Desktop = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
   return (
     <AppLayout>
@@ -28,4 +29,4 @@ const WelcomeLayout = memo<PropsWithChildren>(({ children }) => {
   );
 });
 
-export default WelcomeLayout;
+export default Desktop;

package/src/app/welcome/DesktopLayout/index.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { useResponsive } from 'antd-style';
+import { PropsWithChildren, memo } from 'react';
+
+import Mobile from '../MobileLayout';
+import Desktop from './Desktop';
+
+const ResponsiveLayout = memo<PropsWithChildren>(({ children }) => {
+  const { mobile } = useResponsive();
+
+  return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
+});
+
+export default ResponsiveLayout;

package/src/app/welcome/{layout.mobile.tsx → MobileLayout.tsx}

@@ -1,11 +1,14 @@
+'use client';
+
 import { Logo, MobileNavBar } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { PropsWithChildren, memo } from 'react';
 
-import AppMobileLayout from '../../layout/AppMobileLayout';
+import AppMobileLayout from '@/layout/AppMobileLayout';
 
-const WelcomeLayout = memo<PropsWithChildren>(({ children }) => {
+const MobileLayout = memo<PropsWithChildren>(({ children }) => {
   const theme = useTheme();
+
   return (
     <AppMobileLayout
       navBar={<MobileNavBar center={<Logo type={'text'} />} />}
@@ -17,4 +20,4 @@ const WelcomeLayout = memo<PropsWithChildren>(({ children }) => {
   );
 });
 
-export default WelcomeLayout;
+export default MobileLayout;

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { GridShowcase, Icon } from '@lobehub/ui';
 import { useSize } from 'ahooks';
 import { Button, Upload } from 'antd';

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { ActionIcon, DiscordIcon } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { Book, Github } from 'lucide-react';

package/src/app/welcome/layout.tsx

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react';
+
+import { isMobileDevice } from '@/utils/responsive';
+
+import Desktop from './DesktopLayout';
+import Mobile from './MobileLayout';
+import Footer from './features/Footer';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  const mobile = isMobileDevice();
+
+  return mobile ? (
+    <Mobile>{children}</Mobile>
+  ) : (
+    <Desktop>
+      {children}
+      <Footer />
+    </Desktop>
+  );
+};
+
+export default Layout;

package/src/app/welcome/page.tsx

@@ -1,7 +1,16 @@
-import Page from './index';
+import { t } from 'i18next';
+import { Metadata } from 'next';
 
-const Index = () => {
-  return <Page />;
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+
+import Banner from './features/Banner';
+
+export const generateMetadata = (): Metadata => ({
+  title: genSiteHeadTitle(t('header', { ns: 'welcome' })),
+});
+
+const Page = () => {
+  return <Banner />;
 };
 
-export default Index;
+export default Page;

package/src/features/AgentSetting/AgentPrompt/index.tsx

@@ -1,7 +1,6 @@
 import { EditableMessage, FormGroup, TokenTag } from '@lobehub/ui';
 import { Button } from 'antd';
 import { createStyles } from 'antd-style';
-import { encode } from 'gpt-tokenizer';
 import { Bot } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -9,6 +8,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { ModelTokens } from '@/const/modelTokens';
+import { useTokenCount } from '@/hooks/useTokenCount';
 
 import { useStore } from '../store';
 
@@ -26,11 +26,8 @@ const AgentPrompt = memo(() => {
   const { styles } = useStyles();
   const [editing, setEditing] = useState(false);
   const updateConfig = useStore((s) => s.setAgentConfig);
-  const [systemRole, model, systemTokenCount] = useStore((s) => [
-    s.config.systemRole,
-    s.config.model,
-    encode(s.config.systemRole || '').length,
-  ]);
+  const [systemRole, model] = useStore((s) => [s.config.systemRole, s.config.model]);
+  const systemTokenCount = useTokenCount(systemRole);
 
   return (
     <FormGroup

package/src/hooks/useTokenCount.ts

@@ -0,0 +1,20 @@
+import { startTransition, useEffect, useState } from 'react';
+
+import { encodeAsync } from '@/utils/tokenizer';
+
+export const useTokenCount = (input: string = '') => {
+  const [value, setNum] = useState(0);
+
+  useEffect(() => {
+    startTransition(() => {
+      encodeAsync(input)
+        .then(setNum)
+        .catch(() => {
+          // 兜底采用字符数
+          setNum(input.length);
+        });
+    });
+  }, [input]);
+
+  return value;
+};

package/src/prompts/chat.ts

@@ -2,7 +2,9 @@ import { chatHelpers } from '@/store/session/helpers';
 import { LanguageModel } from '@/types/llm';
 import { OpenAIChatMessage, OpenAIStreamPayload } from '@/types/openai';
 
-export const promptSummaryTitle = (messages: OpenAIChatMessage[]): Partial<OpenAIStreamPayload> => {
+export const promptSummaryTitle = async (
+  messages: OpenAIChatMessage[],
+): Promise<Partial<OpenAIStreamPayload>> => {
   const finalMessages: OpenAIChatMessage[] = [
     {
       content:
@@ -17,7 +19,7 @@ export const promptSummaryTitle = (messages: OpenAIChatMessage[]): Partial<OpenA
     },
   ];
   // 如果超过 4k，则使用 GPT3.5 16K 模型
-  const tokens = chatHelpers.getMessagesTokenCount(finalMessages);
+  const tokens = await chatHelpers.getMessagesTokenCount(finalMessages);
   let model: LanguageModel | undefined = undefined;
   if (tokens > 4000) {
     model = LanguageModel.GPT3_5_16K;

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

@@ -1,21 +1,26 @@
 import { useEffect } from 'react';
 
-import { useSessionStore } from '../store';
+import { SessionStore, useSessionStore } from '../store';
 
 export const useEffectAfterSessionHydrated = (
-  fn: (session: typeof useSessionStore) => void,
+  fn: (session: typeof useSessionStore, store: SessionStore) => void,
   deps: any[] = [],
 ) => {
+  // const hasTrigger = useRef(false);
   useEffect(() => {
     const hasRehydrated = useSessionStore.persist.hasHydrated();
 
     if (hasRehydrated) {
-      // 等价 useEffect 多次触发
-      fn(useSessionStore);
+      // equal useEffect triggered multi-time
+      fn(useSessionStore, useSessionStore.getState());
     } else {
-      // 等价于 useEffect 第一次触发
+      // keep onFinishHydration just are triggered only once
+      // if (hasTrigger.current) return;
+      //
+      // hasTrigger.current = true;
+      // equal useEffect first trigger
       useSessionStore.persist.onFinishHydration(() => {
-        fn(useSessionStore);
+        fn(useSessionStore, useSessionStore.getState());
       });
     }
   }, deps);

package/src/store/session/slices/chat/actions/message.ts

@@ -285,7 +285,7 @@ export const chatMessage: StateCreator<
 
     if (!activeTopicId && chats.length >= 2) {
       const { saveToTopic, toggleTopic } = get();
-      const id = saveToTopic();
+      const id = await saveToTopic();
       if (id) toggleTopic(id);
     }
   },

package/src/store/session/slices/chat/actions/topic.ts

@@ -26,7 +26,7 @@ export interface ChatTopicAction {
   /**
    * 将当前消息保存为主题
    */
-  saveToTopic: () => string | undefined;
+  saveToTopic: () => Promise<string | undefined>;
   /**
    * 切换主题
    * @param id - 要切换的主题的 ID
@@ -72,7 +72,7 @@ export const chatTopic: StateCreator<
     // 切换到默认 topic
     toggleTopic();
   },
-  saveToTopic: () => {
+  saveToTopic: async () => {
     const session = sessionSelectors.currentSession(get());
     if (!session) return;
 
@@ -116,7 +116,7 @@ export const chatTopic: StateCreator<
         output += x;
         dispatchTopic({ id: topicId, key: 'title', type: 'updateChatTopic', value: output });
       },
-      params: promptSummaryTitle(messages),
+      params: await promptSummaryTitle(messages),
     });
 
     return topicId;

package/src/store/session/slices/chat/helpers.ts

@@ -1,9 +1,8 @@
-import { encode } from 'gpt-tokenizer';
-
 import { OpenAIChatMessage } from '@/types/openai';
+import { encodeAsync } from '@/utils/tokenizer';
 
-export const getMessagesTokenCount = (messages: OpenAIChatMessage[]) =>
-  encode(messages.map((m) => m.content).join('')).length;
+export const getMessagesTokenCount = async (messages: OpenAIChatMessage[]) =>
+  encodeAsync(messages.map((m) => m.content).join(''));
 
 export const chatHelpers = {
   getMessagesTokenCount,

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

@@ -79,3 +79,8 @@ export const currentChatsWithHistoryConfig = (s: SessionStore): ChatMessage[] =>
 
   return getSlicedMessagesWithConfig(chats, config);
 };
+
+export const chatsMessageString = (s: SessionStore): string => {
+  const chats = currentChatsWithHistoryConfig(s);
+  return chats.map((m) => m.content).join('');
+};

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

@@ -1,14 +1,18 @@
-import { currentChats, currentChatsWithGuideMessage, getChatsById } from './chat';
-import { chatsTokenCount, systemRoleTokenCount, totalTokenCount } from './token';
+import {
+  chatsMessageString,
+  currentChats,
+  currentChatsWithGuideMessage,
+  currentChatsWithHistoryConfig,
+  getChatsById,
+} from './chat';
 import { currentTopics, getTopicMessages } from './topic';
 
 export const chatSelectors = {
-  chatsTokenCount,
+  chatsMessageString,
   currentChats,
   currentChatsWithGuideMessage,
+  currentChatsWithHistoryConfig,
   getChatsById,
-  systemRoleTokenCount,
-  totalTokenCount,
 };
 
 export const topicSelectors = {

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

@@ -95,7 +95,7 @@ export const createSessionSlice: StateCreator<
 
     dispatchSession({ session: newSession, type: 'addSession' });
 
-    await switchSession(newSession.id);
+    switchSession(newSession.id);
 
     return newSession.id;
   },

package/src/utils/responsive.ts

@@ -0,0 +1,18 @@
+import { headers } from 'next/headers';
+import { UAParser } from 'ua-parser-js';
+
+/**
+ * check mobile device in server
+ */
+export const isMobileDevice = () => {
+  if (typeof process === 'undefined') {
+    throw new Error('[Server method] you are importing a server-only module outside of server');
+  }
+
+  const { get } = headers();
+  const ua = get('user-agent');
+
+  const device = new UAParser(ua || '').getDevice();
+
+  return device.type === 'mobile';
+};

package/src/utils/tokenizer.ts

@@ -0,0 +1,5 @@
+export const encodeAsync = async (str: string) => {
+  const { encode } = await import('gpt-tokenizer');
+
+  return encode(str).length;
+};

package/src/app/home/Loading.tsx

@@ -1,23 +0,0 @@
-import { Icon, Logo } from '@lobehub/ui';
-import { Loader2 } from 'lucide-react';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
-
-const Loading = memo(() => {
-  const { t } = useTranslation('common');
-
-  return (
-    <Flexbox height={'100vh'} width={'100%'}>
-      <Center flex={1} gap={12} width={'100%'}>
-        <Logo extra={'Chat'} size={48} type={'combine'} />
-        <Center gap={16} horizontal>
-          <Icon icon={Loader2} spin />
-          {t('appInitializing')}
-        </Center>
-      </Center>
-    </Flexbox>
-  );
-});
-
-export default Loading;

package/src/app/welcome/index.tsx

@@ -1,39 +0,0 @@
-'use client';
-
-import { useResponsive } from 'antd-style';
-import Head from 'next/head';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
-
-import Banner from './features/Banner';
-import Footer from './features/Footer';
-import Layout from './layout.desktop';
-import Mobile from './layout.mobile';
-
-const Welcome = memo(() => {
-  const { mobile } = useResponsive();
-  const { t } = useTranslation('welcome');
-  const pageTitle = genSiteHeadTitle(t('header'));
-
-  return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-      </Head>
-      {mobile ? (
-        <Mobile>
-          <Banner />
-        </Mobile>
-      ) : (
-        <Layout>
-          <Banner />
-          <Footer />
-        </Layout>
-      )}
-    </>
-  );
-});
-
-export default Welcome;

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

@@ -1,28 +0,0 @@
-import { encode } from 'gpt-tokenizer';
-
-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;
-};
-
-export const systemRoleTokenCount = (s: SessionStore): number => {
-  const systemRole = systemRoleSel(s);
-
-  return count(systemRole || '');
-};
-
-export const chatsTokenCount = (s: SessionStore): number => {
-  const chats = currentChatsWithHistoryConfig(s);
-  return count(chats.map((m) => m.content).join(''));
-};
-
-export const totalTokenCount = (s: SessionStore) => chatsTokenCount(s) + systemRoleTokenCount(s);