Chat Bubble

Message containers for chat interfaces

Basic

Start and End Alignment

Preview Code Auto

It's over Anakin,
I have the high ground.

You underestimate my power!

Div(
    Div(
        "It's over Anakin,",
        Br(),
        "I have the high ground.",
        cls="chat-bubble"
    ),
    cls="chat chat-start"
),
Div(
    Div("You underestimate my power!", cls="chat-bubble"),
    cls="chat chat-end"
)

Colors

Color Variants

Preview Code Auto

What kind of nonsense is this

Put me on the Council and not make me a Master!??

That's never been done in the history of the Jedi. It's insulting!

Calm down, Anakin.

You have been given a great honor.

To be on the Council at your age.

It's never happened before.

messages = [
    {'text': 'Message 1', 'color': 'primary', 'align': 'start'},
    {'text': 'Message 2', 'color': 'secondary', 'align': 'start'},
    {'text': 'Message 3', 'color': 'accent', 'align': 'start'},
    {'text': 'Response 1', 'color': 'info', 'align': 'end'},
    {'text': 'Response 2', 'color': 'success', 'align': 'end'},
    {'text': 'Response 3', 'color': 'warning', 'align': 'end'},
    {'text': 'Response 4', 'color': 'error', 'align': 'end'}
]

# Chat message template
def create_colored_message(msg):
    return Div(
        Div(
            msg['text'],
            cls=f"chat-bubble chat-bubble-{msg['color']}"
        ),
        cls=f"chat chat-{msg['align']}"
    )

# Usage
Div(
    *(create_colored_message(msg) for msg in messages)
)

Avatars

With Avatar

Chat bubbles with user avatars

Preview Code Auto

It was said that you would destroy the Sith, not join them.

It was you who would bring balance to the Force

Not leave it in Darkness

avatar = Div(
        Img( src="https://picsum.photos/40?random=1",
            cls="w-10 rounded-full"
        ),
        cls="chat-image avatar"
    )

Div(
    avatar,
    Div("Message content", cls="chat-bubble"),
    cls="chat chat-start"
)

Avatar with Header/Footer

Preview Code Auto

Obi-Wan Kenobi12:45

You were the Chosen One!

Anakin Skywalker12:46

I hate you!

avatar = Div(
    Div(
        Img(src="...", cls="w-10 rounded-full"),
        cls="chat-image avatar"
    )
)

# Chat message template
def create_message(msg):
    return Div(
        avatar,
        Div(
            msg['name'],
            Time(msg['time'], cls="text-xs opacity-50"),
            cls="chat-header"
        ),
        Div(msg['text'], cls="chat-bubble"),
        Div(msg['footer'], cls="chat-footer opacity-50"),
        cls=f"chat chat-{msg['align']}"
    )

# Usage
Div(
    *(create_message(msg) for msg in messages)
)

Message Metadata

Preview Code Auto

System Alert2 hours ago

Server maintenance scheduled

System Alert1 hour ago

Maintenance starting now

# Message data
messages = [
    {
        'name': 'System Alert',
        'time': '2 hours ago',
        'text': 'Server maintenance scheduled',
        'footer': 'Priority: High'
    },
    {
        'name': 'System Alert',
        'time': '1 hour ago',
        'text': 'Maintenance starting now',
        'footer': 'Status: Ongoing'
    }
]

# Message template
def create_system_message(msg):
    return Div(
        Div(
            msg['name'],
            Time(msg['time'], cls="text-xs opacity-50"),
            cls="chat-header"
        ),
        Div(msg['text'], cls="chat-bubble"),
        Div(msg['footer'], cls="chat-footer opacity-50"),
        cls="chat chat-start"
    )

# Usage
Div(
    *(create_system_message(msg) for msg in messages)
)

Class Reference

Class	Type	Description
chat	Component	Base chat container
chat-image	Part	Author image
chat-header	Part	Text above the chat bubble
chat-footer	Part	Text below the chat bubble
chat-bubble	Part	Chat bubble
chat-start	Placement	Aligns chat to start horizontally (required)
chat-end	Placement	Aligns chat to end horizontally (required)
chat-bubble-neutral	Color	neutral color for chat-bubble
chat-bubble-primary	Color	primary color for chat-bubble
chat-bubble-secondary	Color	secondary color for chat-bubble
chat-bubble-accent	Color	accent color for chat-bubble
chat-bubble-info	Color	info color for chat-bubble
chat-bubble-success	Color	success color for chat-bubble
chat-bubble-warning	Color	warning color for chat-bubble
chat-bubble-error	Color	error color for chat-bubble

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo