Message Content

The MessageContent component renders the actual content of a conversation message, including text parts, thinking indicators, and timestamps. It handles multiple text parts and automatically shows a thinking indicator for empty messages.

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

<MessageContent
  message={{
    role: "assistant",
    parts: [{ text: "Hello! This is a message." }],
    createdAt: new Date().toISOString()
  }}
/>

Component Variants

MessageContent

The MessageContent component displays message content with thinking indicator and timestamp.

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

<MessageContent
  message={{
    role: "assistant",
    parts: [{ text: "Message content here" }],
    createdAt: new Date().toISOString()
  }}
/>

Prop	Type	Default
`message`	`ConversationMessage`	-
`classNames?`	`{ messageContent?: string; thinking?: string; time?: string; }`	`{}`

Usage

Basic Usage

Display message content with default styling.

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

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

Multiple Parts

Messages can contain multiple text parts that are rendered with proper spacing.

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

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

Empty Message (Thinking)

Empty messages automatically show a thinking indicator.

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

<MessageContent
  message={{
    role: "assistant",
    parts: [],
    createdAt: new Date().toISOString()
  }}
/>

Custom Styling

Apply custom classes to different parts of the content.

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

<MessageContent
  message={{
    role: "assistant",
    parts: [{ text: "Custom styled content" }],
    createdAt: new Date().toISOString()
  }}
  classNames={{
    messageContent: "text-lg leading-relaxed",
    thinking: "text-muted-foreground",
    time: "text-xs opacity-75"
  }}
/>

Behavior

The component:

Renders all text parts from message.parts array
Adds a space between consecutive text parts
Shows a Thinking component if the message has no parts or all parts are empty whitespace
Displays a formatted timestamp using toLocaleTimeString()

Message Parts

Each message part should have a text property containing a string. The component:

Renders text parts sequentially
Adds spaces between consecutive text parts
Handles empty or whitespace-only parts by showing thinking indicator

Integration

The MessageContent component is typically used within MessageContainer to render the content portion of a message. It uses the Thinking component to show loading/thinking states.

On this page