@lobehub/chat 0.137.0 → 0.138.1

package/src/features/Conversation/Error/APIKeyForm/Groq.tsx

@@ -0,0 +1,60 @@
+import { Groq } from '@lobehub/icons';
+import { Input } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ModelProvider } from '@/libs/agent-runtime';
+import { useGlobalStore } from '@/store/global';
+import { modelProviderSelectors } from '@/store/global/selectors';
+
+import { FormAction } from '../style';
+
+const GroqForm = memo(() => {
+  const { t } = useTranslation('error');
+  // const [showProxy, setShow] = useState(false);
+
+  const [apiKey, setConfig] = useGlobalStore((s) => [
+    modelProviderSelectors.groqAPIKey(s),
+    s.setModelProviderConfig,
+  ]);
+
+  return (
+    <FormAction
+      avatar={<Groq size={56} />}
+      description={t('unlock.apikey.Groq.description')}
+      title={t('unlock.apikey.Groq.title')}
+    >
+      <Input.Password
+        autoComplete={'new-password'}
+        onChange={(e) => {
+          setConfig(ModelProvider.Groq, { apiKey: e.target.value });
+        }}
+        placeholder={'*********************************'}
+        type={'block'}
+        value={apiKey}
+      />
+      {/*{showProxy ? (*/}
+      {/*  <Input*/}
+      {/*    onChange={(e) => {*/}
+      {/*      setConfig({ endpoint: e.target.value });*/}
+      {/*    }}*/}
+      {/*    placeholder={'https://api.openai.com/v1'}*/}
+      {/*    type={'block'}*/}
+      {/*    value={proxyUrl}*/}
+      {/*  />*/}
+      {/*) : (*/}
+      {/*  <Button*/}
+      {/*    icon={<Icon icon={Network} />}*/}
+      {/*    onClick={() => {*/}
+      {/*      setShow(true);*/}
+      {/*    }}*/}
+      {/*    type={'text'}*/}
+      {/*  >*/}
+      {/*    {t('unlock.apikey.addProxyUrl')}*/}
+      {/*  </Button>*/}
+      {/*)}*/}
+    </FormAction>
+  );
+});
+
+export default GroqForm;

package/src/features/Conversation/Error/APIKeyForm/index.tsx

@@ -9,6 +9,7 @@ import { useChatStore } from '@/store/chat';
 import AnthropicForm from './Anthropic';
 import BedrockForm from './Bedrock';
 import GoogleForm from './Google';
+import GroqForm from './Groq';
 import MistralForm from './Mistral';
 import MoonshotForm from './Moonshot';
 import OpenAIForm from './OpenAI';
@@ -55,6 +56,10 @@ const APIKeyForm = memo<APIKeyFormProps>(({ id, provider }) => {
         return <AnthropicForm />;
       }
 
+      case ModelProvider.Groq: {
+        return <GroqForm />;
+      }
+
       default:
       case ModelProvider.OpenAI: {
         return <OpenAIForm />;

package/src/features/Conversation/Error/index.tsx

@@ -74,6 +74,7 @@ const ErrorMessageExtra = memo<{ data: ChatMessage }>(({ data }) => {
     case AgentRuntimeErrorType.InvalidGoogleAPIKey:
     case AgentRuntimeErrorType.InvalidPerplexityAPIKey:
     case AgentRuntimeErrorType.InvalidAnthropicAPIKey:
+    case AgentRuntimeErrorType.InvalidGroqAPIKey:
     case AgentRuntimeErrorType.NoOpenAIAPIKey: {
       return <InvalidAPIKey id={data.id} provider={data.error?.body?.provider} />;
     }

package/src/features/Conversation/components/ChatItem/index.tsx

@@ -81,13 +81,14 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
     [item?.role],
   );
 
+  const { t: errorT } = useTranslation('error');
   const error = useMemo<AlertProps | undefined>(() => {
     if (!item?.error) return;
     const messageError = item.error;
 
     const alertConfig = getErrorAlertConfig(messageError.type);
 
-    return { message: t(`response.${messageError.type}` as any, { ns: 'error' }), ...alertConfig };
+    return { message: errorT(`response.${messageError.type}` as any), ...alertConfig };
   }, [item?.error]);
 
   const enableHistoryDivider = useSessionStore((s) => {

package/src/libs/agent-runtime/error.ts

@@ -34,6 +34,9 @@ export const AgentRuntimeErrorType = {
 
   InvalidAnthropicAPIKey: 'InvalidAnthropicAPIKey',
   AnthropicBizError: 'AnthropicBizError',
+
+  InvalidGroqAPIKey: 'InvalidGroqAPIKey',
+  GroqBizError: 'GroqBizError',
 } as const;
 
 export type ILobeAgentRuntimeErrorType =

package/src/libs/agent-runtime/groq/index.ts

@@ -0,0 +1,78 @@
+import { OpenAIStream, StreamingTextResponse } from 'ai';
+import OpenAI, { ClientOptions } from 'openai';
+
+import { LobeRuntimeAI } from '../BaseAI';
+import { AgentRuntimeErrorType } from '../error';
+import { ChatCompetitionOptions, ChatStreamPayload, ModelProvider } from '../types';
+import { AgentRuntimeError } from '../utils/createError';
+import { debugStream } from '../utils/debugStream';
+import { desensitizeUrl } from '../utils/desensitizeUrl';
+import { handleOpenAIError } from '../utils/handleOpenAIError';
+
+const DEFAULT_BASE_URL = 'https://api.groq.com/openai/v1';
+
+export class LobeGroq implements LobeRuntimeAI {
+  private client: OpenAI;
+
+  baseURL: string;
+
+  constructor({ apiKey, baseURL = DEFAULT_BASE_URL, ...res }: ClientOptions) {
+    if (!apiKey) throw AgentRuntimeError.createError(AgentRuntimeErrorType.InvalidGroqAPIKey);
+
+    this.client = new OpenAI({ apiKey, baseURL, ...res });
+    this.baseURL = this.client.baseURL;
+  }
+
+  async chat(payload: ChatStreamPayload, options?: ChatCompetitionOptions) {
+    try {
+      const response = await this.client.chat.completions.create(
+        payload as unknown as OpenAI.ChatCompletionCreateParamsStreaming,
+      );
+      const [prod, debug] = response.tee();
+
+      if (process.env.DEBUG_GROQ_CHAT_COMPLETION === '1') {
+        debugStream(debug.toReadableStream()).catch(console.error);
+      }
+
+      return new StreamingTextResponse(OpenAIStream(prod, options?.callback), {
+        headers: options?.headers,
+      });
+    } catch (error) {
+      let desensitizedEndpoint = this.baseURL;
+
+      if (this.baseURL !== DEFAULT_BASE_URL) {
+        desensitizedEndpoint = desensitizeUrl(this.baseURL);
+      }
+
+      if ('status' in (error as any)) {
+        switch ((error as Response).status) {
+          case 401: {
+            throw AgentRuntimeError.chat({
+              endpoint: desensitizedEndpoint,
+              error: error as any,
+              errorType: AgentRuntimeErrorType.InvalidGroqAPIKey,
+              provider: ModelProvider.Groq,
+            });
+          }
+
+          default: {
+            break;
+          }
+        }
+      }
+
+      const { errorResult, RuntimeError } = handleOpenAIError(error);
+
+      const errorType = RuntimeError || AgentRuntimeErrorType.GroqBizError;
+
+      throw AgentRuntimeError.chat({
+        endpoint: desensitizedEndpoint,
+        error: errorResult,
+        errorType,
+        provider: ModelProvider.Groq,
+      });
+    }
+  }
+}
+
+export default LobeGroq;

package/src/libs/agent-runtime/index.ts

@@ -4,6 +4,7 @@ export * from './BaseAI';
 export { LobeBedrockAI } from './bedrock';
 export * from './error';
 export { LobeGoogleAI } from './google';
+export { LobeGroq } from './groq';
 export { LobeMistralAI } from './mistral';
 export { LobeMoonshotAI } from './moonshot';
 export { LobeOllamaAI } from './ollama';

package/src/libs/agent-runtime/types/type.ts

@@ -27,6 +27,7 @@ export enum ModelProvider {
   Bedrock = 'bedrock',
   ChatGLM = 'chatglm',
   Google = 'google',
+  Groq = 'groq',
   Mistral = 'mistral',
   Moonshot = 'moonshot',
   Ollama = 'ollama',

package/src/locales/default/common.ts

@@ -104,6 +104,7 @@ export default {
     azure: 'Azure',
     bedrock: 'AWS Bedrock',
     google: 'Google',
+    groq: 'Groq',
     mistral: 'Mistral AI',
     moonshot: 'Moonshot AI',
     ollama: 'Ollama',

package/src/locales/default/error.ts

@@ -82,6 +82,9 @@ export default {
     InvalidAnthropicAPIKey: 'Anthropic API Key 不正确或为空，请检查 Anthropic API Key 后重试',
     AnthropicBizError: '请求 Anthropic AI 服务出错，请根据以下信息排查或重试',
 
+    InvalidGroqAPIKey: 'Groq API Key 不正确或为空，请检查 Groq API Key 后重试',
+    GroqBizError: '请求 Groq 服务出错，请根据以下信息排查或重试',
+
     InvalidOllamaArgs: 'Ollama 配置不正确，请检查 Ollama 配置后重试',
     OllamaBizError: '请求 Ollama 服务出错，请根据以下信息排查或重试',
     OllamaServiceUnavailable: '未检测到 Ollama 服务，请检查是否正常启动',
@@ -111,6 +114,10 @@ export default {
         description: '输入你的 Google API Key 即可开始会话。应用不会记录你的 API Key',
         title: '使用自定义 Google API Key',
       },
+      Groq: {
+        description: '输入你的 Groq API Key 即可开始会话。应用不会记录你的 API Key',
+        title: '使用自定义 Groq API Key',
+      },
       Mistral: {
         description: '输入你的 Mistral AI API Key 即可开始会话。应用不会记录你的 API Key',
         title: '使用自定义 Mistral AI API Key',

package/src/locales/default/setting.ts

@@ -100,6 +100,14 @@ export default {
         title: 'API Key',
       },
     },
+    Groq: {
+      title: 'Groq',
+      token: {
+        desc: '填入来自 Groq 的 API Key',
+        placeholder: 'Groq API Key',
+        title: 'API Key',
+      },
+    },
     Mistral: {
       title: 'Mistral AI',
       token: {

package/src/services/_auth.ts

@@ -57,11 +57,15 @@ export const getProviderAuthPayload = (provider: string) => {
       const endpoint = modelProviderSelectors.anthropicProxyUrl(useGlobalStore.getState());
       return { apiKey, endpoint };
     }
-    
+
     case ModelProvider.Mistral: {
       return { apiKey: modelProviderSelectors.mistralAPIKey(useGlobalStore.getState()) };
     }
 
+    case ModelProvider.Groq: {
+      return { apiKey: modelProviderSelectors.groqAPIKey(useGlobalStore.getState()) };
+    }
+
     default:
     case ModelProvider.OpenAI: {
       const openai = modelProviderSelectors.openAIConfig(useGlobalStore.getState());

package/src/store/global/slices/settings/selectors/modelProvider.ts

@@ -4,6 +4,7 @@ import {
   AnthropicProvider,
   BedrockProvider,
   GoogleProvider,
+  GroqProvider,
   LOBE_DEFAULT_MODEL_LIST,
   MistralProvider,
   MoonshotProvider,
@@ -58,6 +59,9 @@ const enableAnthropic = (s: GlobalStore) => modelProvider(s).anthropic.enabled;
 const anthropicAPIKey = (s: GlobalStore) => modelProvider(s).anthropic.apiKey;
 const anthropicProxyUrl = (s: GlobalStore) => modelProvider(s).anthropic.endpoint;
 
+const enableGroq = (s: GlobalStore) => modelProvider(s).groq.enabled;
+const groqAPIKey = (s: GlobalStore) => modelProvider(s).groq.apiKey;
+
 // const azureModelList = (s: GlobalStore): ModelProviderCard => {
 //   const azure = azureConfig(s);
 //   return {
@@ -143,14 +147,15 @@ const modelSelectList = (s: GlobalStore): ModelProviderCard[] => {
       chatModels: openaiChatModels,
     },
     // { ...azureModelList(s), enabled: enableAzure(s) },
-    { ...ZhiPuProvider, enabled: enableZhipu(s) },
-    { ...MoonshotProvider, enabled: enableMoonshot(s) },
+    { ...OllamaProvider, chatModels: ollamaChatModels, enabled: enableOllama(s) },
+    { ...AnthropicProvider, enabled: enableAnthropic(s) },
     { ...GoogleProvider, enabled: enableGoogle(s) },
     { ...BedrockProvider, enabled: enableBedrock(s) },
-    { ...OllamaProvider, chatModels: ollamaChatModels, enabled: enableOllama(s) },
     { ...PerplexityProvider, enabled: enablePerplexity(s) },
-    { ...AnthropicProvider, enabled: enableAnthropic(s) },
     { ...MistralProvider, enabled: enableMistral(s) },
+    { ...GroqProvider, enabled: enableGroq(s) },
+    { ...ZhiPuProvider, enabled: enableZhipu(s) },
+    { ...MoonshotProvider, enabled: enableMoonshot(s) },
   ];
 };
 
@@ -229,8 +234,12 @@ export const modelProviderSelectors = {
   enableAnthropic,
   anthropicAPIKey,
   anthropicProxyUrl,
-  
+
   // Mistral
   enableMistral,
   mistralAPIKey,
+
+  // Groq
+  enableGroq,
+  groqAPIKey,
 };

package/src/types/settings/modelProvider.ts

@@ -71,11 +71,17 @@ export interface MistralConfig {
   enabled: boolean;
 }
 
+export interface GroqConfig {
+  apiKey?: string;
+  enabled: boolean;
+}
+
 export interface GlobalLLMConfig {
   anthropic: AnthropicConfig;
   azure: AzureOpenAIConfig;
   bedrock: AWSBedrockConfig;
   google: GoogleConfig;
+  groq: GroqConfig;
   mistral: MistralConfig;
   moonshot: MoonshotConfig;
   ollama: OllamaConfig;