Skip to content
Chat & AI

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

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard
default.cronus
app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component ConversationDefault layout:inline style:conversation {
  label "default"
  text "What is Cronus?"
  text "A declarative full-stack language that compiles to one binary."
}

page "/audit/conversation/default" type:custom {
  use ConversationDefault
}

API Reference

Generated from the component's exported types.

ConversationProps

Extends HTMLAttributes<HTMLDivElement>

Skip ConversationProps props table
PropTypeDefaultDescription
ref
Ref<HTMLDivElement>—Ref forwarded to the underlying DOM node.
className
string—Additional class names merged onto the root.
children
ReactNode—Contents of the component.
id
string—DOM id of the root element.

ConversationContentProps

Extends HTMLAttributes<HTMLDivElement>

Skip ConversationContentProps props table
PropTypeDefaultDescription
ref
Ref<HTMLDivElement>—Ref forwarded to the underlying DOM node.
className
string—Additional class names merged onto the root.
children
ReactNode—Contents of the component.
id
string—DOM id of the root element.

ConversationEmptyStateLabels

Skip ConversationEmptyStateLabels props table
PropTypeDefaultDescription
title*
string——
description*
string——

ConversationEmptyStateProps

Extends HTMLAttributes<HTMLDivElement>

Skip ConversationEmptyStateProps props table
PropTypeDefaultDescription
ref
Ref<HTMLDivElement>—Ref forwarded to the underlying DOM node.
title
string——
description
string——
icon
ReactNode——
labels
Partial<ConversationEmptyStateLabels>—Override default English strings.
className
string—Additional class names merged onto the root.
children
ReactNode—Contents of the component.
id
string—DOM id of the root element.

ConversationScrollButtonLabels

Skip ConversationScrollButtonLabels props table
PropTypeDefaultDescription
scrollToBottom*
string——

ConversationScrollButtonProps

Extends ButtonProps

Skip ConversationScrollButtonProps props table
PropTypeDefaultDescription
labels
Partial<ConversationScrollButtonLabels>—Override default English strings.
variant
string—Visual variant.
size
string—Control size.
asChild
boolean—Render as the child element via Slot.
disabled
boolean—Disables pointer and keyboard interaction.
type
string—Native type of the underlying element.
children
ReactNode—Contents of the component.
className
string—Additional class names merged onto the root.