@lobehub/chat 0.160.8 → 0.161.1

package/src/features/AgentSetting/AgentModal/ModelSelect.tsx

@@ -1,65 +1,17 @@
-import { Select, SelectProps } from 'antd';
-import { createStyles } from 'antd-style';
-import isEqual from 'fast-deep-equal';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 
-import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
-import { useUserStore } from '@/store/user';
-import { modelProviderSelectors } from '@/store/user/selectors';
-import { ModelProviderCard } from '@/types/llm';
+import Select from '@/features/ModelSelect';
 
 import { useStore } from '../store';
 
-const useStyles = createStyles(({ css, prefixCls }) => ({
-  select: css`
-    .${prefixCls}-select-dropdown .${prefixCls}-select-item-option-grouped {
-      padding-inline-start: 12px;
-    }
-  `,
-}));
-interface ModelOption {
-  label: any;
-  provider: string;
-  value: string;
-}
-
 const ModelSelect = memo(() => {
   const [model, updateConfig] = useStore((s) => [s.config.model, s.setAgentConfig]);
-  const enabledList = useUserStore(modelProviderSelectors.modelProviderListForModelSelect, isEqual);
-
-  const { styles } = useStyles();
-
-  const options = useMemo<SelectProps['options']>(() => {
-    const getChatModels = (provider: ModelProviderCard) =>
-      provider.chatModels.map((model) => ({
-        label: <ModelItemRender {...model} />,
-        provider: provider.id,
-        value: model.id,
-      }));
-
-    if (enabledList.length === 1) {
-      const provider = enabledList[0];
-
-      return getChatModels(provider);
-    }
-
-    return enabledList.map((provider) => ({
-      label: <ProviderItemRender provider={provider.id} />,
-      options: getChatModels(provider),
-    }));
-  }, [enabledList]);
 
   return (
     <Select
-      className={styles.select}
-      onChange={(model, option) => {
-        updateConfig({
-          model,
-          provider: (option as unknown as ModelOption).provider,
-        });
+      onChange={(props) => {
+        updateConfig(props);
       }}
-      options={options}
-      popupMatchSelectWidth={false}
       value={model}
     />
   );

package/src/features/ModelSelect/index.tsx

@@ -0,0 +1,67 @@
+import { Select, SelectProps } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo, useMemo } from 'react';
+
+import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
+import { useUserStore } from '@/store/user';
+import { modelProviderSelectors } from '@/store/user/selectors';
+import { ModelProviderCard } from '@/types/llm';
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  select: css`
+    .${prefixCls}-select-dropdown .${prefixCls}-select-item-option-grouped {
+      padding-inline-start: 12px;
+    }
+  `,
+}));
+interface ModelOption {
+  label: any;
+  provider: string;
+  value: string;
+}
+
+interface ModelSelectProps {
+  onChange?: (props: { model: string; provider: string }) => void;
+  value?: string;
+}
+
+const ModelSelect = memo<ModelSelectProps>(({ value, onChange }) => {
+  const enabledList = useUserStore(modelProviderSelectors.modelProviderListForModelSelect, isEqual);
+
+  const { styles } = useStyles();
+
+  const options = useMemo<SelectProps['options']>(() => {
+    const getChatModels = (provider: ModelProviderCard) =>
+      provider.chatModels.map((model) => ({
+        label: <ModelItemRender {...model} />,
+        provider: provider.id,
+        value: model.id,
+      }));
+
+    if (enabledList.length === 1) {
+      const provider = enabledList[0];
+
+      return getChatModels(provider);
+    }
+
+    return enabledList.map((provider) => ({
+      label: <ProviderItemRender provider={provider.id} />,
+      options: getChatModels(provider),
+    }));
+  }, [enabledList]);
+
+  return (
+    <Select
+      className={styles.select}
+      onChange={(model, option) => {
+        onChange?.({ model, provider: (option as unknown as ModelOption).provider });
+      }}
+      options={options}
+      popupMatchSelectWidth={false}
+      value={value}
+    />
+  );
+});
+
+export default ModelSelect;

package/src/layout/AuthProvider/Clerk/useAppearance.ts

@@ -44,6 +44,10 @@ export const useStyles = createStyles(
       `,
       navbar: css`
         background: ${isDarkMode ? token.colorBgContainer : token.colorFillTertiary};
+
+        @media (max-width: 768px) {
+          background: ${token.colorBgContainer};
+        }
       `,
       navbarButton: css`
         line-height: 2;

package/src/locales/default/clerk.ts

@@ -636,7 +636,7 @@ export default {
     mobileButton__menu: '菜单',
     navbar: {
       account: '个人资料',
-      description: '管理您的帐户信息。',
+      description: '管理您的帐户信息',
       security: '安全',
       title: '帐户',
     },

package/src/locales/default/setting.ts

@@ -2,6 +2,14 @@ export default {
   about: {
     title: '关于',
   },
+  agentTab: {
+    chat: '聊天偏好',
+    meta: '助手信息',
+    modal: '模型设置',
+    plugin: '插件设置',
+    prompt: '角色设定',
+    tts: '语音服务',
+  },
   analytics: {
     telemetry: {
       desc: '通过选择发送遥测数据，你可以帮助我们改善 LobeChat 整体用户体验',
@@ -363,14 +371,23 @@ export default {
       title: 'WebRTC 同步',
     },
   },
+  systemAgent: {
+    title: '系统助手',
+    translation: {
+      label: '翻译模型',
+      modelDesc: '指定用于翻译的模型',
+      title: '翻译助手设置',
+    },
+  },
   tab: {
-    about: '关于',
-    agent: '默认助手',
-    common: '通用设置',
-    experiment: '实验',
-    llm: '语言模型',
-    sync: '云端同步',
-    tts: '语音服务',
+    'about': '关于',
+    'agent': '默认助手',
+    'common': '通用设置',
+    'experiment': '实验',
+    'llm': '语言模型',
+    'sync': '云端同步',
+    'system-agent': '系统助手',
+    'tts': '语音服务',
   },
   tools: {
     builtins: {

package/src/server/translation.ts

@@ -2,23 +2,37 @@
 
 import { get } from 'lodash-es';
 import { cookies } from 'next/headers';
-import { readFileSync } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
 import { join } from 'node:path';
 
 import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
 import { NS, normalizeLocale } from '@/locales/resources';
+import { isDev } from '@/utils/env';
 
-export const translation = async (ns: NS) => {
-  const cookieStore = cookies();
-  const defaultLang = cookieStore.get(LOBE_LOCALE_COOKIE);
-  const lng = defaultLang?.value || DEFAULT_LANG;
-  const filepath = join(process.cwd(), `locales/${normalizeLocale(lng)}/${ns}.json`);
-  const file = readFileSync(filepath, 'utf8');
-  const i18ns = JSON.parse(file);
+export const translation = async (ns: NS = 'common') => {
+  let i18ns = {};
+  try {
+    const cookieStore = cookies();
+    const defaultLang = cookieStore.get(LOBE_LOCALE_COOKIE);
+    const lng = defaultLang?.value || DEFAULT_LANG;
+    let filepath = join(process.cwd(), `locales/${normalizeLocale(lng)}/${ns}.json`);
+    const isExist = existsSync(filepath);
+    if (!isExist)
+      filepath = join(
+        process.cwd(),
+        `locales/${normalizeLocale(isDev ? 'zh-CN' : DEFAULT_LANG)}/${ns}.json`,
+      );
+    const file = readFileSync(filepath, 'utf8');
+    i18ns = JSON.parse(file);
+  } catch (e) {
+    console.error('Error while reading translation file', e);
+  }
 
   return {
     t: (key: string, options: { [key: string]: string } = {}) => {
+      if (!i18ns) return key;
       let content = get(i18ns, key);
+      if (!content) return key;
       if (options) {
         Object.entries(options).forEach(([key, value]) => {
           content = content.replace(`{{${key}}}`, value);

package/src/store/chat/slices/enchance/action.ts

@@ -9,7 +9,10 @@ import { chatService } from '@/services/chat';
 import { messageService } from '@/services/message';
 import { chatSelectors } from '@/store/chat/selectors';
 import { ChatStore } from '@/store/chat/store';
+import { useUserStore } from '@/store/user';
+import { systemAgentSelectors } from '@/store/user/selectors';
 import { ChatTTS, ChatTranslate } from '@/types/message';
+import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
 const n = setNamespace('enhance');
@@ -48,12 +51,16 @@ export const chatEnhance: StateCreator<
     topicId: get().activeTopicId,
     ...data,
   }),
+
   translateMessage: async (id, targetLang) => {
     const { internal_toggleChatLoading, updateMessageTranslate, internal_dispatchMessage } = get();
 
     const message = chatSelectors.getMessageById(id)(get());
     if (!message) return;
 
+    // Get current agent for translation
+    const translationSetting = systemAgentSelectors.translation(useUserStore.getState());
+
     // create translate extra
     await updateMessageTranslate(id, { content: '', from: '', to: targetLang });
 
@@ -69,7 +76,7 @@ export const chatEnhance: StateCreator<
 
         await updateMessageTranslate(id, { content, from, to: targetLang });
       },
-      params: chainLangDetect(message.content),
+      params: merge(translationSetting, chainLangDetect(message.content)),
       trace: get().getCurrentTracePayload({ traceName: TraceNameMap.LanguageDetect }),
     });
 
@@ -95,7 +102,7 @@ export const chatEnhance: StateCreator<
           }
         }
       },
-      params: chainTranslate(message.content, targetLang),
+      params: merge(translationSetting, chainTranslate(message.content, targetLang)),
       trace: get().getCurrentTracePayload({ traceName: TraceNameMap.Translator }),
     });
   },

package/src/store/global/initialState.ts

@@ -25,6 +25,7 @@ export enum SettingsTabs {
   Common = 'common',
   LLM = 'llm',
   Sync = 'sync',
+  SystemAgent = 'system-agent',
   TTS = 'tts',
 }
 

package/src/store/user/selectors.ts

@@ -5,4 +5,5 @@ export {
   modelProviderSelectors,
   settingsSelectors,
   syncSettingsSelectors,
+  systemAgentSelectors,
 } from './slices/settings/selectors';

package/src/store/user/slices/settings/actions/general.test.ts

@@ -112,4 +112,26 @@ describe('SettingsAction', () => {
       expect(userService.updateUserSettings).toHaveBeenCalledWith({ defaultAgent: updatedAgent });
     });
   });
+
+  describe('setTranslationSystemAgent', () => {
+    it('should set partial settings', async () => {
+      const { result } = renderHook(() => useUserStore());
+      const systemAgentSettings: Partial<GlobalSettings> = {
+        systemAgent: {
+          translation: {
+            model: 'testmodel',
+            provider: 'provider',
+          },
+        },
+      };
+
+      // Perform the action
+      await act(async () => {
+        await result.current.setTranslationSystemAgent('provider', 'testmodel');
+      });
+
+      // Assert that updateUserSettings was called with the correct settings
+      expect(userService.updateUserSettings).toHaveBeenCalledWith(systemAgentSettings);
+    });
+  });
 });

package/src/store/user/slices/settings/actions/general.ts

@@ -16,6 +16,7 @@ export interface GeneralSettingsAction {
   importAppSettings: (settings: GlobalSettings) => Promise<void>;
   resetSettings: () => Promise<void>;
   setSettings: (settings: DeepPartial<GlobalSettings>) => Promise<void>;
+  setTranslationSystemAgent: (provider: string, model: string) => Promise<void>;
   switchLocale: (locale: LocaleMode) => Promise<void>;
   switchThemeMode: (themeMode: ThemeMode) => Promise<void>;
   updateDefaultAgent: (agent: DeepPartial<LobeAgentSettings>) => Promise<void>;
@@ -50,6 +51,16 @@ export const generalSettingsSlice: StateCreator<
     await userService.updateUserSettings(diffs);
     await get().refreshUserConfig();
   },
+  setTranslationSystemAgent: async (provider, model) => {
+    await get().setSettings({
+      systemAgent: {
+        translation: {
+          model: model,
+          provider: provider,
+        },
+      },
+    });
+  },
   switchLocale: async (locale) => {
     await get().setSettings({ language: locale });
 

package/src/store/user/slices/settings/selectors/index.ts

@@ -2,3 +2,4 @@ export { modelConfigSelectors } from './modelConfig';
 export { modelProviderSelectors } from './modelProvider';
 export { settingsSelectors } from './settings';
 export { syncSettingsSelectors } from './sync';
+export { systemAgentSelectors } from './systemAgent';

package/src/store/user/slices/settings/selectors/settings.ts

@@ -1,6 +1,11 @@
 import { DEFAULT_LANG } from '@/const/locale';
 import { DEFAULT_AGENT_META } from '@/const/meta';
-import { DEFAULT_AGENT, DEFAULT_AGENT_CONFIG, DEFAULT_TTS_CONFIG } from '@/const/settings';
+import {
+  DEFAULT_AGENT,
+  DEFAULT_AGENT_CONFIG,
+  DEFAULT_SYSTEM_AGENT_CONFIG,
+  DEFAULT_TTS_CONFIG,
+} from '@/const/settings';
 import { Locales } from '@/locales/resources';
 import { GeneralModelProviderConfig, GlobalLLMProviderKey, GlobalSettings } from '@/types/settings';
 import { isOnServerSide } from '@/utils/env';
@@ -53,9 +58,13 @@ export const currentThemeMode = (s: UserStore) => {
 const dalleConfig = (s: UserStore) => currentSettings(s).tool?.dalle || {};
 const isDalleAutoGenerating = (s: UserStore) => currentSettings(s).tool?.dalle?.autoGenerate;
 
+const currentSystemAgent = (s: UserStore) =>
+  merge(DEFAULT_SYSTEM_AGENT_CONFIG, currentSettings(s).systemAgent);
+
 export const settingsSelectors = {
   currentLanguage,
   currentSettings,
+  currentSystemAgent,
   currentTTS,
   currentThemeMode,
   dalleConfig,

package/src/store/user/slices/settings/selectors/systemAgent.ts

@@ -0,0 +1,14 @@
+import { DEFAULT_SYSTEM_AGENT_CONFIG } from '@/const/settings';
+import type { UserStore } from '@/store/user';
+import { merge } from '@/utils/merge';
+
+import { currentSettings } from './settings';
+
+const currentSystemAgent = (s: UserStore) =>
+  merge(DEFAULT_SYSTEM_AGENT_CONFIG, currentSettings(s).systemAgent);
+
+const translation = (s: UserStore) => currentSystemAgent(s).translation;
+
+export const systemAgentSelectors = {
+  translation,
+};

package/src/types/settings/index.ts

@@ -3,6 +3,7 @@ import type { LobeAgentSession } from '@/types/session';
 import { GlobalBaseSettings } from './base';
 import { GlobalLLMConfig } from './modelProvider';
 import { GlobalSyncSettings } from './sync';
+import { GlobalSystemAgentConfig } from './systemAgent';
 import { GlobalTTSConfig } from './tts';
 
 export type GlobalDefaultAgent = Pick<LobeAgentSession, 'config' | 'meta'>;
@@ -10,6 +11,7 @@ export type GlobalDefaultAgent = Pick<LobeAgentSession, 'config' | 'meta'>;
 export * from './base';
 export * from './modelProvider';
 export * from './sync';
+export * from './systemAgent';
 export * from './tts';
 
 export interface GlobalTool {
@@ -25,6 +27,7 @@ export interface GlobalSettings extends GlobalBaseSettings {
   defaultAgent: GlobalDefaultAgent;
   languageModel: GlobalLLMConfig;
   sync: GlobalSyncSettings;
+  systemAgent: GlobalSystemAgentConfig;
   tool: GlobalTool;
   tts: GlobalTTSConfig;
 }

package/src/types/settings/systemAgent.ts

@@ -0,0 +1,8 @@
+export interface GlobalTranslationConfig {
+  model: string;
+  provider: string;
+}
+
+export interface GlobalSystemAgentConfig {
+  translation: GlobalTranslationConfig;
+}