{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "chat-thread", "title": "Chat Thread", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/chat-thread/ChatThread.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, AtSign, Paperclip, Phone, Smile, Video, MoreVertical, Check, CheckCheck } from 'lucide-react'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Button } from '@/components/ui/button'\nimport { Textarea } from '@/components/ui/textarea'\n\ntype MessageStatus = 'sent' | 'delivered' | 'read'\n\ninterface Message {\n id: string\n author: 'me' | 'them'\n body: string\n sentAt: Date\n status?: MessageStatus\n}\n\nconst now = new Date()\nconst yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)\n\nconst peer = {\n name: 'Marcus Rivera',\n handle: '@marcus',\n avatarUrl: '',\n initials: 'MR',\n online: true,\n lastSeen: 'Active now',\n}\n\nconst initialMessages: Message[] = [\n {\n id: 'm1',\n author: 'them',\n body: 'Hey — did you get a chance to look at the onboarding doc?',\n sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000 + 14 * 60 * 1000),\n },\n {\n id: 'm2',\n author: 'me',\n body: 'Yeah, just finished. Two small notes on the time-off flow but otherwise looks solid.',\n sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000 + 21 * 60 * 1000),\n status: 'read',\n },\n {\n id: 'm3',\n author: 'them',\n body: 'Perfect. Drop them in the doc and I will action this afternoon.',\n sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000 + 23 * 60 * 1000),\n },\n {\n id: 'm4',\n author: 'me',\n body: 'Done. Also — are we still on for the dashboard review tomorrow at 10?',\n sentAt: new Date(now.getTime() - 42 * 60 * 1000),\n status: 'read',\n },\n {\n id: 'm5',\n author: 'them',\n body: 'Yes! I will bring the kanban deck. Want to push it to 10:30 so we can join from the standup?',\n sentAt: new Date(now.getTime() - 8 * 60 * 1000),\n },\n]\n\nfunction dayLabel(d: Date): string {\n const sameDay = d.toDateString() === now.toDateString()\n if (sameDay) return 'Today'\n const sameYesterday = d.toDateString() === yesterday.toDateString()\n if (sameYesterday) return 'Yesterday'\n return d.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' })\n}\n\nfunction formatTime(d: Date): string {\n return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })\n}\n\nexport function ChatThread() {\n const [messages, setMessages] = React.useState(initialMessages)\n const [draft, setDraft] = React.useState('')\n const [peerTyping, setPeerTyping] = React.useState(false)\n const scrollRoot = React.useRef(null)\n const composerRef = React.useRef(null)\n // Keep `send` referenced by the native keydown listener fresh without\n // re-binding on every keystroke.\n const sendRef = React.useRef<() => void>(() => {})\n\n const groupedMessages = React.useMemo(() => {\n const groups: Array<{ label: string; items: Message[] }> = []\n for (const m of messages) {\n const label = dayLabel(m.sentAt)\n const last = groups[groups.length - 1]\n if (last && last.label === label) last.items.push(m)\n else groups.push({ label, items: [m] })\n }\n return groups\n }, [messages])\n\n function scrollToBottom() {\n if (!scrollRoot.current) return\n scrollRoot.current.scrollTop = scrollRoot.current.scrollHeight\n }\n\n React.useEffect(() => {\n scrollToBottom()\n }, [messages])\n\n function send() {\n const body = draft.trim()\n if (!body) return\n setMessages((prev) => [\n ...prev,\n {\n id: `m${Date.now()}`,\n author: 'me',\n body,\n sentAt: new Date(),\n status: 'sent',\n },\n ])\n setDraft('')\n setPeerTyping(true)\n window.setTimeout(() => {\n setPeerTyping(false)\n }, 1800)\n }\n\n // The Textarea primitive's `onKeyDown` prop fires with no event, so attach a\n // native keydown listener to the underlying