52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T20a2,"use client"; import * as React from "react"; import { Check, ShieldCheck, ShieldQuestion, ShieldX, X } from "lucide-react"; import { cn } from "@/lib/utils"; type ConfirmationState = | "approval-requested" | "approval-responded" | "output-available" | "output-denied"; interface AiConfirmationContextValue { state: ConfirmationState; onApprove?: () => void; onReject?: () => void; } const AiConfirmationContext = React.createContext(null); function useConfirmationContext() { const context = React.useContext(AiConfirmationContext); if (!context) { throw new Error( "AiConfirmation components must be used within ", ); } return context; } interface AiConfirmationProps { state: ConfirmationState; onApprove?: () => void; onReject?: () => void; children?: React.ReactNode; className?: string; } function AiConfirmation({ state, onApprove, onReject, children, className, }: AiConfirmationProps) { const contextValue = React.useMemo( () => ({ state, onApprove, onReject }), [state, onApprove, onReject], ); const stateStyles = React.useMemo(() => { const styles: Record = { "approval-requested": "border-amber-200 bg-amber-50 dark:border-amber-900 dark:bg-amber-950/30", "approval-responded": "border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-950/30", "output-available": "border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30", "output-denied": "border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/30", }; return styles[state]; }, [state]); return (

{children}

); } interface AiConfirmationRequestProps { title?: string; description?: string; children?: React.ReactNode; className?: string; } function AiConfirmationRequest({ title = "Approval Required", description, children, className, }: AiConfirmationRequestProps) { const { state } = useConfirmationContext(); if (state !== "approval-requested") { return null; } return (

{title}

{description && (

{description}

)} {children}

); } interface AiConfirmationAcceptedProps { title?: string; description?: string; children?: React.ReactNode; className?: string; } function AiConfirmationAccepted({ title = "Approved", description, children, className, }: AiConfirmationAcceptedProps) { const { state } = useConfirmationContext(); if (state !== "output-available" && state !== "approval-responded") { return null; } return (

{title}

{description && (

{description}

)} {children}

); } interface AiConfirmationRejectedProps { title?: string; description?: string; children?: React.ReactNode; className?: string; } function AiConfirmationRejected({ title = "Denied", description, children, className, }: AiConfirmationRejectedProps) { const { state } = useConfirmationContext(); if (state !== "output-denied") { return null; } return (

{title}

{description && (

{description}

)} {children}

); } interface AiConfirmationActionsProps { children?: React.ReactNode; className?: string; } function AiConfirmationActions({ children, className, }: AiConfirmationActionsProps) { const { state, onApprove, onReject } = useConfirmationContext(); if (state !== "approval-requested") { return null; } return (

{children || ( <> )}

); } interface AiConfirmationActionProps { variant: "approve" | "reject"; children?: React.ReactNode; className?: string; onClick?: () => void; } function AiConfirmationAction({ variant, children, className, onClick, }: AiConfirmationActionProps) { const { onApprove, onReject } = useConfirmationContext(); const handleClick = React.useCallback(() => { onClick?.(); if (variant === "approve") { onApprove?.(); } else { onReject?.(); } }, [variant, onClick, onApprove, onReject]); const variantStyles = React.useMemo(() => { if (variant === "approve") { return "bg-green-600 hover:bg-green-700 focus-visible:ring-green-500"; } return "bg-red-600 hover:bg-red-700 focus-visible:ring-red-500"; }, [variant]); const defaultContent = React.useMemo(() => { if (variant === "approve") { return ( <> Approve ); } return ( <> Reject ); }, [variant]); return ( ); } export { AiConfirmation, AiConfirmationRequest, AiConfirmationAccepted, AiConfirmationRejected, AiConfirmationActions, AiConfirmationAction, }; export type { AiConfirmationProps, ConfirmationState }; 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L52",null,{"namespace":"@elements","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/blocks/ai/ai-confirmation/components/elements/ai-confirmation.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]