1-// ChatRoom.tsx — new component
1+import { useEffect, useState } from 'react'
2+import { subscribeToRoom, sendMessage } from './chatApi'
6+ currentUser: { id: string; name: string }
9+export function ChatRoom({ roomId, currentUser }: Props) {
10+ const [messages, setMessages] = useState<string[]>([])
11+ const [input, setInput] = useState('')
14+ const unsubscribe = subscribeToRoom(roomId, (msg) => {
15+ setMessages([...messages, msg])
17+ return () => unsubscribe()
20+ const handleSend = () => {
21+ sendMessage(roomId, currentUser.id, input)
27+ {messages.map((m, i) => <div key={i}>{m}</div>)}
28+ <input value={input} onChange={(e) => setInput(e.target.value)} />
29+ <button onClick={handleSend}>Send</button>
