Content v1.0.0

Chat Bubble

Conversational message display with sender alignment, avatars, and timestamps. Rounded style mimics iMessage with colored bubbles and tail corners. Flat style follows Slack's layout with inline names, timestamps, and indented text.

Rounded

iMessage-style chat bubbles with colored backgrounds and rounded corners

Options

Name Type Default Description
messages * Array required Array of hashes with :user_name, :content, :timestamp, :sent (Boolean)
show_avatars Boolean true Show avatar circles with initials
show_timestamps Boolean true Show timestamps below messages
grouped Boolean false Group consecutive same-user messages with reduced spacing

Flat

Slack-style flat messages with inline names and timestamps

Options

Name Type Default Description
messages * Array required Array of hashes with :user_name, :content, :timestamp, :sent (Boolean)
show_avatars Boolean true Show avatar squares with initials
show_timestamps Boolean true Show timestamps inline with names
grouped Boolean false Group consecutive same-user messages under one header

Changelog v1.0.0

- v1.0.0: Initial release with rounded and flat styles

Get Full Access

Unlock the source code for this component and all others. One-time payment for lifetime access.

Get Access Now