@lobehub/chat 0.63.0 → 0.63.2

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [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>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor the selectors import.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor the selectors import, closes [#120](https://github.com/lobehub/lobe-chat/issues/120) ([6646502](https://github.com/lobehub/lobe-chat/commit/6646502))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.63.0](https://github.com/lobehub/lobe-chat/compare/v0.62.1...v0.63.0)
 
 <sup>Released on **2023-08-27**</sup>

package/package.json

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

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;
+    }
+  }
+};