All files / components/chat tool-approval-card.tsx

100% Statements 4/4
100% Branches 0/0
100% Functions 1/1
100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 413x 3x 3x                     3x                                                      
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Text } from "@/components/ui/text";
 
type ToolApprovalCardProps = {
  title: string;
  description: string;
  confirmLabel: string;
  cancelLabel: string;
  onConfirm: () => void;
  onCancel: () => void;
};
 
export function ToolApprovalCard({
  title,
  description,
  confirmLabel,
  cancelLabel,
  onConfirm,
  onCancel,
}: ToolApprovalCardProps) {
  return (
    <Card className="w-fit max-w-full px-4 py-3 shadow-approval-card light:bg-white light:border-slate-200">
      <Text as="p" variant="sectionTitle" className="line-clamp-2 break-all light:text-slate-800">
        {title}
      </Text>
      <Text variant="helper" className="mt-1 block text-white/70 light:text-slate-500">
        {description}
      </Text>
      <div className="mt-3 flex flex-wrap gap-2">
        <Button type="button" size="sm" variant="primary" onClick={onConfirm}>
          {confirmLabel}
        </Button>
        <Button type="button" size="sm" variant="ghost" className="border border-white/12 font-dm-sans text-white/60 hover:bg-white/8 light:border-slate-300 light:text-slate-500 light:hover:bg-slate-100" onClick={onCancel}>
          {cancelLabel}
        </Button>
      </div>
    </Card>
  );
}