@agent-native/toolkit 0.212.1 → 0.214.0

package/src/composer/ComposerContextBanner.tsx

@@ -0,0 +1,72 @@
+import { IconPlus, IconSparkles, IconX } from "@tabler/icons-react";
+import type { ReactNode } from "react";
+
+import { Button } from "../ui/button.js";
+import { cn } from "../utils.js";
+
+interface ComposerContextBannerBaseProps {
+  /** Localized name for the banner's content. */
+  ariaLabel: string;
+  children: ReactNode;
+  /** Localized label for the action that opens or adds context. */
+  addContextLabel: string;
+  onAddContext: () => void;
+  icon?: ReactNode;
+  className?: string;
+}
+
+export type ComposerContextBannerProps = ComposerContextBannerBaseProps &
+  (
+    | { dismissLabel?: never; onDismiss?: never }
+    | { dismissLabel: string; onDismiss: () => void }
+  );
+
+/** Shared informational banner that hosts can place in `composerContextBannerSlot`. */
+export function ComposerContextBanner({
+  ariaLabel,
+  children,
+  addContextLabel,
+  onAddContext,
+  dismissLabel,
+  onDismiss,
+  icon,
+  className,
+}: ComposerContextBannerProps) {
+  return (
+    <aside
+      aria-label={ariaLabel}
+      data-agent-composer-slot="context-banner"
+      className={cn(
+        "agent-composer-context-banner mx-auto mb-2 flex w-full max-w-3xl items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 py-2 text-xs text-muted-foreground",
+        className,
+      )}
+    >
+      <span className="shrink-0 text-primary">
+        {icon ?? <IconSparkles aria-hidden="true" className="size-4" />}
+      </span>
+      <span className="min-w-0 flex-1">{children}</span>
+      <Button
+        className="shrink-0"
+        onClick={onAddContext}
+        size="xs"
+        type="button"
+        variant="outline"
+      >
+        {addContextLabel}
+        <IconPlus aria-hidden="true" />
+      </Button>
+      {onDismiss ? (
+        <Button
+          aria-label={dismissLabel}
+          className="shrink-0"
+          onClick={onDismiss}
+          size="icon-xs"
+          type="button"
+          variant="ghost"
+        >
+          <IconX aria-hidden="true" />
+        </Button>
+      ) : null}
+    </aside>
+  );
+}

package/src/composer/ComposerModePicker.spec.tsx

@@ -0,0 +1,101 @@
+// @vitest-environment happy-dom
+
+import React, { act, useState } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ComposerModePicker } from "./ComposerModePicker.js";
+
+(
+  globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  document.body.querySelectorAll('[role="menu"]').forEach((element) => {
+    if (!container.contains(element)) element.remove();
+  });
+});
+
+function ModePickerHarness({
+  onChange,
+}: {
+  onChange: (value: string) => void;
+}) {
+  const [value, setValue] = useState("ask");
+  return (
+    <ComposerModePicker
+      ariaLabel="Ask mode"
+      options={[
+        { value: "ask", label: "Ask", description: "Answer with context." },
+        { value: "default", label: "Default" },
+      ]}
+      value={value}
+      onValueChange={(next) => {
+        onChange(next);
+        setValue(next);
+      }}
+    />
+  );
+}
+
+describe("ComposerModePicker", () => {
+  it("shows the selected host option and updates it through the shared menu", async () => {
+    const onChange = vi.fn();
+    await act(async () =>
+      root.render(<ModePickerHarness onChange={onChange} />),
+    );
+
+    const trigger = container.querySelector<HTMLButtonElement>(
+      '[data-agent-composer-slot="mode-picker"]',
+    )!;
+    expect(trigger.getAttribute("aria-label")).toBe("Ask mode: Ask");
+
+    await act(async () => {
+      trigger.dispatchEvent(
+        new MouseEvent("pointerdown", { bubbles: true, button: 0 }),
+      );
+      trigger.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      await Promise.resolve();
+    });
+
+    const defaultOption = Array.from(
+      document.body.querySelectorAll<HTMLElement>('[role="menuitemradio"]'),
+    ).find((option) => option.textContent?.trim() === "Default");
+    expect(defaultOption).toBeDefined();
+    await act(async () => defaultOption!.click());
+
+    expect(onChange).toHaveBeenCalledWith("default");
+    expect(trigger.textContent).toContain("Default");
+    expect(trigger.getAttribute("aria-label")).toBe("Ask mode: Default");
+  });
+
+  it("keeps an unavailable selected value visible instead of choosing another mode", async () => {
+    await act(async () =>
+      root.render(
+        <ComposerModePicker
+          ariaLabel="Ask mode"
+          options={[{ value: "ask", label: "Ask" }]}
+          value="custom"
+          onValueChange={() => {}}
+        />,
+      ),
+    );
+
+    const trigger = container.querySelector<HTMLButtonElement>(
+      '[data-agent-composer-slot="mode-picker"]',
+    );
+    expect(trigger?.textContent).toContain("custom");
+    expect(trigger?.getAttribute("aria-label")).toBe("Ask mode: custom");
+  });
+});

package/src/composer/ComposerModePicker.tsx

@@ -0,0 +1,98 @@
+import { IconChevronDown } from "@tabler/icons-react";
+import type { ReactNode } from "react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu.js";
+import { cn } from "../utils.js";
+
+export interface ComposerModeOption {
+  /** Stable host-defined mode identifier. */
+  value: string;
+  /** Localized visible label supplied by the host. */
+  label: string;
+  /** Optional localized explanation shown in the menu. */
+  description?: string;
+  /** Optional host-provided icon. */
+  icon?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface ComposerModePickerProps {
+  /** Localized accessible name for this choice, such as "Ask mode". */
+  ariaLabel: string;
+  value: string;
+  options: readonly ComposerModeOption[];
+  onValueChange: (value: string) => void;
+  className?: string;
+}
+
+/**
+ * A shared, host-configurable mode picker for composer modes that are not part
+ * of the framework's built-in Act/Plan execution setting.
+ */
+export function ComposerModePicker({
+  ariaLabel,
+  value,
+  options,
+  onValueChange,
+  className,
+}: ComposerModePickerProps) {
+  const selectedOption = options.find((option) => option.value === value);
+  const selectedLabel = selectedOption?.label ?? value;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          aria-label={`${ariaLabel}: ${selectedLabel}`}
+          data-agent-composer-slot="mode-picker"
+          className={cn(
+            "agent-composer-mode-picker inline-flex h-7 max-w-48 shrink-0 items-center gap-1 rounded-md px-2 text-xs font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            className,
+          )}
+        >
+          {selectedOption?.icon}
+          <span className="min-w-0 truncate">{selectedLabel}</span>
+          <IconChevronDown
+            aria-hidden="true"
+            className="size-3 shrink-0 opacity-60"
+          />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        side="top"
+        align="start"
+        collisionPadding={8}
+        className="agent-composer-mode-picker-menu min-w-48"
+      >
+        <DropdownMenuRadioGroup value={value} onValueChange={onValueChange}>
+          {options.map((option) => (
+            <DropdownMenuRadioItem
+              key={option.value}
+              value={option.value}
+              indicator="check"
+              disabled={option.disabled}
+              className="agent-composer-mode-picker-option pe-3"
+            >
+              {option.icon}
+              <span className="min-w-0 flex-1">
+                <span className="block truncate">{option.label}</span>
+                {option.description ? (
+                  <span className="mt-0.5 block whitespace-normal text-xs text-muted-foreground">
+                    {option.description}
+                  </span>
+                ) : null}
+              </span>
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/composer/index.ts

@@ -1,4 +1,13 @@
 export { FileReference } from "./extensions/FileReference.js";
+export {
+  ComposerContextBanner,
+  type ComposerContextBannerProps,
+} from "./ComposerContextBanner.js";
+export {
+  ComposerModePicker,
+  type ComposerModeOption,
+  type ComposerModePickerProps,
+} from "./ComposerModePicker.js";
 export {
   useComposerDefaultActions,
   mergeComposerMenuItems,

package/src/styles.css

@@ -18,6 +18,7 @@
  */
 @import "./theme/resource-icons.css";
 @import "./app-shell/prompt-home.css";
+@import "./app/styles/theme-families.css";
 @import "./app/styles/agent-native.css";
 
 @source "./**/*.{js,ts,tsx}";