@jfrader/ui 0.5.1 → 0.7.0

package/dist/chat-thread-DkB-WMWJ.js

@@ -0,0 +1,864 @@
+'use client';
+import { a as e, i as t } from "./css-BYJhdGh-.js";
+import { n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./sx-BJXJ2xJK.js";
+import { t as o } from "./use-controlled-state-DpeVQZNR.js";
+import { t as s } from "./visually-hidden-DgVO3NaB.js";
+import { t as c } from "./button-C6OV0C7J.js";
+import { t as ee } from "./part-id-D0zksy32.js";
+import { t as te } from "./card-C008OQCp.js";
+import { c as l, d as ne, g as re, h as u, i as ie, m as ae, n as d, p as oe, r as se, t as f } from "./thread-parts-Cpktor6D.js";
+import { useEffect as ce, useId as le, useLayoutEffect as p, useMemo as m, useRef as h, useState as g } from "react";
+import { vars as _ } from "@jfrader/tokens/vars";
+import { Fragment as v, jsx as y, jsxs as b } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as ue } from "@floating-ui/react";
+//#region src/components/chat-thread/chat-thread.tsx
+var x = "chat-thread", de = [], fe = {
+	text: "",
+	files: []
+}, S = [], pe = [
+	"👍",
+	"❤️",
+	"🎉",
+	"👀",
+	"🚀",
+	"✅"
+], me = 3e5, he = 48, C = 4, ge = 10, w = () => crypto.randomUUID();
+function _e(e) {
+	let t = (t, n, r) => l(e, t, n, r);
+	return {
+		conversation: "Conversation",
+		transcript: "Conversation transcript",
+		composer: "Message",
+		placeholder: "Write a message",
+		send: "Send",
+		attach: "Attach files",
+		attachments: "Attachments",
+		sending: "Sending",
+		sent: "Sent",
+		delivered: "Delivered",
+		read: "Read",
+		failed: "Failed",
+		retry: "Retry",
+		jumpToLatest: "Jump to latest",
+		unknownAuthor: "Unknown author",
+		empty: "No messages yet",
+		invalidTime: "Unknown time",
+		sendFailed: "Message could not be sent",
+		addReaction: "Add reaction",
+		closeReactions: "Close reactions",
+		reactions: "Reactions",
+		removeFile: (e) => `Remove ${e}`,
+		readBy: (e) => `Read by ${e}`,
+		typing: (e) => `Typing: ${e}`,
+		newMessages: (e) => t(e, "new message", "new messages"),
+		showAttachments: (e) => `Show ${t(e, "more attachment", "more attachments")}`,
+		reactWith: (e) => `React with ${e}`,
+		reactionCount: (e, n, r) => `${e} ${t(n, "reaction", "reactions")}${r ? ", including you" : ""}`,
+		fileRejected: (e, t) => ({
+			type: `${t}: file type not accepted`,
+			size: `${t}: file too large`,
+			count: `${t}: too many files`
+		})[e]
+	};
+}
+var T = t({
+	display: "flex",
+	flexDirection: "column",
+	minBlockSize: 0,
+	minInlineSize: 0,
+	blockSize: "100%",
+	gap: _.space[3],
+	containerType: "inline-size",
+	fontFamily: _.font.sans,
+	fontSize: _.textSize.sm,
+	lineHeight: _.lineHeight.base,
+	color: _.color.text
+}), E = t({
+	display: "flex",
+	flexDirection: "column",
+	flex: "1 1 auto",
+	minBlockSize: 0,
+	gap: _.space[2]
+}), D = t({
+	overflowY: "auto",
+	overflowAnchor: "none",
+	minBlockSize: 0,
+	flex: "1 1 auto",
+	padding: _.space[3],
+	"&:focus-visible": n
+}), ve = t({
+	display: "flex",
+	flexDirection: "column",
+	gap: _.space[4],
+	listStyle: "none",
+	margin: 0,
+	padding: 0
+}), O = t({ gap: _.space[2] }), k = e({
+	from: { opacity: 0 },
+	to: { opacity: 1 }
+}), ye = t({
+	animationName: k,
+	animationDuration: _.motion.duration.base,
+	animationTimingFunction: _.motion.easeStandard,
+	[i]: { animation: "none" }
+}), be = t({
+	minInlineSize: 0,
+	inlineSize: "100%",
+	display: "grid",
+	"&[data-grouped=\"true\"]": { marginBlockStart: `calc(-1 * ${_.space[2]})` }
+}), A = t({
+	inlineSize: "min(78%, 34rem)",
+	minInlineSize: 0,
+	"@container (max-width: 28rem)": { inlineSize: "84%" }
+}), j = t({ justifySelf: "end" }), M = t({
+	padding: _.space[3],
+	minInlineSize: 0,
+	whiteSpace: "pre-wrap",
+	overflowWrap: "anywhere",
+	backgroundColor: _.color.surfaceRaised
+}), xe = t({
+	backgroundColor: _.color.accentSoft,
+	color: _.color.text
+}), Se = t({
+	marginBlock: _.space[3],
+	fontSize: _.textSize.xs,
+	fontWeight: _.fontWeight.medium,
+	textAlign: "center",
+	color: _.color.textMuted
+}), Ce = t({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: _.space[2]
+}), we = t({
+	fontSize: _.textSize.xs,
+	color: _.color.textMuted,
+	overflowWrap: "anywhere"
+}), Te = t({
+	color: _.color.dangerText,
+	margin: 0,
+	overflowWrap: "anywhere"
+}), Ee = t({
+	display: "grid",
+	gap: _.space[2],
+	minInlineSize: 0,
+	flexShrink: 0
+}), De = t({
+	display: "flex",
+	flexWrap: "wrap",
+	gap: _.space[2],
+	margin: 0,
+	padding: _.space[2],
+	listStyle: "none",
+	maxBlockSize: "12rem",
+	overflow: "auto"
+}), N = t({
+	display: "flex",
+	alignItems: "center",
+	flexWrap: "wrap",
+	gap: _.space[2],
+	padding: _.space[2],
+	border: `1px solid ${_.color.borderControl}`,
+	borderRadius: _.radius.sm,
+	minInlineSize: 0,
+	overflowWrap: "anywhere",
+	[r]: { borderColor: "CanvasText" }
+}), Oe = t({
+	display: "block",
+	maxInlineSize: "100%",
+	blockSize: "auto",
+	aspectRatio: "4 / 3",
+	objectFit: "contain",
+	borderRadius: _.radius.sm
+}), P = t({
+	inlineSize: _.space[12],
+	blockSize: _.space[12],
+	objectFit: "cover"
+}), F = t({
+	display: "grid",
+	gap: _.space[2],
+	listStyle: "none",
+	padding: 0,
+	margin: 0
+}), ke = t({
+	color: _.color.accentText,
+	overflowWrap: "anywhere",
+	"&:focus-visible": n
+}), I = t({
+	maxBlockSize: `calc(6lh + 2 * ${_.space[2]})`,
+	overflowY: "auto"
+}), Ae = t({
+	color: _.color.textMuted,
+	transitionProperty: "opacity",
+	transitionDuration: _.motion.duration.base,
+	[i]: { transitionDuration: "0s" }
+}), je = t({ alignSelf: "center" });
+function L(e) {
+	if (e && !/[\u0000-\u0020\u007f\\]/u.test(e)) try {
+		return [
+			"http:",
+			"https:",
+			"blob:"
+		].includes(new URL(e, "https://attachments.invalid/").protocol) ? e : void 0;
+	} catch {
+		return;
+	}
+}
+function R(e, t) {
+	let n = e >= 1e6 ? {
+		size: 1e6,
+		unit: "megabyte"
+	} : e >= 1e3 ? {
+		size: 1e3,
+		unit: "kilobyte"
+	} : {
+		size: 1,
+		unit: "byte"
+	};
+	return new Intl.NumberFormat(t, {
+		style: "unit",
+		unit: n.unit,
+		maximumFractionDigits: 1
+	}).format(e / n.size);
+}
+function Me(e, t) {
+	return !t?.trim() || t.split(",").some((t) => {
+		let n = t.trim().toLowerCase();
+		return n.startsWith(".") ? e.name.toLowerCase().endsWith(n) : n.endsWith("/*") ? e.type.toLowerCase().startsWith(n.slice(0, -1)) : e.type.toLowerCase() === n;
+	});
+}
+function Ne(e) {
+	let t = h(/* @__PURE__ */ new Map()), [n, r] = g(/* @__PURE__ */ new Map());
+	return p(() => {
+		let n = new Set(e.filter((e) => e.type.startsWith("image/")));
+		for (let [e, r] of t.current) n.has(e) || (URL.revokeObjectURL(r), t.current.delete(e));
+		for (let e of n) t.current.has(e) || t.current.set(e, URL.createObjectURL(e));
+		r(new Map(t.current));
+	}, [e]), ce(() => () => {
+		for (let e of t.current.values()) URL.revokeObjectURL(e);
+		t.current.clear();
+	}, []), n;
+}
+function Pe({ ref: e, value: t, defaultValue: n = fe, onValueChange: r, onSend: i, acknowledged: ee, onDraftInteraction: te, allowAttachments: l = !0, accept: re, maxFiles: u = ge, maxFileSize: ae = Infinity, disabled: d = !1, placeholder: oe, label: se, locale: _, size: v = "md", labels: de, slotProps: S, className: pe, sx: me, ...he }) {
+	let { formatters: C } = m(() => ne("ChatThread.Composer", _, "UTC"), [_]), w = {
+		..._e(C),
+		...de
+	}, [T = fe, E] = o(t, n, r), [D, ve] = g(!1), [O, k] = g(null), [be, A] = g(""), j = h(!1), M = h(!0), xe = h(null), Se = ue([e, xe]), we = h(null), Oe = ue([we, S?.fileInput?.ref]), F = le(), ke = le(), Ae = Ne(T.files);
+	ce(() => (M.current = !0, () => {
+		M.current = !1;
+	}), []), p(() => {
+		O && ee === O && (k(null), E({
+			text: "",
+			files: []
+		}));
+	}, [
+		ee,
+		O,
+		E
+	]);
+	let je = (e) => {
+		d || j.current || (te?.(), k(null), A(""), E(e));
+	}, L = (e) => {
+		if (d || j.current || !l) return;
+		let t = [...T.files], n = [], r = Number.isFinite(u) ? Math.max(0, Math.floor(u)) : ge;
+		for (let i of e) {
+			let e = Me(i, re) ? i.size > Math.max(0, ae) ? "size" : t.length >= r ? "count" : null : "type";
+			e ? n.push(w.fileRejected(e, i.name)) : t.push(i);
+		}
+		t.length !== T.files.length && je({
+			...T,
+			files: t
+		}), A(C.facts.format(n));
+	}, Pe = async () => {
+		if (d || j.current || O || !T.text.trim() && T.files.length === 0) return;
+		let e = {
+			text: T.text.trim(),
+			files: [...T.files]
+		};
+		j.current = !0, ve(!0), A("");
+		try {
+			let t = await i(e);
+			if (!M.current) return;
+			t === !1 ? k(e) : E({
+				text: "",
+				files: []
+			});
+		} catch {
+			M.current && A(w.sendFailed);
+		} finally {
+			j.current = !1, M.current && ve(!1);
+		}
+	}, Fe = (e) => {
+		let t = xe.current, n = t?.ownerDocument.activeElement;
+		je({
+			...T,
+			files: T.files.filter((t, n) => e !== n)
+		}), queueMicrotask(() => {
+			n && !n.isConnected && (t?.querySelector("[data-action=\"remove-file\"]") ?? t?.querySelector("textarea"))?.focus();
+		});
+	}, z = S?.textarea, B = S?.fileInput, V = S?.form;
+	return /* @__PURE__ */ y(a, {
+		className: pe,
+		styles: [Ee, ie[v]],
+		sx: me,
+		children: (e) => /* @__PURE__ */ b("div", {
+			...he,
+			ref: Se,
+			className: e,
+			"data-ui": `${x}-composer`,
+			children: [
+				T.files.length > 0 ? /* @__PURE__ */ y("ul", {
+					role: "list",
+					"aria-label": w.attachments,
+					"data-ui": `${x}-tray`,
+					className: S?.tray?.className,
+					css: [
+						De,
+						ye,
+						S?.tray?.css
+					],
+					children: T.files.map((e, t) => /* @__PURE__ */ b("li", {
+						className: S?.file?.className,
+						css: [N, S?.file?.css],
+						children: [
+							Ae.get(e) ? /* @__PURE__ */ y("img", {
+								src: Ae.get(e),
+								alt: "",
+								css: P
+							}) : null,
+							/* @__PURE__ */ b("span", { children: [
+								e.name,
+								" · ",
+								R(e.size, _)
+							] }),
+							/* @__PURE__ */ y(c, {
+								size: "sm",
+								variant: "ghost",
+								...S?.removeButton,
+								"aria-label": w.removeFile(e.name),
+								disabled: d || D || S?.removeButton?.disabled,
+								"data-action": "remove-file",
+								onClick: (e) => {
+									S?.removeButton?.onClick?.(e), e.defaultPrevented || Fe(t);
+								},
+								children: "×"
+							})
+						]
+					}, t))
+				}) : null,
+				/* @__PURE__ */ b("form", {
+					...V,
+					"data-ui": `${x}-form`,
+					onSubmit: (e) => {
+						V?.onSubmit?.(e), e.defaultPrevented || (e.preventDefault(), Pe());
+					},
+					onDragOver: (e) => {
+						V?.onDragOver?.(e), !e.defaultPrevented && l && !d && !D && e.dataTransfer.types.includes("Files") && e.preventDefault();
+					},
+					onDrop: (e) => {
+						V?.onDrop?.(e), !e.defaultPrevented && e.dataTransfer.files.length && (e.preventDefault(), L(Array.from(e.dataTransfer.files)));
+					},
+					children: [/* @__PURE__ */ y(f, {
+						ui: x,
+						kind: "root",
+						draft: T.text,
+						onDraftChange: (e) => je({
+							...T,
+							text: e
+						}),
+						onSubmit: () => {
+							Pe();
+						},
+						submitOnEnter: !0,
+						allowEmpty: T.files.length > 0,
+						lockWhilePending: D,
+						cancelable: !1,
+						cancelOnEscape: !1,
+						label: se ?? w.composer,
+						placeholder: oe ?? w.placeholder,
+						submitLabel: w.send,
+						cancelLabel: "",
+						mentionsLabel: "",
+						people: [],
+						locale: _,
+						disabled: d,
+						pending: D || O !== null,
+						size: v,
+						submitProps: S?.sendButton,
+						textareaProps: {
+							...z,
+							"aria-describedby": [z?.["aria-describedby"], be ? ke : void 0].filter(Boolean).join(" ") || void 0,
+							slotProps: {
+								...z?.slotProps,
+								control: {
+									...z?.slotProps?.control,
+									css: [I, z?.slotProps?.control?.css]
+								}
+							},
+							onPaste: (e) => {
+								z?.onPaste?.(e), !e.defaultPrevented && e.clipboardData.files.length && L(Array.from(e.clipboardData.files));
+							}
+						}
+					}), l ? /* @__PURE__ */ b("div", {
+						css: Ce,
+						children: [/* @__PURE__ */ y("input", {
+							...B,
+							ref: Oe,
+							id: B?.id ?? F,
+							type: "file",
+							multiple: !0,
+							accept: re,
+							disabled: d || D,
+							"aria-label": B?.["aria-label"] ?? w.attach,
+							css: s,
+							onChange: (e) => {
+								B?.onChange?.(e), e.defaultPrevented || L(Array.from(e.currentTarget.files ?? [])), e.currentTarget.value = "";
+							}
+						}), /* @__PURE__ */ y(c, {
+							variant: "outline",
+							size: "sm",
+							...S?.attachButton,
+							"aria-controls": B?.id ?? F,
+							disabled: d || D || S?.attachButton?.disabled,
+							onClick: (e) => {
+								S?.attachButton?.onClick?.(e), e.defaultPrevented || we.current?.click();
+							},
+							children: w.attach
+						})]
+					}) : null]
+				}),
+				/* @__PURE__ */ y("p", {
+					id: ke,
+					role: "status",
+					"aria-atomic": "true",
+					"data-ui": `${x}-error`,
+					className: S?.error?.className,
+					css: [Te, S?.error?.css],
+					children: be
+				})
+			]
+		})
+	});
+}
+function Fe(e) {
+	return /* @__PURE__ */ y(Pe, { ...e });
+}
+Fe.displayName = "ChatThread.Composer";
+function z({ attachments: e, labels: t, locale: n, part: r }) {
+	let [i, a] = g(!1), o = i ? e : e.slice(0, C);
+	return /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y("ul", {
+		role: "list",
+		"aria-label": t.attachments,
+		"data-ui": `${x}-attachments`,
+		className: r?.className,
+		css: [F, r?.css],
+		children: o.map((e) => {
+			let t = L(e.url), r = /* @__PURE__ */ b(v, { children: [e.kind === "image" && t ? /* @__PURE__ */ y("img", {
+				src: t,
+				alt: e.alt ?? e.name,
+				width: e.width,
+				height: e.height,
+				style: e.width && e.height ? { aspectRatio: `${e.width} / ${e.height}` } : void 0,
+				css: Oe
+			}) : null, /* @__PURE__ */ b("span", { children: [e.name, e.size === void 0 ? "" : ` · ${R(e.size, n)}`] })] });
+			return /* @__PURE__ */ y("li", {
+				css: N,
+				children: t ? /* @__PURE__ */ y("a", {
+					href: t,
+					download: e.name,
+					css: ke,
+					children: r
+				}) : r
+			}, e.id);
+		})
+	}), !i && e.length > C ? /* @__PURE__ */ y(c, {
+		size: "sm",
+		variant: "outline",
+		onClick: () => a(!0),
+		children: t.showAttachments(e.length - C)
+	}) : null] });
+}
+function B(e, t) {
+	return u(e, (e) => e.emoji).map(({ emoji: e, mine: n }) => ({
+		emoji: e,
+		users: n ? [t] : []
+	}));
+}
+function V({ ref: e, participants: t, currentUserId: n, value: r, defaultValue: i = de, onValueChange: l, now: f, locale: _, timeZone: v = "UTC", typing: fe = S, readBy: C, onSend: ge, onReact: k, onRetry: Ee, reactions: De = pe, groupWindow: N = me, composer: Oe = !0, disabled: P = !1, composerProps: F, getNewId: ke = w, size: I = "md", labels: L, slotProps: R, className: Me, sx: Ne, ...Fe }) {
+	let V = le(), Ie = h(null), Le = ue([Ie, e]), H = h(null), Re = h(null), { formatters: U } = m(() => ne("ChatThread", _, v), [_, v]), W = {
+		..._e(U),
+		...L
+	}, ze = m(() => new Intl.DateTimeFormat(U.full.resolvedOptions().locale, {
+		timeZone: U.full.resolvedOptions().timeZone,
+		dateStyle: "full"
+	}), [U]), Be = m(() => new Intl.DateTimeFormat("en-US-u-ca-iso8601-nu-latn", {
+		timeZone: U.full.resolvedOptions().timeZone,
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit"
+	}), [U]), Ve = h(null), [G = de, He] = o(r, i, (e) => l?.([...e], Ve.current)), K = h(G);
+	K.current = G;
+	let q = new Map(u(t, (e) => e.id).map((e) => [e.id, e])), Ue = u(G, (e) => e.id), [We, Ge] = g(null), [Ke, qe] = g(0), [Je, Ye] = g(!1), [Xe, Ze] = g(!1), [Qe, $e] = g(null), [et, tt] = g(null), [nt, rt] = g(""), J = h(/* @__PURE__ */ new Map()), Y = h(/* @__PURE__ */ new Set()), X = h(G.map((e) => e.id)), it = m(() => {
+		let e = new Set(X.current);
+		return new Set(G.filter((t) => !e.has(t.id)).map((e) => e.id));
+	}, [G]), at = X.current.length > 0 && G[0]?.id !== X.current[0] && G.some((e) => e.id === X.current[0]), Z = h({
+		height: 0,
+		top: 0,
+		first: G[0]?.id
+	}), ot = h(null), Q = h(!0), st = h(!1), ct = h(!1), $ = h(null), lt = h(/* @__PURE__ */ new Set()), ut = h(!1), dt = h(!0);
+	p(() => {
+		!Je && ct.current && (ct.current = !1, (Ie.current?.querySelector("textarea:not(:disabled)") ?? H.current)?.focus());
+	}, [Je]);
+	let ft = (e) => {
+		let t = J.current.get(e);
+		if (t) {
+			for (let e of t) URL.revokeObjectURL(e);
+			J.current.delete(e);
+		}
+	}, pt = () => {
+		let e = H.current;
+		if (!e) return;
+		let t = e.getBoundingClientRect().top, n = Array.from(e.querySelectorAll("[data-message-id]")).find((e) => e.getBoundingClientRect().bottom > t);
+		ot.current = n ? {
+			id: n.dataset.messageId,
+			offset: n.getBoundingClientRect().top - t
+		} : null;
+	}, mt = () => {
+		let e = H.current, t = ot.current;
+		if (!e || !t) return !1;
+		let n = e.querySelector(`[data-message-id="${CSS.escape(t.id)}"]`);
+		return n ? (e.scrollTop += n.getBoundingClientRect().top - e.getBoundingClientRect().top - t.offset, !0) : !1;
+	};
+	ce(() => (dt.current = !0, () => {
+		dt.current = !1;
+		for (let e of J.current.values()) for (let t of e) URL.revokeObjectURL(t);
+		J.current.clear();
+	}), []), p(() => {
+		let e = new Set(G.flatMap((e) => e.attachments?.map((e) => e.url) ?? []));
+		for (let [t, n] of J.current) {
+			if (Y.current.has(t) && !G.some((e) => e.id === t)) continue;
+			Y.current.delete(t);
+			let r = [];
+			for (let t of n) e.has(t) ? r.push(t) : URL.revokeObjectURL(t);
+			r.length ? J.current.set(t, r) : J.current.delete(t);
+		}
+	}, [G]), p(() => {
+		let e = H.current;
+		if (!e) return;
+		let t = X.current, n = new Set(t), r = G.filter((e) => !n.has(e.id)), i = at;
+		i && Ze(!1);
+		let a = $.current !== null && G.some((e) => e.id === $.current);
+		Q.current || a ? (e.scrollTop = e.scrollHeight, Q.current = !0, a && ($.current = null), Ye(!1), qe(0)) : !mt() && i && (e.scrollTop = Z.current.top + e.scrollHeight - Z.current.height), !Q.current && !i && r.length && qe((e) => e + r.filter((e) => !lt.current.has(e.id)).length), Z.current = {
+			top: e.scrollTop,
+			height: e.scrollHeight,
+			first: G[0]?.id
+		}, pt(), X.current = G.map((e) => e.id);
+		let o = requestAnimationFrame(() => Ze(!0));
+		return () => cancelAnimationFrame(o);
+	}, [G]), ce(() => {
+		let e = H.current, t = Re.current;
+		if (!e || !t) return;
+		let n = new ResizeObserver(() => {
+			Q.current ? e.scrollTop = e.scrollHeight : mt() || (e.scrollTop = Z.current.top), Z.current = {
+				...Z.current,
+				top: e.scrollTop,
+				height: e.scrollHeight
+			}, pt();
+		});
+		return n.observe(t), n.observe(e), () => n.disconnect();
+	}, []);
+	let ht = (e, t) => {
+		Ve.current = t, He(e);
+	}, gt = async (e) => {
+		if (P || !re(f)) throw Error(W.sendFailed);
+		let t = ke();
+		if (K.current.some((e) => e.id === t)) throw Error(W.sendFailed);
+		_t();
+		let i = [];
+		J.current.set(t, i);
+		let a;
+		try {
+			a = e.files.map((e, n) => {
+				let r = URL.createObjectURL(e);
+				return i.push(r), {
+					id: `${t}:${n}`,
+					name: e.name,
+					kind: e.type.startsWith("image/") ? "image" : "file",
+					url: r,
+					size: e.size,
+					alt: e.name
+				};
+			});
+		} catch (e) {
+			throw ft(t), e;
+		}
+		Y.current.add(t);
+		let o = {
+			id: t,
+			authorId: n,
+			text: e.text,
+			createdAt: f,
+			attachments: a,
+			status: "sent"
+		};
+		lt.current.add(t);
+		try {
+			return r !== void 0 && ($.current = t, ht([...K.current, o], {
+				type: "send",
+				message: o,
+				draft: e
+			})), await ge?.(e), dt.current ? (r === void 0 && ($.current = t, ht([...K.current, o], {
+				type: "send",
+				message: o,
+				draft: e
+			})), $e({
+				id: t,
+				draft: e
+			}), r === void 0 || K.current.some((e) => e.id === t)) : !1;
+		} catch (e) {
+			throw Y.current.delete(t), K.current.some((e) => e.id === t) || ft(t), e;
+		}
+	}, _t = () => {
+		for (let e of Y.current) K.current.some((t) => t.id === e) || ft(e);
+		Y.current.clear(), $e(null);
+	}, vt = (e, t) => {
+		if (P) return;
+		let r = e.reactions ?? [], i = B(r, n), a = ae(i, t, n), o = r.find((e) => e.emoji === t), s = Math.max(0, (o?.count ?? 0) + (a.added ? 1 : -1)), c = {
+			emoji: t,
+			count: s,
+			mine: a.added
+		}, ee = o ? r.flatMap((e) => e.emoji === t ? s > 0 ? [c] : [] : [e]) : [...r, c];
+		ht(G.map((t) => t.id === e.id ? {
+			...t,
+			reactions: ee
+		} : t), {
+			type: "react",
+			id: e.id,
+			emoji: t,
+			added: a.added
+		}), k?.(e.id, t);
+	}, yt = async (e) => {
+		if (!(P || ut.current)) {
+			ut.current = !0, tt(e), rt("");
+			try {
+				await Ee?.(e);
+			} catch {
+				dt.current && rt(W.sendFailed);
+			} finally {
+				ut.current = !1, dt.current && tt(null);
+			}
+		}
+	}, bt = () => {
+		let e = H.current;
+		if (!e) return;
+		let t = e.ownerDocument.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		Q.current = !0, st.current = !0, ct.current = !0, e.scrollTo({
+			top: e.scrollHeight,
+			behavior: t ? "instant" : "smooth"
+		}), qe(0), Ye(!1);
+	}, xt = u(fe, (e) => e).filter((e) => e !== n && q.has(e)).map((e) => q.get(e).name), St = xt.length ? W.typing(U.people.format(xt)) : "", Ct = Qe && G.some((e) => e.id === Qe.id) ? Qe.draft : null;
+	return /* @__PURE__ */ y(a, {
+		className: Me,
+		styles: [T, ie[I]],
+		sx: Ne,
+		children: (e) => /* @__PURE__ */ b("div", {
+			...Fe,
+			ref: Le,
+			className: e,
+			"data-ui": x,
+			"data-size": I,
+			children: [
+				/* @__PURE__ */ b("div", {
+					"data-ui": `${x}-viewport`,
+					className: R?.viewport?.className,
+					css: [E, R?.viewport?.css],
+					children: [/* @__PURE__ */ y("div", {
+						ref: H,
+						tabIndex: 0,
+						role: "group",
+						"aria-label": W.transcript,
+						"data-ui": `${x}-scroller`,
+						className: R?.scroller?.className,
+						css: [D, R?.scroller?.css],
+						onScroll: (e) => {
+							let t = e.currentTarget, n = t.scrollHeight - t.clientHeight - t.scrollTop <= he;
+							n && (st.current = !1), Q.current = n || st.current, Z.current = {
+								...Z.current,
+								top: t.scrollTop,
+								height: t.scrollHeight
+							}, pt(), Ye(!Q.current), Q.current && qe(0);
+						},
+						onWheel: () => {
+							st.current = !1;
+						},
+						children: /* @__PURE__ */ b("div", {
+							role: "log",
+							"aria-label": W.conversation,
+							"aria-live": Xe && !at ? "polite" : "off",
+							"aria-relevant": "additions",
+							"aria-atomic": "false",
+							"data-ui": `${x}-log`,
+							className: R?.log?.className,
+							css: R?.log?.css,
+							children: [Ue.length === 0 ? /* @__PURE__ */ y("p", { children: W.empty }) : null, /* @__PURE__ */ y("ol", {
+								ref: Re,
+								role: "list",
+								"data-ui": `${x}-list`,
+								className: R?.list?.className,
+								css: [
+									ve,
+									I === "sm" && O,
+									R?.list?.css
+								],
+								children: Ue.map((e, t) => {
+									let r = oe(e.createdAt), i = Ue[t - 1], a = i ? oe(i.createdAt) : null, o = r !== null && a !== null && Be.format(r) === Be.format(a), s = o && i?.authorId === e.authorId && r - a >= 0 && r - a <= (Number.isFinite(N) && N >= 0 ? N : me), l = e.authorId === n, ne = Object.entries(C ?? {}).filter(([t, r]) => t !== n && q.has(t) && r === e.id).map(([e]) => q.get(e).name);
+									return /* @__PURE__ */ b("li", {
+										"data-ui": `${x}-message`,
+										"data-message-id": e.id,
+										"data-own": l,
+										"data-grouped": s,
+										className: R?.message?.className,
+										css: [
+											be,
+											it.has(e.id) && e.status !== "failed" && ye,
+											R?.message?.css
+										],
+										children: [o ? null : /* @__PURE__ */ y("h3", {
+											"data-ui": `${x}-day`,
+											css: Se,
+											children: r === null ? W.invalidTime : ze.format(r)
+										}), /* @__PURE__ */ b(d, {
+											ui: x,
+											author: q.get(e.authorId) ?? {
+												id: e.authorId,
+												name: W.unknownAuthor
+											},
+											epoch: r,
+											now: re(f) ? f : null,
+											formatters: U,
+											invalidTimeLabel: W.invalidTime,
+											size: I,
+											baseId: V,
+											messageId: e.id,
+											slots: {
+												article: { css: [A, l && j] },
+												time: R?.time
+											},
+											children: [
+												/* @__PURE__ */ b(te, {
+													"data-part": "chat-thread-bubble",
+													className: R?.bubble?.className,
+													css: [
+														M,
+														l && xe,
+														R?.bubble?.css
+													],
+													children: [e.text !== void 0 && e.text !== "" ? /* @__PURE__ */ y("span", {
+														"data-ui": `${x}-text`,
+														children: e.text
+													}) : null, e.attachments?.length ? /* @__PURE__ */ y(z, {
+														attachments: e.attachments,
+														labels: W,
+														locale: _,
+														part: R?.attachments
+													}) : null]
+												}),
+												/* @__PURE__ */ y(se, {
+													ui: x,
+													reactions: B(e.reactions ?? [], n),
+													counts: new Map(e.reactions?.map((e) => [e.emoji, Math.max(0, e.count)])),
+													offered: u(De, (e) => e),
+													currentUserId: n,
+													formatters: U,
+													labels: W,
+													readOnly: !1,
+													disabled: P,
+													pickerOpen: We === e.id,
+													onPickerOpenChange: (t) => Ge(t ? e.id : null),
+													onToggle: (t) => vt(e, t),
+													pickerId: ee(V, "picker", e.id),
+													part: R?.reaction,
+													overlay: !0
+												}),
+												/* @__PURE__ */ b("div", {
+													className: R?.receipt?.className,
+													"data-ui": `${x}-receipt`,
+													css: [
+														we,
+														Ce,
+														R?.receipt?.css
+													],
+													children: [
+														e.status ? /* @__PURE__ */ y("span", {
+															"data-state": e.status,
+															css: [e.status !== "failed" && ye, e.status === "failed" && Te],
+															children: W[e.status]
+														}, e.status) : null,
+														ne.length ? /* @__PURE__ */ y("span", { children: W.readBy(U.people.format(ne)) }) : null,
+														e.status === "failed" && Ee ? /* @__PURE__ */ y(c, {
+															size: "sm",
+															variant: "outline",
+															disabled: P,
+															loading: et === e.id,
+															onClick: () => {
+																yt(e.id);
+															},
+															children: W.retry
+														}) : null
+													]
+												})
+											]
+										})]
+									}, e.id);
+								})
+							})]
+						})
+					}), Je ? /* @__PURE__ */ y(c, {
+						variant: "outline",
+						size: "sm",
+						...R?.jumpButton,
+						css: je,
+						onClick: (e) => {
+							R?.jumpButton?.onClick?.(e), e.defaultPrevented || bt();
+						},
+						children: Ke ? W.newMessages(Ke) : W.jumpToLatest
+					}) : null]
+				}),
+				/* @__PURE__ */ y("div", {
+					"aria-hidden": "true",
+					css: Ae,
+					children: St
+				}),
+				/* @__PURE__ */ y("div", {
+					role: "status",
+					"aria-atomic": "true",
+					css: s,
+					children: St
+				}),
+				Oe ? /* @__PURE__ */ y(Pe, {
+					locale: _,
+					size: I,
+					labels: W,
+					...F,
+					disabled: P || F?.disabled,
+					onSend: gt,
+					acknowledged: Ct,
+					onDraftInteraction: _t
+				}) : null,
+				nt ? /* @__PURE__ */ y("p", {
+					role: "status",
+					"aria-atomic": "true",
+					"data-ui": `${x}-retry-error`,
+					css: Te,
+					children: nt
+				}) : null
+			]
+		})
+	});
+}
+V.displayName = "ChatThread";
+var Ie = Object.assign(V, { Composer: Fe });
+//#endregion
+export { Ie as t };