From 3c7bf8c259d262126a7c736ed2b14425b35f4dcc Mon Sep 17 00:00:00 2001
From: ali00209 <ah2699514@gmail.com>
Date: Sun, 27 Oct 2024 23:58:04 +0500
Subject: [PATCH 1/3] feat: add ability to enter API keys in the UI

---
 app/components/chat/APIKeyManager.tsx | 49 ++++++++++++++++++++++
 app/components/chat/BaseChat.tsx      | 58 +++++++++++++++++++--------
 2 files changed, 90 insertions(+), 17 deletions(-)
 create mode 100644 app/components/chat/APIKeyManager.tsx

diff --git a/app/components/chat/APIKeyManager.tsx b/app/components/chat/APIKeyManager.tsx
new file mode 100644
index 000000000..aab70107c
--- /dev/null
+++ b/app/components/chat/APIKeyManager.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { IconButton } from '~/components/ui/IconButton';
+
+interface APIKeyManagerProps {
+  provider: string;
+  apiKey: string;
+  setApiKey: (key: string) => void;
+}
+
+export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey, setApiKey }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [tempKey, setTempKey] = useState(apiKey);
+
+  const handleSave = () => {
+    setApiKey(tempKey);
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="flex items-center gap-2 mt-2 mb-2">
+      <span className="text-sm text-bolt-elements-textSecondary">{provider} API Key:</span>
+      {isEditing ? (
+        <>
+          <input
+            type="password"
+            value={tempKey}
+            onChange={(e) => setTempKey(e.target.value)}
+            className="flex-1 p-1 text-sm rounded border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus"
+          />
+          <IconButton onClick={handleSave} title="Save API Key">
+            <div className="i-ph:check" />
+          </IconButton>
+          <IconButton onClick={() => setIsEditing(false)} title="Cancel">
+            <div className="i-ph:x" />
+          </IconButton>
+        </>
+      ) : (
+        <>
+          <span className="flex-1 text-sm text-bolt-elements-textPrimary">
+            {apiKey ? '••••••••' : 'Not set'}
+          </span>
+          <IconButton onClick={() => setIsEditing(true)} title="Edit API Key">
+            <div className="i-ph:pencil-simple" />
+          </IconButton>
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index c1175f700..e3be27bb3 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 // Preventing TS checks with files presented in the video for a better presentation.
 import type { Message } from 'ai';
-import React, { type RefCallback } from 'react';
+import React, { type RefCallback, useEffect } from 'react';
 import { ClientOnly } from 'remix-utils/client-only';
 import { Menu } from '~/components/sidebar/Menu.client';
 import { IconButton } from '~/components/ui/IconButton';
@@ -11,6 +11,7 @@ import { MODEL_LIST, DEFAULT_PROVIDER } from '~/utils/constants';
 import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
 import { useState } from 'react';
+import { APIKeyManager } from './APIKeyManager';
 
 import styles from './BaseChat.module.scss';
 
@@ -24,18 +25,17 @@ const EXAMPLE_PROMPTS = [
 
 const providerList = [...new Set(MODEL_LIST.map((model) => model.provider))]
 
-const ModelSelector = ({ model, setModel, modelList, providerList }) => {
-  const [provider, setProvider] = useState(DEFAULT_PROVIDER);
+const ModelSelector = ({ model, setModel, modelList, providerList, provider, setProvider }) => {
   return (
-    <div className="mb-2">
-      <select
+    <div className="mb-2 flex gap-2">
+      <select 
         value={provider}
         onChange={(e) => {
           setProvider(e.target.value);
           const firstModel = [...modelList].find(m => m.provider == e.target.value);
           setModel(firstModel ? firstModel.name : '');
         }}
-        className="w-full p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none"
+        className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
       >
         {providerList.map((provider) => (
           <option key={provider} value={provider}>
@@ -52,7 +52,7 @@ const ModelSelector = ({ model, setModel, modelList, providerList }) => {
       <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"
+        className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
       >
         {[...modelList].filter(e => e.provider == provider && e.name).map((modelOption) => (
           <option key={modelOption.name} value={modelOption.name}>
@@ -108,6 +108,23 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     ref,
   ) => {
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
+    const [provider, setProvider] = useState(DEFAULT_PROVIDER);
+    const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
+
+    useEffect(() => {
+      // Load API keys from localStorage on component mount
+      const storedApiKeys = localStorage.getItem('apiKeys');
+      if (storedApiKeys) {
+        setApiKeys(JSON.parse(storedApiKeys));
+      }
+    }, []);
+
+    const updateApiKey = (provider: string, key: string) => {
+      const updatedApiKeys = { ...apiKeys, [provider]: key };
+      setApiKeys(updatedApiKeys);
+      // Save updated API keys to localStorage
+      localStorage.setItem('apiKeys', JSON.stringify(updatedApiKeys));
+    };
 
     return (
       <div
@@ -122,11 +139,11 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
         <div ref={scrollRef} className="flex overflow-y-auto w-full h-full">
           <div className={classNames(styles.Chat, 'flex flex-col flex-grow min-w-[var(--chat-min-width)] h-full')}>
             {!chatStarted && (
-              <div id="intro" className="mt-[26vh] max-w-chat mx-auto">
-                <h1 className="text-5xl text-center font-bold text-bolt-elements-textPrimary mb-2">
+              <div id="intro" className="mt-[26vh] max-w-chat mx-auto text-center">
+                <h1 className="text-6xl font-bold text-bolt-elements-textPrimary mb-4 animate-fade-in">
                   Where ideas begin
                 </h1>
-                <p className="mb-4 text-center text-bolt-elements-textSecondary">
+                <p className="text-xl mb-8 text-bolt-elements-textSecondary animate-fade-in animation-delay-200">
                   Bring ideas to life in seconds or get help on existing projects.
                 </p>
               </div>
@@ -158,15 +175,22 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   setModel={setModel}
                   modelList={MODEL_LIST}
                   providerList={providerList}
+                  provider={provider}
+                  setProvider={setProvider}
+                />
+                <APIKeyManager
+                  provider={provider}
+                  apiKey={apiKeys[provider] || ''}
+                  setApiKey={(key) => updateApiKey(provider, key)}
                 />
                 <div
                   className={classNames(
-                    'shadow-sm border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden',
+                    'shadow-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden transition-all',
                   )}
                 >
                   <textarea
                     ref={textareaRef}
-                    className={`w-full pl-4 pt-4 pr-16 focus:outline-none resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent`}
+                    className={`w-full pl-4 pt-4 pr-16 focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent transition-all`}
                     onKeyDown={(event) => {
                       if (event.key === 'Enter') {
                         if (event.shiftKey) {
@@ -205,12 +229,12 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                       />
                     )}
                   </ClientOnly>
-                  <div className="flex justify-between text-sm p-4 pt-2">
+                  <div className="flex justify-between items-center text-sm p-4 pt-2">
                     <div className="flex gap-1 items-center">
                       <IconButton
                         title="Enhance prompt"
                         disabled={input.length === 0 || enhancingPrompt}
-                        className={classNames({
+                        className={classNames('transition-all', {
                           'opacity-100!': enhancingPrompt,
                           'text-bolt-elements-item-contentAccent! pr-1.5 enabled:hover:bg-bolt-elements-item-backgroundAccent!':
                             promptEnhanced,
@@ -219,7 +243,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                       >
                         {enhancingPrompt ? (
                           <>
-                            <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl"></div>
+                            <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl animate-spin"></div>
                             <div className="ml-1.5">Enhancing prompt...</div>
                           </>
                         ) : (
@@ -232,7 +256,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     </div>
                     {input.length > 3 ? (
                       <div className="text-xs text-bolt-elements-textTertiary">
-                        Use <kbd className="kdb">Shift</kbd> + <kbd className="kdb">Return</kbd> for a new line
+                        Use <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Shift</kbd> + <kbd className="kdb px-1.5 py-0.5 rounded bg-bolt-elements-background-depth-2">Return</kbd> for a new line
                       </div>
                     ) : null}
                   </div>
@@ -266,4 +290,4 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       </div>
     );
   },
-);
+);
\ No newline at end of file

From a544611a5690db6610e938fb0a6f2c45e0e00a38 Mon Sep 17 00:00:00 2001
From: ali00209 <ah2699514@gmail.com>
Date: Tue, 29 Oct 2024 08:19:30 +0500
Subject: [PATCH 2/3] fix: working

---
 app/components/chat/BaseChat.tsx    | 35 ++++++++++++++++++++++-------
 app/components/chat/Chat.client.tsx | 13 +++++++++++
 app/lib/.server/llm/api-key.ts      |  8 ++++++-
 app/lib/.server/llm/model.ts        |  4 ++--
 app/lib/.server/llm/stream-text.ts  |  9 ++++++--
 app/routes/api.chat.ts              | 15 +++++++++++--
 app/utils/constants.ts              |  8 +++----
 package.json                        |  4 +++-
 pnpm-lock.yaml                      | 17 ++++++++++++++
 9 files changed, 93 insertions(+), 20 deletions(-)

diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx
index e3be27bb3..5fd4cd033 100644
--- a/app/components/chat/BaseChat.tsx
+++ b/app/components/chat/BaseChat.tsx
@@ -12,6 +12,7 @@ import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
 import { useState } from 'react';
 import { APIKeyManager } from './APIKeyManager';
+import Cookies from 'js-cookie';
 
 import styles from './BaseChat.module.scss';
 
@@ -112,18 +113,36 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
 
     useEffect(() => {
-      // Load API keys from localStorage on component mount
-      const storedApiKeys = localStorage.getItem('apiKeys');
-      if (storedApiKeys) {
-        setApiKeys(JSON.parse(storedApiKeys));
+      // Load API keys from cookies on component mount
+      try {
+        const storedApiKeys = Cookies.get('apiKeys');
+        if (storedApiKeys) {
+          const parsedKeys = JSON.parse(storedApiKeys);
+          if (typeof parsedKeys === 'object' && parsedKeys !== null) {
+            setApiKeys(parsedKeys);
+          }
+        }
+      } catch (error) {
+        console.error('Error loading API keys from cookies:', error);
+        // Clear invalid cookie data
+        Cookies.remove('apiKeys');
       }
     }, []);
 
     const updateApiKey = (provider: string, key: string) => {
-      const updatedApiKeys = { ...apiKeys, [provider]: key };
-      setApiKeys(updatedApiKeys);
-      // Save updated API keys to localStorage
-      localStorage.setItem('apiKeys', JSON.stringify(updatedApiKeys));
+      try {
+        const updatedApiKeys = { ...apiKeys, [provider]: key };
+        setApiKeys(updatedApiKeys);
+        // Save updated API keys to cookies with 30 day expiry and secure settings
+        Cookies.set('apiKeys', JSON.stringify(updatedApiKeys), {
+          expires: 30, // 30 days
+          secure: true, // Only send over HTTPS
+          sameSite: 'strict', // Protect against CSRF
+          path: '/' // Accessible across the site
+        });
+      } catch (error) {
+        console.error('Error saving API keys to cookies:', error);
+      }
     };
 
     return (
diff --git a/app/components/chat/Chat.client.tsx b/app/components/chat/Chat.client.tsx
index 458bd8364..e1adca021 100644
--- a/app/components/chat/Chat.client.tsx
+++ b/app/components/chat/Chat.client.tsx
@@ -15,6 +15,7 @@ import { DEFAULT_MODEL } from '~/utils/constants';
 import { cubicEasingFn } from '~/utils/easings';
 import { createScopedLogger, renderLogger } from '~/utils/logger';
 import { BaseChat } from './BaseChat';
+import Cookies from 'js-cookie';
 
 const toastAnimation = cssTransition({
   enter: 'animated fadeInRight',
@@ -79,8 +80,13 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
 
   const [animationScope, animate] = useAnimate();
 
+  const [apiKeys, setApiKeys] = useState<Record<string, string>>({});
+
   const { messages, isLoading, input, handleInputChange, setInput, stop, append } = useChat({
     api: '/api/chat',
+    body: {
+      apiKeys
+    },
     onError: (error) => {
       logger.error('Request failed\n\n', error);
       toast.error('There was an error processing your request');
@@ -202,6 +208,13 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
 
   const [messageRef, scrollRef] = useSnapScroll();
 
+  useEffect(() => {
+    const storedApiKeys = Cookies.get('apiKeys');
+    if (storedApiKeys) {
+      setApiKeys(JSON.parse(storedApiKeys));
+    }
+  }, []);
+
   return (
     <BaseChat
       ref={animationScope}
diff --git a/app/lib/.server/llm/api-key.ts b/app/lib/.server/llm/api-key.ts
index e2764c1dc..88c0c0981 100644
--- a/app/lib/.server/llm/api-key.ts
+++ b/app/lib/.server/llm/api-key.ts
@@ -2,12 +2,18 @@
 // Preventing TS checks with files presented in the video for a better presentation.
 import { env } from 'node:process';
 
-export function getAPIKey(cloudflareEnv: Env, provider: string) {
+export function getAPIKey(cloudflareEnv: Env, provider: string, userApiKeys?: Record<string, string>) {
   /**
    * The `cloudflareEnv` is only used when deployed or when previewing locally.
    * In development the environment variables are available through `env`.
    */
 
+  // First check user-provided API keys
+  if (userApiKeys?.[provider]) {
+    return userApiKeys[provider];
+  }
+
+  // Fall back to environment variables
   switch (provider) {
     case 'Anthropic':
       return env.ANTHROPIC_API_KEY || cloudflareEnv.ANTHROPIC_API_KEY;
diff --git a/app/lib/.server/llm/model.ts b/app/lib/.server/llm/model.ts
index 390d57aeb..b56ad1026 100644
--- a/app/lib/.server/llm/model.ts
+++ b/app/lib/.server/llm/model.ts
@@ -80,8 +80,8 @@ export function getOpenRouterModel(apiKey: string, model: string) {
   return openRouter.chat(model);
 }
 
-export function getModel(provider: string, model: string, env: Env) {
-  const apiKey = getAPIKey(env, provider);
+export function getModel(provider: string, model: string, env: Env, apiKeys?: Record<string, string>) {
+  const apiKey = getAPIKey(env, provider, apiKeys);
   const baseURL = getBaseURL(env, provider);
 
   switch (provider) {
diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts
index de3d5bfa8..ba951038a 100644
--- a/app/lib/.server/llm/stream-text.ts
+++ b/app/lib/.server/llm/stream-text.ts
@@ -38,7 +38,12 @@ function extractModelFromMessage(message: Message): { model: string; content: st
   return { model: DEFAULT_MODEL, content: message.content };
 }
 
-export function streamText(messages: Messages, env: Env, options?: StreamingOptions) {
+export function streamText(
+  messages: Messages, 
+  env: Env, 
+  options?: StreamingOptions,
+  apiKeys?: Record<string, string>
+) {
   let currentModel = DEFAULT_MODEL;
   const processedMessages = messages.map((message) => {
     if (message.role === 'user') {
@@ -54,7 +59,7 @@ export function streamText(messages: Messages, env: Env, options?: StreamingOpti
   const provider = MODEL_LIST.find((model) => model.name === currentModel)?.provider || DEFAULT_PROVIDER;
 
   return _streamText({
-    model: getModel(provider, currentModel, env),
+    model: getModel(provider, currentModel, env, apiKeys),
     system: getSystemPrompt(),
     maxTokens: MAX_TOKENS,
     // headers: {
diff --git a/app/routes/api.chat.ts b/app/routes/api.chat.ts
index c455c193d..473f8c161 100644
--- a/app/routes/api.chat.ts
+++ b/app/routes/api.chat.ts
@@ -11,13 +11,17 @@ export async function action(args: ActionFunctionArgs) {
 }
 
 async function chatAction({ context, request }: ActionFunctionArgs) {
-  const { messages } = await request.json<{ messages: Messages }>();
+  const { messages, apiKeys } = await request.json<{ 
+    messages: Messages,
+    apiKeys: Record<string, string>
+  }>();
 
   const stream = new SwitchableStream();
 
   try {
     const options: StreamingOptions = {
       toolChoice: 'none',
+      apiKeys,
       onFinish: async ({ text: content, finishReason }) => {
         if (finishReason !== 'length') {
           return stream.close();
@@ -40,7 +44,7 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
       },
     };
 
-    const result = await streamText(messages, context.cloudflare.env, options);
+    const result = await streamText(messages, context.cloudflare.env, options, apiKeys);
 
     stream.switchSource(result.toAIStream());
 
@@ -52,6 +56,13 @@ async function chatAction({ context, request }: ActionFunctionArgs) {
     });
   } catch (error) {
     console.log(error);
+    
+    if (error.message?.includes('API key')) {
+      throw new Response('Invalid or missing API key', {
+        status: 401,
+        statusText: 'Unauthorized'
+      });
+    }
 
     throw new Response(null, {
       status: 500,
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index b48cb3442..5f24b1097 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -4,8 +4,8 @@ export const WORK_DIR_NAME = 'project';
 export const WORK_DIR = `/home/${WORK_DIR_NAME}`;
 export const MODIFICATIONS_TAG_NAME = 'bolt_file_modifications';
 export const MODEL_REGEX = /^\[Model: (.*?)\]\n\n/;
-export const DEFAULT_MODEL = 'claude-3-5-sonnet-20240620';
-export const DEFAULT_PROVIDER = 'Anthropic';
+export const DEFAULT_MODEL = 'google/gemini-flash-1.5-exp';
+export const DEFAULT_PROVIDER = 'OpenRouter';
 
 const staticModels: ModelInfo[] = [
   { name: 'claude-3-5-sonnet-20240620', label: 'Claude 3.5 Sonnet', provider: 'Anthropic' },
@@ -13,8 +13,8 @@ const staticModels: ModelInfo[] = [
   { name: 'anthropic/claude-3.5-sonnet', label: 'Anthropic: Claude 3.5 Sonnet (OpenRouter)', provider: 'OpenRouter' },
   { name: 'anthropic/claude-3-haiku', label: 'Anthropic: Claude 3 Haiku (OpenRouter)', provider: 'OpenRouter' },
   { name: 'deepseek/deepseek-coder', label: 'Deepseek-Coder V2 236B (OpenRouter)', provider: 'OpenRouter' },
-  { name: 'google/gemini-flash-1.5', label: 'Google Gemini Flash 1.5 (OpenRouter)', provider: 'OpenRouter' },
-  { name: 'google/gemini-pro-1.5', label: 'Google Gemini Pro 1.5 (OpenRouter)', provider: 'OpenRouter' },
+  { name: 'google/gemini-flash-1.5-exp', label: 'Google Gemini Flash 1.5 Exp (OpenRouter)', provider: 'OpenRouter' },
+  { name: 'google/gemini-pro-1.5-exp', label: 'Google Gemini Pro 1.5 Exp (OpenRouter)', provider: 'OpenRouter' },
   { 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' },
diff --git a/package.json b/package.json
index edb2b8dad..5e3bb7342 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,8 @@
   "dependencies": {
     "@ai-sdk/anthropic": "^0.0.39",
     "@ai-sdk/google": "^0.0.52",
-    "@ai-sdk/openai": "^0.0.66",
     "@ai-sdk/mistral": "^0.0.43",
+    "@ai-sdk/openai": "^0.0.66",
     "@codemirror/autocomplete": "^6.17.0",
     "@codemirror/commands": "^6.6.0",
     "@codemirror/lang-cpp": "^6.0.2",
@@ -67,6 +67,7 @@
     "isbot": "^4.1.0",
     "istextorbinary": "^9.5.0",
     "jose": "^5.6.3",
+    "js-cookie": "^3.0.5",
     "jszip": "^3.10.1",
     "nanostores": "^0.10.3",
     "ollama-ai-provider": "^0.15.2",
@@ -90,6 +91,7 @@
     "@remix-run/dev": "^2.10.0",
     "@types/diff": "^5.2.1",
     "@types/file-saver": "^2.0.7",
+    "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "fast-glob": "^3.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f56c5ca78..82e14c1ed 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -146,6 +146,9 @@ importers:
       jose:
         specifier: ^5.6.3
         version: 5.6.3
+      js-cookie:
+        specifier: ^3.0.5
+        version: 3.0.5
       jszip:
         specifier: ^3.10.1
         version: 3.10.1
@@ -210,6 +213,9 @@ importers:
       '@types/file-saver':
         specifier: ^2.0.7
         version: 2.0.7
+      '@types/js-cookie':
+        specifier: ^3.0.6
+        version: 3.0.6
       '@types/react':
         specifier: ^18.2.20
         version: 18.3.3
@@ -1872,6 +1878,9 @@ packages:
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
+  '@types/js-cookie@3.0.6':
+    resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -3455,6 +3464,10 @@ packages:
   jose@5.6.3:
     resolution: {integrity: sha512-1Jh//hEEwMhNYPDDLwXHa2ePWgWiFNNUadVmguAAw2IJ6sj9mNxV5tGXJNqlMkJAybF6Lgw1mISDxTePP/187g==}
 
+  js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -7248,6 +7261,8 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.2
 
+  '@types/js-cookie@3.0.6': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/mdast@3.0.15':
@@ -9211,6 +9226,8 @@ snapshots:
 
   jose@5.6.3: {}
 
+  js-cookie@3.0.5: {}
+
   js-tokens@4.0.0: {}
 
   js-yaml@4.1.0:

From 73a07c93e41f1547cee26c1e6e8c1dfa33613c7d Mon Sep 17 00:00:00 2001
From: ali00209 <ah2699514@gmail.com>
Date: Sat, 9 Nov 2024 09:55:40 +0500
Subject: [PATCH 3/3] fix: Resolved

---
 app/lib/.server/llm/model.ts | 16 +++++++++++++++-
 app/utils/constants.ts       | 30 ++++++++++++++++++++++++------
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/app/lib/.server/llm/model.ts b/app/lib/.server/llm/model.ts
index b56ad1026..21e339043 100644
--- a/app/lib/.server/llm/model.ts
+++ b/app/lib/.server/llm/model.ts
@@ -58,7 +58,10 @@ export function getGroqModel(apiKey: string, model: string) {
 }
 
 export function getOllamaModel(baseURL: string, model: string) {
-  let Ollama = ollama(model);
+  let Ollama = ollama(model, {
+    numCtx: 32768,
+  });
+
   Ollama.config.baseURL = `${baseURL}/api`;
   return Ollama;
 }
@@ -80,6 +83,15 @@ export function getOpenRouterModel(apiKey: string, model: string) {
   return openRouter.chat(model);
 }
 
+export function getXAIModel(apiKey: string, model: string) {
+  const openai = createOpenAI({
+    baseURL: 'https://api.x.ai/v1',
+    apiKey,
+  });
+
+  return openai(model);
+}
+
 export function getModel(provider: string, model: string, env: Env, apiKeys?: Record<string, string>) {
   const apiKey = getAPIKey(env, provider, apiKeys);
   const baseURL = getBaseURL(env, provider);
@@ -101,6 +113,8 @@ export function getModel(provider: string, model: string, env: Env, apiKeys?: Re
       return getDeepseekModel(apiKey, model)
     case 'Mistral':
       return  getMistralModel(apiKey, model);
+    case 'xAI':
+      return getXAIModel(apiKey, model);
     default:
       return getOllamaModel(baseURL, model);
   }
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 5f24b1097..fe67f58c3 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -4,8 +4,8 @@ export const WORK_DIR_NAME = 'project';
 export const WORK_DIR = `/home/${WORK_DIR_NAME}`;
 export const MODIFICATIONS_TAG_NAME = 'bolt_file_modifications';
 export const MODEL_REGEX = /^\[Model: (.*?)\]\n\n/;
-export const DEFAULT_MODEL = 'google/gemini-flash-1.5-exp';
-export const DEFAULT_PROVIDER = 'OpenRouter';
+export const DEFAULT_MODEL = 'claude-3-5-sonnet-20240620';
+export const DEFAULT_PROVIDER = 'Anthropic';
 
 const staticModels: ModelInfo[] = [
   { name: 'claude-3-5-sonnet-20240620', label: 'Claude 3.5 Sonnet', provider: 'Anthropic' },
@@ -13,8 +13,9 @@ const staticModels: ModelInfo[] = [
   { name: 'anthropic/claude-3.5-sonnet', label: 'Anthropic: Claude 3.5 Sonnet (OpenRouter)', provider: 'OpenRouter' },
   { name: 'anthropic/claude-3-haiku', label: 'Anthropic: Claude 3 Haiku (OpenRouter)', provider: 'OpenRouter' },
   { name: 'deepseek/deepseek-coder', label: 'Deepseek-Coder V2 236B (OpenRouter)', provider: 'OpenRouter' },
-  { name: 'google/gemini-flash-1.5-exp', label: 'Google Gemini Flash 1.5 Exp (OpenRouter)', provider: 'OpenRouter' },
-  { name: 'google/gemini-pro-1.5-exp', label: 'Google Gemini Pro 1.5 Exp (OpenRouter)', provider: 'OpenRouter' },
+  { name: 'google/gemini-flash-1.5', label: 'Google Gemini Flash 1.5 (OpenRouter)', provider: 'OpenRouter' },
+  { name: 'google/gemini-pro-1.5', label: 'Google Gemini Pro 1.5 (OpenRouter)', provider: 'OpenRouter' },
+  { name: 'x-ai/grok-beta', label: "xAI Grok Beta (OpenRouter)", provider: 'OpenRouter' },
   { 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' },
@@ -32,6 +33,7 @@ const staticModels: ModelInfo[] = [
   { 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: 'grok-beta', label: "xAI Grok Beta", provider: 'xAI' },
   { name: 'deepseek-coder', label: 'Deepseek-Coder', provider: 'Deepseek'},
   { name: 'deepseek-chat', label: 'Deepseek-Chat', provider: 'Deepseek'},
   { name: 'open-mistral-7b', label: 'Mistral 7B', provider: 'Mistral' },
@@ -47,9 +49,25 @@ const staticModels: ModelInfo[] = [
 
 export let MODEL_LIST: ModelInfo[] = [...staticModels];
 
+const getOllamaBaseUrl = () => {
+  const defaultBaseUrl = import.meta.env.OLLAMA_API_BASE_URL || 'http://localhost:11434';
+  // Check if we're in the browser
+  if (typeof window !== 'undefined') {
+    // Frontend always uses localhost
+    return defaultBaseUrl;
+  }
+  
+  // Backend: Check if we're running in Docker
+  const isDocker = process.env.RUNNING_IN_DOCKER === 'true';
+  
+  return isDocker 
+    ? defaultBaseUrl.replace("localhost", "host.docker.internal")
+    : defaultBaseUrl;
+};
+
 async function getOllamaModels(): Promise<ModelInfo[]> {
   try {
-    const base_url = import.meta.env.OLLAMA_API_BASE_URL || "http://localhost:11434";
+    const base_url = getOllamaBaseUrl();
     const response = await fetch(`${base_url}/api/tags`);
     const data = await response.json() as OllamaApiResponse;
 
@@ -92,4 +110,4 @@ async function initializeModelList(): Promise<void> {
   MODEL_LIST = [...ollamaModels,...openAiLikeModels, ...staticModels];
 }
 initializeModelList().then();
-export { getOllamaModels, getOpenAILikeModels, initializeModelList };
+export { getOllamaModels, getOpenAILikeModels, initializeModelList };
\ No newline at end of file