@lobehub/chat 0.82.1 → 0.82.3

package/src/app/chat/features/Header/ShareButton/Inner.tsx

@@ -5,6 +5,7 @@ import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import MobilePadding from '@/components/MobilePadding';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
@@ -89,33 +90,37 @@ const Inner = memo(() => {
 
   return (
     <Flexbox gap={16}>
-      <Segmented
-        block
-        onChange={(value) => setTab(value as Tab)}
-        options={options}
-        style={{ width: '100%' }}
-        value={tab}
-      />
-      <Form items={[settings]} {...FORM_STYLE} />
-      {tab === Tab.Screenshot && (
-        <Preview
-          imageType={imageType}
-          withBackground={withBackground}
-          withFooter={withFooter}
-          withSystemRole={withSystemRole}
-        />
-      )}
-      {tab === Tab.ShareGPT && (
-        <Button
+      <MobilePadding bottom={0}>
+        <Segmented
           block
-          loading={shareLoading}
-          onClick={() => shareToShareGPT({ avatar, withPluginInfo, withSystemRole })}
-          size={'large'}
-          type={'primary'}
-        >
-          {t('shareModal.shareToShareGPT')}
-        </Button>
-      )}
+          onChange={(value) => setTab(value as Tab)}
+          options={options}
+          style={{ width: '100%' }}
+          value={tab}
+        />
+      </MobilePadding>
+      <Form items={[settings]} {...FORM_STYLE} />
+      <MobilePadding gap={16} top={0}>
+        {tab === Tab.Screenshot && (
+          <Preview
+            imageType={imageType}
+            withBackground={withBackground}
+            withFooter={withFooter}
+            withSystemRole={withSystemRole}
+          />
+        )}
+        {tab === Tab.ShareGPT && (
+          <Button
+            block
+            loading={shareLoading}
+            onClick={() => shareToShareGPT({ avatar, withPluginInfo, withSystemRole })}
+            size={'large'}
+            type={'primary'}
+          >
+            {t('shareModal.shareToShareGPT')}
+          </Button>
+        )}
+      </MobilePadding>
     </Flexbox>
   );
 });

package/src/app/chat/features/Header/ShareButton/index.tsx

@@ -1,8 +1,10 @@
 import { ActionIcon, Modal } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
 import { Share2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useSessionStore } from '@/store/session';
 
 import Inner from './Inner';
@@ -11,6 +13,9 @@ const ShareButton = memo(() => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { t } = useTranslation('common');
   const [shareLoading] = useSessionStore((s) => [s.shareLoading]);
+  const { mobile } = useResponsive();
+
+  const size = mobile ? MOBILE_HEADER_ICON_SIZE : { fontSize: 24 };
 
   return (
     <>
@@ -18,7 +23,7 @@ const ShareButton = memo(() => {
         icon={Share2}
         loading={shareLoading}
         onClick={() => setIsModalOpen(true)}
-        size={{ fontSize: 24 }}
+        size={size}
         title={t('share')}
       />
       <Modal

package/src/app/chat/features/SessionList/Header/Desktop.tsx

@@ -1,7 +1,6 @@
 import { ActionIcon, Logo } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { MessageSquarePlus } from 'lucide-react';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -28,9 +27,8 @@ const Header = memo(() => {
   return (
     <Flexbox className={styles.top} gap={16} padding={16}>
       <Flexbox distribution={'space-between'} horizontal>
-        <Link href={'/'}>
-          <Logo className={styles.logo} size={36} type={'text'} />
-        </Link>
+        <Logo className={styles.logo} size={36} type={'text'} />
+
         <ActionIcon
           icon={MessageSquarePlus}
           onClick={() => createSession()}

package/src/app/chat/features/SessionList/Header/Mobile.tsx

@@ -1,10 +1,11 @@
-import { ActionIcon, Logo, MobileNavBar } from '@lobehub/ui';
+import { ActionIcon, Avatar, Logo, MobileNavBar } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { MessageSquarePlus, Settings2 } from 'lucide-react';
+import { MessageSquarePlus } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 
-import AvatarWithUpload from '@/features/AvatarWithUpload';
+import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 
 export const useStyles = createStyles(({ css, token }) => ({
@@ -20,21 +21,21 @@ export const useStyles = createStyles(({ css, token }) => ({
 const Header = memo(() => {
   const [createSession] = useSessionStore((s) => [s.createSession]);
   const router = useRouter();
-
+  const avatar = useGlobalStore((st) => st.settings.avatar);
   return (
     <MobileNavBar
       center={<Logo type={'text'} />}
-      left={<AvatarWithUpload size={28} style={{ marginLeft: 8 }} />}
+      left={
+        <div onClick={() => router.push('/settings/mobile')} style={{ marginLeft: 8 }}>
+          {avatar ? <Avatar avatar={avatar} size={28} /> : <Logo size={28} />}
+        </div>
+      }
       right={
-        <>
-          <ActionIcon icon={MessageSquarePlus} onClick={() => createSession()} />
-          <ActionIcon
-            icon={Settings2}
-            onClick={() => {
-              router.push('/settings');
-            }}
-          />
-        </>
+        <ActionIcon
+          icon={MessageSquarePlus}
+          onClick={() => createSession()}
+          size={MOBILE_HEADER_ICON_SIZE}
+        />
       }
     />
   );

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

@@ -1,14 +1,10 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Drawer } from 'antd';
-import { useTheme } from 'antd-style';
-import { X } from 'lucide-react';
+import { Modal } from '@lobehub/ui';
 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,
@@ -17,19 +13,9 @@ const Mobile = memo<PropsWithChildren>(({ children }) => {
   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')}
-    >
+    <Modal onCancel={() => toggleConfig(false)} open={showAgentSettings} title={t('topic.title')}>
       {children}
-    </Drawer>
+    </Modal>
   );
 });
 

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

@@ -3,11 +3,12 @@ import { Flexbox } from 'react-layout-kit';
 
 import AppLayout from '@/layout/AppLayout';
 import { useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 
 import { Sessions } from './features/SessionList';
 
 const ChatLayout = memo<PropsWithChildren>(({ children }) => {
-  useSwitchSideBarOnInit('chat');
+  useSwitchSideBarOnInit(SidebarTabKey.Chat);
 
   return (
     <AppLayout>

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

@@ -2,12 +2,13 @@ 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('chat');
+  useSwitchSideBarOnInit(SidebarTabKey.Chat);
 
   return (
     <AppMobileLayout navBar={<Header />} showTabBar>

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

@@ -1,10 +1,11 @@
 import { ActionIcon } from '@lobehub/ui';
 import { Dropdown, MenuProps } from 'antd';
 import { useResponsive } from 'antd-style';
-import { HardDriveDownload, Share2 } from 'lucide-react';
+import { HardDriveDownload } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
 import { useSessionStore } from '@/store/session';
 
@@ -42,11 +43,10 @@ const Header = memo<{ mobile?: boolean }>(() => {
     [],
   );
 
-  const size = mobile ? undefined : { fontSize: 24 };
+  const size = mobile ? MOBILE_HEADER_ICON_SIZE : { fontSize: 24 };
 
   return (
     <Render>
-      <ActionIcon icon={Share2} size={size} title={t('share', { ns: 'common' })} />
       <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
         <ActionIcon icon={HardDriveDownload} size={size} title={t('export', { ns: 'common' })} />
       </Dropdown>

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

@@ -1,18 +1,11 @@
 import { PropsWithChildren, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
 import AppMobileLayout from '@/layout/AppMobileLayout';
 
 import Header from './features/Header';
 
 const MobileLayout = memo<PropsWithChildren>(({ children }) => {
-  return (
-    <AppMobileLayout navBar={<Header />}>
-      <Flexbox gap={16} padding={16}>
-        {children}
-      </Flexbox>
-    </AppMobileLayout>
-  );
+  return <AppMobileLayout navBar={<Header />}>{children}</AppMobileLayout>;
 });
 
 export default MobileLayout;

package/src/app/market/features/AgentCard/AgentCardBanner.tsx

@@ -39,7 +39,7 @@ interface AgentCardBannerProps extends DivProps {
 }
 
 const AgentCardBanner = memo<AgentCardBannerProps>(
-  ({ meta, className, mask, size = 8, maskColor, ...props }) => {
+  ({ meta, className, mask, size = 8, maskColor, children, ...props }) => {
     const { styles, theme, cx } = useStyles(maskColor);
 
     return (
@@ -56,6 +56,7 @@ const AgentCardBanner = memo<AgentCardBannerProps>(
           style={{ transform: `scale(${size})` }}
         />
         {mask && <div className={styles.bannerMask} />}
+        {children}
       </Flexbox>
     );
   },

package/src/app/market/features/Header/Mobile.tsx

@@ -1,27 +1,8 @@
-import { ActionIcon, Logo, MobileNavBar } from '@lobehub/ui';
-import { Settings2 } from 'lucide-react';
-import { useRouter } from 'next/navigation';
+import { Logo, MobileNavBar } from '@lobehub/ui';
 import { memo } from 'react';
 
-import AvatarWithUpload from '@/features/AvatarWithUpload';
-
 const Header = memo(() => {
-  const router = useRouter();
-
-  return (
-    <MobileNavBar
-      center={<Logo type={'text'} />}
-      left={<AvatarWithUpload size={28} style={{ marginLeft: 8 }} />}
-      right={
-        <ActionIcon
-          icon={Settings2}
-          onClick={() => {
-            router.push('/settings');
-          }}
-        />
-      }
-    />
-  );
+  return <MobileNavBar center={<Logo type={'text'} />} />;
 });
 
 export default Header;

package/src/app/market/features/SideBar/AgentInfo/Header.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { Center } from 'react-layout-kit';
 
 import { useGlobalStore } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 import { useSessionStore } from '@/store/session';
 
@@ -54,7 +55,7 @@ const Header = memo(() => {
           if (!agentItem) return;
 
           createSession({ config, meta });
-          switchSideBar('chat');
+          switchSideBar(SidebarTabKey.Chat);
         }}
         type={'primary'}
       >

package/src/app/market/features/SideBar/AgentInfo/index.tsx

@@ -1,4 +1,5 @@
 import { Markdown, TabsNav } from '@lobehub/ui';
+import { useResponsive } from 'antd-style';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -22,7 +23,8 @@ const AgentModalInner = memo(() => {
     s.useFetchAgent,
     s.currentIdentifier,
   ]);
-  const { styles } = useStyles();
+  const { styles, theme } = useStyles();
+  const { mobile } = useResponsive();
   const { data, isLoading } = useFetchAgent(currentIdentifier);
   const { t } = useTranslation('market');
   const [tab, setTab] = useState<string>(InfoTabs.prompt);
@@ -34,7 +36,13 @@ const AgentModalInner = memo(() => {
 
   return (
     <>
-      <AgentCardBanner mask meta={meta} size={10} style={{ height: 120, marginBottom: -60 }} />
+      <AgentCardBanner
+        mask
+        maskColor={mobile ? theme.colorBgContainer : undefined}
+        meta={meta}
+        size={10}
+        style={{ height: 120, marginBottom: -60 }}
+      />
       <Header />
       <Flexbox align={'center'}>
         <TabsNav

package/src/app/market/features/SideBar/Mobile.tsx

@@ -1,14 +1,10 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Drawer } from 'antd';
-import { useTheme } from 'antd-style';
-import { X } from 'lucide-react';
+import { Modal } from '@lobehub/ui';
 import { PropsWithChildren, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { agentMarketSelectors, useMarketStore } from '@/store/market';
 
 const Mobile = memo<PropsWithChildren>(({ children }) => {
-  const theme = useTheme();
   const [showAgentSidebar, deactivateAgent] = useMarketStore((s) => [
     agentMarketSelectors.showSideBar(s),
     s.deactivateAgent,
@@ -17,19 +13,9 @@ const Mobile = memo<PropsWithChildren>(({ children }) => {
   const { t } = useTranslation('market');
 
   return (
-    <Drawer
-      bodyStyle={{ padding: 0 }}
-      closeIcon={<ActionIcon icon={X} size={{ blockSize: 32, fontSize: 20 }} />}
-      drawerStyle={{ background: theme.colorBgLayout }}
-      headerStyle={{ padding: '8px 4px' }}
-      height={'75vh'}
-      onClose={deactivateAgent}
-      open={showAgentSidebar}
-      placement={'bottom'}
-      title={t('sidebar.title')}
-    >
+    <Modal onCancel={deactivateAgent} open={showAgentSidebar} title={t('sidebar.title')}>
       {children}
-    </Drawer>
+    </Modal>
   );
 });
 

package/src/app/market/layout.desktop.tsx

@@ -6,6 +6,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 import SafeSpacing from '@/components/SafeSpacing';
 import { MAX_WIDTH } from '@/const/layoutTokens';
 import { useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 
 import AppLayout from '../../layout/AppLayout';
 import Header from './features/Header';
@@ -27,7 +28,7 @@ const useStyles = createStyles(({ css }) => ({
 const MarketLayout = memo<PropsWithChildren>(({ children }) => {
   const { theme, styles } = useStyles();
 
-  useSwitchSideBarOnInit('market');
+  useSwitchSideBarOnInit(SidebarTabKey.Market);
 
   return (
     <AppLayout>

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

@@ -3,12 +3,13 @@ import { Flexbox } from 'react-layout-kit';
 
 import AppMobileLayout from '@/layout/AppMobileLayout';
 import { useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 
 import Header from './features/Header';
 import SideBar from './features/SideBar';
 
 const MarketLayout = memo<{ children: ReactNode }>(({ children }) => {
-  useSwitchSideBarOnInit('market');
+  useSwitchSideBarOnInit(SidebarTabKey.Market);
 
   return (
     <AppMobileLayout navBar={<Header />} showTabBar>

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

@@ -0,0 +1,20 @@
+'use client';
+
+import { memo } from 'react';
+
+import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
+import { SettingsTabs } from '@/store/global/initialState';
+
+import Layout from '../index';
+import Agent from './Agent';
+
+const AgentSetting = memo(() => {
+  useSwitchSideBarOnInit(SettingsTabs.Agent);
+  return (
+    <Layout>
+      <Agent />
+    </Layout>
+  );
+});
+
+export default AgentSetting;

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

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

package/src/app/settings/{features/Settings → common}/Common.tsx

@@ -15,7 +15,7 @@ import { useSessionStore } from '@/store/session';
 import { ConfigKeys } from '@/types/settings';
 import { switchLang } from '@/utils/switchLang';
 
-import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from '../ThemeSwatches';
+import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from '../features/ThemeSwatches';
 
 type SettingItemGroup = ItemGroup & {
   children: {

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

@@ -0,0 +1,20 @@
+'use client';
+
+import { memo } from 'react';
+
+import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
+import { SettingsTabs } from '@/store/global/initialState';
+
+import Layout from '../index';
+import Common from './Common';
+
+const CommonSetting = memo(() => {
+  useSwitchSideBarOnInit(SettingsTabs.Common);
+  return (
+    <Layout>
+      <Common />
+    </Layout>
+  );
+});
+
+export default CommonSetting;

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

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

package/src/app/settings/features/Header/Desktop.tsx

@@ -1,13 +1,20 @@
-import { ChatHeader, ChatHeaderTitle, Logo } from '@lobehub/ui';
+import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useGlobalStore } from '@/store/global';
+
 const Index = memo(() => {
   const { t } = useTranslation('setting');
+  const tab = useGlobalStore((s) => s.settingsTab);
 
   return (
     <ChatHeader
-      left={<ChatHeaderTitle title={<Logo extra={t('header.global')} type={'text'} />} />}
+      left={
+        <div style={{ paddingLeft: 8 }}>
+          <ChatHeaderTitle title={t(`tab.${tab}`)} />
+        </div>
+      }
     />
   );
 });

package/src/app/settings/features/Header/Mobile.tsx

@@ -3,14 +3,17 @@ import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useGlobalStore } from '@/store/global';
+
 const Header = memo(() => {
   const { t } = useTranslation('setting');
+  const tab = useGlobalStore((s) => s.settingsTab);
   const router = useRouter();
 
   return (
     <MobileNavBar
-      center={<MobileNavBarTitle title={t('header.global')} />}
-      onBackClick={() => router.push('/chat')}
+      center={<MobileNavBarTitle title={t(`tab.${tab}`)} />}
+      onBackClick={() => router.back()}
       showBackButton
     />
   );

package/src/app/settings/features/SideBar/Item.tsx

@@ -0,0 +1,39 @@
+import { Icon, List } from '@lobehub/ui';
+import { createStyles, useResponsive } from 'antd-style';
+import { ChevronRight, type LucideIcon } from 'lucide-react';
+import { CSSProperties, ReactNode, memo } from 'react';
+
+const { Item } = List;
+
+const useStyles = createStyles(({ css }) => ({
+  container: css`
+    padding-top: 20px;
+    padding-bottom: 20px;
+  `,
+}));
+
+export interface ItemProps {
+  active?: boolean;
+  className?: string;
+  icon: LucideIcon;
+  label: ReactNode;
+  style?: CSSProperties;
+}
+
+const SettingItem = memo<ItemProps>(({ label, icon, active = false, style, className }) => {
+  const { cx, styles } = useStyles();
+  const { mobile } = useResponsive();
+  return (
+    <Item
+      active={active}
+      avatar={<Icon icon={icon} size={{ fontSize: 16 }} />}
+      className={cx(styles.container, className)}
+      style={style}
+      title={label as string}
+    >
+      {mobile && <Icon icon={ChevronRight} size={{ fontSize: 16 }} />}
+    </Item>
+  );
+});
+
+export default SettingItem;

package/src/app/settings/features/SideBar/List.tsx

@@ -0,0 +1,30 @@
+import { useResponsive } from 'antd-style';
+import { Bot, Settings2, Webhook } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useGlobalStore } from '@/store/global';
+import { SettingsTabs } from '@/store/global/initialState';
+
+import Item from './Item';
+
+const List = memo(() => {
+  const { t } = useTranslation('setting');
+  const tab = useGlobalStore((s) => s.settingsTab);
+  const router = useRouter();
+  const { mobile } = useResponsive();
+  const items = [
+    { icon: Settings2, label: t('tab.common'), value: SettingsTabs.Common },
+    { icon: Webhook, label: t('tab.llm'), value: SettingsTabs.LLM },
+    { icon: Bot, label: t('tab.agent'), value: SettingsTabs.Agent },
+  ];
+
+  return items.map(({ value, icon, label }) => (
+    <div key={value} onClick={() => router.push(`/settings/${value}`)}>
+      <Item active={mobile ? false : tab === value} icon={icon} label={label} />
+    </div>
+  ));
+});
+
+export default List;