@assistant-ui/react-devtools 1.2.6 → 1.2.7

package/src/views/thread/Transcript.tsx

@@ -0,0 +1,332 @@
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { truncate } from "../../utils/common";
+import { StatusBadge } from "../message";
+import type { MessagePreview, PartPreview } from "../message";
+import { messageStepCount } from "../message/MessageTimeline";
+import { RoleLabel } from "../message/RoleLabel";
+import {
+  Chip,
+  PaneHeader,
+  PaneHeaderStack,
+  RailTime,
+  RAIL_STATUS_BADGE_CLASS,
+  SelectableRow,
+  Sparkline,
+  ToneBadge,
+} from "../ui";
+import type { ComposerPreview, ThreadPreview } from "./types";
+
+interface MetricSeries {
+  label: string;
+  values: number[];
+  format: (value: number) => string;
+}
+
+export const messageNodeId = (id: string) => `msg:${id}`;
+
+const formatTokens = (value: number) =>
+  value >= 1000 ? `${(value / 1000).toFixed(1)}k` : String(value);
+
+const textOf = (parts: readonly PartPreview[]) =>
+  parts
+    .filter(
+      (part): part is Extract<PartPreview, { type: "text" }> =>
+        part.type === "text",
+    )
+    .map((part) => part.text)
+    .join("\n")
+    .trim();
+
+const rowSummary = (message: MessagePreview) => {
+  const text = textOf(message.parts);
+  if (text) return truncate(text, 72);
+  const tool = message.parts.find(
+    (part): part is Extract<PartPreview, { type: "tool-call" }> =>
+      part.type === "tool-call",
+  );
+  if (tool) return tool.toolName;
+  return "—";
+};
+
+const rowStepHint = (message: MessagePreview) => {
+  const { tools, texts } = messageStepCount(message.parts);
+  const hints: string[] = [];
+  if (tools > 1) hints.push(`${tools} tools`);
+  if (texts > 1) hints.push(`${texts} msgs`);
+  return hints.length ? hints.join(" · ") : null;
+};
+
+const railStatus = (message: MessagePreview) => {
+  if (message.isOptimistic) return null;
+  if (!message.status || message.status.type === "complete") return null;
+  return message.status;
+};
+
+const railAttachmentCount = (message: MessagePreview) => {
+  if (message.attachments.length > 0) return message.attachments.length;
+  return message.parts.filter(
+    (part) =>
+      part.type === "image" || part.type === "file" || part.type === "audio",
+  ).length;
+};
+
+const TurnRow = memo(function TurnRow({
+  message,
+  selected,
+  nodeId,
+  onSelect,
+  rowRef,
+}: {
+  message: MessagePreview;
+  selected: boolean;
+  nodeId: string;
+  onSelect: (nodeId: string) => void;
+  rowRef?: React.Ref<HTMLButtonElement> | undefined;
+}) {
+  const status = railStatus(message);
+  const summary = rowSummary(message);
+  const stepHint = rowStepHint(message);
+  const attachmentCount = railAttachmentCount(message);
+
+  return (
+    <SelectableRow
+      ref={rowRef}
+      selected={selected}
+      onSelect={() => onSelect(nodeId)}
+      dense
+    >
+      <div
+        className="flex h-10 flex-col justify-center gap-0.5"
+        title={stepHint ? `${stepHint}\n${summary}` : summary}
+      >
+        <div className="flex min-w-0 items-center justify-between gap-2">
+          <div className="flex min-w-0 items-center gap-1.5">
+            <RoleLabel role={message.role} compact />
+            {message.isOptimistic ? (
+              <ToneBadge
+                tone="amber"
+                size="sm"
+                className={RAIL_STATUS_BADGE_CLASS}
+              >
+                opt
+              </ToneBadge>
+            ) : status ? (
+              <StatusBadge
+                type={status.type}
+                reason={"reason" in status ? status.reason : undefined}
+                compact
+                size="sm"
+                className={RAIL_STATUS_BADGE_CLASS}
+              />
+            ) : null}
+          </div>
+          <div className="flex shrink-0 items-center gap-1">
+            {attachmentCount > 0 ? (
+              <span
+                className="text-muted-foreground text-[10px] leading-none"
+                title={`${attachmentCount} attachment${attachmentCount === 1 ? "" : "s"}`}
+              >
+                📎{attachmentCount}
+              </span>
+            ) : null}
+            <RailTime value={message.createdAt} />
+          </div>
+        </div>
+        <p className="text-foreground min-w-0 truncate text-[12px] leading-tight">
+          {stepHint ? (
+            <span className="text-muted-foreground">{stepHint} · </span>
+          ) : null}
+          {summary}
+        </p>
+      </div>
+    </SelectableRow>
+  );
+});
+
+const GhostComposer = ({ composer }: { composer: ComposerPreview }) => (
+  <div className="border-border text-muted-foreground flex items-center gap-2 border-t px-3 py-2 text-[11px]">
+    <span className="text-foreground font-medium">draft</span>
+    <span>{composer.role ?? "user"}</span>
+    <span>· {composer.textLength} chars</span>
+    {composer.canSend ? <Chip>can send</Chip> : null}
+    {composer.queue.length ? <Chip>{composer.queue.length} queued</Chip> : null}
+  </div>
+);
+
+const collect = (
+  messages: readonly MessagePreview[],
+  pick: (message: MessagePreview) => number | undefined,
+): number[] =>
+  messages.map(pick).filter((value): value is number => value !== undefined);
+
+const metricSeries = (messages: readonly MessagePreview[]): MetricSeries[] =>
+  [
+    {
+      label: "tok/s",
+      values: collect(messages, (message) => message.timing?.tokensPerSecond),
+      format: (value: number) => value.toFixed(1),
+    },
+    {
+      label: "TTFT",
+      values: collect(messages, (message) =>
+        message.timing?.firstTokenTime !== undefined &&
+        message.timing?.streamStartTime !== undefined
+          ? message.timing.firstTokenTime - message.timing.streamStartTime
+          : undefined,
+      ),
+      format: (value: number) => `${Math.round(value)}ms`,
+    },
+    {
+      label: "output",
+      values: collect(messages, (message) => message.usage?.outputTokens),
+      format: (value: number) => String(value),
+    },
+  ].filter((series) => series.values.length >= 3);
+
+export const TranscriptHeader = memo(function TranscriptHeader({
+  thread,
+}: {
+  thread: ThreadPreview;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const messages = thread.messages;
+
+  const { stats, series, canExpand } = useMemo(() => {
+    const tools = messages.reduce(
+      (sum, message) =>
+        sum + message.parts.filter((part) => part.type === "tool-call").length,
+      0,
+    );
+    const errors = messages.filter(
+      (message) => message.status?.type === "incomplete",
+    ).length;
+    const tokens = messages.reduce(
+      (sum, message) =>
+        sum +
+        (message.usage
+          ? message.usage.inputTokens + message.usage.outputTokens
+          : 0),
+      0,
+    );
+
+    const statParts = [
+      `${messages.length} msg${messages.length === 1 ? "" : "s"}`,
+      tokens ? `${formatTokens(tokens)} tok` : null,
+      tools ? `${tools} tool${tools === 1 ? "" : "s"}` : null,
+      errors ? `${errors} err` : null,
+    ].filter(Boolean);
+
+    const trendSeries = metricSeries(messages);
+
+    return {
+      stats: statParts,
+      series: trendSeries,
+      canExpand: trendSeries.length > 0,
+    };
+  }, [messages]);
+
+  const titleRow = (
+    <PaneHeader
+      borderless={canExpand && expanded}
+      trailing={
+        <>
+          {thread.isRunning ? (
+            <ToneBadge tone="blue" size="sm">
+              running
+            </ToneBadge>
+          ) : null}
+          {canExpand ? (
+            <button
+              type="button"
+              onClick={() => setExpanded((prev) => !prev)}
+              className="text-muted-foreground hover:text-foreground text-[11px] leading-none"
+            >
+              <span
+                className={clsx(
+                  "inline-block transition-transform",
+                  expanded && "rotate-90",
+                )}
+              >
+                ›
+              </span>{" "}
+              trends
+            </button>
+          ) : null}
+        </>
+      }
+    >
+      {stats.join(" · ")}
+    </PaneHeader>
+  );
+
+  if (canExpand && expanded) {
+    return (
+      <PaneHeaderStack header={titleRow}>
+        {series.map((entry) => (
+          <div
+            key={entry.label}
+            className="flex items-center justify-between gap-3 px-3 py-1.5"
+          >
+            <div className="flex flex-col">
+              <span className="text-muted-foreground text-[10px]">
+                {entry.label}
+              </span>
+              <span className="text-foreground text-[12px] font-medium tabular-nums">
+                {entry.format(entry.values[entry.values.length - 1]!)}
+              </span>
+            </div>
+            <Sparkline values={entry.values} className="h-6 w-24" />
+          </div>
+        ))}
+      </PaneHeaderStack>
+    );
+  }
+
+  return titleRow;
+});
+
+export const Transcript = ({
+  thread,
+  selection,
+  onSelect,
+}: {
+  thread: ThreadPreview;
+  selection: string | null;
+  onSelect: (nodeId: string) => void;
+}) => {
+  const selectedRef = useRef<HTMLButtonElement>(null);
+  const prevSelectionRef = useRef(selection);
+  const handleSelect = useCallback(
+    (nodeId: string) => onSelect(nodeId),
+    [onSelect],
+  );
+
+  useEffect(() => {
+    if (prevSelectionRef.current === selection) return;
+    prevSelectionRef.current = selection;
+    selectedRef.current?.scrollIntoView({ block: "nearest" });
+  }, [selection]);
+
+  return (
+    <>
+      {thread.messages.map((message) => {
+        const nodeId = messageNodeId(message.id);
+        const selected = selection === nodeId;
+        return (
+          <TurnRow
+            key={message.id}
+            message={message}
+            nodeId={nodeId}
+            selected={selected}
+            onSelect={handleSelect}
+            rowRef={selected ? selectedRef : undefined}
+          />
+        );
+      })}
+      {thread.composer && thread.composer.textLength > 0 ? (
+        <GhostComposer composer={thread.composer} />
+      ) : null}
+    </>
+  );
+};

package/src/views/thread/index.ts

@@ -0,0 +1,19 @@
+export { ConversationList, conversationListHeader } from "./ConversationList";
+export { ThreadDetails } from "./ThreadDetails";
+export { Transcript, TranscriptHeader, messageNodeId } from "./Transcript";
+export { ComposerAttachments } from "./ComposerAttachments";
+export { ComposerFlags } from "./ComposerFlags";
+export { ComposerQueue } from "./ComposerQueue";
+export {
+  parseComposerPreview,
+  parseThreadListItemPreview,
+  parseThreadListPreview,
+  parseThreadPreview,
+} from "./utils";
+export { resolveSingleThread, resolveThreadForId } from "./resolve";
+export type {
+  ComposerPreview,
+  ThreadListItemPreview,
+  ThreadListPreview,
+  ThreadPreview,
+} from "./types";

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

@@ -0,0 +1,41 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { ThreadDetails } from "./ThreadDetails";
+import type { ThreadPreview } from "./types";
+
+describe("ThreadDetails composer queue", () => {
+  it("renders the pending message queue and canSend", () => {
+    const thread: ThreadPreview = {
+      messages: [],
+      suggestions: [],
+      capabilities: [],
+      composer: {
+        textLength: 0,
+        attachments: [],
+        canSend: false,
+        queue: [
+          { id: "q1", prompt: "queued one" },
+          { id: "q2", prompt: "queued two" },
+        ],
+      },
+    };
+
+    const html = renderToStaticMarkup(<ThreadDetails thread={thread} />);
+    expect(html).toContain("Message queue (2)");
+    expect(html).toContain("queued one");
+    expect(html).toContain("queued two");
+    expect(html).toContain("Can send");
+  });
+
+  it("omits the queue section when empty", () => {
+    const thread: ThreadPreview = {
+      messages: [],
+      suggestions: [],
+      capabilities: [],
+      composer: { textLength: 0, attachments: [], queue: [] },
+    };
+
+    const html = renderToStaticMarkup(<ThreadDetails thread={thread} />);
+    expect(html).not.toContain("Message queue");
+  });
+});

package/src/views/thread/resolve.ts

@@ -0,0 +1,36 @@
+import { parseThreadListPreview, parseThreadPreview } from "./utils";
+import type { ThreadListPreview, ThreadPreview } from "./types";
+
+/**
+ * Picks the thread to show for a selected conversation id, preferring a cached
+ * snapshot, then the live main thread, then the single-thread runtime state.
+ */
+export const resolveThreadForId = (
+  state: Record<string, unknown>,
+  snapshots: Readonly<Record<string, unknown>> | undefined,
+  threadId: string,
+  threadList: ThreadListPreview | null,
+): ThreadPreview | null => {
+  const fromSnapshot = snapshots?.[threadId];
+  if (fromSnapshot) {
+    const parsed = parseThreadPreview(fromSnapshot);
+    if (parsed) return parsed;
+  }
+  if (threadList?.mainThreadId === threadId && threadList.main) {
+    return threadList.main;
+  }
+  const single = parseThreadPreview(state.thread);
+  if (single && threadList?.threadIds.length === 0) return single;
+  return null;
+};
+
+/** Picks the thread to show when the runtime exposes no conversation list. */
+export const resolveSingleThread = (
+  state: Record<string, unknown>,
+): ThreadPreview | null => {
+  const single = parseThreadPreview(state.thread);
+  if (single && single.messages.length) return single;
+  const list = parseThreadListPreview(state.threads);
+  if (list?.main && list.main.messages.length) return list.main;
+  return single ?? list?.main ?? null;
+};

package/src/views/thread/types.ts

@@ -0,0 +1,53 @@
+import type { MessagePreview } from "../message";
+import type { AttachmentPreview } from "../attachments/types";
+
+export type { AttachmentPreview };
+
+export interface ThreadListItemPreview {
+  id: string;
+  title?: string;
+  status?: string;
+  externalId?: string;
+  remoteId?: string;
+  lastMessageAt?: string;
+}
+
+export interface SuggestionPreview {
+  prompt?: string;
+}
+
+export interface ComposerQueueItem {
+  id?: string;
+  prompt: string;
+}
+
+export interface ComposerPreview {
+  textLength: number;
+  role?: string;
+  attachments: AttachmentPreview[];
+  isEditing?: boolean;
+  canCancel?: boolean;
+  canSend?: boolean;
+  isEmpty?: boolean;
+  type?: string;
+  queue: ComposerQueueItem[];
+}
+
+export interface ThreadPreview {
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  isRunning?: boolean;
+  messages: MessagePreview[];
+  suggestions: SuggestionPreview[];
+  capabilities: string[];
+  composer?: ComposerPreview;
+}
+
+export interface ThreadListPreview {
+  mainThreadId?: string;
+  newThreadId?: string | null;
+  threadIds: string[];
+  archivedThreadIds: string[];
+  threadItems: ThreadListItemPreview[];
+  main?: ThreadPreview;
+}

package/src/views/thread/utils.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it } from "vitest";
+import { parseComposerPreview } from "./utils";
+
+describe("parseComposerPreview", () => {
+  it("extracts the message queue and canSend", () => {
+    const composer = parseComposerPreview({
+      text: "hi",
+      attachments: [],
+      canSend: false,
+      queue: [
+        { id: "q1", prompt: "first" },
+        { id: "q2", prompt: "second" },
+      ],
+    });
+    expect(composer?.canSend).toBe(false);
+    expect(composer?.queue).toEqual([
+      { id: "q1", prompt: "first" },
+      { id: "q2", prompt: "second" },
+    ]);
+  });
+
+  it("drops malformed queue items and keeps prompt-only entries", () => {
+    const composer = parseComposerPreview({
+      text: "",
+      attachments: [],
+      queue: [{ prompt: "ok" }, { id: "x" }, 5, null],
+    });
+    expect(composer?.queue).toEqual([{ prompt: "ok" }]);
+  });
+
+  it("defaults the queue to an empty array when absent", () => {
+    const composer = parseComposerPreview({ text: "", attachments: [] });
+    expect(composer?.queue).toEqual([]);
+  });
+
+  it("parses attachments with kind, contentType, and upload status", () => {
+    const composer = parseComposerPreview({
+      text: "",
+      attachments: [
+        {
+          id: "a1",
+          type: "image",
+          name: "photo.png",
+          contentType: "image/png",
+          status: { type: "running", reason: "uploading", progress: 0.5 },
+        },
+        {
+          id: "a2",
+          type: "file",
+          name: "doc.pdf",
+          status: { type: "complete" },
+        },
+      ],
+    });
+    expect(composer?.attachments).toHaveLength(2);
+    expect(composer?.attachments[0]).toMatchObject({
+      name: "photo.png",
+      kind: "image",
+      contentType: "image/png",
+      status: { type: "running", reason: "uploading", progress: 0.5 },
+    });
+    expect(composer?.attachments[1]?.status).toEqual({ type: "complete" });
+  });
+
+  it("falls back to the id for a nameless attachment", () => {
+    const composer = parseComposerPreview({
+      text: "",
+      attachments: [{ id: "x" }],
+    });
+    expect(composer?.attachments).toEqual([{ name: "x", id: "x" }]);
+  });
+});

package/src/views/thread/utils.ts

@@ -0,0 +1,149 @@
+import { isRecord, isStringArray } from "../../utils/common";
+import { parseAttachments } from "../attachments/parseAttachment";
+import { parseMessage } from "../message";
+import type { MessagePreview } from "../message";
+import type {
+  ComposerPreview,
+  ComposerQueueItem,
+  SuggestionPreview,
+  ThreadListItemPreview,
+  ThreadListPreview,
+  ThreadPreview,
+} from "./types";
+
+const parseSuggestionPreview = (value: unknown): SuggestionPreview | null => {
+  if (!isRecord(value)) return null;
+  if (typeof value.prompt !== "string") return null;
+  return { prompt: value.prompt };
+};
+
+export const parseComposerPreview = (
+  value: unknown,
+): ComposerPreview | undefined => {
+  if (!isRecord(value)) return undefined;
+
+  const text = typeof value.text === "string" ? value.text : "";
+  const attachments = parseAttachments(value.attachments);
+  const queue = Array.isArray(value.queue)
+    ? value.queue
+        .map((item) => {
+          if (!isRecord(item) || typeof item.prompt !== "string") return null;
+          return {
+            prompt: item.prompt,
+            ...(typeof item.id === "string" ? { id: item.id } : {}),
+          };
+        })
+        .filter((item): item is ComposerQueueItem => Boolean(item))
+    : [];
+
+  return {
+    textLength: text.length,
+    attachments,
+    queue,
+    ...(typeof value.role === "string" ? { role: value.role } : {}),
+    ...(typeof value.isEditing === "boolean"
+      ? { isEditing: value.isEditing }
+      : {}),
+    ...(typeof value.canCancel === "boolean"
+      ? { canCancel: value.canCancel }
+      : {}),
+    ...(typeof value.canSend === "boolean" ? { canSend: value.canSend } : {}),
+    ...(typeof value.isEmpty === "boolean" ? { isEmpty: value.isEmpty } : {}),
+    ...(typeof value.type === "string" ? { type: value.type } : {}),
+  };
+};
+
+const parseMessages = (value: unknown): MessagePreview[] =>
+  Array.isArray(value)
+    ? value
+        .map((message, index) => parseMessage(message, index))
+        .filter((message): message is MessagePreview => Boolean(message))
+    : [];
+
+export const parseThreadListItemPreview = (
+  value: unknown,
+): ThreadListItemPreview | null => {
+  if (!isRecord(value) || typeof value.id !== "string") return null;
+
+  return {
+    id: value.id,
+    ...(typeof value.title === "string" ? { title: value.title } : {}),
+    ...(typeof value.status === "string" ? { status: value.status } : {}),
+    ...(typeof value.externalId === "string"
+      ? { externalId: value.externalId }
+      : {}),
+    ...(typeof value.remoteId === "string" ? { remoteId: value.remoteId } : {}),
+    ...(typeof value.lastMessageAt === "string"
+      ? { lastMessageAt: value.lastMessageAt }
+      : value.lastMessageAt instanceof Date
+        ? { lastMessageAt: value.lastMessageAt.toISOString() }
+        : {}),
+  };
+};
+
+export const parseThreadPreview = (value: unknown): ThreadPreview | null => {
+  if (!isRecord(value)) return null;
+
+  const messages = parseMessages(value.messages);
+
+  const suggestions = Array.isArray(value.suggestions)
+    ? value.suggestions
+        .map((suggestion) => parseSuggestionPreview(suggestion))
+        .filter((suggestion): suggestion is SuggestionPreview =>
+          Boolean(suggestion),
+        )
+    : [];
+
+  const capabilities = isRecord(value.capabilities)
+    ? Object.entries(value.capabilities)
+        .filter(([, flag]) => flag === true)
+        .map(([name]) => name)
+    : [];
+
+  const composer = parseComposerPreview(value.composer);
+
+  return {
+    messages,
+    suggestions,
+    capabilities,
+    ...(typeof value.isDisabled === "boolean"
+      ? { isDisabled: value.isDisabled }
+      : {}),
+    ...(typeof value.isLoading === "boolean"
+      ? { isLoading: value.isLoading }
+      : {}),
+    ...(typeof value.isRunning === "boolean"
+      ? { isRunning: value.isRunning }
+      : {}),
+    ...(composer ? { composer } : {}),
+  };
+};
+
+export const parseThreadListPreview = (
+  value: unknown,
+): ThreadListPreview | null => {
+  if (!isRecord(value)) return null;
+
+  const threadItems = Array.isArray(value.threadItems)
+    ? value.threadItems
+        .map((item) => parseThreadListItemPreview(item))
+        .filter((item): item is ThreadListItemPreview => Boolean(item))
+    : [];
+
+  const main = parseThreadPreview(value.main);
+
+  return {
+    threadIds: isStringArray(value.threadIds),
+    archivedThreadIds: isStringArray(value.archivedThreadIds),
+    threadItems,
+    ...(typeof value.mainThreadId === "string"
+      ? { mainThreadId: value.mainThreadId }
+      : {}),
+    ...(typeof value.newThreadId === "string"
+      ? { newThreadId: value.newThreadId }
+      : value.newThreadId === null
+        ? { newThreadId: null }
+        : {}),
+    ...(main ? { main } : {}),
+  };
+};