Hero live chatPro

A hero whose main object is a working chat run: a scripted question with tool calls, sources and a streamed answer that visitors can replay, stop or take over by typing.

Markdown

On this page

ProA hero whose main object is a working chat run: a search, two page reads, three sources and a streamed answer. Replay it, stop it or type to take over.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/hero-live-chat

Usage

tsx

import { HeroLiveChat } from "@/components/ui/chatcn/pro/hero-live-chat"
import { script } from "@/lib/chatcn-stream"

const RUN = script().user("Which grid operators publish 15 minute load data?").assistant().text(answer).build()

<HeroLiveChat title="Research that shows its reading." run={RUN} onTakeover={keepForSignup} />

Build the run once, at module level, with script() from the free stream helpers: tool calls, sources and text with their real timings. It plays when the panel scrolls into view and pauses when it scrolls away, so nobody misses the answer. It is drawn by the free conversation, message, sources and composer components, so it looks exactly like the product.

A visitor who types takes over: the script stops where it is, their message joins the thread and takeoverReply streams back (by default, an honest note that this page plays one recorded question). onTakeover gets the text, so you can keep it for after sign up.

Every section is full width with a 16 px gutter on phones and 32 px from 768 px, content capped at 1200 px. Layout follows the section's own width through a container query, not the viewport, so a section in a narrow column lays out like a phone.

Examples

Stacked with a custom takeover

The chat under the text, a takeover reply that quotes the visitor, and the message handed to the page.

ProThe chat under the text, a takeover reply that quotes the visitor, and the message handed to the page.

Props

Prop	Type	Notes
`title`	`ReactNode`	Required. One idea; it balances over two or three lines
`description`	`ReactNode`	The paragraph under or beside the headline
`actions`	`ReactNode`	Buttons or links under the paragraph
`run`	`ChatcnScript`	Required. The scripted run, a module constant
`takeoverReply`	`string \| (text) => string`	What streams back when a visitor types
`onTakeover`	`(text) => void`	The visitor's message
`placeholder`	`string`	Default "Ask your own question…"
`replayLabel`, `hint`		Default "Replay"; `hint` sits beside it
`height`	`number \| string`	Chat panel height. Default 600
`speed`	`number`	Playback rate. Default 1
`layout`	`"start" \| "stacked"`	Chat beside the text from 1024 px, or under it

Keyboard

Key	Action
`Enter`	Sends your own message and takes over. Never during IME composition
`Escape`	Stops the answer while it streams
`Tab`	Reaches sources, tool call details, the composer and Replay

Accessibility

The section is labelled by its headline. Heroes use an h1, other sections an h2; render one hero per page.
The answer is announced once it finishes, not per token, through the conversation's polite live region.
Stop sits in the send button's place while the run streams, as in the product.

Motion

Text appends as it streams, with no per word effects. The thread sticks to the bottom only while the visitor is at the bottom.
Under reduced motion the run plays fast enough to read as already there.
Offscreen and in a background tab the run waits where it was.