Sticky message

Keep the nearest user prompt available while scrolling.

How should we organize settings?

Group related preferences together and give each section a clear name.

View code

import { Thread } from "@stack/ui/thread";
import { StickyMessage } from "@stack/ui/sticky-message";
import { Message } from "@stack/ui/message";

export default function Example() {
  return (
    <div className="h-80">
      <Thread.Root defaultScrollPosition="start">
        <Thread.Scroller>
          <StickyMessage.Root
            messages={[
              {
                messageId: "prompt",
                preview: "How should we organize settings?",
              },
            ]}
          >
            <StickyMessage.Trigger>
              <StickyMessage.Text />
            </StickyMessage.Trigger>
          </StickyMessage.Root>
          <Thread.Messages>
            <Thread.Content>
              <Thread.Item messageId="prompt" scrollAnchor>
                <Message.Root align="end">
                  <Message.Content>
                    How should we organize settings?
                  </Message.Content>
                </Message.Root>
              </Thread.Item>
              <Thread.Item messageId="reply">
                <div className="grid gap-6">
                  {Array.from({ length: 12 }, (_, index) => (
                    <p key={index}>
                      Group related preferences together and give each section a
                      clear name.
                    </p>
                  ))}
                </div>
              </Thread.Item>
            </Thread.Content>
          </Thread.Messages>
          <Thread.ScrollButton />
        </Thread.Scroller>
      </Thread.Root>
    </div>
  );
}

Usage

import { Thread } from "@stack/ui/thread";
import { StickyMessage } from "@stack/ui/sticky-message";
import { Message } from "@stack/ui/message";

Scroll past the prompt to reveal the sticky preview. IDs must match the corresponding Thread.Item elements.

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.

StickyMessage.Root

Also accepts native element props.

Prop	Type	Required	Description
`className`	`string`	No	Additional CSS classes for the underlying element.
`children`	`ReactNode`	No	Content rendered inside the component.
`messages`	`readonly StickyMessageItem[]`	Yes	Message IDs and previews used to identify the active sticky message.

StickyMessage.Trigger

Also accepts native element props.

Prop	Type	Required	Description
`children`	`ReactNode`	No	Content rendered inside the component.
`onClick`	`MouseEventHandler<HTMLButtonElement>`	No	Handle clicks before the built-in action. Prevent the default event to cancel that action.

StickyMessage.Text

Also accepts native element props.