Marker

A note in a conversation's flow, like a status, a system line, or a labeled break.

Switched to a faster model for this chat.

<Marker>  <MarkerIcon>    <InfoIcon />  </MarkerIcon>  <MarkerContent>Switched to a faster model for this chat.</MarkerContent></Marker>

Installation

$ npx shadcn@latest add @constella/marker

Usage

import { Marker, MarkerContent, MarkerIcon } from "@/components/ai/marker";

<Marker>  <MarkerContent>Memory updated.</MarkerContent></Marker>

Place it between messages in a Message Scroller.

Composition

Marker├── MarkerIcon└── MarkerContent

Variant

Use the variant prop to set it off from the thread.

Memory updated.

Context compacted to fit the window.

Today

<Marker>  <MarkerContent>Memory updated.</MarkerContent></Marker><Marker variant="border">  <MarkerContent>Context compacted to fit the window.</MarkerContent></Marker><Marker variant="separator">  <MarkerContent>Today</MarkerContent></Marker>

Variant	Looks like
`default`	A plain note
`border`	A note over a hairline
`separator`	A centered label between two rules

Link

Use the render prop to make it a link or a button.

Branched from “Plan the launch”

<Marker render={<a href="/chat/plan" />}>  <MarkerContent>Branched from “Plan the launch”</MarkerContent>  <MarkerIcon>    <ArrowUpRightIcon />  </MarkerIcon></Marker>

Spinner

Render it as an output while work runs, so a screen reader announces each change, with a Spinner and a Shimmer on the text.

Searching the web…

<Marker render={<output />}>  <Spinner />  <MarkerContent>    <Shimmer>Searching the web…</Shimmer>  </MarkerContent></Marker>

API Reference

Marker

Prop	Type	Default
`variant`	`"default"`, `"border"`, `"separator"`	`"default"`
`render`	Base UI `render`

MarkerIcon is hidden from screen readers. Every part takes sx, applied last; Marker renders a div, the others a span.