@lobehub/chat 0.81.0 → 0.82.2

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;

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

@@ -0,0 +1,43 @@
+'use client';
+
+import { Divider } from 'antd';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+
+import AgentCardBanner from '@/app/market/features/AgentCard/AgentCardBanner';
+import Header from '@/app/market/features/Header';
+import AvatarWithUpload from '@/features/AvatarWithUpload';
+import AppMobileLayout from '@/layout/AppMobileLayout';
+import { useGlobalStore, useSwitchSideBarOnInit } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
+import { AVATAR } from '@/store/session/slices/chat/actions/share';
+
+import List from '../features/SideBar/List';
+import ExtraList from './ExtraList';
+
+const Setting = memo(() => {
+  const avatar = useGlobalStore((s) => s.settings.avatar);
+  useSwitchSideBarOnInit(SidebarTabKey.Setting);
+  return (
+    <AppMobileLayout navBar={<Header />} showTabBar>
+      <AgentCardBanner
+        mask
+        meta={{ avatar: avatar || AVATAR }}
+        size={10}
+        style={{ height: 180, marginBottom: 0 }}
+      >
+        <Center style={{ position: 'absolute', zIndex: 2 }}>
+          <AvatarWithUpload size={100} />
+        </Center>
+      </AgentCardBanner>
+      <div style={{ width: '100%' }}>
+        <Divider style={{ margin: '0 0 8px' }} />
+        <List />
+        <Divider style={{ margin: '8px 0' }} />
+        <ExtraList />
+      </div>
+    </AppMobileLayout>
+  );
+});
+
+export default Setting;

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

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

package/src/app/settings/page.tsx

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

package/src/components/MobilePadding/index.tsx

@@ -0,0 +1,32 @@
+import { useResponsive } from 'antd-style';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+interface MobilePaddingProps {
+  bottom?: number;
+  children: ReactNode;
+  gap?: number;
+  left?: number;
+  right?: number;
+  top?: number;
+}
+
+const MobilePadding = memo<MobilePaddingProps>(
+  ({ children, top = 16, right = 16, left = 16, bottom = 16, gap }) => {
+    const { mobile } = useResponsive();
+
+    if (mobile)
+      return (
+        <Flexbox
+          gap={gap}
+          style={{ paddingBottom: bottom, paddingLeft: left, paddingRight: right, paddingTop: top }}
+        >
+          {children}
+        </Flexbox>
+      );
+
+    return children;
+  },
+);
+
+export default MobilePadding;

package/src/const/layoutTokens.ts

@@ -13,3 +13,4 @@ export const FORM_STYLE: FormProps = {
   itemMinWidth: 'max(30%,240px)',
   style: { maxWidth: MAX_WIDTH, width: '100%' },
 };
+export const MOBILE_HEADER_ICON_SIZE = { blockSize: 36, fontSize: 22 };

package/src/features/AgentSetting/AgentMeta/index.tsx

@@ -78,7 +78,6 @@ const AgentMeta = memo(() => {
               onChange={(backgroundColor) => updateMeta({ backgroundColor })}
             />
           ),
-          divider: false,
           label: t('settingAgent.backgroundColor.title'),
           minWidth: undefined,
         },