4e: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50:T25ec,import { useState } from 'react' import clsx from 'clsx' import { Card, RowCard } from '../surface' import { Shell, Sidebar, Stack, Row, Spacer } from '../layout' import { Heading, Text, Eyebrow } from '../text' import { Avatar } from '../avatar' import { Dot, Badge, Blob } from '../media' import { Input } from '../Input' import { Button } from '../Button' import { Icon } from '../Icon' import { NavLink } from '../NavLink' import { BottomNav, type NavItem } from '../BottomNav' const NAV: NavItem[] = [ { href: '/', label: 'Overview', icon: 'overview', tone: 'purple' }, { href: '/inbox', label: 'Inbox', icon: 'mail', tone: 'blue' }, { href: '/board', label: 'Board', icon: 'log', tone: 'mint' }, { href: '/messages', label: 'Messages', icon: 'comment', tone: 'pink' }, { href: '/settings', label: 'Settings', icon: 'settings', tone: 'orange' }, ] const HERE = '/messages' interface Message { id: string from: 'me' | 'them' text: string time: string } interface Convo { id: string name: string tone: 'purple' | 'pink' | 'blue' | 'mint' online: boolean unread: number } const CONVOS: Convo[] = [ { id: 'maya', name: 'Maya B.', tone: 'mint', online: true, unread: 0 }, { id: 'grace', name: 'Grace H.', tone: 'blue', online: true, unread: 2 }, { id: 'kat', name: 'Katherine J.', tone: 'pink', online: false, unread: 0 }, { id: 'alan', name: 'Alan T.', tone: 'purple', online: false, unread: 0 }, ] /* One thread per conversation. The previous version kept a single flat message * list and a hardcoded "Maya B." header, so picking another person in the list * showed you Maya's messages under their name. */ const SEED: Record = { maya: [ { id: 'm1', from: 'them', text: 'hey! did you try the new cushion buttons?', time: '9:41' }, { id: 'm2', from: 'me', text: 'yes — they literally press in. so satisfying', time: '9:42' }, { id: 'm3', from: 'them', text: 'right?? depth is the whole personality', time: '9:42' }, { id: 'm4', from: 'me', text: 'shipping the dashboard with them today', time: '9:44' }, ], grace: [ { id: 'g1', from: 'them', text: 'migration finished — zero visual drift', time: '8:10' }, { id: 'g2', from: 'them', text: 'across 2,700 lines. the gate paid for itself', time: '8:12' }, ], kat: [ { id: 'k1', from: 'them', text: 'sent the optical-centering note', time: 'Tue' }, { id: 'k2', from: 'me', text: 'read it twice. the glyph offset finally makes sense', time: 'Tue' }, ], alan: [ { id: 'a1', from: 'them', text: 'variants over classNames, always', time: 'Mon' }, ], } const PANES = 'grid [grid-template-columns:minmax(0,280px)_minmax(0,1fr)] min-h-[520px] max-[900px]:[grid-template-columns:minmax(0,1fr)]' /** An example chat screen: app shell, a conversation list that actually * switches threads, message bubbles, and a working composer. Below 900px the * list and thread take turns rather than splitting a phone in half. */ export function ChatBlock() { const [threads, setThreads] = useState>(SEED) const [draft, setDraft] = useState('') const [active, setActive] = useState('maya') const [read, setRead] = useState([]) const [pane, setPane] = useState<'list' | 'detail'>('list') const convo = CONVOS.find((c) => c.id === active) ?? CONVOS[0]! const messages = threads[active] ?? [] const unreadTotal = CONVOS.filter((c) => !read.includes(c.id)).reduce((n, c) => n + c.unread, 0) function open(id: string) { setActive(id) setRead((r) => (r.includes(id) ? r : [...r, id])) setDraft('') setPane('detail') } function send() { const text = draft.trim() if (!text) return setThreads((t) => ({ ...t, [active]: [ ...(t[active] ?? []), { id: `${active}-${(t[active]?.length ?? 0) + 1}`, from: 'me', text, time: 'now' }, ], })) setDraft('') } return ( <> Acme {NAV.map((item) => ( {item.label} ))} Team Messages {unreadTotal > 0 && {unreadTotal} new}

{/* Conversation list */}

{CONVOS.map((c) => { const thread = threads[c.id] ?? [] const last = thread[thread.length - 1] const unread = read.includes(c.id) ? 0 : c.unread return ( open(c.id)} selected={c.id === active}> {c.name} {c.online && } {last?.text ?? 'No messages yet'} {unread > 0 && {unread}} ) })}

{/* Active thread */}

{convo.name} {convo.online ? 'Online' : 'Offline'}

Today {messages.map((m) => (

{m.text}

{m.time}

))}

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}]]}],["$","$L4e",null,{"namespace":"@1st-pouf","registryDependencies":["https://1st-pouf.worksonmy.dev/r/avatar.json","https://1st-pouf.worksonmy.dev/r/base.json","https://1st-pouf.worksonmy.dev/r/bottom-nav.json","https://1st-pouf.worksonmy.dev/r/button.json","https://1st-pouf.worksonmy.dev/r/icon.json","https://1st-pouf.worksonmy.dev/r/input.json","https://1st-pouf.worksonmy.dev/r/layout.json","https://1st-pouf.worksonmy.dev/r/media.json","https://1st-pouf.worksonmy.dev/r/nav-link.json","https://1st-pouf.worksonmy.dev/r/surface.json","https://1st-pouf.worksonmy.dev/r/text.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/pouf/blocks/chat.tsx","content":"$50","type":"registry:block","target":"components/pouf/blocks/chat.tsx"}],"className":"h-[70svh] min-h-80"}]]}]