shadcn.io is not affiliated with official shadcn/ui
Sales Conversation Chat Block for Ark UI
A sales rep's chat with a Deal pane at the end: four stages, and a quote builder for seats, monthly or annual billing and priority support with the arithmetic shown, posted into the thread by Send quote.
Installation
Overview
Run a sales conversation next to its quote, with this sales chat for React with Ark UI. Rhea, a person on the Quotewell sales team ("Replies within 2 hours"), chats on the start side of a framed window and the end pane, Deal, holds the deal's four stages (Intro, Demo, Quote, Signed) in a vertical list with the current one marked, and a quote builder: a Number Input for seats from 1 to 60, a Toggle Group for monthly or annual billing, a Switch for priority support and a list of the arithmetic, with a 10 percent discount from 10 seats and two months free when annual, all in whole cents. "Send quote" is the one Shine Button: it posts the quote as a card in the thread and moves the deal to Quote while Rhea answers from a typed script. Two chips, "Book a demo" and "See pricing", send a message too. On a phone the thread and the pane are two views under the top bar.
FAQ
What stays in the page, and how do I make it real?
Everything. The prices, the discount rule and Rhea's replies are typed in this file, the quote is a card in local state and the line in the pane says example figures, nothing signed. To wire it for real, post packOf(...) to your sales system in sendQuote, take the price list from your billing data and append Rhea's real messages to the same list.
How is the quote worked out?
One pure function, quoteOf, in whole cents: seats times $9.00, plus $2.00 a seat for priority support, less 10 percent from 10 seats, then for annual billing twelve months less two free months. Each line in the pane is read from its result, so the total can never disagree with the lines.
How does the deal move between stages?
Stages only move forward. Saying "demo" in a message, or pressing Book a demo, moves Intro to Demo; sending the quote moves the deal to Quote. Signed is shown but nothing here signs anything. It opens at Quote with 12 seats on annual billing.
Why is Send plain and Send quote the only coloured button?
The deal is the point of the window, so its one action is the Shine Button in the pane's foot. The composer's Send is an outline icon button, and the chips are outline too, so there is only one primary on screen.
Is it usable with a keyboard and a screen reader?
The stages are an ordered list with the current one marked and spoken, the seat count has a name on both the group and the field, and the log is a focusable region announced as a log. Prices sit in spans that keep their own direction, so they read correctly in right-to-left languages.