Chat Bubble

The ChatBubble component provides an interactive, floating chat UI for your application. It supports features like toggling visibility, sending messages, displaying messages, and indicating typing status. It is designed with accessibility and customization in mind.

Showcase

Installation

Run the following command

npx shadcn@latest add https://uicelerate.vercel.app/registry/chat-bubble.json

Example

'use client'

import { useState } from 'react'
import { ChatBubble, Message } from '@/components/ui/chat-bubble'
import { Headphones } from 'lucide-react'

export default function Test() {
  const [messages, setMessages] = useState<Message[]>([
    { id: '1', content: "Hello! How can I assist you today?", isUser: false }
  ])
  const [isTyping, setIsTyping] = useState(false)

  const handleSendMessage = async (message: string) => {
    const userMessage: Message = { id: Date.now().toString(), content: message, isUser: true }
    setMessages(prev => [...prev, userMessage])
    setIsTyping(true)

    try {
      await new Promise(resolve => setTimeout(resolve, 1000))
      const response = `You said: "${message}". This is a mock response.`
      const botMessage: Message = { id: (Date.now() + 1).toString(), content: response, isUser: false }
      setMessages(prev => [...prev, botMessage])
    } catch (error) {
      console.error('Error getting API response:', error)
      const errorMessage: Message = { id: (Date.now() + 1).toString(), content: "Sorry, I couldn't process your request.", isUser: false }
      setMessages(prev => [...prev, errorMessage])
    } finally {
      setIsTyping(false)
    }
  }

  return (
    <main className="flex h-[100svh] w-full flex-col items-center justify-between p-4 md:p-24">
      <h1 className="text-4xl font-bold">Welcome to My App</h1>
      <p className="text-xl">This is a sample page with the chat bubble component.</p>
      <ChatBubble
        messages={messages}
        onSendMessage={handleSendMessage}
        isTyping={isTyping}
        title="Customer Support"
        placeholder="Ask a question..."
        themeColor="bg-orange-500"
        chatIcon={<Headphones className="h-6 w-6" />}
      />
    </main>
  )
}

Props

The ChatBubble component accepts the following props:

Prop Name	Type	Default	Description
messages	Message[]	[]	Array of message objects. Each message has id, content, and isUser properties.
onSendMessage	(message: string) => void	N/A	Callback function invoked when a message is sent.
isTyping	boolean	false	Indicates whether the bot is typing.
chatIcon	React.ReactNode	<MessageCircle className="h-6 w-6" />	Icon displayed for opening the chat.
title	string	"Chat"	Title displayed at the top of the chat.
placeholder	string	"Type your message..."	Placeholder text for the input field.
sendButtonAriaLabel	string	"Send message"	ARIA label for the send button.
closeButtonAriaLabel	string	"Close chat"	ARIA label for the close button.
isOpen	boolean	undefined	Controls the open state of the chat (if controlled).
onToggleOpen	() => void	undefined	Callback function invoked when toggling the chat state (if controlled).
className	string	""	Additional class names for the chat card.
themeColor	string	"bg-primary"	Color theme for the chat. Used in various parts of the component.