@simmalugnt-se/payload-editor-assistant 0.13.0 → 0.13.1

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.13.1
+
+- The chat composer starts at three lines and grows with typed or pasted text up to eight lines
+  (or 30% of the viewport), then scrolls. It also resizes after prefilled prompts and panel reopening.
+
 ## 0.13.0
 
 - Attach reference images to chat with file selection, drag-and-drop or clipboard paste. Show

package/dist/components/EditorAssistantAside.js

@@ -40,6 +40,28 @@ export function EditorAssistantAside() {
         }
     }, [prefill, setPrefill]);
     const threadRef = useRef(null);
+    const composerRef = useRef(null);
+    // Grow on typing/prefill and remeasure when the panel reopens or its width changes.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: draft changes and returning from a batch require remeasuring the DOM.
+    useLayoutEffect(() => {
+        const textarea = composerRef.current;
+        if (!textarea || !open)
+            return;
+        const resize = () => {
+            textarea.style.height = "auto";
+            textarea.style.height = `${textarea.scrollHeight}px`;
+        };
+        resize();
+        let width = textarea.clientWidth;
+        const observer = new ResizeObserver(() => {
+            if (textarea.clientWidth === width)
+                return;
+            width = textarea.clientWidth;
+            resize();
+        });
+        observer.observe(textarea);
+        return () => observer.disconnect();
+    }, [draft, open, batch]);
     /** Whether the editor typed in the form while a preview was in it; undo would discard that. */
     const editedSinceRef = useRef(false);
     const [confirmUndo, setConfirmUndo] = useState(false);
@@ -471,7 +493,7 @@ export function EditorAssistantAside() {
                                             void send(translate.prompt);
                                         }, size: "small", children: translate.label })) : null, visibleShortcuts.map((shortcut) => (_jsx(Button, { buttonStyle: "pill", disabled: status === "streaming", margin: false, onClick: () => {
                                             void send(shortcut.prompt);
-                                        }, size: "small", children: shortcut.label }, shortcut.id)))] })) : null, selection && bridge ? (_jsxs("div", { className: "ea-selection", children: [_jsxs("span", { className: "ea-selection__label", children: [copy.selected, ": ", _jsx("strong", { children: selection.label })] }), _jsx("button", { "aria-label": copy.clearSelection, className: "ea-selection__clear", type: "button", onClick: () => setSelection(null), children: _jsx(XIcon, {}) })] })) : null, _jsxs("div", { className: "ea-composer__box", children: [attachments.input, attachments.preview, _jsx("textarea", { disabled: status === "streaming", placeholder: copy.placeholder, rows: 2, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: onKeyDown, onPaste: attachments.onPaste }), _jsxs("div", { className: "ea-composer__bar", children: [_jsx(Button, { buttonStyle: "subtle", type: "button", margin: false, size: "small", disabled: status === "streaming" || attachments.preparing, onClick: attachments.choose, children: copy.attachImage }), status === "streaming" ? (
+                                        }, size: "small", children: shortcut.label }, shortcut.id)))] })) : null, selection && bridge ? (_jsxs("div", { className: "ea-selection", children: [_jsxs("span", { className: "ea-selection__label", children: [copy.selected, ": ", _jsx("strong", { children: selection.label })] }), _jsx("button", { "aria-label": copy.clearSelection, className: "ea-selection__clear", type: "button", onClick: () => setSelection(null), children: _jsx(XIcon, {}) })] })) : null, _jsxs("div", { className: "ea-composer__box", children: [attachments.input, attachments.preview, _jsx("textarea", { ref: composerRef, disabled: status === "streaming", placeholder: copy.placeholder, rows: 3, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: onKeyDown, onPaste: attachments.onPaste }), _jsxs("div", { className: "ea-composer__bar", children: [_jsx(Button, { buttonStyle: "subtle", type: "button", margin: false, size: "small", disabled: status === "streaming" || attachments.preparing, onClick: attachments.choose, children: copy.attachImage }), status === "streaming" ? (
                                             // While the assistant works, Send becomes Stop, where the editor's eye already is.
                                             _jsx(Button, { "aria-label": copy.stop, buttonStyle: "secondary", className: "ea-composer__stop", icon: _jsx("span", { className: "ea-stop-icon", "aria-hidden": "true" }), iconPosition: "left", margin: false, onClick: () => stop(), size: "medium", type: "button", children: copy.stop })) : (_jsx(Button, { buttonStyle: "primary", disabled: attachments.preparing ||
                                                     (draft.trim() === "" && attachments.images.length === 0), margin: false, size: "medium", type: "submit", children: copy.send }))] })] })] })] }))] }));

package/dist/styles/assistant.css

@@ -358,7 +358,9 @@ html[data-theme="dark"] .ea-aside {
 .ea-composer textarea {
   width: 100%;
   box-sizing: border-box;
-  min-height: 40px;
+  min-height: 4.5em;
+  max-height: min(12em, 30vh);
+  overflow-y: auto;
   padding: 0;
   border: 0;
   background: transparent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simmalugnt-se/payload-editor-assistant",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "Context-aware editor assistant plugin for Payload Admin",
   "keywords": [
     "payload",