@lobehub/chat 0.82.8 → 0.82.9

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/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/welcome/page.tsx

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

@@ -12,6 +12,7 @@ export const isMobileDevice = () => {
   const { get } = headers();
   const ua = get('user-agent');
 
+  console.log(ua);
   const device = new UAParser(ua || '').getDevice();
 
   return device.type === 'mobile';

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;