@protobase/ui 0.53.4 → 0.53.5

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/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

package/dist/chat/chat-thread.js

@@ -1,22 +1,91 @@
-import { useEffect, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/button.js";
+import { text } from "./messages.js";
+import { isAtEnd, scrollAfterChange } from "./thread-scroll.js";
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/chat-thread.tsx
-/** The scrolling list of a chat's messages, kept at the newest one as messages arrive. */
-const ChatThread = ({ children, empty, length }) => {
+/** The message the reader is reading: the first whose bottom shows. */
+const readPlace = (box, list, followKey) => {
+	const top = box.getBoundingClientRect().top;
+	const element = [...list.children].find((child) => child.getBoundingClientRect().bottom > top);
+	const anchor = element && { anchor: {
+		element,
+		top: element.getBoundingClientRect().top - top
+	} };
+	return {
+		atEnd: isAtEnd(box),
+		first: list.firstElementChild ?? void 0,
+		followKey,
+		...anchor
+	};
+};
+/**
+* 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.
+*/
+const ChatThread = ({ children, empty, length, onLoadEarlier, loadingEarlier, followKey }) => {
+	const box = useRef(null);
 	const list = useRef(null);
+	const place = useRef({
+		atEnd: true,
+		first: void 0,
+		followKey
+	});
+	const remember = () => {
+		if (box.current && list.current) place.current = readPlace(box.current, list.current, followKey);
+	};
+	useLayoutEffect(() => {
+		const element = box.current;
+		if (!element || !list.current) return;
+		const before = place.current;
+		const anchorTop = before.anchor && before.anchor.element.isConnected ? before.anchor.element.getBoundingClientRect().top - element.getBoundingClientRect().top : void 0;
+		const next = scrollAfterChange(before, {
+			first: list.current.firstElementChild ?? void 0,
+			anchorTop,
+			scrollTop: element.scrollTop,
+			scrollHeight: element.scrollHeight,
+			followKey
+		});
+		if (next !== void 0) element.scrollTop = next;
+		remember();
+	}, [length, followKey]);
 	useEffect(() => {
-		const element = list.current;
-		if (element) element.scrollTop = element.scrollHeight;
-	}, [length]);
-	return /* @__PURE__ */ jsx("div", {
-		ref: list,
-		role: "log",
-		"aria-live": "polite",
-		className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4",
-		children: length === 0 && empty ? /* @__PURE__ */ jsx("div", {
-			className: "m-auto max-w-60 text-center text-muted-foreground",
-			children: empty
-		}) : children
+		const element = box.current;
+		if (!element || !list.current) return;
+		const observer = new ResizeObserver(() => {
+			if (place.current.atEnd) element.scrollTop = element.scrollHeight;
+		});
+		observer.observe(element);
+		observer.observe(list.current);
+		return () => observer.disconnect();
+	}, []);
+	const showsEmpty = length === 0 && Boolean(empty);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: box,
+		onScroll: remember,
+		className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 [overflow-anchor:none]",
+		children: [
+			onLoadEarlier && /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				className: "self-center",
+				loading: loadingEarlier,
+				onClick: onLoadEarlier,
+				children: text("loadEarlier")
+			}),
+			showsEmpty && /* @__PURE__ */ jsx("div", {
+				className: "m-auto max-w-60 text-center text-muted-foreground",
+				children: empty
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: list,
+				role: "log",
+				"aria-live": "polite",
+				className: cn("flex flex-col gap-4", showsEmpty && "hidden"),
+				children
+			})
+		]
 	});
 };
 //#endregion

package/dist/chat/composer.d.ts

@@ -1,12 +1,20 @@
+import { PeopleSearch } from "../mentions/use-people-search.js";
+import "../mentions/index.js";
 import { Ref } from "react";
 //#region src/chat/composer.d.ts
 export type ComposerProps = {
-  onSend?: (text: string) => void;
+  /** Gets the trimmed text and the ids of the people it mentions, each once. */
+  onSend?: (text: string, mentions: string[]) => void;
   /** The other side is still answering: the text can be written but not sent. */
   busy?: boolean;
   placeholder?: string;
-  inputRef?: Ref<HTMLInputElement>;
+  inputRef?: Ref<HTMLTextAreaElement>;
+  /** Finds the people `@` lists by the name typed after it, such as a channel's members; without it, `@` is plain text. */
+  searchPeople?: PeopleSearch;
 };
-/** The text box under a chat. Enter or the button sends the trimmed text and clears the box. */
-export declare const Composer: ({ onSend, busy, placeholder, inputRef }: ComposerProps) => import("react").JSX.Element;
+/**
+ * The text box under a chat, which grows with its text. Enter or the button sends the trimmed text and clears the box,
+ * Shift+Enter starts a new line; while the list of people to mention is open, Enter picks from it instead.
+ */
+export declare const Composer: ({ onSend, busy, placeholder, inputRef, searchPeople }: ComposerProps) => import("react").JSX.Element;
 //#endregion

package/dist/chat/composer.js

@@ -1,32 +1,47 @@
 import { Button } from "../primitives/button.js";
-import { Input } from "../primitives/input.js";
 import { text } from "./messages.js";
+import { mentionedIds } from "../mentions/mention-text.js";
+import { MentionBox, emptyDraft } from "../mentions/mention-box.js";
 import { useState } from "react";
 import { SendHorizontal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/composer.tsx
-/** The text box under a chat. Enter or the button sends the trimmed text and clears the box. */
-const Composer = ({ onSend, busy, placeholder, inputRef }) => {
-	const [draft, setDraft] = useState("");
-	const message = draft.trim();
+/**
+* The text box under a chat, which grows with its text. Enter or the button sends the trimmed text and clears the box,
+* Shift+Enter starts a new line; while the list of people to mention is open, Enter picks from it instead.
+*/
+const Composer = ({ onSend, busy, placeholder, inputRef, searchPeople }) => {
+	const [draft, setDraft] = useState(emptyDraft);
+	const message = draft.text.trim();
 	const send = () => {
 		if (!message || busy) return;
-		onSend?.(message);
-		setDraft("");
+		onSend?.(message, mentionedIds(message, draft.picked));
+		setDraft(emptyDraft);
+	};
+	const onKeyDown = (event) => {
+		if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
+		event.preventDefault();
+		send();
 	};
 	return /* @__PURE__ */ jsxs("form", {
-		className: "flex gap-2",
+		className: "flex items-end gap-2",
 		onSubmit: (event) => {
 			event.preventDefault();
 			send();
 		},
-		children: [/* @__PURE__ */ jsx(Input, {
-			ref: inputRef,
-			"aria-label": text("message"),
-			placeholder,
-			value: draft,
-			onChange: (event) => setDraft(event.target.value),
-			wrapperClassName: "flex-1"
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1",
+			children: /* @__PURE__ */ jsx(MentionBox, {
+				ref: inputRef,
+				rows: 1,
+				"aria-label": text("message"),
+				placeholder,
+				value: draft,
+				onChange: setDraft,
+				searchPeople,
+				listAt: "above",
+				onKeyDown
+			})
 		}), /* @__PURE__ */ jsx(Button, {
 			type: "submit",
 			variant: "primary",

package/dist/chat/index.d.ts

@@ -1,4 +1,6 @@
-import { ChatMessage } from "./chat-message.js";
+import { chatDayLabel, sameChatDay } from "./chat-day.js";
+import { ChatDivider, ChatDividerProps } from "./chat-divider.js";
+import { ChatAuthor, ChatMessage, ChatMessageProps } from "./chat-message.js";
 import { ChatThread, ChatThreadProps } from "./chat-thread.js";
 import { Composer, ComposerProps } from "./composer.js";
-export { ChatMessage, ChatThread, type ChatThreadProps, Composer, type ComposerProps };
+export { type ChatAuthor, ChatDivider, type ChatDividerProps, ChatMessage, type ChatMessageProps, ChatThread, type ChatThreadProps, Composer, type ComposerProps, chatDayLabel, sameChatDay };

package/dist/chat/messages.js

@@ -3,11 +3,19 @@ import { defineMessages } from "../locale/messages.js";
 const text = defineMessages({
 	en: {
 		message: "Message",
-		send: "Send"
+		send: "Send",
+		today: "Today",
+		yesterday: "Yesterday",
+		newMessages: "New messages",
+		loadEarlier: "Load earlier messages"
 	},
 	nl: {
 		message: "Bericht",
-		send: "Versturen"
+		send: "Versturen",
+		today: "Vandaag",
+		yesterday: "Gisteren",
+		newMessages: "Nieuwe berichten",
+		loadEarlier: "Eerdere berichten laden"
 	}
 });
 //#endregion