65 lines
2 KiB
TypeScript
65 lines
2 KiB
TypeScript
import React from 'react';
|
|
|
|
import { Checkbox } from '@renderer/components/ui/checkbox';
|
|
import { Label } from '@renderer/components/ui/label';
|
|
import { Info } from 'lucide-react';
|
|
|
|
interface SkipPermissionsCheckboxProps {
|
|
id: string;
|
|
checked: boolean;
|
|
onCheckedChange: (checked: boolean) => void;
|
|
}
|
|
|
|
export const SkipPermissionsCheckbox: React.FC<SkipPermissionsCheckboxProps> = ({
|
|
id,
|
|
checked,
|
|
onCheckedChange,
|
|
}) => (
|
|
<>
|
|
<div className="mt-2 flex items-center gap-2">
|
|
<Checkbox
|
|
id={id}
|
|
checked={checked}
|
|
onCheckedChange={(value) => onCheckedChange(value === true)}
|
|
/>
|
|
<Label
|
|
htmlFor={id}
|
|
className="flex cursor-pointer items-center gap-1.5 text-xs font-normal text-text-secondary"
|
|
>
|
|
Auto-approve all tools
|
|
</Label>
|
|
</div>
|
|
{checked ? (
|
|
<div
|
|
className="mt-1.5 rounded-md border px-3 py-2 text-xs"
|
|
style={{
|
|
backgroundColor: 'rgba(59, 130, 246, 0.08)',
|
|
borderColor: 'rgba(59, 130, 246, 0.2)',
|
|
color: 'var(--color-text-secondary)',
|
|
}}
|
|
>
|
|
<div className="flex items-start gap-2">
|
|
<Info className="mt-0.5 size-3.5 shrink-0 text-blue-400" />
|
|
<p>
|
|
Unleash Claude's full power — no interruptions asking for permission. Autonomous
|
|
mode — all tools execute without confirmation. Be cautious with untrusted code.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div
|
|
className="mt-1.5 rounded-md border px-3 py-2 text-xs"
|
|
style={{
|
|
backgroundColor: 'rgba(59, 130, 246, 0.08)',
|
|
borderColor: 'rgba(59, 130, 246, 0.2)',
|
|
color: 'var(--color-text-secondary)',
|
|
}}
|
|
>
|
|
<div className="flex items-start gap-2">
|
|
<Info className="mt-0.5 size-3.5 shrink-0 text-blue-400" />
|
|
<p>Manual mode — you'll approve or deny each tool call in real-time.</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|