Merge branch 'main' into main

.env.example

@@ -18,7 +18,12 @@ ANTHROPIC_API_KEY=
 # Get your OpenRouter API Key in your account settings -
 # https://openrouter.ai/settings/keys
 # You only need this environment variable set if you want to use OpenRouter models
-OPEN_ROUTER_API_KEY=
+OPEN_ROUTER_API_KEY=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
+
+# Get your Google Generative AI API Key by following these instructions -
+# https://console.cloud.google.com/apis/credentials
+# You only need this environment variable set if you want to use Google Generative AI models
+GOOGLE_GENERATIVE_AI_API_KEY=
 
 # You only need this environment variable set if you want to use oLLAMA models
 #EXAMPLE http://localhost:11434

app/components/chat/BaseChat.tsx

@@ -7,9 +7,10 @@ import { Menu } from '~/components/sidebar/Menu.client';
 import { IconButton } from '~/components/ui/IconButton';
 import { Workbench } from '~/components/workbench/Workbench.client';
 import { classNames } from '~/utils/classNames';
-import { MODEL_LIST } from '~/utils/constants';
+import { MODEL_LIST, DEFAULT_PROVIDER } from '~/utils/constants';
 import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
+import { useState } from 'react';
 
 import styles from './BaseChat.module.scss';
 
@@ -21,6 +22,40 @@ const EXAMPLE_PROMPTS = [
   { text: 'How do I center a div?' },
 ];
 
+const providerList = [...new Set(MODEL_LIST.map((model) => model.provider))]
+
+const ModelSelector = ({ model, setModel, modelList, providerList }) => {
+  const [provider, setProvider] = useState(DEFAULT_PROVIDER);
+  return (
+    <div className="mb-2">
+      <select 
+        value={provider}
+        onChange={(e) => setProvider(e.target.value)}
+        className="w-full p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none"
+      >
+        {providerList.map((provider) => (
+          <option key={provider} value={provider}>
+            {provider}
+          </option>
+        ))}
+
+      </select>
+      <select
+        value={model}
+        provider={provider}
+        onChange={(e) => setModel(e.target.value)}
+        className="w-full p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none"
+      >
+        {[...modelList].filter( e => e.provider == provider ).map((modelOption) => (
+          <option key={modelOption.name} value={modelOption.name}>
+            {modelOption.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
+
 const TEXTAREA_MIN_HEIGHT = 76;
 
 interface BaseChatProps {
@@ -110,20 +145,12 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   'sticky bottom-0': chatStarted,
                 })}
               >
-                {/* Model selection dropdown */}
-                <div className="mb-2">
-                  <select
-                    value={model}
-                    onChange={(e) => setModel(e.target.value)}
-                    className="w-full p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none"
-                  >
-                    {MODEL_LIST.map((modelOption) => (
-                      <option key={modelOption.name} value={modelOption.name}>
-                        {modelOption.label}
-                      </option>
-                    ))}
-                  </select>
-                </div>
+                <ModelSelector
+                  model={model}
+                  setModel={setModel}
+                  modelList={MODEL_LIST}
+                  providerList={providerList}
+                />
                 <div
                   className={classNames(
                     'shadow-sm border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden',

app/lib/.server/llm/api-key.ts

@@ -7,11 +7,14 @@ export function getAPIKey(cloudflareEnv: Env, provider: string) {
    * The `cloudflareEnv` is only used when deployed or when previewing locally.
    * In development the environment variables are available through `env`.
    */
+
   switch (provider) {
     case 'Anthropic':
       return env.ANTHROPIC_API_KEY || cloudflareEnv.ANTHROPIC_API_KEY;
     case 'OpenAI':
       return env.OPENAI_API_KEY || cloudflareEnv.OPENAI_API_KEY;
+    case 'Google':
+      return env.GOOGLE_GENERATIVE_AI_API_KEY || cloudflareEnv.GOOGLE_GENERATIVE_AI_API_KEY;
     case 'Groq':
       return env.GROQ_API_KEY || cloudflareEnv.GROQ_API_KEY;
     case 'OpenRouter':

app/lib/.server/llm/model.ts

@@ -3,6 +3,7 @@
 import { getAPIKey } from '~/lib/.server/llm/api-key';
 import { createAnthropic } from '@ai-sdk/anthropic';
 import { createOpenAI } from '@ai-sdk/openai';
+import { createGoogleGenerativeAI } from '@ai-sdk/google';
 import { ollama } from 'ollama-ai-provider';
 import { createOpenRouter } from "@openrouter/ai-sdk-provider";
 
@@ -22,6 +23,14 @@ export function getOpenAIModel(apiKey: string, model: string) {
   return openai(model);
 }
 
+export function getGoogleModel(apiKey: string, model: string) {
+  const google = createGoogleGenerativeAI(
+    apiKey,
+  );
+
+  return google(model);
+}
+
 export function getGroqModel(apiKey: string, model: string) {
   const openai = createOpenAI({
     baseURL: 'https://api.groq.com/openai/v1',
@@ -46,6 +55,7 @@ export function getOpenRouterModel(apiKey: string, model: string) {
 export function getModel(provider: string, model: string, env: Env) {
   const apiKey = getAPIKey(env, provider);
 
+
   switch (provider) {
     case 'Anthropic':
       return getAnthropicModel(apiKey, model);
@@ -55,6 +65,8 @@ export function getModel(provider: string, model: string, env: Env) {
       return getGroqModel(apiKey, model);
     case 'OpenRouter':
       return getOpenRouterModel(apiKey, model);
+    case 'Google':
+      return getGoogleModel(apiKey, model)
     default:
       return getOllamaModel(model);
   }

app/utils/constants.ts

@@ -16,6 +16,8 @@ const staticModels: ModelInfo[] = [
   { name: 'mistralai/mistral-nemo', label: 'OpenRouter Mistral Nemo (OpenRouter)', provider: 'OpenRouter' },
   { name: 'qwen/qwen-110b-chat', label: 'OpenRouter Qwen 110b Chat (OpenRouter)', provider: 'OpenRouter' },
   { name: 'cohere/command', label: 'Cohere Command (OpenRouter)', provider: 'OpenRouter' },
+  { name: 'gemini-1.5-flash-latest', label: 'Gemini 1.5 Flash', provider: 'Google' },
+  { name: 'gemini-1.5-pro-latest', label: 'Gemini 1.5 Pro', provider: 'Google'},
   { name: 'llama-3.1-70b-versatile', label: 'Llama 3.1 70b (Groq)', provider: 'Groq' },
   { name: 'llama-3.1-8b-instant', label: 'Llama 3.1 8b (Groq)', provider: 'Groq' },
   { name: 'llama-3.2-11b-vision-preview', label: 'Llama 3.2 11b (Groq)', provider: 'Groq' },