Pins, stars & jump to date
Built in, no props needed. Pins are shared with the conversation; stars are personal.
Pinned messages
The pinned bar works even when the message is older than what's loaded - the package fetches the messages around it, then highlights it. Pins per conversation are capped by maxPinnedMessagesPerConversation; past it the server refuses (PIN_LIMIT_REACHED) and the pin is undone - see When the server refuses.
Starred messages
Clicking a pinned or starred row (or Enter on it) scrolls to the message and highlights it, loading older messages first if needed; the list stays open beside the chat. Data comes from GET message/pinned-messages and GET message/starred-messages (API keys pinnedMessages / starredMessages for query params). Replace the lists with the PinnedMessagesDrawer / StarredMessagesDrawer slots.
Jump to date
Every date separator (“Today”, “Yesterday”, “Mon, 6 Oct”) is a button that opens a Slack-style Jump to… menu:
If that day isn't loaded, the package loads older pages (20 messages each, at most 40 pages) until it reaches it, then scrolls to and highlights the day's first message. A day with no messages goes to the nearest day that has some (the earlier one on a tie). Days use the user's local time zone. Style the pill with classNames.dateDivider, or build your own control:
import { ChatDateJumpMenu, resolveJumpDateBounds, resolveJumpPreset, clampJumpDate, type JumpToPreset,} from "@realtimexsco/live-chat"; const { minDay, maxDay } = resolveJumpDateBounds(conversation.createdAt, oldestMessage?.timestamp); <ChatDateJumpMenu label="Today" minDay={minDay} maxDay={maxDay} onJump={(preset: JumpToPreset, date?: Date) => { // preset: "today" | "yesterday" | "lastWeek" | "lastMonth" | "beginning" | "specific" // date is set when preset === "specific" }}/>;resolveJumpPreset("lastWeek") returns local midnight for that preset (ms), and clampJumpDate(date, minDay, maxDay) keeps a chosen day inside the conversation's range.