Katia Bulatova
9a3bee0288
Stacked on #4418. Merge that first. The UI slice of the dashboard agent: the side panel, the chat transport wiring, message and card rendering, suggested prompts, and chat history. #4418 works without this — the system is simply invisible. The diff is mostly components, so the notes below cover only the three decisions you can't read off the markup. Behavior and a hands-on walkthrough live in GUIDEBOOK.md, which lands with #4525. ## Decisions worth knowing - **Action rows always render at the end of a turn.** The model's emission order isn't trusted for layout, so action blocks are split out of the stream and appended last. Display only — `answered` stays keyed on the emission index. - **The last-chat memory is org-true.** It's keyed by the chat's own organization, and a foreign or deleted chat comes back as a 404 the client treats as gone, rather than an empty chat it keeps around. - **A dead stream self-heals from the settled transcript.** Terminal records are written to the chat row after the client's stream closes, so the panel re-reads it. The poll gate is any unfinished turn — a dangling tool part, not just an open investigation. ## Notes - Gated by `canAccessDashboardAgent`; no behavior change with the flag off. - Page marks: `handle.agentPageContext` on 47 routes, ~20 lines each. - Entry points: Ask Trigger button, ⌘J, Help & Feedback. The old ⌘I and `?aiHelp=` links keep working. ## Screenshots <img width="1440" height="788" alt="Screenshot 2026-08-07 at 15 14 29" src="https://github.com/user-attachments/assets/f4e89e8d-13ed-4be3-a88d-d5cca3ece0fa" />
71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import { useEffect, useLayoutEffect, useRef } from "react";
|
|
|
|
// How close to the bottom counts as following along.
|
|
const NEAR_BOTTOM_PX = 120;
|
|
|
|
type ScrollableMessage = { id: string; role?: string };
|
|
|
|
// Not `useAutoScrollToBottom`: it seeds stickiness from the position after first
|
|
// paint, so a restored transcript sits at scrollTop 0 and never scrolls again.
|
|
export function useTranscriptAutoScroll(
|
|
messages: ReadonlyArray<ScrollableMessage>,
|
|
activity: unknown
|
|
) {
|
|
const contentRef = useRef<HTMLDivElement | null>(null);
|
|
const containerRef = useRef<HTMLElement | null>(null);
|
|
const followRef = useRef(true);
|
|
// The last user message scrolled for, so the jump fires once per send.
|
|
const jumpedForRef = useRef<string | undefined>(undefined);
|
|
|
|
useLayoutEffect(() => {
|
|
let element: HTMLElement | null = contentRef.current?.parentElement ?? null;
|
|
while (element) {
|
|
const overflowY = getComputedStyle(element).overflowY;
|
|
if (overflowY === "auto" || overflowY === "scroll") break;
|
|
element = element.parentElement;
|
|
}
|
|
if (!element) return;
|
|
const container = element;
|
|
containerRef.current = container;
|
|
container.scrollTop = container.scrollHeight;
|
|
|
|
const onScroll = () => {
|
|
const distance = container.scrollHeight - container.scrollTop - container.clientHeight;
|
|
followRef.current = distance <= NEAR_BOTTOM_PX;
|
|
};
|
|
container.addEventListener("scroll", onScroll, { passive: true });
|
|
return () => {
|
|
container.removeEventListener("scroll", onScroll);
|
|
containerRef.current = null;
|
|
};
|
|
}, []);
|
|
|
|
useLayoutEffect(() => {
|
|
const container = containerRef.current;
|
|
if (!container) return;
|
|
|
|
const last = messages[messages.length - 1];
|
|
const sent = last?.role === "user" && jumpedForRef.current !== last.id;
|
|
if (sent) jumpedForRef.current = last!.id;
|
|
if (!sent && !followRef.current) return;
|
|
|
|
followRef.current = true;
|
|
container.scrollTop = container.scrollHeight;
|
|
}, [messages, activity]);
|
|
|
|
// Content also grows without a message change (lazy markdown, a card laying out).
|
|
useEffect(() => {
|
|
const container = containerRef.current;
|
|
const content = contentRef.current;
|
|
if (!container || !content || typeof ResizeObserver === "undefined") return;
|
|
|
|
const observer = new ResizeObserver(() => {
|
|
if (followRef.current) container.scrollTop = container.scrollHeight;
|
|
});
|
|
observer.observe(content);
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
return contentRef;
|
|
}
|