fixed #333

stackblitz-labs · Dec 15, 2024 · 6beaddc · 6beaddc
1 parent 9efc709
commit 6beaddc
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 39 deletions.
diff --git a/app/commit.json b/app/commit.json
@@ -1 +1 @@
-{ "commit": "ece0213500a94a6b29e29512c5040baf57884014" }
+{ "commit": "9efc709782ed44a36da6de2222b1d5dd004fb489" }
diff --git a/app/components/chat/APIKeyManager.tsx b/app/components/chat/APIKeyManager.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { IconButton } from '~/components/ui/IconButton';
 import type { ProviderInfo } from '~/types/model';
 
@@ -10,58 +10,137 @@ interface APIKeyManagerProps {
   labelForGetApiKey?: string;
 }
 
+const ENV_API_KEY_MAP: Record<string, string> = {
+  Anthropic: 'ANTHROPIC_API_KEY',
+  OpenAI: 'OPENAI_API_KEY',
+  xAI: 'XAI_API_KEY',
+  Cohere: 'COHERE_API_KEY',
+  Google: 'GOOGLE_API_KEY',
+  Groq: 'GROQ_API_KEY',
+  HuggingFace: 'HUGGINGFACE_API_KEY',
+  Deepseek: 'DEEPSEEK_API_KEY',
+  Mistral: 'MISTRAL_API_KEY',
+  Together: 'TOGETHER_API_KEY',
+  OpenRouter: 'OPENROUTER_API_KEY',
+};
+
 // 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 [isEnvKeySet, setIsEnvKeySet] = useState(false);
+  const previousProvider = useRef(provider.name);
+
+  useEffect(() => {
+    if (previousProvider.current !== provider.name) {
+      setTempKey('');
+      setApiKey('');
+      setIsEditing(false);
+      previousProvider.current = provider.name;
+    }
+  }, [provider.name, setApiKey]);
+
+  useEffect(() => {
+    const checkEnvApiKey = async () => {
+      try {
+        const response = await fetch(`/api/check-env-key?provider=${encodeURIComponent(provider.name)}`);
+        const data = await response.json();
+        setIsEnvKeySet((data as { isSet: boolean }).isSet);
+      } catch (error) {
+        console.error('Failed to check environment API key:', error);
+        setIsEnvKeySet(false);
+      }
+    };
+
+    checkEnvApiKey();
+  }, [provider.name]);
 
   const handleSave = () => {
     setApiKey(tempKey);
     setIsEditing(false);
   };
 
   return (
-    <div className="flex items-start sm:items-center mt-2 mb-2 flex-col sm:flex-row">
-      <div>
-        <span className="text-sm text-bolt-elements-textSecondary">{provider?.name} API Key:</span>
-        {!isEditing && (
-          <div className="flex items-center mb-4">
-            <span className="flex-1 text-xs text-bolt-elements-textPrimary mr-2">
-              {apiKey ? '••••••••' : 'Not set (will still work if set in .env file)'}
-            </span>
-            <IconButton onClick={() => setIsEditing(true)} title="Edit API Key">
-              <div className="i-ph:pencil-simple" />
+    <div className="flex items-center justify-between py-3 px-1">
+      <div className="flex items-center gap-2 flex-1">
+        <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 gap-2">
+              {isEnvKeySet ? (
+                <>
+                  <div className="i-ph:check-circle-fill text-green-500 w-4 h-4" />
+                  <span className="text-xs text-green-500">
+                    Set via {ENV_API_KEY_MAP[provider.name]} environment variable
+                  </span>
+                </>
+              ) : apiKey ? (
+                <>
+                  <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</span>
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 shrink-0">
+        {isEditing && !isEnvKeySet ? (
+          <div className="flex items-center gap-2">
+            <input
+              type="password"
+              value={tempKey}
+              placeholder="Enter API Key"
+              onChange={(e) => setTempKey(e.target.value)}
+              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"
+              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"
+              className="bg-red-500/10 hover:bg-red-500/20 text-red-500"
+            >
+              <div className="i-ph:x w-4 h-4" />
             </IconButton>
           </div>
+        ) : (
+          <>
+            {!isEnvKeySet && (
+              <IconButton
+                onClick={() => setIsEditing(true)}
+                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>
-
-      {isEditing ? (
-        <div className="flex items-center gap-3 mt-2">
-          <input
-            type="password"
-            value={tempKey}
-            placeholder="Your 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"
-          />
-          <IconButton onClick={handleSave} title="Save API Key">
-            <div className="i-ph:check" />
-          </IconButton>
-          <IconButton onClick={() => setIsEditing(false)} title="Cancel">
-            <div className="i-ph:x" />
-          </IconButton>
-        </div>
-      ) : (
-        <>
-          {provider?.getApiKeyLink && (
-            <IconButton className="ml-auto" onClick={() => window.open(provider?.getApiKeyLink)} title="Edit API Key">
-              <span className="mr-2 text-xs lg:text-sm">{provider?.labelForGetApiKey || 'Get API Key'}</span>
-              <div className={provider?.icon || 'i-ph:key'} />
-            </IconButton>
-          )}
-        </>
-      )}
     </div>
   );
 };
diff --git a/app/routes/api.check-env-key.ts b/app/routes/api.check-env-key.ts
@@ -0,0 +1,29 @@
+import type { LoaderFunction } from '@remix-run/node';
+
+const ENV_API_KEY_MAP: Record<string, string> = {
+  Anthropic: 'ANTHROPIC_API_KEY',
+  OpenAI: 'OPENAI_API_KEY',
+  xAI: 'XAI_API_KEY',
+  Cohere: 'COHERE_API_KEY',
+  Google: 'GOOGLE_API_KEY',
+  Groq: 'GROQ_API_KEY',
+  HuggingFace: 'HUGGINGFACE_API_KEY',
+  Deepseek: 'DEEPSEEK_API_KEY',
+  Mistral: 'MISTRAL_API_KEY',
+  Together: 'TOGETHER_API_KEY',
+  OpenRouter: 'OPENROUTER_API_KEY',
+};
+
+export const loader: LoaderFunction = async ({ request }) => {
+  const url = new URL(request.url);
+  const provider = url.searchParams.get('provider');
+
+  if (!provider || !ENV_API_KEY_MAP[provider]) {
+    return Response.json({ isSet: false });
+  }
+
+  const envVarName = ENV_API_KEY_MAP[provider];
+  const isSet = !!process.env[envVarName];
+
+  return Response.json({ isSet });
+};
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{ "commit": "ece0213500a94a6b29e29512c5040baf57884014" }
		{ "commit": "9efc709782ed44a36da6de2222b1d5dd004fb489" }