Spaces:
Running
Running
File size: 2,664 Bytes
fb12607 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | "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>
);
}
|