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 the target edge when new messages arrive (bottom in normal mode, top in reverse mode)
• Only scrolls if the user is already at the target edge (doesn't interrupt reading)
• Tracks scroll position to determine if user is at the edge
• Respects noAutoscroll prop to disable automatic scrolling entirely

Function Calls

When the LLM invokes a function (tool use), function call entries appear as separate items in the conversation timeline. Each entry shows the function name and a status indicator, with arguments and results collapsed by default using a collapsible UI.

Function call display requires @pipecat-ai/client-js >= 1.6.0 and corresponding transport versions (@pipecat-ai/daily-transport >= 1.6.0 or @pipecat-ai/small-webrtc-transport >= 1.9.0).

To disable function call rendering while still capturing the data in the store, set noFunctionCalls={true}.

To customize how function calls are rendered, use the functionCallRenderer prop:

<Conversation
  functionCallRenderer={(fc) => {
    switch (fc.function_name) {
      case "get_weather":
        return <WeatherCard functionCall={fc} />;
      default:
        return <FunctionCallContent functionCall={fc} />;
    }
  }}
/>

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
• FunctionCallContent component to render function call entries
• TextInput component for user input

It must be used within:

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