@assistant-ui/react-devtools 1.2.6 → 1.2.7

package/src/views/message/PartView.tsx

@@ -0,0 +1,197 @@
+import type { ReactNode } from "react";
+import {
+  AudioPartView,
+  FilePartView,
+  ImagePartView,
+} from "../attachments/MediaPartView";
+import { Chip, JSONTree, ToneBadge } from "../ui";
+import { StatusBadge } from "./StatusBadge";
+import { ToolCallView } from "./ToolCallView";
+import type { PartPreview, PartStatusPreview } from "./types";
+
+const PartShell = ({
+  type,
+  status,
+  children,
+  tone,
+  compact = false,
+}: {
+  type: string;
+  status?: PartStatusPreview | undefined;
+  children?: ReactNode;
+  tone?: "reasoning" | undefined;
+  compact?: boolean;
+}) => {
+  if (compact) {
+    return (
+      <div className="px-2 py-1.5">
+        {children}
+        {status ? (
+          <div className="mt-1">
+            <StatusBadge
+              type={status.type}
+              reason={status.reason}
+              compact
+              size="sm"
+            />
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex items-center gap-2">
+        {tone === "reasoning" ? (
+          <ToneBadge tone="violet">{type}</ToneBadge>
+        ) : (
+          <Chip>{type}</Chip>
+        )}
+        {status ? (
+          <StatusBadge type={status.type} reason={status.reason} />
+        ) : null}
+      </div>
+      {children}
+    </div>
+  );
+};
+
+const Text = ({
+  value,
+  muted,
+  compact = false,
+}: {
+  value: string;
+  muted?: boolean;
+  compact?: boolean;
+}) => (
+  <div
+    className={
+      muted
+        ? compact
+          ? "text-muted-foreground text-[11px] wrap-break-word whitespace-pre-wrap italic"
+          : "text-muted-foreground wrap-break-word whitespace-pre-wrap italic"
+        : compact
+          ? "text-foreground text-[11px] wrap-break-word whitespace-pre-wrap"
+          : "text-foreground wrap-break-word whitespace-pre-wrap"
+    }
+  >
+    {value || "(empty)"}
+  </div>
+);
+
+export const PartView = ({
+  part,
+  compact = false,
+}: {
+  part: PartPreview;
+  compact?: boolean;
+}) => {
+  switch (part.type) {
+    case "tool-call":
+      return <ToolCallView part={part} nested={compact} />;
+    case "text":
+      return (
+        <PartShell type="text" status={part.status} compact={compact}>
+          <Text value={part.text} compact={compact} />
+        </PartShell>
+      );
+    case "reasoning":
+      return (
+        <PartShell
+          type="reasoning"
+          status={part.status}
+          tone="reasoning"
+          compact={compact}
+        >
+          <Text value={part.text} muted compact={compact} />
+        </PartShell>
+      );
+    case "source":
+      return (
+        <PartShell type="source" status={part.status} compact={compact}>
+          <div className="text-foreground text-[11px]">
+            {part.title ?? part.url ?? part.sourceType ?? "(source)"}
+            {part.title && part.url ? (
+              <span className="text-muted-foreground ml-1">({part.url})</span>
+            ) : null}
+          </div>
+        </PartShell>
+      );
+    case "image":
+      return (
+        <div className="flex flex-col gap-1">
+          <ImagePartView part={part} compact={compact} />
+          {part.status ? (
+            <div className={compact ? "px-2" : undefined}>
+              <StatusBadge
+                type={part.status.type}
+                reason={part.status.reason}
+                compact
+                size="sm"
+              />
+            </div>
+          ) : null}
+        </div>
+      );
+    case "file":
+      return (
+        <div className="flex flex-col gap-1">
+          <FilePartView part={part} compact={compact} />
+          {part.status ? (
+            <div className={compact ? "px-2" : undefined}>
+              <StatusBadge
+                type={part.status.type}
+                reason={part.status.reason}
+                compact
+                size="sm"
+              />
+            </div>
+          ) : null}
+        </div>
+      );
+    case "audio":
+      return (
+        <div className="flex flex-col gap-1">
+          <AudioPartView part={part} compact={compact} />
+          {part.status ? (
+            <div className={compact ? "px-2" : undefined}>
+              <StatusBadge
+                type={part.status.type}
+                reason={part.status.reason}
+                compact
+                size="sm"
+              />
+            </div>
+          ) : null}
+        </div>
+      );
+    case "data":
+      return (
+        <PartShell
+          type={part.name ? `data: ${part.name}` : "data"}
+          status={part.status}
+          compact={compact}
+        >
+          <JSONTree value={part.data} openDepth={compact ? 0 : 1} />
+        </PartShell>
+      );
+    case "generative-ui":
+      return (
+        <PartShell type="generative-ui" status={part.status} compact={compact}>
+          <JSONTree value={part.spec} openDepth={compact ? 0 : 1} />
+        </PartShell>
+      );
+    default:
+      return (
+        <PartShell
+          type={part.rawType || "unknown"}
+          status={part.status}
+          compact={compact}
+        >
+          <JSONTree value={part.raw} openDepth={compact ? 0 : 1} />
+        </PartShell>
+      );
+  }
+};

package/src/views/message/RoleLabel.tsx

@@ -0,0 +1,22 @@
+import clsx from "clsx";
+
+export const RoleLabel = ({
+  role,
+  compact = false,
+}: {
+  role: string;
+  compact?: boolean;
+}) => (
+  <span
+    className={clsx(
+      "shrink-0 leading-none capitalize",
+      compact
+        ? "text-muted-foreground text-[10px] font-medium"
+        : role === "user"
+          ? "bg-accent text-foreground rounded px-1.5 py-0.5 text-[11px] font-medium"
+          : "text-foreground text-[12px] font-medium",
+    )}
+  >
+    {role}
+  </span>
+);

package/src/views/message/StatusBadge.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx";
+import { STATUS_TONE, ToneBadge } from "../ui";
+
+export const StatusBadge = ({
+  type,
+  reason,
+  compact = false,
+  size = "default",
+  className,
+}: {
+  type: string;
+  reason?: string | undefined;
+  /** Omits the reason segment — better for narrow transcript rails. */
+  compact?: boolean;
+  size?: "default" | "sm";
+  className?: string | undefined;
+}) => (
+  <ToneBadge
+    tone={STATUS_TONE[type]}
+    size={size}
+    className={clsx("inline-flex max-w-full items-center gap-0.5", className)}
+  >
+    <span className="truncate">{type}</span>
+    {!compact && reason ? (
+      <span className="truncate opacity-70">· {reason}</span>
+    ) : null}
+  </ToneBadge>
+);

package/src/views/message/ToolCallView.tsx

@@ -0,0 +1,151 @@
+import clsx from "clsx";
+import { JSONTree, ToneBadge } from "../ui";
+import { PartDisclosure } from "./PartDisclosure";
+import { StatusBadge } from "./StatusBadge";
+import type { ToolCallPartPreview } from "./types";
+
+const isAwaiting = (part: ToolCallPartPreview) =>
+  part.status?.type === "requires-action" ||
+  part.interrupt !== undefined ||
+  (part.approval !== undefined && part.approval.approved === undefined);
+
+const sameAsArgsJson = (part: ToolCallPartPreview) => {
+  if (part.argsText === undefined) return false;
+  try {
+    return part.argsText.trim() === JSON.stringify(part.args);
+  } catch {
+    return false;
+  }
+};
+
+export const ToolCallView = ({
+  part,
+  nested = false,
+}: {
+  part: ToolCallPartPreview;
+  nested?: boolean;
+}) => {
+  const awaiting = isAwaiting(part);
+
+  return (
+    <details
+      open={awaiting}
+      className={clsx(
+        "group",
+        !nested && "border-border overflow-hidden rounded-md border",
+      )}
+    >
+      <summary className="hover:bg-accent/40 flex cursor-pointer list-none items-center gap-1.5 px-2 py-1.5 text-[11px] select-none">
+        <span className="text-muted-foreground inline-block shrink-0 transition-transform group-open:rotate-90">
+          ›
+        </span>
+        <span className="text-foreground min-w-0 flex-1 truncate font-medium">
+          {part.toolName}
+        </span>
+        {part.status ? (
+          <StatusBadge
+            type={part.status.type}
+            reason={part.status.reason}
+            compact
+            size="sm"
+          />
+        ) : null}
+        {part.isError ? (
+          <StatusBadge type="incomplete" reason="error" compact size="sm" />
+        ) : null}
+        {part.mcp !== undefined ? (
+          <ToneBadge tone="violet" size="sm">
+            mcp
+          </ToneBadge>
+        ) : null}
+      </summary>
+
+      <div className="border-border flex flex-col gap-0.5 border-t px-2 py-1">
+        {awaiting ? (
+          <div className="bg-muted/50 rounded border px-2 py-1.5 text-[10px]">
+            <ToneBadge tone="amber" size="sm">
+              {part.approval ? "Awaiting approval" : "Awaiting human input"}
+            </ToneBadge>
+            {part.approval ? (
+              <div className="text-muted-foreground mt-1 flex flex-wrap gap-x-2 gap-y-0.5">
+                {part.approval.id ? <span>id: {part.approval.id}</span> : null}
+                <span>
+                  approved:{" "}
+                  {part.approval.approved === undefined
+                    ? "pending"
+                    : String(part.approval.approved)}
+                </span>
+                {part.approval.isAutomatic !== undefined ? (
+                  <span>auto: {String(part.approval.isAutomatic)}</span>
+                ) : null}
+                {part.approval.reason ? (
+                  <span>{part.approval.reason}</span>
+                ) : null}
+              </div>
+            ) : null}
+            {part.interrupt?.payload !== undefined ? (
+              <div className="mt-1">
+                <JSONTree
+                  value={part.interrupt.payload}
+                  openDepth={0}
+                  compact
+                />
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        {part.toolCallId ? (
+          <PartDisclosure label="Call id">
+            <span className="text-muted-foreground font-mono text-[10px] break-all">
+              {part.toolCallId}
+            </span>
+          </PartDisclosure>
+        ) : null}
+
+        <PartDisclosure label="Arguments">
+          <JSONTree value={part.args} openDepth={0} compact />
+        </PartDisclosure>
+
+        {part.argsText !== undefined && !sameAsArgsJson(part) ? (
+          <PartDisclosure label="Raw args">
+            <pre className="text-foreground font-mono text-[10px] leading-snug break-words whitespace-pre-wrap">
+              {part.argsText}
+            </pre>
+          </PartDisclosure>
+        ) : null}
+
+        {part.result !== undefined ? (
+          <PartDisclosure label={part.isError ? "Result (error)" : "Result"}>
+            <JSONTree value={part.result} openDepth={0} compact />
+          </PartDisclosure>
+        ) : null}
+
+        {part.artifact !== undefined ? (
+          <PartDisclosure label="Artifact">
+            <JSONTree value={part.artifact} openDepth={0} compact />
+          </PartDisclosure>
+        ) : null}
+
+        {part.modelContent !== undefined ? (
+          <PartDisclosure label="Model content">
+            <JSONTree value={part.modelContent} openDepth={0} compact />
+          </PartDisclosure>
+        ) : null}
+
+        {part.mcp !== undefined ? (
+          <PartDisclosure label="MCP">
+            <JSONTree value={part.mcp} openDepth={0} compact />
+          </PartDisclosure>
+        ) : null}
+
+        {part.subMessageCount > 0 ? (
+          <span className="text-muted-foreground text-[10px]">
+            {part.subMessageCount} nested sub-agent message
+            {part.subMessageCount === 1 ? "" : "s"}
+          </span>
+        ) : null}
+      </div>
+    </details>
+  );
+};

package/src/views/message/TtftBar.tsx

@@ -0,0 +1,44 @@
+import { formatMs } from "../../utils/common";
+import type { MessageTimingPreview } from "./types";
+
+/**
+ * Splits a model turn into the time-to-first-token segment (dim) and the
+ * streaming segment (solid). The only width-bearing timing form: both numbers
+ * are measured, not derived. Renders nothing unless all three timestamps exist.
+ */
+export const TtftBar = ({ timing }: { timing: MessageTimingPreview }) => {
+  const { streamStartTime, firstTokenTime, totalStreamTime } = timing;
+  if (
+    streamStartTime === undefined ||
+    firstTokenTime === undefined ||
+    totalStreamTime === undefined
+  ) {
+    return null;
+  }
+
+  const ttft = Math.max(0, firstTokenTime - streamStartTime);
+  const total = Math.max(totalStreamTime, ttft);
+  const stream = Math.max(0, total - ttft);
+  const ttftPercent = total > 0 ? (ttft / total) * 100 : 0;
+
+  return (
+    <div className="flex flex-col gap-0.5">
+      <div className="text-muted-foreground flex justify-between text-[9px] leading-none tabular-nums">
+        <span>TTFT {formatMs(ttft)}</span>
+        <span>{formatMs(stream)} stream</span>
+      </div>
+      <div className="bg-muted flex h-1 overflow-hidden rounded-full">
+        <div
+          className="bg-muted-foreground/40 h-full"
+          style={{ width: `${ttftPercent}%` }}
+          title={`TTFT ${formatMs(ttft)}`}
+        />
+        <div
+          className="bg-primary h-full"
+          style={{ width: `${100 - ttftPercent}%` }}
+          title={`stream ${formatMs(stream)}`}
+        />
+      </div>
+    </div>
+  );
+};

package/src/views/message/index.ts

@@ -0,0 +1,5 @@
+export { MessageList } from "./MessageList";
+export { MessageDetailBody, messageDetailHeader } from "./MessageDetailPane";
+export { StatusBadge } from "./StatusBadge";
+export { parseMessage } from "./parse";
+export type { MessagePreview, PartPreview } from "./types";

package/src/views/message/messagePlainText.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { messagePlainText } from "./messagePlainText";
+import type { MessagePreview } from "./types";
+
+const message = (parts: MessagePreview["parts"]): MessagePreview => ({
+  id: "m1",
+  role: "assistant",
+  parts,
+  attachments: [],
+});
+
+describe("messagePlainText", () => {
+  it("joins text parts with blank lines", () => {
+    expect(
+      messagePlainText(
+        message([
+          { type: "text", text: "Hello" },
+          { type: "text", text: "World" },
+        ]),
+      ),
+    ).toBe("Hello\n\nWorld");
+  });
+
+  it("includes reasoning and tool blocks", () => {
+    const text = messagePlainText(
+      message([
+        { type: "reasoning", text: "thinking…" },
+        {
+          type: "tool-call",
+          toolCallId: "c1",
+          toolName: "getWeather",
+          args: { city: "SF" },
+          result: { temp: 18 },
+          subMessageCount: 0,
+        },
+        { type: "text", text: "It is 18°." },
+      ]),
+    );
+    expect(text).toContain("thinking…");
+    expect(text).toContain("[tool] getWeather");
+    expect(text).toContain('"city": "SF"');
+    expect(text).toContain("It is 18°.");
+  });
+
+  it("returns empty string when there is no copyable content", () => {
+    expect(messagePlainText(message([]))).toBe("");
+  });
+});

package/src/views/message/messagePlainText.ts

@@ -0,0 +1,65 @@
+import type { MessagePreview, PartPreview } from "./types";
+
+const stringify = (value: unknown): string => {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+};
+
+const partPlainText = (part: PartPreview): string | null => {
+  switch (part.type) {
+    case "text":
+    case "reasoning": {
+      const text = part.text.trim();
+      return text || null;
+    }
+    case "tool-call": {
+      const lines = [`[tool] ${part.toolName}`];
+      if (part.args !== undefined && part.args !== null) {
+        lines.push(`args: ${stringify(part.args)}`);
+      }
+      if (part.result !== undefined) {
+        lines.push(`result: ${stringify(part.result)}`);
+      }
+      return lines.join("\n");
+    }
+    case "source":
+      return part.title ?? part.url ?? part.sourceType ?? null;
+    case "image":
+      return part.filename ? `[image] ${part.filename}` : "[image]";
+    case "file":
+      return part.filename ? `[file] ${part.filename}` : "[file]";
+    case "audio":
+      return part.format ? `[audio] ${part.format}` : "[audio]";
+    case "data":
+      return `[data${part.name ? `: ${part.name}` : ""}]\n${stringify(part.data)}`;
+    case "generative-ui":
+      return `[generative-ui]\n${stringify(part.spec)}`;
+    default:
+      return `[${part.rawType || "unknown"}]\n${stringify(part.raw)}`;
+  }
+};
+
+/** Plain-text export of a message for clipboard copy. */
+export const messagePlainText = (message: MessagePreview): string => {
+  const blocks: string[] = [];
+
+  if (message.attachments.length) {
+    blocks.push(
+      message.attachments
+        .map((attachment) => `[attachment] ${attachment.name}`)
+        .join("\n"),
+    );
+  }
+
+  blocks.push(
+    ...message.parts
+      .map(partPlainText)
+      .filter((block): block is string => Boolean(block)),
+  );
+
+  return blocks.join("\n\n");
+};