Conversation Panel

The ConversationPanel component provides a tabbed interface combining conversation display and metrics. It includes a conversation tab for message history and a metrics tab for performance data.

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

<div className="h-96 w-full">
  <ConversationPanel />
</div>

Prop	Type	Default
`noConversation?`	`boolean`	`false`
`noMetrics?`	`boolean`	`false`
`conversationElementProps?`	`Partial<ConversationProps>`	`undefined`
`textMode?`	`"llm" \| "tts"`	`"llm"`
`noTextModeToggle?`	`boolean`	`false`
`noTextInput?`	`boolean`	`false`

Usage

Conversation Only

Show only the conversation tab.

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

<div className="h-96 w-full">
  <ConversationPanel noMetrics={true} />
</div>

Metrics Only

Show only the metrics tab.

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

<div className="h-96 w-full">
  <ConversationPanel noConversation={true} />
</div>

Tabs

The panel includes two tabs:

Conversation: Displays message history using the Conversation component
Metrics: Displays performance metrics using the Metrics component

The default tab is "conversation" unless noConversation is true, in which case it defaults to "metrics".

Text Mode Toggle

When noTextModeToggle is false, a button appears in the panel header that allows users to toggle between:

LLM: Shows text as it's generated by the LLM
TTS: Shows text as it's spoken by the TTS

Integration

The ConversationPanel component uses:

Tabs component for tabbed interface
Conversation component for message display
Metrics component for performance data
Panel component for consistent styling

It must be used within:

PipecatClientProvider context (for conversation and metrics)
ConversationProvider context (for conversation messages)