Skip to content

Commit 67d868d

Browse files
authored
fix(docs/ask-widget): multi-line input that grows to 10 lines, then scrolls (#23311)
## Summary Fixes the Aztec Docs AI assistant widget so long messages are visible and editable while typing, instead of being clipped to a single line. - Replaces the single-line `<input>` with a `<textarea>` that auto-grows from 1 line up to **10 lines** as the user types or pastes. - Past 10 lines, the textarea caps and `overflow-y: auto` engages so the user can scroll their own message. - Long unbroken strings (URLs, code) wrap at the edge (`overflow-wrap: anywhere`). - `min-width: 0` lets the textarea shrink inside its flex parent instead of pinning to its content's intrinsic width. - `box-sizing: border-box` keeps the auto-grow math in sync with the 11px vertical padding. - Enter sends; Shift+Enter inserts a newline. Same fix pattern as `honk-ai` PR [#132](AztecProtocol/honk-ai#132) (the /ask page). ## Test plan - [x] JSX edit only — no API or build-script changes. - [ ] Smoke in `yarn start` at the docs site: - Type a 1-line message → input stays 1 line - Type a 5-line message → input grows to 5 lines, no scrollbar - Paste/type a 20-line message → input caps at 10 lines and shows a vertical scrollbar - Paste a single 500-char unbroken string → wraps at the right edge instead of overflowing horizontally - Shift+Enter inserts a newline; Enter sends --- *Created by [claudebox](https://claudebox.work/v2/sessions/07156e2779ffc369) · group: `slackbot`*
2 parents 3a08c86 + 3bbc4d7 commit 67d868d

1 file changed

Lines changed: 27 additions & 2 deletions

File tree

docs/src/components/AztecDocsWidget/Panel.jsx

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useEffect, useRef } from "react";
22
import { AztecMark, Icons } from "./Icons";
33
import Hero from "./Hero";
44
import { UserBubble, AssistantBody } from "./Message";
@@ -58,6 +58,16 @@ export default function Panel({
5858
? "Share failed"
5959
: "Share";
6060

61+
const taRef = useRef(null);
62+
// Auto-grow the textarea to fit its content. The inline `max-height`
63+
// caps it at 10 lines; past that the textarea scrolls instead.
64+
useEffect(() => {
65+
const ta = taRef.current;
66+
if (!ta) return;
67+
ta.style.height = "auto";
68+
ta.style.height = ta.scrollHeight + "px";
69+
}, [input]);
70+
6171
return (
6272
<div
6373
style={{
@@ -362,21 +372,36 @@ export default function Panel({
362372
border: `1px solid ${isInk ? "rgba(242,238,225,0.25)" : "var(--azw-ink-tint-1)"}`,
363373
}}
364374
>
365-
<input
375+
<textarea
376+
ref={taRef}
366377
value={input}
367378
onChange={(e) => onInputChange(e.target.value)}
379+
onKeyDown={(e) => {
380+
if (e.key === "Enter" && !e.shiftKey) {
381+
e.preventDefault();
382+
onSend();
383+
}
384+
}}
368385
placeholder="Ask about Aztec —"
369386
disabled={streaming}
387+
rows={1}
370388
style={{
371389
flex: 1,
390+
minWidth: 0,
372391
padding: "11px 12px",
373392
background: "transparent",
374393
border: "none",
375394
outline: "none",
395+
resize: "none",
376396
color: panelFg,
377397
fontFamily: "var(--azw-font-sans)",
378398
fontSize: 13.5,
399+
lineHeight: 1.5,
379400
letterSpacing: "-0.01em",
401+
boxSizing: "border-box",
402+
maxHeight: "calc(10 * 1.5em + 22px)",
403+
overflowY: "auto",
404+
overflowWrap: "anywhere",
380405
}}
381406
/>
382407
<button

0 commit comments

Comments
 (0)