@lobehub/chat 0.162.17 → 0.162.18

package/src/app/(main)/settings/llm/ProviderList/providers.tsx

@@ -0,0 +1,141 @@
+import {
+  Anthropic,
+  Claude,
+  DeepSeek,
+  Gemini,
+  Google,
+  Groq,
+  Minimax,
+  Mistral,
+  Moonshot,
+  OpenRouter,
+  Perplexity,
+  Together,
+  Tongyi,
+  ZeroOne,
+  Zhipu,
+} from '@lobehub/icons';
+import { Divider } from 'antd';
+import { useTheme } from 'antd-style';
+import { useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import {
+  AnthropicProviderCard,
+  DeepSeekProviderCard,
+  GoogleProviderCard,
+  GroqProviderCard,
+  MinimaxProviderCard,
+  MistralProviderCard,
+  MoonshotProviderCard,
+  OpenRouterProviderCard,
+  PerplexityProviderCard,
+  QwenProviderCard,
+  TogetherAIProviderCard,
+  ZeroOneProviderCard,
+  ZhiPuProviderCard,
+} from '@/config/modelProviders';
+
+import { ProviderItem } from '../type';
+import { useAzureProvider } from './Azure';
+import { useBedrockProvider } from './Bedrock';
+import { useOllamaProvider } from './Ollama';
+import { useOpenAIProvider } from './OpenAI';
+
+const AnthropicBrand = () => {
+  const { isDarkMode } = useTheme();
+  return <Anthropic.Text color={isDarkMode ? undefined : Claude.colorPrimary} size={15} />;
+};
+
+const MoonshotBrand = () => {
+  const theme = useTheme();
+  return (
+    <Moonshot.Combine
+      color={theme.isDarkMode ? theme.colorText : Moonshot.colorPrimary}
+      size={22}
+    />
+  );
+};
+
+const GroqBrand = () => {
+  const theme = useTheme();
+
+  return <Groq.Text color={theme.isDarkMode ? theme.colorText : Groq.colorPrimary} size={20} />;
+};
+
+const GoogleBrand = () => (
+  <Flexbox align={'center'} gap={8} horizontal>
+    <Google.BrandColor size={22} />
+    <Divider style={{ margin: '0 4px' }} type={'vertical'} />
+    <Gemini.Combine size={22} type={'color'} />
+  </Flexbox>
+);
+
+export const useProviderList = (): ProviderItem[] => {
+  const azureProvider = useAzureProvider();
+  const ollamaProvider = useOllamaProvider();
+  const openAIProvider = useOpenAIProvider();
+  const bedrockProvider = useBedrockProvider();
+
+  return useMemo(
+    () => [
+      openAIProvider,
+      ollamaProvider,
+      azureProvider,
+      {
+        ...GoogleProviderCard,
+        title: <GoogleBrand />,
+      },
+      {
+        ...AnthropicProviderCard,
+        title: <AnthropicBrand />,
+      },
+      bedrockProvider,
+      {
+        ...GroqProviderCard,
+        title: <GroqBrand />,
+      },
+      {
+        ...OpenRouterProviderCard,
+        title: <OpenRouter.Combine iconProps={{ color: OpenRouter.colorPrimary }} size={20} />,
+      },
+      {
+        ...TogetherAIProviderCard,
+        title: <Together.Combine size={26} type={'color'} />,
+      },
+      {
+        ...QwenProviderCard,
+        title: <Tongyi.Combine extra={'千问'} size={26} type={'color'} />,
+      },
+      {
+        ...DeepSeekProviderCard,
+        title: <DeepSeek.Combine size={28} type={'color'} />,
+      },
+      {
+        ...MinimaxProviderCard,
+        title: <Minimax.Combine size={32} type={'color'} />,
+      },
+      {
+        ...MistralProviderCard,
+        title: <Mistral.Combine size={26} type={'color'} />,
+      },
+      {
+        ...MoonshotProviderCard,
+        title: <MoonshotBrand />,
+      },
+      {
+        ...PerplexityProviderCard,
+        title: <Perplexity.Combine size={24} type={'color'} />,
+      },
+      {
+        ...ZhiPuProviderCard,
+        title: <Zhipu.Combine size={32} type={'color'} />,
+      },
+      {
+        ...ZeroOneProviderCard,
+        title: <ZeroOne.Text size={20} />,
+      },
+    ],
+    [azureProvider, ollamaProvider, ollamaProvider, bedrockProvider],
+  );
+};

package/src/app/(main)/settings/llm/components/ProviderConfig/index.tsx

@@ -19,6 +19,7 @@ import {
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { useUserStore } from '@/store/user';
 import { keyVaultsConfigSelectors, modelConfigSelectors } from '@/store/user/selectors';
+import { ModelProviderCard } from '@/types/llm';
 import { GlobalLLMProviderKey } from '@/types/user/settings';
 
 import Checker from '../Checker';
@@ -46,36 +47,26 @@ const useStyles = createStyles(({ css, prefixCls, responsive }) => ({
   `,
 }));
 
-interface ProviderConfigProps {
+export interface ProviderConfigProps extends Omit<ModelProviderCard, 'id'> {
   apiKeyItems?: FormItemProps[];
   canDeactivate?: boolean;
-  checkModel?: string;
   checkerItem?: FormItemProps;
   className?: string;
   hideSwitch?: boolean;
+  id: GlobalLLMProviderKey;
   modelList?: {
     azureDeployName?: boolean;
     notFoundContent?: ReactNode;
     placeholder?: string;
     showModelFetcher?: boolean;
   };
-  provider: GlobalLLMProviderKey;
-  proxyUrl?:
-    | {
-        desc?: string;
-        placeholder: string;
-        title?: string;
-      }
-    | false;
-  showApiKey?: boolean;
-  showBrowserRequest?: boolean;
   title: ReactNode;
 }
 
 const ProviderConfig = memo<ProviderConfigProps>(
   ({
     apiKeyItems,
-    provider,
+    id,
     proxyUrl,
     showApiKey = true,
     checkModel,
@@ -85,9 +76,9 @@ const ProviderConfig = memo<ProviderConfigProps>(
     modelList,
     showBrowserRequest,
     className,
+    name,
   }) => {
     const { t } = useTranslation('setting');
-    const { t: modelT } = useTranslation('modelProvider');
     const [form] = Form.useForm();
     const { cx, styles } = useStyles();
     const [
@@ -99,9 +90,9 @@ const ProviderConfig = memo<ProviderConfigProps>(
     ] = useUserStore((s) => [
       s.toggleProviderEnabled,
       s.setSettings,
-      modelConfigSelectors.isProviderEnabled(provider)(s),
-      modelConfigSelectors.isProviderFetchOnClient(provider)(s),
-      keyVaultsConfigSelectors.isProviderEndpointNotEmpty(provider)(s),
+      modelConfigSelectors.isProviderEnabled(id)(s),
+      modelConfigSelectors.isProviderFetchOnClient(id)(s),
+      keyVaultsConfigSelectors.isProviderEndpointNotEmpty(id)(s),
     ]);
 
     useSyncSettings(form);
@@ -113,12 +104,12 @@ const ProviderConfig = memo<ProviderConfigProps>(
             children: (
               <Input.Password
                 autoComplete={'new-password'}
-                placeholder={modelT(`${provider}.token.placeholder` as any)}
+                placeholder={t(`llm.apiKey.placeholder`, { name })}
               />
             ),
-            desc: modelT(`${provider}.token.desc` as any),
-            label: modelT(`${provider}.token.title` as any),
-            name: [KeyVaultsConfigKey, provider, LLMProviderApiTokenKey],
+            desc: t(`llm.apiKey.desc`, { name }),
+            label: t(`llm.apiKey.title`),
+            name: [KeyVaultsConfigKey, id, LLMProviderApiTokenKey],
           },
         ];
 
@@ -129,13 +120,13 @@ const ProviderConfig = memo<ProviderConfigProps>(
         children: <Input allowClear placeholder={proxyUrl?.placeholder} />,
         desc: proxyUrl?.desc || t('llm.proxyUrl.desc'),
         label: proxyUrl?.title || t('llm.proxyUrl.title'),
-        name: [KeyVaultsConfigKey, provider, LLMProviderBaseUrlKey],
+        name: [KeyVaultsConfigKey, id, LLMProviderBaseUrlKey],
       },
       (showBrowserRequest || (showEndpoint && isProviderEndpointNotEmpty)) && {
         children: (
           <Switch
             onChange={(enabled) => {
-              setSettings({ [LLMProviderConfigKey]: { [provider]: { fetchOnClient: enabled } } });
+              setSettings({ [LLMProviderConfigKey]: { [id]: { fetchOnClient: enabled } } });
             }}
             value={isFetchOnClient}
           />
@@ -149,17 +140,17 @@ const ProviderConfig = memo<ProviderConfigProps>(
           <ProviderModelListSelect
             notFoundContent={modelList?.notFoundContent}
             placeholder={modelList?.placeholder ?? t('llm.modelList.placeholder')}
-            provider={provider}
+            provider={id}
             showAzureDeployName={modelList?.azureDeployName}
             showModelFetcher={modelList?.showModelFetcher}
           />
         ),
         desc: t('llm.modelList.desc'),
         label: t('llm.modelList.title'),
-        name: [LLMProviderConfigKey, provider, LLMProviderModelListKey],
+        name: [LLMProviderConfigKey, id, LLMProviderModelListKey],
       },
       checkerItem ?? {
-        children: <Checker model={checkModel!} provider={provider} />,
+        children: <Checker model={checkModel!} provider={id} />,
         desc: t('llm.checker.desc'),
         label: t('llm.checker.title'),
         minWidth: undefined,
@@ -173,7 +164,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
       extra: canDeactivate ? (
         <Switch
           onChange={(enabled) => {
-            toggleProviderEnabled(provider, enabled);
+            toggleProviderEnabled(id, enabled);
           }}
           value={enabled}
         />

package/src/app/(main)/settings/llm/index.tsx

@@ -2,46 +2,17 @@
 
 import { Flexbox } from 'react-layout-kit';
 
-import Anthropic from './Anthropic';
-import Azure from './Azure';
-import Bedrock from './Bedrock';
-import DeepSeek from './DeepSeek';
-import Google from './Google';
-import Groq from './Groq';
-import Minimax from './Minimax';
-import Mistral from './Mistral';
-import Moonshot from './Moonshot';
-import Ollama from './Ollama';
-import OpenAI from './OpenAI';
-import OpenRouter from './OpenRouter';
-import Perplexity from './Perplexity';
-import Qwen from './Qwen';
-import TogetherAI from './TogetherAI';
-import ZeroOne from './ZeroOne';
-import Zhipu from './Zhipu';
-import Footer from './components/Footer';
+import { useProviderList } from './ProviderList/providers';
+import ProviderConfig from './components/ProviderConfig';
 
 const Page = () => {
+  const list = useProviderList();
+
   return (
     <Flexbox gap={24} width={'100%'}>
-      <OpenAI />
-      <Ollama />
-      <Azure />
-      <Google />
-      <Anthropic />
-      <Bedrock />
-      <DeepSeek />
-      <OpenRouter />
-      <TogetherAI />
-      <Groq />
-      <Perplexity />
-      <Qwen />
-      <Minimax />
-      <Mistral />
-      <Moonshot />
-      <Zhipu />
-      <ZeroOne />
-      <Footer />
+      {list.map(({ id, ...res }) => (
+        <ProviderConfig id={id as any} key={id} {...res} />
+      ))}
     </Flexbox>
   );
 };

package/src/app/(main)/settings/llm/type.ts

@@ -0,0 +1,5 @@
+import { ProviderConfigProps } from './components/ProviderConfig';
+
+export interface ProviderItem extends Omit<ProviderConfigProps, 'id'> {
+  id: string;
+}

package/src/app/api/chat/[provider]/route.ts

@@ -1,6 +1,6 @@
 import { getPreferredRegion } from '@/app/api/config';
 import { createErrorResponse } from '@/app/api/errorResponse';
-import { ChatCompletionErrorPayload } from '@/libs/agent-runtime';
+import { AgentRuntime, ChatCompletionErrorPayload } from '@/libs/agent-runtime';
 import { ChatErrorType } from '@/types/fetch';
 import { ChatStreamPayload } from '@/types/openai/chat';
 import { getTracePayload } from '@/utils/trace';
@@ -12,12 +12,17 @@ export const runtime = 'edge';
 
 export const preferredRegion = getPreferredRegion();
 
-export const POST = checkAuth(async (req: Request, { params, jwtPayload }) => {
+export const POST = checkAuth(async (req: Request, { params, jwtPayload, createRuntime }) => {
   const { provider } = params;
 
   try {
     // ============  1. init chat model   ============ //
-    const agentRuntime = await initAgentRuntimeWithUserPayload(provider, jwtPayload);
+    let agentRuntime: AgentRuntime;
+    if (createRuntime) {
+      agentRuntime = createRuntime(jwtPayload);
+    } else {
+      agentRuntime = await initAgentRuntimeWithUserPayload(provider, jwtPayload);
+    }
 
     // ============  2. create chat completion   ============ //
 

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

@@ -34,7 +34,13 @@ describe('createErrorResponse', () => {
 
   describe('Provider Biz Error', () => {
     it('returns a 471 status for OpenAIBizError error type', () => {
-      const errorType = ChatErrorType.OpenAIBizError;
+      const errorType = AgentRuntimeErrorType.OpenAIBizError;
+      const response = createErrorResponse(errorType);
+      expect(response.status).toBe(471);
+    });
+
+    it('returns a 471 status for ProviderBizError error type', () => {
+      const errorType = AgentRuntimeErrorType.ProviderBizError;
       const response = createErrorResponse(errorType);
       expect(response.status).toBe(471);
     });
@@ -50,100 +56,6 @@ describe('createErrorResponse', () => {
       const response = createErrorResponse(errorType as any);
       expect(response.status).toBe(471);
     });
-
-    // 测试 AzureBizError 错误类型返回472状态码
-    it('returns a 472 status for AzureBizError error type', () => {
-      const errorType = AgentRuntimeErrorType.AzureBizError;
-      const response = createErrorResponse(errorType);
-      expect(response.status).toBe(472);
-    });
-
-    // 测试 ZhipuBizError 错误类型返回473状态码
-    it('returns a 473 status for ZhipuBizError error type', () => {
-      const errorType = AgentRuntimeErrorType.ZhipuBizError;
-      const response = createErrorResponse(errorType);
-      expect(response.status).toBe(473);
-    });
-
-    // 测试 BedrockBizError 错误类型返回474状态码
-    it('returns a 474 status for BedrockBizError error type', () => {
-      const errorType = AgentRuntimeErrorType.BedrockBizError;
-      const response = createErrorResponse(errorType);
-      expect(response.status).toBe(474);
-    });
-
-    // 测试 GoogleBizError 错误类型返回475状态码
-    it('returns a 475 status for GoogleBizError error type', () => {
-      const errorType = AgentRuntimeErrorType.GoogleBizError;
-      const response = createErrorResponse(errorType);
-      expect(response.status).toBe(475);
-    });
-
-    // 测试 MoonshotBizError 错误类型返回476状态码
-    it('returns a 476 status for MoonshotBizError error type', () => {
-      const errorType = AgentRuntimeErrorType.MoonshotBizError;
-      const response = createErrorResponse(errorType);
-      expect(response.status).toBe(476);
-    });
-
-    // 测试 OpenRouterBizError 错误类型返回477状态码
-    it('returns a 477 status for OpenRouterBizError error type', () => {
-      const errorType = AgentRuntimeErrorType.OpenRouterBizError;
-      const response = createErrorResponse(errorType);
-      expect(response.status).toBe(477);
-    });
-
-    // 测试 OllamaBizError 错误类型返回478状态码
-    it('returns a 478 status for OllamaBizError error type', () => {
-      const errorType = AgentRuntimeErrorType.OllamaBizError;
-      const response = createErrorResponse(errorType);
-      expect(response.status).toBe(478);
-    });
-
-    // 测试 PerplexityBizError 错误类型返回479状态码
-    it('returns a 479 status for PerplexityBizError error type', () => {
-      const errorType = AgentRuntimeErrorType.PerplexityBizError;
-      const response = createErrorResponse(errorType);
-      expect(response.status).toBe(479);
-    });
-
-    // 测试 AnthropicBizError 错误类型返回480状态码
-    it('returns a 480 status for AnthropicBizError error type', () => {
-      const errorType = AgentRuntimeErrorType.AnthropicBizError;
-      const response = createErrorResponse(errorType);
-      expect(response.status).toBe(480);
-    });
-
-    // 测试 MistralBizError 错误类型返回481状态码
-    it('returns a 481 status for MistralBizError error type', () => {
-      const errorType = AgentRuntimeErrorType.MistralBizError;
-      const response = createErrorResponse(errorType);
-      expect(response.status).toBe(481);
-    });
-
-    it('returns a 484 status for TogetherAIBizError error type', () => {
-      const errorType = AgentRuntimeErrorType.TogetherAIBizError;
-      const response = createErrorResponse(errorType);
-      expect(response.status).toBe(484);
-    });
-
-    it('returns a 485 status for MinimaxBizError error type', () => {
-      const errorType = AgentRuntimeErrorType.MinimaxBizError;
-      const response = createErrorResponse(errorType);
-      expect(response.status).toBe(485);
-    });
-
-    it('returns a 486 status for DeepSeekBizError error type', () => {
-      const errorType = AgentRuntimeErrorType.DeepSeekBizError;
-      const response = createErrorResponse(errorType);
-      expect(response.status).toBe(486);
-    });
-
-    it('returns a 487 status for QwenBizError error type', () => {
-      const errorType = AgentRuntimeErrorType.QwenBizError;
-      const response = createErrorResponse(errorType);
-      expect(response.status).toBe(487);
-    });
   });
 
   // 测试状态码不在200-599范围内的情况

package/src/app/api/errorResponse.ts

@@ -7,6 +7,7 @@ const getStatus = (errorType: ILobeAgentRuntimeErrorType | ErrorType) => {
 
   switch (errorType) {
     // TODO: Need to refactor to Invalid OpenAI API Key
+    case AgentRuntimeErrorType.InvalidProviderAPIKey:
     case AgentRuntimeErrorType.NoOpenAIAPIKey: {
       return 401;
     }
@@ -19,59 +20,18 @@ const getStatus = (errorType: ILobeAgentRuntimeErrorType | ErrorType) => {
     case AgentRuntimeErrorType.AgentRuntimeError: {
       return 470;
     }
+
+    case AgentRuntimeErrorType.ProviderBizError:
     case AgentRuntimeErrorType.OpenAIBizError: {
       return 471;
     }
-    case AgentRuntimeErrorType.AzureBizError: {
-      return 472;
-    }
-    case AgentRuntimeErrorType.ZhipuBizError: {
-      return 473;
-    }
-    case AgentRuntimeErrorType.BedrockBizError: {
-      return 474;
-    }
-    case AgentRuntimeErrorType.GoogleBizError: {
-      return 475;
-    }
-    case AgentRuntimeErrorType.MoonshotBizError: {
-      return 476;
-    }
-    case AgentRuntimeErrorType.OpenRouterBizError: {
-      return 477;
-    }
+
     case ChatErrorType.OllamaServiceUnavailable:
     case AgentRuntimeErrorType.OllamaBizError: {
-      return 478;
-    }
-    case AgentRuntimeErrorType.PerplexityBizError: {
-      return 479;
-    }
-    case AgentRuntimeErrorType.AnthropicBizError: {
-      return 480;
-    }
-    case AgentRuntimeErrorType.MistralBizError: {
-      return 481;
-    }
-    case AgentRuntimeErrorType.GroqBizError: {
-      return 482;
-    }
-    case AgentRuntimeErrorType.ZeroOneBizError: {
-      return 483;
-    }
-    case AgentRuntimeErrorType.TogetherAIBizError: {
-      return 484;
-    }
-    case AgentRuntimeErrorType.MinimaxBizError: {
-      return 485;
-    }
-    case AgentRuntimeErrorType.DeepSeekBizError: {
-      return 486;
-    }
-    case AgentRuntimeErrorType.QwenBizError: {
-      return 487;
+      return 472;
     }
   }
+
   return errorType as number;
 };
 

package/src/app/api/middleware/auth/index.ts

@@ -4,16 +4,20 @@ import { NextRequest } from 'next/server';
 
 import { createErrorResponse } from '@/app/api/errorResponse';
 import { JWTPayload, LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED, enableClerk } from '@/const/auth';
-import { AgentRuntimeError, ChatCompletionErrorPayload } from '@/libs/agent-runtime';
+import { AgentRuntime, AgentRuntimeError, ChatCompletionErrorPayload } from '@/libs/agent-runtime';
 import { ChatErrorType } from '@/types/fetch';
 
 import { checkAuthMethod, getJWTPayload } from './utils';
 
-type RequestOptions = { params: { provider: string } };
+type CreateRuntime = (jwtPayload: JWTPayload) => AgentRuntime;
+type RequestOptions = { createRuntime?: CreateRuntime, params: { provider: string }; };
 
 export type RequestHandler = (
   req: Request,
-  options: RequestOptions & { jwtPayload: JWTPayload },
+  options: RequestOptions & {
+    createRuntime?: CreateRuntime;
+    jwtPayload: JWTPayload;
+  },
 ) => Promise<Response>;
 
 export const checkAuth =

package/src/components/ModelSelect/index.tsx

@@ -151,16 +151,13 @@ export const ModelItemRender = memo<ModelItemRenderProps>(({ showInfoTag = true,
 });
 
 interface ProviderItemRenderProps {
+  name: string;
   provider: string;
 }
 
-export const ProviderItemRender = memo<ProviderItemRenderProps>(({ provider }) => {
-  const { t } = useTranslation('modelProvider');
-
-  return (
-    <Flexbox align={'center'} gap={4} horizontal>
-      <ModelProviderIcon provider={provider} />
-      {t(`${provider}.title` as any)}
-    </Flexbox>
-  );
-});
+export const ProviderItemRender = memo<ProviderItemRenderProps>(({ provider, name }) => (
+  <Flexbox align={'center'} gap={4} horizontal>
+    <ModelProviderIcon provider={provider} />
+    {name}
+  </Flexbox>
+));

package/src/config/modelProviders/anthropic.ts

@@ -58,7 +58,12 @@ const Anthropic: ModelProviderCard = {
       tokens: 100_000,
     },
   ],
+  checkModel: 'claude-3-haiku-20240307',
   id: 'anthropic',
+  name: 'Anthropic',
+  proxyUrl: {
+    placeholder: 'https://api.anthropic.com',
+  },
 };
 
 export default Anthropic;

package/src/config/modelProviders/azure.ts

@@ -38,6 +38,8 @@ const Azure: ModelProviderCard = {
     },
   ],
   id: 'azure',
+  name: 'Azure',
+  showBrowserRequest: true,
 };
 
 export default Azure;

package/src/config/modelProviders/bedrock.ts

@@ -88,7 +88,9 @@ const Bedrock: ModelProviderCard = {
       tokens: 4096,
     },
   ],
+  checkModel: 'anthropic.claude-instant-v1',
   id: 'bedrock',
+  name: 'Bedrock',
 };
 
 export default Bedrock;

package/src/config/modelProviders/deepseek.ts

@@ -17,7 +17,10 @@ const DeepSeek: ModelProviderCard = {
       tokens: 16_384,
     },
   ],
+  checkModel: 'deepseek-chat',
   id: 'deepseek',
+  modelList: { showModelFetcher: true },
+  name: 'DeepSeek',
 };
 
-export default DeepSeek;
+export default DeepSeek;

package/src/config/modelProviders/google.ts

@@ -97,7 +97,12 @@ const Google: ModelProviderCard = {
       tokens: 32_768,
     },
   ],
+  checkModel: 'gemini-pro',
   id: 'google',
+  name: 'Google',
+  proxyUrl: {
+    placeholder: 'https://generativelanguage.googleapis.com',
+  },
 };
 
 export default Google;

package/src/config/modelProviders/groq.ts

@@ -37,7 +37,12 @@ const Groq: ModelProviderCard = {
       tokens: 4096,
     },
   ],
+  checkModel: 'gemma-7b-it',
   id: 'groq',
+  name: 'Groq',
+  proxyUrl: {
+    placeholder: 'https://api.groq.com/openai/v1',
+  },
 };
 
 export default Groq;