@lobehub/chat 0.82.7 → 0.82.9

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

@@ -1,6 +1,6 @@
 import { BackBottom } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { memo, useRef } from 'react';
+import { ReactNode, memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -8,7 +8,6 @@ import SafeSpacing from '@/components/SafeSpacing';
 import { usePluginStore } from '@/store/plugin';
 
 import ChatList from './ChatList';
-import ChatInput from './Input';
 import ChatScrollAnchor from './ScrollAnchor';
 
 const useStyles = createStyles(
@@ -23,7 +22,12 @@ const useStyles = createStyles(
   `,
 );
 
-const Conversation = memo<{ mobile?: boolean }>(({ mobile }) => {
+interface ConversationProps {
+  chatInput: ReactNode;
+  mobile?: boolean;
+}
+
+const Conversation = memo<ConversationProps>(({ mobile, chatInput }) => {
   const ref = useRef(null);
   const { t } = useTranslation('common');
   const { styles } = useStyles();
@@ -41,7 +45,7 @@ const Conversation = memo<{ mobile?: boolean }>(({ mobile }) => {
         </div>
         <BackBottom target={ref} text={t('backToBottom')} />
       </div>
-      <ChatInput />
+      {chatInput}
     </Flexbox>
   );
 });

package/src/app/chat/features/PageTitle.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { memo } from 'react';
+
+import PageTitle from '@/components/PageTitle';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+
+const Title = memo(() => {
+  const [avatar, title] = useSessionStore((s) => [
+    agentSelectors.currentAgentAvatar(s),
+    agentSelectors.currentAgentTitle(s),
+  ]);
+  const pageTitle = genSiteHeadTitle([avatar, title].filter(Boolean).join(' '));
+
+  return <PageTitle title={pageTitle} />;
+});
+export default Title;

package/src/app/chat/layout.tsx

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

package/src/app/chat/page.tsx

@@ -1,7 +1,12 @@
-import Page from './index';
+import { isMobileDevice } from '@/utils/responsive';
 
-const Index = () => {
-  return <Page />;
+import DesktopPage from './(desktop)';
+import MobilePage from './(mobile)';
+
+const Page = () => {
+  const mobile = isMobileDevice();
+
+  return mobile ? <MobilePage /> : <DesktopPage />;
 };
 
-export default Index;
+export default Page;

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

@@ -0,0 +1,13 @@
+import { memo } from 'react';
+
+import { HeaderContent } from '@/app/chat/settings/components/Header';
+
+import Layout from './Desktop';
+
+const Header = memo(() => (
+  <Layout>
+    <HeaderContent />
+  </Layout>
+));
+
+export default Header;

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

@@ -1,21 +1,22 @@
+'use client';
+
 import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { HEADER_HEIGHT } from '@/const/layoutTokens';
 
-import ChatLayout from '../layout.desktop';
-import Header from './features/Header';
+import Header from './Header';
 
 const DesktopLayout = memo<PropsWithChildren>(({ children }) => {
   return (
-    <ChatLayout>
+    <>
       <Header />
       <Flexbox align={'center'} flex={1} gap={16} padding={24} style={{ overflow: 'auto' }}>
         <SafeSpacing height={HEADER_HEIGHT - 16} />
         {children}
       </Flexbox>
-    </ChatLayout>
+    </>
   );
 });
 

package/src/app/chat/settings/(mobile)/Header.tsx

@@ -0,0 +1,12 @@
+import { memo } from 'react';
+
+import { HeaderContent } from '@/app/chat/settings/components/Header';
+import Layout from '@/app/chat/settings/components/Header/Mobile';
+
+const Header = memo(() => (
+  <Layout>
+    <HeaderContent />
+  </Layout>
+));
+
+export default Header;

package/src/app/chat/settings/{layout.mobile.tsx → (mobile)/layout.mobile.tsx}

@@ -1,8 +1,10 @@
+'use client';
+
 import { PropsWithChildren, memo } from 'react';
 
 import AppMobileLayout from '@/layout/AppMobileLayout';
 
-import Header from './features/Header';
+import Header from './Header';
 
 const MobileLayout = memo<PropsWithChildren>(({ children }) => {
   return <AppMobileLayout navBar={<Header />}>{children}</AppMobileLayout>;

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

@@ -9,16 +9,11 @@ import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
 import { useSessionStore } from '@/store/session';
 
-import Desktop from './Desktop';
-import Mobile from './Mobile';
-
-const Header = memo<{ mobile?: boolean }>(() => {
+export const HeaderContent = memo<{ mobile?: boolean }>(() => {
   const { t } = useTranslation('setting');
   const id = useSessionStore((s) => s.activeId);
   const { mobile } = useResponsive();
 
-  const Render = mobile ? Mobile : Desktop;
-
   const items = useMemo<MenuProps['items']>(
     () => [
       {
@@ -46,12 +41,8 @@ const Header = memo<{ mobile?: boolean }>(() => {
   const size = mobile ? MOBILE_HEADER_ICON_SIZE : { fontSize: 24 };
 
   return (
-    <Render>
-      <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-        <ActionIcon icon={HardDriveDownload} size={size} title={t('export', { ns: 'common' })} />
-      </Dropdown>
-    </Render>
+    <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
+      <ActionIcon icon={HardDriveDownload} size={size} title={t('export', { ns: 'common' })} />
+    </Dropdown>
   );
 });
-
-export default Header;

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

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

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

@@ -1,7 +1,38 @@
-import Page from './index';
+'use client';
 
-const Index = () => {
-  return <Page />;
-};
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
-export default Index;
+import PageTitle from '@/components/PageTitle';
+import AgentSetting from '@/features/AgentSetting';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
+
+const EditPage = memo(() => {
+  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 }));
+
+  return (
+    <>
+      <PageTitle title={pageTitle} />
+      <AgentSetting
+        config={config}
+        meta={meta}
+        onConfigChange={updateAgentConfig}
+        onMetaChange={updateAgentMeta}
+      />
+    </>
+  );
+});
+
+export default EditPage;

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/metadata.ts

@@ -46,7 +46,10 @@ const metadata: Metadata = {
     { color: '#f8f8f8', media: '(prefers-color-scheme: light)' },
     { color: '#000', media: '(prefers-color-scheme: dark)' },
   ],
-  title: title,
+  title: {
+    default: title,
+    template: '%s · LobeChat',
+  },
   viewport: {
     initialScale: 1,
     maximumScale: 1,

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

package/src/components/PageTitle.tsx

@@ -0,0 +1,11 @@
+import { memo, useEffect } from 'react';
+
+const PageTitle = memo<{ title: string }>(({ title }) => {
+  useEffect(() => {
+    document.title = title;
+  }, [title]);
+
+  return null;
+});
+
+export default PageTitle;

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/layout/AppMobileLayout.tsx

@@ -1,6 +1,5 @@
 import { type MobileNavBarTitleProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import Head from 'next/head';
 import { CSSProperties, PropsWithChildren, ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -49,29 +48,21 @@ const AppMobileLayout = memo<AppMobileLayoutProps>(
     const { styles, cx } = useStyles();
 
     return (
-      <>
-        <Head>
-          <meta
-            content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-            name="viewport"
-          />
-        </Head>
-        <Flexbox className={cx(styles.container, className)} style={style}>
-          {navBar && (
-            <>
-              <div className={styles.mobileNavBar}>{navBar}</div>
-              <SafeSpacing mobile position={'top'} />
-            </>
-          )}
-          {children}
-          {showTabBar && (
-            <>
-              <SafeSpacing mobile position={'bottom'} />
-              <MobileTabBar className={styles.mobileTabBar} />
-            </>
-          )}
-        </Flexbox>
-      </>
+      <Flexbox className={cx(styles.container, className)} style={style}>
+        {navBar && (
+          <>
+            <div className={styles.mobileNavBar}>{navBar}</div>
+            <SafeSpacing mobile position={'top'} />
+          </>
+        )}
+        {children}
+        {showTabBar && (
+          <>
+            <SafeSpacing mobile position={'bottom'} />
+            <MobileTabBar className={styles.mobileTabBar} />
+          </>
+        )}
+      </Flexbox>
     );
   },
 );

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;