@agent-native/toolkit 0.213.1 → 0.216.0

package/src/app/agentkit/react/lifecycle.spec.tsx

@@ -157,6 +157,211 @@ afterEach(async () => {
 });
 
 describe("AgentChat lifecycle", () => {
+  it("renders host-ordered text around an attached widget", async () => {
+    const threadId = "thread-host-content-order";
+    const message = {
+      id: "assistant-host-content-order",
+      role: "assistant" as const,
+      status: "complete" as const,
+      parts: [{ type: "text" as const, text: "Intro. Summary." }],
+    };
+    const widget = {
+      id: "chart-host-content-order",
+      kind: "test-chart",
+      data: {},
+    };
+    const thread = {
+      ...createAgentThreadState(threadId),
+      messages: [message],
+      widgets: { [widget.id]: widget },
+      widgetMessageIds: { [widget.id]: message.id },
+    };
+    const observable = observableController({
+      connection: "connected",
+      capabilities: {},
+      capabilitiesStatus: "ready",
+      threads: { [threadId]: thread },
+      revision: 0,
+    });
+    const tree = mount();
+
+    const renderChat = (enablePostWidgetText: boolean) => (
+      <AgentKitProvider
+        controller={observable.controller}
+        threadId={threadId}
+        resolveMessageContentOrder={({ parts, widgets }) => {
+          const part = parts[0];
+          const chart = widgets[0];
+          if (part?.type !== "text" || !chart) return [];
+          return [
+            {
+              key: "intro",
+              type: "part",
+              part: { ...part, text: "Intro. " },
+            },
+            { key: chart.id, type: "widget", widget: chart },
+            {
+              key: "summary",
+              type: "part",
+              part: { ...part, text: "Summary." },
+            },
+          ];
+        }}
+        registry={{
+          widgets: {
+            "test-chart": () => <span data-chart-result>Chart</span>,
+          },
+        }}
+        slots={{
+          text: ({ value }) => (
+            <div className="agentkit-markdown" data-chat-part>
+              <p>{value.text}</p>
+            </div>
+          ),
+        }}
+      >
+        <AgentKitChat
+          composer={false}
+          transcriptLayout={
+            enablePostWidgetText
+              ? {
+                  postWidgetText: {
+                    tone: "muted",
+                    paragraphPaddingBlock: 4,
+                  },
+                }
+              : undefined
+          }
+        />
+      </AgentKitProvider>
+    );
+    await tree.render(renderChat(true));
+
+    const content = tree.container.querySelector(
+      `[data-message-id="${message.id}"] .agentkit-message-content`,
+    );
+    const transcriptContent = tree.container.querySelector(
+      ".agentkit-transcript-content",
+    );
+    const renderedOrder = [...(content?.children ?? [])].map((element) =>
+      element.hasAttribute("data-post-widget-text")
+        ? element.textContent
+        : element.hasAttribute("data-chat-part")
+          ? element.textContent
+          : element.hasAttribute("data-chart-result")
+            ? "chart"
+            : "other",
+    );
+    expect(renderedOrder).toEqual(["Intro. ", "chart", "Summary."]);
+    expect(content?.children[0].hasAttribute("data-post-widget-text")).toBe(
+      false,
+    );
+    expect(content?.children[2].hasAttribute("data-post-widget-text")).toBe(
+      true,
+    );
+    expect(
+      content?.children[2].querySelector(".agentkit-markdown p"),
+    ).not.toBeNull();
+    expect(transcriptContent?.getAttribute("style")).toContain(
+      "--agentkit-transcript-post-widget-text-color: var(--agentkit-text-muted)",
+    );
+    expect(transcriptContent?.getAttribute("style")).toContain(
+      "--agentkit-transcript-post-widget-paragraph-padding-block: 4px",
+    );
+
+    await tree.render(renderChat(false));
+    const defaultContent = tree.container.querySelector(
+      `[data-message-id="${message.id}"] .agentkit-message-content`,
+    );
+    expect(
+      [...(defaultContent?.children ?? [])].some((element) =>
+        element.hasAttribute("data-post-widget-text"),
+      ),
+    ).toBe(false);
+    await tree.unmount();
+  });
+
+  it("styles assistant text after an embedded widget part", async () => {
+    const threadId = "thread-embedded-content-order";
+    const widget = {
+      id: "chart-embedded-content-order",
+      kind: "test-chart",
+      data: {},
+    };
+    const message = {
+      id: "assistant-embedded-content-order",
+      role: "assistant" as const,
+      status: "complete" as const,
+      parts: [
+        { type: "text" as const, text: "Intro." },
+        { type: "widget" as const, widget },
+        { type: "text" as const, text: "Summary." },
+      ],
+    };
+    const thread = {
+      ...createAgentThreadState(threadId),
+      messages: [message],
+    };
+    const observable = observableController({
+      connection: "connected",
+      capabilities: {},
+      capabilitiesStatus: "ready",
+      threads: { [threadId]: thread },
+      revision: 0,
+    });
+    const tree = mount();
+
+    await tree.render(
+      <AgentKitProvider
+        controller={observable.controller}
+        threadId={threadId}
+        registry={{
+          widgets: {
+            "test-chart": () => <span data-chart-result>Chart</span>,
+          },
+        }}
+        slots={{
+          text: ({ value }) => (
+            <div data-chat-part>
+              <p>{value.text}</p>
+            </div>
+          ),
+        }}
+      >
+        <AgentKitChat
+          composer={false}
+          transcriptLayout={{
+            postWidgetText: {
+              tone: "muted",
+              paragraphPaddingBlock: 4,
+            },
+          }}
+        />
+      </AgentKitProvider>,
+    );
+
+    const content = tree.container.querySelector(
+      `[data-message-id="${message.id}"] .agentkit-message-content`,
+    );
+    const renderedOrder = [...(content?.children ?? [])].map((element) =>
+      element.hasAttribute("data-post-widget-text")
+        ? element.textContent
+        : element.hasAttribute("data-chat-part")
+          ? element.textContent
+          : element.hasAttribute("data-chart-result")
+            ? "chart"
+            : "other",
+    );
+    expect(renderedOrder).toEqual(["Intro.", "chart", "Summary."]);
+    expect(content?.children[0].hasAttribute("data-post-widget-text")).toBe(
+      false,
+    );
+    expect(content?.children[2].hasAttribute("data-post-widget-text")).toBe(
+      true,
+    );
+    await tree.unmount();
+  });
+
   it("keeps partial transcript updates out of live announcements", async () => {
     const threadId = "thread-accessible-transcript";
     const thread = {
@@ -1609,7 +1814,7 @@ describe("AgentChat lifecycle", () => {
     await tree.unmount();
   });
 
-  it("preserves visible reasoning without a Thinking history row", async () => {
+  it("preserves visible reasoning and applies the worked-row layout", async () => {
     const threadId = "thread-reasoning-work";
     const runId = "run-reasoning-work";
     const base = (sequence: number, seconds: number = sequence) => ({
@@ -1694,10 +1899,24 @@ describe("AgentChat lifecycle", () => {
     });
     const observable = observableController(snapshot(0));
     const tree = mount();
+    const workedForRowLayout = {
+      chevronSize: 12,
+      iconGap: 8,
+      marginBlockStart: -12,
+      fontSize: 13,
+      lineHeight: 16,
+      paddingBlock: 2,
+      paddingInline: 4,
+    };
+    const formatWorkedForDuration = (durationMs: number) =>
+      `${Math.round(durationMs / 1000)} seconds`;
     await tree.render(
-      <AgentKitProvider
+      <AgentKitRoot
         controller={observable.controller}
         threadId={threadId}
+        load="manual"
+        workedForRowLayout={workedForRowLayout}
+        formatWorkedForDuration={formatWorkedForDuration}
         registry={{
           activities: {
             reasoning: ({ value }) => (
@@ -1714,11 +1933,15 @@ describe("AgentChat lifecycle", () => {
         }}
       >
         <AgentKitChat composer={false} />
-      </AgentKitProvider>,
+      </AgentKitRoot>,
     );
     const work = tree.container.querySelector<HTMLDetailsElement>(
       ".agentkit-activities",
     )!;
+    expect(
+      work.querySelector<HTMLElement>(".agentkit-activities-summary")?.style
+        .marginBlockStart,
+    ).toBe("-12px");
     expect(work.open).toBe(false);
     expect(
       tree.container.querySelectorAll(".agentkit-activities"),
@@ -1744,6 +1967,60 @@ describe("AgentChat lifecycle", () => {
         ".agentkit-activities-summary > .agentkit-summary-chevron",
       ),
     ).not.toBeNull();
+    expect(work.querySelector("summary")?.getAttribute("style")).toContain(
+      "gap: 8px",
+    );
+    expect(
+      work.querySelector<HTMLElement>(".agentkit-summary-chevron")?.style.width,
+    ).toBe("12px");
+    await tree.render(
+      <AgentKitRoot
+        controller={observable.controller}
+        threadId={threadId}
+        load="manual"
+        workedForRowLayout={workedForRowLayout}
+        formatWorkedForDuration={formatWorkedForDuration}
+        registry={{
+          activities: {
+            reasoning: ({ value }) => (
+              <span data-protocol-reasoning>{value.label}</span>
+            ),
+          },
+        }}
+        slots={{
+          reasoning: ({ value, active, resetKey }) => (
+            <span data-thought={resetKey} data-active={active}>
+              {value.text}
+            </span>
+          ),
+          workedForSummary: ({ label, open, current, layout }) => (
+            <span
+              data-work-summary
+              data-open={open}
+              data-icon-gap={layout?.iconGap}
+            >
+              <span>{label}</span>
+              <span data-work-chevron aria-hidden="true">
+                ›
+              </span>
+              {current}
+            </span>
+          ),
+        }}
+      >
+        <AgentKitChat composer={false} />
+      </AgentKitRoot>,
+    );
+    expect(work.querySelector("[data-work-summary]")?.textContent).toContain(
+      "Searching documentation",
+    );
+    expect(work.querySelector("[data-work-chevron]")).not.toBeNull();
+    expect(work.querySelector("[data-work-summary]")?.dataset.iconGap).toBe(
+      "8",
+    );
+    expect(
+      work.querySelector("[data-work-summary]")?.getAttribute("data-open"),
+    ).toBe("false");
     thread = reduceAgentEvent(thread, {
       ...base(8, 18),
       type: "message.completed",
@@ -1765,7 +2042,15 @@ describe("AgentChat lifecycle", () => {
     await flush();
     expect(tree.container.querySelector(".agentkit-activities")).toBe(work);
     expect(work.open).toBe(false);
-    expect(work.querySelector("summary")?.textContent).toBe("Worked for 18s");
+    expect(work.querySelector("summary")?.textContent).toBe(
+      "Worked for 18 seconds›",
+    );
+    expect(work.querySelector<HTMLElement>("summary")?.style.fontSize).toBe(
+      "13px",
+    );
+    expect(work.querySelector<HTMLElement>("summary")?.style.lineHeight).toBe(
+      "16px",
+    );
     expect(work.querySelector("[data-agentkit-current-activity]")).toBeNull();
     expect(tree.container.querySelectorAll("article")).toHaveLength(1);
     const answer = tree.container.querySelector(

package/src/app/agentkit/react/message-content-order.spec.ts

@@ -0,0 +1,190 @@
+import type {
+  AgentEvent,
+  AgentMessage,
+  AgentWidget,
+} from "@agent-native/agentkit/protocol";
+import { describe, expect, it } from "vitest";
+
+import {
+  orderMessageContent,
+  type AgentMessageContentOrderResolver,
+} from "./message-content-order.js";
+
+const widget: AgentWidget = {
+  id: "chart-1",
+  kind: "core.data-chart",
+  data: { toolCallId: "tool-1" },
+};
+
+function event(
+  sequence: number,
+  payload: Omit<
+    AgentEvent,
+    "id" | "threadId" | "runId" | "sequence" | "occurredAt"
+  >,
+): AgentEvent {
+  return {
+    id: `event-${sequence}`,
+    threadId: "thread-1",
+    runId: "run-1",
+    sequence,
+    occurredAt: `2026-10-21T00:00:0${sequence}.000Z`,
+    ...payload,
+  } as AgentEvent;
+}
+
+describe("orderMessageContent", () => {
+  it("keeps an attached chart between the streamed introduction and conclusion", () => {
+    const message: AgentMessage = {
+      id: "assistant-1",
+      role: "assistant",
+      status: "complete",
+      parts: [
+        {
+          type: "text",
+          text: "Intro before chart. Conclusion after chart.",
+          format: "markdown",
+        },
+      ],
+    };
+    const events: AgentEvent[] = [
+      event(1, {
+        type: "message.created",
+        message: { ...message, status: "streaming", parts: [] },
+      }),
+      event(2, {
+        type: "message.delta",
+        messageId: message.id,
+        text: "Intro before chart. ",
+        format: "markdown",
+      }),
+      event(3, { type: "widget.created", messageId: message.id, widget }),
+      event(4, {
+        type: "message.delta",
+        messageId: message.id,
+        text: "Conclusion after chart.",
+        format: "markdown",
+      }),
+      event(5, { type: "message.completed", message }),
+    ];
+
+    const result = orderMessageContent(
+      message,
+      message.parts,
+      [widget],
+      events,
+    );
+
+    expect(result.map((item) => item.type)).toEqual(["part", "widget", "part"]);
+    expect(result[0]).toMatchObject({
+      type: "part",
+      part: { text: "Intro before chart. " },
+    });
+    expect(result[1]).toMatchObject({ type: "widget", widget });
+    expect(result[2]).toMatchObject({
+      type: "part",
+      part: { text: "Conclusion after chart." },
+    });
+  });
+
+  it("keeps legacy append order when streamed text cannot be matched exactly", () => {
+    const message: AgentMessage = {
+      id: "assistant-2",
+      role: "assistant",
+      parts: [{ type: "text", text: "Final answer" }],
+    };
+
+    const result = orderMessageContent(message, message.parts, [widget], []);
+
+    expect(result.map((item) => item.type)).toEqual(["part", "widget"]);
+  });
+
+  it("lets a host split text around a widget when stream order is unavailable", () => {
+    const message: AgentMessage = {
+      id: "assistant-3",
+      role: "assistant",
+      parts: [{ type: "text", text: "Intro. Summary." }],
+    };
+    const textPart = message.parts[0];
+    if (textPart?.type !== "text") throw new Error("Expected text part");
+
+    const result = orderMessageContent(
+      message,
+      message.parts,
+      [widget],
+      [],
+      ({ parts, widgets }) => {
+        const part = parts[0];
+        const chart = widgets[0];
+        if (part?.type !== "text" || !chart) return [];
+        return [
+          {
+            key: "intro",
+            type: "part",
+            part: { ...part, text: "Intro. " },
+          },
+          { key: chart.id, type: "widget", widget: chart },
+          {
+            key: "summary",
+            type: "part",
+            part: { ...part, text: "Summary." },
+          },
+        ];
+      },
+    );
+
+    expect(result.map((item) => item.type)).toEqual(["part", "widget", "part"]);
+    expect(result[0]).toMatchObject({ part: { text: "Intro. " } });
+    expect(result[1]).toMatchObject({ type: "widget", widget });
+    expect(result[2]).toMatchObject({ part: { text: "Summary." } });
+    expect(textPart.text).toBe("Intro. Summary.");
+  });
+
+  it("falls back when the host ordering result drops all visible content", () => {
+    const message: AgentMessage = {
+      id: "assistant-4",
+      role: "assistant",
+      parts: [{ type: "text", text: "A saved answer" }],
+    };
+
+    const result = orderMessageContent(
+      message,
+      message.parts,
+      [widget],
+      [],
+      () => [],
+    );
+
+    expect(result).toEqual([
+      {
+        key: "assistant-4-0",
+        type: "part",
+        part: message.parts[0],
+      },
+      { key: widget.id, type: "widget", widget },
+    ]);
+  });
+
+  it("falls back when the host ordering result loses text or a widget", () => {
+    const message: AgentMessage = {
+      id: "assistant-5",
+      role: "assistant",
+      parts: [{ type: "text", text: "Visible answer" }],
+    };
+    const incompleteOrders: AgentMessageContentOrderResolver[] = [
+      () => [{ key: widget.id, type: "widget" as const, widget }],
+      ({ defaultOrder }) => defaultOrder.slice(0, 1),
+    ];
+
+    for (const resolveOrder of incompleteOrders) {
+      const result = orderMessageContent(
+        message,
+        message.parts,
+        [widget],
+        [],
+        resolveOrder,
+      );
+      expect(result.map((item) => item.type)).toEqual(["part", "widget"]);
+    }
+  });
+});