@lobehub/chat 0.33.0 → 0.35.0

package/src/store/settings/action.ts

@@ -1,26 +1,41 @@
 import { ThemeMode } from 'antd-style';
+import { produce } from 'immer';
+import { merge } from 'lodash-es';
 import type { StateCreator } from 'zustand/vanilla';
 
+import { DEFAULT_AGENT, DEFAULT_BASE_SETTINGS, DEFAULT_SETTINGS } from '@/const/settings';
+import { MetaData } from '@/types/meta';
+import type { LobeAgentSession } from '@/types/session';
+import { LobeAgentConfig } from '@/types/session';
 import type { GlobalSettings } from '@/types/settings';
+import { setNamespace } from '@/utils/storeDebug';
 
 import type { SidebarTabKey } from './initialState';
-import { DEFAULT_SETTINGS, SettingsState } from './initialState';
+import { AppSettingsState } from './initialState';
 import type { SettingsStore } from './store';
 
+const t = setNamespace('settings');
+
 /**
  * 设置操作
  */
 export interface SettingsAction {
-  importSettings: (settings: GlobalSettings) => void;
+  importAppSettings: (settings: GlobalSettings) => void;
+  resetAgentConfig: () => void;
+  resetAgentMeta: () => void;
+  resetBaseSettings: () => void;
+  resetDefaultAgent: () => void;
   /**
    * 重置设置
    */
   resetSettings: () => void;
+  setAgentConfig: (config: Partial<LobeAgentSession['config']>) => void;
+  setAgentMeta: (meta: Partial<LobeAgentSession['meta']>) => void;
   /**
    * 设置全局设置
    * @param settings - 全局设置
    */
-  setGlobalSettings: (settings: SettingsState) => void;
+  setAppSettings: (settings: AppSettingsState) => void;
   /**
    * 设置部分配置设置
    * @param settings - 部分配置设置
@@ -37,6 +52,7 @@ export interface SettingsAction {
    */
   switchSideBar: (key: SidebarTabKey) => void;
   toggleAgentPanel: (visible?: boolean) => void;
+  toggleAgentPlugin: (pluginId: string) => void;
 }
 
 export const createSettings: StateCreator<
@@ -45,10 +61,10 @@ export const createSettings: StateCreator<
   [],
   SettingsAction
 > = (set, get) => ({
-  importSettings: (importSettings) => {
+  importAppSettings: (importAppSettings) => {
     const { setSettings } = get();
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { OPENAI_API_KEY: _, password: __, ...settings } = importSettings;
+    const { OPENAI_API_KEY: _, password: __, ...settings } = importAppSettings;
 
     setSettings({
       ...settings,
@@ -56,25 +72,80 @@ export const createSettings: StateCreator<
       avatar: !get().settings.avatar ? settings.avatar : get().settings.avatar,
     });
   },
+  resetAgentConfig: () => {
+    const settings = produce(get().settings, (draft: GlobalSettings) => {
+      draft.defaultAgent.config = DEFAULT_AGENT.config;
+    });
+    set({ settings }, false, t('resetAgentConfig'));
+  },
+  resetAgentMeta: () => {
+    const settings = produce(get().settings, (draft: GlobalSettings) => {
+      draft.defaultAgent.meta = DEFAULT_AGENT.meta;
+    });
+    set({ settings }, false, t('resetAgentMeta'));
+  },
+  resetBaseSettings: () => {
+    const settings = get().settings;
+
+    set({ settings: { ...settings, ...DEFAULT_BASE_SETTINGS } }, false, t('resetBaseSettings'));
+  },
+  resetDefaultAgent: () => {
+    const settings = produce(get().settings, (draft: GlobalSettings) => {
+      draft.defaultAgent = DEFAULT_AGENT;
+    });
+    set({ settings }, false, t('resetDefaultAgent'));
+  },
   resetSettings: () => {
-    set({ settings: DEFAULT_SETTINGS });
+    set({ settings: DEFAULT_SETTINGS }, false, t('resetSettings'));
   },
-  setGlobalSettings: (settings) => {
-    set({ ...settings });
+  setAgentConfig: (config) => {
+    const settings = produce(get().settings, (draft: GlobalSettings) => {
+      const oldConfig = draft.defaultAgent.config as LobeAgentConfig;
+      draft.defaultAgent.config = merge(oldConfig, config);
+    });
+
+    set({ settings }, false, t('setAgentConfig', config));
+  },
+  setAgentMeta: (meta) => {
+    const settings = produce(get().settings, (draft) => {
+      const oldMeta = draft.defaultAgent.meta as MetaData;
+      draft.defaultAgent.meta = merge(oldMeta, meta);
+    });
+
+    set({ settings }, false, t('setAgentMeta', meta));
+  },
+  setAppSettings: (settings) => {
+    set({ ...settings }, false, t('setAppSettings', settings));
   },
   setSettings: (settings) => {
     const oldSetting = get().settings;
-    set({ settings: { ...oldSetting, ...settings } });
+    set({ settings: merge(oldSetting, settings) }, false, t('setSettings', settings));
   },
   setThemeMode: (themeMode) => {
     get().setSettings({ themeMode });
   },
   switchSideBar: (key) => {
-    set({ sidebarKey: key });
+    set({ sidebarKey: key }, false, t('switchSideBar', key));
   },
   toggleAgentPanel: (newValue) => {
     const showAgentConfig = typeof newValue === 'boolean' ? newValue : !get().showAgentConfig;
 
-    set({ showAgentConfig });
+    set({ showAgentConfig }, false, t('toggleAgentPanel', newValue));
+  },
+  toggleAgentPlugin: (id: string) => {
+    const settings = produce(get().settings, (draft: GlobalSettings) => {
+      const oldConfig = draft.defaultAgent.config as LobeAgentConfig;
+      if (oldConfig.plugins === undefined) {
+        oldConfig.plugins = [id];
+      } else {
+        if (oldConfig.plugins.includes(id)) {
+          oldConfig.plugins.splice(oldConfig.plugins.indexOf(id), 1);
+        } else {
+          oldConfig.plugins.push(id);
+        }
+      }
+    });
+
+    set({ settings }, false, t('toggleAgentPlugin', id));
   },
 });

package/src/store/settings/initialState.ts

@@ -1,32 +1,9 @@
-import { LanguageModel } from '@/types/llm';
+import { DEFAULT_SETTINGS } from '@/const/settings';
 import type { GlobalSettings } from '@/types/settings';
 
-export type SidebarTabKey = 'chat' | 'market' | 'setting';
+export type SidebarTabKey = 'chat' | 'market' | 'settings';
 
-export const DEFAULT_SETTINGS: GlobalSettings = {
-  OPENAI_API_KEY: '',
-  avatar: '',
-  compressThreshold: 24,
-  enableCompressThreshold: false,
-  enableHistoryCount: false,
-  enableMaxTokens: true,
-  endpoint: '',
-  fontSize: 14,
-  frequencyPenalty: 0,
-  historyCount: 24,
-  language: 'zh-CN',
-  maxTokens: 2000,
-  model: LanguageModel.GPT3_5,
-  neutralColor: '',
-  password: '',
-  presencePenalty: 0,
-  primaryColor: '',
-  temperature: 0.5,
-  themeMode: 'auto',
-  topP: 1,
-};
-
-export interface SettingsState {
+export interface AppSettingsState {
   inputHeight: number;
   sessionExpandable?: boolean;
   sessionsWidth: number;
@@ -35,7 +12,7 @@ export interface SettingsState {
   sidebarKey: SidebarTabKey;
 }
 
-export const initialState: SettingsState = {
+export const initialState: AppSettingsState = {
   inputHeight: 200,
   sessionExpandable: true,
   sessionsWidth: 320,

package/src/store/settings/selectors.ts

@@ -1,16 +1,20 @@
 import { defaults } from 'lodash-es';
 
-import { DEFAULT_SETTINGS } from '@/store/settings/initialState';
+import { DEFAULT_AGENT_META } from '@/const/meta';
+import { DEFAULT_AGENT, DEFAULT_AGENT_CONFIG, DEFAULT_SETTINGS } from '@/const/settings';
 import { GlobalSettings } from '@/types/settings';
 
 import { SettingsStore } from './store';
 
 const currentSettings = (s: SettingsStore) => defaults(s.settings, DEFAULT_SETTINGS);
 
-const selecThemeMode = (s: SettingsStore) => ({
-  setThemeMode: s.setThemeMode,
-  themeMode: s.settings.themeMode,
-});
+const currentDefaultAgent = (s: SettingsStore) => defaults(s.settings.defaultAgent, DEFAULT_AGENT);
+
+const currentAgentConfig = (s: SettingsStore) =>
+  defaults(s.settings.defaultAgent.config, DEFAULT_AGENT_CONFIG);
+
+const currentAgentMeta = (s: SettingsStore) =>
+  defaults(s.settings.defaultAgent.meta, DEFAULT_AGENT_META);
 
 export const exportSettings = (s: SettingsStore) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -20,8 +24,9 @@ export const exportSettings = (s: SettingsStore) => {
 };
 
 export const settingsSelectors = {
+  currentAgentConfig,
+  currentAgentMeta,
+  currentDefaultAgent,
   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 SettingsState, initialState } from './initialState';
+import { type AppSettingsState, initialState } from './initialState';
 
-export type SettingsStore = SettingsAction & SettingsState;
+export type SettingsStore = SettingsAction & AppSettingsState;
 
 export const createStore: StateCreator<SettingsStore, [['zustand/devtools', never]]> = (
   ...parameters

package/src/types/settings.ts

@@ -1,13 +1,11 @@
-import { NeutralColors, PrimaryColors } from '@lobehub/ui';
-import { ThemeMode } from 'antd-style';
+import type { NeutralColors, PrimaryColors } from '@lobehub/ui';
+import type { ThemeMode } from 'antd-style';
 
-import { Locales } from '@/locales/resources';
-import { LanguageModel } from '@/types/llm';
+import type { Locales } from '@/locales/resources';
+import type { LanguageModel } from '@/types/llm';
+import type { LobeAgentSession } from '@/types/session';
 
-/**
- * 配置设置
- */
-export interface GlobalSettings {
+export interface GlobalBaseSettings {
   OPENAI_API_KEY: string;
   avatar: string;
   compressThreshold: number;
@@ -29,4 +27,14 @@ export interface GlobalSettings {
   themeMode: ThemeMode;
   topP: number;
 }
+
+export type GlobalDefaultAgent = Partial<LobeAgentSession>;
+
+/**
+ * 配置设置
+ */
+export interface GlobalSettings extends GlobalBaseSettings {
+  defaultAgent: GlobalDefaultAgent;
+}
+
 export type ConfigKeys = keyof GlobalSettings;

package/src/utils/storeDebug.ts

@@ -0,0 +1,11 @@
+export const setNamespace = (namespace: string) => {
+  return (type: string, payload?: any) => {
+    const name = [namespace, type].filter(Boolean).join('/');
+    return payload
+      ? {
+          payload,
+          type: name,
+        }
+      : name;
+  };
+};

package/src/pages/chat/[id]/edit/AgentMeta/BackgroundSwatches.tsx

@@ -1,31 +0,0 @@
-import { Swatches, primaryColorsSwatches } from '@lobehub/ui';
-import { memo } from 'react';
-import { shallow } from 'zustand/shallow';
-
-import { DEFAULT_BACKGROUND_COLOR } from '@/const/meta';
-import { agentSelectors, useSessionStore } from '@/store/session';
-
-const BackgroundSwatches = memo(() => {
-  const [backgroundColor, updateAgentMeta] = useSessionStore(
-    (s) => [agentSelectors.currentAgentBackgroundColor(s), s.updateAgentMeta],
-    shallow,
-  );
-
-  const handleSelect = (v: any) => {
-    if (v) {
-      updateAgentMeta({ backgroundColor: v });
-    } else {
-      updateAgentMeta({ backgroundColor: DEFAULT_BACKGROUND_COLOR });
-    }
-  };
-
-  return (
-    <Swatches
-      activeColor={backgroundColor}
-      colors={primaryColorsSwatches}
-      onSelect={handleSelect}
-    />
-  );
-});
-
-export default BackgroundSwatches;

package/src/pages/chat/[id]/edit/AgentMeta/EmojiPicker.tsx

@@ -1,78 +0,0 @@
-import data from '@emoji-mart/data';
-import i18n from '@emoji-mart/data/i18n/zh.json';
-import Picker from '@emoji-mart/react';
-import { Avatar } from '@lobehub/ui';
-import { Popover } from 'antd';
-import { createStyles } from 'antd-style';
-import chroma from 'chroma-js';
-import { memo } from 'react';
-import { shallow } from 'zustand/shallow';
-
-import { useSessionStore } from '@/store/session';
-import { agentSelectors } from '@/store/session/selectors';
-
-const useStyles = createStyles(({ css, token, prefixCls }) => ({
-  avatar: css`
-    border-radius: 50%;
-    transition: scale 400ms ${token.motionEaseOut}, box-shadow 100ms ${token.motionEaseOut};
-
-    &:hover {
-      box-shadow: 0 0 0 3px ${token.colorText};
-    }
-
-    &:active {
-      scale: 0.8;
-    }
-  `,
-  picker: css`
-    em-emoji-picker {
-      --rgb-accent: ${chroma(token.colorPrimary) .rgb() .join(',')};
-      --shadow: none;
-    }
-  `,
-  popover: css`
-    .${prefixCls}-popover-inner {
-      padding: 0;
-    }
-  `,
-}));
-
-const EmojiPicker = () => {
-  const { styles } = useStyles();
-  const [avatar, backgroundColor, updateAgentMeta] = useSessionStore(
-    (s) => [
-      agentSelectors.currentAgentAvatar(s),
-      agentSelectors.currentAgentBackgroundColor(s),
-      s.updateAgentMeta,
-    ],
-    shallow,
-  );
-
-  return (
-    <Popover
-      content={
-        <div className={styles.picker}>
-          <Picker
-            data={data}
-            i18n={i18n}
-            locale={'zh'}
-            onEmojiSelect={(e: any) => {
-              updateAgentMeta({ avatar: e.native });
-            }}
-            skinTonePosition={'none'}
-            theme={'auto'}
-          />
-        </div>
-      }
-      placement={'left'}
-      rootClassName={styles.popover}
-      trigger={'click'}
-    >
-      <div className={styles.avatar} style={{ width: 'fit-content' }}>
-        <Avatar avatar={avatar} background={backgroundColor} size={44} />
-      </div>
-    </Popover>
-  );
-};
-
-export default memo(EmojiPicker);

package/src/pages/chat/[id]/edit/AgentMeta/index.tsx

@@ -1,111 +0,0 @@
-import { Form, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
-import { Button } from 'antd';
-import isEqual from 'fast-deep-equal';
-import { UserCircle, Wand2 } from 'lucide-react';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { shallow } from 'zustand/shallow';
-
-import { FORM_STYLE } from '@/const/layoutTokens';
-import { agentSelectors, useSessionStore } from '@/store/session';
-
-import AutoGenerateInput from './AutoGenerateInput';
-import BackgroundSwatches from './BackgroundSwatches';
-import EmojiPicker from './EmojiPicker';
-
-const AgentMeta = memo(() => {
-  const { t } = useTranslation('setting');
-
-  const metaData = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
-
-  const [
-    autocompleteMeta,
-    autocompleteSessionAgentMeta,
-    loading,
-    updateAgentMeta,
-    id,
-    hasSystemRole,
-  ] = useSessionStore(
-    (s) => [
-      s.autocompleteMeta,
-      s.autocompleteSessionAgentMeta,
-      s.autocompleteLoading,
-      s.updateAgentMeta,
-      s.activeId,
-      agentSelectors.hasSystemRole(s),
-    ],
-    shallow,
-  );
-
-  const basic = [
-    {
-      key: 'title',
-      label: t('settingAgent.name.title'),
-      placeholder: t('settingAgent.name.placeholder'),
-    },
-    {
-      key: 'description',
-      label: t('settingAgent.description.title'),
-      placeholder: t('settingAgent.description.placeholder'),
-    },
-    // { key: 'tag', label: t('agentTag'), placeholder: t('agentTagPlaceholder') },
-  ];
-
-  const meta: ItemGroup = useMemo(
-    () => ({
-      children: [
-        {
-          children: <EmojiPicker />,
-          label: t('settingAgent.avatar.title'),
-          minWidth: undefined,
-        },
-        {
-          children: <BackgroundSwatches />,
-          label: t('settingAgent.backgroundColor.title'),
-          minWidth: undefined,
-        },
-        ...basic.map((item) => ({
-          children: (
-            <AutoGenerateInput
-              loading={loading[item.key as keyof typeof loading]}
-              onChange={(e) => {
-                updateAgentMeta({ [item.key]: e.target.value });
-              }}
-              onGenerate={() => {
-                autocompleteMeta(item.key as keyof typeof metaData);
-              }}
-              placeholder={item.placeholder}
-              value={metaData[item.key as keyof typeof metaData]}
-            />
-          ),
-          label: item.label,
-        })),
-      ],
-      extra: (
-        <Tooltip title={t('autoGenerateTooltip', { ns: 'common' })}>
-          <Button
-            disabled={!hasSystemRole}
-            icon={<Icon icon={Wand2} />}
-            loading={Object.values(loading).some((i) => !!i)}
-            onClick={(e: any) => {
-              e.stopPropagation();
-              console.log(id);
-              if (!id) return;
-              autocompleteSessionAgentMeta(id, true);
-            }}
-            size={'small'}
-          >
-            {t('autoGenerate', { ns: 'common' })}
-          </Button>
-        </Tooltip>
-      ),
-      icon: UserCircle,
-      title: t('settingAgent.title'),
-    }),
-    [basic, metaData],
-  );
-
-  return <Form items={[meta]} {...FORM_STYLE} />;
-});
-
-export default AgentMeta;