@lobehub/chat 0.33.0 → 0.35.0

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

@@ -0,0 +1,25 @@
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { AgentConfig, AgentMeta, AgentPlugin, AgentPrompt } from '@/features/AgentSetting';
+import { settingsSelectors, useSettings } from '@/store/settings';
+
+const Agent = memo(() => {
+  const config = useSettings(settingsSelectors.currentAgentConfig, isEqual);
+  const meta = useSettings(settingsSelectors.currentAgentMeta, isEqual);
+  const [setAgentConfig, setAgentMeta, toggleAgentPlugin] = useSettings(
+    (s) => [s.setAgentConfig, s.setAgentMeta, s.toggleAgentPlugin],
+    shallow,
+  );
+  return (
+    <>
+      <AgentPrompt config={config} updateConfig={setAgentConfig} />
+      <AgentMeta config={config} meta={meta} updateMeta={setAgentMeta} />
+      <AgentConfig config={config} updateConfig={setAgentConfig} />
+      <AgentPlugin config={config} updateConfig={toggleAgentPlugin} />
+    </>
+  );
+});
+
+export default Agent;

package/src/pages/{setting/SettingForm.tsx → settings/Settings/Common.tsx}

@@ -1,23 +1,22 @@
 import { Form, type ItemGroup, ThemeSwitch } from '@lobehub/ui';
-import { Form as AntForm, App, Button, Input, Select, Switch } from 'antd';
+import { Form as AntForm, App, Button, Input, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { debounce } from 'lodash-es';
-import { AppWindow, BrainCog, MessagesSquare, Palette, Webhook } from 'lucide-react';
+import { AppWindow, Palette, Webhook } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import SliderWithInput from 'src/components/SliderWithInput';
 import { shallow } from 'zustand/shallow';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
+import { DEFAULT_SETTINGS } from '@/const/settings';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { options } from '@/locales/options';
 import { useSessionStore } from '@/store/session';
 import { settingsSelectors, useSettings } from '@/store/settings';
-import { DEFAULT_SETTINGS } from '@/store/settings/initialState';
-import { LanguageModel } from '@/types/llm';
 import { ConfigKeys } from '@/types/settings';
 
-import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
+import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from '../ThemeSwatches';
 
 type SettingItemGroup = ItemGroup & {
   children: {
@@ -25,7 +24,7 @@ type SettingItemGroup = ItemGroup & {
   }[];
 };
 
-const SettingForm = memo(() => {
+const Common = memo(() => {
   const { t } = useTranslation('setting');
   const [form] = AntForm.useForm();
   const clearSessions = useSessionStore((s) => s.clearSessions);
@@ -147,111 +146,6 @@ const SettingForm = memo(() => {
     [settings],
   );
 
-  const chat: SettingItemGroup = useMemo(
-    () => ({
-      children: [
-        {
-          children: <Switch />,
-          label: t('settingChat.enableHistoryCount.title'),
-          minWidth: undefined,
-          name: 'enableHistoryCount',
-          valuePropName: 'checked',
-        },
-        {
-          children: <SliderWithInput max={32} min={0} />,
-          desc: t('settingChat.historyCount.desc'),
-          hidden: !settings.enableHistoryCount,
-          label: t('settingChat.historyCount.title'),
-          name: 'historyCount',
-        },
-        {
-          children: <Switch />,
-          label: t('settingChat.enableCompressThreshold.title'),
-          minWidth: undefined,
-          name: 'enableCompressThreshold',
-          valuePropName: 'checked',
-        },
-        {
-          children: <SliderWithInput max={32} min={0} />,
-          desc: t('settingChat.compressThreshold.desc'),
-          hidden: !settings.enableCompressThreshold,
-          label: t('settingChat.compressThreshold.title'),
-          name: 'compressThreshold',
-        },
-      ],
-      icon: MessagesSquare,
-      title: t('settingChat.title'),
-    }),
-    [settings],
-  );
-
-  const model: SettingItemGroup = useMemo(
-    () => ({
-      children: [
-        {
-          children: (
-            <Select
-              options={Object.values(LanguageModel).map((value) => ({
-                label: value,
-                value,
-              }))}
-            />
-          ),
-          desc: t('settingModel.model.desc'),
-          label: t('settingModel.model.title'),
-          name: 'model',
-          tag: 'model',
-        },
-        {
-          children: <SliderWithInput max={1} min={0} step={0.1} />,
-          desc: t('settingModel.temperature.desc'),
-          label: t('settingModel.temperature.title'),
-          name: 'temperature',
-          tag: 'temperature',
-        },
-        {
-          children: <SliderWithInput max={1} min={0} step={0.1} />,
-          desc: t('settingModel.topP.desc'),
-          label: t('settingModel.topP.title'),
-          name: 'topP',
-          tag: 'top_p',
-        },
-        {
-          children: <SliderWithInput max={2} min={-2} step={0.1} />,
-          desc: t('settingModel.presencePenalty.desc'),
-          label: t('settingModel.presencePenalty.title'),
-          name: 'presencePenalty',
-          tag: 'presence_penalty',
-        },
-        {
-          children: <SliderWithInput max={2} min={-2} step={0.1} />,
-          desc: t('settingModel.frequencyPenalty.desc'),
-          label: t('settingModel.frequencyPenalty.title'),
-          name: 'frequencyPenalty',
-          tag: 'frequency_penalty',
-        },
-        {
-          children: <Switch />,
-          label: t('settingModel.enableMaxTokens.title'),
-          minWidth: undefined,
-          name: 'enableMaxTokens',
-          valuePropName: 'checked',
-        },
-        {
-          children: <SliderWithInput max={32_000} min={0} step={100} />,
-          desc: t('settingModel.maxTokens.desc'),
-          hidden: !settings.enableMaxTokens,
-          label: t('settingModel.maxTokens.title'),
-          name: 'maxTokens',
-          tag: 'max_tokens',
-        },
-      ],
-      icon: BrainCog,
-      title: t('settingModel.title'),
-    }),
-    [settings],
-  );
-
   const system: SettingItemGroup = useMemo(
     () => ({
       children: [
@@ -288,7 +182,7 @@ const SettingForm = memo(() => {
     [settings],
   );
 
-  const items = useMemo(() => [theme, openAI, chat, model, system], [settings]);
+  const items = useMemo(() => [theme, openAI, system], [settings]);
 
   return (
     <Form
@@ -301,4 +195,4 @@ const SettingForm = memo(() => {
   );
 });
 
-export default SettingForm;
+export default Common;

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

@@ -0,0 +1,50 @@
+import { Segmented } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center } from 'react-layout-kit';
+
+import Agent from './Agent';
+import Common from './Common';
+
+const useStyles = createStyles(({ css, token }) => ({
+  tabs: css`
+    padding: 4px;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+
+    &:hover {
+      border-color: ${token.colorBorder};
+    }
+  `,
+}));
+
+enum Tabs {
+  common,
+  agent,
+}
+
+const Settings = memo(() => {
+  const [tab, setTab] = useState<Tabs>(Tabs.common);
+  const { styles } = useStyles();
+  const { t } = useTranslation('setting');
+
+  return (
+    <Center gap={16} width={'100%'}>
+      <div className={styles.tabs}>
+        <Segmented
+          onChange={(e) => setTab(e as Tabs)}
+          options={[
+            { label: t('tab.common'), value: Tabs.common },
+            { label: t('tab.agent'), value: Tabs.agent },
+          ]}
+          value={tab}
+        />
+      </div>
+      {tab === Tabs.common && <Common />}
+      {tab === Tabs.agent && <Agent />}
+    </Center>
+  );
+});
+
+export default Settings;

package/src/pages/{setting → settings}/index.page.tsx

@@ -4,7 +4,7 @@ import { Flexbox } from 'react-layout-kit';
 import HeaderSpacing from '@/components/HeaderSpacing';
 
 import Header from './Header';
-import SettingForm from './SettingForm';
+import Settings from './Settings';
 import SettingLayout from './layout';
 
 const Setting = memo(() => {
@@ -13,7 +13,7 @@ const Setting = memo(() => {
       <Header />
       <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
         <HeaderSpacing />
-        <SettingForm />
+        <Settings />
       </Flexbox>
     </SettingLayout>
   );

package/src/pages/{setting → settings}/layout.tsx

@@ -21,7 +21,7 @@ const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
   useEffect(() => {
     const hasRehydrated = useSettings.persist.hasHydrated();
     if (hasRehydrated) {
-      useSettings.setState({ sidebarKey: 'setting' });
+      useSettings.setState({ sidebarKey: 'settings' });
     }
   }, []);
 

package/src/plugins/searchEngine/Render.tsx

@@ -1,4 +1,5 @@
 import { createStyles } from 'antd-style';
+import Image from 'next/image';
 import Link from 'next/link';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -59,11 +60,12 @@ const Render = memo<PluginRenderProps<Result>>(({ content }) => {
               <Flexbox>
                 <Flexbox align={'center'} gap={12} horizontal>
                   {item.favicon && (
-                    <img
+                    <Image
                       alt={item.title || item.link}
                       className={styles.favicon}
                       height={24}
                       src={item.favicon}
+                      unoptimized
                       width={24}
                     />
                   )}

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

@@ -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,8 +114,12 @@ 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 });
 
@@ -137,7 +144,7 @@ export const chatMessage: StateCreator<
     // 2. TODO 按参数设定截断长度
 
     // 3. 添加 systemRole
-    const { systemRole } = agentSelectors.currentAgentConfigSafe(get());
+    const { systemRole } = agentSelectors.currentAgentConfig(get());
     if (systemRole) {
       postMessages.unshift({ content: systemRole, role: 'system' } as ChatMessage);
     }
@@ -180,7 +187,7 @@ export const chatMessage: StateCreator<
       },
     });
 
-    set({ chatLoadingId: undefined });
+    set({ chatLoadingId: undefined }, false, t('generateMessage(end)'));
 
     return { isFunctionCall };
   },
@@ -188,7 +195,7 @@ export const chatMessage: StateCreator<
   realFetchAIResponse: async (messages, userMessageId) => {
     const { dispatchMessage, generateMessage, triggerFunctionCall, activeTopicId } = get();
 
-    const { model } = agentSelectors.currentAgentConfigSafe(get());
+    const { model } = agentSelectors.currentAgentConfig(get());
 
     // 添加一个空的信息用于放置 ai 响应，注意顺序不能反
     // 因为如果顺序反了，messages 中将包含新增的 ai message

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(),
 };