AI Elements

Conversation

Auto-scrolling chat log with an empty state and jump-to-latest.

Import

tsx

import { Conversation } from "@cronus-ui/ui";

bash

npx cronus-ui add conversation

Examples

Empty state

The log before the first turn. Jump-to-latest appears once you leave the edge.

No messages yet

Start a conversation to see messages here

tsx

<Conversation className="h-64 rounded-xl border border-border">
  <ConversationContent>
    <ConversationEmptyState />
  </ConversationContent>
</Conversation>

API Reference

Generated from the component's exported types.

ConversationProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the underlying DOM node.

ConversationContentProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the underlying DOM node.

ConversationEmptyStateLabels

Prop	Type	Default	Description
`title`*	`string`	—	—
`description`*	`string`	—	—

ConversationEmptyStateProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the underlying DOM node.
`title`	`string`	—	—
`description`	`string`	—	—
`icon`	`ReactNode`	—	—
`labels`	`Partial<ConversationEmptyStateLabels>`	—	Override default English strings.

ConversationScrollButtonLabels

Prop	Type	Default	Description
`scrollToBottom`*	`string`	—	—

ConversationScrollButtonProps

Extends ButtonProps

Prop	Type	Default	Description
`labels`	`Partial<ConversationScrollButtonLabels>`	—	Override default English strings.