ChatBubble

Display chat messages in a conversational interface with support for user/bot messages, avatars, status indicators, and rich content. Perfect for chat applications, customer support, and messaging features. Built for Pulse Framework with full reactivity support.

Import

import { ChatBubble } from '@odyssee-software/components';

Basic Usage

Code Éditable

Résultat

User vs Bot Messages

Bot Message (Left-aligned)

Code Éditable

Résultat

User Message (Right-aligned)

Code Éditable

Résultat

With Avatars

Image Avatar

Code Éditable

Résultat

Initials Avatar

Code Éditable

Résultat

With Title

Code Éditable

Résultat

Message Status

Code Éditable

Résultat

With Timestamps

Code Éditable

Résultat

Rich Content

Chat bubbles can contain complex content including links and lists.

const contentItems = [
  { type: 'text', content: 'Here are some helpful resources:' },
  { type: 'link', content: 'Documentation', href: '/docs' },
  { type: 'link', content: 'API Reference', href: '/api' },
  { type: 'link', content: 'Support Portal', href: '/support' }
];

const richBubble = (
  <ChatBubble
    title='Quick Links'
    content={contentItems}
    avatarInitials='AI'
    align='left'
  />
);

Custom Styling

Code Éditable

Résultat

Reactive Chat

Create interactive chat interfaces with Pulse signals.

import { ChatBubble, Input, Button, Pulse } from '@odyssee-software/components';

const ChatInterface = () => {
  const messages = Pulse.signal([
    {
      id: 1,
      text: 'Hello! How can I help you today?',
      sender: 'bot',
      timestamp: new Date().toLocaleTimeString()
    }
  ]);
  
  const inputValue = Pulse.signal('');

  const sendMessage = () => {
    const text = inputValue();
    if (!text.trim()) return;

    // Add user message
    messages([
      ...messages(),
      {
        id: messages().length + 1,
        text,
        sender: 'user',
        timestamp: new Date().toLocaleTimeString()
      }
    ]);

    inputValue('');

    // Simulate bot response
    setTimeout(() => {
      messages([
        ...messages(),
        {
          id: messages().length + 1,
          text: 'Thanks for your message! Our team will respond shortly.',
          sender: 'bot',
          timestamp: new Date().toLocaleTimeString()
        }
      ]);
    }, 1000);
  };

  return (
    <div class='flex flex-col h-96'>
      <div class='flex-1 overflow-y-auto p-4 bg-gray-50 dark:bg-neutral-800'>
        <ChatBubble.List>
          {messages().map(msg => (
            <ChatBubble
              key={msg.id}
              message={msg.text}
              sender={msg.sender}
              align={msg.sender === 'user' ? 'right' : 'left'}
              variant={msg.sender === 'user' ? 'primary' : 'default'}
              timestamp={msg.timestamp}
              showTimestamp={true}
              avatarInitials={msg.sender === 'bot' ? 'AI' : 'You'}
            />
          ))}
        </ChatBubble.List>
      </div>
      
      <div class='p-4 border-t dark:border-neutral-700 flex gap-2'>
        <Input
          value={inputValue}
          placeholder='Type your message...'
          onChange={(val) => inputValue(val)}
          onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
        />
        <Button onClick={sendMessage} color='primary'>Send</Button>
      </div>
    </div>
  );
};

Props

ChatBubble Props

Prop	Type	Default	Description
message	string	-	Message text content
content	HTMLElement | string | ChatContentItem[]	-	Rich content (overrides message)
title	string	-	Optional message title/heading
sender	"user" | "bot" | "other"	"bot"	Type of sender
avatar	string	-	Avatar image URL
avatarAlt	string	"Avatar"	Avatar alt text
avatarInitials	string	-	Initials for avatar fallback
status	"sent" | "delivered" | "read" | "error" | "sending"	-	Message status
statusText	string	-	Custom status text
showStatus	boolean	false	Display status indicator
align	"left" | "right"	"left"	Message alignment
variant	"default" | "primary"	Auto	Visual style variant
maxWidth	string	"max-w-lg"	Maximum width class
timestamp	string	-	Message timestamp
showTimestamp	boolean	false	Display timestamp
className	string	-	Additional CSS classes
id	string	Auto-generated	HTML id attribute
style	string | object	-	Inline styles

ChatBubbleList Props

Prop	Type	Default	Description
children	HTMLElement | HTMLElement[]	-	Chat bubble elements
spacing	"sm" | "md" | "lg"	"md"	Spacing between messages
className	string	-	Additional CSS classes
id	string	Auto-generated	HTML id attribute
style	string | object	-	Inline styles

ChatContentItem Interface

Property	Type	Description
type	"text" | "link" | "list"	Content type
content	string	Content text
href	string	Link URL (for type="link")

Accessibility

The ChatBubble component follows accessibility best practices:

• ✅ Semantic HTML structure with <li> elements
• ✅ Proper alt text for avatar images
• ✅ ARIA-compliant status indicators
• ✅ Keyboard-accessible links in content
• ✅ High contrast text in all variants
• ✅ Screen reader friendly timestamps