@agent-native/toolkit 0.214.0 → 0.216.0

package/src/app/agentkit/react/components.tsx

@@ -40,6 +40,7 @@ import {
 import {
   createContext,
   Component,
+  Fragment,
   memo,
   useCallback,
   useContext,
@@ -49,6 +50,7 @@ import {
   useRef,
   useState,
   type ComponentType,
+  type CSSProperties,
   type ErrorInfo,
   type KeyboardEvent as ReactKeyboardEvent,
   type PointerEvent as ReactPointerEvent,
@@ -138,6 +140,11 @@ import {
 } from "./context.js";
 import { orderMessageContent } from "./message-content-order.js";
 import { AgentStreamingText } from "./streaming-text.js";
+import {
+  workedForRowChevronStyle,
+  workedForRowSummaryStyle,
+  type AgentChatTranscriptLayout,
+} from "./transcript-layout.js";
 
 // AgentKit React installs without @agent-native/core, so it repeats core's
 // replay markers. Its specs assert core's attribute names.
@@ -1465,7 +1472,8 @@ export function AgentActivityGroup({
   excludeAgentActivities?: boolean;
   isCurrentSegment?: boolean;
 }) {
-  const { threadId, slots, registry, labels } = useAgentKit();
+  const { threadId, slots, registry, labels, formatWorkedForDuration } =
+    useAgentKit();
   const thread = useAgentThread();
   const runEvents = runId
     ? thread.events.filter((event) => event.runId === runId)
@@ -1762,6 +1770,7 @@ export function AgentActivityGroup({
   }
   const hasExpandableActivity = displayGroups.length > 0;
   const formatDuration = (ms: number) =>
+    formatWorkedForDuration?.(ms) ??
     formatAgentKitDuration(ms, {
       hour: labels.durationHourShort,
       minute: labels.durationMinuteShort,
@@ -1908,7 +1917,7 @@ function AgentWorkDisclosure({
   current?: ReactNode;
   children: ReactNode;
 }) {
-  const { slots } = useAgentKit();
+  const { slots, workedForRowLayout } = useAgentKit();
   const [open, setOpen] = useState(false);
   const Summary = slots.workedForSummary;
   return (
@@ -1921,6 +1930,7 @@ function AgentWorkDisclosure({
       <summary
         className="agentkit-activities-summary"
         aria-disabled={!expandable}
+        style={workedForRowSummaryStyle(workedForRowLayout)}
         onClick={(event) => {
           event.preventDefault();
           if (!expandable) return;
@@ -1934,12 +1944,14 @@ function AgentWorkDisclosure({
             expandable={expandable}
             open={open}
             current={current}
+            layout={workedForRowLayout}
           />
         ) : (
           <>
             <IconChevronRight
               aria-hidden="true"
               className="agentkit-icon agentkit-summary-chevron"
+              style={workedForRowChevronStyle(workedForRowLayout)}
             />
             <span className="agentkit-activities-summary-content">
               {label ? (
@@ -3798,11 +3810,15 @@ export function AgentMessageActions({
   );
 }
 
+const AgentKitPostWidgetTextContext =
+  createContext<AgentChatTranscriptLayout["postWidgetText"]>(undefined);
+
 export function AgentMessageView({
   value: message,
   threadId,
 }: AgentKitRenderProps<AgentMessage>) {
   const { labels, slots, resolveMessageContentOrder } = useAgentKit();
+  const postWidgetText = useContext(AgentKitPostWidgetTextContext);
   const thread = useAgentThread(threadId);
   const visibleMessage = stripAgentMessageContext(message);
   const Supplement = slots.messageSupplement;
@@ -3843,6 +3859,7 @@ export function AgentMessageView({
       <Supplement value={visibleMessage} threadId={threadId} />
     ) : null;
   }
+  let hasSeenWidget = false;
   return (
     <article
       className="agentkit-message"
@@ -3852,20 +3869,39 @@ export function AgentMessageView({
       aria-busy={message.status === "streaming"}
     >
       <div className="agentkit-message-content">
-        {orderedContent.map((item, index) => (
-          <AgentMessagePartView
-            key={item.key}
-            value={
-              item.type === "widget"
-                ? { type: "widget", widget: item.widget }
-                : item.part
-            }
-            threadId={threadId}
-            active={message.status === "streaming"}
-            resetKey={`${threadId}:${message.id}:${index}`}
-            userMessage={message.role === "user"}
-          />
-        ))}
+        {orderedContent.map((item, index) => {
+          const isWidget =
+            item.type === "widget" ||
+            (item.type === "part" && item.part.type === "widget");
+          const followsWidget =
+            message.role === "assistant" &&
+            postWidgetText !== undefined &&
+            hasSeenWidget &&
+            item.type === "part" &&
+            item.part.type === "text";
+          if (isWidget) hasSeenWidget = true;
+          const content = (
+            <AgentMessagePartView
+              value={
+                item.type === "widget"
+                  ? { type: "widget", widget: item.widget }
+                  : item.part
+              }
+              threadId={threadId}
+              active={message.status === "streaming"}
+              resetKey={`${threadId}:${message.id}:${index}`}
+              userMessage={message.role === "user"}
+            />
+          );
+
+          return followsWidget ? (
+            <div key={item.key} data-post-widget-text="true">
+              {content}
+            </div>
+          ) : (
+            <Fragment key={item.key}>{content}</Fragment>
+          );
+        })}
         {attachedAnnotations.length ? (
           <div className="agentkit-annotations">
             {attachedAnnotations.map((annotation) => (
@@ -4800,9 +4836,103 @@ export interface AgentKitChatProps {
   emptyComposerPlacement?: "center" | "bottom";
   /** Follow new output until the user deliberately scrolls away. */
   autoScroll?: boolean;
+  /** Optional transcript geometry. Omitted values keep the shared defaults. */
+  transcriptLayout?: AgentChatTranscriptLayout;
   className?: string;
 }
 
+type AgentKitTranscriptContentStyle = CSSProperties & {
+  "--agentkit-transcript-top-inset"?: string;
+  "--agentkit-transcript-lane-width"?: string;
+  "--agentkit-transcript-lane-offset-inline"?: string;
+  "--agentkit-transcript-message-gap"?: string;
+  "--agentkit-transcript-message-line-height"?: string;
+  "--agentkit-transcript-font-family"?: string;
+  "--agentkit-transcript-post-widget-text-color"?: string;
+  "--agentkit-transcript-post-widget-paragraph-padding-block"?: string;
+  "--agentkit-user-bubble-line-height"?: string;
+  "--agentkit-user-bubble-max-width"?: string;
+  "--agentkit-user-bubble-offset-inline"?: string;
+  "--agentkit-user-bubble-padding-block"?: string;
+  "--agentkit-user-bubble-padding-inline"?: string;
+};
+
+function transcriptLength(value: number | undefined, name: string) {
+  if (value === undefined) return undefined;
+  if (!Number.isFinite(value) || value < 0) {
+    throw new RangeError(
+      `transcriptLayout.${name} must be a non-negative number`,
+    );
+  }
+  return `${value}px`;
+}
+
+function transcriptOffset(value: number | undefined, name: string) {
+  if (value === undefined) return undefined;
+  if (!Number.isFinite(value)) {
+    throw new RangeError(`transcriptLayout.${name} must be a finite number`);
+  }
+  return `${value}px`;
+}
+
+function transcriptContentStyle(
+  layout?: AgentChatTranscriptLayout,
+): AgentKitTranscriptContentStyle | undefined {
+  if (!layout) return undefined;
+  return {
+    "--agentkit-transcript-top-inset": transcriptLength(
+      layout.topInset,
+      "topInset",
+    ),
+    "--agentkit-transcript-lane-width": transcriptLength(
+      layout.messageLaneWidth,
+      "messageLaneWidth",
+    ),
+    "--agentkit-transcript-lane-offset-inline": transcriptOffset(
+      layout.messageLaneOffsetInline,
+      "messageLaneOffsetInline",
+    ),
+    "--agentkit-transcript-message-gap": transcriptLength(
+      layout.messageGap,
+      "messageGap",
+    ),
+    "--agentkit-transcript-message-line-height": transcriptLength(
+      layout.messageLineHeight,
+      "messageLineHeight",
+    ),
+    "--agentkit-transcript-font-family": layout.fontFamily,
+    "--agentkit-transcript-post-widget-text-color":
+      layout.postWidgetText?.tone === "muted"
+        ? "var(--agentkit-text-muted)"
+        : undefined,
+    "--agentkit-transcript-post-widget-paragraph-padding-block":
+      transcriptLength(
+        layout.postWidgetText?.paragraphPaddingBlock,
+        "postWidgetText.paragraphPaddingBlock",
+      ),
+    "--agentkit-user-bubble-line-height": transcriptLength(
+      layout.userBubbleLineHeight,
+      "userBubbleLineHeight",
+    ),
+    "--agentkit-user-bubble-max-width": transcriptLength(
+      layout.userBubbleMaxWidth,
+      "userBubbleMaxWidth",
+    ),
+    "--agentkit-user-bubble-offset-inline": transcriptOffset(
+      layout.userBubbleOffsetInline,
+      "userBubbleOffsetInline",
+    ),
+    "--agentkit-user-bubble-padding-block": transcriptLength(
+      layout.userBubblePadding?.block,
+      "userBubblePadding.block",
+    ),
+    "--agentkit-user-bubble-padding-inline": transcriptLength(
+      layout.userBubblePadding?.inline,
+      "userBubblePadding.inline",
+    ),
+  };
+}
+
 const AGENTKIT_TRANSCRIPT_BOTTOM_THRESHOLD = 24;
 const AGENTKIT_TRANSCRIPT_SCROLLBAR_IDLE_MS = 900;
 const AGENTKIT_TRANSCRIPT_SCROLL_KEYS = new Set([
@@ -4832,6 +4962,7 @@ export function AgentKitChat({
   hasRenderedMessages = false,
   emptyComposerPlacement = "center",
   autoScroll = true,
+  transcriptLayout,
   className,
 }: AgentKitChatProps) {
   const { threadId, slots, registry, labels, onThreadForked } = useAgentKit();
@@ -5582,12 +5713,17 @@ export function AgentKitChat({
           <div
             ref={transcriptContentRef}
             className="agentkit-transcript-content"
+            style={transcriptContentStyle(transcriptLayout)}
           >
             <AgentKitRegionSlot slot={Transcript} threadId={threadId}>
               {!hasConversation && EmptyState ? (
                 <EmptyState threadId={threadId} />
               ) : null}
-              {transcriptItems}
+              <AgentKitPostWidgetTextContext.Provider
+                value={transcriptLayout?.postWidgetText}
+              >
+                {transcriptItems}
+              </AgentKitPostWidgetTextContext.Provider>
               {approvalEntries.map(([approvalId, request]) => (
                 <AgentKitSurfaceBoundary
                   key={`${threadId}:${approvalId}`}

package/src/app/agentkit/react/context.tsx

@@ -44,6 +44,7 @@ import {
 } from "react";
 
 import type { AgentMessageContentOrderResolver } from "./message-content-order.js";
+import type { AgentChatWorkedForRowLayout } from "./transcript-layout.js";
 
 export interface AgentKitRenderProps<T> {
   value: T;
@@ -87,6 +88,7 @@ export interface AgentKitWorkedForSummaryRenderProps {
   expandable: boolean;
   open: boolean;
   current?: ReactNode;
+  layout?: AgentChatWorkedForRowLayout;
 }
 
 export interface AgentConnectionErrorRenderProps {
@@ -495,6 +497,8 @@ export interface AgentKitProviderProps {
   /** Receives full renderer failures while the UI shows a safe fallback. */
   onRenderError?: (failure: AgentKitRenderFailure) => void;
   resolveMessageContentOrder?: AgentMessageContentOrderResolver;
+  workedForRowLayout?: AgentChatWorkedForRowLayout;
+  formatWorkedForDuration?: (durationMs: number) => string;
   onClientEffect?: (effect: {
     type: "client.effect" | "client.deeplink";
     name: string;
@@ -525,6 +529,8 @@ export interface AgentKitContextValue {
   onConnectionRequest?: AgentKitProviderProps["onConnectionRequest"];
   onRenderError?: (failure: AgentKitRenderFailure) => void;
   resolveMessageContentOrder?: AgentMessageContentOrderResolver;
+  workedForRowLayout?: AgentChatWorkedForRowLayout;
+  formatWorkedForDuration?: (durationMs: number) => string;
   registerComposerFocus: (threadId: ThreadId, focus: () => void) => () => void;
   requestComposerFocus: (threadId: ThreadId) => void;
 }
@@ -546,6 +552,8 @@ export function AgentKitProvider({
   onConnectionRequest,
   onRenderError,
   resolveMessageContentOrder,
+  workedForRowLayout,
+  formatWorkedForDuration,
   onClientEffect,
   children,
 }: AgentKitProviderProps) {
@@ -613,6 +621,8 @@ export function AgentKitProvider({
       onConnectionRequest,
       onRenderError,
       resolveMessageContentOrder,
+      workedForRowLayout,
+      formatWorkedForDuration,
       registerComposerFocus,
       requestComposerFocus,
     }),
@@ -631,6 +641,8 @@ export function AgentKitProvider({
       onConnectionRequest,
       onRenderError,
       resolveMessageContentOrder,
+      workedForRowLayout,
+      formatWorkedForDuration,
       registerComposerFocus,
       requestComposerFocus,
     ],

package/src/app/agentkit/react/index.ts

@@ -4,3 +4,4 @@ export * from "./context.js";
 export * from "./message-content-order.js";
 export * from "./root.js";
 export * from "./streaming-text.js";
+export * from "./transcript-layout.js";

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

@@ -185,7 +185,7 @@ describe("AgentChat lifecycle", () => {
     });
     const tree = mount();
 
-    await tree.render(
+    const renderChat = (enablePostWidgetText: boolean) => (
       <AgentKitProvider
         controller={observable.controller}
         threadId={threadId}
@@ -213,24 +213,152 @@ describe("AgentChat lifecycle", () => {
           },
         }}
         slots={{
-          text: ({ value }) => <span data-chat-part>{value.text}</span>,
+          text: ({ value }) => (
+            <div className="agentkit-markdown" data-chat-part>
+              <p>{value.text}</p>
+            </div>
+          ),
         }}
       >
-        <AgentKitChat composer={false} />
-      </AgentKitProvider>,
+        <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-chat-part")
+      element.hasAttribute("data-post-widget-text")
         ? element.textContent
-        : element.hasAttribute("data-chart-result")
-          ? "chart"
-          : "other",
+        : 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();
   });
 
@@ -1686,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) => ({
@@ -1771,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 }) => (
@@ -1791,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"),
@@ -1821,10 +1967,19 @@ 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(
-      <AgentKitProvider
+      <AgentKitRoot
         controller={observable.controller}
         threadId={threadId}
+        load="manual"
+        workedForRowLayout={workedForRowLayout}
+        formatWorkedForDuration={formatWorkedForDuration}
         registry={{
           activities: {
             reasoning: ({ value }) => (
@@ -1838,8 +1993,12 @@ describe("AgentChat lifecycle", () => {
               {value.text}
             </span>
           ),
-          workedForSummary: ({ label, open, current }) => (
-            <span data-work-summary data-open={open}>
+          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">
                 ›
@@ -1850,12 +2009,15 @@ describe("AgentChat lifecycle", () => {
         }}
       >
         <AgentKitChat composer={false} />
-      </AgentKitProvider>,
+      </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");
@@ -1880,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/root.tsx

@@ -31,6 +31,7 @@ import {
   type AgentKitSlots,
 } from "./context.js";
 import type { AgentMessageContentOrderResolver } from "./message-content-order.js";
+import type { AgentChatWorkedForRowLayout } from "./transcript-layout.js";
 
 const mountedManagedClients = new WeakMap<AgentKitClient, number>();
 
@@ -86,6 +87,8 @@ export interface AgentKitRootBaseProps {
   ) => Promise<AgentConnectionResponse>;
   onRenderError?: (failure: AgentKitRenderFailure) => void;
   resolveMessageContentOrder?: AgentMessageContentOrderResolver;
+  workedForRowLayout?: AgentChatWorkedForRowLayout;
+  formatWorkedForDuration?: (durationMs: number) => string;
   onClientEffect?: (effect: {
     type: "client.effect" | "client.deeplink";
     name: string;
@@ -116,6 +119,8 @@ export function AgentKitRoot({
   onConnectionRequest,
   onRenderError,
   resolveMessageContentOrder,
+  workedForRowLayout,
+  formatWorkedForDuration,
   onClientEffect,
   load = "auto",
   onLoadError,
@@ -294,6 +299,8 @@ export function AgentKitRoot({
       onConnectionRequest={onConnectionRequest}
       onRenderError={onRenderError}
       resolveMessageContentOrder={resolveMessageContentOrder}
+      workedForRowLayout={workedForRowLayout}
+      formatWorkedForDuration={formatWorkedForDuration}
       onClientEffect={onClientEffect}
     >
       {children}