@protolabsai/ui 0.20.0 → 0.22.0

package/src/tool-card.tsx

@@ -0,0 +1,177 @@
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { cx } from "./internal";
+
+// The disclosure FRAME for a streamed tool call. Presentation only: the host owns
+// the ToolCall data (name/status/duration come straight off the wire type) and fills
+// the body slot with its own per-tool value renderers. The DS deliberately does NOT
+// render tool output — that's domain logic (calculator equations, fetched-page
+// previews, KV grids …) that stays app-side. See protoContent issue #187.
+
+/** Mirrors the host's `ToolCall.status`. */
+export type ToolCardStatus = "running" | "done" | "error";
+
+/** Optional wrapper around a stream of ToolCards — a gapped column. */
+export function ToolCardList({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cx("pl-toolcard-list", className)}>{children}</div>;
+}
+
+function formatDuration(ms: number): string {
+  return ms < 1000 ? `${Math.round(ms)}ms` : `${(ms / 1000).toFixed(1)}s`;
+}
+
+function StatusGlyph({ status }: { status: ToolCardStatus }) {
+  if (status === "running") {
+    return (
+      <span className="pl-toolcard__status pl-toolcard__status--running" aria-label="running">
+        <svg className="pl-toolcard__spin" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
+          <path d="M21 12a9 9 0 1 1-6.2-8.5" />
+        </svg>
+      </span>
+    );
+  }
+  if (status === "error") {
+    return (
+      <span className="pl-toolcard__status pl-toolcard__status--error" aria-label="error">
+        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
+          <path d="M6 6l12 12M18 6L6 18" />
+        </svg>
+      </span>
+    );
+  }
+  return (
+    <span className="pl-toolcard__status pl-toolcard__status--done" aria-label="done">
+      <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M20 6L9 17l-5-5" />
+      </svg>
+    </span>
+  );
+}
+
+/** A single tool-call disclosure: a row with leading icon, name, duration, and a
+ *  running→done/error status glyph, expanding to a body slot. Collapsed and STICKY
+ *  by default — the open state is the user's explicit choice, so the message never
+ *  reflows as tools start and finish. `status`/`name`/`duration` come off the host's
+ *  ToolCall; `children` is the rendered input/result (compose `ToolSection`s);
+ *  `nested` holds child cards for a subagent `task` (indented). */
+export function ToolCard({
+  name,
+  status,
+  icon,
+  duration,
+  defaultOpen = false,
+  nested,
+  children,
+  className,
+}: {
+  name: ReactNode;
+  status: ToolCardStatus;
+  /** Leading glyph — the host maps tool→icon (the DS stays icon-agnostic). */
+  icon?: ReactNode;
+  /** Elapsed ms (`ToolCall.durationMs`) — rendered "820ms" / "1.2s". */
+  duration?: number;
+  defaultOpen?: boolean;
+  /** Indented child tool cards for a subagent `task`. */
+  nested?: ReactNode;
+  /** Expanded body — the rendered input/result (compose `ToolSection`s). */
+  children?: ReactNode;
+  className?: string;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const hasBody = children != null;
+  const card = (
+    <div className={cx("pl-toolcard", `pl-toolcard--${status}`, className)}>
+      <button
+        type="button"
+        className="pl-toolcard__head"
+        aria-expanded={hasBody ? open : undefined}
+        disabled={!hasBody}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <span
+          className={cx(
+            "pl-toolcard__caret",
+            !hasBody && "pl-toolcard__caret--hidden",
+            open && "pl-toolcard__caret--open",
+          )}
+          aria-hidden
+        >
+          <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M9 6l6 6-6 6" />
+          </svg>
+        </span>
+        {icon != null && (
+          <span className="pl-toolcard__icon" aria-hidden>
+            {icon}
+          </span>
+        )}
+        <span className="pl-toolcard__name">{name}</span>
+        {duration != null && <span className="pl-toolcard__dur">{formatDuration(duration)}</span>}
+        <StatusGlyph status={status} />
+      </button>
+      {hasBody && open && <div className="pl-toolcard__body">{children}</div>}
+    </div>
+  );
+  if (nested == null) return card;
+  return (
+    <div className="pl-toolcard-group">
+      {card}
+      <div className="pl-toolcard__children">{nested}</div>
+    </div>
+  );
+}
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <button
+      type="button"
+      className="pl-toolcard__copy"
+      title="Copy to clipboard"
+      aria-label={copied ? "Copied" : "Copy"}
+      onClick={async () => {
+        try {
+          await navigator.clipboard.writeText(text);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1200);
+        } catch {
+          /* clipboard unavailable (insecure context / denied) */
+        }
+      }}
+    >
+      {copied ? (
+        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M20 6L9 17l-5-5" />
+        </svg>
+      ) : (
+        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <rect x="9" y="9" width="13" height="13" rx="2" />
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+        </svg>
+      )}
+    </button>
+  );
+}
+
+/** A labelled body section with an optional copy affordance — e.g. input / result.
+ *  Compose inside `ToolCard`'s body; fill `children` with the rendered value. */
+export function ToolSection({
+  label,
+  copyText,
+  children,
+}: {
+  label: ReactNode;
+  /** When set, renders a self-contained copy-to-clipboard button. */
+  copyText?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="pl-toolcard__section">
+      <div className="pl-toolcard__section-head">
+        <span className="pl-toolcard__label">{label}</span>
+        {copyText != null && <CopyButton text={copyText} />}
+      </div>
+      {children}
+    </div>
+  );
+}