React Components

# Message Bubble

## Overview

---

Hello, how can I help you?

## Anatomy

---

MessageBubble

---

## MessageBubble

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [div attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div#attributes) . |
| 
error

 | `boolean` | - | `false` | Indicates an error state |
| 

typing

 | `boolean` | - | `false` | When typing a message |
| 

variant

 | `MESSAGE_BUBBLE_VARIANT` | - | `MESSAGE_BUBBLE_VARIANT.human` | Visual variant of the message bubble |

## Enums

---

### MESSAGE_BUBBLE_VARIANT

-   ai =`"ai"`
-   human =`"human"`

## Css Variables

---

| Token | Value | Preview |
| --- | --- | --- |
| --ods-message-bubble-ai-background-color | var(--ods-color-information-025) | 
 |
| --ods-message-bubble-background-color | var(--ods-message-bubble-error-background-color) | 

 |
| --ods-message-bubble-border-radius | calc(var(--ods-theme-border-radius) * 2) | 

 |
| --ods-message-bubble-error-background-color | var(--ods-color-critical-025) | 

 |
| --ods-message-bubble-error-text-color | var(--ods-color-critical-500) | 

 |
| --ods-message-bubble-human-background-color | var(--ods-color-neutral-050) | 

 |
| --ods-message-bubble-padding | calc(var(--ods-theme-padding-vertical) * 2) calc(var(--ods-theme-padding-horizontal) * 2) | 

 |
| --ods-message-bubble-text-color | var(--ods-message-bubble-error-text-color) | 

 |

## Examples

---

### Default

```jsx
{
  globals: {
    imports: `import { MessageBubble } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <MessageBubble>
      Hello, how can I help you?    </MessageBubble>
}
```

### Variant

This is a human message

This is an AI message

```jsx
{
  decorators: [story => <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '8px'
  }}>{story()}</div>],
  globals: {
    imports: `import { MESSAGE_BUBBLE_VARIANT, MessageBubble } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <MessageBubble variant={MESSAGE_BUBBLE_VARIANT.human}>
        This is a human message      </MessageBubble>
      <MessageBubble variant={MESSAGE_BUBBLE_VARIANT.ai}>
        This is an AI message      </MessageBubble>
    </>
}
```

### Error

```jsx
{
  globals: {
    imports: `import { MessageBubble } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <MessageBubble error>
      An error occurred while generating the response.    </MessageBubble>
}
```

### Typing

```jsx
{
  globals: {
    imports: `import { MessageBubble } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  parameters: {
    layout: 'centered'
  },
  render: ({}) => <MessageBubble typing />
}
```

## Recipes

---

Chat

Assistant2:58 PM

Welcome to the Chat recipe. Feel free to test the UI behavior by typing anything on your mind below.