Chat Bubble

Component 185

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Chat Bubble to your project and fits it to your theme.

Code

How Chat Bubble is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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;