# ChatMessage

Display a chat message with icon, avatar, and actions.

## Key Props

- `parts`: to display the message content using the AI SDK v5 format.
- `side`: to display the message on the left or right.
- `variant`: to change style of the message.
- `icon`: to display an [Icon](/docs/components/icon) component next to the message.
- `avatar`: to display an [Avatar](/docs/components/avatar) component next to the message.
- `actions`: to display actions below the message that will be displayed when hovering over the message.

## Usage

```vue
<UChatMessage
  <!-- props here -->
/>
```