Pinned messagePro

The strip at the top of a thread that holds its pinned messages. Press it to jump to the pin and step to the next one.

Markdown

On this page

ProA meetup thread with three pins. Press the strip to walk them in turn; each jump marks its message.

Installation

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

Usage

tsx

import { PinnedMessage } from "@/components/ui/chatcn/pro/pinned-message"

<PinnedMessage pins={pins} onUnpin={unpin} />

<Message from="assistant" data-message-id={message.id}>…</Message>

Pressing the strip scrolls the pinned message to the middle of its scroll area and marks it with a short accent tint that fades out, then the strip steps to the next pin, so pressing again walks every pin in turn. The rail at the start has one segment per pin with the current one in the accent; past four pins it scrolls to follow. With more than one pin, a list button opens all of them. jumpToMessage finds [data-message-id] or an element id; pass onJump to scroll a virtualized list yourself.

Examples

States

ProOne pin, three on the second, six with the rail scrolled, a long read only pin, and disabled.

Props

Prop	Type	Notes
`pins`	`PinnedItem[]`	`{ id, text, author? }`, newest first
`index`, `defaultIndex`, `onIndexChange`	`number`	The pin on the strip
`onJump`	`(id) => void`	Defaults to `jumpToMessage`
`onUnpin`	`(id) => void`	Shows the unpin button
`disabled`	`boolean`
`labels`	`Partial<PinnedMessageLabels>`	Every string, for translation

Keyboard

Key	Action
Enter or Space	Jump to the pin and step to the next
Up and Down on the strip	Change the pin shown without jumping

Accessibility

The strip is a button named with the position and the pin's text.
The list marks the current pin with aria-current.

Motion

The jump scrolls smoothly and the tint fades over 1.6 s after the scroll lands. The excerpt swaps in 150 ms and the rail slides in 200 ms. Reduced motion jumps instantly and keeps the fade.