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>

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".

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 state and metrics)