@dxos/react-ui-assistant 0.11.1

package/dist/lib/index.mjs

@@ -0,0 +1,839 @@
+import { createContext } from "@radix-ui/react-context";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Icon, IconBlock, IconButton, setRef, useTranslation } from "@dxos/react-ui";
+import { MessageList, useMessageList } from "@dxos/react-ui-feed";
+import { AnchorWidget, getXmlTextChild } from "@dxos/ui-editor";
+import { NumericTabs, TextCrawl, TogglePanel } from "@dxos/react-ui-components";
+import { JsonHighlighter } from "@dxos/react-ui-syntax-highlighter";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { WidgetType } from "@codemirror/view";
+import { Domino, mx } from "@dxos/ui";
+import { isNonNullable, safeParseJson } from "@dxos/util";
+import { Message } from "@dxos/types";
+import { mx as mx$1 } from "@dxos/ui-theme";
+import * as Schema from "effect/Schema";
+//#region src/components/widgets/format-time.ts
+/**
+* Relative ("5 min ago", "yesterday") within two days, absolute date beyond that. The exact
+* timestamp is always available via the `title` tooltip.
+*
+* Recent prompts are the ones a reader places by elapsed time; older ones by date.
+*/
+var DAY_MS = 864e5;
+var formatTime = (created, now = Date.now()) => {
+	const date = new Date(created);
+	if (Number.isNaN(date.getTime())) return "";
+	const elapsed = now - date.getTime();
+	if (elapsed < 0 || elapsed >= 2 * DAY_MS) return date.toLocaleDateString(void 0, {
+		month: "short",
+		day: "numeric"
+	});
+	const format = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+	const minutes = Math.round(elapsed / 6e4);
+	if (minutes < 1) return format.format(-Math.max(1, Math.round(elapsed / 1e3)), "second");
+	if (minutes < 60) return format.format(-minutes, "minute");
+	const hours = Math.round(minutes / 60);
+	if (hours < 24) return format.format(-hours, "hour");
+	return format.format(-Math.round(hours / 24), "day");
+};
+//#endregion
+//#region src/components/widgets/FallbackWidget.tsx
+var FallbackWidget = ({ _tag, ...props }) => {
+	return /* @__PURE__ */ jsx(TogglePanel.Root, { children: /* @__PURE__ */ jsxs(TogglePanel.Content, { children: [/* @__PURE__ */ jsx(TogglePanel.Header, {
+		classNames: "dx-group-surface",
+		children: _tag
+	}), /* @__PURE__ */ jsx(TogglePanel.Body, {
+		classNames: "dx-modal-surface",
+		children: /* @__PURE__ */ jsx(TogglePanel.Viewport, { children: /* @__PURE__ */ jsx(JsonHighlighter, {
+			classNames: "p-2! text-sm",
+			data: props
+		}) })
+	})] }) });
+};
+FallbackWidget.displayName = "Fallback";
+//#endregion
+//#region src/components/widgets/defaults.ts
+var styles = {
+	/**
+	* Vertical rhythm for block widgets. Padding, never margin: CodeMirror measures a widget from its own
+	* box, so a margin sits outside what it can see and its height model drifts from what is rendered —
+	* the error accumulates down the document until the turn-fold gutter markers are visibly misaligned.
+	* Note padding does not collapse between adjacent siblings the way margins do
+	*/
+	padding: "pt-2 pb-4",
+	border: "border border-subdued-separator rounded-sm"
+};
+//#endregion
+//#region src/components/widgets/ReasoningWidget.ts
+/**
+* AI reasoning widget.
+*/
+var ReasoningWidget = class extends WidgetType {
+	text;
+	#pos;
+	/** The timer id last registered for this instance (may differ from the map if superseded). */
+	#ownedTimerId = null;
+	constructor(text, pos) {
+		super();
+		this.text = text;
+		this.#pos = pos === void 0 || pos === "" ? "reasoning" : String(pos);
+	}
+	eq(other) {
+		return this.text === other.text && this.#pos === other.#pos;
+	}
+	toDOM() {
+		return Domino.of("div").classNames(styles.padding).append(Domino.of("div").classNames("relative overflow-hidden p-px", styles.border).attributes({ "data-trail-container": "" }).append(Domino.of("div").classNames("relative z-10 dx-base-surface rounded-sm text-sm text-subdued py-1", "grid grid-cols-[24px_1fr] gap-x-0.5 items-start").append(Domino.of("div").classNames("flex h-5 w-full shrink-0 items-center justify-center self-start").append(Domino.svg("ph--brain--regular").classNames("shrink-0 size-4 opacity-70")), Domino.of("div").classNames("px-2 max-h-[5lh] overflow-y-auto dx-scrollbar-thin min-w-0").text(this.text).attributes({ "data-reasoning-text": "" })), Domino.of("div").attributes({ "data-id": this.#pos }))).root;
+	}
+	updateDOM(dom) {
+		dom.querySelector("[data-reasoning-text]")?.replaceChildren(this.text);
+		const container = dom.querySelector("[data-trail-container]");
+		let trailHost = container?.querySelector("[data-id]");
+		if (container && !trailHost) {
+			trailHost = Domino.of("div").attributes({ "data-id": this.#pos }).root;
+			container.append(trailHost);
+		}
+		if (trailHost?.childElementCount === 0) trailHost.append(...createTrailLayers());
+		this.#scheduleTrailRemoval(dom);
+		return true;
+	}
+	destroy(_dom) {
+		this.#clearOwnedTrailTimer();
+	}
+	#scheduleTrailRemoval(dom) {
+		const previous = trailRemovalTimers.get(this.#pos);
+		if (previous !== void 0) clearTimeout(previous);
+		const timerId = setTimeout(() => {
+			if (trailRemovalTimers.get(this.#pos) !== timerId) return;
+			trailRemovalTimers.delete(this.#pos);
+			this.#ownedTimerId = null;
+			dom.querySelector("[data-id]")?.remove();
+		}, TRAIL_REMOVAL_DELAY_MS);
+		trailRemovalTimers.set(this.#pos, timerId);
+		this.#ownedTimerId = timerId;
+	}
+	#clearOwnedTrailTimer() {
+		const active = trailRemovalTimers.get(this.#pos);
+		if (active !== void 0 && active === this.#ownedTimerId) {
+			clearTimeout(active);
+			trailRemovalTimers.delete(this.#pos);
+		}
+		this.#ownedTimerId = null;
+	}
+};
+var trail = [
+	"absolute z-0 aspect-[2/1] w-16",
+	"bg-[radial-gradient(at_100%_50%,_theme(colors.green.700),_transparent_80%)]",
+	"[offset-anchor:100%_50%] [offset-path:border-box]"
+];
+/** Delay after the last content update before hiding the trail. */
+var TRAIL_REMOVAL_DELAY_MS = 1e3;
+/**
+* One pending removal timer per logical block. Streaming creates a new widget instance each tick;
+* `destroy` may run after the next instance has already scheduled, so we must not clear a newer timer.
+*/
+var trailRemovalTimers = /* @__PURE__ */ new Map();
+var createTrailLayers = () => [Domino.of("div").classNames(...trail, "animate-trail").root, Domino.of("div").classNames(...trail, "animate-trail-offset").root];
+//#endregion
+//#region src/components/widgets/ReferenceWidget.ts
+var ReferenceWidget = class extends WidgetType {
+	text;
+	dxn;
+	constructor(text, dxn) {
+		super();
+		this.text = text;
+		this.dxn = dxn;
+	}
+	eq(other) {
+		return this.dxn === other.dxn;
+	}
+	toDOM() {
+		return Domino.of("div").classNames(styles.padding).append(Domino.of("dx-anchor").classNames("dx-tag--anchor").attributes({ dxn: this.dxn }).text(this.text)).root;
+	}
+};
+//#endregion
+//#region src/components/widgets/SelectWidget.ts
+/**
+* Simple prompt widget.
+*/
+var SelectWidget = class extends WidgetType {
+	options;
+	constructor(options) {
+		super();
+		this.options = options;
+	}
+	eq(other) {
+		return JSON.stringify(this.options) === JSON.stringify(other.options);
+	}
+	/**
+	* NOTE: Container must set var based on user's identity.
+	*/
+	toDOM() {
+		return Domino.of("div").attributes({ role: "group" }).classNames(styles.padding, "flex flex-wrap gap-1").append(...this.options.map((option) => Domino.of("button").classNames("dx-button inline-block max-w-[100cqi]").attributes({
+			"data-action": "submit",
+			"data-value": option,
+			"data-density": "md"
+		}).text(option))).root;
+	}
+};
+//#endregion
+//#region src/components/widgets/StatsWidget.ts
+/**
+* Simple stats widget.
+*/
+var StatsWidget = class extends WidgetType {
+	text;
+	constructor(text) {
+		super();
+		this.text = text;
+	}
+	eq(other) {
+		return this.text === other.text;
+	}
+	toDOM() {
+		return Domino.of("div").classNames(styles.padding, "text-sm text-placeholder").text(this.text).root;
+	}
+	updateDOM(dom) {
+		dom.textContent = this.text;
+		return true;
+	}
+};
+//#endregion
+//#region src/components/widgets/StatusWidget.ts
+/**
+* AI status widget.
+*/
+var StatusWidget = class extends WidgetType {
+	text;
+	constructor(text) {
+		super();
+		this.text = text;
+	}
+	eq(other) {
+		return this.text === other.text;
+	}
+	toDOM() {
+		return Domino.of("div").classNames(styles.padding).append(Domino.of("div").classNames("relative overflow-hidden rounded-sm").append(Domino.of("div").classNames("grid grid-cols-[24px_1fr] gap-x-0.5 gap-y-0 items-start px-0.5 py-0.5 text-placeholder").append(Domino.of("div").classNames("flex h-5 w-full shrink-0 items-center justify-center self-start").append(Domino.svg("ph--info--regular").classNames("shrink-0 size-4 opacity-70")), Domino.of("div").classNames("relative min-w-0").append(Domino.of("div").classNames("relative z-10 rounded-sm text-sm leading-5").attributes({ "data-status-text": "" }).text(this.text))))).root;
+	}
+	updateDOM(dom) {
+		dom.querySelector("[data-status-text]")?.replaceChildren(this.text);
+		return true;
+	}
+};
+//#endregion
+//#region src/components/widgets/SuggestionWidget.ts
+/**
+* Simple prompt widget.
+*/
+var SuggestionWidget = class extends WidgetType {
+	text;
+	constructor(text) {
+		super();
+		this.text = text;
+	}
+	eq(other) {
+		return this.text === other.text;
+	}
+	toDOM() {
+		return Domino.of("span").classNames(mx("inline-flex max-w-[calc(100cqi-8px)] py-1 pe-1 overflow-hidden")).append(Domino.of("button").attributes({
+			"data-density": "md",
+			"data-action": "submit",
+			"data-value": this.text
+		}).classNames(mx("dx-button gap-2 w-full overflow-hidden")).append(Domino.of("dx-icon").attributes({ icon: "ph--lightning--regular" }), Domino.of("span").classNames("flex-1 truncate min-w-0").text(this.text))).root;
+	}
+};
+//#endregion
+//#region src/translations.ts
+var translationKey = "@dxos/react-ui-assistant";
+var translations = [{ "en-US": { [translationKey]: {
+	"copy.label": "Copy",
+	"rewind.label": "Rewind to this prompt",
+	"summary.label": "Summary",
+	"stats.label": "Stats",
+	"tool-call.label": "Calling",
+	"tool-result.label": "Result",
+	"tool-error.label": "Tool error",
+	"nav-first.label": "First message",
+	"nav-previous.label": "Previous message",
+	"nav-next.label": "Next message",
+	"nav-last.label": "Last message"
+} } }];
+//#endregion
+//#region src/components/widgets/SummaryWidget.tsx
+var SummaryWidget = ({ children }) => {
+	const { t } = useTranslation(translationKey);
+	return /* @__PURE__ */ jsx(TogglePanel.Root, { children: /* @__PURE__ */ jsxs(TogglePanel.Content, {
+		classNames: styles.border,
+		children: [/* @__PURE__ */ jsx(TogglePanel.Header, {
+			classNames: "text-sm dx-group-surface",
+			children: t("summary.label")
+		}), /* @__PURE__ */ jsx(TogglePanel.Body, { children: /* @__PURE__ */ jsx("div", {
+			className: "p-1 text-sm text-subdued",
+			children: getXmlTextChild(children ?? [])
+		}) })]
+	}) });
+};
+//#endregion
+//#region src/components/widgets/ToolWidget.tsx
+/**
+* A run of tool blocks as one collapsible panel with a tab per call. The `<toolkit>` tag carries
+* the run as JSON — the item is rebuilt from its message alone, so there is no widget-state side
+* channel to accumulate blocks through.
+*/
+var ToolWidget = ({ view, children }) => {
+	const { t } = useTranslation(translationKey);
+	const blocks = useMemo(() => {
+		const parsed = safeParseJson(getXmlTextChild(children ?? []) ?? "");
+		return Array.isArray(parsed) ? parsed : [];
+	}, [children]);
+	const items = useMemo(() => {
+		let lastToolCall;
+		const tools = [];
+		return blocks.filter((block) => block._tag === "toolCall" || block._tag === "toolResult" || block._tag === "stats").map((block) => {
+			switch (block._tag) {
+				case "toolCall": {
+					if (block.pending && lastToolCall?.block.toolCallId === block.toolCallId) return null;
+					const tool = tools.find((tool) => tool.name === block.name);
+					lastToolCall = {
+						tool,
+						block
+					};
+					return {
+						title: tool?.description ?? [t("tool-call.label"), block.name].filter(Boolean).join(" "),
+						icon: block.operationIcon,
+						content: {
+							...block,
+							input: safeParseJson(block.input)
+						}
+					};
+				}
+				case "toolResult": {
+					if (block.error) return {
+						title: t("tool-error.label"),
+						icon: lastToolCall?.block.operationIcon,
+						content: block
+					};
+					const title = lastToolCall?.tool?.description ?? [t("tool-result.label"), lastToolCall?.block.name].filter(Boolean).join(" ");
+					const icon = lastToolCall?.block.operationIcon;
+					lastToolCall = void 0;
+					return {
+						title,
+						icon,
+						content: {
+							...block,
+							result: typeof block.result === "string" ? safeParseJson(block.result) : block.result
+						}
+					};
+				}
+				case "stats":
+					if (!lastToolCall) return null;
+					return {
+						title: t("stats.label"),
+						icon: lastToolCall.block.operationIcon,
+						content: block
+					};
+			}
+		}).filter(isNonNullable);
+	}, [blocks, t]);
+	const handleChangeOpen = useCallback(() => {
+		setTimeout(() => {
+			view?.requestMeasure();
+		}, 1e3);
+	}, [view]);
+	if (!items.length) return null;
+	return /* @__PURE__ */ jsx(ToolPanel, {
+		items,
+		onChangeOpen: handleChangeOpen
+	});
+};
+var DEFAULT_TOOL_ICON = "ph--wrench--regular";
+var ToolPanel = ({ items, onChangeOpen }) => {
+	const tabsRef = useRef(null);
+	const [selected, setSelected] = useState(0);
+	const [open, setOpen] = useState(false);
+	useEffect(() => {
+		setSelected((prev) => Math.min(prev, Math.max(0, items.length - 1)));
+	}, [items.length]);
+	useEffect(() => {
+		onChangeOpen?.(open);
+		if (open) tabsRef.current?.focus();
+	}, [open, onChangeOpen]);
+	const handleSelect = useCallback((index) => {
+		setSelected(index);
+	}, []);
+	const headerIcon = items[items.length - 1]?.icon ?? items[0]?.icon ?? DEFAULT_TOOL_ICON;
+	return /* @__PURE__ */ jsx(TogglePanel.Root, {
+		open,
+		onChangeOpen: setOpen,
+		children: /* @__PURE__ */ jsxs(TogglePanel.Content, { children: [/* @__PURE__ */ jsx(TogglePanel.Header, {
+			classNames: "flex items-center gap-2 text-sm",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "w-full grid grid-cols-[1fr_auto] items-center gap-2",
+				children: [/* @__PURE__ */ jsx(TextCrawl, {
+					classNames: "text-description",
+					lines: items.map((item) => item.title),
+					autoAdvance: true,
+					greedy: true
+				}, "status-roll"), /* @__PURE__ */ jsx(IconBlock, { children: /* @__PURE__ */ jsx(Icon, {
+					icon: headerIcon,
+					size: 4
+				}) })]
+			})
+		}), /* @__PURE__ */ jsx(TogglePanel.Body, { children: /* @__PURE__ */ jsxs(TogglePanel.Viewport, {
+			classNames: "grid grid-cols-[32px_1fr]",
+			children: [/* @__PURE__ */ jsx(NumericTabs, {
+				ref: tabsRef,
+				classNames: "p-1",
+				length: items.length,
+				selected,
+				onSelect: handleSelect
+			}), /* @__PURE__ */ jsx(JsonHighlighter, {
+				data: items[selected]?.content,
+				classNames: "p-1 text-xs bg-transparent",
+				replacer: {
+					maxDepth: 3,
+					maxArrayLen: 10,
+					maxStringLen: 128
+				}
+			})]
+		}) })] })
+	});
+};
+//#endregion
+//#region src/registry.tsx
+/**
+* Floor for a portaled panel's collapsed height, reserved before its content paints. `heightMode:
+* 'min'` makes it a floor rather than a pin — without it the row is measured at the height of an
+* empty box and grows a frame later, a row moving under a reader scrolling up.
+*/
+var COLLAPSED_HEIGHT = 42;
+/**
+* Widgets for the tags {@link createRenderer} emits.
+*
+* Host-extensible by spreading: the plugin adds its `surface` widget (which renders an
+* app-framework Surface this package must not depend on) over the fallback registered here.
+* DOM widgets render synchronously from the tag alone; React widgets are portaled and declare a
+* collapsed-height floor so the row's first measurement is honest.
+*/
+var assistantRegistry = {
+	"prompt": { block: true },
+	"link-preview": {
+		block: false,
+		urlSchemes: ["dxn:", "echo:"],
+		factory: ({ label, dxn }) => typeof label === "string" && typeof dxn === "string" ? new AnchorWidget(label, dxn) : null
+	},
+	"synthetic": {
+		block: true,
+		factory: ({ children, range }) => {
+			const text = getXmlTextChild(children ?? []);
+			return text ? new ReasoningWidget(text, range?.from) : null;
+		}
+	},
+	"reasoning": {
+		block: true,
+		streaming: true,
+		factory: ({ children, range }) => {
+			const text = getXmlTextChild(children ?? []);
+			return text ? new ReasoningWidget(text, range?.from) : null;
+		}
+	},
+	"status": {
+		block: true,
+		streaming: true,
+		factory: ({ children }) => {
+			const text = getXmlTextChild(children ?? []);
+			return text ? new StatusWidget(text) : null;
+		}
+	},
+	"reference": {
+		block: false,
+		factory: ({ children, ref }) => {
+			const text = getXmlTextChild(children ?? []);
+			return text && typeof ref === "string" ? new ReferenceWidget(text, ref) : null;
+		}
+	},
+	"suggestion": {
+		block: false,
+		factory: ({ children }) => {
+			const text = getXmlTextChild(children ?? []);
+			return text ? new SuggestionWidget(text) : null;
+		}
+	},
+	"select": {
+		block: true,
+		factory: ({ children }) => {
+			const options = (children ?? []).map((option) => option?._tag === "option" && getXmlTextChild(option.children)).filter(Boolean);
+			return options.length ? new SelectWidget(options) : null;
+		}
+	},
+	"stats": {
+		block: true,
+		factory: ({ children }) => {
+			const text = getXmlTextChild(children ?? []);
+			return text ? new StatsWidget(text) : null;
+		}
+	},
+	"toolkit": {
+		block: true,
+		streaming: true,
+		estimatedHeight: () => COLLAPSED_HEIGHT,
+		heightMode: "min",
+		Component: ToolWidget
+	},
+	"summary": {
+		block: true,
+		estimatedHeight: () => COLLAPSED_HEIGHT,
+		heightMode: "min",
+		Component: SummaryWidget
+	},
+	"surface": {
+		block: true,
+		estimatedHeight: () => COLLAPSED_HEIGHT,
+		heightMode: "min",
+		Component: FallbackWidget
+	},
+	"json": {
+		block: true,
+		estimatedHeight: () => COLLAPSED_HEIGHT,
+		heightMode: "min",
+		Component: FallbackWidget
+	}
+};
+//#endregion
+//#region src/renderer.ts
+/**
+* The assistant's projection of a message: each block flattened to markdown, everything that is not
+* prose emitted as an XML tag for the registry's widgets. The view type is a filter over blocks —
+* the model always carries everything, so switching views is a re-render, not a re-fetch.
+*
+* Consecutive tool blocks (`toolCall`/`toolResult`/`stats`) render as ONE `<toolkit>` tag carrying
+* the run as JSON: the panel widget shows a run of calls as tabs, and the item is rebuilt from its
+* message alone — there is no side channel accumulating widget state (the old `MessageSyncer`
+* machinery this package retires).
+*/
+var createRenderer = (viewType, { getObjectLabel = () => "Object" } = {}) => {
+	return (message) => {
+		const blocks = message.blocks.filter((block) => isBlockVisible(viewType, block));
+		const segments = [];
+		let tools = [];
+		const flushTools = () => {
+			if (tools.length) {
+				segments.push(toolkitTag(tools));
+				tools = [];
+			}
+		};
+		for (const block of blocks) {
+			if (block._tag === "toolCall" || block._tag === "toolResult" || block._tag === "stats" && tools.length) {
+				tools.push(block);
+				continue;
+			}
+			flushTools();
+			const rendered = blockToMarkdown(message, block, getObjectLabel);
+			if (rendered) segments.push(rendered);
+		}
+		flushTools();
+		return {
+			kind: "markdown",
+			text: segments.reduce((parts, segment) => {
+				const previous = parts[parts.length - 1];
+				if (previous?.startsWith("<suggestion") && segment.startsWith("<suggestion")) parts[parts.length - 1] = `${previous} ${segment}`;
+				else parts.push(segment);
+				return parts;
+			}, []).join("\n\n")
+		};
+	};
+};
+var isBlockVisible = (viewType, block) => {
+	switch (viewType) {
+		case "debug": return true;
+		case "summary": return block._tag === "text" && block.disposition !== "synthetic";
+		case "normal": return block._tag !== "reasoning";
+		default: return true;
+	}
+};
+var blockToMarkdown = (message, block, getObjectLabel) => {
+	switch (block._tag) {
+		case "text":
+			if (message.sender.role === "user") return block.disposition === "synthetic" ? tag("synthetic", block.text, block) : tag("prompt", block.text, block);
+			return block.text.trim() || void 0;
+		case "reasoning": return tag("reasoning", block.reasoningText ?? block.redactedText ?? "", block);
+		case "status": return tag("status", block.statusText, block);
+		case "summary": return tag("summary", block.content, block);
+		case "suggestion": return block.pending ? void 0 : tag("suggestion", block.text, block);
+		case "select": return block.pending || !block.options.length ? void 0 : `<select>${block.options.map((option) => `<option>${escapeXml(option)}</option>`).join("")}</select>`;
+		case "reference": {
+			if (block.pending) return;
+			const uri = block.reference.uri;
+			return `<reference ref="${escapeAttribute(uri.toString())}">${escapeXml(getObjectLabel(uri))}</reference>`;
+		}
+		case "stats": return;
+		case "surface": return block.pending ? void 0 : `<surface role="${escapeAttribute(block.role)}">${escapeXml(JSON.stringify(block.data ?? {}))}</surface>`;
+		default: return tag("json", JSON.stringify(block), block);
+	}
+};
+/** A run of tool blocks as one tag; the widget parses the payload back out. */
+var toolkitTag = (blocks) => {
+	return `<toolkit${blocks.some((block) => block.pending) ? " pending=\"true\"" : ""}>${escapeXml(JSON.stringify(blocks))}</toolkit>`;
+};
+/**
+* An XML tag holding block content.
+*
+* A pending block is emitted **unclosed**, which is the streaming contract: the item reconciles by
+* appending, so a closing tag written before the content is complete would be rewritten per chunk.
+* Paragraph breaks inside tag content are collapsed, since a blank line would end the enclosing
+* markdown block and leave the rest of the tag parsing as prose.
+*/
+var tag = (name, content, block) => {
+	const text = escapeXml(content.replace(/\n\n+/g, " ").trim());
+	if (!text.length && !block.pending) return "";
+	const open = `<${name}>`;
+	return block.pending ? `${open}${text}` : `${open}${text}</${name}>`;
+};
+var escapeXml = (raw) => raw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var escapeAttribute = (raw) => escapeXml(raw).replace(/"/g, "&quot;");
+/** Chrome around every row: the padding and the hover toolbar's reserved line. */
+var ROW_CHROME = 46;
+/** Height of a wrapped line of body text, and how many characters fit at typical thread width. */
+var LINE_HEIGHT = 24;
+var LINE_CHARS = 90;
+/** A collapsed panel: reasoning, a tool run, a summary. */
+var PANEL_HEIGHT = 50;
+/**
+* What a row will measure, from the message alone. Rough on purpose — its only job is to be close
+* enough that measuring the row does not move the rows below it.
+*/
+var estimateRow = (message) => {
+	let height = ROW_CHROME;
+	for (const block of message.blocks) switch (block._tag) {
+		case "text":
+			for (const paragraph of block.text.split("\n\n")) height += Math.max(1, Math.ceil(paragraph.length / LINE_CHARS)) * LINE_HEIGHT;
+			break;
+		case "suggestion":
+			height += 32;
+			break;
+		case "select":
+			height += block.options.length * 34;
+			break;
+		case "toolResult":
+		case "stats": break;
+		default: height += PANEL_HEIGHT;
+	}
+	return height;
+};
+//#endregion
+//#region src/components/MessageChrome/MessageChrome.tsx
+var MESSAGE_CHROME_NAME = "MessageChrome";
+var [MessageChromeProvider, useMessageChromeContext] = createContext(MESSAGE_CHROME_NAME);
+/** Copies the message's extracted text — the model's truth, not the DOM's partial render. */
+var CopyButton = ({ message }) => {
+	const { t } = useTranslation(translationKey);
+	return /* @__PURE__ */ jsx(IconButton, {
+		icon: "ph--copy--regular",
+		iconOnly: true,
+		label: t("copy.label"),
+		variant: "ghost",
+		density: "sm",
+		onClick: () => void navigator.clipboard?.writeText(Message.extractText(message))
+	});
+};
+var timeOf = (message) => /* @__PURE__ */ jsx("time", {
+	dateTime: message.created,
+	title: new Date(message.created).toLocaleString(),
+	children: formatTime(message.created)
+});
+/**
+* The controls under the reader's own prompt: copy, rewind (edit-and-resend), and when it was
+* sent. Revealed on hover by the chrome, but never removed from flow — chrome that appears and
+* disappears changes the row's height, and a pointer travelling down a scrolling list would then
+* move every row below it.
+*/
+var PromptToolbar = ({ classNames, message }) => {
+	const { t } = useTranslation(translationKey);
+	const { onRewind } = useMessageChromeContext("PromptToolbar");
+	return /* @__PURE__ */ jsxs("div", {
+		role: "toolbar",
+		className: mx$1("flex items-center gap-1 text-xs text-description", classNames),
+		children: [
+			/* @__PURE__ */ jsx(CopyButton, { message }),
+			onRewind && /* @__PURE__ */ jsx(IconButton, {
+				icon: "ph--clock-counter-clockwise--regular",
+				iconOnly: true,
+				label: t("rewind.label"),
+				variant: "ghost",
+				density: "sm",
+				"data-testid": "chat.rewind",
+				onClick: () => onRewind(message.id)
+			}),
+			timeOf(message)
+		]
+	});
+};
+PromptToolbar.displayName = "PromptToolbar";
+/** The controls under an answer: copy, and when the answer finished. */
+var AssistantToolbar = ({ classNames, message }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "toolbar",
+		className: mx$1("flex items-center gap-1 text-xs text-description", classNames),
+		children: [/* @__PURE__ */ jsx(CopyButton, { message }), timeOf(message)]
+	});
+};
+AssistantToolbar.displayName = "AssistantToolbar";
+/** Shared hover reveal: present in flow at all times, visible when the row is under the pointer. */
+var reveal = "pt-1 opacity-0 transition-opacity group-hover:opacity-100";
+var Row = ({ children, classNames }) => /* @__PURE__ */ jsx("div", {
+	className: mx$1("group relative px-2 py-2", classNames),
+	"data-testid": "feed.message",
+	children
+});
+/**
+* The assistant feed's per-message frame: the reader's prompts and the model's answers are framed
+* differently because they are different kinds of thing — a prompt is an instruction the thread
+* can be rewound to, an answer is a result.
+*
+* A prompt sits apart from the model's prose: right-aligned, at most two thirds of the viewport —
+* the chat convention that makes whose-turn legible at a glance — with its toolbar following the
+* bubble's edge.
+*/
+var MessageChrome = ({ message, selected, children }) => {
+	const prompt = message.sender.role === "user";
+	return /* @__PURE__ */ jsx(Row, {
+		classNames: mx$1(selected && "bg-hover-surface"),
+		children: prompt ? /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex flex-col items-end",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "max-w-[66%] min-w-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "px-4 py-3 border-s-2 border-accent-bg rounded-sm bg-input-surface",
+					children
+				}), /* @__PURE__ */ jsx(PromptToolbar, {
+					classNames: mx$1("justify-end", reveal),
+					message
+				})]
+			})
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [children, /* @__PURE__ */ jsx(AssistantToolbar, {
+				classNames: reveal,
+				message
+			})]
+		})
+	});
+};
+MessageChrome.displayName = MESSAGE_CHROME_NAME;
+//#endregion
+//#region src/components/ChatThread/ChatThread.tsx
+var [ChatThreadProvider, useChatThreadContext] = createContext("ChatThread");
+/** Bridges the feed's context out to the host's ref; renders nothing. */
+var ControllerBridge = ({ controllerRef }) => {
+	const { model, scrollToBottom, scrollToIndex, navigation } = useMessageList("ChatThread.Controller");
+	useEffect(() => {
+		setRef(controllerRef, {
+			model,
+			scrollToBottom,
+			scrollToIndex,
+			navigation
+		});
+		return () => {
+			setRef(controllerRef, null);
+		};
+	}, [
+		controllerRef,
+		model,
+		scrollToBottom,
+		scrollToIndex,
+		navigation
+	]);
+	return null;
+};
+/**
+* Headless root: the feed's `MessageList.Root` configured as an assistant thread — the view-typed
+* renderer, the widget registry, the prompt/answer chrome, and the chat behaviours (follow the
+* streaming tail; reserve room to bring the last prompt to the top). Composes with the feed's own
+* parts: `MessageList.Nav`, `useMessageList`, and the rails all work inside it.
+*/
+var ChatThreadRoot = ({ children, model, viewType, registry, getObjectLabel, userHue, debug, onEvent, onRangeChange, controllerRef }) => {
+	const renderer = useMemo(() => createRenderer(viewType, { getObjectLabel }), [viewType, getObjectLabel]);
+	const merged = useMemo(() => registry ? {
+		...assistantRegistry,
+		...registry
+	} : assistantRegistry, [registry]);
+	const handleRewind = useCallback((id) => onEvent?.({
+		type: "rewind",
+		id
+	}), [onEvent]);
+	return /* @__PURE__ */ jsx(ChatThreadProvider, {
+		userHue,
+		onEvent,
+		children: /* @__PURE__ */ jsx(MessageChromeProvider, {
+			onRewind: onEvent ? handleRewind : void 0,
+			children: /* @__PURE__ */ jsxs(MessageList.Root, {
+				model,
+				renderer,
+				registry: merged,
+				Chrome: MessageChrome,
+				estimateSize: estimateRow,
+				debug,
+				stickyBottom: true,
+				scrollPastEnd: true,
+				onRangeChange,
+				children: [controllerRef && /* @__PURE__ */ jsx(ControllerBridge, { controllerRef }), children]
+			})
+		})
+	});
+};
+ChatThreadRoot.displayName = "ChatThread.Root";
+var CHAT_THREAD_VIEWPORT_NAME = "ChatThread.Viewport";
+/**
+* The scrolling thread. Suggestion and select widgets are DOM widgets carrying
+* `data-action="submit"` buttons; one delegated listener here turns those clicks into `submit`
+* events, which is what keeps the widgets renderable from the tag alone.
+*/
+var ChatThreadViewport = ({ children, ...props }) => {
+	const { userHue, onEvent } = useChatThreadContext(CHAT_THREAD_VIEWPORT_NAME);
+	const handleClick = useCallback((event) => {
+		const text = event.target.closest("[data-action=\"submit\"]")?.getAttribute("data-value");
+		if (text) {
+			event.preventDefault();
+			event.stopPropagation();
+			onEvent?.({
+				type: "submit",
+				text
+			});
+		}
+	}, [onEvent]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "contents",
+		"data-testid": "assistant.thread",
+		"data-hue": userHue,
+		onClickCapture: handleClick,
+		children: /* @__PURE__ */ jsx(MessageList.Viewport, {
+			...props,
+			children
+		})
+	});
+};
+ChatThreadViewport.displayName = CHAT_THREAD_VIEWPORT_NAME;
+var ChatThread = {
+	Root: ChatThreadRoot,
+	Viewport: ChatThreadViewport
+};
+//#endregion
+//#region src/types.ts
+/**
+* Which projection of the thread the reader sees. A view is a filter over blocks, applied by the
+* renderer — the model always carries everything.
+*
+* - `summary`: only conversational text (prompts and replies).
+* - `normal`: everything except reasoning.
+* - `thinking`: everything, reasoning included.
+* - `debug`: every block, raw fallbacks visible.
+*/
+var ChatView = Schema.Union([
+	Schema.Literal("normal").annotate({ title: "Normal" }),
+	Schema.Literal("summary").annotate({ title: "Summary" }),
+	Schema.Literal("thinking").annotate({ title: "Thinking" }),
+	Schema.Literal("debug").annotate({ title: "Debug" })
+]);
+//#endregion
+export { AssistantToolbar, ChatThread, ChatView, FallbackWidget, MessageChrome, MessageChromeProvider, PromptToolbar, ReasoningWidget, ReferenceWidget, SelectWidget, StatsWidget, StatusWidget, SuggestionWidget, SummaryWidget, ToolWidget, assistantRegistry, createRenderer, estimateRow, formatTime, translationKey, translations };
+
+//# sourceMappingURL=index.mjs.map