Force input API keys + cache it

app/components/chat/APIKeyManager.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { IconButton } from '~/components/ui/IconButton';
 import { Switch } from '~/components/ui/Switch';
 import type { ProviderInfo } from '~/types/model';
-import Cookies from 'js-cookie';
 
 interface APIKeyManagerProps {
   provider: ProviderInfo;
@@ -12,40 +11,46 @@ interface APIKeyManagerProps {
   labelForGetApiKey?: string;
 }
 
-const apiKeyMemoizeCache: { [k: string]: Record<string, string> } = {};
-
-export function getApiKeysFromCookies() {
-  const storedApiKeys = Cookies.get('apiKeys');
-  let parsedKeys = {};
-
-  if (storedApiKeys) {
-    parsedKeys = apiKeyMemoizeCache[storedApiKeys];
-
-    if (!parsedKeys) {
-      parsedKeys = apiKeyMemoizeCache[storedApiKeys] = JSON.parse(storedApiKeys);
-    }
-  }
-
-  return parsedKeys;
-}
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey, setApiKey }) => {
+export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ 
+  provider, 
+  apiKey, 
+  setApiKey 
+}) => {
+  // Use localStorage to store and retrieve API key for the specific provider
   const [isEditing, setIsEditing] = useState(false);
-  const [tempKey, setTempKey] = useState(apiKey);
+  const [tempKey, setTempKey] = useState('');
   const [isPromptCachingEnabled, setIsPromptCachingEnabled] = useState(() => {
-    // Read initial state from localStorage, defaulting to true
     const savedState = localStorage.getItem('PROMPT_CACHING_ENABLED');
     return savedState !== null ? JSON.parse(savedState) : true;
   });
 
+  // Load stored API key for this provider on component mount
+  useEffect(() => {
+    const storedKey = localStorage.getItem(`API_KEY_${provider.name}`);
+    if (storedKey) {
+      setApiKey(storedKey);
+    }
+  }, [provider.name]);
+
   useEffect(() => {
     // Update localStorage whenever the prompt caching state changes
     localStorage.setItem('PROMPT_CACHING_ENABLED', JSON.stringify(isPromptCachingEnabled));
   }, [isPromptCachingEnabled]);
 
   const handleSave = () => {
+    if (!tempKey.trim()) {
+      // Prevent saving empty API key
+      alert(`Please enter a valid API key for ${provider.name}`);
+      return;
+    }
+
+    // Save to localStorage
+    localStorage.setItem(`API_KEY_${provider.name}`, tempKey);
+    
+    // Update the API key in parent component
     setApiKey(tempKey);
+    
+    // Exit editing mode
     setIsEditing(false);
   };
 
@@ -57,9 +62,12 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
           {!isEditing && (
             <div className="flex items-center">
               <span className="flex-1 text-xs text-bolt-elements-textPrimary mr-2">
-                {apiKey ? '••••••••' : 'Not set (will still work if set in .env file)'}
+                {apiKey ? '••••••••' : 'API Key Required'}
               </span>
-              <IconButton onClick={() => setIsEditing(true)} title="Edit API Key">
+              <IconButton onClick={() => {
+                setTempKey(apiKey || '');
+                setIsEditing(true);
+              }} title="Edit API Key">
                 <div className="i-ph:pencil-simple" />
               </IconButton>
             </div>
@@ -109,4 +117,4 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
       )}
     </div>
   );
-};
+};