shadcn.io is not affiliated with official shadcn/ui
Journal Prompts Chat Block for React
A journalling thread with a collapsible prompt of the day, a mood toggle group before you send, and an Entries pane listing each entry with its mood, word count and time.
Installation
Overview
Show a journalling thread with its entries beside it, with this journal prompts chat for React with Base UI. A wide framed window of fixed height holds the thread between you and Sunniva Aldercott, a journalling companion at Evenhurst, with a "Prompt of the day" Collapsible open under the top bar and an "Another prompt" button that cycles five typed prompts. Before you send, a Toggle Group of five moods, a face above a word each, tags the entry. The pane at the end lists every message of yours as an entry, newest first, with its mood, word count and time, and says "This week: 3 entries, mostly calm", worked out from them. On a phone a two-view toggle, Chat and Entries, shows one at a time. The composer's Shine Button is the only colored control. The frame is ruled by Guides, and everything moves with CSS only. It suits a journalling app, a reflection tool or any thread that keeps what you write.
FAQ
What stays in the page, and how do I make it real?
Everything, and nothing is saved: the pane says entries stay in this tab. The prompts, the moods and the replies are typed in this file, and the entries are your messages in the page's state. No model runs. To make it real, store each entry where post says so and load the earlier ones into EARLIER.
How does the mood work?
The group always has one mood chosen, "Calm" at first, and it tags the next entry you send; clicking the chosen one does nothing. Sunniva's typed reply depends on the mood, unless a word in your message such as "thank" or "prompt" picks one.
How is
Counting the entries in the pane, the three typed earlier ones plus every message you send, and finding the mood that occurs most; a tie goes to the first mood in the list. It updates with every message.
How does Another prompt work?
It steps through the five typed prompts and wraps round, and says which one is showing in the line under the composer. The panel can be closed to give the log more room; its content is inert while closed.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden name and time such as "You, 09:42". Delivery is a glyph and a word, never a color. The log and the entries are focusable scroll regions, each mood is a named toggle with a face and a word, and the dates are time elements.