@agent-native/toolkit 0.213.1 → 0.214.0

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,
     ],

package/src/app/chat/chat/surface-types.ts

@@ -26,6 +26,8 @@ import type {
 import type { ExportedMessageRepository } from "@assistant-ui/react";
 import type * as React from "react";
 
+import type { AgentKitWorkedForSummaryRenderProps } from "../../agentkit/react/context.js";
+import type { AgentMessageContentOrderResolver } from "../../agentkit/react/message-content-order.js";
 import type { AssistantChatHistoryConfig } from "./history-types.js";
 import type { BuilderSetupCardLayout } from "./run-recovery.js";
 
@@ -267,6 +269,12 @@ export interface AssistantChatProps {
   ) => void;
   /** Optional content rendered just above the composer input */
   composerSlot?: React.ReactNode;
+  /** Optional shared context banner rendered above the composer input. */
+  composerContextBannerSlot?: React.ReactNode;
+  /** Optional renderer for the shared work-summary disclosure row. */
+  workedForSummarySlot?: React.ComponentType<AgentKitWorkedForSummaryRenderProps>;
+  /** Optional ordering policy for assistant message text and attached widgets. */
+  resolveMessageContentOrder?: AgentMessageContentOrderResolver;
   /** App-owned context controller, mounted separately for each chat thread. */
   composerContextProvider?: React.ComponentType<AssistantChatComposerContextProviderProps>;
   /** Optional home content rendered above the composer on an empty chat. */

package/src/app/chat/chat/widgets/DataChartRenderer.spec.tsx

@@ -0,0 +1,217 @@
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+
+import type { DataChartWidget as DataChartWidgetData } from "./data-widget-types.js";
+
+vi.mock("@agent-native/core/client/i18n", () => ({
+  useT: () => (key: string) => key,
+}));
+
+import { DataChartRenderer } from "./DataChartRenderer.js";
+
+const chart: DataChartWidgetData = {
+  type: "bar",
+  xKey: "day",
+  series: [
+    { key: "first", label: "First" },
+    { key: "second", label: "Second" },
+    { key: "third", label: "Third" },
+    { key: "fourth", label: "Fourth" },
+  ],
+  data: [{ day: "Monday", first: 1, second: 2, third: 3, fourth: 4 }],
+};
+
+describe("DataChartRenderer theme colors", () => {
+  it("resolves its series colors through app chart tokens with legacy fallbacks", () => {
+    const markup = renderToStaticMarkup(<DataChartRenderer chart={chart} />);
+
+    expect(markup).toContain('viewBox="0 0 640 360"');
+    expect(markup).toContain("block w-full h-auto");
+    expect(markup).not.toContain("style=");
+    expect(markup).not.toContain("preserveAspectRatio");
+    expect(markup).not.toContain("h-60");
+    expect(markup).toContain('fill="hsl(var(--chart-1, var(--primary)))"');
+    expect(markup).toContain('fill="hsl(var(--chart-2, 199 89% 48%))"');
+    expect(markup).toContain('fill="hsl(var(--chart-3, 151 55% 42%))"');
+    expect(markup).toContain('fill="hsl(var(--chart-4, 35 92% 50%))"');
+  });
+
+  it("uses the requested chart content height", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer chart={{ ...chart, contentHeight: 400 }} />,
+    );
+
+    expect(markup).toContain('style="height:400px;padding:0px"');
+    expect(markup).toContain(
+      'class="agent-data-chart-renderer block w-full h-full"',
+    );
+    expect(markup).toContain('viewBox="0 0 640 360"');
+    expect(markup).toContain('preserveAspectRatio="none"');
+  });
+
+  it("fits labels and the chart canvas inside a padded body box", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer
+        chart={{
+          ...chart,
+          contentHeight: 400,
+          contentPadding: 16,
+          labelFontFamily: "sans",
+          labelFontSize: 14,
+        }}
+      />,
+    );
+
+    expect(markup).toContain('style="height:400px;padding:16px"');
+    expect(markup).toContain(
+      'font-family="var(--font-sans, ui-sans-serif, system-ui, sans-serif)"',
+    );
+    expect(markup).toContain('font-size="14"');
+  });
+
+  it("renders optional horizontal titles and value labels with their font roles", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer
+        chart={{
+          ...chart,
+          layout: "horizontal",
+          xAxisTitle: "Value",
+          yAxisTitle: "Category",
+          showValueLabels: true,
+          labelFontSize: 10,
+          axisTitleFontSize: 11,
+          axisTitleFontWeight: 500,
+          valueLabelFontSize: 11,
+          valueLabelFontWeight: 400,
+        }}
+      />,
+    );
+
+    expect(markup).toContain(">Value</text>");
+    expect(markup).toContain(">Category</text>");
+    expect(markup).toContain('font-size="10"');
+    expect(markup).toContain('font-size="11"');
+    expect(markup).toContain('font-weight="500"');
+    expect(markup).toContain('font-weight="400"');
+    expect(markup).toContain('text-anchor="start"');
+    expect(markup).toContain('viewBox="0 0 640 360"');
+  });
+
+  it("reserves space for long horizontal category and value labels", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer
+        chart={{
+          ...chart,
+          layout: "horizontal",
+          showValueLabels: true,
+          labelFontSize: 10,
+          valueLabelFontSize: 11,
+          data: [
+            {
+              day: "A very long category label",
+              first: 123456,
+              second: 2,
+              third: 3,
+              fourth: 4,
+            },
+          ],
+        }}
+      />,
+    );
+    const categoryLabel = markup.match(
+      /<text x="([\d.]+)" y="[^"]+" fill="hsl\(var\(--muted-foreground\)\)" font-size="10" text-anchor="end">A very long c\.\.\.<\/text>/,
+    );
+    const largestValueLabel = markup.match(
+      /<text x="([\d.]+)" y="[^"]+" fill="hsl\(var\(--muted-foreground\)\)" font-size="11" font-weight="400" text-anchor="start">123,456<\/text>/,
+    );
+
+    expect(categoryLabel).not.toBeNull();
+    expect(Number(categoryLabel?.[1])).toBeGreaterThan(100);
+    expect(largestValueLabel).not.toBeNull();
+    expect(Number(largestValueLabel?.[1])).toBeLessThan(590);
+  });
+
+  it("places negative horizontal value labels outside the bar's left edge", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer
+        chart={{
+          type: "bar",
+          layout: "horizontal",
+          xKey: "day",
+          series: [{ key: "value", label: "Value" }],
+          data: [{ day: "Monday", value: -123456 }],
+          showValueLabels: true,
+        }}
+      />,
+    );
+    const negativeBarX = markup.match(/<rect x="([\d.]+)"/);
+    const negativeBarLabel = markup.match(
+      /<text x="([\d.]+)"[^>]*text-anchor="end">-123,456<\/text>/,
+    );
+    const categoryLabel = markup.match(
+      /<text x="([\d.]+)" y="[^"]+" fill="hsl\(var\(--muted-foreground\)\)" font-size="11" text-anchor="end">Monday<\/text>/,
+    );
+
+    expect(negativeBarX).not.toBeNull();
+    expect(negativeBarLabel).not.toBeNull();
+    expect(Number(negativeBarLabel?.[1])).toBeLessThan(
+      Number(negativeBarX?.[1]),
+    );
+    expect(categoryLabel).not.toBeNull();
+    expect(
+      Number(negativeBarLabel?.[1]) - Number(categoryLabel?.[1]),
+    ).toBeGreaterThan(60);
+  });
+
+  it.each(["line", "area"] as const)(
+    "renders requested value labels for %s charts",
+    (type) => {
+      const markup = renderToStaticMarkup(
+        <DataChartRenderer
+          chart={{
+            type,
+            xKey: "day",
+            series: [{ key: "value", label: "Value" }],
+            data: [
+              { day: "Monday", value: 4 },
+              { day: "Tuesday", value: 11 },
+              { day: "Wednesday", value: 7 },
+            ],
+            showValueLabels: true,
+          }}
+        />,
+      );
+
+      expect(markup).toContain(">7</text>");
+      expect(markup).toContain('font-weight="400"');
+    },
+  );
+
+  it.each(["line", "area"] as const)(
+    "keeps the final %s value label inside the chart bounds",
+    (type) => {
+      const markup = renderToStaticMarkup(
+        <DataChartRenderer
+          chart={{
+            type,
+            xKey: "day",
+            series: [{ key: "value", label: "Value" }],
+            data: [
+              { day: "Monday", value: 4 },
+              { day: "Tuesday", value: 11 },
+              { day: "Wednesday", value: 123456789 },
+            ],
+            showValueLabels: true,
+          }}
+        />,
+      );
+      const finalValueLabel = markup.match(
+        /<text x="([\d.]+)" y="[\d.]+" fill="hsl\(var\(--muted-foreground\)\)" font-size="11" font-weight="400" text-anchor="end">123,456,789<\/text>/,
+      );
+
+      expect(finalValueLabel).not.toBeNull();
+      expect(Number(finalValueLabel?.[1])).toBeLessThan(640);
+    },
+  );
+});