shadcn.io is not affiliated with official shadcn/ui
Action Item Detection Comments Block for Svelte
A draft comment beside the action items found in it: tick the ones to make into tasks, see each owner and due date, and post the comment with the ticked tasks added to a list.
Installation
Overview
Turn follow-ups into tasks without leaving the comment box, with this action item detector for Svelte with Ark UI. A compact header sits over one framed panel. Its first band splits in two: your draft in a Textarea, already filled in, and a column of action items found in it. Typed rules read the draft sentence by sentence: words like please, can you, I'll or needs to make a task, an @name is the owner (I'll means you), and a due phrase such as by Friday or next week becomes a date counted from a fixed Wednesday 14 October. Each item has a Checkbox, its owner and its due date as outline Badges. The one primary is a Shine Button that says how many tasks it will make ("Post and create 4 tasks") and follows the ticks; pressing it posts the comment and adds those tasks to the "Tasks from comments" list below. When the draft has no action items, an Empty state fills the same space. It is built from Textarea, Checkbox, Badge, Empty, Field, Kbd, Shine Button and Guides, with a CSS entrance only. For meeting notes, project trackers and any comment box that ends in work to do.
FAQ
How does it find the action items?
Plain rules, not a model. itemsOf splits the draft into sentences, keeps the ones with a trigger word, takes the first @name as the owner (or you when it says I'll or I will, or Unassigned), and reads a due phrase into a day number. The title is the sentence without the mention, the due phrase and the opening please or can you. The block says so on screen: found by rules, not by a model.
How do I put a real model behind it?
Replace itemsOf(text) with a call that returns the same list of { id, title, owner, due }. Everything else (the rows, the ticks, the count in the button, the tasks list) reads that list, so it keeps working. Ask the model for strict JSON and validate it, and resolve owners against your real people on the server rather than trusting a name in the text.
Where do the dates come from?
From one typed constant, TODAY, which is Wednesday 14 October 2026, plus whole-day arithmetic. By Friday is the next Friday after that day, tomorrow is one day on, and next week is the following Monday. Nothing reads the clock, so the demo gives the same dates every time. In a real app, use the author's time zone and the current date.
What stays local?
Everything. Posting adds the tasks to a list in the page and says "Posted, and 4 tasks added in this demo. Nothing was sent." To make it real, send the comment and the ticked items from post to your server, create the tasks there, and show the created records in the list.
Is it accessible?
Each checkbox is named by its task and described by its owner and date. The items column and the tasks list are labelled regions, the count in the primary button follows the ticks, and a polite status line says what happened after a post. Ctrl or ⌘ plus Enter posts from the box. Nothing relies on colour: owner and date are words.