Spaces:
Running
Running
| "use client"; | |
| import { useChat } from "@livekit/components-react"; | |
| import { useState } from "react"; | |
| import { Send, User } from "lucide-react"; | |
| interface StreamChatProps { | |
| roomName?: string; | |
| } | |
| export function StreamChat({ roomName }: StreamChatProps) { | |
| const [message, setMessage] = useState(""); | |
| const [isOpen, setIsOpen] = useState(false); | |
| const { send, chatMessages, isSending } = useChat(); | |
| const handleSend = () => { | |
| if (!message.trim()) return; | |
| send?.(message); | |
| setMessage(""); | |
| }; | |
| return ( | |
| <div className="flex flex-col h-full"> | |
| <div className="flex items-center justify-between mb-2"> | |
| <h3 className="text-sm font-medium">Stream Chat</h3> | |
| <button | |
| onClick={() => setIsOpen(!isOpen)} | |
| className="text-xs text-muted-foreground hover:text-primary" | |
| > | |
| {isOpen ? "Collapse" : "Expand"} | |
| </button> | |
| </div> | |
| {isOpen && ( | |
| <div className="flex-1 border border-border rounded-lg bg-background p-3 overflow-y-auto space-y-3 max-h-64"> | |
| {chatMessages.map((msg, index) => { | |
| const m = msg as any; | |
| return ( | |
| <div key={m.id || msg.timestamp || index} className="flex gap-2"> | |
| <div className="w-6 h-6 rounded-full bg-muted flex items-center justify-center"> | |
| <User size={12} /> | |
| </div> | |
| <div className="flex-1"> | |
| <div className="text-xs font-medium">{m.author?.name || "Unknown"}</div> | |
| <div className="text-xs text-muted-foreground">{m.message}</div> | |
| <div className="text-[10px] text-muted-foreground"> | |
| {new Date(m.timestamp || 0).toLocaleTimeString()} | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| })} | |
| {chatMessages.length === 0 && ( | |
| <div className="text-xs text-muted-foreground text-center py-2"> | |
| No messages yet | |
| </div> | |
| )} | |
| </div> | |
| )} | |
| <div className="flex items-center gap-2 mt-2"> | |
| <input | |
| value={message} | |
| onChange={(e) => setMessage(e.target.value)} | |
| placeholder="Type a message..." | |
| className="flex-1 h-8 rounded-md border border-input bg-input px-3 text-sm" | |
| disabled={!isOpen} | |
| /> | |
| <button | |
| onClick={handleSend} | |
| disabled={!message.trim() || !isOpen || isSending} | |
| className="h-8 px-3 bg-primary text-primary-foreground hover:bg-primary/90 rounded-md text-sm" | |
| > | |
| <Send size={16} /> | |
| </button> | |
| </div> | |
| </div> | |
| ); | |
| } | |