makersclaw 0.2.0 → 0.3.0

package/registry/blocks/chat/message.jsx

@@ -0,0 +1,450 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import { Avatar, Button, Collapsible, IconButton, Icon, Menu, Spinner, Textarea, Toggle, Tooltip, cx } from "../../ui";
+import { Attachment } from "./attachment";
+import { ChatText } from "./text";
+
+// Message and Bubble — one turn of a conversation. A message is its
+// author (avatar, name, time — shown once for a run of messages from the
+// same author), its words in a Bubble, its files, its state (sending,
+// streaming, failed with Retry) and the actions that appear on hover or
+// focus (copy, retry, a Menu of the surface's own). An assistant reply can
+// carry its reasoning (folded under "Thought for 4s") and take a thumbs up
+// or down; a user message can be edited in place.
+
+/** The text of a message: `content` when it is a string, else the text
+ *  parts of `parts` / `content` ([{ type: "text", text }]), joined. */
+export function textOf(message) {
+  const c = message?.content;
+  if (typeof c === "string") return c;
+  const parts = Array.isArray(c) ? c : Array.isArray(message?.parts) ? message.parts : [];
+  return parts
+    .filter((p) => p && (p.type === "text" || typeof p === "string"))
+    .map((p) => (typeof p === "string" ? p : p.text ?? ""))
+    .join("");
+}
+
+export function toDate(value) {
+  if (value == null || value === "") return null;
+  const d = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+
+export function formatTime(date) {
+  return date.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+}
+
+/**
+ * The container for a message's words.
+ *   from     user · assistant — user bubbles are filled and sit at the end
+ *   variant  bubble · plain (assistant text on the page, no box)
+ *   first / last  its place in a run from one author: the corner on the
+ *           author's side tightens between messages of one run
+ *   text     a string, drawn by the safe renderer; or pass children
+ */
+export function Bubble({ from = "assistant", variant = "bubble", first = true, last = true, text, streaming, className, children }) {
+  const user = from === "user";
+  const plain = !user && variant === "plain";
+  const caret = streaming ? (
+    <span aria-hidden="true" className="ml-0.5 inline-block h-[1em] w-1.5 translate-y-0.5 animate-pulse rounded-sm bg-current opacity-60" />
+  ) : null;
+  const body = text !== undefined ? <ChatText text={text} tone={user ? "primary" : undefined} trailing={caret} /> : children;
+  return (
+    <div
+      className={cx(
+        "min-w-0 max-w-full text-sm leading-relaxed",
+        plain
+          ? "py-0.5"
+          : cx(
+              "rounded-2xl px-3.5 py-2.5",
+              user ? "bg-primary text-primary-foreground" : "bg-muted text-foreground",
+              user ? [!first && "rounded-tr-md", !last && "rounded-br-md"] : [!first && "rounded-tl-md", !last && "rounded-bl-md"],
+            ),
+        className,
+      )}
+    >
+      {body}
+      {text === undefined ? caret : null}
+    </div>
+  );
+}
+
+export function formatSeconds(s) {
+  const n = Math.max(0, Math.round(Number(s) || 0));
+  return n < 60 ? `${n}s` : `${Math.floor(n / 60)}m ${n % 60}s`;
+}
+
+/** The folding reasoning over an assistant reply: "Thinking…" while it
+ *  streams with no answer yet, then "Thought for 4s". Closed by default. */
+function Reasoning({ text, seconds, thinking }) {
+  const [open, setOpen] = useState(false);
+  const title = thinking ? "Thinking…" : seconds ? `Thought for ${formatSeconds(seconds)}` : "Reasoning";
+  return (
+    <Collapsible
+      open={open}
+      onOpenChange={setOpen}
+      chevron="right"
+      title={<span className={cx("font-normal text-muted-foreground", thinking && "animate-pulse motion-reduce:animate-none")}>{title}</span>}
+      className="w-full max-w-prose"
+    >
+      <div className="border-l-2 border-border pl-3 text-xs leading-relaxed text-muted-foreground">
+        {text ? <ChatText text={text} /> : <span>Nothing to show yet.</span>}
+      </div>
+    </Collapsible>
+  );
+}
+
+/** A sent message's words, back in a field: Enter (or Save) saves through
+ *  `onSave(text)`, Esc (or Cancel) leaves it as it was. A failed save keeps
+ *  the field open with the reason under it. */
+function EditBox({ initial, onSave, onCancel }) {
+  const id = useId();
+  const [text, setText] = useState(initial);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+
+  async function save() {
+    const next = text.trim();
+    if (!next || saving) return;
+    if (next === initial.trim()) return onCancel();
+    setSaving(true);
+    setError(null);
+    let r;
+    try {
+      r = await onSave(next);
+    } catch (e) {
+      r = { ok: false, error: e?.message ?? String(e) };
+    }
+    setSaving(false);
+    if (r && r.ok === false) setError(r.error ?? "The change was not saved");
+  }
+
+  return (
+    <div className="grid w-[32rem] max-w-full gap-2">
+      <label htmlFor={id} className="sr-only">
+        Edit message
+      </label>
+      <Textarea
+        id={id}
+        autoFocus
+        autoGrow
+        minRows={2}
+        maxRows={10}
+        value={text}
+        invalid={Boolean(error)}
+        aria-describedby={error ? `${id}-error` : undefined}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") {
+            e.preventDefault();
+            onCancel();
+          } else if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+            e.preventDefault();
+            save();
+          }
+        }}
+      />
+      {error ? (
+        <p id={`${id}-error`} role="alert" className="text-xs text-destructive">
+          {error}
+        </p>
+      ) : null}
+      <div className="flex justify-end gap-2">
+        <Button size="sm" variant="quiet" onClick={onCancel} disabled={saving}>
+          Cancel
+        </Button>
+        <Button size="sm" variant="primary" onClick={save} loading={saving} disabled={!text.trim()}>
+          Save
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function Thinking({ label = "Thinking" }) {
+  return (
+    <span role="status" className="inline-flex h-5 items-center gap-1" aria-label={label}>
+      {[0, 150, 300].map((d) => (
+        <span key={d} aria-hidden="true" className="size-1.5 animate-pulse rounded-full bg-muted-foreground" style={{ animationDelay: `${d}ms` }} />
+      ))}
+    </span>
+  );
+}
+
+/**
+ * One message.
+ *   message   { id, role, content | parts, createdAt?, status?, error?,
+ *               author?: { name, src }, attachments?: [{ id?, name, size?, type?, url? }] }
+ *             status: sending · streaming · failed · (anything else: sent)
+ *   first / last   its place in a run from one author (MessageScroller
+ *             works these out); `first` shows the avatar, name and time
+ *   latest    the newest reply: its actions stay in view, not only on hover
+ *   message.reasoning (string) · message.reasoningDuration (seconds) — the
+ *             folding reasoning over an assistant reply
+ *   message.feedback  "up" · "down" — the thumbs already chosen
+ *   onFeedback(message, "up" | "down" | null)  thumbs on assistant replies;
+ *             may return { ok: false, error }: the choice goes back
+ *   onEdit(message, text)   an edit button on user messages; may return
+ *             { ok: false, error }: the field stays open with the reason
+ *   editing / onEditingChange(next)   control the edit (ChatThread does,
+ *             for ArrowUp in an empty composer)
+ */
+export function Message({
+  message,
+  first = true,
+  last = true,
+  latest = false,
+  variant = "plain",
+  assistantName = "Assistant",
+  assistantAvatar,
+  userName = "You",
+  userAvatar,
+  showUserAvatar = false,
+  onRetry,
+  onRegenerate,
+  onCopy,
+  actionsOf,
+  onFeedback,
+  onEdit,
+  editing: editingProp,
+  onEditingChange,
+  formatTime: timeOf = formatTime,
+  className,
+}) {
+  const [copied, setCopied] = useState(false);
+  const copiedTimer = useRef(0);
+  useEffect(() => () => clearTimeout(copiedTimer.current), []);
+  const [ownEditing, setOwnEditing] = useState(false);
+  const editing = editingProp ?? ownEditing;
+  const setEditing = (next) => {
+    if (editingProp === undefined) setOwnEditing(next);
+    onEditingChange?.(next);
+  };
+  // The thumbs: shown at once, taken back if the save fails.
+  const [choice, setChoice] = useState(undefined);
+  const [feedbackError, setFeedbackError] = useState(null);
+  const [feedbackBusy, setFeedbackBusy] = useState(false);
+  const given = message?.feedback ?? null;
+  useEffect(() => setChoice(undefined), [given]);
+
+  if (!message) return null;
+  const role = message.role === "user" ? "user" : message.role === "system" ? "system" : "assistant";
+  const text = textOf(message);
+  const status = message.status;
+  const streaming = status === "streaming";
+  const failed = status === "failed";
+  const sending = status === "sending";
+  const date = toDate(message.createdAt);
+
+  if (role === "system") {
+    return (
+      <div className={cx("flex justify-center px-2 py-1", className)}>
+        <ChatText text={text} className="max-w-prose text-balance text-center text-xs text-muted-foreground" />
+      </div>
+    );
+  }
+
+  const user = role === "user";
+  const name = message.author?.name ?? (user ? userName : assistantName);
+  const src = message.author?.src ?? (user ? userAvatar : assistantAvatar);
+  const showAvatar = !user || showUserAvatar;
+  const files = (message.attachments ?? []).filter(Boolean);
+
+  async function copy() {
+    try {
+      if (onCopy) await onCopy(message, text);
+      else await navigator.clipboard.writeText(text);
+      setCopied(true);
+      clearTimeout(copiedTimer.current);
+      copiedTimer.current = setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // No clipboard (an insecure origin): nothing to say beyond not ticking.
+    }
+  }
+
+  const feedback = choice !== undefined ? choice : given;
+  async function giveFeedback(v) {
+    const before = feedback;
+    const next = before === v ? null : v;
+    setChoice(next);
+    setFeedbackError(null);
+    setFeedbackBusy(true);
+    let r;
+    try {
+      r = await onFeedback(message, next);
+    } catch (e) {
+      r = { ok: false, error: e?.message ?? String(e) };
+    }
+    setFeedbackBusy(false);
+    if (r && r.ok === false) {
+      setChoice(before);
+      setFeedbackError(r.error ?? "Your feedback was not saved");
+    }
+  }
+
+  const reasoning = typeof message.reasoning === "string" ? message.reasoning : null;
+  const thinking = streaming && !text;
+
+  const extra = actionsOf?.(message) ?? [];
+  const canRegenerate = !user && onRegenerate && !streaming;
+  const hasActions = !sending && !streaming && !failed;
+
+  // The actions sit under the words on touch, where they always show.
+  const toolbar =
+    hasActions && (text || extra.length) ? (
+      <div
+        className={cx(
+          "-mx-1 flex items-center gap-0.5 transition-opacity",
+          latest && !user
+            ? "opacity-100"
+            : "pointer-events-none opacity-0 group-hover/message:pointer-events-auto group-hover/message:opacity-100 group-focus-within/message:pointer-events-auto group-focus-within/message:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100",
+          // On a pointer that hovers, the actions float instead of holding
+          // a row open under every message: beside a user's bubble, over
+          // the top corner of an assistant's (the newest reply keeps its row).
+          user
+            ? "flex-row-reverse [@media(hover:hover)]:absolute [@media(hover:hover)]:right-full [@media(hover:hover)]:top-0 [@media(hover:hover)]:mx-0 [@media(hover:hover)]:mr-1"
+            : !latest &&
+                "[@media(hover:hover)]:absolute [@media(hover:hover)]:-top-3 [@media(hover:hover)]:right-0 [@media(hover:hover)]:z-10 [@media(hover:hover)]:mx-0 [@media(hover:hover)]:rounded-md [@media(hover:hover)]:border [@media(hover:hover)]:border-border [@media(hover:hover)]:bg-card [@media(hover:hover)]:p-0.5 [@media(hover:hover)]:shadow-sm",
+        )}
+      >
+        {text ? (
+          <Tooltip label={copied ? "Copied" : "Copy"}>
+            <IconButton icon={copied ? "check" : "copy"} label={copied ? "Copied" : "Copy message"} size="sm" onClick={copy} />
+          </Tooltip>
+        ) : null}
+        {canRegenerate ? (
+          <Tooltip label="Regenerate">
+            <IconButton icon="refresh" label="Regenerate reply" size="sm" onClick={() => onRegenerate(message)} />
+          </Tooltip>
+        ) : null}
+        {!user && onFeedback && text ? (
+          <>
+            <Toggle
+              variant="quiet"
+              size="sm"
+              icon="thumbs-up"
+              label="Good reply"
+              pressed={feedback === "up"}
+              disabled={feedbackBusy}
+              onPressedChange={() => giveFeedback("up")}
+            />
+            <Toggle
+              variant="quiet"
+              size="sm"
+              icon="thumbs-down"
+              label="Bad reply"
+              pressed={feedback === "down"}
+              disabled={feedbackBusy}
+              onPressedChange={() => giveFeedback("down")}
+            />
+          </>
+        ) : null}
+        {user && onEdit && text ? (
+          <Tooltip label="Edit">
+            <IconButton icon="pencil" label="Edit message" size="sm" onClick={() => setEditing(true)} />
+          </Tooltip>
+        ) : null}
+        <Menu items={extra} label="More actions for this message" align={user ? "end" : "start"} />
+      </div>
+    ) : null;
+
+  return (
+    <article
+      aria-label={`Message from ${name}`}
+      data-role={role}
+      data-status={status || undefined}
+      className={cx("group/message relative flex gap-2.5", user && "flex-row-reverse", first ? "mt-4" : "mt-1", className)}
+    >
+      {showAvatar ? (
+        <div className="w-8 shrink-0">
+          {first ? <Avatar name={name} src={src} size="sm" shape={user ? "round" : "square"} /> : null}
+        </div>
+      ) : null}
+      <div
+        className={cx(
+          "flex min-w-0 flex-col gap-1",
+          user ? "max-w-[85%] items-end" : variant === "plain" ? "flex-1 items-start" : "max-w-[85%] items-start",
+        )}
+      >
+        {first ? (
+          <p className={cx("flex items-baseline gap-2 text-xs", user && "flex-row-reverse")}>
+            <span className="font-medium text-foreground">{name}</span>
+            {date ? (
+              <time dateTime={date.toISOString()} suppressHydrationWarning className="text-muted-foreground">
+                {timeOf(date)}
+              </time>
+            ) : null}
+          </p>
+        ) : null}
+
+        {!user && (reasoning || (thinking && reasoning !== null)) ? (
+          <Reasoning text={reasoning} seconds={message.reasoningDuration} thinking={thinking} />
+        ) : null}
+
+        {editing && user && onEdit ? (
+          <EditBox
+            initial={text}
+            onCancel={() => setEditing(false)}
+            onSave={async (next) => {
+              const r = await onEdit(message, next);
+              if (!(r && r.ok === false)) setEditing(false);
+              return r;
+            }}
+          />
+        ) : text || (streaming && reasoning === null) ? (
+          <div className={cx("flex max-w-full flex-col gap-1", user ? "relative items-end" : "items-start")}>
+            <Bubble
+              from={role}
+              variant={variant}
+              first={first}
+              last={last}
+              text={text || undefined}
+              streaming={streaming && Boolean(text)}
+              className={cx(failed && "opacity-70", sending && "opacity-80")}
+            >
+              {text ? null : <Thinking />}
+            </Bubble>
+            {toolbar}
+          </div>
+        ) : null}
+
+        {feedbackError ? (
+          <p role="alert" className="text-xs text-destructive">
+            {feedbackError}
+          </p>
+        ) : null}
+
+        {files.length ? (
+          <ul className={cx("flex max-w-full flex-wrap gap-2", user && "justify-end")}>
+            {files.map((f, i) => (
+              <li key={f.id ?? `${f.name}-${i}`} className="min-w-0 max-w-full">
+                <Attachment name={f.name} size={f.size} type={f.type} url={f.url} href={f.href} error={f.error} />
+              </li>
+            ))}
+          </ul>
+        ) : null}
+
+        {sending ? (
+          <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <Spinner size="sm" label={null} className="size-3" />
+            Sending…
+          </p>
+        ) : null}
+
+        {failed ? (
+          <div role="alert" className="flex flex-wrap items-center gap-x-2 text-xs text-destructive">
+            <Icon name="warning" size={14} />
+            <span>{message.error ? `Not sent: ${message.error}` : "Not sent"}</span>
+            {onRetry ? (
+              <Button variant="link" size="sm" className="min-h-9 text-xs" onClick={() => onRetry(message)}>
+                Retry
+              </Button>
+            ) : null}
+          </div>
+        ) : null}
+
+      </div>
+    </article>
+  );
+}

package/registry/blocks/chat/scroller.jsx

@@ -0,0 +1,247 @@
+"use client";
+
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Button, ScrollArea, Separator, Spinner, cx } from "../../ui";
+import { Message, textOf, toDate } from "./message";
+
+// MessageScroller — the conversation's scrolling list. It keeps to the
+// bottom while messages arrive and stream, unless the reader has scrolled
+// up: then it stays where they are and offers "Jump to latest". It puts a
+// day between messages from different days, works out which messages run
+// together from one author, loads older messages when the reader reaches
+// the top (keeping their place), and says each finished assistant reply
+// once to a screen reader.
+
+const NEAR_BOTTOM_PX = 64;
+const NEAR_TOP_PX = 120;
+const RUN_GAP_MS = 5 * 60 * 1000;
+
+// useLayoutEffect warns on the server; the scroll work only matters in a browser.
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+// Days are the reader's own, but the server does not know their time
+// zone: the first render (server and hydration alike) groups by UTC, and
+// the browser regroups by local days once it is running. Same markup on
+// both sides, so no hydration mismatch.
+function dayKey(d, local) {
+  return local ? `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}` : d.toISOString().slice(0, 10);
+}
+
+export function formatDay(date, now = new Date()) {
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const that = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const days = Math.round((today - that) / 86400000);
+  if (days === 0) return "Today";
+  if (days === 1) return "Yesterday";
+  return date.toLocaleDateString(undefined, {
+    weekday: "short",
+    day: "numeric",
+    month: "short",
+    year: date.getFullYear() === now.getFullYear() ? undefined : "numeric",
+  });
+}
+
+function authorKey(m) {
+  return `${m.role}|${m.author?.name ?? ""}`;
+}
+
+/** Messages with their day separators and run positions worked out. */
+function layout(messages, idOf, local) {
+  const out = [];
+  let prev = null;
+  let prevDay = null;
+  messages.forEach((m, i) => {
+    const date = toDate(m.createdAt);
+    const day = date ? dayKey(date, local) : prevDay;
+    if (date && day !== prevDay) out.push({ type: "day", key: `day-${day}`, date });
+    const prevDate = prev ? toDate(prev.createdAt) : null;
+    const joins =
+      prev &&
+      m.role !== "system" &&
+      authorKey(prev) === authorKey(m) &&
+      day === prevDay &&
+      !(date && prevDate && date - prevDate > RUN_GAP_MS);
+    if (joins) out[out.length - 1].last = false;
+    out.push({ type: "message", key: idOf(m, i), message: m, first: !joins, last: true });
+    prev = m;
+    prevDay = day;
+  });
+  // The newest reply keeps its actions in view: it is the one people copy
+  // or regenerate.
+  for (let i = out.length - 1; i >= 0; i--) {
+    if (out[i].type === "message" && out[i].message.role === "assistant") {
+      out[i].latest = true;
+      break;
+    }
+  }
+  return out;
+}
+
+export function MessageScroller({
+  messages,
+  renderMessage,
+  idOf = (m, i) => String(m.id ?? i),
+  onLoadMore,
+  hasMore = false,
+  loadingMore = false,
+  loadMoreLabel = "Load earlier messages",
+  jumpLabel = "Jump to latest",
+  emptyState = null,
+  formatDay: dayOf = formatDay,
+  announce = (m) => `${m.author?.name ?? "Assistant"} replied: ${textOf(m).slice(0, 280)}`,
+  label = "Conversation",
+  className,
+  children,
+}) {
+  const scroller = useRef(null);
+  const atBottom = useRef(true);
+  const anchor = useRef(null);
+  const settled = useRef(new Map());
+  const primed = useRef(false);
+  const [away, setAway] = useState(false);
+  const [unseen, setUnseen] = useState(false);
+  const [said, setSaid] = useState("");
+  const [local, setLocal] = useState(false);
+  useEffect(() => setLocal(true), []);
+
+  const list = messages ?? [];
+  const rows = layout(list, idOf, local);
+  const lastMsg = list[list.length - 1];
+  const firstId = list.length ? idOf(list[0], 0) : null;
+  // What changes when the conversation grows at the bottom: the last
+  // message, its status, and how much of it has streamed in.
+  const tail = lastMsg ? `${idOf(lastMsg, list.length - 1)}|${lastMsg.status ?? ""}|${textOf(lastMsg).length}` : "";
+
+  function toBottom(smooth) {
+    const el = scroller.current;
+    if (!el) return;
+    el.scrollTo({ top: el.scrollHeight, behavior: smooth ? "smooth" : "auto" });
+  }
+
+  function onScroll() {
+    const el = scroller.current;
+    if (!el) return;
+    const bottom = el.scrollHeight - el.scrollTop - el.clientHeight <= NEAR_BOTTOM_PX;
+    atBottom.current = bottom;
+    setAway(!bottom);
+    if (bottom) setUnseen(false);
+    if (el.scrollTop <= NEAR_TOP_PX && hasMore && !loadingMore && onLoadMore) loadMore();
+  }
+
+  function loadMore() {
+    const el = scroller.current;
+    if (el) anchor.current = { id: firstId, height: el.scrollHeight, top: el.scrollTop };
+    onLoadMore?.();
+  }
+
+  // Older messages landed above: keep the reader on the message they were reading.
+  useIsoLayoutEffect(() => {
+    const el = scroller.current;
+    const a = anchor.current;
+    if (!el || !a || a.id === firstId) return;
+    el.scrollTop = a.top + (el.scrollHeight - a.height);
+    anchor.current = null;
+  }, [firstId]);
+
+  // Newer messages: follow them if the reader was at the bottom, or if the
+  // newest is their own; otherwise flag that there is something below.
+  useIsoLayoutEffect(() => {
+    if (!lastMsg) {
+      atBottom.current = true;
+      setAway(false);
+      setUnseen(false);
+      return;
+    }
+    if (!primed.current) {
+      primed.current = true;
+      toBottom(false);
+      return;
+    }
+    if (atBottom.current || lastMsg.role === "user") {
+      toBottom(false);
+      atBottom.current = true;
+      setAway(false);
+      setUnseen(false);
+    } else {
+      setUnseen(true);
+    }
+  }, [tail]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Say a reply once, when it is whole — never token by token.
+  useEffect(() => {
+    const seen = settled.current;
+    const first = seen.size === 0;
+    list.forEach((m, i) => {
+      const id = idOf(m, i);
+      const done = m.status !== "streaming" && m.status !== "sending";
+      const was = seen.get(id);
+      seen.set(id, done);
+      if (!first && m.role === "assistant" && done && was !== true && textOf(m)) setSaid(announce(m));
+    });
+  }, [tail]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const draw = renderMessage ?? ((m, ctx) => <Message message={m} first={ctx.first} last={ctx.last} latest={ctx.latest} />);
+
+  return (
+    <div className={cx("relative flex min-h-0 flex-col", className)}>
+      <ScrollArea
+        ref={scroller}
+        onScroll={onScroll}
+        label={label}
+        aria-busy={loadingMore || undefined}
+        className="flex-1"
+      >
+        <div className="flex min-h-full flex-col justify-end px-3 py-4 sm:px-4">
+          {hasMore || loadingMore ? (
+            <div className="flex justify-center pb-3">
+              {loadingMore ? (
+                <span className="flex min-h-9 items-center gap-2 text-xs text-muted-foreground">
+                  <Spinner size="sm" label={null} />
+                  Loading earlier messages…
+                </span>
+              ) : (
+                <Button variant="quiet" size="sm" onClick={loadMore}>
+                  {loadMoreLabel}
+                </Button>
+              )}
+            </div>
+          ) : null}
+          {list.length === 0 && !loadingMore ? emptyState : null}
+          <ol className="flex flex-col [&>li:first-child>*]:mt-0">
+            {rows.map((row) =>
+              row.type === "day" ? (
+                <li key={row.key} className="mt-6 first:mt-0">
+                  <Separator label={<span suppressHydrationWarning>{dayOf(row.date)}</span>} />
+                </li>
+              ) : (
+                <li key={row.key} className="flex flex-col">
+                  {draw(row.message, { first: row.first, last: row.last, latest: Boolean(row.latest) })}
+                </li>
+              ),
+            )}
+          </ol>
+          {children}
+        </div>
+      </ScrollArea>
+      {away ? (
+        <div className="pointer-events-none absolute inset-x-0 bottom-3 flex justify-center">
+          <Button
+            variant="secondary"
+            size="sm"
+            icon="chevron-down"
+            className="pointer-events-auto rounded-full shadow-md"
+            onClick={() => {
+              toBottom(true);
+              setUnseen(false);
+            }}
+          >
+            {unseen ? "New messages" : jumpLabel}
+          </Button>
+        </div>
+      ) : null}
+      <p aria-live="polite" className="sr-only">
+        {said}
+      </p>
+    </div>
+  );
+}