@lobehub/chat 0.82.1 → 0.82.3

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,
         },

package/src/features/AgentSetting/AgentPlugin/MarketSettingModal.tsx

@@ -1,9 +1,10 @@
-import { Input, Modal, Tooltip } from '@lobehub/ui';
-import { Form } from 'antd';
+import { Form, Input, Modal } from '@lobehub/ui';
+import { Alert } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import MobilePadding from '@/components/MobilePadding';
 import { PLUGINS_INDEX_URL } from '@/const/url';
 
 interface MarketSettingModalProps {
@@ -15,20 +16,32 @@ const MarketSettingModal = memo<MarketSettingModalProps>(({ open, onOpenChange }
   const { t } = useTranslation('plugin');
 
   return (
-    <Modal
-      footer={null}
-      onCancel={() => onOpenChange(false)}
-      open={open}
-      title={t('settings.title')}
-    >
-      <Flexbox gap={12}>
-        <Form layout={'vertical'}>
-          <Form.Item extra={t('settings.modalDesc')} label={t('settings.indexUrl.title')}>
-            <Tooltip title={t('settings.indexUrl.tooltip')}>
-              <Input defaultValue={PLUGINS_INDEX_URL} disabled placeholder={'https://xxxxx.com'} />
-            </Tooltip>
-          </Form.Item>
-        </Form>
+    <Modal footer={null} onCancel={() => onOpenChange(false)} open={open} title={t('setting')}>
+      <Flexbox gap={16}>
+        <MobilePadding bottom={0} gap={16}>
+          <Alert message={t('settings.indexUrl.tooltip')} showIcon type={'warning'} />
+        </MobilePadding>
+        <Form
+          items={[
+            {
+              children: [
+                {
+                  children: (
+                    <Input
+                      defaultValue={PLUGINS_INDEX_URL}
+                      disabled
+                      placeholder={PLUGINS_INDEX_URL}
+                      style={{ width: '100%' }}
+                    />
+                  ),
+                  desc: t('settings.modalDesc'),
+                  label: t('settings.indexUrl.title'),
+                },
+              ],
+              title: t('settings.title'),
+            },
+          ]}
+        />
       </Flexbox>
     </Modal>
   );

package/src/features/MobileTabBar/index.tsx

@@ -1,12 +1,13 @@
 import { Icon, MobileTabBar, type MobileTabBarProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { Bot, MessageSquare } from 'lucide-react';
+import { Bot, MessageSquare, User } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { rgba } from 'polished';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 
 const useStyles = createStyles(({ css, token }) => ({
   active: css`
@@ -27,20 +28,31 @@ export default memo<{ className?: string }>(({ className }) => {
         icon: (active) => (
           <Icon className={active ? styles.active : undefined} icon={MessageSquare} />
         ),
-        key: 'chat',
+        key: SidebarTabKey.Chat,
         onClick: () => {
+          setTab(SidebarTabKey.Chat);
           router.push('/chat');
         },
         title: t('tab.chat'),
       },
       {
         icon: (active) => <Icon className={active ? styles.active : undefined} icon={Bot} />,
-        key: 'market',
+        key: SidebarTabKey.Market,
         onClick: () => {
+          setTab(SidebarTabKey.Market);
           router.push('/market');
         },
         title: t('tab.market'),
       },
+      {
+        icon: (active) => <Icon className={active ? styles.active : undefined} icon={User} />,
+        key: SidebarTabKey.Setting,
+        onClick: () => {
+          setTab(SidebarTabKey.Setting);
+          router.push('/settings/mobile');
+        },
+        title: t('tab.setting'),
+      },
     ],
     [t],
   );

package/src/features/PluginDevModal/PluginPreview.tsx

@@ -1,5 +1,5 @@
 import { Avatar, Form } from '@lobehub/ui';
-import { Form as AForm, Card, FormInstance, Switch, Tag } from 'antd';
+import { Form as AForm, FormInstance, Switch, Tag } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -28,9 +28,16 @@ const PluginPreview = memo<{ form: FormInstance }>(({ form }) => {
   };
 
   return (
-    <Card size={'small'} title={t('dev.preview.card')}>
-      <Form.Item {...items} colon={false} style={{ marginBottom: 0 }} />
-    </Card>
+    <Form
+      colon={false}
+      items={[
+        {
+          children: [items],
+          title: t('dev.preview.card'),
+        },
+      ]}
+      style={{ marginBottom: 0 }}
+    />
   );
 });
 

package/src/features/PluginDevModal/index.tsx

@@ -1,9 +1,11 @@
 import { Modal } from '@lobehub/ui';
-import { App, Button, Form, Popconfirm } from 'antd';
+import { Alert, App, Button, Form, Popconfirm } from 'antd';
+import { useResponsive } from 'antd-style';
 import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import MobilePadding from '@/components/MobilePadding';
 import { CustomPlugin } from '@/types/plugin';
 
 import ManifestForm from './ManifestForm';
@@ -25,7 +27,7 @@ const DevModal = memo<DevModalProps>(
     const isEditMode = mode === 'edit';
     const { t } = useTranslation('plugin');
     const { message } = App.useApp();
-
+    const { mobile } = useResponsive();
     const [submitting, setSubmitting] = useState(false);
     const [form] = Form.useForm();
     useEffect(() => {
@@ -98,14 +100,16 @@ const DevModal = memo<DevModalProps>(
           open={open}
           title={t('dev.title')}
         >
-          <Flexbox gap={12}>
-            {t('dev.modalDesc')}
-            {/*<Tabs*/}
-            {/*  items={[*/}
-            {/*    { children: <MetaForm />, key: 'meta', label: t('dev.tabs.meta') },*/}
-            {/*    { children: <ManifestForm />, key: 'manifest', label: t('dev.tabs.manifest') },*/}
-            {/*  ]}*/}
-            {/*/>*/}
+          <Flexbox gap={mobile ? 0 : 16}>
+            <MobilePadding bottom={0} gap={16}>
+              <Alert message={t('dev.modalDesc')} showIcon type={'info'} />
+              {/*<Tabs*/}
+              {/*  items={[*/}
+              {/*    { children: <MetaForm />, key: 'meta', label: t('dev.tabs.meta') },*/}
+              {/*    { children: <ManifestForm />, key: 'manifest', label: t('dev.tabs.manifest') },*/}
+              {/*  ]}*/}
+              {/*/>*/}
+            </MobilePadding>
             <PluginPreview form={form} />
             <ManifestForm form={form} />
             <MetaForm form={form} mode={mode} />

package/src/features/SideBar/BottomActions.tsx

@@ -18,6 +18,7 @@ import { ABOUT, CHANGELOG, DISCORD, FEEDBACK, GITHUB } from '@/const/url';
 import { useExportConfig } from '@/hooks/useExportConfig';
 import { useImportConfig } from '@/hooks/useImportConfig';
 import { GlobalStore } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 
 export interface BottomActionProps {
   setTab: GlobalStore['switchSideBar'];
@@ -27,7 +28,6 @@ export interface BottomActionProps {
 const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
   const router = useRouter();
   const { t } = useTranslation('common');
-
   const { exportSessions, exportSettings, exportAll, exportAgents } = useExportConfig();
   const { importConfig } = useImportConfig();
 
@@ -101,7 +101,7 @@ const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
         key: 'setting',
         label: t('setting'),
         onClick: () => {
-          setTab('settings');
+          setTab(SidebarTabKey.Setting);
           router.push('/settings');
         },
       },
@@ -124,7 +124,7 @@ const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
         title={'Github'}
       />
       <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-        <ActionIcon active={tab === 'settings'} icon={Settings2} />
+        <ActionIcon active={tab === SidebarTabKey.Setting} icon={Settings2} />
       </Dropdown>
     </>
   );

package/src/features/SideBar/TopActions.tsx

@@ -5,6 +5,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { GlobalStore } from '@/store/global';
+import { SidebarTabKey } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 
 export interface TopActionProps {
@@ -20,25 +21,25 @@ const TopActions = memo<TopActionProps>(({ tab, setTab }) => {
   return (
     <>
       <ActionIcon
-        active={tab === 'chat'}
+        active={tab === SidebarTabKey.Chat}
         icon={MessageSquare}
         onClick={() => {
           // 如果已经在 chat 路径下了，那么就不用再跳转了
           if (pathname?.startsWith('/chat')) return;
           switchBackToChat();
-          setTab('chat');
+          setTab(SidebarTabKey.Chat);
         }}
         placement={'right'}
         size="large"
         title={t('tab.chat')}
       />
       <ActionIcon
-        active={tab === 'market'}
+        active={tab === SidebarTabKey.Market}
         icon={Bot}
         onClick={() => {
           if (pathname?.startsWith('/market')) return;
           router.push('/market');
-          setTab('market');
+          setTab(SidebarTabKey.Market);
         }}
         placement={'right'}
         size="large"

package/src/locales/default/common.ts

@@ -38,7 +38,7 @@ export default {
   import: '导入配置',
   inbox: {
     defaultMessage:
-      '你好，我是你的智能助手，你可以问我任何问题，我会尽力回答你。如果需要获得更加专业或定制的助手，可以点击<kbd>+</kbd>创建自定义助手',
+      '你好，我是你的智能助手，你可以问我任何问题，我会尽力回答你。如果需要获得更加专业或定制的助手，可以点击`+`创建自定义助手',
     desc: '开启大脑集群，激发思维火花。你的智能助理，在这里与你交流一切',
     title: '随便聊聊',
   },

package/src/locales/default/error.ts

@@ -39,6 +39,7 @@ export default {
       description: '输入你的 OpenAI API Key 即可绕过密码验证。应用不会记录你的 API Key',
       title: '使用自定义 API Key',
     },
+    closeMessage: '关闭提示',
     confirm: '确认并重试',
     password: {
       description: '管理员已开启应用加密，输入应用密码后即可解锁应用。密码只需填写一次',

package/src/locales/default/plugin.ts

@@ -96,10 +96,11 @@ export default {
   plugins: {
     unknown: '插件检测中...',
   },
+  setting: '插件设置',
   settings: {
     indexUrl: {
       title: '市场索引',
-      tooltip: '暂不支持编辑',
+      tooltip: '暂不支持在线编辑，请通过部署时环境变量进行设置',
     },
     modalDesc: '配置插件市场的地址后，可以使用自定义的插件市场',
     title: '设置插件市场',

package/src/store/global/hooks/useSwitchSettingsOnInit.ts

@@ -0,0 +1,9 @@
+import { SettingsTabs } from '../initialState';
+import { useGlobalStore } from '../store';
+
+/**
+ * 切换设置侧边栏选项
+ */
+export const useSwitchSideBarOnInit = (key: SettingsTabs) => {
+  useGlobalStore.getState().switchSettingTabs(key);
+};