shadcn.io is not affiliated with official shadcn/ui
Therapy Session Chat Block for Vue
A 50 minute session with a This session pane: three phases, a heaviness slider set at check-in and again at wrap-up with the change derived, and a take-aways card with checkboxes and a real copy button.
Installation
Overview
Show a counselling session with this therapy session chat for Vue with Ark UI. A wide framed window of fixed height pairs a thread with Dr. Inge Halloran, a therapist at Quietroom, and a This session pane. A line under the top bar says it is an example only, not therapy, and that in crisis you call your local emergency number or crisis line. The pane lists three phases, Check-in, Talk and Wrap-up, the current one marked as the current step, and a Slider from 0 to 10 for How heavy does today feel, set at check-in and again at wrap-up; the pane works out Start 7, now 4: down 3. The thread opens in the Talk phase. Her typed prompts lead to Move to wrap-up, which posts a take-aways card of three lines, each with an I'll try this Checkbox and a Copy take-aways Copy Button that really copies. On a phone a Chat and Session toggle swaps the panes. The composer's Shine Button is the only colored control. It suits a practice's client app or any structured conversation with a start, an end and a change in between.
FAQ
What stays in the page, and how do I make it real?
Everything but the clipboard. The therapist's replies, the take-aways and the slider values are typed or held in the page's state; Copy take-aways really writes to the clipboard. Nothing is sent and no model runs. To make it real, send post's text to your practice's secure messaging and save the two heaviness values with the session.
How do the phases advance?
Check-in to Talk with Begin talking, and Talk to Wrap-up with Move to wrap-up, which you can press in the pane or as a reply button after her prompt. At wrap-up the slider unlocks again, and Back to check-in returns to the start.
How is the change worked out?
The slider's start value is kept when you leave check-in; at wrap-up the pane compares the new value and reads down, up or no change by that many points.
Is this therapy?
No. The line under the top bar says it is an example only. A message that suggests danger gets a short line pointing to an emergency number or a crisis line, and nobody is connected.
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, 14:09". Delivery is a glyph and a word, never a color. The phases are an ordered list with the current step marked, the slider is labelled and announces its value out of 10, and the checkboxes sit in a labelled list. Nothing is told by color.