@lobehub/chat 0.160.8 → 0.161.1

package/src/app/(main)/settings/system-agent/page.tsx

@@ -0,0 +1,14 @@
+// import { metadataModule } from '@/server/metadata';
+// import { translation } from '@/server/translation';
+
+// export const generateMetadata = async () => {
+//   const { t } = await translation('setting');
+//
+//   return metadataModule.generate({
+//     description: t('header.desc'),
+//     title: t('tab.systemAgent'),
+//     url: '/settings/system-agent',
+//   });
+// };
+
+export { default } from './index';

package/src/app/@modal/(.)settings/modal/index.tsx

@@ -11,6 +11,10 @@ import Skeleton from './loading';
 const loading = () => <Skeleton />;
 
 const Common = dynamic(() => import('@/app/(main)/settings/common'), { loading, ssr: false });
+const SystemAgent = dynamic(() => import('@/app/(main)/settings/system-agent'), {
+  loading,
+  ssr: false,
+});
 const About = dynamic(() => import('@/app/(main)/settings/about'), { loading, ssr: false });
 const LLM = dynamic(() => import('@/app/(main)/settings/llm'), { loading, ssr: false });
 const TTS = dynamic(() => import('@/app/(main)/settings/tts'), { loading, ssr: false });
@@ -28,6 +32,7 @@ const SettingsModal = memo<SettingsModalProps>(({ browser, os, mobile }) => {
   return (
     <>
       {tab === SettingsTabs.Common && <Common />}
+      {tab === SettingsTabs.SystemAgent && <SystemAgent />}
       {tab === SettingsTabs.Sync && <Sync browser={browser} mobile={mobile} os={os} />}
       {tab === SettingsTabs.LLM && <LLM />}
       {tab === SettingsTabs.TTS && <TTS />}

package/src/app/@modal/(.)settings/modal/layout.tsx

@@ -1,8 +1,12 @@
 'use client';
 
-import { Skeleton } from 'antd';
+import { Skeleton, Tag } from 'antd';
 import dynamic from 'next/dynamic';
 import { PropsWithChildren, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
+import { SettingsTabs } from '@/store/global/initialState';
 
 import SettingModalLayout from '../../_layout/SettingModalLayout';
 
@@ -15,8 +19,16 @@ const UpgradeAlert = dynamic(() => import('@/app/(main)/settings/features/Upgrad
 });
 
 const Layout = memo<PropsWithChildren>(({ children }) => {
+  const { t } = useTranslation('setting');
+  const activeKey = useActiveSettingsKey();
   return (
     <SettingModalLayout
+      activeTitle={
+        <>
+          {t(`tab.${activeKey}`)}
+          {activeKey === SettingsTabs.Sync && <Tag color={'gold'}>{t('tab.experiment')}</Tag>}
+        </>
+      }
       category={
         <>
           <CategoryContent modal />

package/src/app/@modal/_layout/SettingModalLayout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useResponsive, useTheme, useThemeMode } from 'antd-style';
+import { useResponsive, useTheme } from 'antd-style';
 import { ReactNode, memo, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -8,57 +8,61 @@ import Header from '@/app/(main)/settings/_layout/Desktop/Header';
 import SideBar from '@/app/(main)/settings/_layout/Desktop/SideBar';
 
 interface SettingLayoutProps {
+  activeTitle?: ReactNode;
   category: ReactNode;
   children: ReactNode;
   desc?: string;
   title?: string;
 }
 
-const SettingModalLayout = memo<SettingLayoutProps>(({ children, category, desc, title }) => {
-  const ref = useRef<any>(null);
-  const theme = useTheme();
-  const { isDarkMode } = useThemeMode();
-  const { mobile = false } = useResponsive();
+const SettingModalLayout = memo<SettingLayoutProps>(
+  ({ children, category, desc, title, activeTitle }) => {
+    const ref = useRef<any>(null);
+    const theme = useTheme();
+    const { md = true, mobile = false } = useResponsive();
 
-  return (
-    <Flexbox horizontal={!mobile} width={'100%'}>
-      {!mobile ? (
-        <SideBar
-          desc={desc}
+    return (
+      <Flexbox horizontal={md} width={'100%'}>
+        {md ? (
+          <SideBar
+            desc={desc}
+            style={{
+              background: theme.isDarkMode ? theme.colorBgContainer : theme.colorFillTertiary,
+              borderColor: theme.colorFillTertiary,
+            }}
+            title={title}
+          >
+            {category}
+          </SideBar>
+        ) : (
+          <Header getContainer={() => ref.current} title={activeTitle}>
+            {category}
+          </Header>
+        )}
+        <Flexbox
+          align={'center'}
+          gap={mobile ? 0 : 64}
+          ref={ref}
           style={{
-            background: isDarkMode ? theme.colorBgContainer : theme.colorFillTertiary,
-            borderColor: theme.colorFillTertiary,
+            background: mobile
+              ? theme.colorBgContainer
+              : theme.isDarkMode
+                ? theme.colorFillQuaternary
+                : theme.colorBgElevated,
+            minHeight: '100%',
+            overflowX: 'hidden',
+            overflowY: 'auto',
+            paddingBlock: mobile ? 0 : 40,
+            paddingInline: mobile ? 0 : 56,
           }}
-          title={title}
+          width={'100%'}
         >
-          {category}
-        </SideBar>
-      ) : (
-        <Header getContainer={() => ref.current}>{category}</Header>
-      )}
-      <Flexbox
-        align={'center'}
-        gap={mobile ? 0 : 64}
-        ref={ref}
-        style={{
-          background: mobile
-            ? theme.colorBgContainer
-            : isDarkMode
-              ? theme.colorFillQuaternary
-              : theme.colorBgElevated,
-          minHeight: '100%',
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          paddingBlock: mobile ? 0 : 40,
-          paddingInline: mobile ? 0 : 56,
-        }}
-        width={'100%'}
-      >
-        {children}
+          {children}
+        </Flexbox>
       </Flexbox>
-    </Flexbox>
-  );
-});
+    );
+  },
+);
 
 SettingModalLayout.displayName = 'SettingModalLayout';
 

package/src/app/@modal/chat/(.)settings/modal/features/CategoryContent.tsx

@@ -13,8 +13,8 @@ import { useCategory } from './useCategory';
 
 const CategoryContent = memo(() => {
   const cateItems = useCategory();
-  const router = useQueryRoute();
   const { tab = ChatSettingsTabs.Meta } = useQuery();
+  const router = useQueryRoute();
 
   return (
     <>

package/src/app/@modal/chat/(.)settings/modal/features/useCategory.tsx

@@ -19,32 +19,32 @@ export const useCategory = ({ mobile }: UseCategoryOptions = {}) => {
       {
         icon: <Icon icon={UserCircle} size={iconSize} />,
         key: ChatSettingsTabs.Meta,
-        label: t('settingAgent.title'),
+        label: t('agentTab.meta'),
       },
       {
         icon: <Icon icon={Bot} size={iconSize} />,
         key: ChatSettingsTabs.Prompt,
-        label: t('settingAgent.prompt.title'),
+        label: t('agentTab.prompt'),
       },
       {
         icon: <Icon icon={MessagesSquare} size={iconSize} />,
         key: ChatSettingsTabs.Chat,
-        label: t('settingChat.title'),
+        label: t('agentTab.chat'),
       },
       {
         icon: <Icon icon={BrainCog} size={iconSize} />,
         key: ChatSettingsTabs.Modal,
-        label: t('settingModel.title'),
+        label: t('agentTab.modal'),
       },
       {
         icon: <Icon icon={Mic2} size={iconSize} />,
         key: ChatSettingsTabs.TTS,
-        label: t('settingTTS.title'),
+        label: t('agentTab.tts'),
       },
       {
         icon: <Icon icon={Blocks} size={iconSize} />,
         key: ChatSettingsTabs.Plugin,
-        label: t('settingPlugin.title'),
+        label: t('agentTab.plugin'),
       },
     ],
     [t],

package/src/app/@modal/chat/(.)settings/modal/layout.tsx

@@ -8,8 +8,10 @@ import { useTranslation } from 'react-i18next';
 
 import StoreUpdater from '@/features/AgentSetting/StoreUpdater';
 import { Provider, createStore } from '@/features/AgentSetting/store';
+import { useQuery } from '@/hooks/useQuery';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
+import { ChatSettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 import { sessionMetaSelectors } from '@/store/session/selectors';
 
@@ -21,6 +23,7 @@ const CategoryContent = dynamic(() => import('./features/CategoryContent'), {
 });
 
 const Layout = memo<PropsWithChildren>(({ children }) => {
+  const { tab = ChatSettingsTabs.Meta } = useQuery();
   const { t } = useTranslation('setting');
   const id = useSessionStore((s) => s.activeId);
   const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);
@@ -34,6 +37,7 @@ const Layout = memo<PropsWithChildren>(({ children }) => {
 
   return (
     <SettingModalLayout
+      activeTitle={t(`agentTab.${tab as ChatSettingsTabs}`)}
       category={<CategoryContent />}
       desc={t('header.sessionDesc')}
       title={t('header.session')}

package/src/app/@modal/layout.tsx

@@ -15,6 +15,7 @@ const SessionSettingsModal = memo<PropsWithChildren>(({ children }) => {
       afterClose={() => {
         router.back();
       }}
+      enableResponsive={false}
       footer={null}
       onCancel={() => setOpen(false)}
       open={open}

package/src/const/settings/agent.ts

@@ -0,0 +1,36 @@
+import { DEFAULT_AGENT_META } from '@/const/meta';
+import { ModelProvider } from '@/libs/agent-runtime';
+import { LobeAgentConfig, LobeAgentTTSConfig } from '@/types/agent';
+import { GlobalDefaultAgent } from '@/types/settings';
+
+export const DEFAUTT_AGENT_TTS_CONFIG: LobeAgentTTSConfig = {
+  showAllLocaleVoice: false,
+  sttLocale: 'auto',
+  ttsService: 'openai',
+  voice: {
+    openai: 'alloy',
+  },
+};
+
+export const DEFAULT_AGENT_CONFIG: LobeAgentConfig = {
+  autoCreateTopicThreshold: 2,
+  displayMode: 'chat',
+  enableAutoCreateTopic: true,
+  historyCount: 1,
+  model: 'gpt-3.5-turbo',
+  params: {
+    frequency_penalty: 0,
+    presence_penalty: 0,
+    temperature: 0.6,
+    top_p: 1,
+  },
+  plugins: [],
+  provider: ModelProvider.OpenAI,
+  systemRole: '',
+  tts: DEFAUTT_AGENT_TTS_CONFIG,
+};
+
+export const DEFAULT_AGENT: GlobalDefaultAgent = {
+  config: DEFAULT_AGENT_CONFIG,
+  meta: DEFAULT_AGENT_META,
+};

package/src/const/settings/common.ts

@@ -0,0 +1,8 @@
+import { GlobalBaseSettings } from '@/types/settings';
+
+export const DEFAULT_COMMON_SETTINGS: GlobalBaseSettings = {
+  fontSize: 14,
+  language: 'auto',
+  password: '',
+  themeMode: 'auto',
+};

package/src/const/settings/index.ts

@@ -1,184 +1,27 @@
-import {
-  AnthropicProviderCard,
-  BedrockProviderCard,
-  DeepSeekProviderCard,
-  GoogleProviderCard,
-  GroqProviderCard,
-  MinimaxProviderCard,
-  MistralProviderCard,
-  MoonshotProviderCard,
-  OllamaProviderCard,
-  OpenAIProviderCard,
-  OpenRouterProviderCard,
-  PerplexityProviderCard,
-  TogetherAIProviderCard,
-  ZeroOneProviderCard,
-  ZhiPuProviderCard,
-  filterEnabledModels,
-} from '@/config/modelProviders';
-import { DEFAULT_AGENT_META } from '@/const/meta';
-import { ModelProvider } from '@/libs/agent-runtime';
-import { LobeAgentConfig, LobeAgentTTSConfig } from '@/types/agent';
-import {
-  GlobalBaseSettings,
-  GlobalDefaultAgent,
-  GlobalLLMConfig,
-  GlobalSettings,
-  GlobalSyncSettings,
-  GlobalTTSConfig,
-} from '@/types/settings';
+import { GlobalSettings } from '@/types/settings';
 
-export const DEFAULT_BASE_SETTINGS: GlobalBaseSettings = {
-  fontSize: 14,
-  language: 'auto',
-  password: '',
-  themeMode: 'auto',
-};
-
-export const DEFAUTT_AGENT_TTS_CONFIG: LobeAgentTTSConfig = {
-  showAllLocaleVoice: false,
-  sttLocale: 'auto',
-  ttsService: 'openai',
-  voice: {
-    openai: 'alloy',
-  },
-};
+import { DEFAULT_AGENT } from './agent';
+import { DEFAULT_COMMON_SETTINGS } from './common';
+import { DEFAULT_LLM_CONFIG } from './llm';
+import { DEFAULT_SYNC_CONFIG } from './sync';
+import { DEFAULT_SYSTEM_AGENT_CONFIG } from './systemAgent';
+import { DEFAULT_TOOL_CONFIG } from './tool';
+import { DEFAULT_TTS_CONFIG } from './tts';
 
 export const COOKIE_CACHE_DAYS = 30;
 
-export const DEFAULT_AGENT_CONFIG: LobeAgentConfig = {
-  autoCreateTopicThreshold: 2,
-  displayMode: 'chat',
-  enableAutoCreateTopic: true,
-  historyCount: 1,
-  model: 'gpt-3.5-turbo',
-  params: {
-    frequency_penalty: 0,
-    presence_penalty: 0,
-    temperature: 0.6,
-    top_p: 1,
-  },
-  plugins: [],
-  provider: ModelProvider.OpenAI,
-  systemRole: '',
-  tts: DEFAUTT_AGENT_TTS_CONFIG,
-};
-
-export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
-  anthropic: {
-    apiKey: '',
-    enabled: false,
-    enabledModels: filterEnabledModels(AnthropicProviderCard),
-  },
-  azure: {
-    apiKey: '',
-    enabled: false,
-    endpoint: '',
-  },
-  bedrock: {
-    accessKeyId: '',
-    enabled: false,
-    enabledModels: filterEnabledModels(BedrockProviderCard),
-    region: 'us-east-1',
-    secretAccessKey: '',
-  },
-  deepseek: {
-    apiKey: '',
-    enabled: false,
-    enabledModels: filterEnabledModels(DeepSeekProviderCard),
-  },
-  google: {
-    apiKey: '',
-    enabled: false,
-    enabledModels: filterEnabledModels(GoogleProviderCard),
-  },
-  groq: {
-    apiKey: '',
-    enabled: false,
-    enabledModels: filterEnabledModels(GroqProviderCard),
-  },
-  minimax: {
-    apiKey: '',
-    enabled: false,
-    enabledModels: filterEnabledModels(MinimaxProviderCard),
-  },
-  mistral: {
-    apiKey: '',
-    enabled: false,
-    enabledModels: filterEnabledModels(MistralProviderCard),
-  },
-  moonshot: {
-    apiKey: '',
-    enabled: false,
-    enabledModels: filterEnabledModels(MoonshotProviderCard),
-  },
-  ollama: {
-    enabled: true,
-    enabledModels: filterEnabledModels(OllamaProviderCard),
-    endpoint: '',
-    fetchOnClient: true,
-  },
-  openai: {
-    apiKey: '',
-    enabled: true,
-    enabledModels: filterEnabledModels(OpenAIProviderCard),
-  },
-  openrouter: {
-    apiKey: '',
-    enabled: false,
-    enabledModels: filterEnabledModels(OpenRouterProviderCard),
-  },
-  perplexity: {
-    apiKey: '',
-    enabled: false,
-    enabledModels: filterEnabledModels(PerplexityProviderCard),
-  },
-  togetherai: {
-    apiKey: '',
-    enabled: false,
-    enabledModels: filterEnabledModels(TogetherAIProviderCard),
-  },
-  zeroone: {
-    apiKey: '',
-    enabled: false,
-    enabledModels: filterEnabledModels(ZeroOneProviderCard),
-  },
-  zhipu: {
-    apiKey: '',
-    enabled: false,
-    enabledModels: filterEnabledModels(ZhiPuProviderCard),
-  },
-};
-
-export const DEFAULT_AGENT: GlobalDefaultAgent = {
-  config: DEFAULT_AGENT_CONFIG,
-  meta: DEFAULT_AGENT_META,
-};
-
-export const DEFAULT_TTS_CONFIG: GlobalTTSConfig = {
-  openAI: {
-    sttModel: 'whisper-1',
-    ttsModel: 'tts-1',
-  },
-  sttAutoStop: true,
-  sttServer: 'openai',
-};
-
-export const DEFAULT_TOOL_CONFIG = {
-  dalle: {
-    autoGenerate: false,
-  },
-};
-
-const DEFAULT_SYNC_CONFIG: GlobalSyncSettings = {
-  webrtc: { enabled: false },
-};
+export * from './agent';
+export * from './llm';
+export * from './systemAgent';
+export * from './tool';
+export * from './tts';
 
 export const DEFAULT_SETTINGS: GlobalSettings = {
   defaultAgent: DEFAULT_AGENT,
   languageModel: DEFAULT_LLM_CONFIG,
   sync: DEFAULT_SYNC_CONFIG,
+  systemAgent: DEFAULT_SYSTEM_AGENT_CONFIG,
   tool: DEFAULT_TOOL_CONFIG,
   tts: DEFAULT_TTS_CONFIG,
-  ...DEFAULT_BASE_SETTINGS,
+  ...DEFAULT_COMMON_SETTINGS,
 };

package/src/const/settings/llm.ts

@@ -0,0 +1,110 @@
+import {
+  AnthropicProviderCard,
+  BedrockProviderCard,
+  DeepSeekProviderCard,
+  GoogleProviderCard,
+  GroqProviderCard,
+  MinimaxProviderCard,
+  MistralProviderCard,
+  MoonshotProviderCard,
+  OllamaProviderCard,
+  OpenAIProviderCard,
+  OpenRouterProviderCard,
+  PerplexityProviderCard,
+  TogetherAIProviderCard,
+  ZeroOneProviderCard,
+  ZhiPuProviderCard,
+  filterEnabledModels,
+} from '@/config/modelProviders';
+import { ModelProvider } from '@/libs/agent-runtime';
+import { GlobalLLMConfig } from '@/types/settings';
+
+export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
+  anthropic: {
+    apiKey: '',
+    enabled: false,
+    enabledModels: filterEnabledModels(AnthropicProviderCard),
+  },
+  azure: {
+    apiKey: '',
+    enabled: false,
+    endpoint: '',
+  },
+  bedrock: {
+    accessKeyId: '',
+    enabled: false,
+    enabledModels: filterEnabledModels(BedrockProviderCard),
+    region: 'us-east-1',
+    secretAccessKey: '',
+  },
+  deepseek: {
+    apiKey: '',
+    enabled: false,
+    enabledModels: filterEnabledModels(DeepSeekProviderCard),
+  },
+  google: {
+    apiKey: '',
+    enabled: false,
+    enabledModels: filterEnabledModels(GoogleProviderCard),
+  },
+  groq: {
+    apiKey: '',
+    enabled: false,
+    enabledModels: filterEnabledModels(GroqProviderCard),
+  },
+  minimax: {
+    apiKey: '',
+    enabled: false,
+    enabledModels: filterEnabledModels(MinimaxProviderCard),
+  },
+  mistral: {
+    apiKey: '',
+    enabled: false,
+    enabledModels: filterEnabledModels(MistralProviderCard),
+  },
+  moonshot: {
+    apiKey: '',
+    enabled: false,
+    enabledModels: filterEnabledModels(MoonshotProviderCard),
+  },
+  ollama: {
+    enabled: true,
+    enabledModels: filterEnabledModels(OllamaProviderCard),
+    endpoint: '',
+    fetchOnClient: true,
+  },
+  openai: {
+    apiKey: '',
+    enabled: true,
+    enabledModels: filterEnabledModels(OpenAIProviderCard),
+  },
+  openrouter: {
+    apiKey: '',
+    enabled: false,
+    enabledModels: filterEnabledModels(OpenRouterProviderCard),
+  },
+  perplexity: {
+    apiKey: '',
+    enabled: false,
+    enabledModels: filterEnabledModels(PerplexityProviderCard),
+  },
+  togetherai: {
+    apiKey: '',
+    enabled: false,
+    enabledModels: filterEnabledModels(TogetherAIProviderCard),
+  },
+  zeroone: {
+    apiKey: '',
+    enabled: false,
+    enabledModels: filterEnabledModels(ZeroOneProviderCard),
+  },
+  zhipu: {
+    apiKey: '',
+    enabled: false,
+    enabledModels: filterEnabledModels(ZhiPuProviderCard),
+  },
+};
+
+export const DEFAULT_MODEL = 'gpt-3.5-turbo';
+
+export const DEFAULT_PROVIDER = ModelProvider.OpenAI;

package/src/const/settings/sync.ts

@@ -0,0 +1,5 @@
+import { GlobalSyncSettings } from '@/types/settings';
+
+export const DEFAULT_SYNC_CONFIG: GlobalSyncSettings = {
+  webrtc: { enabled: false },
+};

package/src/const/settings/systemAgent.ts

@@ -0,0 +1,12 @@
+import { GlobalSystemAgentConfig, GlobalTranslationConfig } from '@/types/settings';
+
+import { DEFAULT_MODEL, DEFAULT_PROVIDER } from './llm';
+
+export const DEFAULT_TRANSLATION_CONFIG: GlobalTranslationConfig = {
+  model: DEFAULT_MODEL,
+  provider: DEFAULT_PROVIDER,
+};
+
+export const DEFAULT_SYSTEM_AGENT_CONFIG: GlobalSystemAgentConfig = {
+  translation: DEFAULT_TRANSLATION_CONFIG,
+};

package/src/const/settings/tool.ts

@@ -0,0 +1,5 @@
+export const DEFAULT_TOOL_CONFIG = {
+  dalle: {
+    autoGenerate: false,
+  },
+};

package/src/const/settings/tts.ts

@@ -0,0 +1,10 @@
+import { GlobalTTSConfig } from '@/types/settings';
+
+export const DEFAULT_TTS_CONFIG: GlobalTTSConfig = {
+  openAI: {
+    sttModel: 'whisper-1',
+    ttsModel: 'tts-1',
+  },
+  sttAutoStop: true,
+  sttServer: 'openai',
+};