Message Role

The MessageRole component displays the role label for a conversation message (user, assistant, or system). It uses color-coded styling to distinguish between different roles and supports custom labels.

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

<div className="space-y-2">
  <MessageRole role="user" />
  <MessageRole role="assistant" />
  <MessageRole role="system" />
</div>

Component Variants

MessageRole

The MessageRole component displays a role label with color-coded styling.

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

<MessageRole role="assistant" />

Prop	Type	Default
`role`	`"user" \| "assistant" \| "system"`	-
`assistantLabel?`	`string`	`"assistant"`
`clientLabel?`	`string`	`"user"`
`systemLabel?`	`string`	`"system"`
`className?`	`string`	`undefined`

Usage

Basic Usage

Display role labels with default styling.

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

<div className="space-y-2">
  <MessageRole role="user" />
  <MessageRole role="assistant" />
  <MessageRole role="system" />
</div>

Custom Labels

Customize the labels for each role.

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

<div className="space-y-2">
  <MessageRole role="user" clientLabel="You" />
  <MessageRole role="assistant" assistantLabel="AI Assistant" />
  <MessageRole role="system" systemLabel="System Message" />
</div>

Custom Styling

Apply custom classes to override default styling.

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

<MessageRole 
  role="assistant" 
  className="text-lg font-bold uppercase"
/>

Color Coding

The component applies different text colors based on role:

user: text-client (typically blue)
assistant: text-agent (typically green)
system: text-subtle (muted color)

Integration

The MessageRole component is typically used within MessageContainer to display the role label for each message in a conversation. It's designed to work with the Conversation component's label customization system.

On this page