@lobehub/chat 0.28.0 → 0.30.0

package/src/store/settings/action.ts

@@ -36,6 +36,7 @@ export interface SettingsAction {
    * @param key - 选中的侧边栏选项
    */
   switchSideBar: (key: SidebarTabKey) => void;
+  toggleAgentPanel: (visible?: boolean) => void;
 }
 
 export const createSettings: StateCreator<
@@ -49,7 +50,11 @@ export const createSettings: StateCreator<
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { OPENAI_API_KEY: _, password: __, ...settings } = importSettings;
 
-    setSettings(settings);
+    setSettings({
+      ...settings,
+      // 如果用户存在用户头像，那么不做导入
+      avatar: !get().settings.avatar ? settings.avatar : get().settings.avatar,
+    });
   },
   resetSettings: () => {
     set({ settings: DEFAULT_SETTINGS });
@@ -67,4 +72,9 @@ export const createSettings: StateCreator<
   switchSideBar: (key) => {
     set({ sidebarKey: key });
   },
+  toggleAgentPanel: (newValue) => {
+    const showAgentConfig = typeof newValue === 'boolean' ? newValue : !get().showAgentConfig;
+
+    set({ showAgentConfig });
+  },
 });

package/src/store/settings/initialState.ts

@@ -31,6 +31,7 @@ export interface SettingsState {
   sessionExpandable?: boolean;
   sessionsWidth: number;
   settings: GlobalSettings;
+  showAgentConfig?: boolean;
   sidebarKey: SidebarTabKey;
 }
 
@@ -39,5 +40,6 @@ export const initialState: SettingsState = {
   sessionExpandable: true,
   sessionsWidth: 320,
   settings: DEFAULT_SETTINGS,
+  showAgentConfig: true,
   sidebarKey: 'chat',
 };

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/types/exportConfig.ts

@@ -1,41 +1,61 @@
 import { LobeSessions } from '@/types/session';
 import { GlobalSettings } from '@/types/settings';
 
-export interface ConfigState {
+// 存在4种导出方式
+export type ExportType = 'agents' | 'sessions' | 'settings' | 'all';
+
+// 4种方式对应的 state
+export interface ConfigStateAll {
   sessions: LobeSessions;
   settings: GlobalSettings;
 }
-
-export interface SettingsConfigState {
+export interface ConfigStateSettings {
   settings: GlobalSettings;
 }
-export interface SessionsConfigState {
+export interface ConfigStateSessions {
   sessions: LobeSessions;
 }
 
-export type ExportType = 'agents' | 'sessions' | 'settings' | 'all';
-
-export type ConfigFile = ConfigFileSettings | ConfigFileSessions | ConfigFileAll | ConfigFileAgents;
-
+// 4种方式对应的 file
 export interface ConfigFileSettings {
   exportType: 'settings';
-  state: SettingsConfigState;
+  state: ConfigStateSettings;
   version: number;
 }
 export interface ConfigFileSessions {
   exportType: 'sessions';
-  state: SessionsConfigState;
+  state: ConfigStateSessions;
   version: number;
 }
-
 export interface ConfigFileAgents {
   exportType: 'agents';
-  state: SessionsConfigState;
+  state: ConfigStateSessions;
   version: number;
 }
-
 export interface ConfigFileAll {
   exportType: 'all';
-  state: ConfigState;
+  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/utils/config.ts

@@ -1,7 +1,15 @@
 import { notification } from 'antd';
 
 import { CURRENT_CONFIG_VERSION, Migration } from '@/migrations';
-import { ConfigFile } from '@/types/exportConfig';
+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`;
@@ -48,3 +56,48 @@ export const importConfigFile = (info: any, onConfigImport: (config: ConfigFile)
   //@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('缺少正确的导出类型，请检查实现...');
+};

package/src/pages/chat/[id]/Config/TopicItem.tsx

@@ -1,136 +0,0 @@
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { Dropdown, type MenuProps, Tag, Typography } from 'antd';
-import { createStyles } from 'antd-style';
-import { MessageSquareDashed, MoreVertical, PencilLine, Share2, Star, Trash } from 'lucide-react';
-import { memo, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-import { shallow } from 'zustand/shallow';
-
-import { useSessionStore } from '@/store/session';
-
-const { Paragraph } = Typography;
-
-const useStyles = createStyles(({ css, token, isDarkMode }) => ({
-  active: css`
-    background: ${isDarkMode ? token.colorFillTertiary : token.colorFillSecondary};
-    transition: background 200ms ${token.motionEaseOut};
-
-    &:hover {
-      background: ${token.colorFill};
-    }
-  `,
-  container: css`
-    cursor: pointer;
-    padding: 12px 8px;
-    border-radius: ${token.borderRadius}px;
-
-    .topic-more {
-      opacity: 0;
-      transition: opacity 400ms ${token.motionEaseOut};
-    }
-
-    &:hover {
-      background: ${token.colorFillSecondary};
-
-      .topic-more {
-        opacity: 1;
-      }
-    }
-  `,
-  split: css`
-    border-bottom: 1px solid ${token.colorSplit};
-  `,
-}));
-
-export interface ConfigCellProps {
-  active?: boolean;
-  fav?: boolean;
-  id?: string;
-  showFav?: boolean;
-  title: string;
-}
-
-const TopicItem = memo<ConfigCellProps>(({ title, active, id, showFav, fav }) => {
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const { styles, theme, cx } = useStyles();
-  const { t } = useTranslation('common');
-
-  const [dispatchTopic, toggleTopic] = useSessionStore(
-    (s) => [s.dispatchTopic, s.toggleTopic],
-    shallow,
-  );
-
-  // TODO: 动作绑定
-  const items: MenuProps['items'] = useMemo(
-    () => [
-      {
-        icon: <Icon icon={PencilLine} />,
-        key: 'rename',
-        label: t('rename'),
-      },
-      {
-        icon: <Icon icon={Share2} />,
-        key: 'share',
-        label: t('share'),
-      },
-      {
-        icon: <Icon icon={Trash} />,
-        key: 'delete',
-        label: t('delete'),
-      },
-    ],
-    [],
-  );
-
-  return (
-    <Flexbox
-      align={'center'}
-      className={cx(styles.container, active && styles.active)}
-      distribution={'space-between'}
-      horizontal
-      onClick={() => {
-        toggleTopic(id);
-      }}
-    >
-      <Flexbox align={'center'} gap={8} horizontal>
-        {!showFav ? (
-          <Flexbox align={'center'} height={24} justify={'center'} width={24}>
-            <Icon color={theme.colorTextDescription} icon={MessageSquareDashed} />
-          </Flexbox>
-        ) : (
-          <ActionIcon
-            color={fav ? theme.colorWarning : undefined}
-            fill={fav ? theme.colorWarning : 'transparent'}
-            icon={Star}
-            onClick={() => {
-              if (!id) return;
-              dispatchTopic({ id, key: 'favorite', type: 'updateChatTopic', value: !fav });
-            }}
-            size={'small'}
-          />
-        )}
-        <Paragraph ellipsis={{ rows: 2 }} style={{ margin: 0 }}>
-          {title}
-        </Paragraph>
-        {id ? '' : <Tag>{t('temp')}</Tag>}
-      </Flexbox>
-      <Dropdown
-        arrow={false}
-        menu={{ items }}
-        onOpenChange={setDropdownOpen}
-        open={dropdownOpen}
-        trigger={['click']}
-      >
-        <ActionIcon
-          className="topic-more"
-          icon={MoreVertical}
-          size={'small'}
-          style={dropdownOpen ? { opacity: 1 } : {}}
-        />
-      </Dropdown>
-    </Flexbox>
-  );
-});
-
-export default TopicItem;