shadcn.io is not affiliated with official shadcn/ui
System Messages Chat Block for Ark UI
A project channel where the system lines are the content: five event kinds with their own glyphs, runs of events that fold into one row, compact message lines, and an All, Events, Messages filter with counts.
Installation
Overview
Make the system lines of a channel worth reading, with this system messages chat for React with Ark UI. A framed window for Feedhall, a team-feed tool, shows five kinds of event, each with its own glyph and layout: a join, a topic change drawn old to new, a file shared with its name and size, a call with its length and an integration connected with a lettermark tile. Events that follow one another fold into one row ("4 events: Ines joined, Kai changed the topic, ...") that opens as a Collapsible when pressed, and people's messages sit between them as compact lines. A Toggle Group under the top bar filters the log in place to All, Events or Messages, each with a count worked out from the log. The composer posts your message and a teammate answers from a short typed script, with a Typing Indicator Text wait. No colour marks the events: a glyph and a word do.
FAQ
What stays in the page, and how do I make it real?
Everything. The channel's entries are typed in this file, your message and the teammate's reply go into local state, and the line under the composer says nothing is sent. To wire it for real, map your service's events to the kind values (join, topic, file, call, app, msg) and send post's text to your channel where the code says so.
How do events fold into one row?
A pure function, groupsOf, walks the visible entries and gathers each run of two or more events into one group; a lone event stays a line of its own. The folded row names the first two events and the count, and opens to the full list, which is out of keyboard reach while closed.
How do the filters and counts work?
The counts are read from the log, not typed: Events counts the event entries and Messages the rest. Choosing a filter hides the other kind in place and the runs are recomputed over what is left, so with Events chosen the log folds into a single run. Sending a message while Events is shown switches back to All.
How are the five event kinds drawn?
Each has its own glyph and a detail line: the topic change reads old, an arrow that mirrors in right-to-left, then new; a file shows its name and size; a call its length and people; an integration a two-letter tile and the service name. The glyphs and layouts are all in the page, with the unused ones hidden.