@lobehub/chat 0.32.0 → 0.34.0

package/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 }),
+    );
   },
 });

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

@@ -1,4 +1,4 @@
-import { LanguageModel } from '@/types/llm';
+import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { MetaData } from '@/types/meta';
 import { LobeAgentConfig } from '@/types/session';
 
@@ -8,18 +8,7 @@ export interface AgentConfigState {
   autocompleteLoading: SessionLoadingState;
 }
 
-export const initialLobeAgentConfig: LobeAgentConfig = {
-  displayMode: 'chat',
-  model: LanguageModel.GPT3_5,
-  params: {
-    frequency_penalty: 0,
-    presence_penalty: 0,
-    temperature: 0.6,
-    top_p: 1,
-  },
-  plugins: [],
-  systemRole: '',
-};
+export const initialLobeAgentConfig: LobeAgentConfig = DEFAULT_AGENT_CONFIG;
 
 export const initialAgentConfigState: AgentConfigState = {
   // // loading 中间态

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

@@ -1,10 +1,11 @@
 import { t } from 'i18next';
+import { defaults } 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';
-import { LobeAgentConfig } from '@/types/session';
 
 import { sessionSelectors } from '../session';
 import { initialLobeAgentConfig } from './initialState';
@@ -15,6 +16,13 @@ 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 currentAgentDescription = (s: SessionStore) =>
@@ -34,15 +42,11 @@ const currentAgentAvatar = (s: SessionStore) => {
 
 const currentAgentConfig = (s: SessionStore) => {
   const session = sessionSelectors.currentSession(s);
-  return session?.config;
-};
-
-const currentAgentConfigSafe = (s: SessionStore): LobeAgentConfig => {
-  return currentAgentConfig(s) || initialLobeAgentConfig;
+  return defaults(session?.config, initialLobeAgentConfig);
 };
 
 const currentAgentSystemRole = (s: SessionStore) => {
-  return currentAgentConfigSafe(s).systemRole;
+  return currentAgentConfig(s).systemRole;
 };
 
 const currentAgentModel = (s: SessionStore): LanguageModel => {
@@ -52,7 +56,7 @@ const currentAgentModel = (s: SessionStore): LanguageModel => {
 };
 
 const hasSystemRole = (s: SessionStore) => {
-  const config = currentAgentConfigSafe(s);
+  const config = currentAgentConfig(s);
 
   return !!config.systemRole;
 };
@@ -64,12 +68,12 @@ export const agentSelectors = {
   currentAgentAvatar,
   currentAgentBackgroundColor,
   currentAgentConfig,
-  currentAgentConfigSafe,
   currentAgentDescription,
   currentAgentMeta,
   currentAgentModel,
   currentAgentSystemRole,
   currentAgentTitle,
+  currentAutocomplete,
   getAvatar,
   getTitle,
   hasSystemRole,

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

@@ -1,3 +1,4 @@
+import { template } from 'lodash-es';
 import { StateCreator } from 'zustand/vanilla';
 
 import { LOADING_FLAT } from '@/const/message';
@@ -7,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');
+
 /**
  * 聊天操作
  */
@@ -110,11 +114,48 @@ export const chatMessage: StateCreator<
 
   generateMessage: async (messages, assistantId) => {
     const { dispatchMessage } = get();
-    set({ chatLoadingId: assistantId });
-    const config = agentSelectors.currentAgentConfigSafe(get());
+    set(
+      { chatLoadingId: assistantId },
+      false,
+      t('generateMessage(start)', { assistantId, messages }),
+    );
+    const config = agentSelectors.currentAgentConfig(get());
+
+    const compiler = template(config.inputTemplate, { interpolate: /{{([\S\s]+?)}}/g });
+
+    // 对 message 做统一预处理
+
+    // 1. 替换 inputMessage 模板
+    const postMessages = !config.inputTemplate
+      ? messages
+      : messages.map((m) => {
+          if (m.role === 'user') {
+            try {
+              return { ...m, content: compiler({ text: m.content }) };
+            } catch (error) {
+              console.error(error);
+
+              return m;
+            }
+          }
+          return m;
+        });
+
+    // 2. TODO 按参数设定截断长度
+
+    // 3. 添加 systemRole
+    const { systemRole } = agentSelectors.currentAgentConfig(get());
+    if (systemRole) {
+      postMessages.unshift({ content: systemRole, role: 'system' } as ChatMessage);
+    }
 
     const fetcher = () =>
-      fetchChatModel({ messages, model: config.model, ...config.params, plugins: config.plugins });
+      fetchChatModel({
+        messages: postMessages,
+        model: config.model,
+        ...config.params,
+        plugins: config.plugins,
+      });
 
     let output = '';
     let isFunctionCall = false;
@@ -146,7 +187,7 @@ export const chatMessage: StateCreator<
       },
     });
 
-    set({ chatLoadingId: undefined });
+    set({ chatLoadingId: undefined }, false, t('generateMessage(end)'));
 
     return { isFunctionCall };
   },
@@ -154,13 +195,9 @@ export const chatMessage: StateCreator<
   realFetchAIResponse: async (messages, userMessageId) => {
     const { dispatchMessage, generateMessage, triggerFunctionCall, activeTopicId } = get();
 
-    // 添加 systemRole
-    const { systemRole, model } = agentSelectors.currentAgentConfigSafe(get());
-    if (systemRole) {
-      messages.unshift({ content: systemRole, role: 'system' } as ChatMessage);
-    }
+    const { model } = agentSelectors.currentAgentConfig(get());
 
-    // 再添加一个空的信息用于放置 ai 响应，注意顺序不能反
+    // 添加一个空的信息用于放置 ai 响应，注意顺序不能反
     // 因为如果顺序反了，messages 中将包含新增的 ai message
     const mid = nanoid();
 
@@ -283,10 +320,10 @@ export const chatMessage: StateCreator<
 
     const mid = nanoid();
 
-    dispatchMessage({ id: mid, message: LOADING_FLAT, role: 'assistant', type: 'addMessage' });
-
     const chats = chatSelectors.currentChats(get());
 
+    dispatchMessage({ id: mid, message: LOADING_FLAT, role: 'assistant', type: 'addMessage' });
+
     await generateMessage(chats, mid);
   },
 });

package/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'));
   },
 });

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

@@ -23,7 +23,7 @@ export const currentChats = (s: SessionStore): ChatMessage[] => {
 };
 
 export const systemRoleSel = (s: SessionStore): string => {
-  const config = agentSelectors.currentAgentConfigSafe(s);
+  const config = agentSelectors.currentAgentConfig(s);
 
   return config.systemRole;
 };

package/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;
-
-          draft[id] = session;
-        }
-      }),
-    });
+    set(
+      {
+        sessions: produce(sessions, (draft) => {
+          for (const [id, session] of Object.entries(importSessions)) {
+            // 如果已经存在，则跳过
+            if (draft[id]) continue;
+
+            draft[id] = session;
+          }
+        }),
+      },
+      false,
+      t('importSessions', importSessions),
+    );
   },
   // genShareUrl: () => {
   //   const session = sessionSelectors.currentSession(get());

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

@@ -1,3 +1,4 @@
+import { DEFAULT_AGENT_META } from '@/const/meta';
 import { LobeAgentSession, LobeSessionType } from '@/types/session';
 
 import { initialLobeAgentConfig } from '../agentConfig';
@@ -18,7 +19,7 @@ export const initLobeSession: LobeAgentSession = {
   config: initialLobeAgentConfig,
   createAt: Date.now(),
   id: '',
-  meta: {},
+  meta: DEFAULT_AGENT_META,
   type: LobeSessionType.Agent,
   updateAt: Date.now(),
 };

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;