@lobehub/chat 0.63.1 → 0.63.3

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.63.3](https://github.com/lobehub/lobe-chat/compare/v0.63.2...v0.63.3)
+
+<sup>Released on **2023-08-28**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor with new market url.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor with new market url, closes [#123](https://github.com/lobehub/lobe-chat/issues/123) ([34a88f8](https://github.com/lobehub/lobe-chat/commit/34a88f8))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.63.2](https://github.com/lobehub/lobe-chat/compare/v0.63.1...v0.63.2)
+
+<sup>Released on **2023-08-27**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor AgentSettings.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor AgentSettings, closes [#121](https://github.com/lobehub/lobe-chat/issues/121) ([1f29199](https://github.com/lobehub/lobe-chat/commit/1f29199))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.63.1](https://github.com/lobehub/lobe-chat/compare/v0.63.0...v0.63.1)
 
 <sup>Released on **2023-08-27**</sup>

package/package.json

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

package/src/const/url.ts

@@ -7,4 +7,4 @@ export const FEEDBACK = pkg.bugs.url;
 export const DISCORD = 'https://discord.gg/AYFPHvv2jT';
 
 export const PLUGINS_INDEX_URL =
-  process.env.PLUGINS_INDEX_URL ?? 'https://chat-plugins-index.lobehub.com';
+  process.env.PLUGINS_INDEX_URL ?? 'https://chat-plugins.lobehub.com';

package/src/features/AgentSetting/AgentConfig/index.tsx

@@ -1,6 +1,7 @@
 import { Form, ItemGroup, SliderWithInput } from '@lobehub/ui';
 import { ConfigProvider, Input, Select, Switch } from 'antd';
 import { useTheme, useThemeMode } from 'antd-style';
+import isEqual from 'fast-deep-equal';
 import { debounce } from 'lodash-es';
 import { BrainCog, LayoutList, MessageSquare, MessagesSquare } from 'lucide-react';
 import { memo, useMemo } from 'react';
@@ -8,24 +9,21 @@ import { useTranslation } from 'react-i18next';
 
 import SelectWithImg from '@/components/SelectWithImg';
 import { FORM_STYLE } from '@/const/layoutTokens';
-import { AgentAction } from '@/store/session/slices/agentConfig';
 import { LanguageModel } from '@/types/llm';
-import type { LobeAgentConfig } from '@/types/session';
 import { LobeAgentConfigKeys } from '@/types/session';
 
+import { useStore } from '../store';
+
 type SettingItemGroup = ItemGroup & {
   children: {
     name?: LobeAgentConfigKeys | string | string[];
   }[];
 };
 
-export interface AgentConfigProps {
-  config: LobeAgentConfig;
-  updateConfig: AgentAction['updateAgentConfig'];
-}
-
-const AgentConfig = memo<AgentConfigProps>(({ config, updateConfig }) => {
+const AgentConfig = memo(() => {
   const { t } = useTranslation('setting');
+  const updateConfig = useStore((s) => s.setAgentConfig);
+  const config = useStore((s) => s.config, isEqual);
   const theme = useTheme();
   const { isDarkMode } = useThemeMode();
 

package/src/features/AgentSetting/AgentMeta/index.tsx

@@ -1,38 +1,28 @@
 import { Form, type FormItemProps, Icon, type ItemGroup, Tooltip } from '@lobehub/ui';
 import { Button } from 'antd';
+import isEqual from 'fast-deep-equal';
 import { UserCircle, Wand2 } from 'lucide-react';
-import { ReactNode, memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import EmojiPicker from '@/components/EmojiPicker';
 import { FORM_STYLE } from '@/const/layoutTokens';
-import { AgentAction, SessionLoadingState } from '@/store/session/slices/agentConfig';
-import { MetaData } from '@/types/meta';
-import { LobeAgentConfig } from '@/types/session';
 
+import { useStore } from '../store';
+import { SessionLoadingState } from '../store/initialState';
 import AutoGenerateInput from './AutoGenerateInput';
 import BackgroundSwatches from './BackgroundSwatches';
 
-export interface Autocomplete {
-  autocompleteMeta: AgentAction['autocompleteMeta'];
-  autocompleteSessionAgentMeta: AgentAction['autocompleteSessionAgentMeta'];
-  id: string | null;
-  loading: SessionLoadingState;
-}
-
-export interface AgentMetaProps {
-  autocomplete?: Autocomplete;
-  config: LobeAgentConfig;
-  meta: MetaData;
-  updateMeta: AgentAction['updateAgentMeta'];
-}
-
-const AgentMeta = memo<AgentMetaProps>(({ config, meta, updateMeta, autocomplete }) => {
+const AgentMeta = memo(() => {
   const { t } = useTranslation('setting');
-
-  const hasSystemRole = useMemo(() => !!config.systemRole, [config]);
-
-  let extra: ReactNode | undefined;
+  const [hasSystemRole, updateMeta, autocompleteMeta, autocompleteAllMeta] = useStore((s) => [
+    !!s.config.systemRole,
+    s.setAgentMeta,
+    s.autocompleteMeta,
+    s.autocompleteAllMeta,
+  ]);
+  const loading = useStore((s) => s.autocompleteLoading);
+  const meta = useStore((s) => s.meta, isEqual);
 
   const basic = [
     {
@@ -49,15 +39,16 @@ const AgentMeta = memo<AgentMetaProps>(({ config, meta, updateMeta, autocomplete
   ];
 
   const autocompleteItems: FormItemProps[] = basic.map((item) => {
-    const handleGenerate = () => autocomplete?.autocompleteMeta(item.key as keyof typeof meta);
     return {
       children: (
         <AutoGenerateInput
-          loading={autocomplete?.loading[item.key as keyof SessionLoadingState]}
+          loading={loading[item.key as keyof SessionLoadingState]}
           onChange={(e) => {
             updateMeta({ [item.key]: e.target.value });
           }}
-          onGenerate={autocomplete ? handleGenerate : undefined}
+          onGenerate={() => {
+            autocompleteMeta(item.key as keyof typeof meta);
+          }}
           placeholder={item.placeholder}
           value={meta[item.key as keyof typeof meta]}
         />
@@ -66,28 +57,6 @@ const AgentMeta = memo<AgentMetaProps>(({ config, meta, updateMeta, autocomplete
     };
   });
 
-  if (autocomplete) {
-    const { autocompleteSessionAgentMeta, loading, id } = autocomplete;
-
-    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();
-            if (!id) return;
-            autocompleteSessionAgentMeta(id, true);
-          }}
-          size={'small'}
-        >
-          {t('autoGenerate', { ns: 'common' })}
-        </Button>
-      </Tooltip>
-    );
-  }
-
   const metaData: ItemGroup = useMemo(
     () => ({
       children: [
@@ -115,11 +84,27 @@ const AgentMeta = memo<AgentMetaProps>(({ config, meta, updateMeta, autocomplete
         },
         ...autocompleteItems,
       ],
-      extra: extra,
+      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();
+
+              autocompleteAllMeta(true);
+            }}
+            size={'small'}
+          >
+            {t('autoGenerate', { ns: 'common' })}
+          </Button>
+        </Tooltip>
+      ),
       icon: UserCircle,
       title: t('settingAgent.title'),
     }),
-    [autocompleteItems, extra, meta],
+    [autocompleteItems, meta],
   );
 
   return <Form items={[metaData]} {...FORM_STYLE} />;

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

@@ -10,9 +10,8 @@ import { FORM_STYLE } from '@/const/layoutTokens';
 import { transformPluginSettings } from '@/features/PluginSettings';
 import PluginSettingRender from '@/features/PluginSettings/PluginSettingRender';
 import { pluginHelpers, usePluginStore } from '@/store/plugin';
-import { useSessionStore } from '@/store/session';
-import { AgentAction, agentSelectors } from '@/store/session/slices/agentConfig';
-import { LobeAgentConfig } from '@/types/session';
+
+import { useStore } from '../store';
 
 const useStyles = createStyles(({ css, token }) => ({
   avatar: css`
@@ -36,14 +35,13 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-export interface AgentPluginProps {
-  config: LobeAgentConfig;
-  updateConfig: AgentAction['toggleAgentPlugin'];
-}
-
-const AgentPlugin = memo<AgentPluginProps>(({ config, updateConfig }) => {
+const AgentPlugin = memo(() => {
   const { t } = useTranslation('setting');
   const { styles } = useStyles();
+
+  const updateConfig = useStore((s) => s.toggleAgentPlugin);
+  const [plugins, hasPlugin] = useStore((s) => [s.config.plugins || [], !!s.config.plugins]);
+
   const [useFetchPluginList, fetchPluginManifest, updatePluginSettings] = usePluginStore((s) => [
     s.useFetchPluginList,
     s.fetchPluginManifest,
@@ -54,8 +52,6 @@ const AgentPlugin = memo<AgentPluginProps>(({ config, updateConfig }) => {
   const pluginsSettings = usePluginStore((s) => s.pluginsSettings, isEqual);
   const { data } = useFetchPluginList();
 
-  const plugins = useSessionStore(agentSelectors.currentAgentPlugins);
-
   const loadingItem = {
     avatar: (
       <Skeleton
@@ -85,13 +81,11 @@ const AgentPlugin = memo<AgentPluginProps>(({ config, updateConfig }) => {
           <Switch
             checked={
               // 如果在加载中，说明激活了
-              pluginManifestLoading[identifier] || !config.plugins
-                ? false
-                : config.plugins.includes(identifier)
+              pluginManifestLoading[identifier] || !hasPlugin ? false : plugins.includes(identifier)
             }
             loading={pluginManifestLoading[identifier]}
             onChange={(checked) => {
-              updateConfig(identifier, checked);
+              updateConfig(identifier);
               if (checked) {
                 fetchPluginManifest(identifier);
               }

package/src/features/AgentSetting/AgentPrompt/index.tsx

@@ -3,14 +3,14 @@ import { Button } from 'antd';
 import { createStyles } from 'antd-style';
 import { encode } from 'gpt-tokenizer';
 import { Bot } from 'lucide-react';
-import { memo, useMemo, useState } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { ModelTokens } from '@/const/modelTokens';
-import { AgentAction } from '@/store/session/slices/agentConfig';
-import { LobeAgentConfig } from '@/types/session';
+
+import { useStore } from '../store';
 
 export const useStyles = createStyles(({ css, token }) => ({
   markdown: css`
@@ -21,17 +21,16 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-export interface AgentPromptProps {
-  config: LobeAgentConfig;
-  updateConfig: AgentAction['updateAgentConfig'];
-}
-
-const AgentPrompt = memo<AgentPromptProps>(({ config, updateConfig }) => {
+const AgentPrompt = memo(() => {
   const { t } = useTranslation('setting');
   const { styles } = useStyles();
   const [editing, setEditing] = useState(false);
-  const { systemRole, model } = config;
-  const systemTokenCount = useMemo(() => encode(systemRole || '').length, [systemRole]);
+  const updateConfig = useStore((s) => s.setAgentConfig);
+  const [systemRole, model, systemTokenCount] = useStore((s) => [
+    s.config.systemRole,
+    s.config.model,
+    encode(s.config.systemRole || '').length,
+  ]);
 
   return (
     <FormGroup

package/src/features/AgentSetting/StoreUpdater.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { State, useStoreApi } from './store';
+
+export type StoreUpdaterProps = Partial<
+  Pick<State, 'onMetaChange' | 'onConfigChange' | 'meta' | 'config'>
+>;
+
+const StoreUpdater = memo<StoreUpdaterProps>(({ onConfigChange, onMetaChange, meta, config }) => {
+  const storeApi = useStoreApi();
+  const useStoreUpdater = createStoreUpdater(storeApi);
+
+  useStoreUpdater('meta', meta);
+  useStoreUpdater('config', config);
+  useStoreUpdater('onConfigChange', onConfigChange);
+  useStoreUpdater('onMetaChange', onMetaChange);
+
+  return null;
+});
+
+export default StoreUpdater;

package/src/features/AgentSetting/index.tsx

@@ -0,0 +1,25 @@
+import { memo } from 'react';
+
+import AgentConfig from './AgentConfig';
+import AgentMeta from './AgentMeta';
+import AgentPlugin from './AgentPlugin';
+import AgentPrompt from './AgentPrompt';
+import StoreUpdater, { StoreUpdaterProps } from './StoreUpdater';
+import { Provider, createStore } from './store';
+
+type AgentSettingsProps = StoreUpdaterProps;
+
+const AgentSettings = memo<AgentSettingsProps>((props) => {
+  return (
+    <Provider createStore={createStore}>
+      <StoreUpdater {...props} />
+
+      <AgentPrompt />
+      <AgentMeta />
+      <AgentConfig />
+      <AgentPlugin />
+    </Provider>
+  );
+});
+
+export default AgentSettings;

package/src/features/AgentSetting/store/action.ts

@@ -0,0 +1,212 @@
+import { StateCreator } from 'zustand/vanilla';
+
+import { promptPickEmoji, promptSummaryAgentName, promptSummaryDescription } from '@/prompts/agent';
+import { MetaData } from '@/types/meta';
+import { LobeAgentConfig } from '@/types/session';
+import { fetchPresetTaskResult } from '@/utils/fetch';
+import { setNamespace } from '@/utils/storeDebug';
+
+import { SessionLoadingState } from '../store/initialState';
+import { State, initialState } from './initialState';
+import { ConfigDispatch, configReducer } from './reducers/config';
+import { MetaDataDispatch, metaDataReducer } from './reducers/meta';
+
+/**
+ * 设置操作
+ */
+export interface Action {
+  /**
+   * 自动选择表情
+   * @param id - 表情的 ID
+   */
+  autoPickEmoji: () => void;
+  /**
+   * 自动完成代理描述
+   * @param id - 代理的 ID
+   * @returns 一个 Promise，用于异步操作完成后的处理
+   */
+  autocompleteAgentDescription: () => Promise<void>;
+  /**
+   * 自动完成代理标题
+   * @param id - 代理的 ID
+   * @returns 一个 Promise，用于异步操作完成后的处理
+   */
+  autocompleteAgentTitle: () => Promise<void>;
+  /**
+   * 自动完成助理元数据
+   */
+  autocompleteAllMeta: (replace?: boolean) => void;
+  autocompleteMeta: (key: keyof MetaData) => void;
+  dispatchConfig: (payload: ConfigDispatch) => void;
+  dispatchMeta: (payload: MetaDataDispatch) => void;
+
+  resetAgentConfig: () => void;
+
+  resetAgentMeta: () => void;
+
+  setAgentConfig: (config: Partial<LobeAgentConfig>) => void;
+
+  setAgentMeta: (meta: Partial<MetaData>) => void;
+  streamUpdateMeta: (key: keyof MetaData) => any;
+  toggleAgentPlugin: (pluginId: string) => void;
+  /**
+   * 更新加载状态
+   * @param key - SessionLoadingState 的键
+   * @param value - 加载状态的值
+   */
+  updateLoadingState: (key: keyof SessionLoadingState, value: boolean) => void;
+}
+
+export type Store = Action & State;
+
+const t = setNamespace('AgentSettings');
+
+export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, get) => ({
+  ...initialState,
+
+  autoPickEmoji: async () => {
+    const { config, dispatchMeta } = get();
+
+    const systemRole = config.systemRole;
+
+    const emoji = await fetchPresetTaskResult({
+      onLoadingChange: (loading) => {
+        get().updateLoadingState('avatar', loading);
+      },
+      params: promptPickEmoji(systemRole),
+    });
+
+    if (emoji) {
+      dispatchMeta({ type: 'update', value: { avatar: emoji } });
+    }
+  },
+  autocompleteAgentDescription: async () => {
+    const { dispatchMeta, config, meta, updateLoadingState, streamUpdateMeta } = get();
+
+    const systemRole = config.systemRole;
+
+    if (!systemRole) return;
+
+    const preValue = meta.description;
+
+    // 替换为 ...
+    dispatchMeta({ type: 'update', value: { description: '...' } });
+
+    fetchPresetTaskResult({
+      onError: () => {
+        dispatchMeta({ type: 'update', value: { description: preValue } });
+      },
+      onLoadingChange: (loading) => {
+        updateLoadingState('description', loading);
+      },
+      onMessageHandle: streamUpdateMeta('description'),
+      params: promptSummaryDescription(systemRole),
+    });
+  },
+  autocompleteAgentTitle: async () => {
+    const { dispatchMeta, config, meta, updateLoadingState, streamUpdateMeta } = get();
+
+    const systemRole = config.systemRole;
+
+    if (!systemRole) return;
+
+    const previousTitle = meta.title;
+
+    // 替换为 ...
+    dispatchMeta({ type: 'update', value: { title: '...' } });
+
+    fetchPresetTaskResult({
+      onError: () => {
+        dispatchMeta({ type: 'update', value: { title: previousTitle } });
+      },
+      onLoadingChange: (loading) => {
+        updateLoadingState('title', loading);
+      },
+      onMessageHandle: streamUpdateMeta('title'),
+      params: promptSummaryAgentName(systemRole),
+    });
+  },
+  autocompleteAllMeta: (replace) => {
+    const { meta } = get();
+
+    if (!meta.title || replace) {
+      get().autocompleteAgentTitle();
+    }
+
+    if (!meta.description || replace) {
+      get().autocompleteAgentDescription();
+    }
+
+    if (!meta.avatar || replace) {
+      get().autoPickEmoji();
+    }
+  },
+  autocompleteMeta: (key) => {
+    const { autoPickEmoji, autocompleteAgentTitle, autocompleteAgentDescription } = get();
+
+    switch (key) {
+      case 'avatar': {
+        autoPickEmoji();
+        return;
+      }
+
+      case 'description': {
+        autocompleteAgentDescription();
+        return;
+      }
+
+      case 'title': {
+        autocompleteAgentTitle();
+      }
+    }
+  },
+
+  dispatchConfig: (payload) => {
+    const nextConfig = configReducer(get().config, payload);
+
+    set({ config: nextConfig }, false, payload);
+
+    get().onConfigChange?.(nextConfig);
+  },
+  dispatchMeta: (payload) => {
+    const nextValue = metaDataReducer(get().meta, payload);
+
+    set({ meta: nextValue }, false, payload);
+
+    get().onMetaChange?.(nextValue);
+  },
+
+  resetAgentConfig: () => {
+    get().dispatchConfig({ type: 'reset' });
+  },
+  resetAgentMeta: () => {
+    get().dispatchMeta({ type: 'reset' });
+  },
+
+  setAgentConfig: (config) => {
+    get().dispatchConfig({ config, type: 'update' });
+  },
+  setAgentMeta: (meta) => {
+    get().dispatchMeta({ type: 'update', value: meta });
+  },
+
+  streamUpdateMeta: (key: keyof MetaData) => {
+    let value = '';
+    return (text: string) => {
+      value += text;
+      get().dispatchMeta({ type: 'update', value: { [key]: value } });
+    };
+  },
+
+  toggleAgentPlugin: (id) => {
+    get().dispatchConfig({ pluginId: id, type: 'togglePlugin' });
+  },
+
+  updateLoadingState: (key, value) => {
+    set(
+      { autocompleteLoading: { ...get().autocompleteLoading, [key]: value } },
+      false,
+      t('updateLoadingState', { key, value }),
+    );
+  },
+});

package/src/features/AgentSetting/store/index.ts

@@ -0,0 +1,12 @@
+import { StoreApi } from 'zustand';
+import { createContext } from 'zustand-utils';
+import { shallow } from 'zustand/shallow';
+import { createWithEqualityFn } from 'zustand/traditional';
+
+import { Store, store } from './action';
+
+export type { State } from './initialState';
+
+export const createStore = () => createWithEqualityFn(store, shallow);
+
+export const { useStore, useStoreApi, Provider } = createContext<StoreApi<Store>>();

package/src/features/AgentSetting/store/initialState.ts

@@ -0,0 +1,28 @@
+import { DEFAULT_AGENT_META } from '@/const/meta';
+import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
+import { MetaData } from '@/types/meta';
+import { LobeAgentConfig } from '@/types/session';
+
+export interface State {
+  autocompleteLoading: SessionLoadingState;
+  config: LobeAgentConfig;
+  meta: MetaData;
+
+  onConfigChange?: (config: LobeAgentConfig) => void;
+  onMetaChange?: (meta: MetaData) => void;
+}
+export type SessionLoadingState = Record<Partial<keyof MetaData>, boolean>;
+
+export const initialState: State = {
+  // loading 中间态
+  autocompleteLoading: {
+    avatar: false,
+    backgroundColor: false,
+    description: false,
+    tag: false,
+    title: false,
+  },
+
+  config: DEFAULT_AGENT_CONFIG,
+  meta: DEFAULT_AGENT_META,
+};

package/src/features/AgentSetting/store/reducers/config.ts

@@ -0,0 +1,43 @@
+import { produce } from 'immer';
+import { merge } from 'lodash-es';
+
+import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
+import { LobeAgentConfig } from '@/types/session';
+
+export type ConfigDispatch =
+  | { config: Partial<any>; type: 'update' }
+  | { pluginId: string; type: 'togglePlugin' }
+  | { type: 'reset' };
+
+export const configReducer = (state: LobeAgentConfig, payload: ConfigDispatch): LobeAgentConfig => {
+  switch (payload.type) {
+    case 'update': {
+      return produce(state, (draftState) => {
+        return merge({}, draftState, payload.config);
+      });
+    }
+
+    case 'togglePlugin': {
+      return produce(state, (config) => {
+        const { pluginId: id } = payload;
+        if (config.plugins === undefined) {
+          config.plugins = [id];
+        } else {
+          if (config.plugins.includes(id)) {
+            config.plugins.splice(config.plugins.indexOf(id), 1);
+          } else {
+            config.plugins.push(id);
+          }
+        }
+      });
+    }
+
+    case 'reset': {
+      return DEFAULT_AGENT_CONFIG;
+    }
+
+    default: {
+      return state;
+    }
+  }
+};

package/src/features/AgentSetting/store/reducers/meta.ts

@@ -0,0 +1,21 @@
+import { produce } from 'immer';
+import { merge } from 'lodash-es';
+
+import { DEFAULT_AGENT_META } from '@/const/meta';
+import { MetaData } from '@/types/meta';
+
+export type MetaDataDispatch = { type: 'update'; value: Partial<MetaData> } | { type: 'reset' };
+
+export const metaDataReducer = (state: MetaData, payload: MetaDataDispatch): MetaData => {
+  switch (payload.type) {
+    case 'update': {
+      return produce(state, (draftState) => {
+        return merge({}, draftState, payload.value);
+      });
+    }
+
+    case 'reset': {
+      return DEFAULT_AGENT_META;
+    }
+  }
+};

package/src/pages/chat/SessionList/List/Item/index.tsx

@@ -56,7 +56,7 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
 
     return [
       s.activeId === id,
-      s.autocompleteLoading.title && id === s.activeId,
+      !!s.chatLoadingId && id === s.activeId,
       session.pinned,
       agentSelectors.getTitle(meta),
       agentSelectors.getDescription(meta),

package/src/pages/chat/[id]/setting/index.page.tsx

@@ -7,7 +7,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import { HEADER_HEIGHT } from '@/const/layoutTokens';
-import { AgentConfig, AgentMeta, AgentPlugin, AgentPrompt } from '@/features/AgentSetting';
+import AgentSetting from '@/features/AgentSetting';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
@@ -21,10 +21,8 @@ const EditPage = memo(() => {
   const { t } = useTranslation('setting');
   const config = useSessionStore(agentSelectors.currentAgentConfig, isEqual);
   const meta = useSessionStore(agentSelectors.currentAgentMeta, isEqual);
-  const autocomplete = useSessionStore(agentSelectors.currentAutocomplete);
-  const [updateAgentConfig, toggleAgentPlugin, updateAgentMeta, title] = useSessionStore((s) => [
+  const [updateAgentConfig, updateAgentMeta, title] = useSessionStore((s) => [
     s.updateAgentConfig,
-    s.toggleAgentPlugin,
     s.updateAgentMeta,
     agentSelectors.currentAgentTitle(s),
   ]);
@@ -32,17 +30,12 @@ const EditPage = memo(() => {
   const pageTitle = genSiteHeadTitle(t('header.sessionWithName', { name: title }));
 
   const settings = (
-    <>
-      <AgentPrompt config={config} updateConfig={updateAgentConfig} />
-      <AgentMeta
-        autocomplete={autocomplete}
-        config={config}
-        meta={meta}
-        updateMeta={updateAgentMeta}
-      />
-      <AgentConfig config={config} updateConfig={updateAgentConfig} />
-      <AgentPlugin config={config} updateConfig={toggleAgentPlugin} />
-    </>
+    <AgentSetting
+      config={config}
+      meta={meta}
+      onConfigChange={updateAgentConfig}
+      onMetaChange={updateAgentMeta}
+    />
   );
 
   return (

package/src/pages/settings/Settings/Agent.tsx

@@ -1,24 +1,25 @@
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 
-import { AgentConfig, AgentMeta, AgentPlugin, AgentPrompt } from '@/features/AgentSetting';
+import AgentSetting from '@/features/AgentSetting';
 import { settingsSelectors, useGlobalStore } from '@/store/global';
 
 const Agent = memo(() => {
   const config = useGlobalStore(settingsSelectors.currentAgentConfig, isEqual);
   const meta = useGlobalStore(settingsSelectors.currentAgentMeta, isEqual);
-  const [setAgentConfig, setAgentMeta, toggleAgentPlugin] = useGlobalStore((s) => [
-    s.setAgentConfig,
-    s.setAgentMeta,
-    s.toggleAgentPlugin,
-  ]);
+  const [updateAgent] = useGlobalStore((s) => [s.updateDefaultAgent]);
+
   return (
-    <>
-      <AgentPrompt config={config} updateConfig={setAgentConfig} />
-      <AgentMeta config={config} meta={meta} updateMeta={setAgentMeta} />
-      <AgentConfig config={config} updateConfig={setAgentConfig} />
-      <AgentPlugin config={config} updateConfig={toggleAgentPlugin} />
-    </>
+    <AgentSetting
+      config={config}
+      meta={meta}
+      onConfigChange={(config) => {
+        updateAgent({ config });
+      }}
+      onMetaChange={(meta) => {
+        updateAgent({ meta });
+      }}
+    />
   );
 });
 

package/src/store/global/slices/agent.ts

@@ -2,10 +2,7 @@ import { produce } from 'immer';
 import { merge } from 'lodash-es';
 import type { StateCreator } from 'zustand/vanilla';
 
-import { DEFAULT_AGENT } from '@/const/settings';
-import { MetaData } from '@/types/meta';
-import type { LobeAgentSession } from '@/types/session';
-import { LobeAgentConfig } from '@/types/session';
+import { LobeAgentSettings } from '@/types/session';
 import type { GlobalSettings } from '@/types/settings';
 import { setNamespace } from '@/utils/storeDebug';
 
@@ -17,12 +14,7 @@ const t = setNamespace('settings');
  * 设置操作
  */
 export interface AgentAction {
-  resetAgentConfig: () => void;
-  resetAgentMeta: () => void;
-  resetDefaultAgent: () => void;
-  setAgentConfig: (config: Partial<LobeAgentSession['config']>) => void;
-  setAgentMeta: (meta: Partial<LobeAgentSession['meta']>) => void;
-  toggleAgentPlugin: (pluginId: string) => void;
+  updateDefaultAgent: (agent: Partial<LobeAgentSettings>) => void;
 }
 
 export const createAgentSlice: StateCreator<
@@ -31,55 +23,12 @@ export const createAgentSlice: StateCreator<
   [],
   AgentAction
 > = (set, get) => ({
-  resetAgentConfig: () => {
+  updateDefaultAgent: (agent) => {
     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'));
-  },
-  resetDefaultAgent: () => {
-    const settings = produce(get().settings, (draft: GlobalSettings) => {
-      draft.defaultAgent = DEFAULT_AGENT;
-    });
-    set({ settings }, false, t('resetDefaultAgent'));
-  },
-  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));
-  },
-
-  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);
-        }
-      }
+      const oldAgent = draft.defaultAgent as LobeAgentSettings;
+      draft.defaultAgent = merge({}, oldAgent, agent);
     });
 
-    set({ settings }, false, t('toggleAgentPlugin', id));
+    set({ settings }, false, t('updateDefaultAgent', agent));
   },
 });

package/src/store/session/initialState.ts

@@ -1,13 +1,11 @@
-import { AgentConfigState, initialAgentConfigState } from './slices/agentConfig/initialState';
 import { ChatState, initialChatState } from './slices/chat/initialState';
 import { SessionState, initialSessionState } from './slices/session/initialState';
 
-export type SessionStoreState = SessionState & ChatState & AgentConfigState;
+export type SessionStoreState = SessionState & ChatState;
 
 export const initialState: SessionStoreState = {
   ...initialSessionState,
   ...initialChatState,
-  ...initialAgentConfigState,
 };
 
 export { initialLobeAgentConfig } from './slices/agentConfig';

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

@@ -1,66 +1,21 @@
-import { produce } from 'immer';
 import { StateCreator } from 'zustand/vanilla';
 
-import { promptPickEmoji, promptSummaryAgentName, promptSummaryDescription } from '@/prompts/agent';
 import { MetaData } from '@/types/meta';
 import { LobeAgentConfig } from '@/types/session';
-import { fetchPresetTaskResult } from '@/utils/fetch';
-import { setNamespace } from '@/utils/storeDebug';
 
 import { SessionStore } from '../../store';
 import { sessionSelectors } from '../session/selectors';
-import { SessionLoadingState } from './initialState';
-
-const t = setNamespace('agentConfig');
 
 /**
  * 代理行为接口
  */
 export interface AgentAction {
-  /**
-   * 自动选择表情
-   * @param id - 表情的 ID
-   */
-  autoPickEmoji: (id: string) => void;
-  /**
-   * 自动完成代理描述
-   * @param id - 代理的 ID
-   * @returns 一个 Promise，用于异步操作完成后的处理
-   */
-  autocompleteAgentDescription: (id: string) => Promise<void>;
-  /**
-   * 自动完成代理标题
-   * @param id - 代理的 ID
-   * @returns 一个 Promise，用于异步操作完成后的处理
-   */
-  autocompleteAgentTitle: (id: string) => Promise<void>;
-  autocompleteMeta: (key: keyof MetaData) => void;
-
-  /**
-   * 自动完成会话代理元数据
-   * @param id - 代理的 ID
-   */
-  autocompleteSessionAgentMeta: (id: string, replace?: boolean) => void;
-  /**
-   * 内部更新代理元数据
-   * @param id - 代理的 ID
-   * @returns 任意类型的返回值
-   */
-  internalUpdateAgentMeta: (id: string) => any;
-
-  toggleAgentPlugin: (pluginId: string, checked: boolean) => void;
   /**
    * 更新代理配置
    * @param config - 部分 LobeAgentConfig 的配置
    */
   updateAgentConfig: (config: Partial<LobeAgentConfig>) => void;
   updateAgentMeta: (meta: Partial<MetaData>) => void;
-  /**
-   * 更新加载状态
-   * @param key - SessionLoadingState 的键
-   * @param value - 加载状态的值
-   */
-  updateLoadingState: (key: keyof SessionLoadingState, value: boolean) => void;
 }
 
 export const createAgentSlice: StateCreator<
@@ -69,147 +24,6 @@ export const createAgentSlice: StateCreator<
   [],
   AgentAction
 > = (set, get) => ({
-  autoPickEmoji: async (id) => {
-    const { dispatchSession } = get();
-    const session = sessionSelectors.getSessionById(id)(get());
-    if (!session) return;
-
-    const systemRole = session.config.systemRole;
-
-    const emoji = await fetchPresetTaskResult({
-      onLoadingChange: (loading) => {
-        get().updateLoadingState('avatar', loading);
-      },
-      params: promptPickEmoji(systemRole),
-    });
-
-    if (emoji) {
-      dispatchSession({ id, key: 'avatar', type: 'updateSessionMeta', value: emoji });
-    }
-  },
-
-  autocompleteAgentDescription: async (id) => {
-    const { dispatchSession, updateLoadingState, internalUpdateAgentMeta } = get();
-    const session = sessionSelectors.getSessionById(id)(get());
-    if (!session) return;
-
-    const systemRole = session.config.systemRole;
-
-    if (!systemRole) return;
-
-    const preValue = session.meta.description;
-
-    // 替换为 ...
-    dispatchSession({ id, key: 'description', type: 'updateSessionMeta', value: '...' });
-
-    fetchPresetTaskResult({
-      onError: () => {
-        dispatchSession({
-          id,
-          key: 'description',
-          type: 'updateSessionMeta',
-          value: preValue,
-        });
-      },
-      onLoadingChange: (loading) => {
-        updateLoadingState('description', loading);
-      },
-      onMessageHandle: internalUpdateAgentMeta(id)('description'),
-      params: promptSummaryDescription(systemRole),
-    });
-  },
-
-  autocompleteAgentTitle: async (id) => {
-    const { dispatchSession, updateLoadingState, internalUpdateAgentMeta } = get();
-    const session = sessionSelectors.getSessionById(id)(get());
-    if (!session) return;
-
-    const systemRole = session.config.systemRole;
-
-    if (!systemRole) return;
-
-    const previousTitle = session.meta.title;
-
-    // 替换为 ...
-    dispatchSession({ id, key: 'title', type: 'updateSessionMeta', value: '...' });
-
-    fetchPresetTaskResult({
-      onError: () => {
-        dispatchSession({ id, key: 'title', type: 'updateSessionMeta', value: previousTitle });
-      },
-      onLoadingChange: (loading) => {
-        updateLoadingState('title', loading);
-      },
-      onMessageHandle: internalUpdateAgentMeta(id)('title'),
-      params: promptSummaryAgentName(systemRole),
-    });
-  },
-
-  autocompleteMeta: (key) => {
-    const { activeId, autoPickEmoji, autocompleteAgentTitle, autocompleteAgentDescription } = get();
-    if (!activeId) return;
-
-    switch (key) {
-      case 'avatar': {
-        autoPickEmoji(activeId);
-        return;
-      }
-
-      case 'description': {
-        autocompleteAgentDescription(activeId);
-        return;
-      }
-
-      case 'title': {
-        autocompleteAgentTitle(activeId);
-      }
-    }
-  },
-
-  autocompleteSessionAgentMeta: (id, replace) => {
-    const session = sessionSelectors.getSessionById(id)(get());
-
-    if (!session) return;
-
-    if (!session.meta.title || replace) {
-      get().autocompleteAgentTitle(id);
-    }
-
-    if (!session.meta.description || replace) {
-      get().autocompleteAgentDescription(id);
-    }
-
-    if (!session.meta.avatar || replace) {
-      get().autoPickEmoji(id);
-    }
-  },
-  internalUpdateAgentMeta: (id: string) => (key: keyof MetaData) => {
-    let value = '';
-    return (text: string) => {
-      value += text;
-      get().dispatchSession({ id, key, type: 'updateSessionMeta', value });
-    };
-  },
-  toggleAgentPlugin: (id: string) => {
-    const { activeId } = get();
-    const session = sessionSelectors.currentSession(get());
-    if (!activeId || !session) return;
-
-    const config = produce(session.config, (draft) => {
-      if (draft.plugins === undefined) {
-        draft.plugins = [id];
-      } else {
-        const plugins = draft.plugins;
-        if (plugins.includes(id)) {
-          plugins.splice(plugins.indexOf(id), 1);
-        } else {
-          plugins.push(id);
-        }
-      }
-    });
-
-    get().dispatchSession({ config, id: activeId, type: 'updateSessionConfig' });
-  },
   updateAgentConfig: (config) => {
     const { activeId } = get();
     const session = sessionSelectors.currentSession(get());
@@ -233,11 +47,4 @@ export const createAgentSlice: StateCreator<
       }
     }
   },
-  updateLoadingState: (key, value) => {
-    set(
-      { autocompleteLoading: { ...get().autocompleteLoading, [key]: value } },
-      false,
-      t('updateLoadingState', { key, value }),
-    );
-  },
 });

package/src/store/session/slices/agentConfig/initialState.ts

@@ -1,22 +1,4 @@
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
-import { MetaData } from '@/types/meta';
 import { LobeAgentConfig } from '@/types/session';
 
-export type SessionLoadingState = Record<Partial<keyof MetaData>, boolean>;
-
-export interface AgentConfigState {
-  autocompleteLoading: SessionLoadingState;
-}
-
 export const initialLobeAgentConfig: LobeAgentConfig = DEFAULT_AGENT_CONFIG;
-
-export const initialAgentConfigState: AgentConfigState = {
-  // // loading 中间态
-  autocompleteLoading: {
-    avatar: false,
-    backgroundColor: false,
-    description: false,
-    tag: false,
-    title: false,
-  },
-};

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

@@ -2,7 +2,6 @@ import { t } from 'i18next';
 import { merge } from 'lodash-es';
 
 import { DEFAULT_AVATAR, DEFAULT_BACKGROUND_COLOR } from '@/const/meta';
-import { Autocomplete } from '@/features/AgentSetting/AgentMeta';
 import { SessionStore } from '@/store/session';
 import { LanguageModel } from '@/types/llm';
 import { MetaData } from '@/types/meta';
@@ -16,13 +15,6 @@ const currentAgentMeta = (s: SessionStore): MetaData => {
   return { avatar: DEFAULT_AVATAR, backgroundColor: DEFAULT_BACKGROUND_COLOR, ...session?.meta };
 };
 
-const currentAutocomplete = (s: SessionStore): Autocomplete => ({
-  autocompleteMeta: s.autocompleteMeta,
-  autocompleteSessionAgentMeta: s.autocompleteSessionAgentMeta,
-  id: s.activeId,
-  loading: s.autocompleteLoading,
-});
-
 const currentAgentTitle = (s: SessionStore) => currentAgentMeta(s)?.title || t('defaultSession');
 
 const currentAgentConfig = (s: SessionStore) => {
@@ -84,7 +76,6 @@ export const agentSelectors = {
   currentAgentPlugins,
   currentAgentSystemRole,
   currentAgentTitle,
-  currentAutocomplete,
   getAvatar,
   getDescription,
   getTitle,

package/src/store/session/slices/chat/actions/message.ts

@@ -263,8 +263,7 @@ export const chatMessage: StateCreator<
   },
 
   sendMessage: async (message) => {
-    const { dispatchMessage, realFetchAIResponse, autocompleteSessionAgentMeta, activeTopicId } =
-      get();
+    const { dispatchMessage, realFetchAIResponse, activeTopicId } = get();
     const session = sessionSelectors.currentSession(get());
     if (!session || !message) return;
 
@@ -281,10 +280,11 @@ export const chatMessage: StateCreator<
 
     await realFetchAIResponse(messages, userId);
 
-    const chats = chatSelectors.currentChats(get());
-    if (chats.length >= 4) {
-      autocompleteSessionAgentMeta(session.id);
-    }
+    // TODO: AgentSettings 提供一个外部调用的 hooks
+    // const chats = chatSelectors.currentChats(get());
+    // if (chats.length >= 4) {
+    //   autocompleteSessionAgentMeta(session.id);
+    // }
   },
 
   stopGenerateMessage: () => {

package/src/types/session.ts

@@ -1,6 +1,6 @@
 import { ChatMessageMap } from './chatMessage';
 import { LLMExample, LLMParams, LanguageModel } from './llm';
-import { BaseDataModel } from './meta';
+import { BaseDataModel, MetaData } from './meta';
 import { ChatTopicMap } from './topic';
 
 export enum LobeSessionType {
@@ -84,6 +84,13 @@ export interface LobeAgentSession extends LobeSessionBase {
   type: LobeSessionType.Agent;
 }
 
+export interface LobeAgentSettings {
+  /**
+   * 语言模型角色设定
+   */
+  config: LobeAgentConfig;
+  meta: MetaData;
+}
 export type LobeSessions = Record<string, LobeAgentSession>;
 
 export type LobeAgentConfigKeys =

package/src/features/AgentSetting/index.ts

@@ -1,4 +0,0 @@
-export { default as AgentConfig } from './AgentConfig';
-export { default as AgentMeta } from './AgentMeta';
-export { default as AgentPlugin } from './AgentPlugin';
-export { default as AgentPrompt } from './AgentPrompt';