{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "chat-thread", "type": "registry:ui", "title": "Chat thread", "description": "A chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.", "categories": [ "data" ], "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "https://mcp.xzero.co.uk/r/xzero-motion-tokens.json" ], "files": [ { "path": "registry/components/chat-thread/chat-thread.tsx", "type": "registry:component", "target": "@components/xzero/chat-thread/chat-thread.tsx", "content": "\"use client\";\n\nimport { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from \"react\";\nimport type { ClipboardEvent as ReactClipboardEvent, DragEvent as ReactDragEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from \"react\";\nimport { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from \"motion/react\";\nimport type { Transition } from \"motion/react\";\nimport { ArrowDown, ArrowUp, FileText, Paperclip, RotateCw, SmilePlus, X } from \"lucide-react\";\nimport { motionTokens } from \"../lib/motion-tokens\";\nimport styles from \"./chat-thread.module.css\";\n\nexport interface ChatParticipant {\n id: string;\n name: string;\n /** Portrait URL. Initials show when it is missing. */\n avatar?: string;\n}\n\nexport interface ChatAttachment {\n id: string;\n name: string;\n kind: \"image\" | \"file\";\n url?: string;\n /** Bytes. */\n size?: number;\n /** Intrinsic image size, used to reserve space before the image loads. */\n width?: number;\n height?: number;\n alt?: string;\n}\n\nexport interface ChatReaction {\n emoji: string;\n count: number;\n /** The current user reacted with this emoji. */\n mine?: boolean;\n}\n\nexport type ChatMessageStatus = \"sending\" | \"sent\" | \"delivered\" | \"read\" | \"failed\";\n\nexport interface ChatMessage {\n id: string;\n authorId: string;\n text?: string;\n createdAt: Date | string | number;\n attachments?: ChatAttachment[];\n reactions?: ChatReaction[];\n /** Delivery state of the current user's own messages. */\n status?: ChatMessageStatus;\n}\n\nexport interface ChatDraft {\n text: string;\n files: File[];\n}\n\n/** Words the composer shows or announces. Each has an English default. */\nexport interface ChatComposerLabels {\n /** Accessible name of the send button. */\n send?: string;\n /** Accessible name of the attach button. */\n attach?: string;\n /** Accessible name of the list of files waiting to send. */\n attachments?: string;\n /** Accessible name of the button that takes a file back out. */\n removeFile?: (name: string) => string;\n}\n\n/** Every word the thread shows or announces. Each has an English default; words with a count or names are functions, so an app can apply its own plural rules. */\nexport interface ChatThreadLabels extends ChatComposerLabels {\n sending?: string;\n sent?: string;\n delivered?: string;\n read?: string;\n failed?: string;\n retry?: string;\n /** Accessible name of the read receipts under a message. */\n readBy?: (names: string[]) => string;\n /** Day separators for the last two days. Older days are formatted by `locale`. Defaults come from Intl for `locale`. */\n today?: string;\n yesterday?: string;\n /** Screen reader announcement of who is typing. */\n typing?: (names: string[]) => string;\n /** The pill when new messages land out of view. The count inside it rolls. */\n newMessages?: (count: number) => string;\n jumpToLatest?: string;\n /** Name shown for a message whose author is not in `participants`. */\n unknownAuthor?: string;\n addReaction?: string;\n /** Accessible name of the reaction picker and of the reactions under a message. */\n reactions?: string;\n /** Accessible name of an emoji in the picker. */\n reactWith?: (emoji: string) => string;\n /** Accessible name of a reaction under a message. */\n reactionCount?: (emoji: string, count: number, includesYou: boolean) => string;\n}\n\nconst COMPOSER_LABELS: Required = {\n send: \"Send\",\n attach: \"Attach files\",\n attachments: \"Attachments\",\n removeFile: name => `Remove ${name}`,\n};\n\nconst firstName = (name: string) => name.split(\" \")[0];\nconst THREAD_LABELS: Omit, \"today\" | \"yesterday\"> = {\n ...COMPOSER_LABELS,\n sending: \"Sending\",\n sent: \"Sent\",\n delivered: \"Delivered\",\n read: \"Read\",\n failed: \"Not delivered\",\n retry: \"Retry\",\n readBy: names => `Read by ${names.join(\", \")}`,\n 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\",\n newMessages: count => `${count} new ${count === 1 ? \"message\" : \"messages\"}`,\n jumpToLatest: \"Jump to latest\",\n unknownAuthor: \"Unknown\",\n addReaction: \"Add reaction\",\n reactions: \"Reactions\",\n reactWith: emoji => `React with ${emoji}`,\n reactionCount: (emoji, count, includesYou) => `${emoji} ${count}${includesYou ? \", including you\" : \"\"}`,\n};\n\n/** A key passed as undefined keeps its default too. */\nconst withDefaults = (defaults: D, given?: T): D =>\n ({ ...defaults, ...Object.fromEntries(Object.entries(given ?? {}).filter(([, value]) => value !== undefined)) });\n\n/** \"Today\" and \"Yesterday\" in the thread's language, from Intl, with a capital first letter. */\nfunction relativeDay(locale: string, offset: 0 | -1) {\n const word = new Intl.RelativeTimeFormat(locale, { numeric: \"auto\" }).format(offset, \"day\");\n return word.charAt(0).toLocaleUpperCase(locale) + word.slice(1);\n}\n\nexport interface ChatThreadHandle {\n scrollToBottom: (smooth?: boolean) => void;\n focusComposer: () => void;\n}\n\nexport interface ChatThreadProps {\n participants: ChatParticipant[];\n currentUserId: string;\n /** Controlled messages, oldest first. Leave it out to let the thread keep its own list. */\n messages?: ChatMessage[];\n defaultMessages?: ChatMessage[];\n /** Participant ids currently typing. */\n typing?: string[];\n /** The last message each participant has read, by participant id. Their avatar sits under that message and glides as it moves. */\n readBy?: Record;\n /** Called with the composer's text and files. Uncontrolled threads also append the message themselves. */\n onSend?: (draft: ChatDraft) => void | Promise;\n onReact?: (messageId: string, emoji: string) => void;\n onRetry?: (messageId: string) => void;\n /** Emoji offered by the reaction picker. */\n reactions?: string[];\n placeholder?: string;\n /** Show the composer. Defaults to true. */\n composer?: boolean;\n allowAttachments?: boolean;\n /** File types the attach button offers, as for ``. */\n accept?: string;\n /** Messages from one person closer together than this, in ms, share a group. Defaults to five minutes. */\n groupWindow?: number;\n locale?: string;\n /** Accessible name of the message log. */\n label?: string;\n /** Words for localization. Leave out any key to keep its English default. */\n labels?: ChatThreadLabels;\n className?: string;\n}\n\ntype Row =\n | { type: \"day\"; key: string; label: string }\n | { type: \"message\"; key: string; message: ChatMessage; author: ChatParticipant; mine: boolean; first: boolean; last: boolean; index: number };\n\nconst { spring, duration, ease, blur } = motionTokens;\nconst enter = [...ease.enter] as [number, number, number, number];\nconst standard = [...ease.standard] as [number, number, number, number];\nconst physical = (visualDuration: number, bounce: number): Transition => {\n const root = 2 * Math.PI / (visualDuration * 1.2);\n return { type: \"spring\", stiffness: root * root, damping: 2 * (1 - bounce) * root, mass: 1 };\n};\nconst SETTLE = physical(.44, 0), GROW = physical(spring.smooth.visualDuration, 0), POP = physical(.3, 0), ARRIVE = physical(.46, 0);\nconst DEFAULT_REACTIONS = [\"👍\", \"❤️\", \"😂\", \"🎉\", \"👀\", \"🙏\"];\nconst STICK_DISTANCE = 48, FAR_DISTANCE = 180;\n\nconst subscribe = () => () => {};\nfunction useHydrated() {\n return useSyncExternalStore(subscribe, () => true, () => false);\n}\n\nconst toDate = (value: ChatMessage[\"createdAt\"]) => value instanceof Date ? value : new Date(value);\nconst dayKey = (date: Date) => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;\n\nfunction dayLabel(date: Date, locale: string, words: { today: string; yesterday: string }) {\n const today = new Date();\n const start = (value: Date) => new Date(value.getFullYear(), value.getMonth(), value.getDate()).getTime();\n const days = Math.round((start(today) - start(date)) / 86_400_000);\n if (days === 0) return words.today;\n if (days === 1) return words.yesterday;\n if (days > 1 && days < 7) return date.toLocaleDateString(locale, { weekday: \"long\" });\n return date.toLocaleDateString(locale, { weekday: \"short\", month: \"short\", day: \"numeric\", year: date.getFullYear() === today.getFullYear() ? undefined : \"numeric\" });\n}\n\n/** Puts `node` where `value` appears in a translated sentence, so a rolling count sits wherever the language puts the number. */\nfunction withCount(text: string, value: number, node: ReactNode) {\n const digits = String(value), at = text.indexOf(digits);\n return at < 0 ? text : <>{text.slice(0, at)}{node}{text.slice(at + digits.length)};\n}\n\nexport function formatBytes(bytes = 0) {\n if (bytes < 1024) return `${bytes} B`;\n if (bytes < 1024 ** 2) return `${Math.round(bytes / 1024)} KB`;\n return `${(bytes / 1024 ** 2).toFixed(1)} MB`;\n}\n\nfunction initials(name: string) {\n return name.split(/\\s+/).filter(Boolean).slice(0, 2).map(part => part[0]?.toUpperCase()).join(\"\");\n}\n\nfunction Avatar({ person, size }: { person: ChatParticipant; size: number }) {\n return \n {person.avatar\n // eslint-disable-next-line @next/next/no-img-element -- registry components stay framework agnostic\n ? \"\"\n : initials(person.name)}\n ;\n}\n\n/** A count that rolls up or down when it changes. */\nfunction Count({ value, reduced }: { value: number; reduced: boolean }) {\n const [last, setLast] = useState({ value, direction: 1 });\n if (last.value !== value) setLast({ value, direction: value > last.value ? 1 : -1 });\n const direction = last.value !== value ? (value > last.value ? 1 : -1) : last.direction;\n return \n \n ({ opacity: 0, y: reduced ? 0 : dir * 8 }), rest: { opacity: 1, y: 0 }, out: (dir: number) => ({ opacity: 0, y: reduced ? 0 : dir * -8 }) }}\n initial=\"in\" animate=\"rest\" exit=\"out\" transition={reduced ? { duration: duration.fast } : spring.snappy}>{value}\n \n ;\n}\n\n/** Three dots that breathe in sequence. Reduced motion shows them still. */\nfunction TypingDots() {\n return ;\n}\n\nfunction useAutoHeight(mirror: RefObject, maxHeight: number, reduced: boolean) {\n const height = useMotionValue(\"auto\");\n const measured = useRef(false);\n useLayoutEffect(() => {\n const node = mirror.current;\n if (!node) return;\n const fit = () => {\n const target = Math.min(maxHeight, node.offsetHeight);\n if (!measured.current || reduced) { height.jump(target); measured.current = true; return; }\n animate(height, target, GROW);\n };\n fit();\n if (typeof ResizeObserver === \"undefined\") return;\n const observer = new ResizeObserver(fit);\n observer.observe(node);\n return () => observer.disconnect();\n }, [height, maxHeight, mirror, reduced]);\n return height;\n}\n\ntype Pending = { id: string; file: File; url?: string };\n\nexport interface ChatComposerProps {\n onSend: (draft: ChatDraft) => void;\n placeholder?: string;\n allowAttachments?: boolean;\n accept?: string;\n disabled?: boolean;\n /** Words for localization. Leave out any key to keep its English default. */\n labels?: ChatComposerLabels;\n className?: string;\n}\n\nexport interface ChatComposerHandle { focus: () => void }\n\n/** 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. */\nexport const ChatComposer = forwardRef(function ChatComposer({ onSend, placeholder = \"Message\", allowAttachments = true, accept, disabled, labels, className }, ref) {\n const t = withDefaults(COMPOSER_LABELS, labels);\n const reduced = !!useReducedMotion();\n const [text, setText] = useState(\"\");\n const [files, setFiles] = useState([]);\n const [dragging, setDragging] = useState(false);\n const [sent, setSent] = useState(0);\n const areaRef = useRef(null);\n const pickerRef = useRef(null);\n const mirrorRef = useRef(null);\n const height = useAutoHeight(mirrorRef, 6 * 22 + 18, reduced);\n const ready = !disabled && (text.trim().length > 0 || files.length > 0);\n const counter = useRef(0);\n\n useImperativeHandle(ref, () => ({ focus: () => areaRef.current?.focus() }), []);\n\n const filesRef = useRef(files);\n useEffect(() => { filesRef.current = files; }, [files]);\n useEffect(() => () => filesRef.current.forEach(entry => entry.url && URL.revokeObjectURL(entry.url)), []);\n\n const add = (list: FileList | File[] | null) => {\n if (!allowAttachments || !list) return;\n const next = Array.from(list).slice(0, 10).map(file => ({ id: `file-${++counter.current}`, file, url: file.type.startsWith(\"image/\") ? URL.createObjectURL(file) : undefined }));\n if (next.length) setFiles(current => [...current, ...next]);\n };\n const remove = (id: string) => setFiles(current => current.filter(entry => {\n if (entry.id === id && entry.url) URL.revokeObjectURL(entry.url);\n return entry.id !== id;\n }));\n\n const send = () => {\n if (!ready) return;\n onSend({ text: text.trim(), files: files.map(entry => entry.file) });\n files.forEach(entry => entry.url && URL.revokeObjectURL(entry.url));\n setFiles([]);\n setText(\"\");\n setSent(count => count + 1);\n areaRef.current?.focus();\n };\n\n const onKeyDown = (event: ReactKeyboardEvent) => {\n if (event.key === \"Enter\" && !event.shiftKey && !event.nativeEvent.isComposing) {\n event.preventDefault();\n send();\n }\n };\n const onPaste = (event: ReactClipboardEvent) => {\n if (!allowAttachments || !event.clipboardData.files.length) return;\n event.preventDefault();\n add(event.clipboardData.files);\n };\n const onDrop = (event: ReactDragEvent) => {\n if (!allowAttachments) return;\n event.preventDefault();\n setDragging(false);\n add(event.dataTransfer.files);\n };\n\n const tray = reduced ? { opacity: 0 } : { opacity: 0, scale: .9, filter: `blur(${blur.subtle}px)` };\n\n return
{ if (allowAttachments && event.dataTransfer.types.includes(\"Files\")) { event.preventDefault(); setDragging(true); } }}\n onDragLeave={event => { if (!event.currentTarget.contains(event.relatedTarget as Node)) setDragging(false); }}\n onDrop={onDrop}>\n \n {files.length > 0 && \n
    \n \n {files.map(entry => \n {entry.url\n // eslint-disable-next-line @next/next/no-img-element -- local object URL preview\n ? \"\"\n : {entry.file.name}{formatBytes(entry.file.size)}}\n \n )}\n \n
\n }\n \n
\n {allowAttachments && <>\n \n { add(event.target.files); event.target.value = \"\"; }} />\n }\n
\n \n
{text}{\"\\u200b\"}
\n