@lobehub/chat 0.27.4 → 0.29.0

package/CHANGELOG.md

@@ -2,6 +2,67 @@
 
 # Changelog
 
+## [Version 0.29.0](https://github.com/lobehub/lobe-chat/compare/v0.28.0...v0.29.0)
+
+<sup>Released on **2023-07-30**</sup>
+
+#### ✨ Features
+
+- **misc**: 实现单个会话和角色的导出功能, 实现清空所有会话消息.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: 实现单个会话和角色的导出功能 ([d15a481](https://github.com/lobehub/lobe-chat/commit/d15a481))
+- **misc**: 实现清空所有会话消息 ([64c5125](https://github.com/lobehub/lobe-chat/commit/64c5125))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.28.0](https://github.com/lobehub/lobe-chat/compare/v0.27.4...v0.28.0)
+
+<sup>Released on **2023-07-30**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: 重构 settings 相关类型.
+
+#### ✨ Features
+
+- **misc**: 优化 SideBar 实现，激活态指示更加明确, 实现 session 导入功能, 实现配置导出功能.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: 重构 settings 相关类型 ([6b7c0a0](https://github.com/lobehub/lobe-chat/commit/6b7c0a0))
+
+#### What's improved
+
+- **misc**: 优化 SideBar 实现，激活态指示更加明确 ([8a467df](https://github.com/lobehub/lobe-chat/commit/8a467df))
+- **misc**: 实现 session 导入功能 ([5650167](https://github.com/lobehub/lobe-chat/commit/5650167))
+- **misc**: 实现配置导出功能 ([c1f73fe](https://github.com/lobehub/lobe-chat/commit/c1f73fe))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.27.4](https://github.com/lobehub/lobe-chat/compare/v0.27.3...v0.27.4)
 
 <sup>Released on **2023-07-29**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.27.4",
+  "version": "0.29.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/features/SideBar/BottomAction.tsx

@@ -0,0 +1,112 @@
+import { ActionIcon, Icon } from '@lobehub/ui';
+import { Dropdown, MenuProps, Upload } from 'antd';
+import {
+  Feather,
+  FileClock,
+  FolderInput,
+  FolderOutput,
+  Github,
+  Heart,
+  Settings,
+} from 'lucide-react';
+import Router from 'next/router';
+import { ReactNode, memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useExportConfig } from '@/hooks/useExportConfig';
+import { useImportConfig } from '@/hooks/useImportConfig';
+
+import pkg from '../../../package.json';
+
+const BottomAction = memo<{ children: ReactNode }>(({ children }) => {
+  const { t } = useTranslation('common');
+
+  const { exportSessions, exportSettings, exportAll, exportAgents } = useExportConfig();
+  const { importConfig } = useImportConfig();
+
+  const items: MenuProps['items'] = useMemo(
+    () => [
+      {
+        icon: <Icon icon={FolderInput} />,
+        key: 'import',
+        label: (
+          <Upload maxCount={1} onChange={importConfig} showUploadList={false}>
+            {t('import')}
+          </Upload>
+        ),
+      },
+      {
+        children: [
+          {
+            key: 'allAgent',
+            label: <div>{t('exportType.allAgent')}</div>,
+            onClick: exportAgents,
+          },
+          {
+            key: 'allAgentWithMessage',
+            label: <div>{t('exportType.allAgentWithMessage')}</div>,
+            onClick: exportSessions,
+          },
+          {
+            key: 'globalSetting',
+            label: <div>{t('exportType.globalSetting')}</div>,
+            onClick: exportSettings,
+          },
+          {
+            type: 'divider',
+          },
+          {
+            key: 'all',
+            label: <div>{t('exportType.all')}</div>,
+            onClick: exportAll,
+          },
+        ],
+        icon: <Icon icon={FolderOutput} />,
+        key: 'export',
+        label: t('export'),
+      },
+      {
+        type: 'divider',
+      },
+      {
+        icon: <Icon icon={Feather} />,
+        key: 'feedback',
+        label: t('feedback'),
+        onClick: () => window.open(pkg.bugs.url, '__blank'),
+      },
+      {
+        icon: <Icon icon={FileClock} />,
+        key: 'changelog',
+        label: t('changelog'),
+        onClick: () => window.open(`${pkg.homepage}/blob/master/CHANGELOG.md`, '__blank'),
+      },
+      {
+        icon: <Icon icon={Heart} />,
+        key: 'about',
+        label: t('about'),
+        onClick: () => window.open(pkg.homepage, '__blank'),
+      },
+      {
+        type: 'divider',
+      },
+      {
+        icon: <Icon icon={Settings} />,
+        key: 'setting',
+        label: t('setting'),
+        onClick: () => Router.push('/setting'),
+      },
+    ],
+    [],
+  );
+
+  return (
+    <>
+      <ActionIcon icon={Github} onClick={() => window.open(pkg.homepage, '__blank')} />
+      <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
+        {children}
+      </Dropdown>
+    </>
+  );
+});
+
+export default BottomAction;

package/src/features/SideBar/index.tsx

@@ -1,106 +1,24 @@
-import { ActionIcon, Icon, SideNav } from '@lobehub/ui';
-import { Dropdown, type MenuProps } from 'antd';
-import {
-  Feather,
-  FileClock,
-  FolderInput,
-  FolderOutput,
-  Github,
-  Heart,
-  MessageSquare,
-  Settings,
-  Settings2,
-  Sticker,
-} from 'lucide-react';
+import { ActionIcon, SideNav } from '@lobehub/ui';
+import { MessageSquare, Settings2, Sticker } from 'lucide-react';
 import Router from 'next/router';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
 import { shallow } from 'zustand/shallow';
 
-import pkg from '@/../package.json';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { useSettings } from '@/store/settings';
 
+import BottomAction from './BottomAction';
+
 export default memo(() => {
   const [tab, setTab] = useSettings((s) => [s.sidebarKey, s.switchSideBar], shallow);
-  const { t } = useTranslation('common');
-  const items: MenuProps['items'] = useMemo(
-    () => [
-      {
-        icon: <Icon icon={FolderInput} />,
-        key: 'import',
-        label: <div>{t('import')}</div>,
-      },
-      {
-        children: [
-          {
-            key: 'allAgent',
-            label: <div>{t('exportType.allAgent')}</div>,
-          },
-          {
-            key: 'allAgentWithMessage',
-            label: <div>{t('exportType.allAgentWithMessage')}</div>,
-          },
-          {
-            key: 'globalSetting',
-            label: <div>{t('exportType.globalSetting')}</div>,
-          },
-          {
-            type: 'divider',
-          },
-          {
-            key: 'all',
-            label: <div>{t('exportType.all')}</div>,
-          },
-        ],
-        icon: <Icon icon={FolderOutput} />,
-        key: 'export',
-        label: t('export'),
-      },
-      {
-        type: 'divider',
-      },
-      {
-        icon: <Icon icon={Feather} />,
-        key: 'feedback',
-        label: t('feedback'),
-        onClick: () => window.open(pkg.bugs.url, '__blank'),
-      },
-      {
-        icon: <Icon icon={FileClock} />,
-        key: 'changelog',
-        label: t('changelog'),
-        onClick: () => window.open(`${pkg.homepage}/blob/master/CHANGELOG.md`, '__blank'),
-      },
-      {
-        icon: <Icon icon={Heart} />,
-        key: 'about',
-        label: t('about'),
-        onClick: () => window.open(pkg.homepage, '__blank'),
-      },
-      {
-        type: 'divider',
-      },
-      {
-        icon: <Icon icon={Settings} />,
-        key: 'setting',
-        label: t('setting'),
-        onClick: () => Router.push('/setting'),
-      },
-    ],
-    [],
-  );
 
   return (
     <SideNav
       avatar={<AvatarWithUpload />}
       bottomActions={
-        <>
-          <ActionIcon icon={Github} onClick={() => window.open(pkg.homepage, '__blank')} />
-          <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
-            <ActionIcon icon={Settings2} />
-          </Dropdown>
-        </>
+        <BottomAction>
+          <ActionIcon active={tab === 'setting'} icon={Settings2} />
+        </BottomAction>
       }
       style={{ height: '100vh' }}
       topActions={
@@ -108,7 +26,12 @@ export default memo(() => {
           <ActionIcon
             active={tab === 'chat'}
             icon={MessageSquare}
-            onClick={() => setTab('chat')}
+            onClick={() => {
+              // 如果已经在 chat 路径下了，那么就不用再跳转了
+              if (Router.asPath.startsWith('/chat')) return;
+
+              Router.push('/');
+            }}
             size="large"
           />
           <ActionIcon

package/src/helpers/export.ts

@@ -0,0 +1,62 @@
+import { sessionSelectors, useSessionStore } from '@/store/session';
+import { settingsSelectors, useSettings } from '@/store/settings';
+import { createConfigFile, exportConfigFile } from '@/utils/config';
+
+const getAgents = () => sessionSelectors.exportAgents(useSessionStore.getState());
+const getAgent = (id: string) => sessionSelectors.getExportAgent(id)(useSessionStore.getState());
+
+const getSessions = () => sessionSelectors.exportSessions(useSessionStore.getState());
+const getSession = (id: string) => sessionSelectors.getSessionById(id)(useSessionStore.getState());
+
+const getSettings = () => settingsSelectors.exportSettings(useSettings.getState());
+
+export const exportAgents = () => {
+  const sessions = getAgents();
+
+  const config = createConfigFile('agents', { sessions });
+
+  exportConfigFile(config, 'agents');
+};
+
+export const exportSingleAgent = (id: string) => {
+  const agent = getAgent(id);
+  if (!agent) return;
+
+  const config = createConfigFile('agents', { sessions: { [id]: agent } });
+
+  exportConfigFile(config, agent.meta?.title || 'agent');
+};
+
+export const exportSessions = () => {
+  const sessions = getSessions();
+  const config = createConfigFile('sessions', { sessions });
+
+  exportConfigFile(config, 'sessions');
+};
+
+export const exportSingleSession = (id: string) => {
+  const session = getSession(id);
+  if (!session) return;
+  const sessions = { [id]: session };
+
+  const config = createConfigFile('sessions', { sessions });
+
+  exportConfigFile(config, `${session.meta?.title}-session`);
+};
+
+export const exportSettings = () => {
+  const settings = getSettings();
+
+  const config = createConfigFile('settings', { settings });
+
+  exportConfigFile(config, 'settings');
+};
+
+export const exportAll = () => {
+  const sessions = getSessions();
+  const settings = getSettings();
+
+  const config = createConfigFile('all', { sessions, settings });
+
+  exportConfigFile(config, 'config');
+};

package/src/hooks/useExportConfig.ts

@@ -0,0 +1,6 @@
+import { useMemo } from 'react';
+
+import { exportAgents, exportAll, exportSessions, exportSettings } from '@/helpers/export';
+
+export const useExportConfig = () =>
+  useMemo(() => ({ exportAgents, exportAll, exportSessions, exportSettings }), []);

package/src/hooks/useImportConfig.ts

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+
+import { useSessionStore } from '@/store/session';
+import { useSettings } from '@/store/settings';
+import { importConfigFile } from '@/utils/config';
+
+export const useImportConfig = () => {
+  const importSessions = useSessionStore((s) => s.importSessions);
+  const importSettings = useSettings((s) => s.importSettings);
+
+  const importConfig = (info: any) => {
+    importConfigFile(info, (config) => {
+      switch (config.exportType) {
+        case 'settings': {
+          importSettings(config.state.settings);
+          break;
+        }
+
+        case 'sessions':
+        case 'agents': {
+          importSessions(config.state.sessions);
+          break;
+        }
+
+        case 'all': {
+          importSessions(config.state.sessions);
+          importSettings(config.state.settings);
+
+          break;
+        }
+      }
+    });
+  };
+
+  return useMemo(() => ({ importConfig }), []);
+};

package/src/locales/default/setting.ts

@@ -2,9 +2,10 @@ export default {
   danger: {
     clear: {
       action: '立即清除',
-      confirm: '确认清除所有聊天、设置数据？',
-      desc: '清除所有聊天、设置数据',
-      title: '清除所有数据',
+      confirm: '确认清除所有聊天数据？',
+      desc: '清除所有会话数据',
+      success: '已清除所有会话消息',
+      title: '清除所有会话消息',
     },
     reset: {
       action: '立即重置',

package/src/migrations/index.ts

@@ -1,4 +1,4 @@
-import { ConfigState } from '@/types/exportConfig';
+import { ConfigStateAll } from '@/types/exportConfig';
 import { VersionController } from '@/utils/VersionController';
 
 // 当前最新的版本号
@@ -7,7 +7,7 @@ export const CURRENT_CONFIG_VERSION = 1;
 // 历史记录版本升级模块
 export const ConfigMigrations = [];
 
-export const Migration = new VersionController<ConfigState>(
+export const Migration = new VersionController<ConfigStateAll>(
   ConfigMigrations,
   CURRENT_CONFIG_VERSION,
 );

package/src/pages/chat/SessionList/List/SessionItem.tsx

@@ -1,12 +1,13 @@
 import { ActionIcon, Avatar, Icon, List } from '@lobehub/ui';
 import { useHover } from 'ahooks';
-import { Dropdown, type MenuProps, Popconfirm, Tag } from 'antd';
+import { App, Dropdown, type MenuProps, Tag } from 'antd';
 import { FolderOutput, MoreVertical, Pin, PinOff, Trash } from 'lucide-react';
-import { FC, memo, useMemo, useRef, useState } from 'react';
+import { FC, memo, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
 import { agentSelectors, chatSelectors, sessionSelectors, useSessionStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
 
@@ -24,10 +25,10 @@ interface SessionItemProps {
 const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading, pin }) => {
   const ref = useRef(null);
   const isHovering = useHover(ref);
-  const [popOpen, setPopOpen] = useState(false);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
+
   const { t } = useTranslation('common');
-  const isHighlight = isHovering || dropdownOpen;
+  const isHighlight = isHovering;
+
   const { styles, theme, cx } = useStyles(isHighlight);
   const [defaultModel] = useSettings((s) => [s.settings.model], shallow);
 
@@ -58,23 +59,31 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading, pi
     ];
   }, shallow);
 
-  // TODO: 动作绑定
+  const { modal } = App.useApp();
   const items: MenuProps['items'] = useMemo(
     () => [
       {
         icon: <Icon icon={pin ? PinOff : Pin} />,
         key: 'pin',
         label: t(pin ? 'pinOff' : 'pin'),
+        // TODO: 动作绑定
+        onClick: () => {},
       },
       {
         children: [
           {
             key: 'agent',
             label: <div>{t('exportType.agent')}</div>,
+            onClick: () => {
+              exportSingleAgent(id);
+            },
           },
           {
             key: 'agentWithMessage',
             label: <div>{t('exportType.agentWithMessage')}</div>,
+            onClick: () => {
+              exportSingleSession(id);
+            },
           },
         ],
         icon: <Icon icon={FolderOutput} />,
@@ -82,10 +91,24 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading, pi
         label: t('export'),
       },
       {
+        danger: true,
         icon: <Icon icon={Trash} />,
         key: 'delete',
         label: t('delete'),
-        onClick: () => setPopOpen(true),
+        onClick: ({ domEvent }) => {
+          domEvent.stopPropagation();
+
+          modal.confirm({
+            centered: true,
+            okButtonProps: { danger: true },
+            okText: t('ok'),
+            onOk: () => {
+              removeSession(id);
+            },
+            rootClassName: styles.modalRoot,
+            title: t('confirmRemoveSessionItemAlert'),
+          });
+        },
       },
     ],
     [id],
@@ -123,15 +146,6 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading, pi
                       {model}
                     </Tag>
                   )}
-                  {/*{showChatLength && (*/}
-                  {/*  <Tag*/}
-                  {/*    bordered={false}*/}
-                  {/*    style={{ color: theme.colorTextSecondary, display: 'flex', gap: 4 }}*/}
-                  {/*  >*/}
-                  {/*    <Icon icon={LucideMessageCircle} />*/}
-                  {/*    {chatLength}*/}
-                  {/*  </Tag>*/}
-                  {/*)}*/}
                 </Flexbox>
               )}
             </Flexbox>
@@ -140,42 +154,20 @@ const SessionItem: FC<SessionItemProps> = memo(({ id, active = true, loading, pi
           style={{ color: theme.colorText }}
           title={title}
         />
-        <Popconfirm
-          arrow={false}
-          cancelText={t('cancel')}
-          okButtonProps={{ danger: true }}
-          okText={t('ok')}
-          onCancel={() => setPopOpen(false)}
-          onConfirm={(e) => {
-            e?.stopPropagation();
-            removeSession(id);
-            setPopOpen(false);
-          }}
-          open={popOpen}
-          overlayStyle={{ width: 280 }}
-          title={t('confirmRemoveSessionItemAlert')}
-        >
-          <Dropdown
-            arrow={false}
-            menu={{ items }}
-            onOpenChange={setDropdownOpen}
-            open={dropdownOpen}
-            trigger={['click']}
-          >
-            <ActionIcon
-              className="session-remove"
-              icon={MoreVertical}
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              }}
-              size={{
-                blockSize: 28,
-                fontSize: 16,
-              }}
-            />
-          </Dropdown>
-        </Popconfirm>
+        <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
+          <ActionIcon
+            className="session-remove"
+            icon={MoreVertical}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            size={{
+              blockSize: 28,
+              fontSize: 16,
+            }}
+          />
+        </Dropdown>
       </Flexbox>
     </div>
   );

package/src/pages/chat/SessionList/List/style.ts

@@ -52,6 +52,9 @@ export const useStyles = createStyles(({ css, token }, isHighlight: boolean) =>
     hover: css`
       background-color: ${token.colorFillSecondary};
     `,
+    modalRoot: css`
+      z-index: 2000;
+    `,
     pin: css`
       background-color: ${token.colorFillTertiary};
     `,

package/src/pages/chat/[id]/edit/Header.tsx

@@ -6,19 +6,32 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import HeaderTitle from '@/components/HeaderTitle';
+import { exportSingleAgent, exportSingleSession } from '@/helpers/export';
+import { useSessionStore } from '@/store/session';
 
 const Header = memo(() => {
   const { t } = useTranslation('setting');
+  const id = useSessionStore((s) => s.activeId);
 
-  const items: MenuProps['items'] = useMemo(
+  const items = useMemo<MenuProps['items']>(
     () => [
       {
         key: 'agent',
         label: <div>{t('exportType.agent', { ns: 'common' })}</div>,
+        onClick: () => {
+          if (!id) return;
+
+          exportSingleAgent(id);
+        },
       },
       {
         key: 'agentWithMessage',
         label: <div>{t('exportType.agentWithMessage', { ns: 'common' })}</div>,
+        onClick: () => {
+          if (!id) return;
+
+          exportSingleSession(id);
+        },
       },
     ],
     [],

package/src/pages/setting/SettingForm.tsx

@@ -1,5 +1,5 @@
 import { Form, type ItemGroup, ThemeSwitch } from '@lobehub/ui';
-import { Form as AntForm, Button, Input, Popconfirm, Select, Switch } from 'antd';
+import { Form as AntForm, App, Button, Input, Select, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { debounce } from 'lodash-es';
 import { AppWindow, BrainCog, MessagesSquare, Palette, Webhook } from 'lucide-react';
@@ -11,10 +11,11 @@ import { shallow } from 'zustand/shallow';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { options } from '@/locales/options';
+import { useSessionStore } from '@/store/session';
 import { settingsSelectors, useSettings } from '@/store/settings';
 import { DEFAULT_SETTINGS } from '@/store/settings/initialState';
-import { ConfigKeys } from '@/types/exportConfig';
 import { LanguageModel } from '@/types/llm';
+import { ConfigKeys } from '@/types/settings';
 
 import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
 
@@ -27,6 +28,7 @@ type SettingItemGroup = ItemGroup & {
 const SettingForm = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = AntForm.useForm();
+  const clearSessions = useSessionStore((s) => s.clearSessions);
   const settings = useSettings(settingsSelectors.currentSettings, isEqual);
   const { setThemeMode, setSettings, resetSettings } = useSettings(
     (s) => ({
@@ -37,14 +39,35 @@ const SettingForm = memo(() => {
     shallow,
   );
 
+  const { message, modal } = App.useApp();
   const handleReset = useCallback(() => {
-    resetSettings();
-    form.setFieldsValue(DEFAULT_SETTINGS);
+    modal.confirm({
+      cancelText: t('cancel', { ns: 'common' }),
+      centered: true,
+      okButtonProps: { danger: true },
+      okText: t('ok', { ns: 'common' }),
+      onOk: () => {
+        resetSettings();
+        form.setFieldsValue(DEFAULT_SETTINGS);
+      },
+      title: t('danger.reset.confirm'),
+    });
   }, []);
 
   const handleClear = useCallback(() => {
-    handleReset();
-    // TODO: 删除聊天记录
+    modal.confirm({
+      cancelText: t('cancel', { ns: 'common' }),
+      centered: true,
+      okButtonProps: {
+        danger: true,
+      },
+      okText: t('ok', { ns: 'common' }),
+      onOk: () => {
+        clearSessions();
+        message.success(t('danger.clear.success'));
+      },
+      title: t('danger.clear.confirm'),
+    });
   }, []);
 
   const theme: SettingItemGroup = useMemo(
@@ -240,18 +263,9 @@ const SettingForm = memo(() => {
         },
         {
           children: (
-            <Popconfirm
-              arrow={false}
-              cancelText={t('cancel', { ns: 'common' })}
-              okButtonProps={{ danger: true }}
-              okText={t('ok', { ns: 'common' })}
-              onConfirm={handleReset}
-              title={t('danger.reset.confirm')}
-            >
-              <Button danger type="primary">
-                {t('danger.reset.action')}
-              </Button>
-            </Popconfirm>
+            <Button danger onClick={handleReset} type="primary">
+              {t('danger.reset.action')}
+            </Button>
           ),
           desc: t('danger.reset.title'),
           label: t('danger.reset.desc'),
@@ -259,18 +273,9 @@ const SettingForm = memo(() => {
         },
         {
           children: (
-            <Popconfirm
-              arrow={false}
-              cancelText={t('cancel', { ns: 'common' })}
-              okButtonProps={{ danger: true }}
-              okText={t('ok', { ns: 'common' })}
-              onConfirm={handleClear}
-              title={t('danger.clear.confirm')}
-            >
-              <Button danger type="primary">
-                {t('danger.clear.action')}
-              </Button>
-            </Popconfirm>
+            <Button danger onClick={handleClear} type="primary">
+              {t('danger.clear.action')}
+            </Button>
           ),
           desc: t('danger.clear.title'),
           label: t('danger.clear.desc'),

package/src/pages/setting/layout.tsx

@@ -5,6 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import SideBar from '@/features/SideBar';
 import { createI18nNext } from '@/locales/create';
+import { useSettings } from '@/store/settings';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
 const initI18n = createI18nNext('setting');
@@ -17,6 +18,13 @@ const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
     initI18n.finally();
   }, []);
 
+  useEffect(() => {
+    const hasRehydrated = useSettings.persist.hasHydrated();
+    if (hasRehydrated) {
+      useSettings.setState({ sidebarKey: 'setting' });
+    }
+  }, []);
+
   return (
     <>
       <Head>

package/src/store/session/slices/session/action.ts

@@ -1,46 +1,53 @@
+import { produce } from 'immer';
 import { merge } from 'lodash-es';
 import Router from 'next/router';
 import { StateCreator } from 'zustand/vanilla';
 
 import { SessionStore, initLobeSession } from '@/store/session';
-import { LobeAgentSession } from '@/types/session';
+import { LobeAgentSession, LobeSessions } from '@/types/session';
 import { uuid } from '@/utils/uuid';
 
 import { SessionDispatch, sessionsReducer } from './reducers/session';
 
 export interface SessionAction {
   activeSession: (sessionId: string) => void;
+  clearSessions: () => void;
+
   /**
    * @title 添加会话
    * @param session - 会话信息
    * @returns void
    */
   createSession: () => Promise<string>;
-
   /**
-   * 分发聊天记录
+   * 变更session
    * @param payload - 聊天记录
    */
   dispatchSession: (payload: SessionDispatch) => void;
+
+  /**
+   * 导入会话
+   * @param sessions
+   */
+  importSessions: (sessions: LobeSessions) => void;
+
+  /**
+   * 生成压缩后的消息
+   * @returns 压缩后的消息
+   */
+  // genShareUrl: () => string;
   /**
    * @title 删除会话
    * @param index - 会话索引
    * @returns void
    */
   removeSession: (sessionId: string) => void;
-
   /**
    * @title 切换会话
    * @param sessionId - 会话索引
    * @returns void
    */
   switchSession: (sessionId?: string | 'new') => Promise<void>;
-
-  /**
-   * 生成压缩后的消息
-   * @returns 压缩后的消息
-   */
-  // genShareUrl: () => string;
 }
 
 export const createSessionSlice: StateCreator<
@@ -53,6 +60,10 @@ export const createSessionSlice: StateCreator<
     set({ activeId: sessionId });
   },
 
+  clearSessions: () => {
+    set({ sessions: {} });
+  },
+
   createSession: async () => {
     const { dispatchSession, switchSession } = get();
 
@@ -80,6 +91,19 @@ export const createSessionSlice: StateCreator<
     });
   },
 
+  importSessions: (importSessions) => {
+    const { sessions } = get();
+    set({
+      sessions: produce(sessions, (draft) => {
+        for (const [id, session] of Object.entries(importSessions)) {
+          // 如果已经存在，则跳过
+          if (draft[id]) continue;
+
+          draft[id] = session;
+        }
+      }),
+    });
+  },
   removeSession: (sessionId) => {
     get().dispatchSession({ id: sessionId, type: 'removeSession' });
 
@@ -98,7 +122,6 @@ export const createSessionSlice: StateCreator<
     // 新会话
     await Router.push(`/chat/${sessionId}`);
   },
-
   // genShareUrl: () => {
   //   const session = sessionSelectors.currentSession(get());
   //   if (!session) return '';

package/src/store/session/slices/session/selectors/export.ts

@@ -0,0 +1,23 @@
+import { transform } from 'lodash-es';
+
+import { SessionStore } from '@/store/session';
+import { LobeAgentSession, LobeSessions } from '@/types/session';
+
+import { getSessionById } from './list';
+
+export const exportSessions = (s: SessionStore) => s.sessions;
+
+// 排除 chats
+export const exportAgents = (s: SessionStore) => {
+  return transform(s.sessions, (result: LobeSessions, value, key) => {
+    // 移除 chats 和 topics
+    result[key] = { ...value, chats: {}, topics: {} } as LobeAgentSession;
+  });
+};
+// 排除 chats
+export const getExportAgent =
+  (id: string) =>
+  (s: SessionStore): LobeAgentSession => {
+    const session = getSessionById(id)(s);
+    return { ...session, chats: {}, topics: {} };
+  };

package/src/store/session/slices/session/selectors/index.ts

@@ -1,14 +1,18 @@
+import { exportAgents, exportSessions, getExportAgent } from './export';
 import {
+  currentSession,
   currentSessionSafe,
-  currentSessionSel,
   getSessionById,
   getSessionMetaById,
   sessionList,
 } from './list';
 
 export const sessionSelectors = {
-  currentSession: currentSessionSel,
+  currentSession,
   currentSessionSafe,
+  exportAgents,
+  exportSessions,
+  getExportAgent,
   getSessionById,
   getSessionMetaById,
   sessionList,

package/src/store/session/slices/session/selectors/list.ts

@@ -5,13 +5,14 @@ import { filterWithKeywords } from '@/utils/filter';
 
 import { initLobeSession } from '../initialState';
 
-export const currentSessionSel = (s: SessionStore): LobeAgentSession | undefined => {
+export const currentSession = (s: SessionStore): LobeAgentSession | undefined => {
   if (!s.activeId) return;
 
   return s.sessions[s.activeId];
 };
+
 export const currentSessionSafe = (s: SessionStore): LobeAgentSession => {
-  return currentSessionSel(s) || initLobeSession;
+  return currentSession(s) || initLobeSession;
 };
 
 export const sessionList = (s: SessionStore) => {

package/src/store/settings/action.ts

@@ -1,16 +1,17 @@
 import { ThemeMode } from 'antd-style';
 import type { StateCreator } from 'zustand/vanilla';
 
-import type { ConfigSettings } from '@/types/exportConfig';
+import type { GlobalSettings } from '@/types/settings';
 
 import type { SidebarTabKey } from './initialState';
-import { DEFAULT_SETTINGS, GlobalSettingsState } from './initialState';
+import { DEFAULT_SETTINGS, SettingsState } from './initialState';
 import type { SettingsStore } from './store';
 
 /**
  * 设置操作
  */
 export interface SettingsAction {
+  importSettings: (settings: GlobalSettings) => void;
   /**
    * 重置设置
    */
@@ -19,12 +20,12 @@ export interface SettingsAction {
    * 设置全局设置
    * @param settings - 全局设置
    */
-  setGlobalSettings: (settings: GlobalSettingsState) => void;
+  setGlobalSettings: (settings: SettingsState) => void;
   /**
    * 设置部分配置设置
    * @param settings - 部分配置设置
    */
-  setSettings: (settings: Partial<ConfigSettings>) => void;
+  setSettings: (settings: Partial<GlobalSettings>) => void;
   /**
    * 设置主题模式
    * @param themeMode - 主题模式
@@ -43,6 +44,17 @@ export const createSettings: StateCreator<
   [],
   SettingsAction
 > = (set, get) => ({
+  importSettings: (importSettings) => {
+    const { setSettings } = get();
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { OPENAI_API_KEY: _, password: __, ...settings } = importSettings;
+
+    setSettings({
+      ...settings,
+      // 如果用户存在用户头像，那么不做导入
+      avatar: get().settings.avatar ?? settings.avatar,
+    });
+  },
   resetSettings: () => {
     set({ settings: DEFAULT_SETTINGS });
   },

package/src/store/settings/initialState.ts

@@ -1,9 +1,9 @@
-import type { ConfigSettings } from '@/types/exportConfig';
 import { LanguageModel } from '@/types/llm';
+import type { GlobalSettings } from '@/types/settings';
 
-export type SidebarTabKey = 'chat' | 'market';
+export type SidebarTabKey = 'chat' | 'market' | 'setting';
 
-export const DEFAULT_SETTINGS: ConfigSettings = {
+export const DEFAULT_SETTINGS: GlobalSettings = {
   OPENAI_API_KEY: '',
   avatar: '',
   compressThreshold: 24,
@@ -26,15 +26,15 @@ export const DEFAULT_SETTINGS: ConfigSettings = {
   topP: 1,
 };
 
-export interface GlobalSettingsState {
+export interface SettingsState {
   inputHeight: number;
   sessionExpandable?: boolean;
   sessionsWidth: number;
-  settings: ConfigSettings;
+  settings: GlobalSettings;
   sidebarKey: SidebarTabKey;
 }
 
-export const initialState: GlobalSettingsState = {
+export const initialState: SettingsState = {
   inputHeight: 200,
   sessionExpandable: true,
   sessionsWidth: 320,

package/src/store/settings/selectors.ts

@@ -1,6 +1,7 @@
 import { defaults } from 'lodash-es';
 
 import { DEFAULT_SETTINGS } from '@/store/settings/initialState';
+import { GlobalSettings } from '@/types/settings';
 
 import { SettingsStore } from './store';
 
@@ -11,7 +12,16 @@ const selecThemeMode = (s: SettingsStore) => ({
   themeMode: s.settings.themeMode,
 });
 
+export const exportSettings = (s: SettingsStore) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { OPENAI_API_KEY: _, password: __, ...settings } = s.settings;
+
+  return settings as GlobalSettings;
+};
+
 export const settingsSelectors = {
   currentSettings,
+  exportSettings,
+
   selecThemeMode,
 };

package/src/store/settings/store.ts

@@ -1,9 +1,9 @@
 import { StateCreator } from 'zustand/vanilla';
 
 import { type SettingsAction, createSettings } from './action';
-import { type GlobalSettingsState, initialState } from './initialState';
+import { type SettingsState, initialState } from './initialState';
 
-export type SettingsStore = SettingsAction & GlobalSettingsState;
+export type SettingsStore = SettingsAction & SettingsState;
 
 export const createStore: StateCreator<SettingsStore, [['zustand/devtools', never]]> = (
   ...parameters

package/src/types/exportConfig.ts

@@ -1,46 +1,61 @@
-import type { NeutralColors, PrimaryColors } from '@lobehub/ui';
-import { ThemeMode } from 'antd-style';
+import { LobeSessions } from '@/types/session';
+import { GlobalSettings } from '@/types/settings';
 
-import { LanguageModel } from '@/types/llm';
+// 存在4种导出方式
+export type ExportType = 'agents' | 'sessions' | 'settings' | 'all';
 
-import { Locales } from './locale';
-
-/**
- * 配置设置
- */
-export interface ConfigSettings {
-  OPENAI_API_KEY: string;
-  avatar: string;
-  compressThreshold: number;
-  enableCompressThreshold: boolean;
-  enableHistoryCount: boolean;
-  enableMaxTokens: boolean;
-  endpoint: string;
-  fontSize: number;
-  frequencyPenalty: number;
-  historyCount: number;
-  language: Locales;
-  maxTokens: number;
-  model: LanguageModel;
-  neutralColor: NeutralColors | '';
-  password: string;
-  presencePenalty: number;
-  primaryColor: PrimaryColors | '';
-  temperature: number;
-  themeMode: ThemeMode;
-  topP: number;
+// 4种方式对应的 state
+export interface ConfigStateAll {
+  sessions: LobeSessions;
+  settings: GlobalSettings;
 }
-
-export type ConfigKeys = keyof ConfigSettings;
-
-export interface ConfigState {
-  settings: ConfigSettings;
+export interface ConfigStateSettings {
+  settings: GlobalSettings;
+}
+export interface ConfigStateSessions {
+  sessions: LobeSessions;
 }
 
-export interface ConfigFile {
-  state: ConfigState;
-  /**
-   * 配置文件的版本号
-   */
+// 4种方式对应的 file
+export interface ConfigFileSettings {
+  exportType: 'settings';
+  state: ConfigStateSettings;
   version: number;
 }
+export interface ConfigFileSessions {
+  exportType: 'sessions';
+  state: ConfigStateSessions;
+  version: number;
+}
+export interface ConfigFileAgents {
+  exportType: 'agents';
+  state: ConfigStateSessions;
+  version: number;
+}
+export interface ConfigFileAll {
+  exportType: 'all';
+  state: ConfigStateAll;
+  version: number;
+}
+
+export type ConfigFile = ConfigFileSettings | ConfigFileSessions | ConfigFileAll | ConfigFileAgents;
+
+// 用于 map 收集类型的 map
+export interface ConfigModelMap {
+  agents: {
+    file: ConfigFileAgents;
+    state: ConfigStateSessions;
+  };
+  all: {
+    file: ConfigFileAll;
+    state: ConfigStateAll;
+  };
+  sessions: {
+    file: ConfigFileSessions;
+    state: ConfigStateSessions;
+  };
+  settings: {
+    file: ConfigFileSettings;
+    state: ConfigStateSettings;
+  };
+}

package/src/types/settings.ts

@@ -0,0 +1,32 @@
+import { NeutralColors, PrimaryColors } from '@lobehub/ui';
+import { ThemeMode } from 'antd-style';
+
+import { Locales } from '@/locales/resources';
+import { LanguageModel } from '@/types/llm';
+
+/**
+ * 配置设置
+ */
+export interface GlobalSettings {
+  OPENAI_API_KEY: string;
+  avatar: string;
+  compressThreshold: number;
+  enableCompressThreshold: boolean;
+  enableHistoryCount: boolean;
+  enableMaxTokens: boolean;
+  endpoint: string;
+  fontSize: number;
+  frequencyPenalty: number;
+  historyCount: number;
+  language: Locales;
+  maxTokens: number;
+  model: LanguageModel;
+  neutralColor: NeutralColors | '';
+  password: string;
+  presencePenalty: number;
+  primaryColor: PrimaryColors | '';
+  temperature: number;
+  themeMode: ThemeMode;
+  topP: number;
+}
+export type ConfigKeys = keyof GlobalSettings;

package/src/utils/config.ts

@@ -0,0 +1,103 @@
+import { notification } from 'antd';
+
+import { CURRENT_CONFIG_VERSION, Migration } from '@/migrations';
+import {
+  ConfigFile,
+  ConfigFileAgents,
+  ConfigFileAll,
+  ConfigFileSessions,
+  ConfigFileSettings,
+  ConfigModelMap,
+  ExportType,
+} from '@/types/exportConfig';
+
+export const exportConfigFile = (config: object, fileName?: string) => {
+  const file = `LobeChat-${fileName || '-config'}-v${CURRENT_CONFIG_VERSION}.json`;
+
+  // 创建一个 Blob 对象
+  const blob = new Blob([JSON.stringify(config)], { type: 'application/json' });
+
+  // 创建一个 URL 对象，用于下载
+  const url = URL.createObjectURL(blob);
+
+  // 创建一个 <a> 元素，设置下载链接和文件名
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = file;
+
+  // 触发 <a> 元素的点击事件，开始下载
+  document.body.append(a);
+  a.click();
+
+  // 下载完成后，清除 URL 对象
+  URL.revokeObjectURL(url);
+  a.remove();
+};
+
+export const importConfigFile = (info: any, onConfigImport: (config: ConfigFile) => void) => {
+  const reader = new FileReader();
+  //读取完文件之后的回调函数
+  reader.onloadend = function (evt) {
+    const fileString = evt.target?.result;
+    const fileJson = fileString as string;
+
+    try {
+      const config = JSON.parse(fileJson);
+      const { state } = Migration.migrate(config);
+
+      onConfigImport({ ...config, state });
+    } catch (error) {
+      notification.error({
+        description: `出错原因: ${(error as Error).message}`,
+        message: '导入失败',
+      });
+    }
+  };
+  //@ts-ignore file 类型不明确
+  reader.readAsText(info.file.originFileObj, 'utf8');
+};
+
+type CreateConfigFileState<T extends ExportType> = ConfigModelMap[T]['state'];
+
+type CreateConfigFile<T extends ExportType> = ConfigModelMap[T]['file'];
+
+export const createConfigFile = <T extends ExportType>(
+  type: T,
+  state: CreateConfigFileState<T>,
+): CreateConfigFile<T> => {
+  switch (type) {
+    case 'agents': {
+      return {
+        exportType: 'agents',
+        state,
+        version: Migration.targetVersion,
+      } as ConfigFileAgents;
+    }
+
+    case 'sessions': {
+      return {
+        exportType: 'sessions',
+        state,
+        version: Migration.targetVersion,
+      } as ConfigFileSessions;
+    }
+
+    case 'settings': {
+      return {
+        exportType: 'settings',
+        state,
+        version: Migration.targetVersion,
+      } as ConfigFileSettings;
+    }
+
+    case 'all': {
+      return {
+        exportType: 'all',
+        state,
+        version: Migration.targetVersion,
+      } as ConfigFileAll;
+    }
+  }
+
+  throw new Error('缺少正确的导出类型，请检查实现...');
+};