✨ feat: support model provider groq (#1562)

src/app/api/chat/[provider]/agentRuntime.ts

@@ -13,6 +13,7 @@ import {
   LobeAzureOpenAI,
   LobeBedrockAI,
   LobeGoogleAI,
+  LobeGroq,
   LobeMistralAI,
   LobeMoonshotAI,
   LobeOllamaAI,
@@ -162,11 +163,16 @@ class AgentRuntime {
         runtimeModel = this.initAnthropic(payload);
         break;
       }
-      
+
       case ModelProvider.Mistral: {
         runtimeModel = this.initMistral(payload);
         break;
       }
+
+      case ModelProvider.Groq: {
+        runtimeModel = this.initGroq(payload);
+        break;
+      }
     }
 
     return new AgentRuntime(runtimeModel);
@@ -261,13 +267,20 @@ class AgentRuntime {
     const baseURL = payload?.endpoint || ANTHROPIC_PROXY_URL;
     return new LobeAnthropicAI({ apiKey, baseURL });
   }
-  
+
   private static initMistral(payload: JWTPayload) {
     const { MISTRAL_API_KEY } = getServerConfig();
     const apiKey = apiKeyManager.pick(payload?.apiKey || MISTRAL_API_KEY);
 
     return new LobeMistralAI({ apiKey });
   }
+
+  private static initGroq(payload: JWTPayload) {
+    const { GROQ_API_KEY } = getServerConfig();
+    const apiKey = apiKeyManager.pick(payload?.apiKey || GROQ_API_KEY);
+
+    return new LobeGroq({ apiKey });
+  }
 }
 
 export default AgentRuntime;

src/app/api/config/route.ts

@@ -16,6 +16,7 @@ export const GET = async () => {
     ENABLED_ZHIPU,
     ENABLED_AWS_BEDROCK,
     ENABLED_GOOGLE,
+    ENABLED_GROQ,
     ENABLE_OAUTH_SSO,
     ENABLE_OLLAMA,
     ENABLED_PERPLEXITY,
@@ -36,6 +37,7 @@ export const GET = async () => {
       anthropic: { enabled: ENABLED_ANTHROPIC },
       bedrock: { enabled: ENABLED_AWS_BEDROCK },
       google: { enabled: ENABLED_GOOGLE },
+      groq: { enabled: ENABLED_GROQ },
       mistral: { enabled: ENABLED_MISTRAL },
       moonshot: { enabled: ENABLED_MOONSHOT },
       ollama: { customModelName: OLLAMA_CUSTOM_MODELS, enabled: ENABLE_OLLAMA },

src/app/api/errorResponse.ts

@@ -50,6 +50,9 @@ const getStatus = (errorType: ILobeAgentRuntimeErrorType | ErrorType) => {
     case AgentRuntimeErrorType.MistralBizError: {
       return 481;
     }
+    case AgentRuntimeErrorType.GroqBizError: {
+      return 482;
+    }
   }
   return errorType as number;
 };

src/app/settings/llm/Groq/index.tsx

@@ -0,0 +1,52 @@
+import { Perplexity } from '@lobehub/icons';
+import { Input } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ModelProvider } from '@/libs/agent-runtime';
+
+import Checker from '../components/Checker';
+import ProviderConfig from '../components/ProviderConfig';
+import { LLMProviderApiTokenKey, LLMProviderConfigKey } from '../const';
+
+const providerKey = 'groq';
+
+const GroqProvider = memo(() => {
+  const { t } = useTranslation('setting');
+
+  const theme = useTheme();
+
+  return (
+    <ProviderConfig
+      configItems={[
+        {
+          children: (
+            <Input.Password
+              autoComplete={'new-password'}
+              placeholder={t('llm.Groq.token.placeholder')}
+            />
+          ),
+          desc: t('llm.Groq.token.desc'),
+          label: t('llm.Groq.token.title'),
+          name: [LLMProviderConfigKey, providerKey, LLMProviderApiTokenKey],
+        },
+        {
+          children: <Checker model={'gemma-7b-it'} provider={ModelProvider.Groq} />,
+          desc: t('llm.checker.desc'),
+          label: t('llm.checker.title'),
+          minWidth: '100%',
+        },
+      ]}
+      provider={providerKey}
+      title={
+        <Perplexity.Combine
+          color={theme.isDarkMode ? theme.colorText : Perplexity.colorPrimary}
+          size={24}
+        />
+      }
+    />
+  );
+});
+
+export default GroqProvider;

src/app/settings/llm/index.tsx

@@ -11,6 +11,7 @@ import Footer from '../features/Footer';
 import Anthropic from './Anthropic';
 import Bedrock from './Bedrock';
 import Google from './Google';
+import Groq from './Groq';
 import Mistral from './Mistral';
 import Moonshot from './Moonshot';
 import Ollama from './Ollama';
@@ -29,6 +30,7 @@ export default memo<{ showOllama: boolean }>(({ showOllama }) => {
       {showOllama && <Ollama />}
       <Anthropic />
       <Google />
+      <Groq />
       <Bedrock />
       <Perplexity />
       <Mistral />

src/components/ModelProviderIcon/index.tsx

@@ -3,6 +3,7 @@ import {
   Azure,
   Bedrock,
   Google,
+  Groq,
   Mistral,
   Moonshot,
   Ollama,
@@ -69,6 +70,10 @@ const ModelProviderIcon = memo<ModelProviderIconProps>(({ provider }) => {
       return <Anthropic size={20} />;
     }
 
+    case ModelProvider.Groq: {
+      return <Groq size={20} />;
+    }
+
     default: {
       return null;
     }

src/config/modelProviders/groq.ts

@@ -0,0 +1,24 @@
+import { ModelProviderCard } from '@/types/llm';
+
+const Groq: ModelProviderCard = {
+  chatModels: [
+    {
+      displayName: 'LLaMA2-70b-chat',
+      id: 'llama2-70b-4096',
+      tokens: 4096,
+    },
+    {
+      displayName: 'Mixtral-8x7b-Instruct-v0.1',
+      id: 'mixtral-8x7b-32768',
+      tokens: 32_768,
+    },
+    {
+      displayName: 'Gemma-7b-it',
+      id: 'gemma-7b-it',
+      tokens: 8192,
+    },
+  ],
+  id: 'groq',
+};
+
+export default Groq;

src/config/modelProviders/index.ts

@@ -3,6 +3,7 @@ import { ChatModelCard } from '@/types/llm';
 import AnthropicProvider from './anthropic';
 import BedrockProvider from './bedrock';
 import GoogleProvider from './google';
+import GroqProvider from './groq';
 import MistralProvider from './mistral';
 import MoonshotProvider from './moonshot';
 import OllamaProvider from './ollama';
@@ -15,6 +16,7 @@ export const LOBE_DEFAULT_MODEL_LIST: ChatModelCard[] = [
   ZhiPuProvider.chatModels,
   BedrockProvider.chatModels,
   GoogleProvider.chatModels,
+  GroqProvider.chatModels,
   MistralProvider.chatModels,
   MoonshotProvider.chatModels,
   OllamaProvider.chatModels,
@@ -25,6 +27,7 @@ export const LOBE_DEFAULT_MODEL_LIST: ChatModelCard[] = [
 export { default as AnthropicProvider } from './anthropic';
 export { default as BedrockProvider } from './bedrock';
 export { default as GoogleProvider } from './google';
+export { default as GroqProvider } from './groq';
 export { default as MistralProvider } from './mistral';
 export { default as MoonshotProvider } from './moonshot';
 export { default as OllamaProvider } from './ollama';

src/config/server/provider.ts

@@ -36,10 +36,13 @@ declare global {
       // Anthropic Provider
       ANTHROPIC_API_KEY?: string;
       ANTHROPIC_PROXY_URL?: string;
-      
+
       // Mistral Provider
       MISTRAL_API_KEY?: string;
 
+      // Groq Provider
+      GROQ_API_KEY?: string;
+
       // AWS Credentials
       AWS_REGION?: string;
       AWS_ACCESS_KEY_ID?: string;
@@ -67,9 +70,11 @@ export const getProviderConfig = () => {
   const PERPLEXITY_API_KEY = process.env.PERPLEXITY_API_KEY || '';
 
   const ANTHROPIC_API_KEY = process.env.ANTHROPIC_API_KEY || '';
-  
+
   const MISTRAL_API_KEY = process.env.MISTRAL_API_KEY || '';
 
+  const GROQ_API_KEY = process.env.GROQ_API_KEY || '';
+
   // region format: iad1,sfo1
   let regions: string[] = [];
   if (process.env.OPENAI_FUNCTION_REGIONS) {
@@ -97,14 +102,17 @@ export const getProviderConfig = () => {
     ENABLED_ANTHROPIC: !!ANTHROPIC_API_KEY,
     ANTHROPIC_API_KEY,
     ANTHROPIC_PROXY_URL: process.env.ANTHROPIC_PROXY_URL,
-    
+
     ENABLED_MISTRAL: !!MISTRAL_API_KEY,
     MISTRAL_API_KEY,
 
     ENABLED_MOONSHOT: !!MOONSHOT_API_KEY,
     MOONSHOT_API_KEY,
     MOONSHOT_PROXY_URL: process.env.MOONSHOT_PROXY_URL,
 
+    ENABLED_GROQ: !!GROQ_API_KEY,
+    GROQ_API_KEY,
+
     ENABLED_AWS_BEDROCK: !!AWS_ACCESS_KEY_ID,
     AWS_REGION: process.env.AWS_REGION,
     AWS_ACCESS_KEY_ID: AWS_ACCESS_KEY_ID,

src/const/settings.ts

@@ -66,6 +66,10 @@ export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
     apiKey: '',
     enabled: false,
   },
+  groq: {
+    apiKey: '',
+    enabled: false,
+  },
   mistral: {
     apiKey: '',
     enabled: false,

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;

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 />;

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} />;
     }

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 =