AI Message

A message component that displays a chat interface message from either a user or an AI.

Hello, how are you?

I am fine, thank you!

What is the weather in Tokyo?

The weather in Tokyo is sunny.

Installation

npx kibo-ui@latest add ai

Features

Displays messages from both the user and AI assistant with distinct styling.
Includes avatar images for message senders with fallback initials.
Shows the sender's name through avatar fallbacks.
Automatically aligns user and assistant messages on opposite sides.
Uses different background colors for user and assistant messages.
Accepts any React node as message content.

Notes

Always render the AIMessageContent first, then the AIMessageAvatar. The AIMessage component is a wrapper that determines the alignment of the message.

Examples

Render Markdown

We can use the AIResponse component to render markdown content.