@agent-native/toolkit 0.217.0 → 0.219.0

package/src/app/chat/chat/widgets/DataInsightsWidget.tsx

@@ -1,6 +1,7 @@
 import { useT } from "@agent-native/core/client/i18n";
 import { IconDatabase } from "@tabler/icons-react";
 
+import type { AgentChatDataChartLayout } from "../../../agentkit/react/data-chart-layout.js";
 import type { DataWidgetResult } from "./data-widget-types.js";
 import { DataChartWidget } from "./DataChartWidget.js";
 import { DataTableWidget } from "./DataTableWidget.js";
@@ -19,7 +20,13 @@ function SummaryPill({ label, value }: { label: string; value: unknown }) {
   );
 }
 
-export function DataInsightsWidget({ result }: { result: DataWidgetResult }) {
+export function DataInsightsWidget({
+  result,
+  layout,
+}: {
+  result: DataWidgetResult;
+  layout?: AgentChatDataChartLayout;
+}) {
   const t = useT();
   const title =
     result.display?.title ?? result.title ?? t("agentChat.widget.dataInsights");
@@ -49,7 +56,11 @@ export function DataInsightsWidget({ result }: { result: DataWidgetResult }) {
         </div>
       </div>
       {result.chartSeries ? (
-        <DataChartWidget chart={result.chartSeries} display={result.display} />
+        <DataChartWidget
+          chart={result.chartSeries}
+          display={result.display}
+          layout={layout}
+        />
       ) : null}
       {result.table ? (
         <DataTableWidget

package/src/app/chat/chat/widgets/DataWidgetDisplayControls.tsx

@@ -148,7 +148,7 @@ export function DataWidgetDisplayControls({
 }: {
   display?: DataWidgetDisplay;
   chartActions?: DataWidgetChartAction[];
-  variant?: "primary" | "secondary";
+  variant?: "primary" | "secondary" | "quiet";
   kind?: "chart" | "table";
 }) {
   const t = useT();
@@ -219,7 +219,9 @@ export function DataWidgetDisplayControls({
           className={
             variant === "secondary"
               ? "inline-flex max-w-44 items-center gap-1.5 truncate rounded-md border border-border px-2 py-1 text-[11px] font-medium text-foreground no-underline hover:bg-muted hover:no-underline"
-              : "inline-flex max-w-44 items-center gap-1.5 truncate rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground no-underline hover:bg-primary/90 hover:no-underline"
+              : variant === "quiet"
+                ? "inline-flex max-w-44 items-center gap-1.5 truncate rounded-sm px-1 py-0.5 text-[11px] font-medium text-muted-foreground no-underline hover:bg-muted hover:text-foreground hover:no-underline"
+                : "inline-flex max-w-44 items-center gap-1.5 truncate rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground no-underline hover:bg-primary/90 hover:no-underline"
           }
         />
       ) : null}
@@ -230,7 +232,7 @@ export function DataWidgetDisplayControls({
           label={item.action.label}
           icon={item.action.icon}
           iconOnly
-          className="inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className={`inline-flex ${variant === "quiet" ? "size-7" : "size-8"} shrink-0 items-center justify-center rounded-md ${variant === "quiet" ? "" : "border border-border"} text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
         />
       ))}
       {overflowActions.length > 0 ? (
@@ -240,7 +242,7 @@ export function DataWidgetDisplayControls({
               type="button"
               aria-label={actionsLabel}
               title={actionsLabel}
-              className="inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className={`inline-flex ${variant === "quiet" ? "size-7" : "size-8"} shrink-0 items-center justify-center rounded-md ${variant === "quiet" ? "" : "border border-border"} text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring`}
             >
               <IconDotsVertical aria-hidden="true" className="size-4" />
             </button>

package/src/app/chat/chat/widgets/builtin-tool-renderers.tsx

@@ -292,6 +292,7 @@ function renderDataWidget(context: ToolRendererContext) {
         <LazyDataChartWidget
           chart={result.chartSeries}
           display={result.display}
+          layout={context.dataChartLayout}
         />
       </Suspense>
     );
@@ -299,7 +300,10 @@ function renderDataWidget(context: ToolRendererContext) {
   if (widget === DATA_INSIGHTS_WIDGET) {
     return (
       <Suspense fallback={<BuiltinToolRendererSkeleton />}>
-        <LazyDataInsightsWidget result={result} />
+        <LazyDataInsightsWidget
+          result={result}
+          layout={context.dataChartLayout}
+        />
       </Suspense>
     );
   }

package/src/app/chat/chat-first/chat-history.spec.tsx

@@ -92,4 +92,83 @@ describe("ChatFirstChatHistory", () => {
 
     expect(onOpenChats).toHaveBeenCalledOnce();
   });
+
+  it("uses the section rail with independent disclosure and no New chat footer", () => {
+    const onSelect = vi.fn();
+    const onNewChat = vi.fn();
+    act(() => {
+      root.render(
+        <ChatFirstChatHistory
+          sections={[
+            {
+              id: "shared",
+              label: "Shared with you",
+              previewCount: 5,
+              items: Array.from({ length: 6 }, (_, index) => ({
+                id: `shared-${index}`,
+                title: `Shared ${index}`,
+                readOnly: true,
+                ownerAvatar: <span>P</span>,
+                ownerLabel: "pat@example.com",
+                accessLabel: "Shared directly",
+              })),
+            },
+          ]}
+          onSelect={onSelect}
+          onNewChat={onNewChat}
+          showNewChat={false}
+          railLabels={{ newChat: "Start a chat" }}
+        />,
+      );
+    });
+    expect(container.querySelectorAll(".an-chat-history-row")).toHaveLength(5);
+    expect(container.querySelector(".an-chat-history-rail__footer")).toBeNull();
+    expect(
+      container.querySelector(".an-chat-history-row__menu-trigger"),
+    ).toBeNull();
+    expect(
+      container.querySelectorAll(".an-chat-history-row__owner-mark"),
+    ).toHaveLength(5);
+    expect(
+      container.querySelector("[data-chat-first-chat-history-header]"),
+    ).toBeNull();
+    expect(container.textContent).toContain("Shared with you");
+    expect(container.textContent).not.toContain("Chats");
+    const toggle = container.querySelector<HTMLButtonElement>(
+      ".an-chat-history-rail__section-toggle",
+    )!;
+    expect(toggle.textContent).toBe("Show all");
+    act(() => toggle.click());
+    expect(container.querySelectorAll(".an-chat-history-row")).toHaveLength(6);
+    expect(toggle.textContent).toBe("Show less");
+    act(() => {
+      container
+        .querySelector<HTMLButtonElement>(".an-chat-history-row__button")!
+        .click();
+    });
+    expect(onSelect).toHaveBeenCalledWith("shared-0");
+    expect(onNewChat).not.toHaveBeenCalled();
+  });
+
+  it("keeps the required New chat action on the common section footer", () => {
+    const onNewChat = vi.fn();
+    act(() => {
+      root.render(
+        <ChatFirstChatHistory
+          sections={[{ id: "mine", items: [], emptyLabel: "No owned chats" }]}
+          onSelect={() => {}}
+          onNewChat={onNewChat}
+          railLabels={{ newChat: "Start a chat" }}
+        />,
+      );
+    });
+    expect(container.textContent).toContain("No owned chats");
+    const buttons = container.querySelectorAll<HTMLButtonElement>(
+      ".an-chat-history-rail__new-chat",
+    );
+    expect(buttons).toHaveLength(1);
+    expect(buttons[0].textContent).toBe("Start a chat");
+    act(() => buttons[0].click());
+    expect(onNewChat).toHaveBeenCalledOnce();
+  });
 });

package/src/app/chat/chat-first/chat-history.tsx

@@ -1,3 +1,10 @@
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  ChatHistoryRail,
+  type ChatHistoryRailLabels,
+  type ChatHistoryRailProps,
+  type ChatHistoryRailSection,
+} from "@agent-native/toolkit/chat-history/ChatHistoryRail";
 import type { ReactNode } from "react";
 
 import {
@@ -6,23 +13,63 @@ import {
   type ChatHistoryListProps,
 } from "../chat/ChatHistoryList.js";
 
-export interface ChatFirstChatHistoryProps extends Omit<
+interface ChatFirstChatHistoryItemsProps extends Omit<
   ChatHistoryListProps,
   "items" | "sections" | "variant"
 > {
   items: ChatHistoryItem[];
+  sections?: never;
   label?: ReactNode;
   headerAction?: ReactNode;
 }
 
+type ChatFirstChatHistorySectionsProps = Omit<
+  Extract<ChatHistoryRailProps, { sections: ChatHistoryRailSection[] }>,
+  "railLabels" | "renderRail"
+> & {
+  railLabels?: Partial<ChatHistoryRailLabels>;
+  label?: ReactNode;
+  headerAction?: ReactNode;
+};
+
+export type ChatFirstChatHistoryProps =
+  | ChatFirstChatHistoryItemsProps
+  | ChatFirstChatHistorySectionsProps;
+
+function SectionedChatHistory({
+  railLabels,
+  labels,
+  ...props
+}: ChatFirstChatHistorySectionsProps) {
+  const t = useT();
+  return (
+    <ChatHistoryRail
+      {...props}
+      labels={{ copyLink: t("agentChat.history.copyLink"), ...labels }}
+      railLabels={{
+        newChat: t("agentChat.tabs.newChat"),
+        showMore: t("agentChat.history.showAll"),
+        showLess: t("agentChat.history.showLess"),
+        ...railLabels,
+        sections: railLabels?.sections ?? {
+          showAll: t("agentChat.history.showAll"),
+          showLess: t("agentChat.history.showLess"),
+          loadMore: t("agentChat.history.loadMore"),
+          loadingMore: t("agentChat.history.loadingMore"),
+          retry: t("agentChat.history.retry"),
+        },
+      }}
+    />
+  );
+}
+
 export function ChatFirstChatHistory({
-  items,
   label = "Chats",
   headerAction,
   className,
   ...props
 }: ChatFirstChatHistoryProps) {
-  if (items.length === 0) {
+  if (!props.sections && props.items.length === 0) {
     return (
       <section
         data-chat-first-chat-history
@@ -33,30 +80,36 @@ export function ChatFirstChatHistory({
     );
   }
 
+  // Sections carry their own labels (My chats, Shared with you), so a sectioned
+  // list keeps the header only for its action.
+  const showLabel = !props.sections;
   return (
     <section
       data-chat-first-chat-history
       className={["min-h-0 min-w-0", className].filter(Boolean).join(" ")}
     >
-      <div
-        data-chat-first-chat-history-header
-        className="group mb-1 flex min-h-6 items-center justify-between gap-2 px-2"
-      >
-        <p className="min-w-0 text-[11px] font-medium text-sidebar-foreground/50">
-          {label}
-        </p>
-        {headerAction ? (
-          <div className="shrink-0 opacity-0 transition-opacity duration-100 group-hover:opacity-100 group-focus-within:opacity-100">
-            {headerAction}
-          </div>
-        ) : null}
-      </div>
-      <ChatHistoryList
-        {...props}
-        items={items}
-        variant="rail"
-        className="min-w-0"
-      />
+      {showLabel || headerAction ? (
+        <div
+          data-chat-first-chat-history-header
+          className="group mb-1 flex min-h-6 items-center justify-between gap-2 px-2"
+        >
+          {showLabel ? (
+            <p className="min-w-0 text-[11px] font-medium text-sidebar-foreground/50">
+              {label}
+            </p>
+          ) : null}
+          {headerAction ? (
+            <div className="ms-auto shrink-0 opacity-0 transition-opacity duration-100 group-hover:opacity-100 group-focus-within:opacity-100">
+              {headerAction}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+      {props.sections ? (
+        <SectionedChatHistory {...props} className="min-w-0" />
+      ) : (
+        <ChatHistoryList {...props} variant="rail" className="min-w-0" />
+      )}
     </section>
   );
 }

package/src/app/chat/conversation/AgentConversation.spec.tsx

@@ -116,7 +116,9 @@ describe("AgentConversationMessageView", () => {
       id: "example-renderer",
       match: "example-tool",
       Component: ({ context }) => (
-        <div data-testid="example-renderer">{context.resultText}</div>
+        <div data-testid="example-renderer">
+          Custom renderer: {context.resultText}
+        </div>
       ),
     });
     act(() =>
@@ -144,11 +146,59 @@ describe("AgentConversationMessageView", () => {
     expect(container.querySelector('[data-testid="example-renderer"]')).toBe(
       null,
     );
+    expect(container.textContent).not.toContain("Custom renderer:");
+    expect(container.querySelector("pre span")?.textContent).toBe(
+      "Example Document failed.",
+    );
     expect(
       container.querySelector("pre span")?.hasAttribute("data-an-mask"),
     ).toBe(true);
   });
 
+  it.each([
+    ["running", "running"],
+    ["activity", "running"],
+    ["completed", "completed"],
+  ] as const)(
+    "passes %s status to conversation custom renderers as %s",
+    (state, status) => {
+      registerToolRenderer({
+        id: "example-status-renderer",
+        match: "example-status-tool",
+        Component: ({ context }) => (
+          <div data-testid="example-tool-status" data-status={context.status} />
+        ),
+      });
+      act(() =>
+        root.render(
+          <AgentConversationMessageView
+            message={{
+              id: "message-status",
+              role: "assistant",
+              parts: [
+                {
+                  id: "tool-status",
+                  type: "tool",
+                  tool: {
+                    id: "tool-status",
+                    name: "example-status-tool",
+                    state,
+                  },
+                },
+              ],
+            }}
+          />,
+        ),
+      );
+
+      expect(
+        container
+          .querySelector('[data-testid="example-tool-status"]')
+          ?.getAttribute("data-status"),
+      ).toBe(status);
+    },
+  );
+
   it.each(["errored", "completed"] as const)(
     "blocks only an errored tool's MCP App from replays (%s)",
     (state) => {

package/src/app/chat/conversation/AgentConversation.tsx

@@ -17,7 +17,10 @@ import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
 import remarkGfm from "remark-gfm";
 
 import { ActionChatUiSurface } from "../chat/action-chat-ui-surface.js";
-import { resolveToolRenderer } from "../chat/tool-render-registry.js";
+import {
+  resolveToolRenderer,
+  type ToolRendererContext,
+} from "../chat/tool-render-registry.js";
 import {
   isBuiltinConnectRequiredResult,
   resolveBuiltinActionChatRenderer,
@@ -407,11 +410,17 @@ function parseJsonObject(value: string | undefined): Record<string, unknown> {
 function ConversationToolCall({ tool }: { tool: AgentConversationToolCall }) {
   const t = useT();
   const resultJson = parseJsonText(tool.result);
-  const nativeToolContext = {
+  const nativeToolContext: ToolRendererContext = {
     toolName: tool.name,
     args: tool.args ?? parseJsonObject(tool.input),
     resultText: tool.result,
     resultJson: tool.resultJson ?? resultJson,
+    status:
+      tool.state === "errored"
+        ? undefined
+        : tool.state === "activity"
+          ? "running"
+          : tool.state,
     isRunning: tool.state === "running" || tool.state === "activity",
     chatUI: tool.chatUI,
   };

package/src/app/chat/ownership-history/ChatOwnerAvatar.tsx

@@ -0,0 +1,27 @@
+import { useAvatarUrl } from "@agent-native/core/client/use-avatar";
+import { emailToColor } from "@agent-native/toolkit/collab-ui";
+
+/** The 16px owner mark on a shared chat row: profile photo, else a colored initial. */
+export function ChatOwnerAvatar({
+  email,
+  label,
+}: {
+  email: string;
+  label: string;
+}) {
+  const avatarUrl = useAvatarUrl(email);
+  return (
+    <span
+      role="img"
+      aria-label={label}
+      className="an-chat-owner-avatar"
+      style={avatarUrl ? undefined : { backgroundColor: emailToColor(email) }}
+    >
+      {avatarUrl ? (
+        <img src={avatarUrl} alt="" className="an-chat-owner-avatar__image" />
+      ) : (
+        (email.trim().charAt(0) || "?").toUpperCase()
+      )}
+    </span>
+  );
+}

package/src/app/chat/ownership-history/index.tsx

@@ -0,0 +1,67 @@
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  ChatHistoryRail,
+  type ChatHistoryRailLabels,
+  type ChatHistoryRailProps,
+} from "@agent-native/toolkit/chat-history/ChatHistoryRail";
+
+import type { UseOwnershipChatHistoryResult } from "./useOwnershipChatHistory.js";
+
+export {
+  ownDraftRows,
+  chatThreadToHistoryItem,
+  type OwnDraftRow,
+  type OwnDraftRowsOptions,
+  type ChatThreadHistoryItemOptions,
+} from "./rows.js";
+export {
+  useOwnershipChatHistory,
+  type UseOwnershipChatHistoryOptions,
+  type UseOwnershipChatHistoryResult,
+  type OwnershipChatHistoryMutationKind,
+  type OwnershipChatHistorySection,
+  type OwnershipChatHistoryListProps,
+} from "./useOwnershipChatHistory.js";
+
+export type OwnershipChatHistoryRailProps = Omit<
+  ChatHistoryRailProps,
+  "items" | "sections" | "railLabels" | "loading" | "error"
+> &
+  Pick<UseOwnershipChatHistoryResult, "sections" | "listProps"> & {
+    railLabels?: Partial<ChatHistoryRailLabels>;
+    loading?: boolean;
+    error?: Error | null;
+  };
+
+export function OwnershipChatHistoryRail({
+  sections,
+  listProps,
+  railLabels,
+  labels,
+  loading: _loading,
+  error: _error,
+  ...props
+}: OwnershipChatHistoryRailProps) {
+  const t = useT();
+  return (
+    <ChatHistoryRail
+      {...listProps}
+      {...props}
+      labels={{ copyLink: t("agentChat.history.copyLink"), ...labels }}
+      sections={sections}
+      railLabels={{
+        newChat: t("agentChat.tabs.newChat"),
+        showMore: t("agentChat.history.showAll"),
+        showLess: t("agentChat.history.showLess"),
+        ...railLabels,
+        sections: railLabels?.sections ?? {
+          showAll: t("agentChat.history.showAll"),
+          showLess: t("agentChat.history.showLess"),
+          loadMore: t("agentChat.history.loadMore"),
+          loadingMore: t("agentChat.history.loadingMore"),
+          retry: t("agentChat.history.retry"),
+        },
+      }}
+    />
+  );
+}