Voice Chat Bubble A responsive, theme-adaptive component that displays a collapsed list of user avatars for a voice chat. Clicking it opens an animated modal with the full participant list and a call-to-action button.
import { VoiceChat } from "@/components/ui/chat-bubble";
// Mock user data for the demo
const mockUsers = [
{
id: "user-1",
name: "Oguz",
avatarUrl: "https://cdn.21st.dev/assets/mirror/42/420c64d5e90b2ff05fc182e3d8c3df40076440cb684d927efed247855775ea9b.jpg",
isSpeaking: true,
},
{
id: "user-2",
name: "Ashish",
avatarUrl: "https://cdn.21st.dev/assets/mirror/ff/ff4b0fe2f7d11aff0d68f760e5fdcfeebf8b884c024ae24c9a6cf1d2edf76f49.jpg",
},
{
id: "user-3",
name: "Mariana",
avatarUrl: "https://cdn.21st.dev/assets/mirror/a3/a37358a09c532474e3246a94e5e5104b1b6b6907f83b44259509f8c776506120.jpg",
},
{
id: "user-4",
name: "MDS",
avatarUrl: "https://cdn.21st.dev/assets/mirror/10/10e2bfa5446e5c116e269b649b5f5e0106d96643f0a903048f3a056e40c35cd8.jpg",
},
{
id: "user-5",
name: "Ana",
avatarUrl: "https://cdn.21st.dev/assets/mirror/65/65e210e443ec4f3f9395349fbc79d90ee25d6b5d8e988716ad11631903ec502c.jpg",
},
{
id: "user-6",
name: "Natko",
avatarUrl: "https://cdn.21st.dev/assets/mirror/cc/ccedc2f61c957400a3092c930403ad45edd8e7b1597868aca97a91ceb81d773c.jpg",
isSpeaking: true,
},
{
id: "user-7",
name: "Afshin",
avatarUrl: "https://cdn.21st.dev/assets/mirror/bd/bde541ee8fd90797e3623f431c1c12b12bd643f265fdc27e93db9e3d0c1db3ab.jpg",
},
{
id: "user-8",
name: "Jane",
avatarUrl: "https://cdn.21st.dev/assets/mirror/38/38eeaa3b65facaccd15508865c22bb499d64e3908f3054899844eb1068d7cada.jpg",
},
];
/**
* A demo component to showcase the VoiceChat functionality.
*/
const VoiceChatDemo = () => {
// Handler for the join action
const handleJoinChat = () => {
// In a real app, this would contain logic to join the voice channel
console.log("Attempting to join the voice chat...");
alert("Joining voice chat!");
};
return (
<div className="flex h-[200px] items-start justify-center rounded-lg bg-background p-8">
<VoiceChat users={mockUsers} onJoin={handleJoinChat} />
</div>
);
};
export default VoiceChatDemo;