Chat Bubble

AI & Chat

Chat message bubble with sender styling.

Preview

How do I create a custom React hook?

To create a custom hook, start by defining a function prefixed with 'use'. Here's a simple example...

Can you show me a full example?

Usage

example.jsx

import { ChatBubble } from "@/components/ui/chat-bubble";

export default function Example() {
  return <ChatBubble />;
}

Source Code

Copy this file into components/ui/chat-bubble.jsx in your project.

chat-bubble.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const ChatBubble = forwardRef(({ className, message, sender = "user", avatar, timestamp, ...props }, ref) => (
  <div ref={ref} className={cn("flex gap-3", sender === "user" ? "flex-row-reverse" : "flex-row", className)} {...props}>
    {avatar && <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-bold">{avatar}</div>}
    <div className={cn("max-w-[75%] space-y-1")}>
      <div className={cn("rounded-2xl px-4 py-2.5 text-sm",
        sender === "user" ? "rounded-br-md bg-primary text-primary-foreground" : "rounded-bl-md bg-muted"
      )}>{message}</div>
      {timestamp && <p className={cn("text-[10px] text-muted-foreground", sender === "user" ? "text-right" : "text-left")}>{timestamp}</p>}
    </div>
  </div>
));
ChatBubble.displayName = "ChatBubble";

export { ChatBubble };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge