fix: added ui indicator on how apikeys are set (UI/Env) for api-key-manager component (#732)

* fixed #333

* Added instruction in case api-key is not set.

* addressed some of the review changes:

1. moved function definiton to useCallback.
2. added a cache to store the env key status and the api call is made only on a cache miss.

* Manages the API-key entered via UI in a better way.

- Persist API keys in cookies when entered via UI
- Automatically load saved keys when switching between providers
- Preserve existing functionality for environment variable based keys

* Re-used map from utils/constants file.

* Code cleanup -  Removed redundant API key init in BaseChat as its already handled by APIKeyManager component.

app/components/chat/APIKeyManager.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { IconButton } from '~/components/ui/IconButton';
 import type { ProviderInfo } from '~/types/model';
 import Cookies from 'js-cookie';
+import { providerBaseUrlEnvKeys } from '~/utils/constants';
 
 interface APIKeyManagerProps {
   provider: ProviderInfo;
@@ -11,11 +12,14 @@ interface APIKeyManagerProps {
   labelForGetApiKey?: string;
 }
 
+// cache which stores whether the provider's API key is set via environment variable
+const providerEnvKeyStatusCache: Record<string, boolean> = {};
+
 const apiKeyMemoizeCache: { [k: string]: Record<string, string> } = {};
 
 export function getApiKeysFromCookies() {
   const storedApiKeys = Cookies.get('apiKeys');
-  let parsedKeys = {};
+  let parsedKeys: Record<string, string> = {};
 
   if (storedApiKeys) {
     parsedKeys = apiKeyMemoizeCache[storedApiKeys];
@@ -32,54 +36,137 @@ export function getApiKeysFromCookies() {
 export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey, setApiKey }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [tempKey, setTempKey] = useState(apiKey);
+  const [isEnvKeySet, setIsEnvKeySet] = useState(false);
+
+  // Reset states and load saved key when provider changes
+  useEffect(() => {
+    // Load saved API key from cookies for this provider
+    const savedKeys = getApiKeysFromCookies();
+    const savedKey = savedKeys[provider.name] || '';
+
+    setTempKey(savedKey);
+    setApiKey(savedKey);
+    setIsEditing(false);
+  }, [provider.name]);
+
+  const checkEnvApiKey = useCallback(async () => {
+    // Check cache first
+    if (providerEnvKeyStatusCache[provider.name] !== undefined) {
+      setIsEnvKeySet(providerEnvKeyStatusCache[provider.name]);
+      return;
+    }
+
+    try {
+      const response = await fetch(`/api/check-env-key?provider=${encodeURIComponent(provider.name)}`);
+      const data = await response.json();
+      const isSet = (data as { isSet: boolean }).isSet;
+
+      // Cache the result
+      providerEnvKeyStatusCache[provider.name] = isSet;
+      setIsEnvKeySet(isSet);
+    } catch (error) {
+      console.error('Failed to check environment API key:', error);
+      setIsEnvKeySet(false);
+    }
+  }, [provider.name]);
+
+  useEffect(() => {
+    checkEnvApiKey();
+  }, [checkEnvApiKey]);
 
   const handleSave = () => {
+    // Save to parent state
     setApiKey(tempKey);
+
+    // Save to cookies
+    const currentKeys = getApiKeysFromCookies();
+    const newKeys = { ...currentKeys, [provider.name]: tempKey };
+    Cookies.set('apiKeys', JSON.stringify(newKeys));
+
     setIsEditing(false);
   };
 
   return (
-    <div className="flex items-start sm:items-center mt-2 mb-2 flex-col sm:flex-row">
+    <div className="flex items-center justify-between py-3 px-1">
-      <div>
+      <div className="flex items-center gap-2 flex-1">
-        <span className="text-sm text-bolt-elements-textSecondary">{provider?.name} API Key:</span>
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-bolt-elements-textSecondary">{provider?.name} API Key:</span>
           {!isEditing && (
-          <div className="flex items-center mb-4">
+            <div className="flex items-center gap-2">
-            <span className="flex-1 text-xs text-bolt-elements-textPrimary mr-2">
+              {isEnvKeySet ? (
-              {apiKey ? '••••••••' : 'Not set (will still work if set in .env file)'}
+                <>
+                  <div className="i-ph:check-circle-fill text-green-500 w-4 h-4" />
+                  <span className="text-xs text-green-500">
+                    Set via {providerBaseUrlEnvKeys[provider.name].apiTokenKey} environment variable
                   </span>
-            <IconButton onClick={() => setIsEditing(true)} title="Edit API Key">
+                </>
-              <div className="i-ph:pencil-simple" />
+              ) : apiKey ? (
-            </IconButton>
+                <>
+                  <div className="i-ph:check-circle-fill text-green-500 w-4 h-4" />
+                  <span className="text-xs text-green-500">Set via UI</span>
+                </>
+              ) : (
+                <>
+                  <div className="i-ph:x-circle-fill text-red-500 w-4 h-4" />
+                  <span className="text-xs text-red-500">Not Set (Please set via UI or ENV_VAR)</span>
+                </>
+              )}
             </div>
           )}
         </div>
+      </div>
 
-      {isEditing ? (
+      <div className="flex items-center gap-2 shrink-0">
-        <div className="flex items-center gap-3 mt-2">
+        {isEditing && !isEnvKeySet ? (
+          <div className="flex items-center gap-2">
             <input
               type="password"
               value={tempKey}
-            placeholder="Your API Key"
+              placeholder="Enter API Key"
               onChange={(e) => setTempKey(e.target.value)}
-            className="flex-1 px-2 py-1 text-xs lg: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"
+              className="w-[300px] px-3 py-1.5 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">
+            <IconButton
-            <div className="i-ph:check" />
+              onClick={handleSave}
+              title="Save API Key"
+              className="bg-green-500/10 hover:bg-green-500/20 text-green-500"
+            >
+              <div className="i-ph:check w-4 h-4" />
             </IconButton>
-          <IconButton onClick={() => setIsEditing(false)} title="Cancel">
+            <IconButton
-            <div className="i-ph:x" />
+              onClick={() => setIsEditing(false)}
+              title="Cancel"
+              className="bg-red-500/10 hover:bg-red-500/20 text-red-500"
+            >
+              <div className="i-ph:x w-4 h-4" />
             </IconButton>
           </div>
         ) : (
           <>
-          {provider?.getApiKeyLink && (
+            {!isEnvKeySet && (
-            <IconButton className="ml-auto" onClick={() => window.open(provider?.getApiKeyLink)} title="Edit API Key">
+              <IconButton
-              <span className="mr-2 text-xs lg:text-sm">{provider?.labelForGetApiKey || 'Get API Key'}</span>
+                onClick={() => setIsEditing(true)}
-              <div className={provider?.icon || 'i-ph:key'} />
+                title="Edit API Key"
+                className="bg-blue-500/10 hover:bg-blue-500/20 text-blue-500"
+              >
+                <div className="i-ph:pencil-simple w-4 h-4" />
+              </IconButton>
+            )}
+            {provider?.getApiKeyLink && !isEnvKeySet && (
+              <IconButton
+                onClick={() => window.open(provider?.getApiKeyLink)}
+                title="Get API Key"
+                className="bg-purple-500/10 hover:bg-purple-500/20 text-purple-500 flex items-center gap-2"
+              >
+                <span className="text-xs whitespace-nowrap">{provider?.labelForGetApiKey || 'Get API Key'}</span>
+                <div className={`${provider?.icon || 'i-ph:key'} w-4 h-4`} />
               </IconButton>
             )}
           </>
         )}
       </div>
+    </div>
   );
 };

app/components/chat/BaseChat.tsx

@@ -184,7 +184,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
         setIsModelLoading('all');
         initializeModelList({ apiKeys: parsedApiKeys, providerSettings })
           .then((modelList) => {
-            // console.log('Model List: ', modelList);
             setModelList(modelList);
           })
           .catch((error) => {
@@ -194,7 +193,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
             setIsModelLoading(undefined);
           });
       }
-    }, [providerList]);
+    }, [providerList, provider]);
 
     const onApiKeysChange = async (providerName: string, apiKey: string) => {
       const newApiKeys = { ...apiKeys, [providerName]: apiKey };

app/routes/api.check-env-key.ts

@@ -0,0 +1,16 @@
+import type { LoaderFunction } from '@remix-run/node';
+import { providerBaseUrlEnvKeys } from '~/utils/constants';
+
+export const loader: LoaderFunction = async ({ context, request }) => {
+  const url = new URL(request.url);
+  const provider = url.searchParams.get('provider');
+
+  if (!provider || !providerBaseUrlEnvKeys[provider].apiTokenKey) {
+    return Response.json({ isSet: false });
+  }
+
+  const envVarName = providerBaseUrlEnvKeys[provider].apiTokenKey;
+  const isSet = !!(process.env[envVarName] || (context?.cloudflare?.env as Record<string, any>)?.[envVarName]);
+
+  return Response.json({ isSet });
+};