github/sim
1
0
Fork 0
mirror of https://github.com/simstudioai/sim.git synced 2026-01-09 15:07:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

improvement(byok): updated styling for byok page (#2581)

Browse Source
This commit is contained in:
Waleed
2025-12-25 08:36:55 -08:00
committed by GitHub
parent 97372533ec
commit 26ec12599f
1 changed files with 53 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/byok/byok.tsx
View File

@@ -11,7 +11,6 @@ import {
ModalContent,
ModalFooter,
ModalHeader,
Trash,
} from '@/components/emcn'
import { AnthropicIcon, GeminiIcon, MistralIcon, OpenAIIcon } from '@/components/icons'
import { Skeleton } from '@/components/ui'
@@ -65,10 +64,10 @@ const PROVIDERS: {
function BYOKKeySkeleton() {
return (
<div className='flex items-center justify-between gap-[12px] rounded-[8px] p-[12px]'>
<div className='flex items-center justify-between gap-[12px]'>
<div className='flex items-center gap-[12px]'>
<Skeleton className='h-9 w-9 flex-shrink-0 rounded-[6px]' />
<div className='flex flex-col justify-center gap-[1px]'>
<div className='flex min-w-0 flex-col justify-center gap-[1px]'>
<Skeleton className='h-[14px] w-[100px]' />
<Skeleton className='h-[13px] w-[200px]' />
</div>
@@ -159,41 +158,40 @@ export function BYOK() {
const Icon = provider.icon
return (
<div
key={provider.id}
className='flex items-center justify-between gap-[12px] rounded-[8px] p-[12px]'
>
<div key={provider.id} className='flex items-center justify-between gap-[12px]'>
<div className='flex items-center gap-[12px]'>
<div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-[6px] bg-[var(--surface-6)]'>
<Icon className='h-4 w-4' />
</div>
<div className='flex flex-col gap-[2px]'>
<div className='flex min-w-0 flex-col justify-center gap-[1px]'>
<span className='font-medium text-[14px]'>{provider.name}</span>
<span className='text-[12px] text-[var(--text-tertiary)]'>
{provider.description}
</span>
{existingKey && (
<span className='font-mono text-[11px] text-[var(--text-muted)]'>
{existingKey.maskedKey}
</span>
)}
<p className='truncate text-[13px] text-[var(--text-muted)]'>
{existingKey ? existingKey.maskedKey : provider.description}
</p>
</div>
</div>
<div className='flex items-center gap-[6px]'>
{existingKey && (
{existingKey ? (
<div className='flex flex-shrink-0 items-center gap-[8px]'>
<Button variant='ghost' onClick={() => openEditModal(provider.id)}>
Update
</Button>
<Button
variant='ghost'
className='h-9 w-9'
onClick={() => setDeleteConfirmProvider(provider.id)}
>
<Trash />
Delete
</Button>
)}
<Button variant='default' onClick={() => openEditModal(provider.id)}>
{existingKey ? 'Update' : 'Add Key'}
</div>
) : (
<Button
variant='primary'
className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
onClick={() => openEditModal(provider.id)}
>
Add Key
</Button>
</div>
)}
</div>
)
})}
@@ -228,7 +226,24 @@ export function BYOK() {
requests in this workspace. Your key is encrypted and stored securely.
</p>
<div className='mt-[12px] flex flex-col gap-[8px]'>
<div className='mt-[16px] flex flex-col gap-[8px]'>
<p className='font-medium text-[13px] text-[var(--text-secondary)]'>
Enter your API key
</p>
{/* Hidden decoy fields to prevent browser autofill */}
<input
type='text'
name='fakeusernameremembered'
autoComplete='username'
style={{
position: 'absolute',
left: '-9999px',
opacity: 0,
pointerEvents: 'none',
}}
tabIndex={-1}
readOnly
/>
<div className='relative'>
<EmcnInput
type={showApiKey ? 'text' : 'password'}
@@ -240,6 +255,12 @@ export function BYOK() {
placeholder={PROVIDERS.find((p) => p.id === editingProvider)?.placeholder}
className='h-9 pr-[36px]'
autoFocus
name='byok_api_key'
autoComplete='off'
autoCorrect='off'
autoCapitalize='off'
data-lpignore='true'
data-form-type='other'
/>
<Button
variant='ghost'
@@ -275,6 +296,7 @@ export function BYOK() {
variant='primary'
onClick={handleSave}
disabled={!apiKeyInput.trim() || upsertKey.isPending}
className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
>
{upsertKey.isPending ? 'Saving...' : 'Save'}
</Button>
@@ -298,7 +320,12 @@ export function BYOK() {
<Button variant='default' onClick={() => setDeleteConfirmProvider(null)}>
Cancel
</Button>
<Button variant='primary' onClick={handleDelete} disabled={deleteKey.isPending}>
<Button
variant='primary'
onClick={handleDelete}
disabled={deleteKey.isPending}
className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
>
{deleteKey.isPending ? 'Deleting...' : 'Delete'}
</Button>
</ModalFooter>