shadcn.io is not affiliated with official shadcn/ui
AI Sentiment Analysis Comments Block for Ark UI
A seven-comment thread with a strip of tone marks above it, a sentence that says how the mood moved, marks that jump to their comment and a composer that scores your comment by word lists.
Installation
Overview
See how a conversation turned, with this thread mood reader for React with Ark UI. A compact header names the thread, and under it one hairline frame holds three bands. The first is the mood arc: a sentence worked out from the comments ("Started neutral, turned negative at comment 4, now recovering.") and a strip with one mark per comment. Each mark has a shape (thumb up, a dash, thumb down), a word and the comment's number, so it reads without colour; pressing one scrolls the thread region to that comment, outlines it and moves focus there. The second band is the thread, seven comments in a labelled scroll region that keeps its height, each with its tone and the words that were matched. The third is a Field with a Textarea and a Shine Button: your comment is scored by the same word lists and its mark joins the strip. A Collapsible lists the words. It is built from Collapsible, Textarea, Field, Avatar, Badge, Kbd, Shine Button and Guides, with a CSS entrance only. For communities, support threads and any place where a lead wants to see where a conversation went sour.
FAQ
How is the tone worked out, and how do I use a model instead?
Two word lists at the top of the file (GOOD and BAD) are regular expressions with word boundaries. Each word found counts one for its tone; more positive than negative words reads positive, the reverse reads negative and a tie reads neutral. That is the whole of toneOf(body), a pure function from text to "positive", "neutral" or "negative", and the block says "Found by rules in this demo, not by a model." To use a model, replace the body of toneOf with a call to your classifier (and make the strip wait for the answer), keep the return type, and keep showing the matched words or the model's reason so people can check a mark. Word lists miss sarcasm and negation ("not great"); a real classifier is better at both.
How is the arc sentence written?
arcOf(tones) reads the list of tones: the first one, the first comment that differs from it, and whether the thread dipped below neutral and has come back up. It is derived on every render, so posting a comment can change the sentence. It names the comment by number, and the same number is on its mark and in its row.
How do I fill it with my own thread?
Edit PEOPLE and START. A comment has an id, the person who wrote it (by), an ISO at and its body; tones are never typed, they come from the body. ME names the person using the page. Ages such as "3 h ago" are worked out from AS_OF and the typed times, never from the clock, so the server and the browser print the same words.
What stays local, and how do I make it real?
Posting. A new comment is added to a list in the page, scored and shown, and the status line says "Posted in this demo, scored ... Nothing was sent." To make it real, send the comment from post, store it with the tone you computed (or compute the tone on the server), and render the list you get back. Keep the tone stored with the comment, so that editing the word lists later does not silently change old marks.
Is it accessible?
Tone is never colour alone: each mark has a shape, a word and a number, and its accessible name reads "Comment 4, negative, by Kit Lindqvist". The strip is a navigation of buttons, the thread is a labelled region you can reach with Tab and scroll with the arrow keys, and the status region is present from load and says what a press did. The composer has a label, a problem line that is always in place, and a Ctrl or ⌘ + Enter shortcut that screen readers are told about.