From 3e47275df2f7418a01f1cc79762ae3ff4f8b54fc Mon Sep 17 00:00:00 2001
From: JasonM <jasonm23@gmail.com>
Date: Tue, 15 Oct 2024 21:15:02 +0700
Subject: [PATCH 1/3] Add provider filtering on model list

---
 app/components/chat/BaseChat.tsx | 55 ++++++++++++++++++++++++--------
 1 file changed, 41 insertions(+), 14 deletions(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index e3c7f5fd..2749ca41 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -10,6 +10,7 @@ import { classNames } from '~/utils/classNames';
 import { MODEL_LIST } 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(null);
+  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',

From 68d8c7485fa40d7bb13cd403eba30e3457180c12 Mon Sep 17 00:00:00 2001
From: jasonm23 <jasonm23@gmail.com>
Date: Tue, 15 Oct 2024 21:28:36 +0700
Subject: [PATCH 2/3] Set default provider from constants

---
 app/components/chat/BaseChat.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index 2749ca41..abfdaa57 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -7,7 +7,7 @@ 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';
@@ -25,7 +25,7 @@ const EXAMPLE_PROMPTS = [
 const providerList = [...new Set(MODEL_LIST.map((model) => model.provider))]
 
 const ModelSelector = ({ model, setModel, modelList, providerList }) => {
-  const [provider, setProvider] = useState(null);
+  const [provider, setProvider] = useState(DEFAULT_PROVIDER);
   return (
     <div className="mb-2">
       <select 

From 8701be2f6d183de4871602153b2f95e2225a950c Mon Sep 17 00:00:00 2001
From: jonathan DS <jonathands@gmail.com>
Date: Tue, 15 Oct 2024 18:47:35 -0300
Subject: [PATCH 3/3] added Google Generative AI (gemini) integration

---
 .env.example                   |  9 +++++++--
 app/lib/.server/llm/api-key.ts |  3 +++
 app/lib/.server/llm/model.ts   | 14 +++++++++++++-
 app/utils/constants.ts         | 12 +++++++-----
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/.env.example b/.env.example
index 22bdcc18..4a781e0a 100644
--- a/.env.example
+++ b/.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=
 
 # Include this environment variable if you want more logging for debugging locally
-VITE_LOG_LEVEL=debug
\ No newline at end of file
+VITE_LOG_LEVEL=debug
diff --git a/app/lib/.server/llm/api-key.ts b/app/lib/.server/llm/api-key.ts
index 1f656cfa..b1a47f42 100644
--- a/app/lib/.server/llm/api-key.ts
+++ b/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':
diff --git a/app/lib/.server/llm/model.ts b/app/lib/.server/llm/model.ts
index 9b56a6dd..68983756 100644
--- a/app/lib/.server/llm/model.ts
+++ b/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',
@@ -45,7 +54,8 @@ 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);
   }
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 4ff6a46f..8f49885d 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -6,7 +6,13 @@ export const DEFAULT_MODEL = "claude-3-5-sonnet-20240620";
 export const DEFAULT_PROVIDER = "Anthropic";
 export const MODEL_LIST = [
     { name: 'claude-3-5-sonnet-20240620', label: 'Claude 3.5 Sonnet', provider: 'Anthropic' },
+    { 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: 'gpt-4o', label: 'GPT-4o', provider: 'OpenAI' },
+    { name: 'gpt-4o-mini', label: 'GPT-4o Mini', provider: 'OpenAI' },
+    { name: 'gpt-4-turbo', label: 'GPT-4 Turbo', provider: 'OpenAI' },
+    { name: 'gpt-4', label: 'GPT-4', provider: 'OpenAI' },
+    { name: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo', provider: 'OpenAI' },
     { name: 'qwen2.5-coder:7b', label: 'Qwen 2.5 Coder 7b', provider: 'Ollama' },
     { name: 'qwen2.5-coder:1.5b', label: 'Qwen 2.5 Coder 1.5b', provider: 'Ollama' },
     { name: 'deepseek-coder-v2:236b', label: 'DeepSeek-Coder-V2 236b', provider: 'Ollama' },
@@ -31,8 +37,4 @@ export const MODEL_LIST = [
     { name: 'claude-3-opus-20240229', label: 'Claude 3 Opus', provider: 'Anthropic' },
     { name: 'claude-3-sonnet-20240229', label: 'Claude 3 Sonnet', provider: 'Anthropic' },
     { name: 'claude-3-haiku-20240307', label: 'Claude 3 Haiku', provider: 'Anthropic' },
-    { name: 'gpt-4o-mini', label: 'GPT-4o Mini', provider: 'OpenAI' },
-    { name: 'gpt-4-turbo', label: 'GPT-4 Turbo', provider: 'OpenAI' },
-    { name: 'gpt-4', label: 'GPT-4', provider: 'OpenAI' },
-    { name: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo', provider: 'OpenAI' },
-];
\ No newline at end of file
+];