Conversation

Scroll container for a chat thread. Stays pinned to the bottom while tokens stream and lets go when the user scrolls up.

What changed in the Q3 pricing?

Two things: the Team plan moved from €12 to €14 per seat, and annual billing now gets two months free instead of one.

Which customers are affected?

Everyone on monthly Team billing at renewal. Annual customers keep their price until their term ends.

Draft the email.

Here's a first draft. I kept it short and led with the annual discount so the change reads as an option, not only a price rise.

Installation

pnpm dlx shadcn@latest add @jds/conversation

Usage

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

<Conversation>
  <ConversationContent>{/* messages */}</ConversationContent>
  <ConversationScrollButton />
</Conversation>

Examples

Empty state

How can I help?

Ask about orders, refunds or shipping.

API Reference

Conversation

Prop	Type	Default
`bubbles` Who gets a bubble. Applies to every Message inside.	"user" \| "all" \| "none"	"user"
`shape` Bubble corners: a tail toward the speaker, fully round, or squarer.	"tail" \| "round" \| "square"	"tail"
`density` Spacing between and inside messages. Compact suits side panels.	"comfortable" \| "compact"	"comfortable"

ConversationEmpty

Prop	Type	Default
`title` Heading shown before the first message.	string	"Start a conversation"
`description` Supporting text.	string	–
`icon` Optional icon above the title.	ReactNode	–

Context Meter Message