Merge remote-tracking branch 'upstream/main'

aigem · Jan 10, 2025 · 5e8735f · 5e8735f
2 parents 0ec04c4 + 42030e1
commit 5e8735f
Show file tree

Hide file tree

Showing 10 changed files with 244 additions and 107 deletions.
diff --git a/README.md b/README.md
@@ -94,6 +94,7 @@ bolt.diy was originally started by [Cole Medin](https://www.youtube.com/@ColeMed
 - ⬜ Voice prompting
 - ⬜ Azure Open AI API Integration
 - ⬜ Vertex AI Integration
+- ⬜ Granite Integration (@dnielsen)
 
 ## Features
 

diff --git a/app/components/chat/APIKeyManager.tsx b/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>
-        <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 {providerBaseUrlEnvKeys[provider.name].apiTokenKey} 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 (Please set via UI or ENV_VAR)</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/components/chat/BaseChat.tsx b/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 };

diff --git a/app/components/chat/chatExportAndImport/ImportButtons.tsx b/app/components/chat/chatExportAndImport/ImportButtons.tsx
@@ -31,6 +31,7 @@ export function ImportButtons(importChat: ((description: string, messages: Messa
                   if (Array.isArray(data.messages)) {
                     await importChat(data.description || 'Imported Chat', data.messages);
                     toast.success('Chat imported successfully');
+
                     return;
                   }
 

diff --git a/app/components/settings/data/DataTab.tsx b/app/components/settings/data/DataTab.tsx
@@ -233,7 +233,9 @@ export default function DataTab() {
     event.target.value = '';
   };
 
-  const processChatData = (data: any): Array<{
+  const processChatData = (
+    data: any,
+  ): Array<{
     id: string;
     messages: Message[];
     description: string;
@@ -242,23 +244,25 @@ export default function DataTab() {
     // Handle Bolt standard format (single chat)
     if (data.messages && Array.isArray(data.messages)) {
       const chatId = crypto.randomUUID();
-      return [{
-        id: chatId,
-        messages: data.messages,
-        description: data.description || 'Imported Chat',
-        urlId: chatId
-      }];
+      return [
+        {
+          id: chatId,
+          messages: data.messages,
+          description: data.description || 'Imported Chat',
+          urlId: chatId,
+        },
+      ];
     }
 
-      // Handle Bolt export format (multiple chats)
-      if (data.chats && Array.isArray(data.chats)) {
-        return data.chats.map((chat: { id?: string; messages: Message[]; description?: string; urlId?: string; }) => ({
-          id: chat.id || crypto.randomUUID(),
-          messages: chat.messages,
-          description: chat.description || 'Imported Chat',
-          urlId: chat.urlId,
-        }));
-      }
+    // Handle Bolt export format (multiple chats)
+    if (data.chats && Array.isArray(data.chats)) {
+      return data.chats.map((chat: { id?: string; messages: Message[]; description?: string; urlId?: string }) => ({
+        id: chat.id || crypto.randomUUID(),
+        messages: chat.messages,
+        description: chat.description || 'Imported Chat',
+        urlId: chat.urlId,
+      }));
+    }
 
     console.error('No matching format found for:', data);
     throw new Error('Unsupported chat format');
@@ -296,6 +300,7 @@ export default function DataTab() {
         } else {
           toast.error('Failed to import chats');
         }
+
         console.error(error);
       }
     };

diff --git a/app/routes/api.check-env-key.ts b/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 });
+};
diff --git a/docs/.gitignore b/docs/.gitignore
@@ -1,2 +1,3 @@
 .venv
-site/
+site/
+.python-version
diff --git a/docs/.python-version b/docs/.python-version
@@ -0,0 +1 @@
+3.12.0
-Original file line number
+Diff line change
@@ Expand Up @@
                       if (Array.isArray(data.messages)) {
                         await importChat(data.description || 'Imported Chat', data.messages);
                         toast.success('Chat imported successfully');
                         return;
                       }
@@ Expand Down @@