import { type ChangeEvent, type KeyboardEvent } from 'react' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { translateNow, useI18n } from '@/i18n' import { ChevronDown, ExternalLink, Loader2, Save } from '@/lib/icons' import { cn } from '@/lib/utils' import type { EnvVarInfo } from '@/types/hermes' import { CONTROL_TEXT } from './constants' import { prettyName, withoutKey } from './helpers' import { ListRow } from './primitives' import type { EnvRowProps } from './types' export type KeyRowProps = Omit /** Matches Advanced / config field controls (ListRow + Input). */ export const CREDENTIAL_CONTROL_CLASS = cn('h-8', CONTROL_TEXT) export const isKeyVar = (key: string, info: EnvVarInfo) => info.is_password || /(?:_API_KEY|_TOKEN|_KEY)$/.test(key) export const friendlyFieldLabel = (key: string, info: EnvVarInfo) => info.description?.trim() || key .replace(/_/g, ' ') .toLowerCase() .replace(/\b\w/g, c => c.toUpperCase()) export const credentialPlaceholder = (key: string, info: EnvVarInfo, label: string): string => isKeyVar(key, info) ? translateNow('settings.credentials.pasteLabelKey', label) : /URL$/i.test(key) ? 'https://…' : translateNow('settings.credentials.optional') // A single credential field: a set key shows as a filled read-only input // (redacted value) that edits in place on click. Save appears once typed; a set // key also offers Remove, and Esc cancels without closing the overlay. export function KeyField({ info, placeholder, rowProps, varKey }: { info: EnvVarInfo placeholder?: string rowProps: KeyRowProps varKey: string }) { const { t } = useI18n() const { edits, onClear, onSave, saving, setEdits } = rowProps const editing = edits[varKey] !== undefined const draft = edits[varKey] ?? '' const dirty = draft.trim().length > 0 const busy = saving === varKey const masked = info.redacted_value ?? '••••••••' const startEdit = () => setEdits(c => ({ ...c, [varKey]: '' })) const cancel = () => setEdits(c => withoutKey(c, varKey)) const update = (e: ChangeEvent) => setEdits(c => ({ ...c, [varKey]: e.target.value })) const keydown = (e: KeyboardEvent) => { if (e.key === 'Enter' && dirty) { void onSave(varKey) } else if (e.key === 'Escape' && editing) { e.preventDefault() e.stopPropagation() cancel() } } const editType = info.is_password ? 'password' : 'text' if (info.is_set && !editing) { return ( ) } return (

{dirty && ( )}

{editing && (

{info.is_set && ( <> {t.settings.credentials.or} )} {t.settings.credentials.escToCancel}

)}

) } function CredentialDocsLink({ href }: { href: string }) { const { t } = useI18n() return ( e.stopPropagation()} rel="noreferrer" target="_blank" > {t.settings.credentials.getKey} ) } /** One credential row — collapsible; description and docs link expand on click. */ export function CredentialKeyCard({ expanded, info, label, onExpand, onToggle, placeholder, rowProps, varKey }: CredentialKeyCardProps) { const docsUrl = info.url?.trim() const description = info.description?.trim() const expandable = Boolean(description || docsUrl) return (

{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault() onToggle() } } : undefined } role={expandable ? 'button' : undefined} tabIndex={expandable ? 0 : undefined} >

{label} {expandable && ( )}

e.stopPropagation()} onFocus={() => { if (expandable && !expanded) { onExpand() } }} >

{expandable && expanded && (

e.stopPropagation()}> {description && (

{description}

)} {docsUrl && }

)}

) } /** Provider API key group — collapsible card; description, docs link, and advanced fields expand on click. */ export function ProviderKeyRows({ expanded, group, onExpand, onToggle, rowProps }: ProviderKeyRowsProps) { const { t } = useI18n() const docsUrl = group.docsUrl?.trim() const description = group.description?.trim() const expandable = Boolean(description || docsUrl || group.advanced.length > 0) return (

{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault() onToggle() } } : undefined } role={expandable ? 'button' : undefined} tabIndex={expandable ? 0 : undefined} >

{group.name} {expandable && ( )}

e.stopPropagation()} onFocus={() => { if (expandable && !expanded) { onExpand() } }} >

{expandable && expanded && (

e.stopPropagation()}> {description && (

{description}

)} {group.advanced.map(([key, info]) => { const fieldLabel = isKeyVar(key, info) ? prettyName(key.replace(/(?:_API_KEY|_TOKEN|_KEY)$/i, '')) : friendlyFieldLabel(key, info) return ( } key={key} title={fieldLabel} /> ) })} {docsUrl && }

)}

) } export function credentialRowLabel(varKey: string, info: EnvVarInfo): string { if (isKeyVar(varKey, info)) { return prettyName(varKey.replace(/(?:_API_KEY|_TOKEN|_KEY)$/i, '')) } return prettyName(varKey) } interface CredentialKeyCardProps { expanded: boolean info: EnvVarInfo label: string onExpand: () => void onToggle: () => void placeholder: string rowProps: KeyRowProps varKey: string } interface ProviderKeyRowsProps { expanded: boolean group: ProviderKeyRowGroup onExpand: () => void onToggle: () => void rowProps: KeyRowProps } export interface ProviderKeyRowGroup { advanced: [string, EnvVarInfo][] description?: string docsUrl?: string hasAnySet: boolean name: string primary: [string, EnvVarInfo] }