Upload APIKeyManager.tsx

app/components/chat/APIKeyManager.tsx

@@ -32,7 +32,7 @@ export function getApiKeysFromCookies() {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey, setApiKey }) => {
   const [isEditing, setIsEditing] = useState(false);
-  const [tempKey, setTempKey] = useState(apiKey);
+  const [tempKey, setTempKey] = useState(apiKey || cachedApiKeysOps().get());
   const [isPromptCachingEnabled, setIsPromptCachingEnabled] = useState(() => {
     // Read initial state from localStorage, defaulting to true
     const savedState = localStorage.getItem('PROMPT_CACHING_ENABLED');
@@ -44,9 +44,32 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
     localStorage.setItem('PROMPT_CACHING_ENABLED', JSON.stringify(isPromptCachingEnabled));
   }, [isPromptCachingEnabled]);
 
+  function cachedApiKeysOps() {
+    const STORAGE_KEY = 'PROVIDER_API_KEYS';
+
+    const providerName = provider?.name;
+    const getStoredData = () => JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+
+    const get = () => {
+      const savedData = getStoredData();
+      return providerName ? savedData[providerName] || '' : savedData;
+    };
+
+    const save = (value: string) => {
+      const savedData = getStoredData();
+      savedData[providerName] = value;
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(savedData));
+
+      return value;
+    };
+
+    return { get, save };
+  }
+
   const handleSave = () => {
     setApiKey(tempKey);
     setIsEditing(false);
+    cachedApiKeysOps().save(tempKey);
   };
 
   return (