fix: remeasure composer after hidden Core becomes visible
This commit is contained in:
@@ -69,12 +69,32 @@ export function SteerInput({
|
||||
}
|
||||
|
||||
// Grow the textarea to fit its content (up to a cap, then it scrolls), and shrink
|
||||
// back when the text is cleared. Runs after every value change so height tracks text.
|
||||
// back when cleared. Core stays mounted while hidden behind context/Admin pages,
|
||||
// so a hidden scrollHeight must never become a persisted zero-pixel height.
|
||||
useEffect(() => {
|
||||
const el = taRef.current;
|
||||
if (!el) return;
|
||||
el.style.height = "auto";
|
||||
el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
|
||||
let disposed = false;
|
||||
const resize = () => {
|
||||
if (disposed || el.getClientRects().length === 0) return;
|
||||
el.style.height = "auto";
|
||||
el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
|
||||
};
|
||||
resize();
|
||||
let lastWidth = -1;
|
||||
const observer = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(([entry]) => {
|
||||
const width = entry.contentRect.width;
|
||||
if (width === lastWidth) return;
|
||||
lastWidth = width;
|
||||
// Ignore height-only notifications from our own autosizing writes.
|
||||
if (width > 0) resize();
|
||||
});
|
||||
observer?.observe(el);
|
||||
void document.fonts?.ready.then(resize);
|
||||
return () => {
|
||||
disposed = true;
|
||||
observer?.disconnect();
|
||||
};
|
||||
}, [text]);
|
||||
|
||||
async function submit() {
|
||||
@@ -162,7 +182,7 @@ export function SteerInput({
|
||||
placeholder={sessionId ? "Free steering (!)…" : "Ask a question to start a new session…"}
|
||||
aria-label={sessionId ? "Steering" : "New question"}
|
||||
data-awaiting-input={awaitingInput ? "true" : undefined}
|
||||
className={["max-h-40 flex-1 resize-none rounded-lg bg-card px-1 py-1 text-sm leading-relaxed outline-none placeholder:text-muted-foreground", awaitingInput && "thot-awaiting-input"].filter(Boolean).join(" ")}
|
||||
className={["thot-composer-input min-h-8 min-w-0 max-h-40 flex-1 resize-none rounded-lg bg-card px-1 py-1 text-sm leading-relaxed outline-none placeholder:text-muted-foreground", awaitingInput && "thot-awaiting-input"].filter(Boolean).join(" ")}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
Reference in New Issue
Block a user