Message Container

The MessageContainer component wraps individual conversation messages, displaying the message role and content in a structured format. It's typically used within the Conversation component to render each message in the conversation history.

import { MessageContainer } from "@pipecat-ai/voice-ui-kit";

<MessageContainer
  message={{
    role: "assistant",
    parts: [{ text: "Hello! How can I help you today?" }],
    createdAt: new Date().toISOString()
  }}
/>

Component Variants

MessageContainer

The MessageContainer component displays a single message with its role and content.

import { MessageContainer } from "@pipecat-ai/voice-ui-kit";

<MessageContainer
  message={{
    role: "user",
    parts: [{ text: "What's the weather like?" }],
    createdAt: new Date().toISOString()
  }}
/>

Prop	Type	Default
`message`	`ConversationMessage`	-
`assistantLabel?`	`string`	`"assistant"`
`clientLabel?`	`string`	`"user"`
`systemLabel?`	`string`	`"system"`
`botOutputRenderers?`	`Record<string, (content: string, metadata: { spoken: string; unspoken: string }) => React.ReactNode>`	`undefined`
`aggregationMetadata?`	`Record<string, { displayMode?: 'inline' \| 'block'; isSpoken?: boolean }>`	`undefined`
`classNames?`	`{ container?: string; messageContent?: string; role?: string; thinking?: string; time?: string; }`	`{}`

Usage

Basic Usage

Display a message with default styling.

import { MessageContainer } from "@pipecat-ai/voice-ui-kit";

<MessageContainer
  message={{
    role: "assistant",
    parts: [{ text: "Hello! How can I help you?" }],
    createdAt: new Date().toISOString()
  }}
/>

Custom Labels

Customize the labels for different message roles.

import { MessageContainer } from "@pipecat-ai/voice-ui-kit";

<MessageContainer
  message={{
    role: "assistant",
    parts: [{ text: "Hello!" }],
    createdAt: new Date().toISOString()
  }}
  assistantLabel="AI Assistant"
  clientLabel="You"
  systemLabel="System"
/>

Custom Styling

Apply custom classes to different parts of the message.

import { MessageContainer } from "@pipecat-ai/voice-ui-kit";

<MessageContainer
  message={{
    role: "user",
    parts: [{ text: "Custom styled message" }],
    createdAt: new Date().toISOString()
  }}
  classNames={{
    container: "border rounded p-4 bg-muted",
    role: "text-lg font-bold",
    messageContent: "mt-2"
  }}
/>

Multiple Parts

Messages can contain multiple parts (text chunks).

import { MessageContainer } from "@pipecat-ai/voice-ui-kit";

<MessageContainer
  message={{
    role: "assistant",
    parts: [
      { text: "First part. " },
      { text: "Second part. " },
      { text: "Third part." }
    ],
    createdAt: new Date().toISOString()
  }}
/>

Message Structure

The component expects a ConversationMessage object with:

role: "user" | "assistant" | "system"
parts: Array of ConversationMessagePart objects, each with:
- text: A string, ReactNode, or BotOutputText object (with spoken and unspoken properties)
- final: Boolean indicating if the part is finalized
- createdAt: ISO timestamp string
- aggregatedBy: Optional aggregation type for BotOutput content
createdAt: ISO timestamp string

If you use custom aggregatedBy values (anything other than the defaults "word" and "sentence"), pass aggregationMetadata so the UI knows whether those parts should render inline vs block and whether they should be included in karaoke-style speech progress.

Integration

The MessageContainer component uses:

MessageRole component to display the role label
MessageContent component to display the message content

It's typically used within the Conversation component to render individual messages from the conversation history.

On this page