File size: 5,132 Bytes
1dbc34b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | import { Label } from '@/components/ui/label';
import { Checkbox } from '@/components/ui/checkbox';
import { FileCode, Globe, ImageIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
import { OpenAIIcon } from '@/components/ui/provider-icon';
interface CodexSettingsProps {
autoLoadCodexAgents: boolean;
codexEnableWebSearch: boolean;
codexEnableImages: boolean;
onAutoLoadCodexAgentsChange: (enabled: boolean) => void;
onCodexEnableWebSearchChange: (enabled: boolean) => void;
onCodexEnableImagesChange: (enabled: boolean) => void;
}
const CARD_TITLE = 'Codex CLI Settings';
const CARD_SUBTITLE = 'Configure Codex instructions and capabilities.';
const AGENTS_TITLE = 'Auto-load AGENTS.md Instructions';
const AGENTS_DESCRIPTION = 'Automatically inject project instructions from';
const AGENTS_PATH = '.codex/AGENTS.md';
const AGENTS_SUFFIX = 'on each Codex run.';
const WEB_SEARCH_TITLE = 'Enable Web Search';
const WEB_SEARCH_DESCRIPTION = 'Allow Codex to search the web for current information.';
const IMAGES_TITLE = 'Enable Image Support';
const IMAGES_DESCRIPTION = 'Allow Codex to process images attached to prompts.';
export function CodexSettings({
autoLoadCodexAgents,
codexEnableWebSearch,
codexEnableImages,
onAutoLoadCodexAgentsChange,
onCodexEnableWebSearchChange,
onCodexEnableImagesChange,
}: CodexSettingsProps) {
return (
<div
className={cn(
'rounded-2xl overflow-hidden',
'border border-border/50',
'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
'shadow-sm shadow-black/5'
)}
>
<div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
<div className="flex items-center gap-3 mb-2">
<div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
<OpenAIIcon className="w-5 h-5 text-brand-500" />
</div>
<h2 className="text-lg font-semibold text-foreground tracking-tight">{CARD_TITLE}</h2>
</div>
<p className="text-sm text-muted-foreground/80 ml-12">{CARD_SUBTITLE}</p>
</div>
<div className="p-6 space-y-5">
<div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
<Checkbox
id="auto-load-codex-agents"
checked={autoLoadCodexAgents}
onCheckedChange={(checked) => onAutoLoadCodexAgentsChange(checked === true)}
className="mt-1"
data-testid="auto-load-codex-agents-checkbox"
/>
<div className="space-y-1.5">
<Label
htmlFor="auto-load-codex-agents"
className="text-foreground cursor-pointer font-medium flex items-center gap-2"
>
<FileCode className="w-4 h-4 text-brand-500" />
{AGENTS_TITLE}
</Label>
<p className="text-xs text-muted-foreground/80 leading-relaxed">
{AGENTS_DESCRIPTION}{' '}
<code className="text-[10px] px-1 py-0.5 rounded bg-accent/50">{AGENTS_PATH}</code>{' '}
{AGENTS_SUFFIX}
</p>
</div>
</div>
<div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
<Checkbox
id="codex-enable-web-search"
checked={codexEnableWebSearch}
onCheckedChange={(checked) => onCodexEnableWebSearchChange(checked === true)}
className="mt-1"
data-testid="codex-enable-web-search-checkbox"
/>
<div className="space-y-1.5">
<Label
htmlFor="codex-enable-web-search"
className="text-foreground cursor-pointer font-medium flex items-center gap-2"
>
<Globe className="w-4 h-4 text-brand-500" />
{WEB_SEARCH_TITLE}
</Label>
<p className="text-xs text-muted-foreground/80 leading-relaxed">
{WEB_SEARCH_DESCRIPTION}
</p>
</div>
</div>
<div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
<Checkbox
id="codex-enable-images"
checked={codexEnableImages}
onCheckedChange={(checked) => onCodexEnableImagesChange(checked === true)}
className="mt-1"
data-testid="codex-enable-images-checkbox"
/>
<div className="space-y-1.5">
<Label
htmlFor="codex-enable-images"
className="text-foreground cursor-pointer font-medium flex items-center gap-2"
>
<ImageIcon className="w-4 h-4 text-brand-500" />
{IMAGES_TITLE}
</Label>
<p className="text-xs text-muted-foreground/80 leading-relaxed">{IMAGES_DESCRIPTION}</p>
</div>
</div>
</div>
</div>
);
}
|