@assistant-ui/react-devtools 1.2.6 → 1.2.7

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

@@ -0,0 +1,269 @@
+import { describe, expect, it } from "vitest";
+import { parseMessage, parsePart, parsePartStatus, partKey } from "./parse";
+
+describe("parsePartStatus", () => {
+  it("reads type and reason", () => {
+    expect(parsePartStatus({ type: "incomplete", reason: "error" })).toEqual({
+      type: "incomplete",
+      reason: "error",
+    });
+  });
+
+  it("returns undefined for non-records and typeless values", () => {
+    expect(parsePartStatus(undefined)).toBeUndefined();
+    expect(parsePartStatus({ reason: "error" })).toBeUndefined();
+  });
+});
+
+describe("parsePart", () => {
+  it("parses a text part with status", () => {
+    const part = parsePart({
+      type: "text",
+      text: "hello",
+      status: { type: "complete" },
+    });
+    expect(part).toEqual({
+      type: "text",
+      text: "hello",
+      status: { type: "complete" },
+    });
+  });
+
+  it("parses a completed tool-call with result", () => {
+    const part = parsePart({
+      type: "tool-call",
+      toolCallId: "call_1",
+      toolName: "search",
+      args: { query: "weather" },
+      argsText: '{"query":"weather"}',
+      result: { temperature: 20 },
+      status: { type: "complete" },
+    });
+    expect(part).toMatchObject({
+      type: "tool-call",
+      toolName: "search",
+      toolCallId: "call_1",
+      result: { temperature: 20 },
+      argsText: '{"query":"weather"}',
+      subMessageCount: 0,
+    });
+  });
+
+  it("surfaces a pending approval gate", () => {
+    const part = parsePart({
+      type: "tool-call",
+      toolCallId: "call_2",
+      toolName: "deleteFile",
+      args: {},
+      approval: { id: "appr_1" },
+      status: { type: "requires-action", reason: "interrupt" },
+    });
+    expect(part.type).toBe("tool-call");
+    if (part.type !== "tool-call") return;
+    expect(part.approval).toEqual({ id: "appr_1" });
+    expect(part.approval?.approved).toBeUndefined();
+    expect(part.status).toEqual({
+      type: "requires-action",
+      reason: "interrupt",
+    });
+  });
+
+  it("surfaces a human interrupt payload and error result", () => {
+    const part = parsePart({
+      type: "tool-call",
+      toolCallId: "call_3",
+      toolName: "askUser",
+      args: {},
+      isError: true,
+      result: "boom",
+      interrupt: { type: "human", payload: { question: "name?" } },
+    });
+    if (part.type !== "tool-call") throw new Error("expected tool-call");
+    expect(part.isError).toBe(true);
+    expect(part.result).toBe("boom");
+    expect(part.interrupt).toEqual({
+      type: "human",
+      payload: { question: "name?" },
+    });
+  });
+
+  it("counts nested sub-agent messages", () => {
+    const part = parsePart({
+      type: "tool-call",
+      toolCallId: "call_4",
+      toolName: "subAgent",
+      args: {},
+      messages: [{ role: "assistant" }, { role: "user" }],
+    });
+    if (part.type !== "tool-call") throw new Error("expected tool-call");
+    expect(part.subMessageCount).toBe(2);
+  });
+
+  it("falls back to unknown for unrecognized part types", () => {
+    const part = parsePart({ type: "mystery", foo: 1 });
+    expect(part.type).toBe("unknown");
+    if (part.type !== "unknown") return;
+    expect(part.rawType).toBe("mystery");
+  });
+
+  it("drops empty interrupt/approval objects so completed calls do not look pending", () => {
+    const part = parsePart({
+      type: "tool-call",
+      toolCallId: "c0",
+      toolName: "done",
+      args: {},
+      result: {},
+      interrupt: {},
+      approval: {},
+      status: { type: "complete" },
+    });
+    if (part.type !== "tool-call") throw new Error("expected tool-call");
+    expect(part.interrupt).toBeUndefined();
+    expect(part.approval).toBeUndefined();
+  });
+
+  it("preserves an empty argsText for finished zero-argument tool calls", () => {
+    const part = parsePart({
+      type: "tool-call",
+      toolCallId: "c5",
+      toolName: "noArgs",
+      args: {},
+      argsText: "",
+      status: { type: "complete" },
+    });
+    if (part.type !== "tool-call") throw new Error("expected tool-call");
+    expect(part.argsText).toBe("");
+  });
+});
+
+describe("partKey", () => {
+  it("keys tool-calls by toolCallId and other parts by index", () => {
+    expect(
+      partKey(
+        {
+          type: "tool-call",
+          toolCallId: "abc",
+          toolName: "x",
+          args: {},
+          subMessageCount: 0,
+        },
+        3,
+      ),
+    ).toBe("tc:abc");
+    expect(partKey({ type: "text", text: "hi" }, 3)).toBe("p:3");
+  });
+});
+
+describe("parseMessage", () => {
+  it("parses an enriched assistant message end to end", () => {
+    const message = parseMessage(
+      {
+        id: "msg_1",
+        role: "assistant",
+        createdAt: "2026-06-08T10:00:00.000Z",
+        status: { type: "complete", reason: "stop" },
+        branchNumber: 2,
+        branchCount: 3,
+        index: 1,
+        isLast: true,
+        parts: [
+          { type: "reasoning", text: "thinking", status: { type: "complete" } },
+          {
+            type: "tool-call",
+            toolCallId: "c1",
+            toolName: "search",
+            args: {},
+            result: {},
+            status: { type: "complete" },
+          },
+          { type: "text", text: "done", status: { type: "complete" } },
+        ],
+        metadata: {
+          timing: {
+            streamStartTime: 1000,
+            firstTokenTime: 1200,
+            totalStreamTime: 800,
+            tokenCount: 40,
+            tokensPerSecond: 50,
+            totalChunks: 12,
+            toolCallCount: 1,
+          },
+          steps: [
+            { usage: { inputTokens: 100, outputTokens: 20 } },
+            { usage: { inputTokens: 30, outputTokens: 10 } },
+          ],
+          isOptimistic: false,
+          custom: {},
+        },
+      },
+      0,
+    );
+
+    expect(message).not.toBeNull();
+    if (!message) return;
+    expect(message.id).toBe("msg_1");
+    expect(message.role).toBe("assistant");
+    expect(message.parts).toHaveLength(3);
+    expect(message.parts.map((p) => p.type)).toEqual([
+      "reasoning",
+      "tool-call",
+      "text",
+    ]);
+    expect(message.status).toEqual({ type: "complete", reason: "stop" });
+    expect(message.branchNumber).toBe(2);
+    expect(message.branchCount).toBe(3);
+    expect(message.index).toBe(1);
+    expect(message.timing?.firstTokenTime).toBe(1200);
+    expect(message.usage).toEqual({
+      inputTokens: 130,
+      outputTokens: 30,
+      stepCount: 2,
+    });
+  });
+
+  it("falls back to content[] when parts[] is absent (raw user message)", () => {
+    const message = parseMessage(
+      {
+        id: "msg_2",
+        role: "user",
+        createdAt: "2026-06-08T10:01:00.000Z",
+        content: [{ type: "text", text: "hi" }],
+        attachments: [{ name: "photo.png" }],
+        metadata: { custom: {} },
+      },
+      0,
+    );
+    if (!message) return;
+    expect(message.parts).toHaveLength(1);
+    expect(message.parts[0]?.type).toBe("text");
+    expect(message.attachments).toEqual([
+      expect.objectContaining({ name: "photo.png" }),
+    ]);
+    expect(message.status).toBeUndefined();
+    expect(message.usage).toBeUndefined();
+  });
+
+  it("captures an incomplete message error", () => {
+    const message = parseMessage(
+      {
+        id: "msg_3",
+        role: "assistant",
+        status: { type: "incomplete", reason: "error", error: "rate limited" },
+        parts: [],
+        metadata: { custom: {} },
+      },
+      0,
+    );
+    if (!message) return;
+    expect(message.status).toEqual({
+      type: "incomplete",
+      reason: "error",
+      error: "rate limited",
+    });
+  });
+
+  it("returns null for non-records", () => {
+    expect(parseMessage(null, 0)).toBeNull();
+    expect(parseMessage("nope", 0)).toBeNull();
+  });
+});

package/src/views/message/parse.ts

@@ -0,0 +1,282 @@
+import { parseAttachments } from "../attachments/parseAttachment";
+import {
+  estimateBase64Bytes,
+  isSafeImagePreviewUrl,
+} from "../attachments/formatBytes";
+import { asBool, asNumber, asString, isRecord } from "../../utils/common";
+import type {
+  MessagePreview,
+  MessageTimingPreview,
+  MessageUsagePreview,
+  PartPreview,
+  PartStatusPreview,
+  ToolCallApprovalPreview,
+  ToolCallInterruptPreview,
+  ToolCallPartPreview,
+} from "./types";
+
+export const partKey = (part: PartPreview, index: number) =>
+  part.type === "tool-call" && part.toolCallId
+    ? `tc:${part.toolCallId}`
+    : `p:${index}`;
+
+export const parsePartStatus = (
+  value: unknown,
+): PartStatusPreview | undefined => {
+  if (!isRecord(value)) return undefined;
+  const type = asString(value.type);
+  if (!type) return undefined;
+  const reason = asString(value.reason);
+  return {
+    type,
+    ...(reason ? { reason } : {}),
+    ...("error" in value && value.error !== undefined
+      ? { error: value.error }
+      : {}),
+  };
+};
+
+const parseInterrupt = (
+  value: unknown,
+): ToolCallInterruptPreview | undefined => {
+  if (!isRecord(value)) return undefined;
+  const type = asString(value.type);
+  const result: ToolCallInterruptPreview = {
+    ...(type ? { type } : {}),
+    ...("payload" in value ? { payload: value.payload } : {}),
+  };
+  return Object.keys(result).length > 0 ? result : undefined;
+};
+
+const parseApproval = (value: unknown): ToolCallApprovalPreview | undefined => {
+  if (!isRecord(value)) return undefined;
+  const id = asString(value.id);
+  const approved = asBool(value.approved);
+  const reason = asString(value.reason);
+  const isAutomatic = asBool(value.isAutomatic);
+  const result: ToolCallApprovalPreview = {
+    ...(id ? { id } : {}),
+    ...(approved !== undefined ? { approved } : {}),
+    ...(reason ? { reason } : {}),
+    ...(isAutomatic !== undefined ? { isAutomatic } : {}),
+  };
+  return Object.keys(result).length > 0 ? result : undefined;
+};
+
+const parseToolCall = (
+  value: Record<string, unknown>,
+  base: { status?: PartStatusPreview },
+): ToolCallPartPreview => {
+  const argsText = asString(value.argsText);
+  const isError = asBool(value.isError);
+  const interrupt = parseInterrupt(value.interrupt);
+  const approval = parseApproval(value.approval);
+  const subMessageCount = Array.isArray(value.messages)
+    ? value.messages.length
+    : 0;
+
+  return {
+    type: "tool-call",
+    toolCallId: asString(value.toolCallId) ?? "",
+    toolName: asString(value.toolName) ?? "(unknown)",
+    args: value.args,
+    subMessageCount,
+    ...(argsText !== undefined ? { argsText } : {}),
+    ...("result" in value && value.result !== undefined
+      ? { result: value.result }
+      : {}),
+    ...(isError !== undefined ? { isError } : {}),
+    ...(value.artifact !== undefined ? { artifact: value.artifact } : {}),
+    ...(value.mcp !== undefined ? { mcp: value.mcp } : {}),
+    ...(value.modelContent !== undefined
+      ? { modelContent: value.modelContent }
+      : {}),
+    ...(interrupt ? { interrupt } : {}),
+    ...(approval ? { approval } : {}),
+    ...base,
+  };
+};
+
+export const parsePart = (value: unknown): PartPreview => {
+  if (!isRecord(value)) {
+    return { type: "unknown", rawType: typeof value, raw: value };
+  }
+
+  const status = parsePartStatus(value.status);
+  const base = status ? { status } : {};
+  const type = asString(value.type);
+
+  switch (type) {
+    case "text":
+      return { type: "text", text: asString(value.text) ?? "", ...base };
+    case "reasoning":
+      return { type: "reasoning", text: asString(value.text) ?? "", ...base };
+    case "source": {
+      const sourceType = asString(value.sourceType);
+      const title = asString(value.title);
+      const url = asString(value.url);
+      return {
+        type: "source",
+        ...(sourceType ? { sourceType } : {}),
+        ...(title ? { title } : {}),
+        ...(url ? { url } : {}),
+        ...base,
+      };
+    }
+    case "image": {
+      const filename = asString(value.filename);
+      const image = asString(value.image);
+      const previewUrl =
+        image && isSafeImagePreviewUrl(image) ? image : undefined;
+      const sizeBytes = previewUrl?.startsWith("data:")
+        ? estimateBase64Bytes(previewUrl.split(",", 2)[1] ?? previewUrl)
+        : undefined;
+      return {
+        type: "image",
+        ...(filename ? { filename } : {}),
+        ...(previewUrl ? { previewUrl } : {}),
+        ...(sizeBytes !== undefined ? { sizeBytes } : {}),
+        ...base,
+      };
+    }
+    case "file": {
+      const filename = asString(value.filename);
+      const mimeType = asString(value.mimeType);
+      const data = asString(value.data);
+      const sizeBytes = data ? estimateBase64Bytes(data) : undefined;
+      return {
+        type: "file",
+        ...(filename ? { filename } : {}),
+        ...(mimeType ? { mimeType } : {}),
+        ...(sizeBytes !== undefined ? { sizeBytes } : {}),
+        ...base,
+      };
+    }
+    case "audio": {
+      const audio = isRecord(value.audio) ? value.audio : undefined;
+      const format = asString(audio?.format);
+      const audioData = asString(audio?.data);
+      const sizeBytes = audioData ? estimateBase64Bytes(audioData) : undefined;
+      return {
+        type: "audio",
+        ...(format ? { format } : {}),
+        ...(sizeBytes !== undefined ? { sizeBytes } : {}),
+        ...base,
+      };
+    }
+    case "data": {
+      const name = asString(value.name);
+      return {
+        type: "data",
+        data: value.data,
+        ...(name ? { name } : {}),
+        ...base,
+      };
+    }
+    case "generative-ui":
+      return { type: "generative-ui", spec: value.spec, ...base };
+    case "tool-call":
+      return parseToolCall(value, base);
+    default:
+      return {
+        type: "unknown",
+        rawType: type ?? typeof value,
+        raw: value,
+        ...base,
+      };
+  }
+};
+
+const parseTiming = (value: unknown): MessageTimingPreview | undefined => {
+  if (!isRecord(value)) return undefined;
+
+  const streamStartTime = asNumber(value.streamStartTime);
+  const firstTokenTime = asNumber(value.firstTokenTime);
+  const totalStreamTime = asNumber(value.totalStreamTime);
+  const tokenCount = asNumber(value.tokenCount);
+  const tokensPerSecond = asNumber(value.tokensPerSecond);
+  const totalChunks = asNumber(value.totalChunks);
+  const toolCallCount = asNumber(value.toolCallCount);
+
+  const result: MessageTimingPreview = {
+    ...(streamStartTime !== undefined ? { streamStartTime } : {}),
+    ...(firstTokenTime !== undefined ? { firstTokenTime } : {}),
+    ...(totalStreamTime !== undefined ? { totalStreamTime } : {}),
+    ...(tokenCount !== undefined ? { tokenCount } : {}),
+    ...(tokensPerSecond !== undefined ? { tokensPerSecond } : {}),
+    ...(totalChunks !== undefined ? { totalChunks } : {}),
+    ...(toolCallCount !== undefined ? { toolCallCount } : {}),
+  };
+  return Object.keys(result).length > 0 ? result : undefined;
+};
+
+const parseUsage = (value: unknown): MessageUsagePreview | undefined => {
+  if (!Array.isArray(value) || value.length === 0) return undefined;
+
+  let inputTokens = 0;
+  let outputTokens = 0;
+  let sawUsage = false;
+
+  for (const step of value) {
+    if (!isRecord(step) || !isRecord(step.usage)) continue;
+    const input = asNumber(step.usage.inputTokens);
+    const output = asNumber(step.usage.outputTokens);
+    if (input !== undefined) {
+      inputTokens += input;
+      sawUsage = true;
+    }
+    if (output !== undefined) {
+      outputTokens += output;
+      sawUsage = true;
+    }
+  }
+
+  if (!sawUsage) return undefined;
+  return { inputTokens, outputTokens, stepCount: value.length };
+};
+
+export const parseMessage = (
+  value: unknown,
+  index: number,
+): MessagePreview | null => {
+  if (!isRecord(value)) return null;
+
+  const id = asString(value.id) ?? `message-${index}`;
+  const role = asString(value.role) ?? "unknown";
+
+  const rawParts = Array.isArray(value.parts)
+    ? value.parts
+    : Array.isArray(value.content)
+      ? value.content
+      : [];
+  const parts = rawParts.map((part) => parsePart(part));
+
+  const status = parsePartStatus(value.status);
+  const metadata = isRecord(value.metadata) ? value.metadata : undefined;
+  const timing = parseTiming(metadata?.timing);
+  const usage = parseUsage(metadata?.steps);
+  const submittedFeedback = isRecord(metadata?.submittedFeedback)
+    ? asString(metadata.submittedFeedback.type)
+    : undefined;
+  const isOptimistic = asBool(metadata?.isOptimistic);
+  const createdAt = asString(value.createdAt);
+  const branchNumber = asNumber(value.branchNumber);
+  const branchCount = asNumber(value.branchCount);
+  const messageIndex = asNumber(value.index);
+
+  return {
+    id,
+    role,
+    parts,
+    attachments: parseAttachments(value.attachments),
+    ...(createdAt ? { createdAt } : {}),
+    ...(status ? { status } : {}),
+    ...(timing ? { timing } : {}),
+    ...(usage ? { usage } : {}),
+    ...(branchNumber !== undefined ? { branchNumber } : {}),
+    ...(branchCount !== undefined ? { branchCount } : {}),
+    ...(messageIndex !== undefined ? { index: messageIndex } : {}),
+    ...(isOptimistic !== undefined ? { isOptimistic } : {}),
+    ...(submittedFeedback ? { submittedFeedback } : {}),
+  };
+};

package/src/views/message/render.test.tsx

@@ -0,0 +1,128 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { MessageItem } from "./MessageItem";
+import { MessageList } from "./MessageList";
+import { parseMessage } from "./parse";
+import type { MessagePreview } from "./types";
+
+const parsed = (value: unknown): MessagePreview => {
+  const message = parseMessage(value, 0);
+  if (!message) throw new Error("fixture failed to parse");
+  return message;
+};
+
+describe("MessageItem rendering", () => {
+  it("renders reasoning + tool-call grouped as chain of thought, plus text", () => {
+    const message = parsed({
+      id: "m1",
+      role: "assistant",
+      status: { type: "complete", reason: "stop" },
+      branchNumber: 1,
+      branchCount: 2,
+      parts: [
+        {
+          type: "reasoning",
+          text: "let me think",
+          status: { type: "complete" },
+        },
+        {
+          type: "tool-call",
+          toolCallId: "c1",
+          toolName: "getWeather",
+          args: { city: "SF" },
+          result: { temp: 18 },
+          status: { type: "complete" },
+        },
+        {
+          type: "text",
+          text: "It is 18 degrees.",
+          status: { type: "complete" },
+        },
+      ],
+      metadata: {
+        timing: {
+          streamStartTime: 0,
+          firstTokenTime: 150,
+          totalStreamTime: 900,
+        },
+        steps: [{ usage: { inputTokens: 50, outputTokens: 12 } }],
+        custom: {},
+      },
+    });
+
+    const html = renderToStaticMarkup(<MessageItem message={message} />);
+    expect(html).toContain("getWeather");
+    expect(html).toContain("cot");
+    expect(html).toContain("It is 18 degrees.");
+    expect(html).toContain("branch 1/2");
+    expect(html).toContain("TTFT");
+  });
+
+  it("renders interleaved tool and text parts in order", () => {
+    const message = parsed({
+      id: "m3",
+      role: "assistant",
+      status: { type: "complete", reason: "stop" },
+      parts: [
+        {
+          type: "tool-call",
+          toolCallId: "c1",
+          toolName: "search",
+          args: { q: "x" },
+          status: { type: "complete" },
+        },
+        { type: "text", text: "Partial update.", status: { type: "complete" } },
+        {
+          type: "tool-call",
+          toolCallId: "c2",
+          toolName: "summarize",
+          args: {},
+          status: { type: "complete" },
+        },
+        {
+          type: "text",
+          text: "Done.",
+          status: { type: "complete" },
+        },
+      ],
+      metadata: { custom: {} },
+    });
+
+    const html = renderToStaticMarkup(<MessageItem message={message} />);
+    expect(html.indexOf("search")).toBeLessThan(
+      html.indexOf("Partial update."),
+    );
+    expect(html.indexOf("Partial update.")).toBeLessThan(
+      html.indexOf("summarize"),
+    );
+    expect(html.indexOf("summarize")).toBeLessThan(html.indexOf("Done."));
+  });
+
+  it("renders a pending approval gate prominently", () => {
+    const message = parsed({
+      id: "m2",
+      role: "assistant",
+      status: { type: "requires-action", reason: "tool-calls" },
+      parts: [
+        {
+          type: "tool-call",
+          toolCallId: "c2",
+          toolName: "deleteAll",
+          args: {},
+          approval: { id: "appr_9" },
+          status: { type: "requires-action", reason: "interrupt" },
+        },
+      ],
+      metadata: { custom: {} },
+    });
+
+    const html = renderToStaticMarkup(<MessageItem message={message} />);
+    expect(html).toContain("Awaiting approval");
+    expect(html).toContain("appr_9");
+  });
+
+  it("renders an empty message list placeholder", () => {
+    const html = renderToStaticMarkup(<MessageList messages={[]} />);
+    expect(html).toContain("No messages");
+  });
+});