Quick Reply

1'use client'
2 
3import { cn } from '@/lib/utils'
4import { demoQuickReplies } from './demo/selection'
5 
6/**
7 * Represents a quick reply option.
8 * @interface QuickReply
9 * @property {string} id - Unique identifier for the reply
10 * @property {string} label - Display text for the reply button
11 * @property {React.ReactNode} [icon] - Optional icon displayed before the label
12 */
13export interface QuickReply {
14  label?: string
15  icon?: React.ReactNode
16}
17 
18/**
19 * ═══════════════════════════════════════════════════════════════════════════
20 * QuickReplyProps
21 * ═══════════════════════════════════════════════════════════════════════════
22 *
23 * Props for the QuickReply component, which displays predefined response
24 * options as pill-shaped buttons for chat interfaces.
25 */
26export interface QuickReplyProps {
27  data?: {
28    /** Array of quick reply options to display as buttons. */
29    replies?: QuickReply[]
30  }
31  actions?: {
32    /** Called when a user selects a quick reply option. */
33    onSelectReply?: (reply: QuickReply) => void
34  }
35}
36 
37 
38/**
39 * A quick reply button set for chat interfaces.
40 * Displays predefined response options as pill-shaped buttons.
41 *
42 * Features:
43 * - Pill-shaped action buttons
44 * - Optional icons
45 * - Hover state visual feedback
46 * - Compact responsive design
47 *
48 * @component
49 * @example
50 * ```tsx
51 * <QuickReply
52 *   data={{
53 *     replies: [
54 *       { id: "1", label: "Yes, confirm" },
55 *       { id: "2", label: "No thanks" },
56 *       { id: "3", label: "I have a question" }
57 *     ]
58 *   }}
59 *   actions={{
60 *     onSelectReply: (reply) => console.log("Selected:", reply.label)
61 *   }}
62 * />
63 * ```
64 */
65export function QuickReply({ data, actions }: QuickReplyProps) {
66  const resolved: NonNullable<QuickReplyProps['data']> = data ?? { replies: demoQuickReplies }
67  const replies = resolved.replies ?? []
68  const onSelectReply = actions?.onSelectReply
69  return (
70    <div className="w-full bg-card rounded-lg p-4">
71      <div className="flex flex-wrap gap-2">
72        {replies.map((reply, index) => (
73          <button
74            key={index}
75            onClick={() => onSelectReply?.(reply)}
76            className={cn(
77// … truncated