@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/chat-thread/chat-thread.js

@@ -0,0 +1,406 @@
+"use client";
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { ArrowDown, ArrowUp, FileText, Paperclip, RotateCw, SmilePlus, X } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./chat-thread.module.css";
+const COMPOSER_LABELS = {
+    send: "Send",
+    attach: "Attach files",
+    attachments: "Attachments",
+    removeFile: name => `Remove ${name}`,
+};
+const firstName = (name) => name.split(" ")[0];
+const THREAD_LABELS = {
+    ...COMPOSER_LABELS,
+    sending: "Sending",
+    sent: "Sent",
+    delivered: "Delivered",
+    read: "Read",
+    failed: "Not delivered",
+    retry: "Retry",
+    readBy: names => `Read by ${names.join(", ")}`,
+    typing: names => names.length === 1 ? `${firstName(names[0])} is typing` : names.length === 2 ? `${firstName(names[0])} and ${firstName(names[1])} are typing` : "Several people are typing",
+    newMessages: count => `${count} new ${count === 1 ? "message" : "messages"}`,
+    jumpToLatest: "Jump to latest",
+    unknownAuthor: "Unknown",
+    addReaction: "Add reaction",
+    reactions: "Reactions",
+    reactWith: emoji => `React with ${emoji}`,
+    reactionCount: (emoji, count, includesYou) => `${emoji} ${count}${includesYou ? ", including you" : ""}`,
+};
+/** A key passed as undefined keeps its default too. */
+const withDefaults = (defaults, given) => ({ ...defaults, ...Object.fromEntries(Object.entries(given ?? {}).filter(([, value]) => value !== undefined)) });
+/** "Today" and "Yesterday" in the thread's language, from Intl, with a capital first letter. */
+function relativeDay(locale, offset) {
+    const word = new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(offset, "day");
+    return word.charAt(0).toLocaleUpperCase(locale) + word.slice(1);
+}
+const { spring, duration, ease, blur } = motionTokens;
+const enter = [...ease.enter];
+const standard = [...ease.standard];
+const physical = (visualDuration, bounce) => {
+    const root = 2 * Math.PI / (visualDuration * 1.2);
+    return { type: "spring", stiffness: root * root, damping: 2 * (1 - bounce) * root, mass: 1 };
+};
+const SETTLE = physical(.44, 0), GROW = physical(spring.smooth.visualDuration, 0), POP = physical(.3, .22), ARRIVE = physical(.46, .12);
+const DEFAULT_REACTIONS = ["👍", "❤️", "😂", "🎉", "👀", "🙏"];
+const STICK_DISTANCE = 48, FAR_DISTANCE = 180;
+const subscribe = () => () => { };
+function useHydrated() {
+    return useSyncExternalStore(subscribe, () => true, () => false);
+}
+const toDate = (value) => value instanceof Date ? value : new Date(value);
+const dayKey = (date) => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+function dayLabel(date, locale, words) {
+    const today = new Date();
+    const start = (value) => new Date(value.getFullYear(), value.getMonth(), value.getDate()).getTime();
+    const days = Math.round((start(today) - start(date)) / 86400000);
+    if (days === 0)
+        return words.today;
+    if (days === 1)
+        return words.yesterday;
+    if (days > 1 && days < 7)
+        return date.toLocaleDateString(locale, { weekday: "long" });
+    return date.toLocaleDateString(locale, { weekday: "short", month: "short", day: "numeric", year: date.getFullYear() === today.getFullYear() ? undefined : "numeric" });
+}
+/** Puts `node` where `value` appears in a translated sentence, so a rolling count sits wherever the language puts the number. */
+function withCount(text, value, node) {
+    const digits = String(value), at = text.indexOf(digits);
+    return at < 0 ? text : _jsxs(_Fragment, { children: [text.slice(0, at), node, text.slice(at + digits.length)] });
+}
+export function formatBytes(bytes = 0) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 ** 2)
+        return `${Math.round(bytes / 1024)} KB`;
+    return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+}
+function initials(name) {
+    return name.split(/\s+/).filter(Boolean).slice(0, 2).map(part => part[0]?.toUpperCase()).join("");
+}
+function Avatar({ person, size }) {
+    return _jsx("span", { className: styles.avatar, style: { width: size, height: size, fontSize: size * .38 }, "aria-hidden": "true", children: person.avatar
+            // eslint-disable-next-line @next/next/no-img-element -- registry components stay framework agnostic
+            ? _jsx("img", { src: person.avatar, alt: "", width: size, height: size, loading: "lazy" })
+            : initials(person.name) });
+}
+/** A count that rolls up or down when it changes. */
+function Count({ value, reduced }) {
+    const [last, setLast] = useState({ value, direction: 1 });
+    if (last.value !== value)
+        setLast({ value, direction: value > last.value ? 1 : -1 });
+    const direction = last.value !== value ? (value > last.value ? 1 : -1) : last.direction;
+    return _jsx("span", { className: styles.countRoll, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", custom: direction, children: _jsx(motion.span, { custom: direction, variants: { in: (dir) => ({ opacity: 0, y: reduced ? 0 : dir * 8 }), rest: { opacity: 1, y: 0 }, out: (dir) => ({ opacity: 0, y: reduced ? 0 : dir * -8 }) }, initial: "in", animate: "rest", exit: "out", transition: reduced ? { duration: duration.fast } : spring.snappy, children: value }, value) }) });
+}
+/** Three dots that breathe in sequence. Reduced motion shows them still. */
+function TypingDots() {
+    return _jsxs("span", { className: styles.dots, "aria-hidden": "true", children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {})] });
+}
+function useAutoHeight(mirror, maxHeight, reduced) {
+    const height = useMotionValue("auto");
+    const measured = useRef(false);
+    useLayoutEffect(() => {
+        const node = mirror.current;
+        if (!node)
+            return;
+        const fit = () => {
+            const target = Math.min(maxHeight, node.offsetHeight);
+            if (!measured.current || reduced) {
+                height.jump(target);
+                measured.current = true;
+                return;
+            }
+            animate(height, target, GROW);
+        };
+        fit();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(fit);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [height, maxHeight, mirror, reduced]);
+    return height;
+}
+/** The message box on its own: autosizing text, attachments by button, paste, or drop, and a send button that morphs when there is something to send. */
+export const ChatComposer = forwardRef(function ChatComposer({ onSend, placeholder = "Message", allowAttachments = true, accept, disabled, labels, className }, ref) {
+    const t = withDefaults(COMPOSER_LABELS, labels);
+    const reduced = !!useReducedMotion();
+    const [text, setText] = useState("");
+    const [files, setFiles] = useState([]);
+    const [dragging, setDragging] = useState(false);
+    const [sent, setSent] = useState(0);
+    const areaRef = useRef(null);
+    const pickerRef = useRef(null);
+    const mirrorRef = useRef(null);
+    const height = useAutoHeight(mirrorRef, 6 * 22 + 18, reduced);
+    const ready = !disabled && (text.trim().length > 0 || files.length > 0);
+    const counter = useRef(0);
+    useImperativeHandle(ref, () => ({ focus: () => areaRef.current?.focus() }), []);
+    const filesRef = useRef(files);
+    useEffect(() => { filesRef.current = files; }, [files]);
+    useEffect(() => () => filesRef.current.forEach(entry => entry.url && URL.revokeObjectURL(entry.url)), []);
+    const add = (list) => {
+        if (!allowAttachments || !list)
+            return;
+        const next = Array.from(list).slice(0, 10).map(file => ({ id: `file-${++counter.current}`, file, url: file.type.startsWith("image/") ? URL.createObjectURL(file) : undefined }));
+        if (next.length)
+            setFiles(current => [...current, ...next]);
+    };
+    const remove = (id) => setFiles(current => current.filter(entry => {
+        if (entry.id === id && entry.url)
+            URL.revokeObjectURL(entry.url);
+        return entry.id !== id;
+    }));
+    const send = () => {
+        if (!ready)
+            return;
+        onSend({ text: text.trim(), files: files.map(entry => entry.file) });
+        files.forEach(entry => entry.url && URL.revokeObjectURL(entry.url));
+        setFiles([]);
+        setText("");
+        setSent(count => count + 1);
+        areaRef.current?.focus();
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+            event.preventDefault();
+            send();
+        }
+    };
+    const onPaste = (event) => {
+        if (!allowAttachments || !event.clipboardData.files.length)
+            return;
+        event.preventDefault();
+        add(event.clipboardData.files);
+    };
+    const onDrop = (event) => {
+        if (!allowAttachments)
+            return;
+        event.preventDefault();
+        setDragging(false);
+        add(event.dataTransfer.files);
+    };
+    const tray = reduced ? { opacity: 0 } : { opacity: 0, scale: .9, filter: `blur(${blur.subtle}px)` };
+    return _jsxs("div", { className: [styles.composer, className].filter(Boolean).join(" "), "data-dragging": dragging || undefined, onDragOver: event => { if (allowAttachments && event.dataTransfer.types.includes("Files")) {
+            event.preventDefault();
+            setDragging(true);
+        } }, onDragLeave: event => { if (!event.currentTarget.contains(event.relatedTarget))
+            setDragging(false); }, onDrop: onDrop, children: [_jsx(AnimatePresence, { initial: false, children: files.length > 0 && _jsx(motion.div, { className: styles.trayClip, initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: reduced ? { duration: 0 } : { height: GROW, opacity: { duration: duration.fast } }, children: _jsx("ul", { className: styles.tray, "aria-label": t.attachments, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: files.map(entry => _jsxs(motion.li, { className: styles.pending, layout: !reduced, initial: tray, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { ...tray, transition: { duration: duration.exit, ease: standard } }, transition: POP, children: [entry.url
+                                        // eslint-disable-next-line @next/next/no-img-element -- local object URL preview
+                                        ? _jsx("img", { className: styles.pendingImage, src: entry.url, alt: "" })
+                                        : _jsxs("span", { className: styles.pendingFile, children: [_jsx(FileText, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("span", { className: styles.pendingName, children: entry.file.name }), _jsx("span", { className: styles.pendingSize, children: formatBytes(entry.file.size) })] }), _jsx("button", { type: "button", className: styles.remove, "aria-label": t.removeFile(entry.file.name), onClick: () => remove(entry.id), children: _jsx(X, { size: 12, strokeWidth: 2.25 }) })] }, entry.id)) }) }) }, "tray") }), _jsxs("div", { className: styles.inputRow, children: [allowAttachments && _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: styles.attach, "aria-label": t.attach, disabled: disabled, onClick: () => pickerRef.current?.click(), children: _jsx(Paperclip, { size: 18, strokeWidth: 1.75 }) }), _jsx("input", { ref: pickerRef, type: "file", multiple: true, accept: accept, hidden: true, onChange: event => { add(event.target.files); event.target.value = ""; } })] }), _jsxs("div", { className: styles.box, children: [_jsxs(motion.div, { className: styles.field, style: { height }, children: [_jsxs("div", { ref: mirrorRef, className: styles.mirror, "aria-hidden": "true", children: [text, "\u200b"] }), _jsx("textarea", { ref: areaRef, className: styles.textarea, value: text, rows: 1, placeholder: placeholder, disabled: disabled, "aria-label": placeholder, onChange: event => setText(event.target.value), onKeyDown: onKeyDown, onPaste: onPaste })] }), _jsx("button", { type: "button", className: styles.send, "data-ready": ready || undefined, "aria-label": t.send, "aria-disabled": !ready, onClick: send, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.span, { className: styles.sendIcon, initial: reduced ? { opacity: 0 } : { opacity: 0, y: 14 }, animate: { opacity: 1, y: 0 }, exit: reduced ? { opacity: 0 } : { opacity: 0, y: -18, transition: { duration: duration.fast, ease: standard } }, transition: reduced ? { duration: duration.fast } : spring.snappy, children: _jsx(ArrowUp, { size: 16, strokeWidth: 2.25 }) }, sent) }) })] })] })] });
+});
+/**
+ * A chat or support thread: grouped messages with day separators, reactions, read receipts that glide to the latest read message,
+ * a typing indicator, and a composer. The list stays pinned to the newest message and offers a pill when new messages land out of view.
+ */
+export const ChatThread = forwardRef(function ChatThread({ participants, currentUserId, messages: messagesProp, defaultMessages, typing = [], readBy, onSend, onReact, onRetry, reactions = DEFAULT_REACTIONS, placeholder = "Message", composer = true, allowAttachments = true, accept, groupWindow = 5 * 60000, locale = "en-US", label = "Conversation", labels, className, }, ref) {
+    const t = useMemo(() => withDefaults({ ...THREAD_LABELS, today: relativeDay(locale, 0), yesterday: relativeDay(locale, -1) }, labels), [labels, locale]);
+    const reduced = !!useReducedMotion();
+    const hydrated = useHydrated();
+    const uid = useId();
+    const [inner, setInner] = useState(defaultMessages ?? []);
+    const messages = messagesProp ?? inner;
+    const controlled = messagesProp !== undefined;
+    const people = useMemo(() => new Map(participants.map(entry => [entry.id, entry])), [participants]);
+    const composerRef = useRef(null);
+    const rows = useMemo(() => {
+        const out = [];
+        let lastDay = "";
+        messages.forEach((message, index) => {
+            const date = toDate(message.createdAt);
+            const key = dayKey(date);
+            if (key !== lastDay) {
+                out.push({ type: "day", key: `day-${key}`, label: hydrated ? dayLabel(date, locale, t) : "" });
+                lastDay = key;
+            }
+            const joins = (other) => !!other && other.authorId === message.authorId && dayKey(toDate(other.createdAt)) === key && Math.abs(toDate(other.createdAt).getTime() - date.getTime()) <= groupWindow;
+            out.push({
+                type: "message", key: message.id, message, index,
+                author: people.get(message.authorId) ?? { id: message.authorId, name: t.unknownAuthor },
+                mine: message.authorId === currentUserId,
+                first: !joins(messages[index - 1]), last: !joins(messages[index + 1]),
+            });
+        });
+        return out;
+    }, [currentUserId, groupWindow, hydrated, locale, messages, people, t]);
+    const receipts = useMemo(() => {
+        const map = new Map();
+        for (const [personId, messageId] of Object.entries(readBy ?? {})) {
+            const who = people.get(personId);
+            const read = messages.find(message => message.id === messageId);
+            // A reader's avatar under their own message says nothing new, so it stays hidden until they read past it.
+            if (!who || personId === currentUserId || !read || read.authorId === personId)
+                continue;
+            map.set(messageId, [...(map.get(messageId) ?? []), who]);
+        }
+        return map;
+    }, [currentUserId, messages, people, readBy]);
+    const readIndex = useMemo(() => {
+        let furthest = -1;
+        receipts.forEach((_, messageId) => { furthest = Math.max(furthest, messages.findIndex(message => message.id === messageId)); });
+        return furthest;
+    }, [messages, receipts]);
+    const lastMine = useMemo(() => { for (let index = messages.length - 1; index >= 0; index--)
+        if (messages[index].authorId === currentUserId)
+            return index; return -1; }, [currentUserId, messages]);
+    const time = useMemo(() => new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit" }), [locale]);
+    /* Pinning. While the reader is at the bottom, every growth of the content keeps the newest message in view:
+       the scroll jumps to the end before paint and the content springs up from where it was, so nothing snaps. */
+    const scrollRef = useRef(null);
+    const contentRef = useRef(null);
+    const y = useMotionValue(0);
+    const stick = useRef(true);
+    const lastHeight = useRef(0);
+    const reducedRef = useRef(reduced);
+    useEffect(() => { reducedRef.current = reduced; }, [reduced]);
+    const [atBottom, setAtBottom] = useState(true);
+    const [far, setFar] = useState(false);
+    const [seen, setSeen] = useState(() => messages.length);
+    useLayoutEffect(() => {
+        const scroller = scrollRef.current, content = contentRef.current;
+        if (!scroller || !content)
+            return;
+        lastHeight.current = content.offsetHeight;
+        scroller.scrollTop = scroller.scrollHeight;
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => {
+            const height = content.offsetHeight, delta = height - lastHeight.current;
+            lastHeight.current = height;
+            if (!stick.current)
+                return;
+            scroller.scrollTop = scroller.scrollHeight;
+            if (delta > 0 && delta < scroller.clientHeight && !reducedRef.current) {
+                y.jump(y.get() + delta);
+                animate(y, 0, SETTLE);
+            }
+        });
+        observer.observe(content);
+        return () => observer.disconnect();
+    }, [y]);
+    // Your own message always brings the thread back to the bottom.
+    const known = useRef(new Set(messages.map(message => message.id)));
+    useLayoutEffect(() => {
+        const fresh = messages.filter(message => !known.current.has(message.id));
+        fresh.forEach(message => known.current.add(message.id));
+        if (fresh.some(message => message.authorId === currentUserId))
+            stick.current = true;
+    }, [currentUserId, messages]);
+    const onScroll = () => {
+        const scroller = scrollRef.current;
+        if (!scroller)
+            return;
+        const distance = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
+        stick.current = distance < STICK_DISTANCE;
+        setAtBottom(stick.current);
+        setFar(distance > FAR_DISTANCE);
+        if (stick.current)
+            setSeen(messages.length);
+    };
+    const scrollToBottom = useCallback((smooth = true) => {
+        const scroller = scrollRef.current;
+        if (!scroller)
+            return;
+        stick.current = true;
+        scroller.scrollTo({ top: scroller.scrollHeight, behavior: smooth && !reducedRef.current ? "smooth" : "auto" });
+    }, []);
+    useImperativeHandle(ref, () => ({ scrollToBottom, focusComposer: () => composerRef.current?.focus() }), [scrollToBottom]);
+    const unread = atBottom ? 0 : messages.slice(seen).filter(message => message.authorId !== currentUserId).length;
+    const pill = !atBottom && (unread > 0 || far);
+    /* Reactions and the picker. */
+    const [picker, setPicker] = useState(null);
+    const react = (messageId, emoji) => {
+        setPicker(null);
+        onReact?.(messageId, emoji);
+        if (controlled)
+            return;
+        setInner(current => current.map(message => {
+            if (message.id !== messageId)
+                return message;
+            const list = [...(message.reactions ?? [])];
+            const at = list.findIndex(entry => entry.emoji === emoji);
+            const found = list[at];
+            if (!found)
+                list.push({ emoji, count: 1, mine: true });
+            else if (found.mine)
+                list[at] = { ...found, count: found.count - 1, mine: false };
+            else
+                list[at] = { ...found, count: found.count + 1, mine: true };
+            return { ...message, reactions: list.filter(entry => entry.count > 0) };
+        }));
+    };
+    const counter = useRef(0);
+    const send = (draft) => {
+        stick.current = true;
+        const result = onSend?.(draft);
+        if (controlled)
+            return result;
+        const attachments = draft.files.map((file, index) => ({
+            id: `local-file-${++counter.current}-${index}`, name: file.name, size: file.size,
+            kind: file.type.startsWith("image/") ? "image" : "file",
+            url: URL.createObjectURL(file),
+        }));
+        setInner(current => [...current, { id: `local-${Date.now()}-${++counter.current}`, authorId: currentUserId, text: draft.text || undefined, attachments, createdAt: new Date(), status: "sent" }]);
+    };
+    const typers = typing.map(id => people.get(id)).filter((entry) => !!entry && entry.id !== currentUserId);
+    const typingLabel = typers.length ? t.typing(typers.map(entry => entry.name)) : "";
+    const arrive = (mine) => reduced ? { opacity: 0 } : { opacity: 0, scale: .92, y: 14, x: mine ? 8 : -8, filter: `blur(${blur.subtle}px)` };
+    return _jsxs("div", { className: [styles.root, className].filter(Boolean).join(" "), children: [_jsxs("div", { className: styles.viewport, children: [_jsx("div", { ref: scrollRef, className: styles.scroller, onScroll: onScroll, "data-chat-scroller": "", children: _jsx("div", { className: styles.track, children: _jsx(motion.div, { ref: contentRef, className: styles.content, style: { y }, children: _jsx("ol", { className: styles.list, role: "log", "aria-label": label, "aria-live": "polite", "aria-relevant": "additions", children: _jsxs(AnimatePresence, { initial: false, children: [rows.map(row => {
+                                                if (row.type === "day")
+                                                    return _jsx("li", { className: styles.day, children: _jsx("span", { suppressHydrationWarning: true, children: row.label }) }, row.key);
+                                                const { message, author, mine, first, last, index } = row;
+                                                const date = toDate(message.createdAt);
+                                                const seenBy = receipts.get(message.id) ?? [];
+                                                const showStatus = index === lastMine && mine;
+                                                const status = message.status === "failed" ? "failed" : message.status === "sending" ? "sending" : readIndex >= index ? "read" : message.status ?? "sent";
+                                                const images = message.attachments?.filter(entry => entry.kind === "image" && entry.url) ?? [];
+                                                const files = message.attachments?.filter(entry => entry.kind !== "image" || !entry.url) ?? [];
+                                                return _jsxs(motion.li, { className: styles.row, "data-mine": mine || undefined, "data-first": first || undefined, "data-last": last || undefined, "data-failed": message.status === "failed" || undefined, initial: arrive(mine), animate: { opacity: 1, scale: 1, y: 0, x: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: duration.exit } }, transition: reduced ? { duration: duration.fast } : { ...ARRIVE, opacity: { duration: duration.standard, ease: enter }, filter: { duration: duration.standard, ease: enter } }, style: { transformOrigin: mine ? "100% 100%" : "0 100%" }, children: [!mine && _jsx("div", { className: styles.gutter }), _jsxs("div", { className: styles.stack, children: [first && _jsxs("p", { className: styles.meta, children: [!mine && _jsx("span", { className: styles.author, children: author.name }), _jsx("time", { dateTime: date.toISOString(), suppressHydrationWarning: true, children: hydrated ? time.format(date) : "" })] }), _jsxs("div", { className: styles.line, children: [!mine && last && _jsx("span", { className: styles.face, children: _jsx(Avatar, { person: author, size: 28 }) }), _jsxs("div", { className: styles.parts, children: [images.length > 0 && _jsx("div", { className: styles.gallery, "data-count": Math.min(images.length, 4), children: images.slice(0, 4).map((image, at) => _jsxs("a", { className: styles.image, href: image.url, target: "_blank", rel: "noreferrer", style: images.length === 1 && image.width && image.height ? { aspectRatio: `${image.width} / ${image.height}` } : undefined, children: [_jsx("img", { src: image.url, alt: image.alt ?? image.name, loading: "lazy" }), at === 3 && images.length > 4 && _jsxs("span", { className: styles.more, children: ["+", images.length - 4] })] }, image.id)) }), files.map(file => _jsxs("a", { className: styles.file, href: file.url, download: file.name, target: "_blank", rel: "noreferrer", children: [_jsx(FileText, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" }), _jsxs("span", { className: styles.fileText, children: [_jsx("span", { className: styles.fileName, children: file.name }), file.size !== undefined && _jsx("span", { className: styles.fileSize, children: formatBytes(file.size) })] })] }, file.id)), message.text && _jsx("div", { className: styles.bubble, title: hydrated ? date.toLocaleString(locale, { dateStyle: "medium", timeStyle: "short" }) : undefined, children: message.text })] }), _jsx(ReactionPicker, { open: picker === message.id, mine: mine, reactions: reactions, reduced: reduced, labels: t, id: `${uid}-picker-${message.id}`, onToggle: () => setPicker(current => current === message.id ? null : message.id), onClose: () => setPicker(null), onPick: emoji => react(message.id, emoji) })] }), _jsx(AnimatePresence, { initial: false, children: !!message.reactions?.length && _jsx(motion.div, { className: styles.reactionClip, initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: reduced ? { duration: 0 } : { height: GROW, opacity: { duration: duration.fast } }, children: _jsx("ul", { className: styles.reactions, "aria-label": t.reactions, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: message.reactions.map(reaction => _jsx(motion.li, { layout: !reduced, initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: reduced ? { opacity: 0 } : { opacity: 0, scale: .6 }, transition: POP, children: _jsxs("button", { type: "button", className: styles.reaction, "aria-pressed": !!reaction.mine, "aria-label": t.reactionCount(reaction.emoji, reaction.count, !!reaction.mine), onClick: () => react(message.id, reaction.emoji), children: [_jsx("span", { "aria-hidden": "true", children: reaction.emoji }), _jsx(Count, { value: reaction.count, reduced: reduced })] }) }, reaction.emoji)) }) }) }, "reactions") }), (showStatus || seenBy.length > 0) && _jsxs("div", { className: styles.receipts, children: [showStatus && _jsx("span", { className: styles.status, "data-status": status, children: status === "failed" ? _jsxs(_Fragment, { children: [t.failed, onRetry && _jsxs("button", { type: "button", className: styles.retry, onClick: () => onRetry(message.id), children: [_jsx(RotateCw, { size: 12, strokeWidth: 2, "aria-hidden": "true" }), t.retry] })] })
+                                                                                : t[status] }), seenBy.length > 0 && _jsx("span", { className: styles.readers, "aria-label": t.readBy(seenBy.map(entry => entry.name)), children: seenBy.map(entry => _jsx(motion.span, { layoutId: reduced ? undefined : `${uid}-receipt-${entry.id}`, className: styles.reader, transition: SETTLE, children: _jsx(Avatar, { person: entry, size: 16 }) }, entry.id)) })] })] })] }, row.key);
+                                            }), typers.length > 0 && _jsxs(motion.li, { className: styles.row, "data-first": true, "data-last": true, "aria-hidden": "true", initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .9, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: reduced ? { opacity: 0 } : { opacity: 0, scale: .9, transition: { duration: duration.exit, ease: standard } }, transition: reduced ? { duration: duration.fast } : spring.snappy, style: { transformOrigin: "0 100%" }, children: [_jsx("div", { className: styles.gutter }), _jsx("div", { className: styles.stack, children: _jsxs("div", { className: styles.line, children: [_jsx("span", { className: styles.face, children: _jsx(Avatar, { person: typers[0], size: 28 }) }), _jsx("div", { className: `${styles.bubble} ${styles.typing}`, children: _jsx(TypingDots, {}) })] }) })] }, "typing")] }) }) }) }) }), _jsx("span", { className: styles.srOnly, role: "status", children: typingLabel }), _jsx(AnimatePresence, { children: pill && _jsxs(motion.button, { type: "button", className: styles.pill, onClick: () => scrollToBottom(), layout: !reduced, style: { borderRadius: 999 }, initial: reduced ? { opacity: 0 } : { opacity: 0, y: 12, scale: .94 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: reduced ? { opacity: 0 } : { opacity: 0, y: 12, scale: .94, transition: { duration: duration.exit, ease: standard } }, transition: reduced ? { duration: duration.fast } : { ...spring.morph, opacity: { duration: duration.fast } }, children: [_jsx(motion.span, { className: styles.pillIcon, layout: reduced ? false : "position", transition: spring.morph, children: _jsx(ArrowDown, { size: 14, strokeWidth: 2, "aria-hidden": "true" }) }), _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.span, { layout: reduced ? false : "position", initial: { opacity: 0, filter: `blur(${blur.subtle}px)` }, animate: { opacity: 1, filter: "blur(0px)" }, exit: { opacity: 0, filter: `blur(${blur.subtle}px)` }, transition: { duration: duration.fast }, children: unread > 0 ? withCount(t.newMessages(unread), unread, _jsx(Count, { value: unread, reduced: reduced })) : t.jumpToLatest }, unread > 0 ? "new" : "latest") })] }, "pill") })] }), composer && _jsx(ChatComposer, { ref: composerRef, onSend: send, placeholder: placeholder, allowAttachments: allowAttachments, accept: accept, labels: t })] });
+});
+function ReactionPicker({ open, mine, reactions, reduced, labels, id, onToggle, onClose, onPick }) {
+    const wrapRef = useRef(null);
+    const triggerRef = useRef(null);
+    const [active, setActive] = useState(0);
+    const [below, setBelow] = useState(false);
+    /** The picker opens above the bubble unless that would run past the top of the thread. */
+    const toggle = () => {
+        const wrap = wrapRef.current, scroller = wrap?.closest("[data-chat-scroller]");
+        if (!open && wrap && scroller)
+            setBelow(wrap.getBoundingClientRect().top - scroller.getBoundingClientRect().top < 56);
+        onToggle();
+    };
+    const closeRef = useRef(onClose);
+    useEffect(() => { closeRef.current = onClose; }, [onClose]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const down = (event) => { if (!wrapRef.current?.contains(event.target))
+            closeRef.current(); };
+        document.addEventListener("pointerdown", down);
+        const frame = requestAnimationFrame(() => wrapRef.current?.querySelector("[data-emoji-index='0']")?.focus({ preventScroll: true }));
+        return () => { document.removeEventListener("pointerdown", down); cancelAnimationFrame(frame); };
+    }, [open]);
+    const onKeyDown = (event) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            onClose();
+            triggerRef.current?.focus();
+            return;
+        }
+        const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+        if (!step)
+            return;
+        event.preventDefault();
+        const next = (active + step + reactions.length) % reactions.length;
+        setActive(next);
+        wrapRef.current?.querySelector(`[data-emoji-index='${next}']`)?.focus();
+    };
+    return _jsxs("div", { ref: wrapRef, className: styles.pickerWrap, "data-open": open || undefined, "data-below": below || undefined, children: [_jsx("button", { ref: triggerRef, type: "button", className: styles.reactButton, "aria-label": labels.addReaction, "aria-expanded": open, "aria-controls": open ? id : undefined, onClick: toggle, children: _jsx(SmilePlus, { size: 16, strokeWidth: 1.75 }) }), _jsx(AnimatePresence, { children: open && _jsx(motion.div, { id: id, role: "group", "aria-label": labels.reactions, className: styles.picker, "data-mine": mine || undefined, onKeyDown: onKeyDown, initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .85, y: below ? -6 : 6 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: reduced ? { opacity: 0 } : { opacity: 0, scale: .9, y: below ? -4 : 4, transition: { duration: duration.exit, ease: standard } }, transition: reduced ? { duration: duration.fast } : POP, children: reactions.map((emoji, index) => _jsx(motion.button, { type: "button", className: styles.emoji, "aria-label": labels.reactWith(emoji), "data-emoji-index": index, tabIndex: index === active ? 0 : -1, initial: reduced ? false : { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, transition: { ...POP, delay: reduced ? 0 : index * .025 }, onFocus: () => setActive(index), onClick: () => onPick(emoji), children: emoji }, emoji)) }) })] });
+}
+export default ChatThread;