CommentThread

import { state } from '@weft-js/core'import { CommentThread } from '@weft-js/warp'import type { CommentThreadData, Peer } from '@weft-js/warp'export function Reply() {  const thread = state(COMMENT_TIMEOUTS)  const reply = (text: string) => (thread.value = { ...thread.value, comments: [...thread.value.comments, newComment(text)] })  return <CommentThread thread={thread} onReply={reply} />}const PEOPLE = [  { id: 'mara', name: 'Mara Lindqvist', email: 'mara@weft.dev', role: 'Owner', team: 'Platform', initials: 'ML' },  { id: 'jun', name: 'Jun Tanaka', email: 'jun@weft.dev', role: 'Admin', team: 'Platform', initials: 'JT' },  { id: 'priya', name: 'Priya Raman', email: 'priya@weft.dev', role: 'Member', team: 'Web', initials: 'PR' },  { id: 'tomas', name: 'Tomás Oliveira', email: 'tomas@weft.dev', role: 'Member', team: 'Web', initials: 'TO' },  { id: 'lena', name: 'Lena Fischer', email: 'lena@weft.dev', role: 'Member', team: 'Data', initials: 'LF' },  { id: 'noor', name: 'Noor Haddad', email: 'noor@weft.dev', role: 'Viewer', team: 'Data', initials: 'NH' },  { id: 'sam', name: 'Sam Okafor', email: 'sam@weft.dev', role: 'Member', team: 'Mobile', initials: 'SO' },  { id: 'ines', name: 'Inés Vidal', email: 'ines@weft.dev', role: 'Viewer', team: 'Mobile', initials: 'IV' },]const PEERS: Peer[] = PEOPLE.map((p, i) => ({ id: p.id, name: p.name, color: i + 1 }))const [MARA, JUN, PRIYA, TOMAS, LENA, NOOR, SAM, INES] = PEERS as [Peer, Peer, Peer, Peer, Peer, Peer, Peer, Peer]const COMMENT_TIMEOUTS: CommentThreadData = {  id: 'c-timeouts',  comments: [    { id: 'a', author: LENA, time: '10:12', text: 'Should this say 30 seconds? The stale window changed on Friday.' },    { id: 'b', author: JUN, time: '10:20', text: 'Yes. d-4817 lowered it, I will update the number.' },  ],}const newComment = (text: string) => ({ id: text, author: MARA, time: 'Now', text })