60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T4edc,'use client' import * as React from 'react' import { ArrowRight, AtSign, Paperclip, Phone, Smile, Video, MoreVertical, Search, Pin, CheckCheck, SquarePen, Filter, } from 'lucide-react' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Textarea } from '@/components/ui/textarea' interface Conversation { id: string name: string initials: string avatarUrl?: string lastMessage: string lastAt: Date unread: number online: boolean pinned?: boolean muted?: boolean } interface Message { id: string author: 'me' | 'them' body: string sentAt: Date status?: 'sent' | 'delivered' | 'read' } const now = new Date() const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()) const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000) const initialConversations: Conversation[] = [ { id: 'c1', name: 'Marcus Rivera', initials: 'MR', lastMessage: 'Yes! I will bring the kanban deck. Want to push it to 10:30?', lastAt: new Date(now.getTime() - 8 * 60 * 1000), unread: 2, online: true, pinned: true, }, { id: 'c2', name: 'Sarah Connor', initials: 'SC', lastMessage: 'Approved — feel free to take Mar 15-18 off.', lastAt: new Date(now.getTime() - 52 * 60 * 1000), unread: 0, online: true, }, { id: 'c3', name: 'Design Team', initials: 'DT', lastMessage: 'Priya: pushed the new color tokens to staging.', lastAt: new Date(now.getTime() - 3 * 60 * 60 * 1000), unread: 5, online: false, pinned: true, }, { id: 'c4', name: 'Alice Johnson', initials: 'AJ', lastMessage: 'Thanks! Will follow up after lunch.', lastAt: new Date(now.getTime() - 5 * 60 * 60 * 1000), unread: 0, online: false, }, { id: 'c5', name: 'Engineering', initials: 'EN', lastMessage: 'Devon: deploy is green, going home.', lastAt: yesterday, unread: 0, online: false, muted: true, }, { id: 'c6', name: 'Priya Shah', initials: 'PS', lastMessage: 'Sent the spec — let me know what you think.', lastAt: new Date(now.getTime() - 28 * 60 * 60 * 1000), unread: 0, online: false, }, { id: 'c7', name: 'Devon Patel', initials: 'DP', lastMessage: 'You: pushed the fix, should be live in 10.', lastAt: new Date(now.getTime() - 50 * 60 * 60 * 1000), unread: 0, online: true, }, ] const initialMessagesByConvo: Record = { c1: [ { id: 'm1', author: 'them', body: 'Hey — did you get a chance to look at the onboarding doc?', sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000), }, { id: 'm2', author: 'me', body: 'Yeah, just finished. Two small notes on the time-off flow but otherwise looks solid.', sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000 + 7 * 60 * 1000), status: 'read', }, { id: 'm3', author: 'them', body: 'Perfect. Drop them in the doc and I will action this afternoon.', sentAt: new Date(yesterday.getTime() + 9 * 60 * 60 * 1000 + 9 * 60 * 1000), }, { id: 'm4', author: 'me', body: 'Done. Also — are we still on for the dashboard review tomorrow at 10?', sentAt: new Date(now.getTime() - 42 * 60 * 1000), status: 'read', }, { id: 'm5', author: 'them', body: 'Yes! I will bring the kanban deck. Want to push it to 10:30 so we can join from the standup?', sentAt: new Date(now.getTime() - 8 * 60 * 1000), }, ], c2: [ { id: 'm1', author: 'me', body: 'Hey Sarah — submitting time-off for Mar 15-18.', sentAt: new Date(now.getTime() - 95 * 60 * 1000), status: 'read', }, { id: 'm2', author: 'them', body: 'Approved — feel free to take Mar 15-18 off.', sentAt: new Date(now.getTime() - 52 * 60 * 1000), }, ], c3: [ { id: 'm1', author: 'them', body: 'Priya: pushed the new color tokens to staging. Reviews welcome.', sentAt: new Date(now.getTime() - 3 * 60 * 60 * 1000), }, ], c4: [ { id: 'm1', author: 'them', body: 'Thanks! Will follow up after lunch.', sentAt: new Date(now.getTime() - 5 * 60 * 60 * 1000), }, ], c5: [{ id: 'm1', author: 'them', body: 'Devon: deploy is green, going home.', sentAt: yesterday }], c6: [ { id: 'm1', author: 'them', body: 'Sent the spec — let me know what you think.', sentAt: new Date(now.getTime() - 28 * 60 * 60 * 1000), }, ], c7: [ { id: 'm1', author: 'me', body: 'pushed the fix, should be live in 10.', sentAt: new Date(now.getTime() - 50 * 60 * 60 * 1000), status: 'read', }, ], } function dayLabel(d: Date): string { if (d.toDateString() === now.toDateString()) return 'Today' if (d.toDateString() === yesterday.toDateString()) return 'Yesterday' return d.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' }) } function formatTime(d: Date): string { return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) } function formatConvoTime(d: Date): string { if (d >= todayStart) return d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) if (d.toDateString() === yesterday.toDateString()) return 'Yesterday' const diffDays = Math.floor((now.getTime() - d.getTime()) / (24 * 60 * 60 * 1000)) if (diffDays < 7) return d.toLocaleDateString(undefined, { weekday: 'short' }) return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) } export function ChatTwoPane() { const [conversations, setConversations] = React.useState(initialConversations) // Mutable per-conversation message store. A version counter forces re-render // when a thread is mutated in place (mirrors the Vue object mutation model). const messagesByConvo = React.useRef>(initialMessagesByConvo) const [, setMsgVersion] = React.useState(0) const [search, setSearch] = React.useState('') const [activeId, setActiveId] = React.useState('c1') const [draft, setDraft] = React.useState('') const [peerTyping, setPeerTyping] = React.useState(false) const scrollRoot = React.useRef(null) const composerRef = React.useRef(null) const sendRef = React.useRef<() => void>(() => {}) const activeConvo = React.useMemo(() => conversations.find((c) => c.id === activeId)!, [conversations, activeId]) const activeMessages = React.useMemo( () => messagesByConvo.current[activeId] ?? [], // eslint-disable-next-line react-hooks/exhaustive-deps [activeId, peerTyping, draft], ) const filteredConvos = React.useMemo(() => { const q = search.trim().toLowerCase() const list = q ? conversations.filter((c) => c.name.toLowerCase().includes(q) || c.lastMessage.toLowerCase().includes(q)) : conversations return [...list].sort((a, b) => { if (a.pinned !== b.pinned) return a.pinned ? -1 : 1 return b.lastAt.getTime() - a.lastAt.getTime() }) }, [conversations, search]) const groupedMessages = React.useMemo(() => { const groups: Array<{ label: string; items: Message[] }> = [] for (const m of activeMessages) { const label = dayLabel(m.sentAt) const last = groups[groups.length - 1] if (last && last.label === label) last.items.push(m) else groups.push({ label, items: [m] }) } return groups }, [activeMessages]) function scrollToBottom() { if (!scrollRoot.current) return scrollRoot.current.scrollTop = scrollRoot.current.scrollHeight } function selectConvo(id: string) { setActiveId(id) setConversations((prev) => prev.map((c) => (c.id === id ? { ...c, unread: 0 } : c))) } // Scroll to bottom whenever the active thread changes. React.useEffect(() => { scrollToBottom() }, [activeId]) function send() { const body = draft.trim() if (!body) return const list = messagesByConvo.current[activeId] ?? [] list.push({ id: `m${Date.now()}`, author: 'me', body, sentAt: new Date(), status: 'sent' }) messagesByConvo.current[activeId] = list setDraft('') setConversations((prev) => prev.map((c) => (c.id === activeId ? { ...c, lastMessage: `You: ${body}`, lastAt: new Date() } : c)), ) setMsgVersion((v) => v + 1) requestAnimationFrame(scrollToBottom) setPeerTyping(true) window.setTimeout(() => setPeerTyping(false), 1600) } // The Textarea primitive's `onKeyDown` prop fires with no event, so attach a // native keydown listener to the underlying

for Enter-to-send.
  React.useEffect(() => {
    sendRef.current = send
  })

React.useEffect(() => {
    const el = composerRef.current
    if (!el) return
    function onComposerKey(e: KeyboardEvent) {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault()
        sendRef.current()
      }
    }
    el.addEventListener('keydown', onComposerKey)
    return () => el.removeEventListener('keydown', onComposerKey)
  }, [])

return (
    <div
      data-slot="chat-two-pane"
      className="bg-card text-card-foreground grid h-[680px] w-full grid-cols-[280px_1fr] overflow-hidden rounded-xl border shadow-sm"
    >
      <aside className="bg-muted/30 flex min-w-0 flex-col border-r">
        <div className="flex h-14 shrink-0 items-center justify-between gap-2 border-b px-4">
          <h2 className="text-sm font-semibold tracking-tight">Messages</h2>
          <div className="flex items-center gap-1">
            <Button variant="ghost" size="icon" className="size-8" aria-label="Filter">
              <Filter className="size-4" />
            </Button>
            <Button variant="ghost" size="icon" className="size-8" aria-label="New conversation">
              <SquarePen className="size-4" />
            </Button>
          </div>
        </div>
        <div className="px-3 pt-3 pb-2">
          <div className="relative">
            <Search className="text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2" />
            <Input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search"
              className="h-8 rounded-lg pl-8 text-xs"
            />
          </div>
        </div>
        <div className="convo-scroll flex-1 overflow-y-auto pb-3">
          {filteredConvos.map((c) => (
            <button
              key={c.id}
              className={`flex w-full items-start gap-3 px-3 py-2.5 text-left transition-colors ${
                c.id === activeId ? 'bg-primary/10' : 'hover:bg-muted/60'
              }`}
              onClick={() => selectConvo(c.id)}
            >
              <div className="relative shrink-0">
                <Avatar className="size-9">
                  {c.avatarUrl && <AvatarImage src={c.avatarUrl} alt={c.name} />}
                  <AvatarFallback className="text-xs">{c.initials}</AvatarFallback>
                </Avatar>
                {c.online && (
                  <span className="bg-success ring-card absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2" />
                )}
              </div>
              <div className="min-w-0 flex-1">
                <div className="flex items-center justify-between gap-1.5">
                  <p className={`truncate text-sm ${c.unread > 0 ? 'font-semibold' : 'font-medium'}`}>{c.name}</p>
                  <span className="text-muted-foreground shrink-0 text-xs tabular-nums">
                    {formatConvoTime(c.lastAt)}
                  </span>
                </div>
                <div className="mt-0.5 flex items-center justify-between gap-1.5">
                  <p className={`truncate text-xs ${c.unread > 0 ? 'text-foreground/80' : 'text-muted-foreground'}`}>
                    {c.lastMessage}
                  </p>
                  <div className="flex shrink-0 items-center gap-1">
                    {c.pinned && <Pin className="text-muted-foreground size-3" />}
                    {c.unread > 0 && (
                      <span className="bg-primary text-primary-foreground inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-xs font-bold tabular-nums">
                        {c.unread}
                      </span>
                    )}
                  </div>
                </div>
              </div>
            </button>
          ))}
        </div>
      </aside>

<section className="flex min-w-0 flex-col">
        <header className="flex h-14 shrink-0 items-center justify-between gap-3 border-b px-4">
          <div className="flex min-w-0 items-center gap-3">
            <div className="relative">
              <Avatar className="size-9">
                <AvatarFallback className="text-xs font-medium">{activeConvo.initials}</AvatarFallback>
              </Avatar>
              {activeConvo.online && (
                <span className="bg-success ring-card absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2" />
              )}
            </div>
            <div className="min-w-0">
              <p className="truncate text-sm font-semibold tracking-tight">{activeConvo.name}</p>
              <p className="text-muted-foreground truncate text-xs">
                {activeConvo.online ? 'Active now' : 'Active 2h ago'}
              </p>
            </div>
          </div>
          <div className="flex items-center gap-1">
            <Button variant="ghost" size="icon" className="size-8" aria-label="Voice call">
              <Phone className="size-4" />
            </Button>
            <Button variant="ghost" size="icon" className="size-8" aria-label="Video call">
              <Video className="size-4" />
            </Button>
            <Button variant="ghost" size="icon" className="size-8" aria-label="More options">
              <MoreVertical className="size-4" />
            </Button>
          </div>
        </header>

<div ref={scrollRoot} className="chat-scroll flex-1 space-y-5 overflow-y-auto px-4 py-4">
          {groupedMessages.map((group) => (
            <div key={group.label} className="space-y-3">
              <div className="flex items-center justify-center">
                <span className="text-muted-foreground bg-muted/60 rounded-full px-2.5 py-0.5 text-xs font-medium tracking-wide uppercase">
                  {group.label}
                </span>
              </div>
              {group.items.map((m) => (
                <div
                  key={m.id}
                  className={`flex items-end gap-2 ${m.author === 'me' ? 'justify-end' : 'justify-start'}`}
                >
                  {m.author === 'them' && (
                    <Avatar className="size-7">
                      <AvatarFallback className="text-xs">{activeConvo.initials}</AvatarFallback>
                    </Avatar>
                  )}
                  <div className={`flex max-w-[78%] flex-col gap-1 ${m.author === 'me' ? 'items-end' : 'items-start'}`}>
                    <div
                      className={`rounded-2xl px-3.5 py-2 text-sm leading-relaxed shadow-sm ${
                        m.author === 'me'
                          ? 'bg-primary text-primary-foreground rounded-br-md'
                          : 'bg-muted text-foreground rounded-bl-md'
                      }`}
                    >
                      {m.body}
                    </div>
                    <div className="text-muted-foreground flex items-center gap-1 px-1 text-xs tabular-nums">
                      <span>{formatTime(m.sentAt)}</span>
                      {m.author === 'me' && m.status === 'read' && <CheckCheck className="text-info size-3" />}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ))}

{peerTyping && (
            <div className="flex items-end gap-2">
              <Avatar className="size-7">
                <AvatarFallback className="text-xs">{activeConvo.initials}</AvatarFallback>
              </Avatar>
              <div className="bg-muted text-muted-foreground flex items-center gap-1 rounded-2xl rounded-bl-md px-3 py-2.5">
                <span className="typing-dot" />
                <span className="typing-dot" style={{ animationDelay: '0.15s' }} />
                <span className="typing-dot" style={{ animationDelay: '0.3s' }} />
              </div>
            </div>
          )}
        </div>