51: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"] 52:I[544296,["/_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"],"ItemStyles"] 53:I[34002,["/_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"],"CodeEditor"] 54: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"] 55:T99e8,"use client"; import { forwardRef, memo, useCallback, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react"; import { AlertCircleIcon, CheckIcon, ChevronDownIcon, CircleMinusIcon, LoaderIcon, XCircleIcon, } from "lucide-react"; import { toolApprovalAcceptsText, useAuiState, useScrollLock, useToolCallElapsed, type ToolApprovalAnswer, type ToolApprovalOption, type ToolApprovalQuestion, type ToolCallMessagePart, type ToolCallMessagePartProps, type ToolCallMessagePartStatus, type ToolCallMessagePartComponent, } from "@assistant-ui/react"; import { cn } from "@/lib/utils"; import { CollapsibleRoot as Collapsible, CollapsibleContent, CollapsibleTrigger, } from "./collapsible-root"; import { Button } from "@/components/ui/button"; import { Textarea } from "@/components/ui/textarea"; const ANIMATION_DURATION = 200; const pressable = "active:scale-[0.98]"; export type ToolFallbackRootProps = Omit< React.ComponentProps, "open" | "onOpenChange" > & { open?: boolean; onOpenChange?: (open: boolean) => void; defaultOpen?: boolean; }; function ToolFallbackRoot({ className, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, children, ...props }: ToolFallbackRootProps) { const collapsibleRef = useRef(null); const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen); const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION); const isControlled = controlledOpen !== undefined; const isOpen = isControlled ? controlledOpen : uncontrolledOpen; const handleOpenChange = useCallback( (open: boolean) => { lockScroll(); if (!isControlled) { setUncontrolledOpen(open); } controlledOnOpenChange?.(open); }, [lockScroll, isControlled, controlledOnOpenChange], ); return ( {children} ); } type ToolStatus = ToolCallMessagePartStatus["type"]; const statusIconMap: Record = { running: LoaderIcon, complete: CheckIcon, incomplete: XCircleIcon, "requires-action": AlertCircleIcon, }; const formatToolDuration = (ms: number) => { if (ms < 1000) return "<1s"; const seconds = ms / 1000; if (seconds < 10) return `${(Math.floor(seconds * 10) / 10).toFixed(1)}s`; if (seconds < 60) return `${Math.floor(seconds)}s`; return `${Math.floor(seconds / 60)}m ${Math.floor(seconds % 60)}s`; }; function ToolFallbackDuration({ className, ...props }: React.ComponentProps<"span">) { const elapsedMs = useToolCallElapsed(); if (elapsedMs === undefined) return null; return ( {formatToolDuration(elapsedMs)} ); } function ToolFallbackTrigger({ toolName, status, responseDeliveryStatus, className, ...props }: React.ComponentProps & { toolName: string; status?: ToolCallMessagePartStatus; responseDeliveryStatus?: ToolCallMessagePart["responseDeliveryStatus"]; }) { const statusType = status?.type ?? "complete"; const isRunning = statusType === "running"; const isCancelled = status?.type === "incomplete" && status.reason === "cancelled"; const Icon = statusIconMap[statusType]; const label = responseDeliveryStatus === "queued" ? "Reply queued, not sent yet" : statusType === "running" ? "Running tool" : statusType === "requires-action" ? "Waiting on tool" : statusType === "incomplete" ? `${isCancelled ? "Cancelled" : "Failed"} tool` : "Used tool"; return ( {label}: {toolName} ); } function ToolFallbackContent({ className, children, ...props }: React.ComponentProps) { return (

{children}

); } function ToolFallbackArgs({ argsText, className, ...props }: React.ComponentProps<"div"> & { argsText?: string; }) { if (!argsText) return null; return (

        {argsText}

); } const formatUnknownValue = (value: unknown, space?: number): string => { if (typeof value === "string") return value; try { if (value instanceof Error) return String(value); const json = JSON.stringify(value, null, space); if (json !== undefined) return json; } catch {} try { return String(value); } catch { return "[Unserializable value]"; } }; function ToolFallbackResult({ result, className, ...props }: React.ComponentProps<"div"> & { result?: unknown; }) { if (result === undefined) return null; return (

Result:

        {formatUnknownValue(result, 2)}

); } function ToolFallbackError({ status, className, ...props }: React.ComponentProps<"div"> & { status?: ToolCallMessagePartStatus; }) { if (status?.type !== "incomplete") return null; const error = status.error; const errorText = error === undefined || error === null ? null : formatUnknownValue(error); if (!errorText) return null; const isCancelled = status.reason === "cancelled"; const headerText = isCancelled ? "Cancelled reason:" : "Error:"; return (

{headerText}

{errorText}

); } const APPROVED_RESULT = "Approved by user"; const DENIED_RESULT = "User denied tool execution"; const APPROVAL_OPTION_DEFAULT_LABELS: Record = { "allow-once": "Allow", "allow-always": "Always allow", "reject-once": "Deny", "reject-always": "Always deny", }; const isKnownKind = (kind: string) => Object.hasOwn(APPROVAL_OPTION_DEFAULT_LABELS, kind); const isAllowKind = (kind: string) => kind === "allow-once" || kind === "allow-always"; const approvalOptionLabel = (option: ToolApprovalOption) => option.label ?? (isKnownKind(option.kind) ? APPROVAL_OPTION_DEFAULT_LABELS[option.kind] : undefined) ?? option.id; /** * A request that declares how it wants to be presented is asking a question, * not gating an action, so a refusal is not one of the answers it accepts * unless the request declares itself dismissible. */ const isQuestion = (approval: ToolCallMessagePart["approval"]) => approval?.display === "select" || approval?.display === "text" || approval?.display === "questions"; const questionAcceptsText = (question: ToolApprovalQuestion) => !question.options?.length || question.allowFreeform === true; const answerLabels = ( question: ToolApprovalQuestion, answer: ToolApprovalAnswer | undefined, ) => [ ...(answer?.optionIds ?? []).map( (id) => question.options?.find((option) => option.id === id)?.label ?? id, ), ...(answer?.text?.trim() ? [answer.text] : []), ]; const isSettled = (approval: ToolCallMessagePart["approval"]) => approval != null && (approval.approved !== undefined || approval.resolution !== undefined); type ApprovalReceipt = { outcome: "allowed" | "refused" | "closed"; label: string; option?: string | undefined; }; /** * A settled request reads as a past-tense record of what happened to it, so * scrolling back never shows a live control for a decision already made. */ const approvalReceipt = ( approval: NonNullable, ): ApprovalReceipt => { if (approval.resolution !== undefined) return { outcome: "closed", label: approval.resolution === "cancelled" ? "Cancelled before a decision" : "Expired before a decision", }; const chosen = approval.optionId === undefined ? undefined : approval.options?.find((option) => option.id === approval.optionId); const option = chosen !== undefined ? approvalOptionLabel(chosen) : approval.optionId === undefined ? undefined : approval.optionId; const answered = isQuestion(approval) || (chosen !== undefined && !isKnownKind(chosen.kind)); const automatic = approval.isAutomatic ? " automatically" : ""; if (approval.approved) return { outcome: "allowed", label: `${answered ? "Answered" : "Allowed"}${automatic}`, option, }; return { outcome: "refused", label: `${answered ? "Dismissed" : "Denied"}${automatic}`, option, }; }; const receiptIcons = { allowed: CheckIcon, refused: XCircleIcon, closed: CircleMinusIcon, } satisfies Record; function ToolFallbackApprovalReceipt({ approval, className, focusReceiptRef, receiptRef, ...props }: React.ComponentPropsWithoutRef<"div"> & { approval: NonNullable; focusReceiptRef: React.MutableRefObject; receiptRef: React.MutableRefObject; }) { useLayoutEffect(() => { const shouldFocus = focusReceiptRef.current === approval.id; focusReceiptRef.current = null; if (shouldFocus) receiptRef.current?.focus({ preventScroll: true }); }, [approval.id, focusReceiptRef, receiptRef]); const receipt = approvalReceipt(approval); const Icon = receiptIcons[receipt.outcome]; const notes = [ ...new Set( [approval.text, approval.reason].filter( (value): value is string => typeof value === "string" && value !== "", ), ), ]; return (

{approval.prompt ? (

{approval.prompt}

) : null}

{receipt.label} {receipt.option !== undefined ? ( · {receipt.option} ) : null}

{approval.answers && approval.questions?.map((question) => { const labels = answerLabels( question, approval.answers && Object.hasOwn(approval.answers, question.id) ? approval.answers[question.id] : undefined, ); if (labels.length === 0) return null; return (

{question.header ?? question.prompt} {" "} · {labels.join(", ")}

); })} {notes.map((text) => (

{text}

))}

); } function ToolFallbackApprovalQuestions({ questions, dismissible, locked, onSend, onDismiss, }: { questions: readonly ToolApprovalQuestion[]; dismissible: boolean; locked: boolean; onSend: (answers: Record) => void; onDismiss: () => void; }) { const [selected, setSelected] = useState< ReadonlyMap >(() => new Map()); const [typed, setTyped] = useState>( () => new Map(), ); const toggle = (question: ToolApprovalQuestion, optionId: string) => setSelected((current) => { const chosen = current.get(question.id) ?? []; const next = chosen.includes(optionId) ? chosen.filter((id) => id !== optionId) : question.multiple ? [...chosen, optionId] : [optionId]; return new Map(current).set(question.id, next); }); const answerOf = (question: ToolApprovalQuestion): ToolApprovalAnswer => { const optionIds = selected.get(question.id) ?? []; const draft = typed.get(question.id); const text = draft?.trim() ? draft : undefined; return { ...(optionIds.length > 0 && { optionIds }), ...(text !== undefined && { text }), }; }; const complete = questions.length > 0 && questions.every((question) => { const answer = answerOf(question); return answer.optionIds !== undefined || answer.text !== undefined; }); const send = () => { if (locked || !complete) return; onSend( Object.fromEntries( questions.map((question) => [question.id, answerOf(question)]), ), ); }; return ( <> {questions.map((question) => { const chosen = selected.get(question.id) ?? []; const described = question.options?.some((option) => option.description) ?? false; return (

{question.header ? ( {question.header} ) : null} {question.prompt}

{question.options && question.options.length > 0 ? (

{question.options.map((option) => { const pressed = chosen.includes(option.id); return ( ); })}

) : null} {questionAcceptsText(question) ? (

setTyped((current) =>
                    new Map(current).set(question.id, event.target.value),
                  )
                }
                disabled={locked}
                aria-label={question.prompt}
                placeholder={
                  question.options?.length
                    ? "Or type an answer"
                    : "Type your answer"
                }
              />
            ) : null}
          </div>
        );
      })}
      <div className="flex items-center gap-2">
        <Button
          size="sm"
          className={pressable}
          onClick={send}
          disabled={locked || !complete}
        >
          Send
        </Button>
        {dismissible ? (
          <Button
            size="sm"
            variant="outline"
            className={pressable}
            onClick={onDismiss}
            disabled={locked}
          >
            Dismiss
          </Button>
        ) : null}
      </div>
    </>
  );
}

const offersInterruptAction = (
  status: ToolCallMessagePartStatus | undefined,
  approval: ToolCallMessagePart["approval"],
  interrupt: ToolCallMessagePart["interrupt"],
) =>
  status?.type !== "requires-action" ||
  status.reason !== "interrupt" ||
  approval != null ||
  interrupt != null;

type ToolFallbackApprovalProps = React.ComponentPropsWithoutRef<"div"> &
  Partial<
    Pick<
      ToolCallMessagePartProps,
      "addResult" | "resume" | "respondToApproval" | "status"
    >
  > & {
    interrupt?: ToolCallMessagePart["interrupt"];
    approval?: ToolCallMessagePart["approval"];
  };

if (approval != null && isSettled(approval))
    return (
      <ToolFallbackApprovalReceipt
        approval={approval}
        receiptRef={receiptRef}
        focusReceiptRef={focusReceiptRef}
        className={className}
        {...props}
      />
    );

if (
    hidePendingApproval ||
    !offersInterruptAction(status, approval, interrupt)
  )
    return null;

const promptText = approval?.prompt ? (
    <p className="aui-tool-fallback-approval-prompt text-foreground whitespace-pre-line">
      {approval.prompt}
    </p>
  ) : null;

if (!canAnswer)
    return (
      promptText && (
        <div
          data-slot="tool-fallback-approval"
          tabIndex={-1}
          className={cn(
            "aui-tool-fallback-approval flex flex-col gap-2 pt-1",
            className,
          )}
          {...props}
          ref={setPendingGroup}
        >
          {promptText}
        </div>
      )
    );

// A declared option list is a host constraint: the kit never adds an
  // approval path beyond it, and preserves a refusal path only where the
  // request is an action the user may refuse.
  const declaredOptions = respondToApproval ? approval?.options : undefined;
  const acceptsText =
    approval != null &&
    respondToApproval != null &&
    toolApprovalAcceptsText(approval);

// A refused response leaves the request open, so the controls come back
  // rather than staying spent on a decision the runtime never recorded.
  const submit = (send: () => Promise<void> | void) => {
    focusPendingGroup();
    setSubmitted(true);
    setConfirmingId(null);
    setError(null);
    void (async () => {
      try {
        await send();
      } catch (sendError) {
        if (attemptRef.current !== attempt) return;
        setSubmitted(false);
        setError(
          sendError instanceof Error ? sendError.message : String(sendError),
        );
      }
    })();
  };

const typedNote = () => (answer.trim() ? { text: answer } : {});

// The kit does not validate an answer the request never constrained: a host
  // that cannot record an empty one rejects it, which reopens the controls.
  const submitAnswer = () => {
    if (locked) return;
    submit(() => respondToApproval?.({ text: answer }));
  };

// A dismissal is no answer at all, so a typed draft does not travel with it.
  const dismiss = () => {
    if (locked) return;
    submit(() => respondToApproval?.({ approved: false }));
  };

const handleOption = (option: ToolApprovalOption) => {
    if (option.confirm) {
      focusPendingGroup();
      setConfirmingId(option.id);
    } else {
      respondWithOption(option);
    }
  };

const confirming =
    confirmingId != null
      ? declaredOptions?.find((o) => o.id === confirmingId)
      : undefined;

const question = isQuestion(approval);
  const dismissible =
    question && respondToApproval != null && approval?.dismissible === true;

const dismissButton = dismissible ? (
    <Button
      size="sm"
      variant="outline"
      className={pressable}
      onClick={dismiss}
      disabled={locked}
    >
      Dismiss
    </Button>
  ) : null;

const errorText = error ? (
    <p
      role="alert"
      className="aui-tool-fallback-approval-error text-destructive text-xs whitespace-pre-line"
    >
      {error}
    </p>
  ) : null;

const answerField = acceptsText ? (
    <div className="aui-tool-fallback-approval-answer flex flex-col items-start gap-2">
      <Textarea
        value={answer}
        onChange={(event) => setAnswer(event.target.value)}
        disabled={locked}
        aria-label={question ? (approval?.prompt ?? "Answer") : "Note"}
        placeholder={
          question ? "Type your answer" : "Add a note to your decision"
        }
      />
      {question && (
        <div className="flex items-center gap-2">
          <Button
            size="sm"
            className={pressable}
            onClick={submitAnswer}
            disabled={locked}
          >
            Send
          </Button>
          {dismissButton}
        </div>
      )}
    </div>
  ) : null;

if (approval?.display === "questions" && respondToApproval) {
    return (
      <div
        data-slot="tool-fallback-approval"
        tabIndex={-1}
        className={cn(
          "aui-tool-fallback-approval flex flex-col gap-3 pt-1",
          className,
        )}
        {...props}
        ref={setPendingGroup}
      >
        {promptText}
        <ToolFallbackApprovalQuestions
          questions={approval.questions ?? []}
          dismissible={approval.dismissible === true}
          locked={locked}
          onSend={(answers) => submit(() => respondToApproval({ answers }))}
          onDismiss={dismiss}
        />
        {errorText}
      </div>
    );
  }

if (confirming) {
    const confirmMeta =
      typeof confirming.confirm === "object" ? confirming.confirm : undefined;
    const confirmDescription =
      confirmMeta?.description ?? confirming.description;
    return (
      <div
        data-slot="tool-fallback-approval-confirm"
        tabIndex={-1}
        className={cn(
          "aui-tool-fallback-approval-confirm flex flex-col gap-2 pt-1",
          className,
        )}
        {...props}
        ref={setPendingGroup}
      >
        <p className="aui-tool-fallback-approval-confirm-title font-semibold">
          {confirmMeta?.title ?? `${approvalOptionLabel(confirming)}?`}
        </p>
        {confirmDescription && (
          <p className="aui-tool-fallback-approval-confirm-description text-muted-foreground whitespace-pre-line">
            {confirmDescription}
          </p>
        )}
        {confirming.grants && confirming.grants.length > 0 && (
          <ul className="aui-tool-fallback-approval-confirm-grants flex flex-col gap-1">
            {confirming.grants.map((grant) => (
              <li key={grant}>
                <code className="aui-tool-fallback-approval-confirm-grant bg-muted rounded px-1.5 py-0.5 text-xs">
                  {grant}
                </code>
              </li>
            ))}
          </ul>
        )}
        <div className="flex items-center gap-2">
          <Button
            size="sm"
            className={pressable}
            onClick={() => respondWithOption(confirming)}
            disabled={locked}
          >
            Confirm
          </Button>
          <Button
            size="sm"
            variant="outline"
            className={pressable}
            onClick={() => {
              focusPendingGroup();
              setConfirmingId(null);
            }}
            disabled={locked}
          >
            Back
          </Button>
        </div>
      </div>
    );
  }

if (declaredOptions && declaredOptions.length > 0) {
    const allowOptions = declaredOptions.filter((o) => isAllowKind(o.kind));
    const customOptions = declaredOptions.filter((o) => !isKnownKind(o.kind));
    const rejectOptions = declaredOptions.filter(
      (o) => isKnownKind(o.kind) && !isAllowKind(o.kind),
    );
    return (
      <div
        data-slot="tool-fallback-approval"
        tabIndex={-1}
        className={cn(
          "aui-tool-fallback-approval flex flex-col gap-2 pt-1",
          className,
        )}
        {...props}
        ref={setPendingGroup}
      >
        {promptText}
        <div className="flex flex-wrap items-center gap-2">
          {[...allowOptions, ...customOptions, ...rejectOptions].map(
            (option) => (
              <Button
                key={option.id}
                size="sm"
                variant={option === allowOptions[0] ? "default" : "outline"}
                className={pressable}
                onClick={() => handleOption(option)}
                disabled={locked}
              >
                {approvalOptionLabel(option)}
              </Button>
            ),
          )}
          {rejectOptions.length === 0 && !question && (
            <Button
              size="sm"
              variant="outline"
              className={pressable}
              onClick={() => respond(false)}
              disabled={locked}
            >
              Deny
            </Button>
          )}
          {!acceptsText && dismissButton}
        </div>
        {answerField}
        {errorText}
      </div>
    );
  }

// A question carries no decision to fabricate, so it renders only what the
  // request declared, even when that leaves nothing to act on here.
  if (question) {
    return (
      <div
        data-slot="tool-fallback-approval"
        tabIndex={-1}
        className={cn(
          "aui-tool-fallback-approval flex flex-col gap-2 pt-1",
          className,
        )}
        {...props}
        ref={setPendingGroup}
      >
        {promptText}
        {answerField}
        {!acceptsText && dismissButton && (
          <div className="flex items-center gap-2">{dismissButton}</div>
        )}
        {errorText}
      </div>
    );
  }

return (
    <div
      data-slot="tool-fallback-approval"
      tabIndex={-1}
      className={cn(
        "aui-tool-fallback-approval flex flex-col gap-2 pt-1",
        className,
      )}
      {...props}
      ref={setPendingGroup}
    >
      {promptText}
      <div className="flex items-center gap-2">
        <Button
          size="sm"
          className={pressable}
          onClick={() => respond(true)}
          disabled={locked}
        >
          Allow
        </Button>
        <Button
          size="sm"
          variant="outline"
          className={pressable}
          onClick={() => respond(false)}
          disabled={locked}
        >
          Deny
        </Button>
      </div>
      {answerField}
      {errorText}
    </div>
  );
}

const ToolFallbackImpl: ToolCallMessagePartComponent = ({
  toolName,
  argsText,
  result,
  status,
  responseDeliveryStatus,
  addResult,
  resume,
  interrupt,
  approval,
  respondToApproval,
}) => {
  const isCancelled =
    status?.type === "incomplete" && status.reason === "cancelled";
  const isRequiresAction = status?.type === "requires-action";
  const shouldRenderApproval =
    approval != null ||
    (isRequiresAction && offersInterruptAction(status, approval, interrupt));

const [open, setOpen] = useState(isRequiresAction);
  const [prevRequiresAction, setPrevRequiresAction] =
    useState(isRequiresAction);
  if (isRequiresAction !== prevRequiresAction) {
    setPrevRequiresAction(isRequiresAction);
    if (isRequiresAction) setOpen(true);
  }
  const approvalHadFocusRef = useRef(false);
  const approvalElementRef = useRef<HTMLDivElement | null>(null);
  const triggerRef = useRef<HTMLButtonElement | null>(null);

useLayoutEffect(() => {
    const focusedElement = approvalElementRef.current;
    if (
      !focusedElement ||
      focusedElement.isConnected ||
      isRequiresAction ||
      !approvalHadFocusRef.current
    ) {
      return;
    }

return (
    <ToolFallbackRoot open={open} onOpenChange={setOpen}>
      <ToolFallbackTrigger
        toolName={toolName}
        status={status}
        responseDeliveryStatus={responseDeliveryStatus}
      />
      <ToolFallbackContent>
        <ToolFallbackError status={status} />
        <ToolFallbackArgs
          argsText={argsText}
          className={cn(isCancelled && "opacity-60")}
        />
        {shouldRenderApproval && (
          <ToolFallbackApproval
            addResult={addResult}
            resume={resume}
            interrupt={interrupt}
            approval={approval}
            respondToApproval={respondToApproval}
            status={status}
            onFocusCapture={(event) => {
              const root = event.currentTarget.closest(
                '[data-slot="tool-fallback-root"]',
              );
              triggerRef.current =
                root?.querySelector<HTMLButtonElement>(
                  '[data-slot="tool-fallback-trigger"]',
                ) ?? null;
              approvalElementRef.current = event.currentTarget;
              approvalHadFocusRef.current = true;
            }}
            onBlurCapture={(event) => {
              const relatedTarget = event.relatedTarget;
              const stillFocused = relatedTarget
                ? event.currentTarget.contains(relatedTarget as Node)
                : event.currentTarget.contains(
                    event.currentTarget.ownerDocument.activeElement,
                  );
              if (!stillFocused) approvalHadFocusRef.current = false;
            }}
          />
        )}
        <ToolFallbackResult result={result} />
      </ToolFallbackContent>
    </ToolFallbackRoot>
  );
};

const ToolFallback = memo(
  ToolFallbackImpl,
) as unknown as ToolCallMessagePartComponent & {
  Root: typeof ToolFallbackRoot;
  Trigger: typeof ToolFallbackTrigger;
  Content: typeof ToolFallbackContent;
  Args: typeof ToolFallbackArgs;
  Result: typeof ToolFallbackResult;
  Error: typeof ToolFallbackError;
  Approval: typeof ToolFallbackApproval;
};

ToolFallback.displayName = "ToolFallback";
ToolFallback.Root = ToolFallbackRoot;
ToolFallback.Trigger = ToolFallbackTrigger;
ToolFallback.Content = ToolFallbackContent;
ToolFallback.Args = ToolFallbackArgs;
ToolFallback.Result = ToolFallbackResult;
ToolFallback.Error = ToolFallbackError;
ToolFallback.Approval = ToolFallbackApproval;

export {
  formatUnknownValue,
  offersInterruptAction,
  ToolFallback,
  ToolFallbackRoot,
  ToolFallbackTrigger,
  ToolFallbackContent,
  ToolFallbackArgs,
  ToolFallbackResult,
  ToolFallbackError,
  ToolFallbackApproval,
};
50:["$","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","@assistant-ui/react@^0.15.29",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40assistant-ui%2Freact","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":"@assistant-ui/react@^0.15.29"}]]}]}],["$","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"}]]}]}],["$","li","tw-shimmer@^0.4.14",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tw-shimmer","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":"tw-shimmer@^0.4.14"}]]}]}]]}],["$","$L51",null,{"namespace":"@assistant-ui","registryDependencies":["https://r.assistant-ui.com/elements-collapsible-root.json","button","textarea"]}]]}],["$","$L52",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L53",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"tw-shimmer\" {\n\n}\n\n@custom-variant data-open (&:where([data-state=\"open\"], [data-open]:not([data-open=\"false\"]))) {\n\n}\n\n@custom-variant data-closed (&:where([data-state=\"closed\"], [data-closed]:not([data-closed=\"false\"]))) {\n\n}\n\n@keyframes collapsible-down {\n\tfrom {\n\t\theight: 0;\n\t}\n\tto {\n\t\theight: var(--radix-collapsible-content-height, var(--collapsible-panel-height, auto));\n\t}\n}\n\n@keyframes collapsible-up {\n\tfrom {\n\t\theight: var(--radix-collapsible-content-height, var(--collapsible-panel-height, auto));\n\t}\n\tto {\n\t\theight: 0;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L54",null,{"files":[{"path":"components/assistant-ui/elements/tool-fallback.aui.tsx","content":"$55","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>