@lobehub/chat 0.82.1 → 0.82.2

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;

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

@@ -0,0 +1,38 @@
+import { DraggablePanelBody, Logo } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import FolderPanel from '@/features/FolderPanel';
+
+import List from './List';
+
+const useStyles = createStyles(({ stylish, token, css }) => ({
+  body: stylish.noScrollbar,
+  logo: css`
+    fill: ${token.colorText};
+  `,
+  top: css`
+    position: sticky;
+    top: 0;
+  `,
+}));
+
+const SideBar = memo(() => {
+  const { styles } = useStyles();
+
+  return (
+    <FolderPanel>
+      <DraggablePanelBody className={styles.body} style={{ padding: 0 }}>
+        <Flexbox className={styles.top} padding={16}>
+          <div>
+            <Logo className={styles.logo} size={36} type={'text'} />
+          </div>
+        </Flexbox>
+        <List />
+      </DraggablePanelBody>
+    </FolderPanel>
+  );
+});
+
+export default SideBar;

package/src/app/settings/index.tsx

@@ -2,33 +2,31 @@
 
 import { useResponsive } from 'antd-style';
 import Head from 'next/head';
-import { memo } from 'react';
+import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
-import Settings from './features/Settings';
 import DesktopLayout from './layout.desktop';
 import MobileLayout from './layout.mobile';
 
-const Setting = memo(() => {
+const Setting = memo<{ children: ReactNode }>(({ children }) => {
   const { mobile } = useResponsive();
   const { t } = useTranslation('setting');
   const pageTitle = genSiteHeadTitle(t('header.global'));
 
   const RenderLayout = mobile ? MobileLayout : DesktopLayout;
 
-  useSwitchSideBarOnInit('settings');
+  useSwitchSideBarOnInit(SidebarTabKey.Setting);
 
   return (
     <>
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      <RenderLayout>
-        <Settings />
-      </RenderLayout>
+      <RenderLayout>{children}</RenderLayout>
     </>
   );
 });

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

@@ -1,19 +1,23 @@
 import { ReactNode, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import AppLayout from '@/layout/AppLayout';
 
 import Header from './features/Header';
+import SideBar from './features/SideBar';
 
 const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
   return (
     <AppLayout>
+      <SideBar />
       <Flexbox flex={1} height={'100vh'} style={{ position: 'relative' }}>
         <Header />
         <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
           <SafeSpacing />
-          {children}
+          <Center gap={16} width={'100%'}>
+            {children}
+          </Center>
         </Flexbox>
       </Flexbox>
     </AppLayout>

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

@@ -8,9 +8,7 @@ import Header from './features/Header';
 const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
   return (
     <AppMobileLayout navBar={<Header />}>
-      <Flexbox align={'center'} padding={16} style={{ overflow: 'auto' }}>
-        {children}
-      </Flexbox>
+      <Flexbox style={{ overflow: 'auto' }}>{children}</Flexbox>
     </AppMobileLayout>
   );
 });

package/src/app/settings/{features/Settings → llm}/LLM/index.tsx

@@ -1,4 +1,4 @@
-import { Form, Markdown } from '@lobehub/ui';
+import { Form, type ItemGroup, Markdown } from '@lobehub/ui';
 import { Form as AntForm, AutoComplete, Input, Switch } from 'antd';
 import { createStyles } from 'antd-style';
 import { debounce } from 'lodash-es';
@@ -49,7 +49,7 @@ const LLM = memo(() => {
 
   const useAzure = useGlobalStore((s) => s.settings.languageModel.openAI.useAzure);
 
-  const openAI = {
+  const openAI: ItemGroup = {
     children: [
       {
         children: (
@@ -94,6 +94,7 @@ const LLM = memo(() => {
         ),
         desc: t('llm.OpenAI.useAzure.desc'),
         label: t('llm.OpenAI.useAzure.title'),
+        minWidth: undefined,
         name: [configKey, 'openAI', 'useAzure'],
         valuePropName: 'checked',
       },
@@ -124,6 +125,7 @@ const LLM = memo(() => {
         children: <Checker checkModel={!useAzure} />,
         desc: t('llm.OpenAI.check.desc'),
         label: t('llm.OpenAI.check.title'),
+        minWidth: undefined,
       },
       // {
       //   children: useAzure ? <Flexbox>{t('llm.OpenAI.models.notSupport')}</Flexbox> : <ModelList />,

package/src/app/settings/llm/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 LLM from './LLM';
+
+const LLMSetting = memo(() => {
+  useSwitchSideBarOnInit(SettingsTabs.LLM);
+  return (
+    <Layout>
+      <LLM />
+    </Layout>
+  );
+});
+
+export default LLMSetting;

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

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

package/src/app/settings/mobile/ExtraList.tsx

@@ -0,0 +1,61 @@
+import { Upload } from 'antd';
+import { useResponsive } from 'antd-style';
+import { Feather, FileClock, HardDriveDownload, HardDriveUpload, Heart } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ABOUT, CHANGELOG, FEEDBACK } from '@/const/url';
+import { useExportConfig } from '@/hooks/useExportConfig';
+import { useImportConfig } from '@/hooks/useImportConfig';
+import { useGlobalStore } from '@/store/global';
+
+import Item from '../features/SideBar/Item';
+
+const ExtraList = memo(() => {
+  const { t } = useTranslation('common');
+  const { exportAll } = useExportConfig();
+  const { importConfig } = useImportConfig();
+  const tab = useGlobalStore((s) => s.settingsTab);
+  const { mobile } = useResponsive();
+  const items = [
+    {
+      icon: HardDriveDownload,
+      label: t('export'),
+      onClick: exportAll,
+      value: 'export',
+    },
+    {
+      icon: Feather,
+      label: t('feedback'),
+      onClick: () => window.open(FEEDBACK, '__blank'),
+      value: 'feedback',
+    },
+    {
+      icon: FileClock,
+      label: t('changelog'),
+      onClick: () => window.open(CHANGELOG, '__blank'),
+      value: 'changelog',
+    },
+    {
+      icon: Heart,
+      label: t('about'),
+      onClick: () => window.open(ABOUT, '__blank'),
+      value: 'about',
+    },
+  ];
+
+  return (
+    <>
+      <Upload maxCount={1} onChange={importConfig} showUploadList={false}>
+        <Item icon={HardDriveUpload} label={t('import')} style={{ width: '100vw' }} />
+      </Upload>
+      {items.map(({ value, icon, label, onClick }) => (
+        <div key={value} onClick={onClick}>
+          <Item active={mobile ? false : tab === value} icon={icon} label={label} />
+        </div>
+      ))}
+    </>
+  );
+});
+
+export default ExtraList;