Long message collapsePro

Long messages fold at a paragraph break with one faded line of the next, say how much is hidden, and keep your place when they fold back.

Markdown

On this page

ProA rooftop planting brief folds at a paragraph break with one faded line of the next, and says how much is left.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/long-message-collapse

Usage

tsx

import { LongMessageContent } from "@/components/ui/chatcn/pro/long-message-collapse"

<Message from="user">
  <LongMessageContent>{text}</LongMessageContent>
</Message>

A drop-in for MessageContent: same bubble, same 15/24 prose, so collapsed and ordinary messages sit in one thread. It measures where each paragraph starts (block elements for Markdown, blank lines for plain text) and ends the collapsed view on the last break that fits maxHeight, plus the first line of the next paragraph under a fade exactly one line tall. With no break in range it cuts on a line, never through one. Show all names the hidden line count. Collapsing keeps the button where it was on screen by moving the nearest scroll area, so the reader stays on the message. A reply that streams in is never collapsed under the reader; once it finishes it stays open with Show less. Tabbing to a link under the fade opens the message first.

Examples

States

ProShort, collapsed, open, one long paragraph cut on a line, a streaming reply, not sent, and collapsing off.

Props

Prop	Type	Notes
`maxHeight`	`number`	Collapsed height before the faded line, in px. Default 288
`minShare`	`number`	Shortest share of `maxHeight` to end on a break. Default 0.4
`expanded`, `defaultExpanded`, `onExpandedChange`	`boolean`
`collapsible`	`boolean`	Turn collapsing off. Default true
`labels`	`Partial<LongMessageLabels>`	Every string, for translation
...	`ComponentProps<"div">`	Passed to `MessageContent`

Keyboard

Key	Action
Enter or Space on Show all	Open or fold the message

Accessibility

The toggle is a button with aria-expanded and aria-controls pointing at the text.
Screen readers read the whole message: the fade is visual only.
Focus that lands under the fade opens the message instead of focusing something hidden.

Motion

None. Opening and folding are instant: they happen dozens of times a day, often from the keyboard, and the scroll correction must land in the same frame.