@dxos/react-ui-thread 0.10.0 → 0.11.0

package/dist/lib/index.mjs

@@ -0,0 +1,738 @@
+import { translationKey } from "./translations.mjs";
+import { format } from "date-fns/format";
+import { startOfDay } from "date-fns/startOfDay";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Obj, Ref } from "@dxos/echo";
+import { Avatar, Icon, IconButton, ScrollArea, composable, composableProps, useOnTransition, useThemeContext, useTranslation } from "@dxos/react-ui";
+import { Mosaic } from "@dxos/react-ui-mosaic";
+import { createBasicExtensions, createThemeExtensions, keymap, listener, tags } from "@dxos/ui-editor";
+import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from "@dxos/ui-theme";
+import { HighlightStyle, StreamLanguage, syntaxHighlighting } from "@codemirror/language";
+import { EditorView } from "@codemirror/view";
+import { createContext } from "@radix-ui/react-context";
+import { useTextEditor } from "@dxos/react-ui-editor";
+import { hexToEmoji, hexToHue, isTruthy } from "@dxos/util";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/command.ts
+/**
+* Highlights leading slash-commands (e.g. `/resolve`) and `@mention` tags
+* (e.g. `@Kai`, anywhere) in the message composer.
+* https://github.com/codemirror/stream-parser/blob/main/test/test-stream-parser.ts
+*/
+var parser = StreamLanguage.define({
+	startState: () => ({ count: 0 }),
+	token: (stream, state) => {
+		state.count++;
+		if (stream.eatSpace()) return null;
+		if (state.count === 1 && stream.match(/^\/\w+/)) return "tagName";
+		if (stream.match(/^@\w+/)) return "labelName";
+		stream.next();
+		return null;
+	}
+});
+var styles = HighlightStyle.define([{
+	tag: tags.tagName,
+	class: mx("dx-tag dx-tag--indigo")
+}, {
+	tag: tags.labelName,
+	class: mx("dx-tag dx-tag--blue")
+}]);
+var theme = EditorView.theme({ ".dx-tag": { verticalAlign: "bottom" } });
+var command = [
+	parser,
+	syntaxHighlighting(styles),
+	theme
+];
+//#endregion
+//#region src/context.ts
+var [ThreadContextProvider, useThreadContext] = createContext("Thread");
+//#endregion
+//#region src/Message/Message.tsx
+var avatarSize = 7;
+var buttonGroupClassNames = "flex flex-row items-center gap-0.5 pe-2";
+var buttonClassNames = "p-1! transition-opacity";
+var MessageRoot = forwardRef(({ authorImgSrc, authorId, authorName, authorAvatarProps, continues = true, controls, children, classNames, ...rootProps }, forwardedRef) => {
+	return /* @__PURE__ */ jsx(Avatar.Root, { children: /* @__PURE__ */ jsxs("div", {
+		"data-testid": "thread.message",
+		...rootProps,
+		className: mx("grid grid-cols-[var(--dx-rail-size)_1fr_min-content] w-full", classNames),
+		ref: forwardedRef,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center gap-2 pt-1",
+				children: [/* @__PURE__ */ jsx(Avatar.Content, {
+					size: avatarSize,
+					hue: authorAvatarProps?.hue || hexToHue(authorId ?? "0"),
+					fallback: authorAvatarProps?.emoji || hexToEmoji(authorId ?? "0"),
+					...authorImgSrc && { imgSrc: authorImgSrc }
+				}), continues && /* @__PURE__ */ jsx("div", { className: "w-px grow bg-separator" })]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "py-1 min-w-0",
+				children
+			}),
+			controls && /* @__PURE__ */ jsx("div", {
+				className: "self-start",
+				children: controls
+			})
+		]
+	}) });
+});
+MessageRoot.displayName = "Message.Root";
+var MessageHeading = ({ children, classNames, timestamp, authorName, ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: mx("flex gap-2 items-start", classNames),
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "grow flex items-baseline gap-2 min-w-0",
+			children: [/* @__PURE__ */ jsx(MessageAuthorName, { authorName }), timestamp && /* @__PURE__ */ jsx(MessageTime, { timestamp })]
+		}), children]
+	});
+};
+MessageHeading.displayName = "Message.Heading";
+var MessageAuthorName = ({ authorName }) => {
+	const { t } = useTranslation(translationKey);
+	return /* @__PURE__ */ jsx(Avatar.Label, {
+		classNames: "block truncate min-w-0 shrink text-sm text-subdued",
+		children: authorName ?? t("anonymous.label")
+	});
+};
+MessageAuthorName.displayName = "Message.AuthorName";
+var MessageTime = ({ timestamp }) => {
+	const { dtLocale } = useTranslation(translationKey);
+	const dt = timestamp ? new Date(timestamp) : void 0;
+	return /* @__PURE__ */ jsx("time", {
+		className: "shrink-0 text-subdued text-xs",
+		dateTime: dt?.toISOString(),
+		children: dt ? format(dt, "p", { locale: dtLocale }) : ""
+	});
+};
+MessageTime.displayName = "Message.Time";
+/**
+* Renders a message's content blocks: text (via editor), proposal, and
+* object/reference tiles (delegated to the injected `Object` component).
+*/
+var MessageBody = ({ message, isAuthor, editing, onSave }) => {
+	const { components } = useThreadContext("Message.Body");
+	const textBlockIndex = message.blocks.findIndex((block) => block._tag === "text");
+	const textBlock = textBlockIndex !== -1 ? message.blocks[textBlockIndex] : void 0;
+	const proposalBlock = message.blocks.find((block) => block._tag === "proposal");
+	const changeBlock = message.blocks.find((block) => block._tag === "change");
+	const references = message.blocks.filter((block) => block._tag === "reference").map((block) => block.reference);
+	const Object = components.Object;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		textBlock && /* @__PURE__ */ jsx(TextBlock, {
+			block: textBlock,
+			isAuthor,
+			editing,
+			onSave
+		}),
+		proposalBlock && /* @__PURE__ */ jsx("div", {
+			className: "me-4 italic",
+			children: proposalBlock.text
+		}),
+		changeBlock && /* @__PURE__ */ jsxs("p", {
+			className: "me-4 text-sm break-words",
+			children: [
+				changeBlock.before && /* @__PURE__ */ jsx("span", {
+					className: "line-through opacity-60",
+					children: changeBlock.before
+				}),
+				changeBlock.before && changeBlock.after && " ",
+				changeBlock.after && /* @__PURE__ */ jsx("span", { children: changeBlock.after })
+			]
+		}),
+		Object && Ref.Array.targets(references).map((reference, index) => /* @__PURE__ */ jsx(Object, { subject: reference }, index))
+	] });
+};
+MessageBody.displayName = "Message.Body";
+var TextBlock = ({ block, isAuthor, editing, onSave }) => {
+	const { themeMode } = useThemeContext();
+	const inMemoryContentRef = useRef(block.text);
+	const handleDocumentChange = useCallback((next) => {
+		inMemoryContentRef.current = next;
+	}, []);
+	useOnTransition(editing, true, false, useCallback(() => {
+		onSave?.(inMemoryContentRef.current);
+	}, [onSave]));
+	const { parentRef, focusAttributes, view } = useTextEditor(() => ({
+		initialValue: block.text,
+		extensions: [
+			createBasicExtensions({ readOnly: !isAuthor || !editing }),
+			createThemeExtensions({ themeMode }),
+			command,
+			EditorView.updateListener.of((update) => {
+				if (update.docChanged) handleDocumentChange(update.state.doc.toString());
+			})
+		]
+	}), [
+		block.text,
+		editing,
+		isAuthor,
+		themeMode,
+		handleDocumentChange
+	]);
+	useEffect(() => {
+		if (editing) view?.focus();
+	}, [editing, view]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: parentRef,
+		className: "me-4",
+		...focusAttributes
+	});
+};
+var keyBindings = ({ onSend, onClear }) => [{
+	key: "Enter",
+	run: () => {
+		if (onSend) {
+			onSend();
+			return true;
+		}
+		return false;
+	}
+}, {
+	key: "Meta+Backspace",
+	run: () => {
+		if (onClear) {
+			onClear();
+			return true;
+		}
+		return false;
+	}
+}];
+var MessageTextbox = forwardRef(({ id, authorId, authorName, authorImgSrc, authorAvatarProps, disabled, extensions, onSend, onClear, onEditorFocus, ...editorProps }, forwardedRef) => {
+	const { parentRef, focusAttributes, view } = useTextEditor(() => ({
+		id,
+		extensions: [
+			keymap.of(keyBindings({
+				onSend,
+				onClear
+			})),
+			listener({ onFocus: ({ focusing }) => {
+				if (focusing) onEditorFocus?.();
+			} }),
+			extensions
+		].filter(isTruthy),
+		...editorProps
+	}), [id, extensions]);
+	useImperativeHandle(forwardedRef, () => ({ focus: () => view?.focus() }), [view]);
+	return /* @__PURE__ */ jsx(MessageRoot, {
+		id,
+		authorId,
+		authorName,
+		authorImgSrc,
+		authorAvatarProps,
+		continues: false,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: parentRef,
+			className: mx("py-0.5 me-1 rounded-xs dx-focus-ring", disabled && "opacity-50"),
+			...focusAttributes
+		})
+	});
+});
+MessageTextbox.displayName = "Message.Textbox";
+/**
+* Full message tile (frame + heading + controls + body). Reads `Thread.Root`
+* context for metadata resolution, injected renderers, and callbacks. This is
+* the unit rendered by `Thread.Messages`.
+*/
+var MessageTile = ({ message, classNames, continues = true }) => {
+	const { t } = useTranslation(translationKey);
+	const { getMetadata, identityDid, editable, onMessageDelete, onAcceptProposal, onAcceptChange, onRejectChange, onMessageSelect, currentMessageId } = useThreadContext("Message.Tile");
+	const [editing, setEditing] = useState(false);
+	const metadata = getMetadata(message);
+	const isAuthor = !!identityDid && identityDid === metadata.authorId;
+	const hasProposal = message.blocks.some((block) => block._tag === "proposal");
+	const hasChange = message.blocks.some((block) => block._tag === "change");
+	const handleEdit = useCallback(() => setEditing((value) => !value), []);
+	const handleDelete = useCallback(() => onMessageDelete?.(message.id), [onMessageDelete, message.id]);
+	const handleAcceptProposal = useCallback(() => onAcceptProposal?.(message.id), [onAcceptProposal, message.id]);
+	const handleAcceptChange = useCallback(() => onAcceptChange?.(message.id), [onAcceptChange, message.id]);
+	const handleRejectChange = useCallback(() => onRejectChange?.(message.id), [onRejectChange, message.id]);
+	const handleSelect = useCallback(() => onMessageSelect?.(message.id), [onMessageSelect, message.id]);
+	const handleSave = useCallback((text) => {
+		Obj.update(message, (message) => {
+			const block = message.blocks.find((block) => block._tag === "text");
+			if (block && block._tag === "text") block.text = text;
+		});
+	}, [message]);
+	const showEdit = isAuthor && editable;
+	const showAccept = hasProposal && !!onAcceptProposal;
+	const showAcceptChange = hasChange && !!onAcceptChange;
+	const showRejectChange = hasChange && !!onRejectChange;
+	const showDelete = !!onMessageDelete;
+	const controls = showEdit || showAccept || showAcceptChange || showRejectChange || showDelete ? /* @__PURE__ */ jsxs("div", {
+		className: buttonGroupClassNames,
+		children: [
+			showEdit && /* @__PURE__ */ jsx(IconButton, {
+				"data-testid": editing ? "thread.message.save" : "thread.message.edit",
+				variant: "ghost",
+				icon: editing ? "ph--check--regular" : "ph--pencil-simple--regular",
+				iconOnly: true,
+				label: t(editing ? "save-message.label" : "edit-message.label"),
+				classNames: [buttonClassNames, hoverableControlItem],
+				onClick: handleEdit
+			}),
+			showAccept && /* @__PURE__ */ jsx(IconButton, {
+				"data-testid": "thread.message.accept",
+				variant: "ghost",
+				icon: "ph--check--regular",
+				iconOnly: true,
+				label: t("accept-proposal.label"),
+				classNames: [buttonClassNames, hoverableControlItem],
+				onClick: handleAcceptProposal
+			}),
+			showAcceptChange && /* @__PURE__ */ jsx(IconButton, {
+				"data-testid": "thread.message.accept-change",
+				variant: "ghost",
+				icon: "ph--check--regular",
+				iconOnly: true,
+				label: t("accept-change.label"),
+				classNames: [buttonClassNames, hoverableControlItem],
+				onClick: handleAcceptChange
+			}),
+			showRejectChange && /* @__PURE__ */ jsx(IconButton, {
+				"data-testid": "thread.message.reject-change",
+				variant: "ghost",
+				icon: "ph--x--regular",
+				iconOnly: true,
+				label: t("reject-change.label"),
+				classNames: [buttonClassNames, hoverableControlItem],
+				onClick: handleRejectChange
+			}),
+			showDelete && /* @__PURE__ */ jsx(IconButton, {
+				"data-testid": "thread.message.delete",
+				variant: "ghost",
+				icon: "ph--x--regular",
+				iconOnly: true,
+				label: t("delete-message.label"),
+				classNames: [buttonClassNames, hoverableControlItem],
+				onClick: handleDelete
+			})
+		]
+	}) : void 0;
+	return /* @__PURE__ */ jsxs(MessageRoot, {
+		...metadata,
+		continues,
+		controls,
+		onClick: onMessageSelect ? handleSelect : void 0,
+		"aria-current": currentMessageId === message.id ? "location" : void 0,
+		classNames: [
+			hoverableControls,
+			hoverableFocusedWithinControls,
+			onMessageSelect && "cursor-pointer",
+			currentMessageId === message.id && "bg-current-surface",
+			classNames
+		],
+		children: [/* @__PURE__ */ jsx(MessageHeading, {
+			authorName: metadata.authorName,
+			timestamp: metadata.timestamp
+		}), /* @__PURE__ */ jsx(MessageBody, {
+			message,
+			isAuthor,
+			editing,
+			onSave: handleSave
+		})]
+	});
+};
+MessageTile.displayName = "Message.Tile";
+/**
+* Groups consecutive same-sender messages (see `Thread.Messages`'s grouping
+* window) into a single tile: one heading (author + first message's
+* timestamp) followed by one body per message, stacked in order. Per-message
+* edit/delete controls are not shown per-row in a group — v1 shows them for
+* the group's first message only, since the heading/controls layout is keyed
+* to a single message.
+*/
+var MessageGroup = ({ messages, continues = true, classNames }) => {
+	const { t } = useTranslation(translationKey);
+	const { getMetadata, identityDid, editable, onMessageDelete, onAcceptProposal } = useThreadContext("Message.Group");
+	const [editing, setEditing] = useState(false);
+	const first = messages[0];
+	const metadata = getMetadata(first);
+	const isAuthor = !!identityDid && identityDid === metadata.authorId;
+	const hasProposal = first.blocks.some((block) => block._tag === "proposal");
+	const handleEdit = useCallback(() => setEditing((value) => !value), []);
+	const handleDelete = useCallback(() => onMessageDelete?.(first.id), [onMessageDelete, first.id]);
+	const handleAcceptProposal = useCallback(() => onAcceptProposal?.(first.id), [onAcceptProposal, first.id]);
+	const handleSave = useCallback((text) => {
+		Obj.update(first, (first) => {
+			const block = first.blocks.find((block) => block._tag === "text");
+			if (block && block._tag === "text") block.text = text;
+		});
+	}, [first]);
+	const showEdit = isAuthor && editable;
+	const showAccept = hasProposal && !!onAcceptProposal;
+	const showDelete = !!onMessageDelete;
+	const controls = showEdit || showAccept || showDelete ? /* @__PURE__ */ jsxs("div", {
+		className: buttonGroupClassNames,
+		children: [
+			showEdit && /* @__PURE__ */ jsx(IconButton, {
+				"data-testid": editing ? "thread.message.save" : "thread.message.edit",
+				variant: "ghost",
+				icon: editing ? "ph--check--regular" : "ph--pencil-simple--regular",
+				iconOnly: true,
+				label: t(editing ? "save-message.label" : "edit-message.label"),
+				classNames: [buttonClassNames, hoverableControlItem],
+				onClick: handleEdit
+			}),
+			showAccept && /* @__PURE__ */ jsx(IconButton, {
+				"data-testid": "thread.message.accept",
+				variant: "ghost",
+				icon: "ph--check--regular",
+				iconOnly: true,
+				label: t("accept-proposal.label"),
+				classNames: [buttonClassNames, hoverableControlItem],
+				onClick: handleAcceptProposal
+			}),
+			showDelete && /* @__PURE__ */ jsx(IconButton, {
+				"data-testid": "thread.message.delete",
+				variant: "ghost",
+				icon: "ph--x--regular",
+				iconOnly: true,
+				label: t("delete-message.label"),
+				classNames: [buttonClassNames, hoverableControlItem],
+				onClick: handleDelete
+			})
+		]
+	}) : void 0;
+	return /* @__PURE__ */ jsxs(MessageRoot, {
+		...metadata,
+		continues,
+		controls,
+		classNames: [
+			hoverableControls,
+			hoverableFocusedWithinControls,
+			classNames
+		],
+		children: [/* @__PURE__ */ jsx(MessageHeading, {
+			authorName: metadata.authorName,
+			timestamp: metadata.timestamp
+		}), messages.map((message) => /* @__PURE__ */ jsx(MessageBody, {
+			message,
+			isAuthor,
+			editing: editing && message === first,
+			onSave: handleSave
+		}, message.id))]
+	});
+};
+MessageGroup.displayName = "Message.Group";
+var Message = {
+	Root: MessageRoot,
+	Heading: MessageHeading,
+	AuthorName: MessageAuthorName,
+	Time: MessageTime,
+	Body: MessageBody,
+	Textbox: MessageTextbox,
+	Tile: MessageTile,
+	Group: MessageGroup
+};
+//#endregion
+//#region src/Thread/Thread.tsx
+var getMessageId = (message) => Obj.getURI(message);
+/**
+* Headless root of a thread. Provides message-tile context (metadata resolver,
+* injected renderers, callbacks). Requires an ambient `Dnd.Root` ancestor,
+* within which `Thread.Messages` renders its virtual stack. Renders no DOM of
+* its own — wrap the visible thread chrome in `Thread.Content`.
+*/
+var ThreadRoot = ({ children, getMetadata, components, identityDid, editable, onMessageDelete, onAcceptProposal, onAcceptChange, onRejectChange, onMessageSelect, currentMessageId }) => {
+	const composerFocus = useRef(void 0);
+	const registerComposerFocus = useCallback((focus) => {
+		composerFocus.current = focus;
+	}, []);
+	const focusComposer = useCallback(() => composerFocus.current?.(), []);
+	return /* @__PURE__ */ jsx(ThreadContextProvider, {
+		getMetadata,
+		components: components ?? {},
+		identityDid,
+		editable,
+		registerComposerFocus,
+		focusComposer,
+		onMessageDelete,
+		onAcceptProposal,
+		onAcceptChange,
+		onRejectChange,
+		onMessageSelect,
+		currentMessageId,
+		children
+	});
+};
+ThreadRoot.displayName = "Thread.Root";
+/** Visible thread container (the attention surface that hosts header / messages / composer). */
+var ThreadContent = composable(({ children, current, id, ...props }, forwardedRef) => {
+	return /* @__PURE__ */ jsx("div", {
+		...composableProps(props, {
+			role: "group",
+			classNames: ["flex flex-col bg-[var(--surface-bg)] current-related dx-attention-surface [--controls-opacity:0]", hoverableFocusedWithinControls]
+		}),
+		"data-testid": "thread",
+		id,
+		"aria-current": current ? "location" : void 0,
+		ref: forwardedRef,
+		children
+	});
+});
+ThreadContent.displayName = "Thread.Content";
+/**
+* Thread header row: caret (rail) · snippet (content) · controls. Owns its own
+* `[rail · 1fr · controls]` grid so the trailing controls align with message-tile
+* controls (which use the same template) — no grid is leaked in from the caller.
+*/
+var ThreadHeader = composable(({ title, detached, current, controls, onSelect, ...props }, forwardedRef) => {
+	const { t } = useTranslation(translationKey);
+	const { focusComposer } = useThreadContext("Thread.Header");
+	const handleSelect = useCallback(() => {
+		onSelect?.();
+		focusComposer();
+	}, [onSelect, focusComposer]);
+	return /* @__PURE__ */ jsxs("div", {
+		...composableProps(props, { classNames: [
+			"grid grid-cols-[var(--dx-rail-size)_1fr_min-content] items-center",
+			hoverableControls,
+			hoverableFocusedWithinControls
+		] }),
+		ref: forwardedRef,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center",
+				children: /* @__PURE__ */ jsx(IconButton, {
+					iconOnly: true,
+					variant: "ghost",
+					density: "sm",
+					icon: "ph--caret-double-right--regular",
+					label: t("select-thread.label"),
+					classNames: "text-description",
+					onClick: handleSelect
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center overflow-hidden",
+				children: /* @__PURE__ */ jsx("p", {
+					role: "heading",
+					"data-testid": "thread.heading",
+					className: mx("me-2 font-medium truncate italic", current ? "text-accent-text" : "text-description", detached && "line-through decoration-1"),
+					children: title
+				})
+			}),
+			controls
+		]
+	});
+});
+ThreadHeader.displayName = "Thread.Header";
+var getThreadItemId = (item) => item.id;
+/** Stable per-sender key: prefers the DID, then the (deprecated) identity key, then name/email, else 'anon'. */
+var senderKey = (message) => message.sender.identityDid ?? message.sender.identityKey ?? message.sender.name ?? message.sender.email ?? "anon";
+/** Message send time in epoch ms; malformed/missing `created` sorts as if sent at the epoch. */
+var messageTime = (message) => {
+	const time = Date.parse(message.created);
+	return Number.isFinite(time) ? time : 0;
+};
+/**
+* Preprocesses ascending, time-ordered `messages` into a flat list of divider
+* and group items for `Thread.Messages`'s virtual stack:
+* - A day divider (labeled with the calendar date) precedes the first message
+*   of each calendar day.
+* - A plain divider (no label) marks a same-day gap exceeding `gapDividerMs`.
+* - When both would fall on the same message, only the day divider is emitted.
+* - Consecutive messages from the same sender within `groupWindowMs` of the
+*   previous message in the group are merged into one `MessageGroupItem`; a
+*   divider always starts a new group.
+*/
+var groupMessages = (messages, { groupWindowMs, dayDivider, gapDividerMs, dtLocale }) => {
+	const items = [];
+	let currentGroup;
+	let lastGroupMessage;
+	let prevTime;
+	let prevDay;
+	for (const message of messages) {
+		const time = messageTime(message);
+		const day = startOfDay(time).getTime();
+		const dayBoundary = dayDivider && (prevDay === void 0 || day !== prevDay);
+		const gapBoundary = !dayBoundary && prevTime !== void 0 && time - prevTime > gapDividerMs;
+		if (dayBoundary) {
+			items.push({
+				kind: "divider",
+				id: `divider:day:${day}`,
+				label: format(day, "EEEE, MMMM d", { locale: dtLocale })
+			});
+			currentGroup = void 0;
+		} else if (gapBoundary) {
+			items.push({
+				kind: "divider",
+				id: `divider:gap:${time}`
+			});
+			currentGroup = void 0;
+		}
+		const sameSenderAsGroup = currentGroup && lastGroupMessage && senderKey(lastGroupMessage) === senderKey(message);
+		const withinGroupWindow = currentGroup && lastGroupMessage && time - messageTime(lastGroupMessage) <= groupWindowMs;
+		if (currentGroup && sameSenderAsGroup && withinGroupWindow) currentGroup.messages.push(message);
+		else {
+			currentGroup = {
+				kind: "group",
+				id: getMessageId(message),
+				messages: [message]
+			};
+			items.push(currentGroup);
+		}
+		lastGroupMessage = message;
+		prevTime = time;
+		prevDay = day;
+	}
+	if (currentGroup) currentGroup.last = true;
+	return items;
+};
+var ThreadDivider = ({ label }) => label ? /* @__PURE__ */ jsxs("div", {
+	className: "flex items-center gap-2 px-2 py-2 text-xs text-description",
+	children: [
+		/* @__PURE__ */ jsx("div", { className: "h-px grow bg-separator" }),
+		/* @__PURE__ */ jsx("span", {
+			className: "shrink-0",
+			children: label
+		}),
+		/* @__PURE__ */ jsx("div", { className: "h-px grow bg-separator" })
+	]
+}) : /* @__PURE__ */ jsx("div", {
+	className: "px-2 py-2",
+	children: /* @__PURE__ */ jsx("div", { className: "h-px bg-separator" })
+});
+ThreadDivider.displayName = "Thread.Divider";
+var ThreadItemAdapter = ({ id, data, location, draggable, current, selected }) => /* @__PURE__ */ jsx(Mosaic.Tile, {
+	id,
+	data,
+	location,
+	draggable,
+	current,
+	selected,
+	children: data.kind === "divider" ? /* @__PURE__ */ jsx(ThreadDivider, { label: data.label }) : /* @__PURE__ */ jsx(Message.Group, {
+		messages: data.messages,
+		continues: !data.last
+	})
+});
+var DEFAULT_GROUP_WINDOW_MS = 6e4;
+var DEFAULT_GAP_DIVIDER_MS = 10800 * 1e3;
+/** Virtualized stack of message tiles (via Mosaic), within an internal scroll area. */
+var ThreadMessages = ({ messages, id, estimateSize = 80, currentId, groupWindowMs = DEFAULT_GROUP_WINDOW_MS, dayDivider = true, gapDividerMs = DEFAULT_GAP_DIVIDER_MS, classNames }) => {
+	const { dtLocale } = useTranslation(translationKey);
+	const [viewport, setViewport] = useState(null);
+	const items = useMemo(() => groupMessages(messages.filter(Boolean), {
+		groupWindowMs,
+		dayDivider,
+		gapDividerMs,
+		dtLocale
+	}), [
+		messages,
+		groupWindowMs,
+		dayDivider,
+		gapDividerMs,
+		dtLocale
+	]);
+	const instanceId = useId();
+	const eventHandler = useMemo(() => ({
+		id: `thread:${id ?? "anon"}:${instanceId}`,
+		canDrop: () => false
+	}), [id, instanceId]);
+	return /* @__PURE__ */ jsx(Mosaic.Container, {
+		asChild: true,
+		orientation: "vertical",
+		autoScroll: viewport,
+		currentId,
+		eventHandler,
+		children: /* @__PURE__ */ jsx(ScrollArea.Root, {
+			classNames: mx("col-span-2 flex-1 min-h-0", classNames),
+			orientation: "vertical",
+			children: /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+				ref: setViewport,
+				children: /* @__PURE__ */ jsx(Mosaic.VirtualStack, {
+					Tile: ThreadItemAdapter,
+					items,
+					getId: getThreadItemId,
+					draggable: false,
+					getScrollElement: () => viewport,
+					estimateSize: () => estimateSize
+				})
+			})
+		})
+	});
+};
+ThreadMessages.displayName = "Thread.Messages";
+/** Message composer pinned at the foot of a thread. */
+var ThreadTextbox = ({ placeholder, autoFocus, disabled, extensions, onSend, ...metadata }) => {
+	const { t } = useTranslation(translationKey);
+	const { themeMode } = useThemeContext();
+	const { registerComposerFocus } = useThreadContext("Thread.Textbox");
+	const composerRef = useRef(null);
+	const messageRef = useRef("");
+	const [count, setCount] = useState(0);
+	useEffect(() => {
+		registerComposerFocus(() => composerRef.current?.focus());
+		return () => registerComposerFocus(void 0);
+	}, [registerComposerFocus]);
+	const editorExtensions = useMemo(() => [
+		createBasicExtensions({ placeholder: placeholder ?? t("message.placeholder") }),
+		createThemeExtensions({ themeMode }),
+		listener({ onChange: ({ text }) => messageRef.current = text }),
+		command,
+		extensions
+	].filter(Boolean), [
+		themeMode,
+		placeholder,
+		t,
+		extensions,
+		count
+	]);
+	const handleSend = useCallback(() => {
+		const text = messageRef.current;
+		if (!text?.length || !onSend) return;
+		if (onSend(text)) {
+			messageRef.current = "";
+			setCount((value) => value + 1);
+		}
+	}, []);
+	return /* @__PURE__ */ jsx(Message.Textbox, {
+		ref: composerRef,
+		...metadata,
+		autoFocus,
+		disabled,
+		extensions: editorExtensions,
+		onSend: handleSend
+	});
+};
+ThreadTextbox.displayName = "Thread.Textbox";
+var ThreadStatus = forwardRef(({ activity, classNames, children, ...props }, forwardedRef) => {
+	const { t } = useTranslation(translationKey);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: mx("col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pe-2 text-xs text-description", classNames),
+		ref: forwardedRef,
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				icon: "ph--spinner--bold",
+				classNames: "w-6 h-4 invisible data-[visible=show]:visible animate-spin-slow",
+				"data-visible": activity ? "show" : "hide"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "truncate min-w-0",
+				"aria-live": "polite",
+				children: activity ? children : null
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: mx("text-end", hoverableControlItem),
+				children: t("enter-to-send.message")
+			})
+		]
+	});
+});
+ThreadStatus.displayName = "Thread.Status";
+var Thread = {
+	Root: ThreadRoot,
+	Content: ThreadContent,
+	Header: ThreadHeader,
+	Messages: ThreadMessages,
+	Textbox: ThreadTextbox,
+	Status: ThreadStatus
+};
+//#endregion
+export { Message, Thread, command, useThreadContext };
+
+//# sourceMappingURL=index.mjs.map