║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Conversation description: A scrolling conversation container with auto-scroll and sticky-to-bottom behavior for chat interfaces. featured: true component: true

<ComponentPreview name="conversation-demo" description="A live scrolling conversation visualization." />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx @elevenlabs/cli@latest components add conversation

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install use-stick-to-bottom

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="conversation" title="components/ui/conversation.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </CodeTabs>

Usage

import {
  Conversation,
  ConversationContent,
  ConversationEmptyState,
  ConversationScrollButton,
} from "@/components/ui/conversation"

Basic Conversation

<Conversation>
  <ConversationContent>
    {messages.map((message) => (
      <div key={message.id}>{message.content}</div>
    ))}
  </ConversationContent>
  <ConversationScrollButton />
</Conversation>

With Empty State

<Conversation>
  <ConversationContent>
    {messages.length === 0 ? (
      <ConversationEmptyState
        title="No messages yet"
        description="Start a conversation to see messages here"
      />
    ) : (
      messages.map((message) => <div key={message.id}>{message.content}</div>)
    )}
  </ConversationContent>
  <ConversationScrollButton />
</Conversation>

API Reference

Conversation

The main container component that manages scrolling behavior and sticky-to-bottom functionality.

Props

Extends all props from StickToBottom component from use-stick-to-bottom.

| Prop | Type | Description | | --------- | --------------- | ------------------------------------------- | | className | string | Optional CSS classes | | initial | "smooth" | Initial scroll behavior (default: "smooth") | | resize | "smooth" | Resize scroll behavior (default: "smooth") | | ...props | StickToBottom | All standard StickToBottom component props |

ConversationContent

Container for conversation messages.

Props

| Prop | Type | Description | | --------- | ----------------------- | ------------------------------- | | className | string | Optional CSS classes | | ...props | StickToBottom.Content | All StickToBottom.Content props |

ConversationEmptyState

Displays when there are no messages in the conversation.

Props

| Prop | Type | Description | | ----------- | ---------------- | -------------------------------------------- | | title | string | Title text (default: "No messages yet") | | description | string | Description text | | icon | ReactNode | Optional icon to display | | className | string | Optional CSS classes | | children | ReactNode | Custom content (overrides default rendering) | | ...props | HTMLDivElement | All standard div element props |

ConversationScrollButton

A scroll-to-bottom button that appears when the user scrolls up.

Props

| Prop | Type | Description | | --------- | ------------- | ------------------------- | | className | string | Optional CSS classes | | ...props | ButtonProps | All standard Button props |

Notes

• Built on top of use-stick-to-bottom for smooth scrolling behavior
• Automatically scrolls to bottom when new messages are added
• Scroll button only appears when user has scrolled away from the bottom
• Supports smooth scrolling animations
• Works with any message component structure
• This component is inspired by Vercel's AI SDK Conversation component with modifications for ElevenLabs UI

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║