Components
Loading preview...
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.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/chat-bubbleimport { VoiceChat } from "@/components/ui/chat-bubble";
// Mock user data for the demo
const mockUsers = [
{
id: "user-1",
name: "Oguz",
avatarUrl: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
isSpeaking: true,
},
{
id: "user-2",
name: "Ashish",
avatarUrl: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
},
{
id: "user-3",
name: "Mariana",
avatarUrl: "https://i.pravatar.cc/150?u=a04258114e29026702d",
},
{
id: "user-4",
name: "MDS",
avatarUrl: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
},
{
id: "user-5",
name: "Ana",
avatarUrl: "https://i.pravatar.cc/150?u=a092581f4e29026705d",
},
{
id: "user-6",
name: "Natko",
avatarUrl: "https://i.pravatar.cc/150?u=b042581f4e29026706d",
isSpeaking: true,
},
{
id: "user-7",
name: "Afshin",
avatarUrl: "https://i.pravatar.cc/150?u=c042581f4e29026707d",
},
{
id: "user-8",
name: "Jane",
avatarUrl: "https://i.pravatar.cc/150?u=d042581f4e29026708e",
},
];
/**
* 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;