Upload APIKeyManager.tsx

app/components/chat/APIKeyManager.tsx

@@ -39,11 +39,6 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
     return savedState !== null ? JSON.parse(savedState) : true;
   });
 
-  useEffect(() => {
-    // Update localStorage whenever the prompt caching state changes
-    localStorage.setItem('PROMPT_CACHING_ENABLED', JSON.stringify(isPromptCachingEnabled));
-  }, [isPromptCachingEnabled]);
-
   function cachedApiKeysOps() {
     const STORAGE_KEY = 'PROVIDER_API_KEYS';
 
@@ -72,6 +67,17 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
     cachedApiKeysOps().save(tempKey);
   };
 
+  useEffect(() => {
+    if (tempKey) {
+      setApiKey(tempKey);
+    }
+  }, [tempKey]);
+
+  useEffect(() => {
+    // Update localStorage whenever the prompt caching state changes
+    localStorage.setItem('PROMPT_CACHING_ENABLED', JSON.stringify(isPromptCachingEnabled));
+  }, [isPromptCachingEnabled]);
+
   return (
     <div className="space-y-4">
       <div className="flex items-start sm:items-center mt-2 mb-2 flex-col sm:flex-row">