shadcn.io is not affiliated with official shadcn/ui
Knowledge Base Chat Block for Vue
A help desk thread that answers with article cards: a snippet, a Read article disclosure, a dismiss with Undo, and a Did this help vote whose No offers a person.
Installation
Overview
Answer with the right help article instead of a paragraph, with this knowledge base chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Answerleigh, a note-sync app. You ask a question and a typed script matches your words to one of five articles, then posts up to two article cards: a title, a two-line snippet, a "2 min read" Badge, a "Read article" Collapsible that opens the whole text inside the card, and a dismiss button whose Undo appears in the status line. Under the cards, "Did this help?" has Yes and No buttons you can press again to take back. No answers "Sorry. Want a person to look?" with a "Talk to someone" reply button; a question that matches nothing says so and offers the same button. The composer's Shine Button, the only colored control, sends what you type; Enter sends and Shift and Enter add a line. Everything sits in Message and Bubble rows. The frame is ruled by Guides, and everything moves with CSS only. A start for a help center that lives in the chat.
FAQ
What stays in the page, and how do I make it real?
Everything. The five articles, their keywords and the replies are typed in the file, votes and dismissals are kept in the page, and nothing is sent. To wire it for real, replace matchesOf with a search against your help center, store the votes where you measure article quality, and hand "Talk to someone" to your human support.
How are articles chosen?
Each article lists words that find it. The script counts how many of them your message contains and posts the two best matches; if none match, it says it could not find an article and offers a person. This is deliberately plain: a demo of the card, not of search.
How does Dismiss work?
It hides that card and the status line offers Undo, which puts it back where it was. Only the last dismissal can be undone, and writing a new message clears the offer. The dismiss button has a name that includes the article's title.
Can I take back a vote?
Yes. Yes and No are toggle buttons that report whether they are pressed; pressing the pressed one clears it. Choosing No adds the "Want a person to look?" line once, and clearing the vote does not remove it, because the conversation has already moved on.