shadcn.io is not affiliated with official shadcn/ui
Chat Integration Comments Block for Solid
Four comment event rules, each with a switch and a channel, beside a drawn chat message that shows exactly what the rule in focus would post, in a Compact or Detailed size.
Installation
Overview
Send comment events to your team chat, and see the message before it exists, with this routing panel for Solid with Ark UI. A compact header holds the one primary, a Shine Button that says "Send a test". The frame is split in two. At the start are four rules (New comment, Reply in my thread, Mention, Resolved), each with a name you can press to preview it, a Switch and a Native Select for the channel. At the end is the preview: the message drawn the way a chat app shows it, with the app's name, a quote of the comment, the channel and its links, in a Compact or Detailed size chosen with a Toggle Group. A rule that is off draws a note in the same space, so the cell never changes height. Your team chat is named in words only, with a neutral two-letter tile; there is no logo, and nothing connects. It is built from Switch, Native Select, Toggle Group, Shine Button, Badge and Guides, with a CSS entrance only. For any product that posts comment alerts into a chat tool.
FAQ
How do I change the rules and channels?
Edit RULES (an id, the name and hint, and the sample author, thread and quote the preview draws), CHANNELS for the choices every rule offers, and START_ON and START_ROUTES for what is on and where it goes when the page opens. The preview is built from the rule's own fields, so a new rule needs no new drawing. Replace the two-letter tiles with a logo you have the right to use.
Why does the preview change when I press a rule's name?
The preview shows the rule in focus: pressing a name, flipping its switch or changing its channel all put that rule in focus, and the message is drawn from the rule's sample text. That is how a person sees what "Mention" will actually look like before turning it on.
What does Send a test do?
Nothing is sent. It marks the drawn message as a test and says so in the status line. If the rule in focus is off, the button stays in place but answers that no test was drawn, so it never looks like it worked. To make it real, call your chat service's incoming-message endpoint from the server with the same text.
What stays local?
The rules, the channels, the preview size and the test mark. Nothing is saved or connected. A real integration stores the routing per workspace, keeps the chat token on the server and checks which channels the app is allowed to post in before listing them.
Is it accessible?
Each rule name is a button that tells you whether the rule is on and where it posts, the switch and the select are named for their rule, and the channel select is disabled while the rule is off. The preview is a labelled figure whose text is the same text the drawing shows. A polite status line names every change.