@assistant-ui/react-devtools 1.2.6 → 1.2.7

package/src/views/thread/ConversationList.tsx

@@ -0,0 +1,127 @@
+import { truncate } from "../../utils/common";
+import { PaneHeader, RailTime, SelectableRow } from "../ui";
+import { ConversationStatusDot } from "./ConversationStatusDot";
+import type { ThreadListItemPreview, ThreadListPreview } from "./types";
+import { parseThreadPreview } from "./utils";
+
+const lastMessageAt = (
+  snapshots: Readonly<Record<string, unknown>> | undefined,
+  threadId: string,
+  fallback?: string,
+) => {
+  if (fallback) return fallback;
+  const raw = snapshots?.[threadId];
+  const thread = raw ? parseThreadPreview(raw) : null;
+  return thread?.messages.at(-1)?.createdAt;
+};
+
+export const conversationListHeader = (threadList: ThreadListPreview) => {
+  const regular = threadList.threadIds.length;
+  const archived = threadList.archivedThreadIds.length;
+
+  return (
+    <PaneHeader>
+      {regular} conversation{regular === 1 ? "" : "s"}
+      {archived ? ` · ${archived} archived` : null}
+    </PaneHeader>
+  );
+};
+
+const ROW = "flex h-8 items-center gap-1.5";
+
+const ConversationRow = ({
+  item,
+  selected,
+  mainThreadId,
+  main,
+  snapshots,
+  onSelect,
+}: {
+  item: ThreadListItemPreview;
+  selected: boolean;
+  mainThreadId: string | undefined;
+  main: ThreadListPreview["main"];
+  snapshots: Readonly<Record<string, unknown>> | undefined;
+  onSelect: () => void;
+}) => {
+  const title = item.title?.trim() || "(untitled)";
+  const whenSource = lastMessageAt(snapshots, item.id, item.lastMessageAt);
+
+  return (
+    <SelectableRow selected={selected} onSelect={onSelect} dense>
+      <div className={ROW} title={title}>
+        <ConversationStatusDot
+          item={item}
+          mainThreadId={mainThreadId}
+          main={main}
+          snapshots={snapshots}
+        />
+        <span className="text-foreground min-w-0 flex-1 truncate text-[12px] font-medium">
+          {truncate(title, 64)}
+        </span>
+        {whenSource ? <RailTime value={whenSource} /> : null}
+      </div>
+    </SelectableRow>
+  );
+};
+
+export const ConversationList = ({
+  threadList,
+  snapshots,
+  selectedId,
+  onSelect,
+}: {
+  threadList: ThreadListPreview;
+  snapshots: Readonly<Record<string, unknown>> | undefined;
+  selectedId: string;
+  onSelect: (threadId: string) => void;
+}) => {
+  const itemsById = new Map(
+    threadList.threadItems.map((item) => [item.id, item]),
+  );
+
+  const regular = threadList.threadIds
+    .map((id) => itemsById.get(id))
+    .filter((item): item is ThreadListItemPreview => Boolean(item));
+
+  const archived = threadList.archivedThreadIds
+    .map((id) => itemsById.get(id))
+    .filter((item): item is ThreadListItemPreview => Boolean(item));
+
+  const mainThreadId = threadList.mainThreadId;
+  const main = threadList.main;
+
+  return (
+    <>
+      {regular.map((item) => (
+        <ConversationRow
+          key={item.id}
+          item={item}
+          selected={selectedId === item.id}
+          mainThreadId={mainThreadId}
+          main={main}
+          snapshots={snapshots}
+          onSelect={() => onSelect(item.id)}
+        />
+      ))}
+      {archived.length ? (
+        <div className="border-border border-t">
+          <div className="text-muted-foreground px-3 py-1 text-[9px] font-medium tracking-wide uppercase">
+            Archived
+          </div>
+          {archived.map((item) => (
+            <ConversationRow
+              key={item.id}
+              item={item}
+              selected={selectedId === item.id}
+              mainThreadId={mainThreadId}
+              main={main}
+              snapshots={snapshots}
+              onSelect={() => onSelect(item.id)}
+            />
+          ))}
+        </div>
+      ) : null}
+    </>
+  );
+};

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

@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+import { resolveConversationDotState } from "./ConversationStatusDot";
+import type { ThreadListItemPreview, ThreadPreview } from "./types";
+
+const item = (id: string, over: Partial<ThreadListItemPreview> = {}) =>
+  ({ id, ...over }) satisfies ThreadListItemPreview;
+
+const thread = (over: Partial<ThreadPreview> = {}): ThreadPreview => ({
+  messages: [],
+  suggestions: [],
+  capabilities: [],
+  ...over,
+});
+
+describe("resolveConversationDotState", () => {
+  it("returns unloaded when no snapshot or main data exists", () => {
+    expect(
+      resolveConversationDotState({
+        item: item("t1"),
+        mainThreadId: "main",
+        main: undefined,
+        snapshots: {},
+      }),
+    ).toBe("unloaded");
+  });
+
+  it("returns active for the main thread", () => {
+    expect(
+      resolveConversationDotState({
+        item: item("main"),
+        mainThreadId: "main",
+        main: thread(),
+        snapshots: {},
+      }),
+    ).toBe("active");
+  });
+
+  it("returns loaded when a snapshot exists", () => {
+    expect(
+      resolveConversationDotState({
+        item: item("t2"),
+        mainThreadId: "main",
+        main: thread(),
+        snapshots: {
+          t2: { messages: [], suggestions: [], capabilities: [] },
+        },
+      }),
+    ).toBe("loaded");
+  });
+
+  it("returns error when a loaded thread has incomplete messages", () => {
+    expect(
+      resolveConversationDotState({
+        item: item("t2"),
+        mainThreadId: "main",
+        main: thread(),
+        snapshots: {
+          t2: {
+            messages: [
+              {
+                id: "m1",
+                role: "assistant",
+                parts: [],
+                attachments: [],
+                status: { type: "incomplete", reason: "error" },
+              },
+            ],
+            suggestions: [],
+            capabilities: [],
+          },
+        },
+      }),
+    ).toBe("error");
+  });
+
+  it("returns new for thread list items marked as new", () => {
+    expect(
+      resolveConversationDotState({
+        item: item("t3", { status: "new" }),
+        mainThreadId: "main",
+        main: thread(),
+        snapshots: {},
+      }),
+    ).toBe("new");
+  });
+});

package/src/views/thread/ConversationStatusDot.tsx

@@ -0,0 +1,126 @@
+import clsx from "clsx";
+import type { ThreadListItemPreview, ThreadPreview } from "./types";
+import { parseThreadPreview } from "./utils";
+
+export type ConversationDotState =
+  | "unloaded"
+  | "loading"
+  | "loaded"
+  | "running"
+  | "active"
+  | "active-running"
+  | "error"
+  | "new";
+
+const DOT_CLASS: Record<ConversationDotState, string> = {
+  unloaded: "bg-muted-foreground/30",
+  loading: "bg-muted-foreground/45",
+  loaded: "bg-blue-500",
+  running: "bg-blue-500",
+  active: "bg-emerald-500",
+  "active-running": "bg-emerald-500",
+  error: "bg-red-500",
+  new: "bg-violet-500",
+};
+
+const DOT_LABEL: Record<ConversationDotState, string> = {
+  unloaded: "Not loaded in DevTools",
+  loading: "Loading",
+  loaded: "Loaded",
+  running: "Running",
+  active: "Active in app",
+  "active-running": "Active · running",
+  error: "Error",
+  new: "New conversation",
+};
+
+const threadHasError = (thread: ThreadPreview | null | undefined) =>
+  Boolean(
+    thread?.messages.some((message) => message.status?.type === "incomplete"),
+  );
+
+const threadForItem = (
+  item: ThreadListItemPreview,
+  mainThreadId: string | undefined,
+  main: ThreadPreview | undefined,
+  snapshots: Readonly<Record<string, unknown>> | undefined,
+): ThreadPreview | null => {
+  if (item.id === mainThreadId && main) return main;
+  const raw = snapshots?.[item.id];
+  return raw ? parseThreadPreview(raw) : null;
+};
+
+const isLoadedInDevtools = (
+  item: ThreadListItemPreview,
+  mainThreadId: string | undefined,
+  main: ThreadPreview | undefined,
+  snapshots: Readonly<Record<string, unknown>> | undefined,
+) =>
+  snapshots?.[item.id] !== undefined ||
+  (item.id === mainThreadId && main !== undefined);
+
+export const resolveConversationDotState = ({
+  item,
+  mainThreadId,
+  main,
+  snapshots,
+}: {
+  item: ThreadListItemPreview;
+  mainThreadId: string | undefined;
+  main: ThreadPreview | undefined;
+  snapshots: Readonly<Record<string, unknown>> | undefined;
+}): ConversationDotState => {
+  const isActive = item.id === mainThreadId;
+  const loaded = isLoadedInDevtools(item, mainThreadId, main, snapshots);
+  const thread = threadForItem(item, mainThreadId, main, snapshots);
+
+  if (item.status === "new") return "new";
+
+  if (!loaded) return "unloaded";
+
+  if (threadHasError(thread)) return "error";
+
+  if (isActive) {
+    return thread?.isRunning ? "active-running" : "active";
+  }
+
+  if (thread?.isRunning) return "running";
+  if (thread?.isLoading) return "loading";
+
+  return "loaded";
+};
+
+export const ConversationStatusDot = ({
+  item,
+  mainThreadId,
+  main,
+  snapshots,
+}: {
+  item: ThreadListItemPreview;
+  mainThreadId: string | undefined;
+  main: ThreadPreview | undefined;
+  snapshots: Readonly<Record<string, unknown>> | undefined;
+}) => {
+  const state = resolveConversationDotState({
+    item,
+    mainThreadId,
+    main,
+    snapshots,
+  });
+  const label = DOT_LABEL[state];
+  const pulse =
+    state === "loading" || state === "running" || state === "active-running";
+
+  return (
+    <span
+      role="img"
+      aria-label={label}
+      title={label}
+      className={clsx(
+        "size-1.5 shrink-0 rounded-full",
+        DOT_CLASS[state],
+        pulse && "animate-pulse",
+      )}
+    />
+  );
+};

package/src/views/thread/ThreadDetails.tsx

@@ -0,0 +1,85 @@
+import { formatBoolean } from "../../utils/common";
+import { MessageList } from "../message";
+import { Chip, InfoCard, SummaryItem, SummaryList } from "../ui";
+import { ComposerAttachments } from "./ComposerAttachments";
+import { ComposerFlags } from "./ComposerFlags";
+import { ComposerQueue } from "./ComposerQueue";
+import type { ThreadPreview } from "./types";
+
+export const ThreadDetails = ({
+  thread,
+  title,
+}: {
+  thread: ThreadPreview;
+  title?: string;
+}) => (
+  <div className="flex flex-col gap-6">
+    <InfoCard title={title ?? "Thread"}>
+      <SummaryList>
+        <SummaryItem label="Messages" value={String(thread.messages.length)} />
+        {typeof thread.isLoading === "boolean" ? (
+          <SummaryItem
+            label="Loading"
+            value={formatBoolean(thread.isLoading) ?? "—"}
+          />
+        ) : null}
+        {typeof thread.isRunning === "boolean" ? (
+          <SummaryItem
+            label="Running"
+            value={formatBoolean(thread.isRunning) ?? "—"}
+          />
+        ) : null}
+        {thread.isDisabled !== undefined ? (
+          <SummaryItem
+            label="Disabled"
+            value={formatBoolean(thread.isDisabled) ?? "—"}
+          />
+        ) : null}
+      </SummaryList>
+    </InfoCard>
+
+    {thread.capabilities.length ? (
+      <InfoCard title="Capabilities" count={thread.capabilities.length}>
+        <div className="flex flex-wrap gap-1.5">
+          {thread.capabilities.map((capability) => (
+            <Chip key={capability}>{capability}</Chip>
+          ))}
+        </div>
+      </InfoCard>
+    ) : null}
+
+    <MessageList messages={thread.messages} />
+
+    {thread.suggestions.length ? (
+      <InfoCard title="Suggestions" count={thread.suggestions.length}>
+        <ul className="text-foreground list-disc space-y-1 pl-4 text-[12px]">
+          {thread.suggestions.map((suggestion, index) => (
+            <li key={index}>{suggestion.prompt || "(empty)"}</li>
+          ))}
+        </ul>
+      </InfoCard>
+    ) : null}
+
+    {thread.composer ? (
+      <InfoCard title="Composer">
+        <SummaryList>
+          <SummaryItem label="Role" value={thread.composer.role ?? "—"} />
+          <SummaryItem
+            label="Text length"
+            value={String(thread.composer.textLength)}
+          />
+          <SummaryItem
+            label="Attachments"
+            value={String(thread.composer.attachments.length)}
+          />
+          {typeof thread.composer.type === "string" ? (
+            <SummaryItem label="Mode" value={thread.composer.type} />
+          ) : null}
+        </SummaryList>
+        <ComposerFlags composer={thread.composer} />
+        <ComposerAttachments attachments={thread.composer.attachments} />
+        <ComposerQueue queue={thread.composer.queue} />
+      </InfoCard>
+    ) : null}
+  </div>
+);

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

@@ -0,0 +1,56 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import type { MessagePreview } from "../message";
+import { Transcript, TranscriptHeader } from "./Transcript";
+import type { ThreadPreview } from "./types";
+
+const message = (over: Partial<MessagePreview>): MessagePreview => ({
+  id: "m",
+  role: "assistant",
+  parts: [],
+  attachments: [],
+  ...over,
+});
+
+describe("Transcript", () => {
+  it("renders a role-lane turn with text, tool chip, and a stat header", () => {
+    const thread: ThreadPreview = {
+      messages: [
+        message({
+          id: "u1",
+          role: "user",
+          parts: [{ type: "text", text: "what's the weather?" }],
+        }),
+        message({
+          id: "a1",
+          role: "assistant",
+          parts: [
+            { type: "text", text: "Let me check." },
+            {
+              type: "tool-call",
+              toolCallId: "c1",
+              toolName: "getWeather",
+              args: {},
+              subMessageCount: 0,
+            },
+            { type: "text", text: "It is sunny." },
+          ],
+          usage: { inputTokens: 10, outputTokens: 5, stepCount: 1 },
+        }),
+      ],
+      suggestions: [],
+      capabilities: [],
+    };
+
+    const html = renderToStaticMarkup(
+      <>
+        <TranscriptHeader thread={thread} />
+        <Transcript thread={thread} selection={null} onSelect={() => {}} />
+      </>,
+    );
+    expect(html).toContain("user");
+    expect(html).toContain("what&#x27;s the weather?");
+    expect(html).toContain("Let me check.");
+    expect(html).toContain("2 msgs");
+  });
+});