Conversation

The Conversation component displays real-time conversation history between users and AI assistants. It automatically integrates with the Pipecat Client SDK to show messages, connection states, and provides smooth scrolling behavior.

import { Conversation, ConversationProvider } from "@pipecat-ai/voice-ui-kit";

<ConversationProvider>
  <div className="h-96 border rounded-lg">
    <Conversation />
  </div>
</ConversationProvider>

Connection States

The component displays different UI based on connection state:

• No messages, connecting: Shows "Connecting to agent..." message
• No messages, not connected: Shows "Not connected to agent" message with description
• No messages, connected: Shows "Waiting for messages..." message
• Has messages: Displays message list with scrolling

Scrolling Behavior

The component implements smart scrolling:

• Automatically scrolls to bottom when new messages arrive
• Only scrolls if the user is already at the bottom (doesn't interrupt reading)
• Tracks scroll position to determine if user is at bottom
• Respects noAutoscroll prop to disable automatic scrolling entirely

Integration

The Conversation component uses:

• usePipecatConversation hook to get messages from the conversation store
• usePipecatClientTransportState to determine connection state
• MessageContainer and MessageContent components to render individual messages
• TextInput component for user input

It must be used within:

• PipecatClientProvider context (for transport state)
• ConversationProvider context (for message store)