@agent-native/toolkit 0.212.1 → 0.214.0

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

@@ -0,0 +1,246 @@
+import type {
+  AgentEvent,
+  AgentMessage,
+  AgentMessagePart,
+  AgentWidget,
+} from "@agent-native/agentkit/protocol";
+
+export type AgentMessageContentItem =
+  | { key: string; type: "part"; part: AgentMessagePart }
+  | { key: string; type: "widget"; widget: AgentWidget };
+
+export interface AgentMessageContentOrderInput {
+  message: AgentMessage;
+  parts: AgentMessagePart[];
+  widgets: AgentWidget[];
+  events: AgentEvent[];
+  defaultOrder: AgentMessageContentItem[];
+}
+
+export type AgentMessageContentOrderResolver = (
+  input: AgentMessageContentOrderInput,
+) => AgentMessageContentItem[];
+
+type TextContentOrderItem = Extract<
+  AgentMessageContentItem,
+  { type: "part" }
+> & {
+  part: Extract<AgentMessagePart, { type: "text" }>;
+};
+
+function isTextContentOrderItem(
+  item: AgentMessageContentItem | null | undefined,
+): item is TextContentOrderItem {
+  return (
+    item?.type === "part" &&
+    typeof item.key === "string" &&
+    item.part?.type === "text" &&
+    typeof item.part.text === "string"
+  );
+}
+
+function resolvedItemsPreserveContent(
+  defaultOrder: AgentMessageContentItem[],
+  resolvedOrder: AgentMessageContentItem[],
+): AgentMessageContentItem[] | undefined {
+  if (!Array.isArray(resolvedOrder)) return undefined;
+
+  const defaultText = defaultOrder
+    .filter(isTextContentOrderItem)
+    .map((item) => item.part.text)
+    .join("");
+  const resolvedText = resolvedOrder
+    .filter(isTextContentOrderItem)
+    .map((item) => item.part.text)
+    .join("");
+  if (defaultText !== resolvedText) return undefined;
+
+  const expectedItems = new Map<string, AgentMessageContentItem[]>();
+  for (const item of defaultOrder) {
+    if (item.type === "part" && item.part.type === "text") continue;
+    const identity = `${item.type}:${item.key}`;
+    const matchingItems = expectedItems.get(identity) ?? [];
+    matchingItems.push(item);
+    expectedItems.set(identity, matchingItems);
+  }
+
+  const preservedItems: AgentMessageContentItem[] = [];
+  for (const item of resolvedOrder) {
+    if (!item || typeof item !== "object") return undefined;
+    if (item.type === "part" && item.part?.type === "text") {
+      if (typeof item.key !== "string" || typeof item.part.text !== "string") {
+        return undefined;
+      }
+      preservedItems.push(item);
+      continue;
+    }
+
+    if (
+      (item.type !== "part" && item.type !== "widget") ||
+      typeof item.key !== "string"
+    ) {
+      return undefined;
+    }
+
+    const identity = `${item.type}:${item.key}`;
+    const matchingItems = expectedItems.get(identity);
+    const original = matchingItems?.shift();
+    if (!original) return undefined;
+    preservedItems.push(original);
+  }
+
+  if (
+    [...expectedItems.values()].some((matchingItems) => matchingItems.length)
+  ) {
+    return undefined;
+  }
+  return preservedItems;
+}
+
+/** Uses the stream timeline only when it reconstructs the saved text exactly. */
+export function orderMessageContent(
+  message: AgentMessage,
+  visibleParts: AgentMessagePart[],
+  attachedWidgets: AgentWidget[],
+  events: AgentEvent[],
+  resolveOrder?: AgentMessageContentOrderResolver,
+): AgentMessageContentItem[] {
+  const fallback = [
+    ...visibleParts.map((part, index) => ({
+      key: `${message.id}-${index}`,
+      type: "part" as const,
+      part,
+    })),
+    ...attachedWidgets.map((widget) => ({
+      key: widget.id,
+      type: "widget" as const,
+      widget,
+    })),
+  ];
+  const resolve = (defaultOrder: AgentMessageContentItem[]) => {
+    const resolvedOrder = resolveOrder?.({
+      message,
+      parts: visibleParts,
+      widgets: attachedWidgets,
+      events,
+      defaultOrder,
+    });
+    if (resolvedOrder == null) return defaultOrder;
+    return (
+      resolvedItemsPreserveContent(defaultOrder, resolvedOrder) ?? defaultOrder
+    );
+  };
+
+  if (
+    attachedWidgets.length === 0 ||
+    message.parts.length !== 1 ||
+    message.parts[0]?.type !== "text" ||
+    visibleParts.length !== 1 ||
+    visibleParts[0]?.type !== "text" ||
+    visibleParts[0].text !== message.parts[0].text
+  ) {
+    return resolve(fallback);
+  }
+
+  const widgetIds = new Set(attachedWidgets.map((widget) => widget.id));
+  const widgetOffsets = new Map<string, number>();
+  const widgetEventOrder = new Map<string, number>();
+  let reconstructedText = "";
+  let textOffset = 0;
+
+  for (const [eventIndex, event] of events.entries()) {
+    if (event.type === "message.created" && event.message.id === message.id) {
+      const createdParts = event.message.parts;
+      if (
+        createdParts.length > 1 ||
+        createdParts.some((part) => part.type !== "text")
+      ) {
+        return resolve(fallback);
+      }
+      reconstructedText =
+        createdParts[0]?.type === "text" ? createdParts[0].text : "";
+      textOffset = reconstructedText.length;
+      continue;
+    }
+
+    if (event.type === "message.delta" && event.messageId === message.id) {
+      reconstructedText += event.text;
+      textOffset += event.text.length;
+      continue;
+    }
+
+    if (
+      (event.type === "widget.created" || event.type === "widget.updated") &&
+      event.messageId === message.id &&
+      widgetIds.has(event.widget.id) &&
+      !widgetOffsets.has(event.widget.id)
+    ) {
+      widgetOffsets.set(event.widget.id, textOffset);
+      widgetEventOrder.set(event.widget.id, eventIndex);
+    }
+  }
+
+  const fullText = message.parts[0].text;
+  if (
+    reconstructedText !== fullText ||
+    widgetOffsets.size !== attachedWidgets.length ||
+    [...widgetOffsets.values()].some((offset) => {
+      if (offset === 0 || offset === fullText.length) return false;
+      const preceding = fullText.charCodeAt(offset - 1);
+      const following = fullText.charCodeAt(offset);
+      return (
+        preceding >= 0xd800 &&
+        preceding <= 0xdbff &&
+        following >= 0xdc00 &&
+        following <= 0xdfff
+      );
+    })
+  ) {
+    return resolve(fallback);
+  }
+
+  const widgetsAtOffset = new Map<number, AgentWidget[]>();
+  for (const widget of attachedWidgets) {
+    const offset = widgetOffsets.get(widget.id)!;
+    const widgets = widgetsAtOffset.get(offset) ?? [];
+    widgets.push(widget);
+    widgetsAtOffset.set(offset, widgets);
+  }
+  for (const widgets of widgetsAtOffset.values()) {
+    widgets.sort(
+      (first, second) =>
+        widgetEventOrder.get(first.id)! - widgetEventOrder.get(second.id)!,
+    );
+  }
+
+  const insertions = [...widgetsAtOffset.entries()].sort(
+    ([first], [second]) => first - second,
+  );
+  const part = visibleParts[0];
+  if (part.type !== "text") return resolve(fallback);
+
+  const ordered: AgentMessageContentItem[] = [];
+  let cursor = 0;
+  for (const [offset, widgets] of insertions) {
+    if (offset > cursor) {
+      ordered.push({
+        key: `${message.id}-text-${cursor}`,
+        type: "part",
+        part: { ...part, text: part.text.slice(cursor, offset) },
+      });
+    }
+    for (const widget of widgets) {
+      ordered.push({ key: widget.id, type: "widget", widget });
+    }
+    cursor = offset;
+  }
+  if (cursor < part.text.length) {
+    ordered.push({
+      key: `${message.id}-text-${cursor}`,
+      type: "part",
+      part: { ...part, text: part.text.slice(cursor) },
+    });
+  }
+
+  return resolve(ordered);
+}

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

@@ -30,6 +30,7 @@ import {
   type AgentKitRunUsageLoader,
   type AgentKitSlots,
 } from "./context.js";
+import type { AgentMessageContentOrderResolver } from "./message-content-order.js";
 
 const mountedManagedClients = new WeakMap<AgentKitClient, number>();
 
@@ -84,6 +85,7 @@ export interface AgentKitRootBaseProps {
     request: AgentConnectionRequest,
   ) => Promise<AgentConnectionResponse>;
   onRenderError?: (failure: AgentKitRenderFailure) => void;
+  resolveMessageContentOrder?: AgentMessageContentOrderResolver;
   onClientEffect?: (effect: {
     type: "client.effect" | "client.deeplink";
     name: string;
@@ -113,6 +115,7 @@ export function AgentKitRoot({
   loadRunUsage,
   onConnectionRequest,
   onRenderError,
+  resolveMessageContentOrder,
   onClientEffect,
   load = "auto",
   onLoadError,
@@ -290,6 +293,7 @@ export function AgentKitRoot({
       loadRunUsage={loadRunUsage}
       onConnectionRequest={onConnectionRequest}
       onRenderError={onRenderError}
+      resolveMessageContentOrder={resolveMessageContentOrder}
       onClientEffect={onClientEffect}
     >
       {children}

package/src/app/agentkit/react/styles.css

@@ -1216,7 +1216,7 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
   inline-size: fit-content;
   max-inline-size: 100%;
   align-items: center;
-  gap: 0.375rem;
+  gap: 1rem;
 }
 
 .agentkit-activities {
@@ -1418,7 +1418,7 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
 }
 
 .agentkit-activities-summary > .agentkit-summary-chevron {
-  opacity: 0;
+  opacity: 1;
 }
 
 .agentkit-activities[data-expandable="true"]

package/src/app/chat/AgentKitAssistantChat.spec.tsx

@@ -3348,6 +3348,25 @@ describe("AgentKitAssistantChat host behavior", () => {
     expect(container.querySelector(".agentkit-home-intro")).toBeNull();
   });
 
+  it("renders the shared context banner slot alongside the existing composer slot", async () => {
+    await mount(
+      baseProps({
+        composerSlot: <div data-testid="legacy-composer-slot">Notice</div>,
+        composerContextBannerSlot: (
+          <div data-testid="composer-context-banner-slot">Add context</div>
+        ),
+      }),
+    );
+
+    const composer = container.querySelector(".agentkit-host-composer")!;
+    expect(
+      composer.querySelector('[data-testid="legacy-composer-slot"]'),
+    ).not.toBeNull();
+    expect(
+      composer.querySelector('[data-testid="composer-context-banner-slot"]'),
+    ).not.toBeNull();
+  });
+
   it("puts the beginning revert before messages inside the scrollable transcript", async () => {
     chatMocks.thread.messages = [
       { id: "first-message", role: "user", parts: [] },

package/src/app/chat/AgentKitAssistantChat.tsx

@@ -2093,9 +2093,17 @@ export const AgentKitAssistantChat = forwardRef<
           threadId={threadId}
           load={agentKitLoad}
           onLoadError={onThreadRestoreLoadError}
-          slots={agentKitSlots}
+          slots={
+            props.workedForSummarySlot
+              ? {
+                  ...agentKitSlots,
+                  workedForSummary: props.workedForSummarySlot,
+                }
+              : agentKitSlots
+          }
           registry={agentKitRegistry}
           labels={labels}
+          resolveMessageContentOrder={props.resolveMessageContentOrder}
           branchNavigation={props.branchNavigation}
           loadRunUsage={loadRunUsage}
           buildFeedbackReport={formatFeedbackReport}
@@ -5979,6 +5987,7 @@ function AgentKitComposerSurface({
             })}
       />
       {props.composerSlot}
+      {props.composerContextBannerSlot}
       {showHomeIntro ? (
         <div className="agentkit-home-intro">{props.homeIntroSlot}</div>
       ) : null}

package/src/app/chat/AgentPanel.header.spec.ts

@@ -31,6 +31,8 @@ import {
   shouldHandleAgentSidebarToggle,
   shouldHandleAgentPanelChatShortcut,
   shouldShowAgentPanelFullViewAction,
+  resolveAgentPanelPageHeaderActions,
+  resolveAgentPanelPageToolbarSlot,
   shouldShowAgentPanelPageHeader,
   shouldShowAgentPanelPageNewChatButton,
   shouldShowAgentPanelChatTabBar,
@@ -350,22 +352,60 @@ describe("AgentPanel header tab visibility", () => {
     expect(shouldDefaultAgentChatSurfacePageHeader(undefined)).toBe(false);
   });
 
-  it("exposes page header composition without moving it into app chrome", () => {
-    const source = readSource("src/app/chat/AgentPanel.tsx", "utf8");
+  it("keeps share and host toolbar actions when the title menu is hidden", async () => {
+    expect(
+      resolveAgentPanelPageHeaderActions({
+        showPageTitleMenu: false,
+        canShareActiveTab: true,
+      }),
+    ).toEqual({ showPageTitleMenu: false, showShareAction: true });
 
-    expect(source).toContain('data-agent-page-chat-header=""');
-    expect(source).toContain("pageHeaderLeadingSlot");
-    expect(source).toContain("pageToolbarSlot");
-    expect(source).toContain("activeTab?.label");
-    expect(source).toContain('data-agent-page-title-menu=""');
-    expect(source).toContain("<IconShare3 size={15}");
-    expect(source.indexOf("<IconShare3 size={15}")).toBeLessThan(
-      source.indexOf(
-        "{pageToolbarSlot}",
-        source.indexOf("triggerContent={<IconShare3"),
-      ),
+    const container = document.createElement("div");
+    document.body.append(container);
+    const root = createRoot(container);
+    const toggleHistory = vi.fn();
+    const clearActiveTab = vi.fn();
+    const toolbar = resolveAgentPanelPageToolbarSlot(
+      (actions) =>
+        React.createElement(
+          "div",
+          null,
+          React.createElement(
+            "button",
+            { onClick: actions.toggleHistory },
+            actions.showHistory ? "Hide chats" : "All chats",
+          ),
+          actions.activeTabMessageCount > 0
+            ? React.createElement(
+                "button",
+                { onClick: actions.clearActiveTab },
+                "Clear chat",
+              )
+            : null,
+        ),
+      {
+        activeTabMessageCount: 2,
+        clearActiveTab,
+        showHistory: false,
+        toggleHistory,
+      },
     );
-    expect(source).toContain("border-b border-border/70");
+
+    try {
+      await act(async () => root.render(toolbar));
+      const buttons = container.querySelectorAll("button");
+      expect([...buttons].map((button) => button.textContent)).toEqual([
+        "All chats",
+        "Clear chat",
+      ]);
+      await act(async () => buttons[0]?.click());
+      await act(async () => buttons[1]?.click());
+      expect(toggleHistory).toHaveBeenCalledOnce();
+      expect(clearActiveTab).toHaveBeenCalledOnce();
+    } finally {
+      await act(async () => root.unmount());
+      container.remove();
+    }
   });
 
   it("normalizes legacy and unknown modes back to chat", () => {
@@ -1193,6 +1233,24 @@ describe("AgentChatSurface chrome defaults", () => {
     expect(surface.props.showHeader).toBe(true);
     expect(surface.props.showTabBar).toBe(true);
   });
+
+  it("allows a page host to hide only the title menu", () => {
+    const surface = AgentChatSurface({
+      mode: "page",
+      showPageTitleMenu: false,
+    });
+    const panel = surface.props.children[1];
+    const headerActions = resolveAgentPanelPageHeaderActions({
+      showPageTitleMenu: false,
+      canShareActiveTab: true,
+    });
+
+    expect(panel.props.showPageTitleMenu).toBe(false);
+    expect(headerActions).toEqual({
+      showPageTitleMenu: false,
+      showShareAction: true,
+    });
+  });
 });
 
 describe("AgentPanel stale lazy chunk recovery", () => {

package/src/app/chat/AgentPanel.tsx

@@ -441,6 +441,30 @@ export function shouldShowAgentPanelPageHeader(
   );
 }
 
+export function resolveAgentPanelPageHeaderActions({
+  showPageTitleMenu = true,
+  canShareActiveTab,
+}: {
+  showPageTitleMenu?: boolean;
+  canShareActiveTab: boolean;
+}) {
+  return { showPageTitleMenu, showShareAction: canShareActiveTab };
+}
+
+export type AgentPanelPageToolbarActions = Pick<
+  MultiTabAssistantChatHeaderCallbackProps,
+  "activeTabMessageCount" | "clearActiveTab" | "showHistory" | "toggleHistory"
+>;
+
+export function resolveAgentPanelPageToolbarSlot(
+  slot:
+    | React.ReactNode
+    | ((actions: AgentPanelPageToolbarActions) => React.ReactNode),
+  actions: AgentPanelPageToolbarActions,
+) {
+  return typeof slot === "function" ? slot(actions) : slot;
+}
+
 export function shouldShowAgentPanelCliTabBar(cliTabs: string[]) {
   return cliTabs.length > 1;
 }
@@ -583,8 +607,13 @@ export interface AgentPanelProps extends Omit<
   showPageNewChatButton?: boolean;
   showPageHeader?: boolean;
   showPageHeaderWhenEmpty?: boolean;
+  /** Hide the default page title menu while keeping the shared page actions. */
+  showPageTitleMenu?: boolean;
   pageHeaderLeadingSlot?: React.ReactNode;
-  pageToolbarSlot?: React.ReactNode;
+  /** Render host page actions alongside Share, with the active chat controls. */
+  pageToolbarSlot?:
+    | React.ReactNode
+    | ((actions: AgentPanelPageToolbarActions) => React.ReactNode);
   onPageHeaderVisibilityChange?: (visible: boolean) => void;
   chatOnly?: boolean;
   agentPageHref?: string;
@@ -778,6 +807,7 @@ function AgentPanelInner({
   showPageNewChatButton = false,
   showPageHeader = false,
   showPageHeaderWhenEmpty = false,
+  showPageTitleMenu = true,
   pageHeaderLeadingSlot,
   pageToolbarSlot,
   onPageHeaderVisibilityChange,
@@ -1694,11 +1724,16 @@ function AgentPanelInner({
         showPageHeaderWhenEmpty,
         activeTabIsPersisted,
       );
-      const canShareActiveTab =
+      const canShareActiveTab = Boolean(
         activeTab &&
         (activeTabIsPersisted ||
           activeTabMessageCount > 0 ||
-          activeTab.status !== "idle");
+          activeTab.status !== "idle"),
+      );
+      const pageHeaderActions = resolveAgentPanelPageHeaderActions({
+        showPageTitleMenu,
+        canShareActiveTab,
+      });
       const showNewChatAction =
         showPageNewChatButton &&
         shouldShowAgentPanelPageNewChatButton(
@@ -1707,6 +1742,12 @@ function AgentPanelInner({
           activeTabMessageCount,
           activeTabIsPersisted,
         );
+      const toolbarSlot = resolveAgentPanelPageToolbarSlot(pageToolbarSlot, {
+        activeTabMessageCount,
+        clearActiveTab,
+        showHistory,
+        toggleHistory,
+      });
 
       return (
         <>
@@ -1730,62 +1771,64 @@ function AgentPanelInner({
                   <h1 className="truncate text-xs font-medium text-foreground">
                     {activeTab?.label || t("agentPanel.newChat")}
                   </h1>
-                  <DropdownMenu
-                    open={headerMenuOpen}
-                    onOpenChange={setHeaderMenuOpen}
-                  >
-                    <DropdownMenuTrigger asChild>
-                      <button
-                        type="button"
-                        data-agent-page-title-menu=""
-                        aria-label={t("agentPanel.panelOptions")}
-                        className="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-foreground"
-                      >
-                        <IconDotsVertical size={14} />
-                      </button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent
-                      align="start"
-                      sideOffset={5}
-                      className="w-44"
-                      onCloseAutoFocus={(event) => {
-                        consumeAgentPanelOverlayFocusRestore(
-                          pendingHeaderOverlayRef,
-                          event,
-                        );
-                      }}
+                  {pageHeaderActions.showPageTitleMenu ? (
+                    <DropdownMenu
+                      open={headerMenuOpen}
+                      onOpenChange={setHeaderMenuOpen}
                     >
-                      {toggleHistory ? (
-                        <DropdownMenuItem
-                          onSelect={(event) =>
-                            deferAgentPanelOverlayOpen(
-                              event,
-                              closeHeaderMenuForOverlay,
-                              toggleHistory,
-                              pendingHeaderOverlayRef,
-                            )
-                          }
+                      <DropdownMenuTrigger asChild>
+                        <button
+                          type="button"
+                          data-agent-page-title-menu=""
+                          aria-label={t("agentPanel.panelOptions")}
+                          className="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-foreground"
                         >
-                          <IconHistory size={14} className="shrink-0" />
-                          {showHistory
-                            ? t("agentPanel.hideChats")
-                            : t("agentPanel.allChats")}
-                        </DropdownMenuItem>
-                      ) : null}
-                      {activeTabMessageCount > 0 ? (
-                        <DropdownMenuItem onSelect={clearActiveTab}>
-                          <IconX size={14} className="shrink-0" />
-                          {t("agentPanel.clearChat")}
-                        </DropdownMenuItem>
-                      ) : null}
-                    </DropdownMenuContent>
-                  </DropdownMenu>
+                          <IconDotsVertical size={14} />
+                        </button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        align="start"
+                        sideOffset={5}
+                        className="w-44"
+                        onCloseAutoFocus={(event) => {
+                          consumeAgentPanelOverlayFocusRestore(
+                            pendingHeaderOverlayRef,
+                            event,
+                          );
+                        }}
+                      >
+                        {toggleHistory ? (
+                          <DropdownMenuItem
+                            onSelect={(event) =>
+                              deferAgentPanelOverlayOpen(
+                                event,
+                                closeHeaderMenuForOverlay,
+                                toggleHistory,
+                                pendingHeaderOverlayRef,
+                              )
+                            }
+                          >
+                            <IconHistory size={14} className="shrink-0" />
+                            {showHistory
+                              ? t("agentPanel.hideChats")
+                              : t("agentPanel.allChats")}
+                          </DropdownMenuItem>
+                        ) : null}
+                        {activeTabMessageCount > 0 ? (
+                          <DropdownMenuItem onSelect={clearActiveTab}>
+                            <IconX size={14} className="shrink-0" />
+                            {t("agentPanel.clearChat")}
+                          </DropdownMenuItem>
+                        ) : null}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  ) : null}
                   {activeTab?.status === "running" ? (
                     <span className="size-1.5 shrink-0 rounded-full bg-muted-foreground/55 animate-pulse motion-reduce:animate-none" />
                   ) : null}
                 </div>
                 <div className="flex shrink-0 items-center gap-1">
-                  {canShareActiveTab ? (
+                  {pageHeaderActions.showShareAction && activeTab ? (
                     <ShareButton
                       resourceType="chat_thread"
                       resourceId={activeTab.id}
@@ -1798,7 +1841,7 @@ function AgentPanelInner({
                       triggerClassName="size-8 p-0 border-0 bg-transparent shadow-none hover:bg-accent/60"
                     />
                   ) : null}
-                  {pageToolbarSlot}
+                  {toolbarSlot}
                   {showNewChatAction ? (
                     <button
                       type="button"
@@ -1829,6 +1872,7 @@ function AgentPanelInner({
       pageToolbarSlot,
       pendingHeaderOverlayRef,
       setHeaderMenuOpen,
+      showPageTitleMenu,
       showPageNewChatButton,
       t,
     ],