React Components

# Message Bubble

_The **Message Bubble** component is designed to display messages in a conversational interface._

Hello, how can I help you?

## Overview

---

The **Message Bubble** component is designed to display messages in a conversational interface.

It can be used in various contexts, such as customer support chats, messaging applications, or even internal communication tools within an organization.

<table class="_table_e3iru_2 _table--md_e3iru_59 _table--striped_e3iru_167 _identity-card__table_75e8e_7" data-ods="table" data-storybook="table"><tbody><tr><th scope="row">Name</th><td>Message Bubble</td></tr><tr><th scope="row">Also known as</th><td>-</td></tr><tr><th scope="row">Links</th><td><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="http://localhost/TODO" target="_blank">Design <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://github.com/ovh/design-system/tree/master/packages/ods-react/src/components/message-bubble" target="_blank">Github<span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a></td></tr></tbody></table>

## Usage

---

The **Message Bubble** component is used to display individual messages within a conversation or chat interface.

Common usages include:

-   Displaying user-generated text messages in a chat window
-   Showing system messages, like "Conversation started" or "User is typing...", to provide context and feedback to users
-   Using the component in a conversational AI interface to display AI-generated responses, complete with typing indicators and support for structured content

### Dos & Don'ts

| ✅ Do |
| --- |
| - Use within a conversational interface or a similar context where messages are exchanged between users or between a user and an AI assistant |
| - Leverage the sender information features (Avatar, sender name) to provide clear context about who sent the message |
| - Apply distinct visual treatments for different sender types (User, AI assistant, System) to enhance user understanding and engagement |

| ❌ Don't |
| --- |
| - Don't use the Message Bubble component as a replacement for a text input field; it's meant for displaying messages, not for user input |
| - Don't use the component in a way that could lead to confusion about the sender's identity or the message's content |

### Best Practices in Context

1.  **Message Bubble**
2.  **Content**

## Behavior

---

The component supports several states that reflect its current condition or the status of the message:

-   **Typing**: Indicates that the message is being either typed by a human or generated by an AI assistant.
    
-   **Error**: Displays an error state when message delivery fails, providing visual feedback to the user