✨ feat: Add agent settings functionality

- Add function for setting a namespace for logging purposes
- Implement actions for modifying the settings state in the application
- Update configuration file for agent settings
- Add new file for debugging purposes

This commit introduces new features to enhance the agent settings functionality, including the ability to set a namespace for logging, modify the settings state, and debug the application. It also includes updates to the configuration file.

src/features/AgentSetting/AgentConfig/index.tsx

@@ -59,6 +59,7 @@ const AgentConfig = memo<AgentConfigProps>(({ config, updateConfig }) => {
         {
           children: <SliderWithInput max={32} min={0} />,
           desc: t('settingChat.historyCount.desc'),
+          divider: false,
           hidden: !config.enableHistoryCount,
           label: t('settingChat.historyCount.title'),
           name: 'historyCount',
@@ -73,6 +74,7 @@ const AgentConfig = memo<AgentConfigProps>(({ config, updateConfig }) => {
         {
           children: <SliderWithInput max={32} min={0} />,
           desc: t('settingChat.compressThreshold.desc'),
+          divider: false,
           hidden: !config.enableCompressThreshold,
           label: t('settingChat.compressThreshold.title'),
           name: 'compressThreshold',
@@ -139,6 +141,7 @@ const AgentConfig = memo<AgentConfigProps>(({ config, updateConfig }) => {
         {
           children: <SliderWithInput max={32_000} min={0} step={100} />,
           desc: t('settingModel.maxTokens.desc'),
+          divider: false,
           hidden: !config?.enableMaxTokens,
           label: t('settingModel.maxTokens.title'),
           name: ['params', 'max_tokens'],

src/features/AgentSetting/AgentMeta/index.tsx

@@ -109,6 +109,7 @@ const AgentMeta = memo<AgentMetaProps>(({ config, meta, updateMeta, autocomplete
               onChange={(backgroundColor) => updateMeta({ backgroundColor })}
             />
           ),
+          divider: false,
           label: t('settingAgent.backgroundColor.title'),
           minWidth: undefined,
         },

src/pages/chat/[id]/Sidebar/Topic/TopicContent.tsx

@@ -4,6 +4,7 @@ import { createStyles } from 'antd-style';
 import { MoreVertical, PencilLine, Star, Trash } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import { useSessionStore } from '@/store/session';
@@ -82,7 +83,7 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
   );
 
   return (
-    <>
+    <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
       <ActionIcon
         color={fav ? theme.colorWarning : undefined}
         fill={fav ? theme.colorWarning : 'transparent'}
@@ -93,7 +94,6 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
         }}
         size={'small'}
       />
-
       {!editing ? (
         <Paragraph
           className={styles.title}
@@ -115,11 +115,9 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
           showEditIcon={false}
           size={'small'}
           style={{
-            background: theme.colorBgContainer,
-            borderRadius: 6,
             height: 28,
-            padding: '0 2px',
           }}
+          type={'pure'}
           value={title}
         />
       )}
@@ -144,7 +142,7 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav }) => {
           />
         </Dropdown>
       )}
-    </>
+    </Flexbox>
   );
 });
 

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

@@ -6,9 +6,12 @@ import { SessionStore, sessionSelectors } from '@/store/session';
 import { MetaData } from '@/types/meta';
 import { LobeAgentConfig } from '@/types/session';
 import { fetchPresetTaskResult } from '@/utils/fetch';
+import { setNamespace } from '@/utils/storeDebug';
 
 import { SessionLoadingState } from './initialState';
 
+const t = setNamespace('agentConfig');
+
 /**
  * 代理行为接口
  */
@@ -234,6 +237,10 @@ export const createAgentSlice: StateCreator<
     }
   },
   updateLoadingState: (key, value) => {
-    set({ autocompleteLoading: { ...get().autocompleteLoading, [key]: value } });
+    set(
+      { autocompleteLoading: { ...get().autocompleteLoading, [key]: value } },
+      false,
+      t('updateLoadingState', { key, value }),
+    );
   },
 });

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

@@ -8,10 +8,13 @@ import { SessionStore, agentSelectors, chatSelectors, sessionSelectors } from '@
 import { ChatMessage, OpenAIFunctionCall } from '@/types/chatMessage';
 import { fetchSSE } from '@/utils/fetch';
 import { isFunctionMessage } from '@/utils/message';
+import { setNamespace } from '@/utils/storeDebug';
 import { nanoid } from '@/utils/uuid';
 
 import { MessageDispatch, messagesReducer } from '../reducers/message';
 
+const t = setNamespace('chat/message');
+
 /**
  * 聊天操作
  */
@@ -111,7 +114,11 @@ export const chatMessage: StateCreator<
 
   generateMessage: async (messages, assistantId) => {
     const { dispatchMessage } = get();
-    set({ chatLoadingId: assistantId });
+    set(
+      { chatLoadingId: assistantId },
+      false,
+      t('generateMessage(start)', { assistantId, messages }),
+    );
     const config = agentSelectors.currentAgentConfig(get());
 
     const compiler = template(config.inputTemplate, { interpolate: /{{([\S\s]+?)}}/g });
@@ -180,7 +187,7 @@ export const chatMessage: StateCreator<
       },
     });
 
-    set({ chatLoadingId: undefined });
+    set({ chatLoadingId: undefined }, false, t('generateMessage(end)'));
 
     return { isFunctionCall };
   },

src/store/session/slices/chat/actions/topic.ts

@@ -4,10 +4,12 @@ import { LOADING_FLAT } from '@/const/message';
 import { promptSummaryTitle } from '@/prompts/chat';
 import { SessionStore, chatSelectors, sessionSelectors, topicSelectors } from '@/store/session';
 import { fetchPresetTaskResult } from '@/utils/fetch';
+import { setNamespace } from '@/utils/storeDebug';
 import { nanoid } from '@/utils/uuid';
 
 import { ChatTopicDispatch, topicReducer } from '../reducers/topic';
 
+const t = setNamespace('chat/topic');
 export interface ChatTopicAction {
   /**
    * 分发主题
@@ -116,9 +118,9 @@ export const chatTopic: StateCreator<
     });
   },
   toggleTopic: (id) => {
-    set({ activeTopicId: id });
+    set({ activeTopicId: id }, false, t('toggleTopic'));
   },
   updateTopicLoading: (id) => {
-    set({ topicLoadingId: id });
+    set({ topicLoadingId: id }, false, t('updateTopicLoading'));
   },
 });

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

@@ -5,10 +5,12 @@ import { StateCreator } from 'zustand/vanilla';
 
 import { SessionStore, initLobeSession } from '@/store/session';
 import { LobeAgentSession, LobeSessions } from '@/types/session';
+import { setNamespace } from '@/utils/storeDebug';
 import { uuid } from '@/utils/uuid';
 
 import { SessionDispatch, sessionsReducer } from './reducers/session';
 
+const t = setNamespace('session');
 export interface SessionAction {
   activeSession: (sessionId: string) => void;
   clearSessions: () => void;
@@ -63,11 +65,11 @@ export const createSessionSlice: StateCreator<
   SessionAction
 > = (set, get) => ({
   activeSession: (sessionId) => {
-    set({ activeId: sessionId });
+    set({ activeId: sessionId }, false, t('activeSession'));
   },
 
   clearSessions: () => {
-    set({ sessions: {} });
+    set({ sessions: {} }, false, t('clearSessions'));
   },
 
   createSession: async () => {
@@ -91,24 +93,29 @@ export const createSessionSlice: StateCreator<
 
   dispatchSession: (payload) => {
     const { type, ...res } = payload;
-    set({ sessions: sessionsReducer(get().sessions, payload) }, false, {
-      payload: res,
-      type: `dispatchChat/${type}`,
-    });
+    set(
+      { sessions: sessionsReducer(get().sessions, payload) },
+      false,
+      t(`dispatchChat/${type}`, res),
+    );
   },
 
   importSessions: (importSessions) => {
     const { sessions } = get();
-    set({
-      sessions: produce(sessions, (draft) => {
-        for (const [id, session] of Object.entries(importSessions)) {
-          // 如果已经存在，则跳过
-          if (draft[id]) continue;
+    set(
+      {
+        sessions: produce(sessions, (draft) => {
+          for (const [id, session] of Object.entries(importSessions)) {
+            // 如果已经存在，则跳过
+            if (draft[id]) continue;
 
-          draft[id] = session;
-        }
-      }),
-    });
+            draft[id] = session;
+          }
+        }),
+      },
+      false,
+      t('importSessions', importSessions),
+    );
   },
   // genShareUrl: () => {
   //   const session = sessionSelectors.currentSession(get());

src/store/settings/action.ts

@@ -4,14 +4,18 @@ 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 { AppSettingsState } from './initialState';
 import type { SettingsStore } from './store';
 
+const t = setNamespace('settings');
+
 /**
  * 设置操作
  */
@@ -69,79 +73,79 @@ export const createSettings: StateCreator<
     });
   },
   resetAgentConfig: () => {
-    const settings = get().settings;
-    settings.defaultAgent.config = DEFAULT_AGENT.config;
-    set({ settings });
+    const settings = produce(get().settings, (draft: GlobalSettings) => {
+      draft.defaultAgent.config = DEFAULT_AGENT.config;
+    });
+    set({ settings }, false, t('resetAgentConfig'));
   },
   resetAgentMeta: () => {
-    const settings = get().settings;
-    settings.defaultAgent.meta = DEFAULT_AGENT.meta;
-    set({ settings });
+    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 } });
+    set({ settings: { ...settings, ...DEFAULT_BASE_SETTINGS } }, false, t('resetBaseSettings'));
   },
   resetDefaultAgent: () => {
-    const settings = get().settings;
-    settings.defaultAgent = DEFAULT_AGENT;
-    set({ settings });
+    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'));
   },
   setAgentConfig: (config) => {
-    const settings = get().settings;
-    const oldConfig = settings.defaultAgent.config;
-    settings.defaultAgent.config = merge(config, oldConfig);
+    const settings = produce(get().settings, (draft: GlobalSettings) => {
+      const oldConfig = draft.defaultAgent.config as LobeAgentConfig;
+      draft.defaultAgent.config = merge(oldConfig, config);
+    });
 
-    set({ settings });
+    set({ settings }, false, t('setAgentConfig', config));
   },
   setAgentMeta: (meta) => {
-    const settings = get().settings;
-    const oldMeta = settings.defaultAgent.meta;
-    settings.defaultAgent.meta = merge(meta, oldMeta);
+    const settings = produce(get().settings, (draft) => {
+      const oldMeta = draft.defaultAgent.meta as MetaData;
+      draft.defaultAgent.meta = merge(oldMeta, meta);
+    });
 
-    set({ settings });
+    set({ settings }, false, t('setAgentMeta', meta));
   },
   setAppSettings: (settings) => {
-    set({ ...settings });
+    set({ ...settings }, false, t('setAppSettings', settings));
   },
   setSettings: (settings) => {
     const oldSetting = get().settings;
-    set({ settings: merge(settings, oldSetting) });
+    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 = get().settings;
-
-    settings.defaultAgent.config = produce(
-      settings.defaultAgent.config,
-      (draft: LobeAgentConfig) => {
-        if (draft.plugins === undefined) {
-          draft.plugins = [id];
+    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 {
-          const plugins = draft.plugins;
-          if (plugins.includes(id)) {
-            plugins.splice(plugins.indexOf(id), 1);
-          } else {
-            plugins.push(id);
-          }
+          oldConfig.plugins.push(id);
         }
-      },
-    );
+      }
+    });
 
-    set({ settings });
+    set({ settings }, false, t('toggleAgentPlugin', id));
   },
 });

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