New

ChatBubble

Chat message component with avatar, message bubble, timestamp, and read receipts. Supports sent/received variants with different alignment and colors.

Social & Communicationchatmessagebubbleavatarcommunication

Dependencies

Other dependencies:

@/components/ui/avatar

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
4import { CheckCheck } from "lucide-react";
5
6interface ChatBubbleProps {
7  variant: "sent" | "received";
8  message: string;
9  timestamp: string;
10  avatarSrc?: string;
11  senderName: string;
12  isRead?: boolean;
13}
14
15export default function ChatBubble({ variant, message, timestamp, avatarSrc, senderName, isRead }: ChatBubbleProps) {
16  const isSent = variant === "sent";
17  
18  return (
19    <div className={`flex gap-3 mb-4 ${isSent ? "flex-row-reverse" : ""}`}>
20      <Avatar className="w-8 h-8">
21        <AvatarImage src={avatarSrc} />
22        <AvatarFallback>{senderName[0]}</AvatarFallback>
23      </Avatar>
24      <div className={`flex flex-col ${isSent ? "items-end" : "items-start"} max-w-[70%]`}>
25        <div className={`px-4 py-2 rounded-2xl ${isSent ? "bg-primary text-primary-foreground rounded-br-md" : "bg-muted rounded-bl-md"}`}>
26          <p className="text-sm">{message}</p>
27        </div>
28        <div className="flex items-center gap-1 mt-1">
29          <span className="text-xs text-muted-foreground">{timestamp}</span>
30          {isSent && isRead && <CheckCheck className="w-3 h-3 text-primary" />}
31        </div>
32      </div>
33    </div>
34  );
35}
36
37export function ChatDemo() {
38  return (
39    <div className="p-4 space-y-4 max-w-md mx-auto">
40      <ChatBubble
41        variant="received"
42        message="Hey! How are you doing today?"
43        timestamp="10:30 AM"
44        senderName="Alice"
45        avatarSrc="https://i.pravatar.cc/150?img=1"
46      />
47      <ChatBubble
48        variant="sent"
49        message="I'm doing great! Just finished the project. 🎉"
50        timestamp="10:32 AM"
51        senderName="You"
52        isRead={true}
53      />
54      <ChatBubble
55        variant="received"
56        message="That's awesome! Can you share the details?"
57        timestamp="10:33 AM"
58        senderName="Alice"
59        avatarSrc="https://i.pravatar.cc/150?img=1"
60      />
61      <ChatBubble
62        variant="sent"
63        message="Sure, I'll send it over in a bit."
64        timestamp="10:35 AM"
65        senderName="You"
66        isRead={false}
67      />
68    </div>
69  );
70}