Chat Bubble

Chat bubble facilitates fluid exchange of information.

Chat bubble facilitates fluid exchange of information.

There are two types of chat messages: Outgoing Message and Incoming Message.

An outgoing message is sent by the user, right-aligned and styled to differentiate from incoming messages, often including a timestamp and status indicator.

An incoming message is received by the user, typically left-aligned and styled to distinguish it from outgoing messages, often including a timestamp and sender information.

This variant comes with just a message bubble.

This variant includes a message bubble and metadata for showing timestamp, meta item and urgency of the message.

This variant comes with just a message bubble.

This variant includes a message bubble and metadata for showing timestamp, meta item and urgency of the message.

This variant includes a message bubble, avatar and metadata for showing timestamp, meta item and urgency of the message.

Structure - Outgoing Message - Default

Structure - Outgoing Message - With Metadata

Structure - Incoming Message - Default

Structure - Incoming Message - With Metadata

Structure - Incoming Message - With Avatar and Metadata

While in the sending state, the outgoing message displays an opacity of 48% to indicate that it has not yet been delivered.

Sending State of Outgoing Message

If the outgoing message fails, you can attempt to resend it by retrying.

Error State of Outgoing Message

It is recommended to tag a message urgent to bring attention to it. An urgent message within a thread will interrupt the conversation flow, categorizing it as a distinct entity separate from the ongoing discussion.

Urgent Message

You can show actions relevant to a chat bubble on hover.

Message Grouping Logic

• Messages sent within less than 5 minutes of each other will be grouped together and treated as a single conversation thread.
• If the time interval between consecutive messages is 5 minutes or more, it will be considered a new entry.

Timestamp Display

• For messages grouped in the same thread, display the timestamp only for the first message.
• For new message entries, display a timestamp at the start of the entry to indicate the time gap.

Note: In both the cases, the status is shown for the last message, indicating that all previous messages in the thread have been delivered.

New Message Interval

Chat messages are highly customizable and can incorporate a wide range of components to meet diverse use cases.

Custom Chat Message

It is recommended to use a modal for forwarding messages.

Forwarding Messages using a modal

It is recommended to avoid showing avatars and status in case of a space constraint.

Avoid Showing Avatars and Status in Case of a Space Constraint

It is recommended to display the message timestamp for handling time critical scenarios effectively.