Conversation
Live scrolling transcript with roles, karaoke text, and function-call cards.
Installation
pnpm dlx shadcn@latest add @pipecat/conversationInstalls two files: conversation.tsx (scroll container + connected wrapper) and
conversation-message.tsx (message row, role label, content renderer, function-call card,
thinking indicator).
Usage
import { Conversation } from "@/components/pipecat/conversation";
import { TextInput } from "@/components/pipecat/text-input";
<div className="flex h-96 flex-col rounded-xl border">
<Conversation assistantLabel="Agent" clientLabel="You" />
<div className="border-t p-3">
<TextInput />
</div>
</div>;Messages stream from Pipecat's built-in conversation store (usePipecatConversation).
Bot text renders karaoke-style by default — spoken words in the foreground color, upcoming
words muted. Auto-scroll follows the newest message unless the user scrolls away.
Role labels use --agent-foreground and --client-foreground. Custom role surfaces can
pair bg-agent text-agent-foreground or bg-client text-client-foreground; see
theming for the background and foreground tokens.
Key props
| Prop | Type | Description |
|---|---|---|
textRenderMode | "karaoke" | "captions" | "instant" | How bot speech text renders |
assistantLabel / clientLabel / systemLabel | string | Role labels |
noFunctionCalls | boolean | Hide function-call rows |
functionCallRenderer | FunctionCallRenderer | Replace function-call rendering per call |
botOutputRenderers | Record<string, BotOutputRenderer> | Custom renderers by aggregation type |
reverseOrder | boolean | Newest first; auto-scroll targets the top |
empty | ReactNode | View-only: custom empty state |
Requires a bot with RTVI 1.1.0+ (BotOutput events); the connected component explains this in its empty state when unsupported.