Skip to content

Commit

Permalink
fixed layouting of prompt caching toggle
Browse files Browse the repository at this point in the history
  • Loading branch information
@aproli90
aproli90 committed Jan 11, 2025
1 parent 54a3392 commit a7ce5e5
Showing 1 changed file with 74 additions and 72 deletions.
146 changes: 74 additions & 72 deletions app/components/chat/APIKeyManager.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down

0 comments on commit a7ce5e5

Please sign in to comment.