Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Message Highlight Chat Block for Ark UI

A docs team thread where selecting words in a message adds a note beside the thread: the phrase becomes a mark, a pane lists notes with Edit, Remove and Jump, and a sentence menu serves the keyboard.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Keep a note on the exact words that matter with this message highlight chat for React with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for the Docs team thread of Glossmark, a documentation team's chat, with a Notes pane at its end. Select words inside one message from a teammate and an "Add note" button appears in that message's footer; for the keyboard every teammate's message has a Dropdown Menu named Highlight a sentence. A note Input opens under the message and Enter saves: the phrase becomes a mark, and a card with the phrase quoted, the note, Edit, Remove and Jump joins the pane. On a phone a Toggle Group swaps Chat and Notes. The composer's Shine Button is the only colored control, the frame is ruled by Guides, and everything moves with CSS only.

FAQ

What stays in the page, and how do I make it real?

Everything. The thread and the two starting notes are typed, replies to what you send come from a short script and notes live in this page's state only. A real version saves a note as the message id, the start and end offsets and the text, and reads them back into notes; the marks, the pane and Jump are all drawn from that list.

How are the marks kept?

As character offsets into the message text, never as positions in the page. A message is cut into plain pieces and marked pieces by one helper, each piece carries its start offset, and a selection is turned back into offsets by reading those. A re-render, a new note or a removed one cannot move a mark. Two notes cannot overlap, and the status line says so if you try.

How do I add a note without a pointer?

Each teammate's message has a Highlight a sentence button in its footer. It lists the message's sentences, and choosing one opens the note field for it. In the field, Enter saves and Escape cancels, and on saving focus moves to the Notes heading. Edit and Remove are buttons on each card.

What does Jump do?

It scrolls the log, never the page, so the message sits about a third from the top, rings it for a moment and focuses it. On a phone it switches to Chat first. With reduced motion the ring stays until the next jump.

What if the selection is not usable?

A selection that spans two messages, or starts in your own message, is ignored: the button only appears for words inside one teammate's message, and the status line states the phrase. Words that already have a note say "Those words already have a note."

How does it work on a phone?

Below the medium breakpoint a Chat and Notes switch sits under the top bar and one view shows at a time. Selecting words works with a long press, and the footer button appears the same way. The window keeps its height and only the log scrolls, even at 320 px wide.