import React from "react";
import { Button } from "../actions/Button.jsx";
/* The scrolling log of a conversation. It stays pinned to the newest message
as children arrive, unless the reader has scrolled up to read history; then
it leaves them where they are and offers a jump back down. It never fetches
or invents messages: the children are the conversation.
Every DOM read happens in an effect, never during render, so the list
server-renders as a plain log. */
/* How close to the bottom, in CSS pixels, still counts as at the bottom: a
rounding allowance for fractional scroll positions, not a visual size. */
const SLACK = 8;
/* A layout effect in the browser, so a new message never paints one frame
off the bottom; a plain effect on the server, where layout effects warn. */
const useIsoLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
function prefersReducedMotion() {
return typeof window !== "undefined" && !!window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
}
const DOWN = ["M12 4.5v15", "m6 13.5 6 6 6-6"];
export function MessageList({ label, children, style, ...rest }) {
const scroller = React.useRef(null);
const content = React.useRef(null);
const pinned = React.useRef(true);
const lastHeight = React.useRef(0);
const [unseen, setUnseen] = React.useState(false);
const toBottom = React.useCallback((smooth) => {
const el = scroller.current;
if (!el) return;
const top = el.scrollHeight - el.clientHeight;
if (smooth && el.scrollTo && !prefersReducedMotion()) el.scrollTo({ top, behavior: "smooth" });
else el.scrollTop = top;
}, []);
/* Called whenever the content may have changed size: new children, an image
that loaded, a bubble that grew. Pinned, follow it; scrolled up, say that
something new is below. */
const sync = React.useCallback(() => {
const el = scroller.current;
if (!el) return;
const height = el.scrollHeight;
const grew = height > lastHeight.current;
lastHeight.current = height;
if (pinned.current) toBottom(false);
else if (grew) setUnseen(true);
}, [toBottom]);
useIsoLayoutEffect(() => {
sync();
}, [children, sync]);
React.useEffect(() => {
if (typeof ResizeObserver === "undefined" || !content.current) return undefined;
const ro = new ResizeObserver(() => sync());
ro.observe(content.current);
return () => ro.disconnect();
}, [sync]);
const onScroll = (e) => {
const el = e.currentTarget;
const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= SLACK;
pinned.current = atBottom;
if (atBottom && unseen) setUnseen(false);
if (rest.onScroll) rest.onScroll(e);
};
const jump = () => {
pinned.current = true;
setUnseen(false);
toBottom(true);
/* The button is about to unmount; keep focus on the log rather than
letting it fall back to the page. */
if (scroller.current) scroller.current.focus({ preventScroll: true });
};
return (
{/* margin-top: auto keeps a short conversation at the bottom, next to
the composer, the way every messenger does. */}
{children}
{unseen && (
)}
);
}
/* A centred label across the log: a day, or an event such as a hand-off.
A separator's content is presentational, so the text is also its name. */
export function MessageDivider({ children, label, style, ...rest }) {
const name = label || (typeof children === "string" ? children : undefined);
const rule = { flex: "1 1 0", minWidth: 0, borderTop: "var(--dt-border-width-default) solid var(--dt-chat-border)" };
return (