@lobehub/chat 0.57.0 → 0.58.0

package/src/pages/chat/features/Header/PC.tsx

@@ -0,0 +1,101 @@
+import { SiOpenai } from '@icons-pack/react-simple-icons';
+import { ActionIcon, Avatar, ChatHeader, ChatHeaderTitle, Tag } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { PanelRightClose, PanelRightOpen, Settings } from 'lucide-react';
+import Router from 'next/router';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { INBOX_SESSION_ID } from '@/const/session';
+import { useGlobalStore } from '@/store/global';
+import { agentSelectors, useSessionChatInit, useSessionStore } from '@/store/session';
+
+import PluginTag from './PluginTag';
+
+const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
+  const init = useSessionChatInit();
+
+  const { t } = useTranslation('common');
+
+  const [id, title, description, avatar, backgroundColor, model, plugins] = useSessionStore((s) => [
+    s.activeId,
+
+    agentSelectors.currentAgentTitle(s),
+    agentSelectors.currentAgentDescription(s),
+    agentSelectors.currentAgentAvatar(s),
+    agentSelectors.currentAgentBackgroundColor(s),
+    agentSelectors.currentAgentModel(s),
+    agentSelectors.currentAgentPlugins(s),
+  ]);
+
+  const isInbox = id === INBOX_SESSION_ID;
+  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
+    s.preference.showChatSideBar,
+    s.toggleChatSideBar,
+  ]);
+
+  const displayTitle = isInbox ? t('inbox.title') : title;
+  const displayDesc = isInbox ? t('inbox.desc') : description;
+
+  return (
+    <ChatHeader
+      left={
+        !init ? (
+          <Flexbox horizontal>
+            <Skeleton
+              active
+              avatar={{ shape: 'circle', size: 'default' }}
+              paragraph={false}
+              title={{ style: { margin: 0, marginTop: 8 }, width: 200 }}
+            />
+          </Flexbox>
+        ) : (
+          <Flexbox align={'flex-start'} gap={12} horizontal>
+            <Avatar avatar={avatar} background={backgroundColor} size={40} title={title} />
+            <ChatHeaderTitle
+              desc={displayDesc}
+              tag={
+                <>
+                  <Tag icon={<SiOpenai size={'1em'} />}>{model}</Tag>
+                  {plugins?.length > 0 && <PluginTag plugins={plugins} />}
+                </>
+              }
+              title={displayTitle}
+            />
+          </Flexbox>
+        )
+      }
+      right={
+        <>
+          {/*<ActionIcon*/}
+          {/*  icon={Share2}*/}
+          {/*  onClick={() => {*/}
+          {/*    // genShareUrl();*/}
+          {/*  }}*/}
+          {/*  size={{ fontSize: 24 }}*/}
+          {/*  title={t('share')}*/}
+          {/*/>*/}
+          <ActionIcon
+            icon={showAgentSettings ? PanelRightClose : PanelRightOpen}
+            onClick={() => toggleConfig()}
+            size={{ fontSize: 24 }}
+            title={t('roleAndArchive')}
+          />
+          {settings && (
+            <ActionIcon
+              icon={Settings}
+              onClick={() => {
+                Router.push(`/chat/${id}/setting`);
+              }}
+              size={{ fontSize: 24 }}
+              title={t('header.session', { ns: 'setting' })}
+            />
+          )}
+        </>
+      }
+    />
+  );
+});
+
+export default Header;

package/src/pages/chat/features/Header/index.tsx

@@ -1,101 +1,15 @@
-import { SiOpenai } from '@icons-pack/react-simple-icons';
-import { ActionIcon, Avatar, ChatHeader, ChatHeaderTitle, Tag } from '@lobehub/ui';
-import { Skeleton } from 'antd';
-import { PanelRightClose, PanelRightOpen, Settings } from 'lucide-react';
-import Router from 'next/router';
+import { useResponsive } from 'antd-style';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
-import { INBOX_SESSION_ID } from '@/const/session';
-import { useGlobalStore } from '@/store/global';
-import { agentSelectors, useSessionChatInit, useSessionStore } from '@/store/session';
+import Mobile from './Mobile';
+import PC from './PC';
 
-import PluginTag from './PluginTag';
+const Header = memo<{ settings?: boolean }>((props) => {
+  const { mobile } = useResponsive();
 
-const Header = memo<{ settings?: boolean }>(({ settings = true }) => {
-  const init = useSessionChatInit();
+  if (mobile) return <Mobile {...props} />;
 
-  const { t } = useTranslation('common');
-
-  const [id, title, description, avatar, backgroundColor, model, plugins] = useSessionStore((s) => [
-    s.activeId,
-
-    agentSelectors.currentAgentTitle(s),
-    agentSelectors.currentAgentDescription(s),
-    agentSelectors.currentAgentAvatar(s),
-    agentSelectors.currentAgentBackgroundColor(s),
-    agentSelectors.currentAgentModel(s),
-    agentSelectors.currentAgentPlugins(s),
-  ]);
-
-  const isInbox = id === INBOX_SESSION_ID;
-  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
-    s.preference.showChatSideBar,
-    s.toggleChatSideBar,
-  ]);
-
-  const displayTitle = isInbox ? t('inbox.title') : title;
-  const displayDesc = isInbox ? t('inbox.desc') : description;
-
-  return (
-    <ChatHeader
-      left={
-        !init ? (
-          <Flexbox horizontal>
-            <Skeleton
-              active
-              avatar={{ shape: 'circle', size: 'default' }}
-              paragraph={false}
-              title={{ style: { margin: 0, marginTop: 8 }, width: 200 }}
-            />
-          </Flexbox>
-        ) : (
-          <Flexbox align={'flex-start'} gap={12} horizontal>
-            <Avatar avatar={avatar} background={backgroundColor} size={40} title={title} />
-            <ChatHeaderTitle
-              desc={displayDesc}
-              tag={
-                <>
-                  <Tag icon={<SiOpenai size={'1em'} />}>{model}</Tag>
-                  {plugins?.length > 0 && <PluginTag plugins={plugins} />}
-                </>
-              }
-              title={displayTitle}
-            />
-          </Flexbox>
-        )
-      }
-      right={
-        <>
-          {/*<ActionIcon*/}
-          {/*  icon={Share2}*/}
-          {/*  onClick={() => {*/}
-          {/*    // genShareUrl();*/}
-          {/*  }}*/}
-          {/*  size={{ fontSize: 24 }}*/}
-          {/*  title={t('share')}*/}
-          {/*/>*/}
-          <ActionIcon
-            icon={showAgentSettings ? PanelRightClose : PanelRightOpen}
-            onClick={() => toggleConfig()}
-            size={{ fontSize: 24 }}
-            title={t('roleAndArchive')}
-          />
-          {settings && (
-            <ActionIcon
-              icon={Settings}
-              onClick={() => {
-                Router.push(`/chat/${id}/setting`);
-              }}
-              size={{ fontSize: 24 }}
-              title={t('header.session', { ns: 'setting' })}
-            />
-          )}
-        </>
-      }
-    />
-  );
+  return <PC {...props} />;
 });
 
 export default Header;

package/src/pages/chat/features/Sidebar/Header.tsx

@@ -2,24 +2,26 @@ import { createStyles } from 'antd-style';
 import { type ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-const useStyles = createStyles(
-  ({ css, token }) => css`
+const useStyles = createStyles(({ css, token }) => ({
+  header: css`
     z-index: 10;
     box-shadow: 0 2px 6px ${token.colorBgLayout};
   `,
-);
+}));
 
 interface HeaderProps {
   actions?: ReactNode;
+  mobile?: boolean;
   title: string;
 }
 
 const Header = memo<HeaderProps>(({ title, actions }) => {
   const { styles } = useStyles();
+
   return (
     <Flexbox
       align={'center'}
-      className={styles}
+      className={styles.header}
       distribution={'space-between'}
       horizontal
       padding={12}

package/src/pages/chat/features/Sidebar/Mobile.tsx

@@ -0,0 +1,36 @@
+import { ActionIcon } from '@lobehub/ui';
+import { Drawer } from 'antd';
+import { useTheme } from 'antd-style';
+import { X } from 'lucide-react';
+import { PropsWithChildren, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+
+const Mobile = memo<PropsWithChildren>(({ children }) => {
+  const theme = useTheme();
+  const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
+    s.preference.mobileShowTopic,
+    s.toggleMobileTopic,
+  ]);
+
+  const { t } = useTranslation('common');
+
+  return (
+    <Drawer
+      bodyStyle={{ padding: 0 }}
+      closeIcon={<ActionIcon icon={X} size={{ blockSize: 32, fontSize: 20 }} />}
+      drawerStyle={{ background: theme.colorBgContainer }}
+      headerStyle={{ padding: '8px 4px' }}
+      height={'75vh'}
+      onClose={() => toggleConfig(false)}
+      open={showAgentSettings}
+      placement={'bottom'}
+      title={t('topic.title')}
+    >
+      {children}
+    </Drawer>
+  );
+});
+
+export default Mobile;

package/src/pages/chat/features/Sidebar/SystemRole.tsx

@@ -44,7 +44,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-const SystemRole = memo(() => {
+const SystemRole = memo<{ mobile?: boolean }>(() => {
   const [openModal, setOpenModal] = useState(false);
 
   const { styles } = useStyles();
@@ -62,7 +62,7 @@ const SystemRole = memo(() => {
           <ActionIcon
             icon={Edit}
             onClick={() => setOpenModal(true)}
-            size="small"
+            size={'small'}
             title={t('edit')}
           />
         }

package/src/pages/chat/features/Sidebar/index.tsx

@@ -5,20 +5,25 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import HeaderSpacing from '@/components/HeaderSpacing';
+import SafeSpacing from '@/components/SafeSpacing';
 import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 
+import Mobile from './Mobile';
 import SystemRole from './SystemRole';
 import { Topic } from './Topic';
 
-const useStyles = createStyles(({ cx, css, token, stylish }) => ({
+const useStyles = createStyles(({ cx, css, token, stylish }, mobile: boolean) => ({
   content: css`
     display: flex;
     flex-direction: column;
   `,
   drawer: cx(
-    stylish.blurStrong,
+    mobile
+      ? css`
+          background: ${token.colorBgLayout} !important;
+        `
+      : stylish.blurStrong,
     css`
       background: ${rgba(token.colorBgLayout, 0.4)};
     `,
@@ -29,10 +34,11 @@ const useStyles = createStyles(({ cx, css, token, stylish }) => ({
 }));
 
 interface SideBarProps {
+  mobile?: boolean;
   systemRole?: boolean;
 }
-const SideBar = memo<SideBarProps>(({ systemRole = true }) => {
-  const { styles } = useStyles();
+const SideBar = memo<SideBarProps>(({ systemRole = true, mobile }) => {
+  const { styles } = useStyles(mobile);
   const [showAgentSettings, toggleConfig] = useGlobalStore((s) => [
     s.preference.showChatSideBar,
     s.toggleChatSideBar,
@@ -40,6 +46,23 @@ const SideBar = memo<SideBarProps>(({ systemRole = true }) => {
 
   const { t } = useTranslation('common');
 
+  const topic = (
+    <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
+      <Flexbox padding={16}>
+        <SearchBar
+          placeholder={t('topic.searchPlaceholder')}
+          spotlight={!mobile}
+          type={mobile ? 'block' : 'ghost'}
+        />
+      </Flexbox>
+      <Flexbox gap={16} paddingInline={16} style={{ overflowY: 'auto', position: 'relative' }}>
+        <Topic />
+      </Flexbox>
+    </Flexbox>
+  );
+
+  if (mobile) return <Mobile>{topic}</Mobile>;
+
   return (
     <DraggablePanel
       className={styles.drawer}
@@ -48,22 +71,17 @@ const SideBar = memo<SideBarProps>(({ systemRole = true }) => {
       }}
       expand={showAgentSettings}
       minWidth={CHAT_SIDEBAR_WIDTH}
+      mode={'fixed'}
       onExpandChange={toggleConfig}
       placement={'right'}
     >
       <DraggablePanelContainer
         style={{ flex: 'none', height: '100%', minWidth: CHAT_SIDEBAR_WIDTH }}
       >
-        <HeaderSpacing />
-        {systemRole && <SystemRole />}
-        <Flexbox height={'100%'} style={{ overflow: 'hidden' }}>
-          <Flexbox padding={16}>
-            <SearchBar placeholder={t('topic.searchPlaceholder')} spotlight type={'ghost'} />
-          </Flexbox>
-          <Flexbox gap={16} paddingInline={16} style={{ overflowY: 'auto', position: 'relative' }}>
-            <Topic />
-          </Flexbox>
-        </Flexbox>
+        <SafeSpacing />
+        {systemRole && <SystemRole mobile={mobile} />}
+
+        {topic}
       </DraggablePanelContainer>
     </DraggablePanel>
   );

package/src/pages/chat/index.page.tsx

@@ -1,3 +1,4 @@
+import { useResponsive } from 'antd-style';
 import Head from 'next/head';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,10 +12,11 @@ import Conversation from './features/Conversation';
 import Header from './features/Header';
 import SideBar from './features/Sidebar';
 import Layout from './layout';
+import Mobile from './mobile';
 
 const Chat = memo(() => {
   const { t } = useTranslation('common');
-
+  const { mobile } = useResponsive();
   const pageTitle = genSiteHeadTitle(t('inbox.title'));
 
   useOnFinishHydrationSession(() => {
@@ -26,13 +28,17 @@ const Chat = memo(() => {
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      <Layout>
-        <Header settings={false} />
-        <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
-          <Conversation />
-          <SideBar systemRole={false} />
-        </Flexbox>
-      </Layout>
+      {mobile ? (
+        <Mobile />
+      ) : (
+        <Layout>
+          <Header settings={false} />
+          <Flexbox flex={1} height={'calc(100vh - 64px)'} horizontal>
+            <Conversation />
+            <SideBar systemRole={false} />
+          </Flexbox>
+        </Layout>
+      )}
     </>
   );
 });

package/src/pages/chat/layout.tsx

@@ -1,3 +1,4 @@
+import { useResponsive } from 'antd-style';
 import { PropsWithChildren, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -7,19 +8,22 @@ import { useSwitchSideBarOnInit } from '@/store/global';
 import { Sessions } from './SessionList';
 
 const ChatLayout = memo<PropsWithChildren>(({ children }) => {
+  const { mobile } = useResponsive();
   useSwitchSideBarOnInit('chat');
 
   return (
     <AppLayout>
       <Sessions />
-      <Flexbox
-        flex={1}
-        height={'100vh'}
-        id={'lobe-conversion-container'}
-        style={{ position: 'relative' }}
-      >
-        {children}
-      </Flexbox>
+      {!mobile && (
+        <Flexbox
+          flex={1}
+          height={'100vh'}
+          id={'lobe-conversion-container'}
+          style={{ position: 'relative' }}
+        >
+          {children}
+        </Flexbox>
+      )}
     </AppLayout>
   );
 });

package/src/pages/chat/mobile.tsx

@@ -0,0 +1,25 @@
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+import Header from '@/pages/chat/SessionList/Header';
+import { useSwitchSideBarOnInit } from '@/store/global';
+
+import { Sessions } from './SessionList';
+
+const ChatMobileLayout = memo(() => {
+  useSwitchSideBarOnInit('chat');
+  const theme = useTheme();
+
+  return (
+    <AppMobileLayout
+      navBar={<Header mobile={'navbar'} />}
+      showTabBar
+      style={{ background: theme.colorBgContainer }}
+    >
+      <Sessions mobile />
+    </AppMobileLayout>
+  );
+});
+
+export default ChatMobileLayout;

package/src/pages/settings/index.page.tsx

@@ -1,21 +1,53 @@
+import { useResponsive } from 'antd-style';
+import Head from 'next/head';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import HeaderSpacing from '@/components/HeaderSpacing';
+import SafeSpacing from '@/components/SafeSpacing';
+import { createI18nNext } from '@/locales/create';
+import { useOnFinishHydrationGlobal, useSwitchSideBarOnInit } from '@/store/global';
+import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 import Header from './Header';
 import Settings from './Settings';
 import SettingLayout from './layout';
+import Mobile from './mobile';
+
+const initI18n = createI18nNext({ namespace: 'setting' });
 
 const Setting = memo(() => {
+  const { mobile } = useResponsive();
+  const { t } = useTranslation('setting');
+  const pageTitle = genSiteHeadTitle(t('header.global'));
+
+  useSwitchSideBarOnInit('settings');
+
+  useOnFinishHydrationGlobal(() => {
+    initI18n.then(() => {});
+  });
+
   return (
-    <SettingLayout>
-      <Header />
-      <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
-        <HeaderSpacing />
-        <Settings />
-      </Flexbox>
-    </SettingLayout>
+    <>
+      <Head>
+        <title>{pageTitle}</title>
+      </Head>
+      {mobile ? (
+        <Mobile>
+          <Flexbox align={'center'} padding={16} style={{ overflow: 'auto' }}>
+            <Settings />
+          </Flexbox>
+        </Mobile>
+      ) : (
+        <SettingLayout>
+          <Header />
+          <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
+            <SafeSpacing />
+            <Settings />
+          </Flexbox>
+        </SettingLayout>
+      )}
+    </>
   );
 });
 

package/src/pages/settings/layout.tsx

@@ -1,37 +1,15 @@
-import Head from 'next/head';
 import { ReactNode, memo } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import SideBar from '@/features/SideBar';
-import { createI18nNext } from '@/locales/create';
-import { useOnFinishHydrationGlobal, useSwitchSideBarOnInit } from '@/store/global';
-import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
-
-const initI18n = createI18nNext({ namespace: 'setting' });
+import AppLayout from '@/layout/AppLayout';
 
 const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
-  const { t } = useTranslation('setting');
-  const pageTitle = genSiteHeadTitle(t('header.global'));
-
-  useSwitchSideBarOnInit('settings');
-
-  useOnFinishHydrationGlobal(() => {
-    initI18n.then(() => {});
-  });
-
   return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-      </Head>
-      <Flexbox horizontal width={'100%'}>
-        <SideBar />
-        <Flexbox flex={1} height={'100vh'} style={{ position: 'relative' }}>
-          {children}
-        </Flexbox>
+    <AppLayout>
+      <Flexbox flex={1} height={'100vh'} style={{ position: 'relative' }}>
+        {children}
       </Flexbox>
-    </>
+    </AppLayout>
   );
 });
 

package/src/pages/settings/mobile.tsx

@@ -0,0 +1,20 @@
+import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
+import { ReactNode, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import AppMobileLayout from '@/layout/AppMobileLayout';
+
+const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
+  const { t } = useTranslation('setting');
+
+  return (
+    <AppMobileLayout
+      navBar={<MobileNavBar center={<MobileNavBarTitle title={t('header.global')} />} />}
+      showTabBar
+    >
+      {children}
+    </AppMobileLayout>
+  );
+});
+
+export default SettingLayout;

package/src/pages/welcome/Banner/Hero.tsx

@@ -21,12 +21,10 @@ const Hero = memo<{ width: number }>(({ width }) => {
 
   return (
     <>
-      <LogoThree
-        size={size.logo}
-        style={{ marginBottom: -size.logo / 40, marginTop: -size.logo / 5 }}
-      />
+      <LogoThree size={size.logo} style={{ marginTop: -size.logo / 5 }} />
       <div className={styles.title} style={{ fontSize: size.title }}>
-        LobeChat{mobile ? <br /> : ' '}
+        <span style={mobile ? { fontSize: '1.2em' } : {}}>LobeChat</span>
+        {mobile ? <br /> : ' '}
         {t('slogan.title')}
       </div>
       <div className={styles.desc} style={{ fontSize: size.desc }}>

package/src/pages/welcome/Banner/index.tsx

@@ -13,7 +13,7 @@ import { useImportConfig } from '@/hooks/useImportConfig';
 import { useStyles } from '../style';
 import Hero from './Hero';
 
-const Banner = memo(() => {
+const Banner = memo<{ mobile?: boolean }>(() => {
   const { importConfig } = useImportConfig();
   const ref = useRef(null);
   const domSize = useSize(ref);
@@ -28,12 +28,15 @@ const Banner = memo(() => {
   }, []);
 
   return (
-    <Flexbox height={'80vh'} style={{ marginTop: '10vh' }}>
+    <Flexbox height={'80vh'} style={{ paddingTop: '10vh' }}>
       <GridShowcase>
         <div className={styles.container} ref={ref}>
           <Hero width={width} />
         </div>
         <Flexbox gap={16} horizontal style={{ marginTop: 16 }}>
+          <Upload maxCount={1} onChange={handleImport} showUploadList={false}>
+            <Button size={'large'}>{t('button.import')}</Button>
+          </Upload>
           <Link href={'/chat'}>
             <Button size={'large'} type={'primary'}>
               <Flexbox align={'center'} gap={4} horizontal>
@@ -42,9 +45,6 @@ const Banner = memo(() => {
               </Flexbox>
             </Button>
           </Link>
-          <Upload maxCount={1} onChange={handleImport} showUploadList={false}>
-            <Button size={'large'}>{t('button.import')}</Button>
-          </Upload>
         </Flexbox>
       </GridShowcase>
       {/*TODO：暂时隐藏，待模板完成后再补回*/}