@protobase/ui 0.53.3 → 0.53.5

package/dist/app/change-confirm/asks-to-confirm.js

@@ -0,0 +1,10 @@
+import { differs } from "../../live/field-values.js";
+//#region src/app/change-confirm/asks-to-confirm.ts
+const draftOf = (next) => typeof next === "object" && next !== null && "key" in next ? next.key : next;
+/**
+* Whether a change to a field with `.confirm()` asks first: when it moves the value away from the stored one while the
+* value on screen is still that one, so a text asks at its first key and not at every one after.
+*/
+const asksToConfirm = (field, hints, value, stored, next) => hints?.confirm !== void 0 && !differs(field, value, stored) && differs(field, draftOf(next), stored);
+//#endregion
+export { asksToConfirm };

package/dist/app/change-confirm/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from "../../locale/messages.js";
+//#region src/app/change-confirm/messages.ts
+const text = defineMessages({
+	en: {
+		title: (label) => `Change ${label}?`,
+		change: "Change",
+		cancel: "Cancel"
+	},
+	nl: {
+		title: (label) => `${label} wijzigen?`,
+		change: "Wijzigen",
+		cancel: "Annuleren"
+	}
+});
+//#endregion
+export { text };

package/dist/app/change-confirm/use-change-confirm.js

@@ -0,0 +1,51 @@
+import { Button } from "../../primitives/button.js";
+import { Dialog } from "../../primitives/dialog.js";
+import { humanize } from "../../live/naming.js";
+import { asksToConfirm } from "./asks-to-confirm.js";
+import { text } from "./messages.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/app/change-confirm/use-change-confirm.tsx
+/**
+* Whether `node` sits in the question a change asks. The dialog is portalled to the body, so a list cell does not clip
+* it, while its events still bubble through the editor that asked it.
+*/
+const inChangeConfirm = (node) => node instanceof Element && node.closest("[data-change-confirm]") !== null;
+/**
+* The field's `onChange`, asking the view's `.confirm()` question before it hands on a change that `asksToConfirm`
+* picks out, and the dialog that asks it. Cancelling drops the change, so the field keeps its value.
+*/
+const useChangeConfirm = ({ field, hints, value, stored, onChange }) => {
+	const [pending, setPending] = useState();
+	const change = (next) => {
+		if (asksToConfirm(field, hints, value, stored, next)) setPending({ next });
+		else onChange(next);
+	};
+	const cancel = () => setPending(void 0);
+	const confirm = () => {
+		setPending(void 0);
+		onChange(pending.next);
+	};
+	return {
+		onChange: change,
+		dialog: pending && createPortal(/* @__PURE__ */ jsx("div", {
+			"data-change-confirm": "",
+			children: /* @__PURE__ */ jsx(Dialog, {
+				title: text("title", hints?.label ?? humanize(field.name)),
+				description: hints?.confirm,
+				onClose: cancel,
+				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+					onClick: cancel,
+					children: text("cancel")
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					onClick: confirm,
+					children: text("change")
+				})] })
+			})
+		}), document.body)
+	};
+};
+//#endregion
+export { inChangeConfirm, useChangeConfirm };

package/dist/app/comments/comment-body.js

@@ -1,13 +1,10 @@
-import { bodyParts } from "./mention-text.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { MentionedText } from "../../mentions/mentioned-text.js";
+import { jsx } from "react/jsx-runtime";
 //#region src/app/comments/comment-body.tsx
 /** A comment's text as written, line breaks kept, each `@{name}` of someone it mentions picked out. */
-const CommentBody = ({ comment }) => /* @__PURE__ */ jsx("p", {
-	className: "whitespace-pre-wrap break-words",
-	children: bodyParts(comment.body, comment.mentions).map((part, index) => "mention" in part ? /* @__PURE__ */ jsxs("span", {
-		className: "font-medium text-primary",
-		children: ["@", part.mention]
-	}, index) : part.text)
+const CommentBody = ({ comment }) => /* @__PURE__ */ jsx(MentionedText, {
+	text: comment.body,
+	mentions: comment.mentions
 });
 //#endregion
 export { CommentBody };

package/dist/app/comments/comment-composer.js

@@ -1,70 +1,37 @@
-import { cn } from "../../lib/cn.js";
+import { useClient } from "../../data/api-provider.js";
 import { Button } from "../../primitives/button.js";
 import { useToast } from "../../toasts/toast-provider.js";
 import { refusalReason } from "../displays/board-columns.js";
 import { useNavigationGuard } from "../router.js";
-import { Textarea } from "../../primitives/textarea.js";
-import { menuKeyTarget } from "../../primitives/menu-keys.js";
-import { activeMention, insertMention, mentionedIds } from "./mention-text.js";
-import { useMentionable } from "./use-mentionable.js";
+import { mentionedIds } from "../../mentions/mention-text.js";
+import { MentionBox, emptyDraft } from "../../mentions/mention-box.js";
 import { usePostComment } from "./use-post-comment.js";
 import { text } from "./messages.js";
-import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/comments/comment-composer.tsx
-/** The most people the list offers; few enough that it never needs a scrollbar of its own. */
-const shownPeople = 8;
 /**
-* The box a comment is written in. Typing `@` lists the people who may read the record by the name typed after it:
-* the arrows move, Enter or Tab picks, Escape closes. ⌘/Ctrl+Enter or the button posts.
+* The box a comment is written in. Typing `@` lists the people who may read the record by the name typed after it
+* (see `MentionBox`). ⌘/Ctrl+Enter or the button posts.
 */
 const CommentComposer = ({ resource, recordKey }) => {
-	const [draft, setDraft] = useState("");
-	const [caret, setCaret] = useState(0);
-	const [focused, setFocused] = useState(false);
-	const [picked, setPicked] = useState([]);
-	const [active, setActive] = useState(0);
-	const [closed, setClosed] = useState();
-	const box = useRef(null);
-	const nextCaret = useRef(void 0);
-	const listId = useId();
+	const [draft, setDraft] = useState(emptyDraft);
+	const client = useClient();
 	const toast = useToast();
 	const post = usePostComment(resource, recordKey);
-	useNavigationGuard(draft.trim() !== "" || post.isPending, "input-lost");
-	const mention = activeMention(draft, caret);
-	const open = focused && mention !== void 0 && mention.start !== closed;
-	const people = useMentionable(resource, recordKey, open ? mention.query : void 0);
-	const options = open ? (people.data ?? []).slice(0, shownPeople) : [];
-	const listed = open && people.data !== void 0;
-	const optionId = (index) => `${listId}-${index}`;
-	useEffect(() => setActive(0), [mention?.query]);
-	const mentionStart = mention?.start;
-	useEffect(() => {
-		if (mentionStart === void 0) setClosed(void 0);
-	}, [mentionStart]);
-	useLayoutEffect(() => {
-		if (nextCaret.current === void 0 || !box.current) return;
-		box.current.setSelectionRange(nextCaret.current, nextCaret.current);
-		setCaret(nextCaret.current);
-		nextCaret.current = void 0;
-	}, [draft]);
-	const pick = (user) => {
-		if (!mention) return;
-		const next = insertMention(draft, mention, user.name);
-		nextCaret.current = next.caret;
-		setDraft(next.text);
-		setPicked((current) => [...current, user]);
-	};
+	const searchPeople = useCallback((query) => client.mentionable(resource, recordKey, query), [
+		client,
+		resource,
+		recordKey
+	]);
+	useNavigationGuard(draft.text.trim() !== "" || post.isPending, "input-lost");
 	const submit = () => {
-		if (draft.trim() === "" || post.isPending) return;
+		if (draft.text.trim() === "" || post.isPending) return;
 		post.mutate({
-			body: draft,
-			mentions: mentionedIds(draft, picked)
+			body: draft.text,
+			mentions: mentionedIds(draft.text, draft.picked)
 		}, {
-			onSuccess: () => {
-				setDraft("");
-				setPicked([]);
-			},
+			onSuccess: () => setDraft(emptyDraft),
 			onError: (error) => toast.show({
 				state: "error",
 				title: text("couldNotPost"),
@@ -73,75 +40,23 @@ const CommentComposer = ({ resource, recordKey }) => {
 		});
 	};
 	const onKeyDown = (event) => {
-		if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
-			event.preventDefault();
-			submit();
-			return;
-		}
-		if (!open) return;
-		const target = menuKeyTarget(event.key, active, options.length);
-		if (target !== void 0 && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
-			event.preventDefault();
-			setActive(target);
-			return;
-		}
-		if ((event.key === "Enter" || event.key === "Tab") && options[active]) {
-			event.preventDefault();
-			pick(options[active]);
-			return;
-		}
-		if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			setClosed(mention.start);
-		}
+		if (event.key !== "Enter" || !(event.metaKey || event.ctrlKey)) return;
+		event.preventDefault();
+		submit();
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-2",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "relative",
-			children: [/* @__PURE__ */ jsx(Textarea, {
-				ref: box,
-				role: "combobox",
-				"aria-label": text("comment"),
-				"aria-multiline": true,
-				"aria-autocomplete": "list",
-				"aria-expanded": listed,
-				"aria-controls": listId,
-				"aria-activedescendant": listed && options[active] ? optionId(active) : void 0,
-				placeholder: text("placeholder"),
-				value: draft,
-				onChange: (event) => {
-					setDraft(event.target.value);
-					setCaret(event.target.selectionStart);
-				},
-				onSelect: (event) => setCaret(event.currentTarget.selectionStart),
-				onFocus: () => setFocused(true),
-				onBlur: () => setFocused(false),
-				onKeyDown
-			}), listed && /* @__PURE__ */ jsxs("ul", {
-				id: listId,
-				role: "listbox",
-				"aria-label": text("peopleToMention"),
-				className: "absolute z-30 mt-1 w-full max-w-sm rounded-md border bg-background py-1 shadow-pop",
-				onMouseDown: (event) => event.preventDefault(),
-				children: [options.map((user, index) => /* @__PURE__ */ jsx("li", {
-					id: optionId(index),
-					role: "option",
-					"aria-selected": index === active,
-					className: cn("cursor-pointer truncate px-3 py-1.5", index === active && "bg-muted"),
-					onMouseMove: () => index !== active && setActive(index),
-					onClick: () => pick(user),
-					children: user.name
-				}, user.id)), options.length === 0 && /* @__PURE__ */ jsx("li", {
-					className: "px-3 py-1.5 text-muted-foreground",
-					children: text("noOneFound")
-				})]
-			})]
+		children: [/* @__PURE__ */ jsx(MentionBox, {
+			"aria-label": text("comment"),
+			placeholder: text("placeholder"),
+			value: draft,
+			onChange: setDraft,
+			searchPeople,
+			onKeyDown
 		}), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
 			variant: "primary",
 			size: "sm",
-			disabled: draft.trim() === "",
+			disabled: draft.text.trim() === "",
 			loading: post.isPending,
 			onClick: submit,
 			children: text("comment")

package/dist/app/comments/messages.js

@@ -5,8 +5,6 @@ const text = defineMessages({
 		couldNotPost: "Could not post the comment",
 		comment: "Comment",
 		placeholder: "Write a comment, @ to mention someone",
-		peopleToMention: "People to mention",
-		noOneFound: "No one found",
 		couldNotLoad: "Could not load the comments",
 		showEarlier: "Show earlier comments",
 		noComments: "No comments yet."
@@ -15,8 +13,6 @@ const text = defineMessages({
 		couldNotPost: "Kon de opmerking niet plaatsen",
 		comment: "Opmerking",
 		placeholder: "Schrijf een opmerking, @ om iemand te noemen",
-		peopleToMention: "Mensen om te noemen",
-		noOneFound: "Niemand gevonden",
 		couldNotLoad: "Kon de opmerkingen niet laden",
 		showEarlier: "Eerdere opmerkingen tonen",
 		noComments: "Nog geen opmerkingen."

package/dist/app/field-editor.js

@@ -20,8 +20,9 @@ import { Markdown } from "../markdown/markdown.js";
 import { MarkdownEditor } from "../markdown/markdown-editor.js";
 import { numeric, numericInputProps } from "./numeric-input.js";
 import { ContactLink } from "../live/contact-link.js";
+import { useChangeConfirm } from "./change-confirm/use-change-confirm.js";
 import { ArrowUpRight } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { enumLabel } from "@protobase/schema";
 //#region src/app/field-editor.tsx
 const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo, relationPicker, invalid, locked, placeholder, reveal, resource, onChange }) => {
@@ -150,11 +151,7 @@ const BuiltInEditor = ({ field, hints, value, stored, relationLabel, relationTo,
 		onChange: (event) => onChange(event.target.value)
 	});
 };
-/**
-* A field on a form: its field type's editor when the view chooses one that has an editor and the field may change,
-* its display when it may not, and the built-in input or value otherwise, and when the field type throws.
-*/
-const FieldEditor = (props) => {
+const ChosenEditor = (props) => {
 	const { field, hints, value, stored, invalid, locked, onChange } = props;
 	const shown = useShownWidget(field, hints);
 	const builtIn = /* @__PURE__ */ jsx(BuiltInEditor, { ...props });
@@ -177,5 +174,17 @@ const FieldEditor = (props) => {
 		fallback: builtIn
 	});
 };
+/**
+* A field on a form: its field type's editor when the view chooses one that has an editor and the field may change,
+* its display when it may not, and the built-in input or value otherwise, and when the field type throws. A field with
+* `.confirm()` asks its question before its value first changes.
+*/
+const FieldEditor = (props) => {
+	const confirm = useChangeConfirm(props);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ChosenEditor, {
+		...props,
+		onChange: confirm.onChange
+	}), confirm.dialog] });
+};
 //#endregion
 export { FieldEditor };

package/dist/app/list-edit/cell-field-editor.js

@@ -1,4 +1,5 @@
 import { differs, toFieldDraft, toPatchValue } from "../../live/field-values.js";
+import { inChangeConfirm } from "../change-confirm/use-change-confirm.js";
 import { FieldEditor } from "../field-editor.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -23,6 +24,7 @@ const CellFieldEditor = ({ field, hints, resource, stored, onSave, close }) => {
 		close(move);
 	};
 	const onKeyDown = (event) => {
+		if (inChangeConfirm(event.target)) return;
 		if (event.key === "Enter") {
 			event.preventDefault();
 			finish(true);
@@ -36,7 +38,7 @@ const CellFieldEditor = ({ field, hints, resource, stored, onSave, close }) => {
 		}
 	};
 	const onBlur = (event) => {
-		if (!ref.current?.contains(event.relatedTarget)) finish(true);
+		if (!ref.current?.contains(event.relatedTarget) && !inChangeConfirm(event.relatedTarget)) finish(true);
 	};
 	const onChange = (next) => {
 		setDraft(next);

package/dist/app/list-page.js

@@ -492,6 +492,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			/* @__PURE__ */ jsx(PageHeader, {
 				title: heading?.title ?? plural,
 				subtitle: heading ? heading.subtitle : view?.help,
+				subtitleBelow: true,
 				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					displaySwitch(!desktop),
 					sortButton,

package/dist/app-shell/page-header.js

@@ -1,19 +1,43 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/page-header.tsx
-const PageHeader = ({ title, subtitle, actions }) => /* @__PURE__ */ jsxs("div", {
-	className: "flex flex-col gap-x-4 gap-y-2 md:flex-row md:items-end md:justify-between",
+const PageHeader = ({ title, subtitle, actions, subtitleBelow }) => {
+	if (subtitleBelow) return /* @__PURE__ */ jsx(StackedPageHeader, {
+		title,
+		subtitle,
+		actions
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-x-4 gap-y-2 md:flex-row md:items-end md:justify-between",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 break-words md:flex-1",
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: "text-xl font-semibold tracking-tight",
+				children: title
+			}), subtitle && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: subtitle
+			})]
+		}), actions && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap items-center gap-2 md:justify-end",
+			children: actions
+		})]
+	});
+};
+/** The title and actions in one row, which wraps the actions below the title when it runs out of room, then the subtitle. */
+const StackedPageHeader = ({ title, subtitle, actions }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex flex-col gap-2",
 	children: [/* @__PURE__ */ jsxs("div", {
-		className: "min-w-0 break-words md:flex-1",
+		className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2 md:flex-nowrap",
 		children: [/* @__PURE__ */ jsx("h1", {
-			className: "text-xl font-semibold tracking-tight",
+			className: "min-w-0 break-words text-xl font-semibold tracking-tight md:flex-1",
 			children: title
-		}), subtitle && /* @__PURE__ */ jsx("p", {
-			className: "text-muted-foreground",
-			children: subtitle
+		}), actions && /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap items-center gap-2 md:justify-end",
+			children: actions
 		})]
-	}), actions && /* @__PURE__ */ jsx("div", {
-		className: "flex flex-wrap items-center gap-2 md:justify-end",
-		children: actions
+	}), subtitle && /* @__PURE__ */ jsx("p", {
+		className: "break-words text-muted-foreground",
+		children: subtitle
 	})]
 });
 //#endregion

package/dist/chat/chat-day.d.ts

@@ -0,0 +1,6 @@
+//#region src/chat/chat-day.d.ts
+/** Whether two ISO timestamps fall on the same day in `zone`, the viewer's unless given: a day divider goes between two messages that do not. */
+export declare const sameChatDay: (a: string, b: string, zone?: string) => boolean;
+/** The label of the divider above a day's first message, sent at `time`: "Today", "Yesterday" or "Mon, 26 Oct 2026", as the viewer's calendar in `zone` has it. */
+export declare const chatDayLabel: (time: string, now?: number, zone?: string) => string;
+//#endregion

package/dist/chat/chat-day.js

@@ -0,0 +1,17 @@
+import { dayIn, viewerZone } from "../format/zone.js";
+import { formatWeekdayDate } from "../format/date.js";
+import { text } from "./messages.js";
+//#region src/chat/chat-day.ts
+const dayBefore = (day) => (/* @__PURE__ */ new Date(Date.parse(`${day}T00:00:00Z`) - 864e5)).toISOString().slice(0, 10);
+/** Whether two ISO timestamps fall on the same day in `zone`, the viewer's unless given: a day divider goes between two messages that do not. */
+const sameChatDay = (a, b, zone = viewerZone()) => dayIn(Date.parse(a), zone) === dayIn(Date.parse(b), zone);
+/** The label of the divider above a day's first message, sent at `time`: "Today", "Yesterday" or "Mon, 26 Oct 2026", as the viewer's calendar in `zone` has it. */
+const chatDayLabel = (time, now = Date.now(), zone = viewerZone()) => {
+	const day = dayIn(Date.parse(time), zone);
+	const today = dayIn(now, zone);
+	if (day === today) return text("today");
+	if (day === dayBefore(today)) return text("yesterday");
+	return formatWeekdayDate(Date.parse(`${day}T00:00:00Z`));
+};
+//#endregion
+export { chatDayLabel, sameChatDay };

package/dist/chat/chat-divider.d.ts

@@ -0,0 +1,15 @@
+//#region src/chat/chat-divider.d.ts
+export type ChatDividerProps =
+/** A muted line between the messages of two days, labelled with the later one, such as by `chatDayLabel`. */
+{
+  tone?: 'day';
+  label: string;
+} |
+/** A line above the first message the reader has not seen, "New messages" unless labelled otherwise. */
+{
+  tone: 'new';
+  label?: string;
+};
+/** A line across a chat with a label in its middle, between the messages of two days or above the new ones. */
+export declare const ChatDivider: ({ tone, label }: ChatDividerProps) => import("react").JSX.Element;
+//#endregion

package/dist/chat/chat-divider.js

@@ -0,0 +1,25 @@
+import { cn } from "../lib/cn.js";
+import { text } from "./messages.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat/chat-divider.tsx
+/** A line across a chat with a label in its middle, between the messages of two days or above the new ones. */
+const ChatDivider = ({ tone = "day", label }) => {
+	const shown = label ?? text("newMessages");
+	const line = cn("h-px flex-1", tone === "new" ? "bg-danger" : "bg-border");
+	return /* @__PURE__ */ jsxs("div", {
+		role: "separator",
+		"aria-label": shown,
+		"data-tone": tone,
+		className: "flex items-center gap-3 text-xs font-medium",
+		children: [
+			/* @__PURE__ */ jsx("span", { className: line }),
+			/* @__PURE__ */ jsx("span", {
+				className: tone === "new" ? "text-danger" : "text-muted-foreground",
+				children: shown
+			}),
+			/* @__PURE__ */ jsx("span", { className: line })
+		]
+	});
+};
+//#endregion
+export { ChatDivider };

package/dist/chat/chat-message.d.ts

@@ -1,8 +1,30 @@
 import { ReactNode } from "react";
 //#region src/chat/chat-message.d.ts
-/** One message of a chat: the user's as a bubble on the right, the other side's as plain content, cards included. */
-export declare const ChatMessage: ({ from, children }: {
-  from: "user" | "assistant";
+/** Who wrote a message of a chat between people: `id` gives their avatar its colour, `name` its initials. */
+export type ChatAuthor = {
+  id: string;
+  name?: string;
+};
+type Common = {
   children: ReactNode;
-}) => import("react").JSX.Element;
+  /** A small line under the message, such as whether it was read. */
+  footer?: ReactNode;
+};
+export type ChatMessageProps = Common & ({
+  /** An assistant chat's side: the user's message as a bubble on the right, the other side's as plain content. */
+  from: 'user' | 'assistant';
+  author?: never;
+} | {
+  /** A chat between people: the message on the left under its author's name and time, beside their avatar. */
+  author: ChatAuthor;
+  from?: never;
+  /** When it was sent, as an ISO timestamp, shown as the time of day. */
+  time?: string;
+  /** Drawn instead of the author's initials, such as their photo. */
+  avatar?: ReactNode;
+  /** It follows a message by the same author, so it leaves out their avatar, name and time. */
+  continued?: boolean;
+});
+/** One message of a chat, cards included: an assistant chat's user or assistant side, or a person's message with `author`. */
+export declare const ChatMessage: (props: ChatMessageProps) => import("react").JSX.Element;
 //#endregion

package/dist/chat/chat-message.js

@@ -1,11 +1,71 @@
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
+import { formatDateTime, formatTime } from "../format/date.js";
+import { Avatar } from "../primitives/avatar.js";
+import { hueOf, initialsOf } from "../auth/user-to-shell.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/chat-message.tsx
-/** One message of a chat: the user's as a bubble on the right, the other side's as plain content, cards included. */
-const ChatMessage = ({ from, children }) => /* @__PURE__ */ jsx("div", {
-	"data-from": from,
-	className: cn("flex min-w-0 flex-col gap-2 whitespace-pre-wrap break-words", from === "user" ? "ml-8 self-end rounded-lg rounded-br-sm bg-primary px-3 py-2 text-primary-foreground shadow-sm" : "mr-4 text-foreground"),
+const Footer = ({ children, className }) => /* @__PURE__ */ jsx("p", {
+	className: cn("text-xs text-muted-foreground", className),
 	children
 });
+const Sent = ({ time }) => {
+	const at = Date.parse(time);
+	return /* @__PURE__ */ jsx("time", {
+		dateTime: time,
+		title: formatDateTime(at),
+		className: "text-xs text-muted-foreground",
+		children: formatTime(at)
+	});
+};
+/** One message of a chat, cards included: an assistant chat's user or assistant side, or a person's message with `author`. */
+const ChatMessage = (props) => {
+	const { children, footer } = props;
+	if (props.author) {
+		const { author, time, avatar, continued } = props;
+		const name = author.name ?? author.id;
+		return /* @__PURE__ */ jsxs("div", {
+			"data-from": "person",
+			className: cn("flex min-w-0 gap-3", continued && "-mt-3"),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "w-8 shrink-0",
+				children: !continued && (avatar ?? /* @__PURE__ */ jsx(Avatar, {
+					initials: initialsOf(name) || "?",
+					hue: hueOf(author.id),
+					size: "md",
+					className: "ring-0"
+				}))
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				children: [
+					!continued && /* @__PURE__ */ jsxs("p", {
+						className: "flex items-baseline gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-medium text-foreground",
+							children: name
+						}), time && /* @__PURE__ */ jsx(Sent, { time })]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex min-w-0 flex-col gap-2 whitespace-pre-wrap break-words text-foreground",
+						children
+					}),
+					footer && /* @__PURE__ */ jsx(Footer, { children: footer })
+				]
+			})]
+		});
+	}
+	const bubble = /* @__PURE__ */ jsx("div", {
+		"data-from": props.from,
+		className: cn("flex min-w-0 flex-col gap-2 whitespace-pre-wrap break-words", props.from === "user" ? "ml-8 self-end rounded-lg rounded-br-sm bg-primary px-3 py-2 text-primary-foreground shadow-sm" : "mr-4 text-foreground"),
+		children
+	});
+	if (!footer) return bubble;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-col gap-1", props.from === "user" && "items-end"),
+		children: [bubble, /* @__PURE__ */ jsx(Footer, {
+			className: props.from === "user" ? "text-right" : void 0,
+			children: footer
+		})]
+	});
+};
 //#endregion
 export { ChatMessage };

package/dist/chat/chat-thread.d.ts

@@ -4,9 +4,19 @@ export type ChatThreadProps = {
   children: ReactNode;
   /** Shown centred while the chat is empty. */
   empty?: ReactNode;
-  /** Changes whenever the chat grows, which scrolls it to the end. */
+  /** The number of messages, which changes whenever the chat grows. */
   length: number;
+  /** Loads the messages before the first, offered as a button at the top while given. */
+  onLoadEarlier?: () => void;
+  /** The earlier messages are on their way. */
+  loadingEarlier?: boolean;
+  /** Changes when the reader sends a message, such as a count of their sends: each change goes to the end wherever they were, and the message that arrives next follows. */
+  followKey?: string | number;
 };
-/** The scrolling list of a chat's messages, kept at the newest one as messages arrive. */
-export declare const ChatThread: ({ children, empty, length }: ChatThreadProps) => import("react").JSX.Element;
+/**
+ * The scrolling list of a chat's messages. A reader at the end follows new messages; one who scrolled back stays where
+ * they are until `followKey` changes, and earlier messages loaded above keep them on the message they were reading. It
+ * scrolls inside itself, not with the page, since a chat keeps its composer in view beneath it.
+ */
+export declare const ChatThread: ({ children, empty, length, onLoadEarlier, loadingEarlier, followKey }: ChatThreadProps) => import("react").JSX.Element;
 //#endregion