@lobehub/chat 0.161.0 → 0.161.2

package/src/app/(main)/settings/_layout/Desktop/index.tsx

@@ -1,9 +1,14 @@
 'use client';
 
+import { Tag } from 'antd';
 import { useResponsive } from 'antd-style';
 import { memo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { useActiveSettingsKey } from '@/hooks/useActiveSettingsKey';
+import { SettingsTabs } from '@/store/global/initialState';
+
 import { LayoutProps } from '../type';
 import Header from './Header';
 import SideBar from './SideBar';
@@ -11,6 +16,8 @@ import SideBar from './SideBar';
 const Layout = memo<LayoutProps>(({ children, category }) => {
   const ref = useRef<any>(null);
   const { md = true, mobile = false } = useResponsive();
+  const { t } = useTranslation('setting');
+  const activeKey = useActiveSettingsKey();
 
   return (
     <Flexbox
@@ -23,7 +30,17 @@ const Layout = memo<LayoutProps>(({ children, category }) => {
       {md ? (
         <SideBar>{category}</SideBar>
       ) : (
-        <Header getContainer={() => ref.current}>{category}</Header>
+        <Header
+          getContainer={() => ref.current}
+          title={
+            <>
+              {t(`tab.${activeKey}`)}
+              {activeKey === SettingsTabs.Sync && <Tag color={'gold'}>{t('tab.experiment')}</Tag>}
+            </>
+          }
+        >
+          {category}
+        </Header>
       )}
       <Flexbox
         align={'center'}

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/app/api/chat/[provider]/route.test.ts

@@ -1,4 +1,4 @@
-// @vitest-environment edge-runtime
+// @vitest-environment node
 import { getAuth } from '@clerk/nextjs/server';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 

package/src/app/api/chat/agentRuntime.test.ts

@@ -6,6 +6,7 @@ import {
   LobeAnthropicAI,
   LobeAzureOpenAI,
   LobeBedrockAI,
+  LobeDeepSeekAI,
   LobeGoogleAI,
   LobeGroq,
   LobeMinimaxAI,
@@ -16,7 +17,6 @@ import {
   LobeOpenRouterAI,
   LobePerplexityAI,
   LobeRuntimeAI,
-  LobeDeepSeekAI,
   LobeTogetherAI,
   LobeZeroOneAI,
   LobeZhipuAI,
@@ -27,8 +27,8 @@ import { AgentRuntime } from '@/libs/agent-runtime';
 import { initAgentRuntimeWithUserPayload } from './agentRuntime';
 
 // 模拟依赖项
-vi.mock('@/config/server', () => ({
-  getServerConfig: vi.fn(() => ({
+vi.mock('@/config/llm', () => ({
+  getLLMConfig: vi.fn(() => ({
     // 确保为每个provider提供必要的配置信息
     OPENAI_API_KEY: 'test-openai-key',
     GOOGLE_API_KEY: 'test-google-key',
@@ -295,7 +295,7 @@ describe('initAgentRuntimeWithUserPayload method', () => {
       // 假设 LobeDeepSeekAI 是 DeepSeek 提供者的实现类
       expect(runtime['_runtime']).toBeInstanceOf(LobeDeepSeekAI);
     });
-    
+
     it('Together AI provider: without apikey', async () => {
       const jwtPayload = {};
       const runtime = await initAgentRuntimeWithUserPayload(ModelProvider.TogetherAI, jwtPayload);

package/src/app/api/chat/agentRuntime.ts

@@ -1,4 +1,4 @@
-import { getServerConfig } from '@/config/server';
+import { getLLMConfig } from '@/config/llm';
 import { JWTPayload } from '@/const/auth';
 import { INBOX_SESSION_ID } from '@/const/session';
 import {
@@ -30,7 +30,7 @@ const getLlmOptionsFromPayload = (provider: string, payload: JWTPayload) => {
   switch (provider) {
     default: // Use Openai options as default
     case ModelProvider.OpenAI: {
-      const { OPENAI_API_KEY, OPENAI_PROXY_URL } = getServerConfig();
+      const { OPENAI_API_KEY, OPENAI_PROXY_URL } = getLLMConfig();
       const openaiApiKey = payload?.apiKey || OPENAI_API_KEY;
       const baseURL = payload?.endpoint || OPENAI_PROXY_URL;
       const apiKey = apiKeyManager.pick(openaiApiKey);
@@ -40,7 +40,7 @@ const getLlmOptionsFromPayload = (provider: string, payload: JWTPayload) => {
       };
     }
     case ModelProvider.Azure: {
-      const { AZURE_API_KEY, AZURE_API_VERSION, AZURE_ENDPOINT } = getServerConfig();
+      const { AZURE_API_KEY, AZURE_API_VERSION, AZURE_ENDPOINT } = getLLMConfig();
       const apiKey = apiKeyManager.pick(payload?.apiKey || AZURE_API_KEY);
       const endpoint = payload?.endpoint || AZURE_ENDPOINT;
       const apiVersion = payload?.azureApiVersion || AZURE_API_VERSION;
@@ -51,14 +51,14 @@ const getLlmOptionsFromPayload = (provider: string, payload: JWTPayload) => {
       };
     }
     case ModelProvider.ZhiPu: {
-      const { ZHIPU_API_KEY } = getServerConfig();
+      const { ZHIPU_API_KEY } = getLLMConfig();
       const apiKey = apiKeyManager.pick(payload?.apiKey || ZHIPU_API_KEY);
       return {
         apiKey,
       };
     }
     case ModelProvider.Google: {
-      const { GOOGLE_API_KEY, GOOGLE_PROXY_URL } = getServerConfig();
+      const { GOOGLE_API_KEY, GOOGLE_PROXY_URL } = getLLMConfig();
       const apiKey = apiKeyManager.pick(payload?.apiKey || GOOGLE_API_KEY);
       const baseURL = payload?.endpoint || GOOGLE_PROXY_URL;
       return {
@@ -67,7 +67,7 @@ const getLlmOptionsFromPayload = (provider: string, payload: JWTPayload) => {
       };
     }
     case ModelProvider.Moonshot: {
-      const { MOONSHOT_API_KEY, MOONSHOT_PROXY_URL } = getServerConfig();
+      const { MOONSHOT_API_KEY, MOONSHOT_PROXY_URL } = getLLMConfig();
       const apiKey = apiKeyManager.pick(payload?.apiKey || MOONSHOT_API_KEY);
       return {
         apiKey,
@@ -75,7 +75,7 @@ const getLlmOptionsFromPayload = (provider: string, payload: JWTPayload) => {
       };
     }
     case ModelProvider.Bedrock: {
-      const { AWS_SECRET_ACCESS_KEY, AWS_ACCESS_KEY_ID, AWS_REGION } = getServerConfig();
+      const { AWS_SECRET_ACCESS_KEY, AWS_ACCESS_KEY_ID, AWS_REGION } = getLLMConfig();
       let accessKeyId: string | undefined = AWS_ACCESS_KEY_ID;
       let accessKeySecret: string | undefined = AWS_SECRET_ACCESS_KEY;
       let region = AWS_REGION;
@@ -88,12 +88,12 @@ const getLlmOptionsFromPayload = (provider: string, payload: JWTPayload) => {
       return { accessKeyId, accessKeySecret, region };
     }
     case ModelProvider.Ollama: {
-      const { OLLAMA_PROXY_URL } = getServerConfig();
+      const { OLLAMA_PROXY_URL } = getLLMConfig();
       const baseURL = payload?.endpoint || OLLAMA_PROXY_URL;
       return { baseURL };
     }
     case ModelProvider.Perplexity: {
-      const { PERPLEXITY_API_KEY, PERPLEXITY_PROXY_URL } = getServerConfig();
+      const { PERPLEXITY_API_KEY, PERPLEXITY_PROXY_URL } = getLLMConfig();
 
       const apiKey = apiKeyManager.pick(payload?.apiKey || PERPLEXITY_API_KEY);
       const baseURL = payload?.endpoint || PERPLEXITY_PROXY_URL;
@@ -101,7 +101,7 @@ const getLlmOptionsFromPayload = (provider: string, payload: JWTPayload) => {
       return { apiKey, baseURL };
     }
     case ModelProvider.Anthropic: {
-      const { ANTHROPIC_API_KEY, ANTHROPIC_PROXY_URL } = getServerConfig();
+      const { ANTHROPIC_API_KEY, ANTHROPIC_PROXY_URL } = getLLMConfig();
 
       const apiKey = apiKeyManager.pick(payload?.apiKey || ANTHROPIC_API_KEY);
       const baseURL = payload?.endpoint || ANTHROPIC_PROXY_URL;
@@ -109,21 +109,21 @@ const getLlmOptionsFromPayload = (provider: string, payload: JWTPayload) => {
       return { apiKey, baseURL };
     }
     case ModelProvider.Minimax: {
-      const { MINIMAX_API_KEY } = getServerConfig();
+      const { MINIMAX_API_KEY } = getLLMConfig();
 
       const apiKey = apiKeyManager.pick(payload?.apiKey || MINIMAX_API_KEY);
 
       return { apiKey };
     }
     case ModelProvider.Mistral: {
-      const { MISTRAL_API_KEY } = getServerConfig();
+      const { MISTRAL_API_KEY } = getLLMConfig();
 
       const apiKey = apiKeyManager.pick(payload?.apiKey || MISTRAL_API_KEY);
 
       return { apiKey };
     }
     case ModelProvider.Groq: {
-      const { GROQ_API_KEY, GROQ_PROXY_URL } = getServerConfig();
+      const { GROQ_API_KEY, GROQ_PROXY_URL } = getLLMConfig();
 
       const apiKey = apiKeyManager.pick(payload?.apiKey || GROQ_API_KEY);
       const baseURL = payload?.endpoint || GROQ_PROXY_URL;
@@ -131,28 +131,28 @@ const getLlmOptionsFromPayload = (provider: string, payload: JWTPayload) => {
       return { apiKey, baseURL };
     }
     case ModelProvider.OpenRouter: {
-      const { OPENROUTER_API_KEY } = getServerConfig();
+      const { OPENROUTER_API_KEY } = getLLMConfig();
 
       const apiKey = apiKeyManager.pick(payload?.apiKey || OPENROUTER_API_KEY);
 
       return { apiKey };
     }
     case ModelProvider.DeepSeek: {
-      const { DEEPSEEK_API_KEY } = getServerConfig();
+      const { DEEPSEEK_API_KEY } = getLLMConfig();
 
       const apiKey = apiKeyManager.pick(payload?.apiKey || DEEPSEEK_API_KEY);
 
       return { apiKey };
     }
     case ModelProvider.TogetherAI: {
-      const { TOGETHERAI_API_KEY } = getServerConfig();
+      const { TOGETHERAI_API_KEY } = getLLMConfig();
 
       const apiKey = apiKeyManager.pick(payload?.apiKey || TOGETHERAI_API_KEY);
 
       return { apiKey };
     }
     case ModelProvider.ZeroOne: {
-      const { ZEROONE_API_KEY } = getServerConfig();
+      const { ZEROONE_API_KEY } = getLLMConfig();
 
       const apiKey = apiKeyManager.pick(payload?.apiKey || ZEROONE_API_KEY);
 

package/src/app/api/chat/apiKeyManager.test.ts

@@ -1,3 +1,4 @@
+// @vitest-environment node
 import { nanoid } from 'nanoid';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 

package/src/app/api/chat/apiKeyManager.ts

@@ -1,4 +1,4 @@
-import { getServerConfig } from '@/config/server';
+import { getLLMConfig } from '@/config/llm';
 
 interface KeyStore {
   index: number;
@@ -12,7 +12,7 @@ export class ApiKeyManager {
   private _mode: string;
 
   constructor() {
-    const { API_KEY_SELECT_MODE: mode = 'random' } = getServerConfig();
+    const { API_KEY_SELECT_MODE: mode = 'random' } = getLLMConfig();
 
     this._mode = mode;
   }

package/src/app/api/config.test.ts

@@ -1,7 +1,7 @@
+// @vitest-environment node
 import { describe, expect, it, vi } from 'vitest';
 
 import { getPreferredRegion } from './config';
-import { checkAuth } from './openai/createBizOpenAI/auth';
 
 // Stub the global process object to safely mock environment variables
 vi.stubGlobal('process', {

package/src/app/api/config.ts

@@ -1,13 +1,12 @@
-import { getServerConfig } from '@/config/server';
+import { getLLMConfig } from '@/config/llm';
 
 export const getPreferredRegion = (region: string | string[] = 'auto') => {
   try {
-    const cfg = getServerConfig();
-    if (cfg.OPENAI_FUNCTION_REGIONS.length <= 0) {
+    if (getLLMConfig().OPENAI_FUNCTION_REGIONS.length <= 0) {
       return region;
     }
 
-    return cfg.OPENAI_FUNCTION_REGIONS;
+    return getLLMConfig().OPENAI_FUNCTION_REGIONS;
   } catch (error) {
     console.error('get server config failed, error:', error);
     return region;

package/src/app/api/openai/createBizOpenAI/createAzureOpenai.ts

@@ -1,7 +1,7 @@
 import OpenAI, { ClientOptions } from 'openai';
 import urlJoin from 'url-join';
 
-import { getServerConfig } from '@/config/server';
+import { getLLMConfig } from '@/config/llm';
 import { ChatErrorType } from '@/types/fetch';
 
 // create Azure OpenAI Instance
@@ -11,7 +11,7 @@ export const createAzureOpenai = (params: {
   model: string;
   userApiKey?: string | null;
 }) => {
-  const { OPENAI_PROXY_URL = '', AZURE_API_VERSION, AZURE_API_KEY } = getServerConfig();
+  const { OPENAI_PROXY_URL = '', AZURE_API_VERSION, AZURE_API_KEY } = getLLMConfig();
 
   const endpoint = !params.endpoint ? OPENAI_PROXY_URL : params.endpoint;
   const baseURL = urlJoin(endpoint, `/openai/deployments/${params.model.replace('.', '')}`); // refs: https://test-001.openai.azure.com/openai/deployments/gpt-35-turbo

package/src/app/api/openai/createBizOpenAI/createOpenai.ts

@@ -1,11 +1,11 @@
 import OpenAI from 'openai';
 
-import { getServerConfig } from '@/config/server';
+import { getLLMConfig } from '@/config/llm';
 import { ChatErrorType } from '@/types/fetch';
 
 // create OpenAI instance
 export const createOpenai = (userApiKey: string | null, endpoint?: string | null) => {
-  const { OPENAI_API_KEY, OPENAI_PROXY_URL } = getServerConfig();
+  const { OPENAI_API_KEY, OPENAI_PROXY_URL } = getLLMConfig();
 
   const baseURL = endpoint ? endpoint : OPENAI_PROXY_URL ? OPENAI_PROXY_URL : undefined;
 

package/src/config/__tests__/server.test.ts

@@ -27,11 +27,11 @@ describe('getServerConfig', () => {
     global.process = originalProcess; // Restore the original process object
   });
 
-  it('correctly handles values for OPENAI_FUNCTION_REGIONS', () => {
-    process.env.OPENAI_FUNCTION_REGIONS = 'iad1,sfo1';
-    const config = getServerConfig();
-    expect(config.OPENAI_FUNCTION_REGIONS).toStrictEqual(['iad1', 'sfo1']);
-  });
+  // it('correctly handles values for OPENAI_FUNCTION_REGIONS', () => {
+  //   process.env.OPENAI_FUNCTION_REGIONS = 'iad1,sfo1';
+  //   const config = getServerConfig();
+  //   expect(config.OPENAI_FUNCTION_REGIONS).toStrictEqual(['iad1', 'sfo1']);
+  // });
 
   describe('index url', () => {
     it('should return default URLs when no environment variables are set', () => {