From a7ce5e5ddfae52dcbef89c1262d8b9586669cb44 Mon Sep 17 00:00:00 2001
From: Ashhar <ashhar.akhlaque@yourphysio.in>
Date: Sat, 11 Jan 2025 18:16:37 +0530
Subject: [PATCH] fixed layouting of prompt caching toggle

---
 app/components/chat/APIKeyManager.tsx | 146 +++++++++++++-------------
 1 file changed, 74 insertions(+), 72 deletions(-)

diff --git a/app/components/chat/APIKeyManager.tsx b/app/components/chat/APIKeyManager.tsx
index fa1d6a6dd..41e2a3cfe 100644
--- a/app/components/chat/APIKeyManager.tsx
+++ b/app/components/chat/APIKeyManager.tsx
@@ -98,89 +98,91 @@ export const APIKeyManager: React.FC<APIKeyManagerProps> = ({ provider, apiKey,
   };
 
   return (
-    <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 flex-col items-left justify-between py-3 px-1">
+      <div className="flex">
+        <div className="flex items-center gap-2 flex-1">
           <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>
+            <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>
-        ) : (
-          <>
-            {!isEnvKeySet && (
+        </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={() => setIsEditing(true)}
-                title="Edit API Key"
-                className="bg-blue-500/10 hover:bg-blue-500/20 text-blue-500"
+                onClick={handleSave}
+                title="Save API Key"
+                className="bg-green-500/10 hover:bg-green-500/20 text-green-500"
               >
-                <div className="i-ph:pencil-simple w-4 h-4" />
+                <div className="i-ph:check 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"
+                onClick={() => setIsEditing(false)}
+                title="Cancel"
+                className="bg-red-500/10 hover:bg-red-500/20 text-red-500"
               >
-                <span className="text-xs whitespace-nowrap">{provider?.labelForGetApiKey || 'Get API Key'}</span>
-                <div className={`${provider?.icon || 'i-ph:key'} w-4 h-4`} />
+                <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>
       </div>
 
       {provider?.name === 'Anthropic' && (
-        <div className="border-t pt-4 pb-4 -mt-4">
+        <div className="border-t mt-4 pt-4 pb-2 -mt-4">
           <div className="flex items-center space-x-2">
             <Switch checked={isPromptCachingEnabled} onCheckedChange={setIsPromptCachingEnabled} />
             <label htmlFor="prompt-caching" className="text-sm text-bolt-elements-textSecondary">