@lobehub/chat 0.82.7 → 0.82.9

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,19 @@
+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');
+
+  console.log(ua);
+  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/chat/features/Sidebar/index.tsx

@@ -1,29 +0,0 @@
-import { useResponsive } from 'antd-style';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import Desktop from './Desktop';
-import Mobile from './Mobile';
-import { Topic } from './Topic';
-import TopicSearchBar from './TopicSearchBar';
-
-const SideBar = memo(() => {
-  const { mobile } = useResponsive();
-
-  const Render = mobile ? Mobile : Desktop;
-
-  return (
-    <Render>
-      <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
-        <Flexbox padding={16}>
-          <TopicSearchBar />
-        </Flexbox>
-        <Flexbox gap={16} paddingInline={16} style={{ overflowY: 'auto', position: 'relative' }}>
-          <Topic />
-        </Flexbox>
-      </Flexbox>
-    </Render>
-  );
-});
-
-export default SideBar;

package/src/app/chat/index.tsx

@@ -1,54 +0,0 @@
-'use client';
-
-import { useResponsive } from 'antd-style';
-import Head from 'next/head';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { useSessionStore } from '@/store/session';
-import { useEffectAfterSessionHydrated } from '@/store/session/hooks';
-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 DesktopLayout from './layout.desktop';
-import MobileLayout from './layout.mobile';
-
-const Chat = memo(() => {
-  const { mobile } = useResponsive();
-  const [avatar, title] = useSessionStore((s) => [
-    agentSelectors.currentAgentAvatar(s),
-    agentSelectors.currentAgentTitle(s),
-  ]);
-  const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
-  const RenderLayout = mobile ? MobileLayout : DesktopLayout;
-
-  useEffectAfterSessionHydrated(
-    (store) => {
-      store.setState({ isMobile: mobile });
-    },
-    [mobile],
-  );
-
-  return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-      </Head>
-      <RenderLayout>
-        {!mobile && (
-          <>
-            <Header />
-            <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
-              <Conversation />
-              <SideBar />
-            </Flexbox>
-          </>
-        )}
-      </RenderLayout>
-    </>
-  );
-});
-export default Chat;

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

@@ -1,20 +0,0 @@
-import { memo } from 'react';
-
-import AppMobileLayout from '@/layout/AppMobileLayout';
-import { useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
-
-import { Sessions } from './features/SessionList';
-import Header from './features/SessionList/Header';
-
-const ChatMobileLayout = memo(() => {
-  useSwitchSideBarOnInit(SidebarTabKey.Chat);
-
-  return (
-    <AppMobileLayout navBar={<Header />} showTabBar>
-      <Sessions />
-    </AppMobileLayout>
-  );
-});
-
-export default ChatMobileLayout;

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

@@ -1,38 +0,0 @@
-'use client';
-
-import Head from 'next/head';
-import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import AppMobileLayout from '@/layout/AppMobileLayout';
-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';
-
-const Chat = memo(() => {
-  const [avatar, title] = useSessionStore((s) => [
-    agentSelectors.currentAgentAvatar(s),
-    agentSelectors.currentAgentTitle(s),
-  ]);
-
-  const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
-
-  return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-      </Head>
-      <AppMobileLayout navBar={<Header />}>
-        <Flexbox height={'calc(100vh - 44px)'} horizontal>
-          <Conversation mobile />
-          <SideBar />
-        </Flexbox>
-      </AppMobileLayout>
-    </>
-  );
-});
-export default Chat;

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

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

package/src/app/chat/settings/index.tsx

@@ -1,51 +0,0 @@
-'use client';
-
-import { useResponsive } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import Head from 'next/head';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import AgentSetting from '@/features/AgentSetting';
-import { useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/selectors';
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
-
-import DesktopLayout from './layout.desktop';
-import MobileLayout from './layout.mobile';
-
-const EditPage = memo(() => {
-  const { mobile } = useResponsive();
-  const { t } = useTranslation('setting');
-  const config = useSessionStore(agentSelectors.currentAgentConfig, isEqual);
-  const meta = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
-  const [updateAgentConfig, updateAgentMeta, title] = useSessionStore((s) => [
-    s.updateAgentConfig,
-    s.updateAgentMeta,
-    agentSelectors.currentAgentTitle(s),
-  ]);
-
-  const pageTitle = genSiteHeadTitle(t('header.sessionWithName', { name: title }));
-
-  const settings = (
-    <AgentSetting
-      config={config}
-      meta={meta}
-      onConfigChange={updateAgentConfig}
-      onMetaChange={updateAgentMeta}
-    />
-  );
-
-  const RenderLayout = mobile ? MobileLayout : DesktopLayout;
-
-  return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-      </Head>
-      <RenderLayout>{settings}</RenderLayout>
-    </>
-  );
-});
-
-export default EditPage;

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