shadcn.io is not affiliated with official shadcn/ui
Ticket Creation Chat Block for Vue
A help-desk chat about a double charge beside a ticket form pre-filled from it (subject, category, priority, description with the last three messages), where Create ticket checks the form and replaces it with the ticket.
Installation
Overview
Turn a conversation into a ticket, with this ticket creation chat for Vue with Ark UI. A wide framed window for Caseflow, a help desk, puts a thread about a double charge at the start and a ticket form at the end. The form is filled in from the chat: the subject is the first message cut to 60 characters, the category is guessed from its words, the priority starts at Normal and the description holds the last three messages while "Include the chat" is on. Whatever you type in a field is yours and later messages never overwrite it. "Create ticket" is the one Shine Button: it checks the form, puts a named problem under each field that needs one, then replaces the form in place with a list of the ticket (T-2041, subject, category, priority, included messages) and posts a system line in the thread. The composer's Send is a plain outline button, and on a phone the thread and the ticket are two views.
FAQ
What stays in the page, and how do I make it real?
Everything. The thread, the agent's replies and the ticket number are typed in this file, and the ticket exists only as the list that replaces the form; the status line says nothing is filed. To wire it for real, post the subject, category, priority and description to your help desk in create where the comment says so and use the id it returns.
How is the form pre-filled, and when does it stop following the chat?
Each field has a typed value and a derived one. While you have not typed in a field it shows the derived value: the first message for the subject, a word match for the category, the last three messages for the description. The moment you type, your text is kept and the chat no longer touches it.
What does Include the chat do?
With it on, an untouched description shows the last three messages, one per line with who wrote them. Turning it off empties an untouched description, and if you have typed your own text it is left alone. The ticket's list says how many messages were included, three or none.
How are problems shown?
A subject, a category and a description are required. A bad press of Create ticket puts a sentence with an icon under each field that needs one, sets the form to the first problem and focuses it; correcting a field clears its own problem. The ticket form keeps its size in every state.
Is it usable with a keyboard and a screen reader?
Every field has a visible label and its problem is linked to it, the new ticket's heading takes focus when it replaces the form, the status line announces each result, and the log is a focusable region announced as a log. Edit ticket brings the form back with your values.