@lobehub/chat 0.82.8 → 0.83.0

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/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 { globalSelectors, useGlobalStore } from '@/store/global';
+import { settingsSelectors, 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 { mobile } = useResponsive();
   const { styles } = useStyles();
-  const [defaultModel] = useGlobalStore((s) => [globalSelectors.defaultAgentConfig(s).model]);
+  const [defaultModel] = useGlobalStore((s) => [settingsSelectors.defaultAgentConfig(s).model]);
 
   const [
     active,

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>
+    </>
   );
 });

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/index.tsx

@@ -1,20 +1,24 @@
 'use client';
 
 import { Icon, Logo } from '@lobehub/ui';
-import { t } from 'i18next';
 import { Loader2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 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' })}
+const Loading = () => {
+  const { t } = useTranslation();
+
+  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', { ns: 'common' })}
+        </Center>
       </Center>
-    </Center>
-  </Flexbox>
-);
+    </Flexbox>
+  );
+};
 
 export default Loading;

package/src/app/layout.tsx

@@ -2,6 +2,7 @@ import { cookies } from 'next/headers';
 import { PropsWithChildren } from 'react';
 
 import Analytics from '@/components/Analytics';
+import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
 import {
   LOBE_THEME_APPEARANCE,
   LOBE_THEME_NEUTRAL_COLOR,
@@ -17,13 +18,15 @@ const RootLayout = ({ children }: PropsWithChildren) => {
   const appearance = cookieStore.get(LOBE_THEME_APPEARANCE);
   const neutralColor = cookieStore.get(LOBE_THEME_NEUTRAL_COLOR);
   const primaryColor = cookieStore.get(LOBE_THEME_PRIMARY_COLOR);
+  const lang = cookieStore.get(LOBE_LOCALE_COOKIE);
 
   return (
-    <html lang="en-US">
+    <html lang={lang?.value || DEFAULT_LANG}>
       <body>
         <StyleRegistry>
           <Layout
             defaultAppearance={appearance?.value}
+            defaultLang={lang?.value}
             defaultNeutralColor={neutralColor?.value as any}
             defaultPrimaryColor={primaryColor?.value as any}
           >

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/settings/agent/Agent.tsx

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

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

@@ -10,6 +10,7 @@ import Agent from './Agent';
 
 const AgentSetting = memo(() => {
   useSwitchSideBarOnInit(SettingsTabs.Agent);
+
   return (
     <Layout>
       <Agent />