@agent-native/toolkit 0.21.2 → 0.21.3-nightly-20260926043001

package/dist/composer/AgentComposerFrame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgentComposerFrame.d.ts","sourceRoot":"","sources":["../../src/composer/AgentComposerFrame.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAE7D,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kFAAkF;IAClF,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,aAAa,CAAC,EAAE,0BAA0B,CAAC;IAC3C,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,KAAK,EACL,SAAS,EACT,aAAyB,EACzB,OAAO,GACR,EAAE,uBAAuB,qBAgDzB"}
+{"version":3,"file":"AgentComposerFrame.d.ts","sourceRoot":"","sources":["../../src/composer/AgentComposerFrame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAE7D,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kFAAkF;IAClF,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,aAAa,CAAC,EAAE,0BAA0B,CAAC;IAC3C,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,KAAK,EACL,SAAS,EACT,aAAyB,EACzB,OAAO,GACR,EAAE,uBAAuB,qBA+IzB"}

package/dist/composer/AgentComposerFrame.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ComposerPrimitive } from "@assistant-ui/react";
+import { useEffect, useRef } from "react";
 import { cn } from "../utils.js";
 /**
  * The single visual shell for agent chat composition.
@@ -8,7 +9,90 @@ import { cn } from "../utils.js";
  * all render this same frame so the composer does not drift across products.
  */
 export function AgentComposerFrame({ children, attachedAccessory, className, workflowClassName, rootClassName, style, rootStyle, layoutVariant = "default", onClick, }) {
-    const frame = (_jsx("div", { "data-agent-composer-variant": layoutVariant, "data-agent-composer-slot": "area", className: cn("agent-composer-area min-w-0 shrink-0 py-2", attachedAccessory != null && "relative z-10", 
+    const frameRef = useRef(null);
+    useEffect(() => {
+        const frame = frameRef.current;
+        if (!frame)
+            return;
+        const shell = frame.closest(".agent-layout-shell, .agent-sidebar-shell");
+        const viewport = window.visualViewport;
+        if (!shell || !viewport)
+            return;
+        const activeShell = shell;
+        const activeViewport = viewport;
+        const viewportHeightProperty = "--agent-native-viewport-height";
+        const originalHeight = activeShell.style.getPropertyValue(viewportHeightProperty);
+        const originalPriority = activeShell.style.getPropertyPriority(viewportHeightProperty);
+        let keyboardViewportActive = false;
+        let listening = false;
+        let mounted = true;
+        const restoreHeight = () => {
+            if (originalHeight) {
+                activeShell.style.setProperty(viewportHeightProperty, originalHeight, originalPriority);
+            }
+            else {
+                activeShell.style.removeProperty(viewportHeightProperty);
+            }
+        };
+        const isEditor = (element) => element !== null &&
+            frame.contains(element) &&
+            element.closest('[contenteditable="true"]') !== null;
+        const stopListening = () => {
+            if (!listening)
+                return;
+            listening = false;
+            activeViewport.removeEventListener("resize", update);
+            window.removeEventListener("resize", update);
+        };
+        function update() {
+            if (!mounted)
+                return;
+            const height = `${activeViewport.height}px`;
+            const viewportShrunk = activeViewport.height + 1 < window.innerHeight;
+            if (isEditor(document.activeElement)) {
+                keyboardViewportActive = viewportShrunk;
+                if (viewportShrunk) {
+                    activeShell.style.setProperty(viewportHeightProperty, height);
+                }
+                else {
+                    restoreHeight();
+                }
+                return;
+            }
+            if (keyboardViewportActive && viewportShrunk) {
+                activeShell.style.setProperty(viewportHeightProperty, height);
+                return;
+            }
+            keyboardViewportActive = false;
+            restoreHeight();
+            stopListening();
+        }
+        const onFocusIn = (event) => {
+            if (!isEditor(event.target instanceof Element ? event.target : null))
+                return;
+            if (!listening) {
+                listening = true;
+                activeViewport.addEventListener("resize", update, { passive: true });
+                window.addEventListener("resize", update, { passive: true });
+            }
+            update();
+        };
+        const onFocusOut = (event) => {
+            if (!isEditor(event.target instanceof Element ? event.target : null))
+                return;
+            queueMicrotask(update);
+        };
+        frame.addEventListener("focusin", onFocusIn);
+        frame.addEventListener("focusout", onFocusOut);
+        return () => {
+            mounted = false;
+            frame.removeEventListener("focusin", onFocusIn);
+            frame.removeEventListener("focusout", onFocusOut);
+            stopListening();
+            restoreHeight();
+        };
+    }, []);
+    const frame = (_jsx("div", { ref: frameRef, "data-agent-composer-variant": layoutVariant, "data-agent-composer-slot": "area", className: cn("agent-composer-area min-w-0 shrink-0 py-2", attachedAccessory != null && "relative z-10", 
         // Compact composers are nested in padded popovers; the default sidebar
         // frame is the only layout that needs its own horizontal inset.
         layoutVariant === "compact" ? "px-0" : "px-3", layoutVariant !== "default" && `agent-composer-area--${layoutVariant}`, className), style: style, onClick: onClick, children: _jsx(ComposerPrimitive.Root, { "data-agent-composer-variant": layoutVariant, "data-agent-composer-slot": "root", className: cn("agent-composer-root flex min-w-0 flex-col rounded-lg border border-input transition-colors", layoutVariant !== "default" &&

package/dist/composer/AgentComposerFrame.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgentComposerFrame.js","sourceRoot":"","sources":["../../src/composer/AgentComposerFrame.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAgBjC;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,iBAAiB,EACjB,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,KAAK,EACL,SAAS,EACT,aAAa,GAAG,SAAS,EACzB,OAAO,GACiB;IACxB,MAAM,KAAK,GAAG,CACZ,6CAC+B,aAAa,8BACjB,MAAM,EAC/B,SAAS,EAAE,EAAE,CACX,2CAA2C,EAC3C,iBAAiB,IAAI,IAAI,IAAI,eAAe;QAC5C,uEAAuE;QACvE,gEAAgE;QAChE,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAC7C,aAAa,KAAK,SAAS,IAAI,wBAAwB,aAAa,EAAE,EACtE,SAAS,CACV,EACD,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,YAEhB,KAAC,iBAAiB,CAAC,IAAI,mCACQ,aAAa,8BACjB,MAAM,EAC/B,SAAS,EAAE,EAAE,CACX,4FAA4F,EAC5F,aAAa,KAAK,SAAS;gBACzB,wBAAwB,aAAa,EAAE,EACzC,aAAa,CACd,EACD,KAAK,EAAE,SAAS,YAEf,QAAQ,GACc,GACrB,CACP,CAAC;IAEF,IAAI,iBAAiB,IAAI,IAAI;QAAE,OAAO,KAAK,CAAC;IAE5C,OAAO,CACL,2CAC2B,UAAU,kCACN,MAAM,EACnC,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,iBAAiB,CAClB,aAEA,iBAAiB,EACjB,KAAK,IACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"AgentComposerFrame.js","sourceRoot":"","sources":["../../src/composer/AgentComposerFrame.tsx"],"names":[],"mappings":"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"}

package/dist/composer/AgentComposerFrame.viewport.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AgentComposerFrame.viewport.spec.d.ts.map

package/dist/composer/AgentComposerFrame.viewport.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentComposerFrame.viewport.spec.d.ts","sourceRoot":"","sources":["../../src/composer/AgentComposerFrame.viewport.spec.tsx"],"names":[],"mappings":""}

package/dist/composer/AgentComposerFrame.viewport.spec.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+vi.mock("@assistant-ui/react", () => ({
+    ComposerPrimitive: {
+        Root: ({ children, ...props }) => (_jsx("div", { ...props, children: children })),
+    },
+}));
+import { AgentComposerFrame } from "./AgentComposerFrame.js";
+let container;
+let root;
+let viewportHeight;
+let viewport;
+let originalViewport;
+let originalInnerHeight;
+beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    viewportHeight = 800;
+    viewport = new EventTarget();
+    Object.defineProperty(viewport, "height", { get: () => viewportHeight });
+    originalViewport = Object.getOwnPropertyDescriptor(window, "visualViewport");
+    originalInnerHeight = Object.getOwnPropertyDescriptor(window, "innerHeight");
+    Object.defineProperty(window, "visualViewport", {
+        configurable: true,
+        value: viewport,
+    });
+    Object.defineProperty(window, "innerHeight", {
+        configurable: true,
+        value: 800,
+    });
+});
+afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    if (originalViewport) {
+        Object.defineProperty(window, "visualViewport", originalViewport);
+    }
+    else {
+        Object.defineProperty(window, "visualViewport", {
+            configurable: true,
+            value: null,
+        });
+    }
+    if (originalInnerHeight) {
+        Object.defineProperty(window, "innerHeight", originalInnerHeight);
+    }
+});
+describe("AgentComposerFrame visual viewport sizing", () => {
+    it("keeps a focused composer above the keyboard and restores the shell height", async () => {
+        await act(async () => {
+            root.render(_jsx("div", { className: "agent-layout-shell", style: {
+                    "--agent-native-viewport-height": "100%",
+                }, children: _jsx(AgentComposerFrame, { children: _jsx("div", { contentEditable: "true", "aria-label": "Message agent" }) }) }));
+        });
+        const shell = container.querySelector(".agent-layout-shell");
+        const editor = container.querySelector('[contenteditable="true"]');
+        await act(async () => editor.focus());
+        expect(shell.style.getPropertyValue("--agent-native-viewport-height")).toBe("100%");
+        await act(async () => {
+            viewportHeight = 360;
+            viewport.dispatchEvent(new Event("resize"));
+        });
+        expect(shell.style.getPropertyValue("--agent-native-viewport-height")).toBe("360px");
+        await act(async () => {
+            editor.blur();
+            await Promise.resolve();
+        });
+        expect(shell.style.getPropertyValue("--agent-native-viewport-height")).toBe("360px");
+        await act(async () => {
+            viewportHeight = 800;
+            viewport.dispatchEvent(new Event("resize"));
+        });
+        expect(shell.style.getPropertyValue("--agent-native-viewport-height")).toBe("100%");
+    });
+    it("does not resize the shell when focus stays outside the composer editor", async () => {
+        await act(async () => {
+            root.render(_jsx("div", { className: "agent-sidebar-shell", children: _jsx(AgentComposerFrame, { children: _jsx("button", { type: "button", children: "Attach" }) }) }));
+        });
+        const shell = container.querySelector(".agent-sidebar-shell");
+        const button = container.querySelector("button");
+        await act(async () => button.focus());
+        expect(shell.style.getPropertyValue("--agent-native-viewport-height")).toBe("");
+    });
+});
+//# sourceMappingURL=AgentComposerFrame.viewport.spec.js.map

package/dist/composer/AgentComposerFrame.viewport.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentComposerFrame.viewport.spec.js","sourceRoot":"","sources":["../../src/composer/AgentComposerFrame.viewport.spec.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.21.2",
+  "version": "0.21.3-nightly-20260926043001",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/src/composer/AgentComposerFrame.tsx

@@ -1,4 +1,5 @@
 import { ComposerPrimitive } from "@assistant-ui/react";
+import { useEffect, useRef } from "react";
 import type React from "react";
 
 import { cn } from "../utils.js";
@@ -34,8 +35,103 @@ export function AgentComposerFrame({
   layoutVariant = "default",
   onClick,
 }: AgentComposerFrameProps) {
+  const frameRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const frame = frameRef.current;
+    if (!frame) return;
+
+    const shell = frame.closest<HTMLElement>(
+      ".agent-layout-shell, .agent-sidebar-shell",
+    );
+    const viewport = window.visualViewport;
+    if (!shell || !viewport) return;
+    const activeShell = shell;
+    const activeViewport = viewport;
+
+    const viewportHeightProperty = "--agent-native-viewport-height";
+    const originalHeight = activeShell.style.getPropertyValue(
+      viewportHeightProperty,
+    );
+    const originalPriority = activeShell.style.getPropertyPriority(
+      viewportHeightProperty,
+    );
+    let keyboardViewportActive = false;
+    let listening = false;
+    let mounted = true;
+
+    const restoreHeight = () => {
+      if (originalHeight) {
+        activeShell.style.setProperty(
+          viewportHeightProperty,
+          originalHeight,
+          originalPriority,
+        );
+      } else {
+        activeShell.style.removeProperty(viewportHeightProperty);
+      }
+    };
+    const isEditor = (element: Element | null) =>
+      element !== null &&
+      frame.contains(element) &&
+      element.closest('[contenteditable="true"]') !== null;
+    const stopListening = () => {
+      if (!listening) return;
+      listening = false;
+      activeViewport.removeEventListener("resize", update);
+      window.removeEventListener("resize", update);
+    };
+    function update() {
+      if (!mounted) return;
+      const height = `${activeViewport.height}px`;
+      const viewportShrunk = activeViewport.height + 1 < window.innerHeight;
+      if (isEditor(document.activeElement)) {
+        keyboardViewportActive = viewportShrunk;
+        if (viewportShrunk) {
+          activeShell.style.setProperty(viewportHeightProperty, height);
+        } else {
+          restoreHeight();
+        }
+        return;
+      }
+      if (keyboardViewportActive && viewportShrunk) {
+        activeShell.style.setProperty(viewportHeightProperty, height);
+        return;
+      }
+      keyboardViewportActive = false;
+      restoreHeight();
+      stopListening();
+    }
+    const onFocusIn = (event: FocusEvent) => {
+      if (!isEditor(event.target instanceof Element ? event.target : null))
+        return;
+      if (!listening) {
+        listening = true;
+        activeViewport.addEventListener("resize", update, { passive: true });
+        window.addEventListener("resize", update, { passive: true });
+      }
+      update();
+    };
+    const onFocusOut = (event: FocusEvent) => {
+      if (!isEditor(event.target instanceof Element ? event.target : null))
+        return;
+      queueMicrotask(update);
+    };
+
+    frame.addEventListener("focusin", onFocusIn);
+    frame.addEventListener("focusout", onFocusOut);
+    return () => {
+      mounted = false;
+      frame.removeEventListener("focusin", onFocusIn);
+      frame.removeEventListener("focusout", onFocusOut);
+      stopListening();
+      restoreHeight();
+    };
+  }, []);
+
   const frame = (
     <div
+      ref={frameRef}
       data-agent-composer-variant={layoutVariant}
       data-agent-composer-slot="area"
       className={cn(

package/src/composer/AgentComposerFrame.viewport.spec.tsx

@@ -0,0 +1,132 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@assistant-ui/react", () => ({
+  ComposerPrimitive: {
+    Root: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+      <div {...props}>{children}</div>
+    ),
+  },
+}));
+
+import { AgentComposerFrame } from "./AgentComposerFrame.js";
+
+let container: HTMLDivElement;
+let root: Root;
+let viewportHeight: number;
+let viewport: EventTarget;
+let originalViewport: PropertyDescriptor | undefined;
+let originalInnerHeight: PropertyDescriptor | undefined;
+
+beforeEach(() => {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+  viewportHeight = 800;
+  viewport = new EventTarget();
+  Object.defineProperty(viewport, "height", { get: () => viewportHeight });
+  originalViewport = Object.getOwnPropertyDescriptor(window, "visualViewport");
+  originalInnerHeight = Object.getOwnPropertyDescriptor(window, "innerHeight");
+  Object.defineProperty(window, "visualViewport", {
+    configurable: true,
+    value: viewport,
+  });
+  Object.defineProperty(window, "innerHeight", {
+    configurable: true,
+    value: 800,
+  });
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  if (originalViewport) {
+    Object.defineProperty(window, "visualViewport", originalViewport);
+  } else {
+    Object.defineProperty(window, "visualViewport", {
+      configurable: true,
+      value: null,
+    });
+  }
+  if (originalInnerHeight) {
+    Object.defineProperty(window, "innerHeight", originalInnerHeight);
+  }
+});
+
+describe("AgentComposerFrame visual viewport sizing", () => {
+  it("keeps a focused composer above the keyboard and restores the shell height", async () => {
+    await act(async () => {
+      root.render(
+        <div
+          className="agent-layout-shell"
+          style={
+            {
+              "--agent-native-viewport-height": "100%",
+            } as React.CSSProperties
+          }
+        >
+          <AgentComposerFrame>
+            <div contentEditable="true" aria-label="Message agent" />
+          </AgentComposerFrame>
+        </div>,
+      );
+    });
+
+    const shell = container.querySelector<HTMLElement>(".agent-layout-shell")!;
+    const editor = container.querySelector<HTMLElement>(
+      '[contenteditable="true"]',
+    )!;
+    await act(async () => editor.focus());
+    expect(shell.style.getPropertyValue("--agent-native-viewport-height")).toBe(
+      "100%",
+    );
+
+    await act(async () => {
+      viewportHeight = 360;
+      viewport.dispatchEvent(new Event("resize"));
+    });
+
+    expect(shell.style.getPropertyValue("--agent-native-viewport-height")).toBe(
+      "360px",
+    );
+
+    await act(async () => {
+      editor.blur();
+      await Promise.resolve();
+    });
+    expect(shell.style.getPropertyValue("--agent-native-viewport-height")).toBe(
+      "360px",
+    );
+
+    await act(async () => {
+      viewportHeight = 800;
+      viewport.dispatchEvent(new Event("resize"));
+    });
+    expect(shell.style.getPropertyValue("--agent-native-viewport-height")).toBe(
+      "100%",
+    );
+  });
+
+  it("does not resize the shell when focus stays outside the composer editor", async () => {
+    await act(async () => {
+      root.render(
+        <div className="agent-sidebar-shell">
+          <AgentComposerFrame>
+            <button type="button">Attach</button>
+          </AgentComposerFrame>
+        </div>,
+      );
+    });
+
+    const shell = container.querySelector<HTMLElement>(".agent-sidebar-shell")!;
+    const button = container.querySelector<HTMLButtonElement>("button")!;
+    await act(async () => button.focus());
+
+    expect(shell.style.getPropertyValue("--agent-native-viewport-height")).toBe(
+      "",
+    );
+  });
+});