@dbx-tools/ui-mastra 0.6.217 → 0.6.218

package/index.ts

@@ -3,7 +3,7 @@
 // Hand edits are overwritten on the next watch; this file is read-only.
 
 export const PACKAGE_IDENTIFIER = "@dbx-tools/ui-mastra";
-export const PACKAGE_VERSION = "0.6.217";
+export const PACKAGE_VERSION = "0.6.218";
 export * as reactBubbles from "./src/react/bubbles.tsx";
 export * as reactChatApprovals from "./src/react/chat-approvals.ts";
 export * as reactChatComposer from "./src/react/chat-composer.tsx";

package/package.json

@@ -31,12 +31,12 @@
     "react-dom": "~19.2.4"
   },
   "dependencies": {
-    "@dbx-tools/shared-core": "0.6.217",
-    "@dbx-tools/shared-genie": "0.6.217",
-    "@dbx-tools/shared-mastra": "0.6.217",
-    "@dbx-tools/shared-model": "0.6.217",
-    "@dbx-tools/ui-appkit": "0.6.217",
-    "@dbx-tools/ui-branding": "0.6.217",
+    "@dbx-tools/shared-core": "0.6.218",
+    "@dbx-tools/shared-genie": "0.6.218",
+    "@dbx-tools/shared-mastra": "0.6.218",
+    "@dbx-tools/shared-model": "0.6.218",
+    "@dbx-tools/ui-appkit": "0.6.218",
+    "@dbx-tools/ui-branding": "0.6.218",
     "@mastra/client-js": "1.46.0",
     "@tanstack/react-table": "^8.21.3",
     "ai": "^5.0.0",
@@ -52,7 +52,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.217",
+  "version": "0.6.218",
   "type": "module",
   "exports": {
     "./react": "./src/react/index.ts",

package/src/react/_composer-autosize.ts

@@ -0,0 +1,41 @@
+/**
+ * Reset and measure one composer textarea when its container has usable width.
+ *
+ * Resetting to `auto` before reading `scrollHeight` allows deleted content and
+ * wider containers to shrink as well as letting multiline drafts grow.
+ */
+export function autosizeComposerTextarea(
+  group: HTMLElement | null,
+  textarea: HTMLTextAreaElement | null,
+): void {
+  if (!group || !textarea || group.getBoundingClientRect().width <= 0) return;
+  textarea.style.height = "auto";
+  textarea.style.height = `${textarea.scrollHeight}px`;
+}
+
+/**
+ * Observe width changes without reacting to the group height that the textarea
+ * itself controls. A zero-width observation resets the comparison sentinel so
+ * reopening at the same prior width still triggers a fresh measurement.
+ */
+export function observeComposerWidth(
+  group: HTMLElement,
+  resize: () => void,
+  Observer: typeof ResizeObserver | undefined = globalThis.ResizeObserver,
+): () => void {
+  if (!Observer) return () => {};
+  let measuredWidth = 0;
+  const observer = new Observer((entries) => {
+    const width = entries[0]?.contentRect.width ?? group.getBoundingClientRect().width;
+    if (!Number.isFinite(width)) return;
+    if (width <= 0) {
+      measuredWidth = 0;
+      return;
+    }
+    if (width === measuredWidth) return;
+    measuredWidth = width;
+    resize();
+  });
+  observer.observe(group);
+  return () => observer.disconnect();
+}

package/src/react/chat-composer.tsx

@@ -32,6 +32,7 @@ import {
   XIcon,
 } from "lucide-react";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { autosizeComposerTextarea, observeComposerWidth } from "./_composer-autosize.ts";
 import { ExportMenu } from "./export-menu.tsx";
 import { SuggestionPills } from "./suggestion-pills.tsx";
 import type { ChatViewProps } from "./types.ts";
@@ -278,14 +279,22 @@ export const ChatComposer = ({
   onResumeFollow,
 }: ChatComposerProps) => {
   const [input, setInput] = useState("");
+  const inputGroupRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
+  const resizeTextarea = useCallback(() => {
+    autosizeComposerTextarea(inputGroupRef.current, textareaRef.current);
+  }, []);
+
+  useLayoutEffect(() => {
+    resizeTextarea();
+  }, [input, isLoadingHistory, resizeTextarea]);
+
   useLayoutEffect(() => {
-    const element = textareaRef.current;
-    if (!element) return;
-    element.style.height = "auto";
-    element.style.height = `${element.scrollHeight}px`;
-  }, [input]);
+    const group = inputGroupRef.current;
+    if (!group) return;
+    return observeComposerWidth(group, resizeTextarea);
+  }, [resizeTextarea]);
 
   const isRunning = status === "submitted" || status === "streaming";
   const submit = () => {
@@ -336,7 +345,10 @@ export const ChatComposer = ({
           onRemoveSteer={onRemoveSteer}
           onReorderSteers={onReorderSteers}
         />
-        <InputGroup className="rounded-2xl border-border/80 shadow-sm transition-shadow focus-within:shadow-md">
+        <InputGroup
+          ref={inputGroupRef}
+          className="rounded-2xl border-border/80 shadow-sm transition-shadow focus-within:shadow-md"
+        >
           <InputGroupTextarea
             ref={textareaRef}
             value={input}
@@ -350,7 +362,7 @@ export const ChatComposer = ({
             placeholder={isLoadingHistory ? "Loading history..." : "Send a message..."}
             rows={1}
             disabled={isLoadingHistory}
-            className="max-h-48 text-base md:text-sm"
+            className="field-sizing-fixed max-h-48 overflow-y-auto text-base md:text-sm"
           />
           <InputGroupAddon align="inline-end">
             {isRunning && onStop && !input.trim() ? (