# React Components/Message Bubble

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `error` | `` | No | false | Indicates an error state |
| `typing` | `` | No | false | When typing a message |
| `variant` | `` | No | MESSAGE_BUBBLE_VARIANT.human | Visual variant of the message bubble |


## Examples


### Anatomy Tech

```tsx
{
  tags: ['!dev'],
  render: ({}) => <MessageBubble>
      Hello, how can I help you?
    </MessageBubble>
}
```

### Default

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

### Demo

```tsx
{
  argTypes: orderControls({
    children: {
      table: {
        category: CONTROL_CATEGORY.slot
      },
      control: 'text'
    },
    error: {
      table: {
        category: CONTROL_CATEGORY.general
      },
      control: 'boolean'
    },
    typing: {
      table: {
        category: CONTROL_CATEGORY.general
      },
      control: 'boolean'
    },
    variant: {
      table: {
        category: CONTROL_CATEGORY.design,
        defaultValue: {
          summary: MESSAGE_BUBBLE_VARIANT.human
        },
        type: {
          summary: 'MESSAGE_BUBBLE_VARIANT'
        }
      },
      control: {
        type: 'select'
      },
      options: MESSAGE_BUBBLE_VARIANTS
    }
  }),
  args: {
    children: 'Hello, how can I help you?'
  }
}
```

### Error

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

### Overview

```tsx
{
  tags: ['!dev'],
  parameters: {
    layout: 'centered'
  },
  render: ({}) => <MessageBubble>
      Hello, how can I help you?
    </MessageBubble>
}
```

### Theme Generator

```tsx
{
  parameters: {
    layout: 'fullscreen'
  },
  tags: ['!dev'],
  render: ({}) => <div style={{
    display: 'flex',
    flexDirection: 'column',
    gap: '8px'
  }}>
      {MESSAGE_BUBBLE_VARIANTS.map(variant => <div key={variant} style={{
      display: 'flex',
      flexDirection: 'column',
      gap: '8px'
    }}>
          <MessageBubble variant={variant}>
            {String(variant)} message
          </MessageBubble>
          <MessageBubble variant={variant} error>
            {String(variant)} error message
          </MessageBubble>
          <MessageBubble variant={variant} typing />
        </div>)}
    </div>
}
```

### Typing

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

### Variant

```tsx
{
  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>
    </>
}
```