@lobehub/chat 0.27.4 → 0.28.0

package/CHANGELOG.md

@@ -2,6 +2,41 @@
 
 # Changelog
 
+## [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.28.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/hooks/useExportConfig.ts

@@ -0,0 +1,69 @@
+import { transform } from 'lodash-es';
+import { useMemo } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { Migration } from '@/migrations';
+import { useSessionStore } from '@/store/session';
+import { useSettings } from '@/store/settings';
+import {
+  ConfigFileAgents,
+  ConfigFileAll,
+  ConfigFileSessions,
+  ConfigFileSettings,
+} from '@/types/exportConfig';
+import { exportConfigFile } from '@/utils/config';
+
+export const useExportConfig = () => {
+  const [sessions] = useSessionStore((s) => [s.sessions], shallow);
+
+  const [settings] = useSettings((s) => [s.settings, s.importSettings], shallow);
+
+  const exportAgents = () => {
+    const config: ConfigFileAgents = {
+      exportType: 'agents',
+      state: {
+        sessions: transform(sessions, (result, value, key) => {
+          result[key] = { ...value, chats: {}, topics: {} };
+        }),
+      },
+      version: Migration.targetVersion,
+    };
+
+    exportConfigFile(config, 'agents');
+  };
+
+  const exportSessions = () => {
+    const config: ConfigFileSessions = {
+      exportType: 'sessions',
+      state: { sessions },
+      version: Migration.targetVersion,
+    };
+
+    exportConfigFile(config, 'sessions');
+  };
+
+  const exportSettings = () => {
+    const config: ConfigFileSettings = {
+      exportType: 'settings',
+      state: { settings },
+      version: Migration.targetVersion,
+    };
+
+    exportConfigFile(config, 'settings');
+  };
+
+  const exportAll = () => {
+    // 将 入参转换为 配置文件格式
+    const config: ConfigFileAll = {
+      exportType: 'all',
+      state: { sessions, settings },
+      version: Migration.targetVersion,
+    };
+    exportConfigFile(config, 'config');
+  };
+
+  return useMemo(
+    () => ({ exportAgents, exportAll, exportSessions, exportSettings }),
+    [sessions, settings],
+  );
+};

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/pages/setting/SettingForm.tsx

@@ -13,8 +13,8 @@ import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { options } from '@/locales/options';
 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';
 

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,9 +1,10 @@
+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';
@@ -18,10 +19,22 @@ export interface SessionAction {
   createSession: () => Promise<string>;
 
   /**
-   * 分发聊天记录
+   * 变更session
    * @param payload - 聊天记录
    */
   dispatchSession: (payload: SessionDispatch) => void;
+  /**
+   * 导入会话
+   * @param sessions
+   */
+  importSessions: (sessions: LobeSessions) => void;
+
+  /**
+   * 生成压缩后的消息
+   * @returns 压缩后的消息
+   */
+  // genShareUrl: () => string;
+
   /**
    * @title 删除会话
    * @param index - 会话索引
@@ -35,12 +48,6 @@ export interface SessionAction {
    * @returns void
    */
   switchSession: (sessionId?: string | 'new') => Promise<void>;
-
-  /**
-   * 生成压缩后的消息
-   * @returns 压缩后的消息
-   */
-  // genShareUrl: () => string;
 }
 
 export const createSessionSlice: StateCreator<
@@ -80,6 +87,20 @@ 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' });
 
@@ -87,7 +108,6 @@ export const createSessionSlice: StateCreator<
       Router.push('/');
     }
   },
-
   switchSession: async (sessionId) => {
     if (get().activeId === sessionId) return;
 

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,13 @@ 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);
+  },
   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/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,41 @@
-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';
-
-import { Locales } from './locale';
+export interface ConfigState {
+  sessions: LobeSessions;
+  settings: GlobalSettings;
+}
 
-/**
- * 配置设置
- */
-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;
+export interface SettingsConfigState {
+  settings: GlobalSettings;
+}
+export interface SessionsConfigState {
+  sessions: LobeSessions;
 }
 
-export type ConfigKeys = keyof ConfigSettings;
+export type ExportType = 'agents' | 'sessions' | 'settings' | 'all';
 
-export interface ConfigState {
-  settings: ConfigSettings;
+export type ConfigFile = ConfigFileSettings | ConfigFileSessions | ConfigFileAll | ConfigFileAgents;
+
+export interface ConfigFileSettings {
+  exportType: 'settings';
+  state: SettingsConfigState;
+  version: number;
+}
+export interface ConfigFileSessions {
+  exportType: 'sessions';
+  state: SessionsConfigState;
+  version: number;
+}
+
+export interface ConfigFileAgents {
+  exportType: 'agents';
+  state: SessionsConfigState;
+  version: number;
 }
 
-export interface ConfigFile {
+export interface ConfigFileAll {
+  exportType: 'all';
   state: ConfigState;
-  /**
-   * 配置文件的版本号
-   */
   version: number;
 }

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,50 @@
+import { notification } from 'antd';
+
+import { CURRENT_CONFIG_VERSION, Migration } from '@/migrations';
+import { ConfigFile } 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');
+};