fix: working

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 (

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}

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;

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) {

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: {

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,

app/utils/constants.ts

@@ -4,17 +4,17 @@ 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' },
   { name: 'gpt-4o', label: 'GPT-4o', provider: 'OpenAI' },
   { 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' },

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",