Quick replies

Pro

The replies an agent offers to its own question, as chips under its message: pressing one sends that reply at once, and each chip says so. Use it when the agent asked something with a few likely answers ("Which account?", "Shall I go on?"); use PromptSuggestions instead for prompts the person might start from, which only fill the composer to edit.

Nothing is chosen until the person presses a chip. While the reply is sending, every chip is locked and the chosen one says "Sending"; once it is sent, every chip stays locked ("Already answered") and the sent one shows a tick and "Sent", so the thread keeps which answer was given. If it fails, the chosen one says "Not sent" and the chips can be pressed again. A locked chip stays focusable and says why (aria-disabled, never disabled), and the chip the person pressed keeps focus as it locks and unlocks. "Sent" and "Not sent" are announced to screen readers when the sending settles. The labels are the model's words, drawn as text.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1, 2.6.2, 2.7.0, 2.8.0, 2.9.0, 2.10.0, 3.0.0, 4.0.0, 4.0.1, 4.0.2 and 4.1.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/quick-replies

Brings in: bidi, locale, locked, tokens, use-announcer, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import * as React from "react"
import { QuickReplies } from "@/components/candor/quick-replies"

const replies = [
  { id: "all", label: "Refund all three orders" },
  { id: "latest", label: "Only the latest order" },
  { id: "ask", label: "Ask the customer first" },
]

export default function Example() {
  const [sent, setSent] = React.useState<{ id: string; status: "sending" | "sent" | "failed" } | undefined>()
  return (
    <div className="flex max-w-lg flex-col gap-2">
      <p className="text-sm">Three orders were charged twice. Should I refund all of them?</p>
      <QuickReplies
        replies={replies}
        sent={sent}
        onSend={(reply) => {
          // Send it as the person's message, then say how that went.
          setSent({ id: reply.id, status: "sending" })
          window.setTimeout(() => setSent({ id: reply.id, status: "sent" }), 900)
        }}
      />
    </div>
  )
}

<QuickReplies>

Prop	Type	Default	Description
repliesrequired	`{ id: string; label: string }[]`	—	The replies on offer, in order; the label is the model's text and is sent as it reads.
onSendrequired	`(reply: { id: string; label: string }) => void`	—	Called with the reply the person pressed: send it as their message, then report how it went through `sent`.
sent	`{ id: string; status: "sending" \| "sent" \| "failed" } \| undefined`	—	The reply that was pressed and how its sending went: "sending" locks every chip, "sent" locks them for good and marks the sent one, "failed" marks it "Not sent" and lets the person press a chip again. Left out, nothing has been sent and nothing is marked.
locked	`string \| null \| undefined`	—	Why no reply can be sent now (the agent is still writing, the thread is read-only): every chip is locked with it. `null` or left out: unlocked.
label	`string \| undefined`	—	The group's accessible name; "Quick replies" by default.
className	`string \| undefined`	—	Classes, merged with Candor's.

Strings

The fixed words, in English by default. Change any of them under quickReplies in <LocaleProvider strings={{ … }}>; the table is exported as quickRepliesStrings.

Key	English
label	Quick replies
sends	Sends this reply
sending	Sending
sendingLocked	Sending a reply
sent	Sent
answered	Already answered
failed	Not sent

Motion

Moment	Family	What it does
tint	tint	A chip's border and text darken when the pointer is over one that can be pressed, and a ring fades in when it takes keyboard focus. A locked chip doesn't change on hover.

Set with --cd-motion-quick-replies-<moment>-* in your brand file; the families are in the design reference.