// Ported from vercel/ai-elements @ main (packages/elements/src/confirmation.tsx). // Customizations applied on import: import-alias rewrites, RTL physical→logical // class swap, Vercel theme-token sweep. See scripts/registry/port-ai-elements.mjs // for the deterministic transforms — re-run to re-sync against upstream. "use client"; import type { ToolUIPart } from "ai"; import type { ComponentProps, ReactNode } from "react"; import { createContext, useContext, useMemo } from "react"; import { Alert, AlertDescription, } from "@/components/registry/primitives/core/alert"; import { Button } from "@/components/registry/primitives/core/button"; import { cn } from "@/lib/registry/cn"; type ToolUIPartApproval = | { id: string; approved?: never; reason?: never; } | { id: string; approved: boolean; reason?: string; } | { id: string; approved: true; reason?: string; } | { id: string; approved: false; reason?: string; } | undefined; interface ConfirmationContextValue { approval: ToolUIPartApproval; state: ToolUIPart["state"]; } const ConfirmationContext = createContext( null, ); const useConfirmation = () => { const context = useContext(ConfirmationContext); if (!context) { throw new Error("Confirmation components must be used within Confirmation"); } return context; }; export type ConfirmationProps = ComponentProps & { approval?: ToolUIPartApproval; state: ToolUIPart["state"]; }; export const Confirmation = ({ className, approval, state, ...props }: ConfirmationProps) => { const contextValue = useMemo(() => ({ approval, state }), [approval, state]); if (!approval || state === "input-streaming" || state === "input-available") { return null; } return ( ); }; export type ConfirmationTitleProps = ComponentProps; export const ConfirmationTitle = ({ className, ...props }: ConfirmationTitleProps) => ( ); export interface ConfirmationRequestProps { children?: ReactNode; } export const ConfirmationRequest = ({ children }: ConfirmationRequestProps) => { const { state } = useConfirmation(); // Only show when approval is requested if (state !== "approval-requested") { return null; } return children; }; export interface ConfirmationAcceptedProps { children?: ReactNode; } export const ConfirmationAccepted = ({ children, }: ConfirmationAcceptedProps) => { const { approval, state } = useConfirmation(); // Only show when approved and in response states if ( !approval?.approved || (state !== "approval-responded" && state !== "output-denied" && state !== "output-available") ) { return null; } return children; }; export interface ConfirmationRejectedProps { children?: ReactNode; } export const ConfirmationRejected = ({ children, }: ConfirmationRejectedProps) => { const { approval, state } = useConfirmation(); // Only show when rejected and in response states if ( approval?.approved !== false || (state !== "approval-responded" && state !== "output-denied" && state !== "output-available") ) { return null; } return children; }; export type ConfirmationActionsProps = ComponentProps<"div">; export const ConfirmationActions = ({ className, ...props }: ConfirmationActionsProps) => { const { state } = useConfirmation(); // Only show when approval is requested if (state !== "approval-requested") { return null; } return (

); }; export type ConfirmationActionProps = ComponentProps; export const ConfirmationAction = (props: ConfirmationActionProps) => (

Confirmation

Showcase

Confirmation