@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/chat/skins/base/aui-default/tool-fallback.aui.tsx

@@ -0,0 +1,772 @@
+"use client";
+
+import { memo, useCallback, useRef, useState } from "react";
+import { useViewDisclosure } from "../../../stock/deploy-ui-context";
+import {
+  AlertCircleIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  LoaderIcon,
+  XCircleIcon,
+} from "lucide-react";
+import {
+  toolApprovalAcceptsText,
+  useScrollLock,
+  useToolCallElapsed,
+  type ToolApprovalOption,
+  type ToolCallMessagePart,
+  type ToolCallMessagePartProps,
+  type ToolCallMessagePartStatus,
+  type ToolCallMessagePartComponent,
+} from "@assistant-ui/react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "./collapsible";
+import { cn } from "../../../../../lib/utils";
+import { Button } from "../ui/button";
+import { Textarea } from "../ui/textarea";
+import { useTraceT } from "../../../trace-i18n";
+import { toolRowTitle } from "../../../stock/tool-display";
+import { useTurnOutcome } from "../../../turn-outcome";
+import {
+  effectiveToolStatus,
+  resolveToolStatus,
+  toolRowStatus,
+} from "../../../trace-grouping/tool-row";
+import { useToolRowOpenWhileRunning } from "../../../trace-grouping/use-deploy-work-disclosure";
+
+const ANIMATION_DURATION = 200;
+
+const pressable = "active:scale-[0.98]";
+
+export type ToolFallbackRootProps = Omit<
+  React.ComponentProps<typeof Collapsible>,
+  "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<HTMLDivElement>(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 (
+    <Collapsible
+      ref={collapsibleRef}
+      data-slot="tool-fallback-root"
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+      className={cn(
+        "aui-tool-fallback-root group/tool-fallback-root w-full",
+        className,
+      )}
+      style={
+        {
+          "--animation-duration": `${ANIMATION_DURATION}ms`,
+        } as React.CSSProperties
+      }
+      {...props}
+    >
+      {children}
+    </Collapsible>
+  );
+}
+
+type ToolStatus = ToolCallMessagePartStatus["type"];
+
+const statusIconMap: Record<ToolStatus, React.ElementType> = {
+  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 (
+    <span
+      data-slot="tool-fallback-duration"
+      className={cn(
+        "aui-tool-fallback-duration text-muted-foreground text-xs tabular-nums",
+        className,
+      )}
+      {...props}
+    >
+      {formatToolDuration(elapsedMs)}
+    </span>
+  );
+}
+
+function ToolFallbackTrigger({
+  toolName,
+  status,
+  className,
+  ...props
+}: React.ComponentProps<typeof CollapsibleTrigger> & {
+  toolName: string;
+  status?: ToolCallMessagePartStatus;
+}) {
+  // The same words as the digichat skin's row (running, waiting, failed,
+  // cancelled, used), from the shared trace rules.
+  const { label, statusType, isRunning, isCancelled } = toolRowStatus(
+    status,
+    useTraceT(),
+  );
+  const Icon = statusIconMap[statusType];
+
+  return (
+    <CollapsibleTrigger
+      data-slot="tool-fallback-trigger"
+      className={cn(
+        "aui-tool-fallback-trigger group/trigger text-muted-foreground hover:text-foreground flex w-fit origin-left items-center gap-2 py-1.5 text-sm transition-[color,scale] active:scale-[0.98]",
+        className,
+      )}
+      {...props}
+    >
+      <Icon
+        data-slot="tool-fallback-trigger-icon"
+        className={cn(
+          "aui-tool-fallback-trigger-icon size-4 shrink-0",
+          isCancelled && "text-muted-foreground",
+          isRunning && "animate-spin [animation-duration:0.6s]",
+        )}
+      />
+      <span
+        data-slot="tool-fallback-trigger-label"
+        className={cn(
+          "aui-tool-fallback-trigger-label-wrapper inline-block text-start leading-none",
+          isCancelled && "text-muted-foreground line-through",
+          isRunning && "shimmer motion-reduce:animate-none",
+        )}
+      >
+        {label}: <b>{toolRowTitle(toolName)}</b>
+      </span>
+      <ToolFallbackDuration />
+      <ChevronDownIcon
+        data-slot="tool-fallback-trigger-chevron"
+        className={cn(
+          "aui-tool-fallback-trigger-chevron size-4 shrink-0",
+          "transition-transform duration-(--animation-duration) ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
+          "-rotate-90",
+          "group-data-open/trigger:rotate-0",
+          "group-data-panel-open/trigger:rotate-0",
+        )}
+      />
+    </CollapsibleTrigger>
+  );
+}
+
+function ToolFallbackContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CollapsibleContent>) {
+  return (
+    <CollapsibleContent
+      data-slot="tool-fallback-content"
+      className={cn(
+        "aui-tool-fallback-content relative overflow-hidden text-sm outline-none",
+        "group/collapsible-content ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:animate-none",
+        "data-closed:animate-collapsible-up",
+        "data-open:animate-collapsible-down",
+        "data-closed:fill-mode-forwards",
+        "data-closed:pointer-events-none",
+        "[--tw-duration:var(--animation-duration)]",
+        className,
+      )}
+      {...props}
+    >
+      <div
+        className={cn(
+          "flex flex-col gap-2 ps-6 pt-1 pb-2 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:animate-none",
+          "group-data-open/collapsible-content:animate-in group-data-open/collapsible-content:fade-in-0 group-data-open/collapsible-content:blur-in-[2px] group-data-open/collapsible-content:slide-in-from-top-1",
+          "group-data-closed/collapsible-content:animate-out group-data-closed/collapsible-content:fade-out-0 group-data-closed/collapsible-content:blur-out-[2px] group-data-closed/collapsible-content:slide-out-to-top-1",
+          "group-data-closed/collapsible-content:animation-duration-(--animation-duration) group-data-open/collapsible-content:animation-duration-(--animation-duration)",
+        )}
+      >
+        {children}
+      </div>
+    </CollapsibleContent>
+  );
+}
+
+function ToolFallbackArgs({
+  argsText,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  argsText?: string;
+}) {
+  if (!argsText) return null;
+
+  return (
+    <div
+      data-slot="tool-fallback-args"
+      className={cn("aui-tool-fallback-args", className)}
+      {...props}
+    >
+      <pre className="aui-tool-fallback-args-value bg-muted/50 text-foreground/90 rounded-md p-2.5 text-xs whitespace-pre-wrap max-h-72 overflow-auto break-words overscroll-contain">
+        {argsText}
+      </pre>
+    </div>
+  );
+}
+
+function ToolFallbackResult({
+  result,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  result?: unknown;
+}) {
+  if (result === undefined) return null;
+
+  return (
+    <div
+      data-slot="tool-fallback-result"
+      className={cn("aui-tool-fallback-result", className)}
+      {...props}
+    >
+      <p className="aui-tool-fallback-result-header text-muted-foreground text-xs font-medium">
+        Result:
+      </p>
+      <pre className="aui-tool-fallback-result-content bg-muted/50 text-foreground/90 mt-1 rounded-md p-2.5 text-xs whitespace-pre-wrap max-h-72 overflow-auto break-words overscroll-contain">
+        {typeof result === "string" ? result : JSON.stringify(result, null, 2)}
+      </pre>
+    </div>
+  );
+}
+
+function ToolFallbackError({
+  status,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  status?: ToolCallMessagePartStatus;
+}) {
+  const tr = useTraceT();
+  if (status?.type !== "incomplete") return null;
+
+  const error = status.error;
+  const errorText = error
+    ? typeof error === "string"
+      ? error
+      : JSON.stringify(error)
+    : null;
+
+  if (!errorText) return null;
+
+  const isCancelled = status.reason === "cancelled";
+  const headerText = isCancelled ? tr.t("cancelledPrefix") : tr.t("errorPrefix");
+
+  return (
+    <div
+      data-slot="tool-fallback-error"
+      className={cn("aui-tool-fallback-error", className)}
+      {...props}
+    >
+      <p className="aui-tool-fallback-error-header text-muted-foreground font-semibold">
+        {headerText}
+      </p>
+      <p className="aui-tool-fallback-error-reason text-muted-foreground">
+        {errorText}
+      </p>
+    </div>
+  );
+}
+
+const APPROVED_RESULT = "Approved by user";
+const DENIED_RESULT = "User denied tool execution";
+
+const APPROVAL_OPTION_DEFAULT_LABELS: Record<string, string> = {
+  "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.
+ */
+const isQuestion = (approval: ToolCallMessagePart["approval"]) =>
+  approval?.display === "select" || approval?.display === "text";
+
+const offersInterruptAction = (
+  status: ToolCallMessagePartStatus | undefined,
+  approval: ToolCallMessagePart["approval"],
+  interrupt: ToolCallMessagePart["interrupt"],
+) =>
+  status?.type !== "requires-action" ||
+  status.reason !== "interrupt" ||
+  approval != null ||
+  interrupt != null;
+
+function ToolFallbackApproval({
+  className,
+  addResult,
+  resume,
+  interrupt,
+  approval,
+  respondToApproval,
+  status,
+  ...props
+}: React.ComponentProps<"div"> &
+  Partial<
+    Pick<
+      ToolCallMessagePartProps,
+      "addResult" | "resume" | "respondToApproval" | "status"
+    >
+  > & {
+    interrupt?: ToolCallMessagePart["interrupt"];
+    approval?: ToolCallMessagePart["approval"];
+  }) {
+  const [submitted, setSubmitted] = useState(false);
+  const [confirmingId, setConfirmingId] = useState<string | null>(null);
+  const [answer, setAnswer] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  if (
+    approval != null &&
+    (approval.approved !== undefined || approval.resolution !== undefined)
+  )
+    return null;
+
+  if (!offersInterruptAction(status, approval, interrupt)) return null;
+
+  // 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) => {
+    setSubmitted(true);
+    setError(null);
+    void (async () => {
+      try {
+        await send();
+      } catch (sendError) {
+        setSubmitted(false);
+        setError(
+          sendError instanceof Error ? sendError.message : String(sendError),
+        );
+      }
+    })();
+  };
+
+  const respond = (approved: boolean) => {
+    if (submitted) return;
+    if (
+      approval != null &&
+      approval.approved === undefined &&
+      respondToApproval
+    ) {
+      submit(() => respondToApproval({ approved, ...typedAnswer() }));
+    } else if (interrupt) {
+      submit(() => resume?.({ approved }));
+    } else if (
+      status?.type === "requires-action" &&
+      status.reason === "interrupt"
+    ) {
+      return;
+    } else {
+      submit(() => addResult?.(approved ? APPROVED_RESULT : DENIED_RESULT));
+    }
+  };
+
+  const respondWithOption = (option: ToolApprovalOption) => {
+    if (submitted) return;
+    setConfirmingId(null);
+    // A custom kind has no decision class for the runtime to derive, and
+    // responding without one throws; picking a declared option is an answer,
+    // so it resolves as approved.
+    submit(() =>
+      respondToApproval?.(
+        isKnownKind(option.kind)
+          ? { optionId: option.id, ...typedAnswer() }
+          : { optionId: option.id, approved: true, ...typedAnswer() },
+      ),
+    );
+  };
+
+  const typedAnswer = () => (answer.trim() ? { text: answer } : {});
+
+  const submitAnswer = () => {
+    if (submitted || !answer.trim()) return;
+    submit(() => respondToApproval?.({ text: answer }));
+  };
+
+  const handleOption = (option: ToolApprovalOption) => {
+    if (option.confirm) {
+      setConfirmingId(option.id);
+    } else {
+      respondWithOption(option);
+    }
+  };
+
+  const confirming =
+    confirmingId != null
+      ? declaredOptions?.find((o) => o.id === confirmingId)
+      : undefined;
+
+  const question = isQuestion(approval);
+
+  const promptText = approval?.prompt ? (
+    <p className="aui-tool-fallback-approval-prompt text-foreground">
+      {approval.prompt}
+    </p>
+  ) : null;
+
+  const errorText = error ? (
+    <p
+      role="alert"
+      className="aui-tool-fallback-approval-error text-destructive text-xs"
+    >
+      {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={submitted}
+        aria-label={question ? (approval?.prompt ?? "Answer") : "Note"}
+        placeholder={
+          question ? "Type your answer" : "Add a note to your decision"
+        }
+      />
+      {question && (
+        <Button
+          size="sm"
+          className={pressable}
+          onClick={submitAnswer}
+          disabled={submitted || !answer.trim()}
+        >
+          Send
+        </Button>
+      )}
+    </div>
+  ) : null;
+
+  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"
+        className={cn(
+          "aui-tool-fallback-approval-confirm flex flex-col gap-2 pt-1",
+          className,
+        )}
+        {...props}
+      >
+        <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">
+            {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={submitted}
+          >
+            Confirm
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            className={pressable}
+            onClick={() => setConfirmingId(null)}
+            disabled={submitted}
+          >
+            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"
+        className={cn(
+          "aui-tool-fallback-approval flex flex-col gap-2 pt-1",
+          className,
+        )}
+        {...props}
+      >
+        {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={submitted}
+              >
+                {approvalOptionLabel(option)}
+              </Button>
+            ),
+          )}
+          {rejectOptions.length === 0 && !question && (
+            <Button
+              size="sm"
+              variant="outline"
+              className={pressable}
+              onClick={() => respond(false)}
+              disabled={submitted}
+            >
+              Deny
+            </Button>
+          )}
+        </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"
+        className={cn(
+          "aui-tool-fallback-approval flex flex-col gap-2 pt-1",
+          className,
+        )}
+        {...props}
+      >
+        {promptText}
+        {answerField}
+        {errorText}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-slot="tool-fallback-approval"
+      className={cn(
+        "aui-tool-fallback-approval flex flex-col gap-2 pt-1",
+        className,
+      )}
+      {...props}
+    >
+      {promptText}
+      <div className="flex items-center gap-2">
+        <Button
+          size="sm"
+          className={pressable}
+          onClick={() => respond(true)}
+          disabled={submitted}
+        >
+          Allow
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          className={pressable}
+          onClick={() => respond(false)}
+          disabled={submitted}
+        >
+          Deny
+        </Button>
+      </div>
+      {answerField}
+      {errorText}
+    </div>
+  );
+}
+
+const ToolFallbackImpl: ToolCallMessagePartComponent = ({
+  toolName,
+  argsText,
+  result,
+  status: partStatus,
+  isError,
+  addResult,
+  resume,
+  interrupt,
+  approval,
+  respondToApproval,
+}) => {
+  // Shared trace rules: a failed call reads failed even when its part says
+  // complete, and a call left pending by a stopped turn reads cancelled.
+  const outcome = useTurnOutcome();
+  const resolved = resolveToolStatus(partStatus, isError, result);
+  const status = effectiveToolStatus(
+    resolved,
+    outcome,
+    offersInterruptAction(resolved, approval, interrupt),
+  );
+  const isCancelled =
+    status?.type === "incomplete" && status.reason === "cancelled";
+  const isRequiresAction = status?.type === "requires-action";
+  const shouldRenderApproval =
+    isRequiresAction && offersInterruptAction(status, approval, interrupt);
+
+  // Local: /view verbose opens the cards (the thread keys them by view level).
+  const { toolCardOpen } = useViewDisclosure();
+  const [open, setOpen] = useState(isRequiresAction || toolCardOpen);
+  const [prevRequiresAction, setPrevRequiresAction] =
+    useState(isRequiresAction);
+  if (isRequiresAction !== prevRequiresAction) {
+    setPrevRequiresAction(isRequiresAction);
+    if (isRequiresAction) setOpen(true);
+  }
+  // Local: while the call runs the card shows its arguments, and it folds
+  // again once the call completes. The first manual toggle wins.
+  const openWhileRunning = useToolRowOpenWhileRunning();
+  const [touched, setTouched] = useState(false);
+  const streamingOpen =
+    !touched && openWhileRunning && status?.type === "running";
+  const onOpenChange = useCallback((next: boolean) => {
+    setTouched(true);
+    setOpen(next);
+  }, []);
+
+  return (
+    <ToolFallbackRoot open={open || streamingOpen} onOpenChange={onOpenChange}>
+      <ToolFallbackTrigger toolName={toolName} status={status} />
+      <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}
+          />
+        )}
+        {!isCancelled && <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 {
+  ToolFallback,
+  ToolFallbackRoot,
+  ToolFallbackTrigger,
+  ToolFallbackContent,
+  ToolFallbackArgs,
+  ToolFallbackResult,
+  ToolFallbackError,
+  ToolFallbackApproval,
+};