Ask User Questions

1"use client";
2 
3import { ArrowLeftIcon, ArrowRightIcon } from "blode-icons-react";
4import { AnimatePresence, motion } from "motion/react";
5import * as React from "react";
6 
7import { cn } from "@/lib/utils";
8import { Button } from "@/components/ui/button";
9 
10const springs = {
11  fast: { bounce: 0, duration: 0.08, type: "spring" as const },
12  moderate: { bounce: 0.15, duration: 0.16, type: "spring" as const },
13  slow: { bounce: 0.15, duration: 0.24, type: "spring" as const },
14};
15 
16interface AskUserOption {
17  id: string;
18  /** Bold option label. */
19  title: string;
20  /** Secondary descriptive text. */
21  description?: string;
22}
23 
24interface AskUserQuestion {
25  id: string;
26  /** Question text. */
27  title: string;
28  options: AskUserOption[];
29  /** Allow multiple selections (shows an explicit Next/Finish button). */
30  multiSelect?: boolean;
31  /** Reveal a textarea for a free-form answer. */
32  allowOther?: boolean;
33  otherPlaceholder?: string;
34  /** Label for the Next button in multi-select mode. Defaults to "Next" / "Finish". */
35  nextLabel?: string;
36  /** Show the Skip control. Defaults to true. */
37  skippable?: boolean;
38  /** Description placement: inline with the title or stacked beneath it. */
39  layout?: "inline" | "stacked";
40}
41 
42interface AskUserAnswer {
43  questionId: string;
44  selectedIds: string[];
45  otherText?: string;
46  skipped?: boolean;
47}
48 
49type AnswersMap = Record<string, AskUserAnswer>;
50 
51interface AskUserQuestionsProps extends Omit<React.ComponentProps<"div">, "onChange"> {
52  questions: AskUserQuestion[];
53  currentIndex?: number;
54  defaultCurrentIndex?: number;
55  onCurrentIndexChange?: (index: number) => void;
56  answers?: AnswersMap;
57  defaultAnswers?: AnswersMap;
58  onAnswersChange?: (answers: AnswersMap) => void;
59  onComplete?: (answers: AnswersMap) => void;
60  onSkip?: (questionId: string, index: number) => void;
61  skipLabel?: string;
62}
63 
64const useControllable = <T,>(
65  controlled: T | undefined,
66  defaultValue: T,
67  onChange?: (value: T) => void,
68): [T, (value: T) => void] => {
69  const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
70  const isControlled = controlled !== undefined;
71  const value = isControlled ? (controlled as T) : uncontrolled;
72  const setValue = React.useCallback(
73    (next: T) => {
74      if (!isControlled) {
75        setUncontrolled(next);
76      }
77      onChange?.(next);
78    },
79    [isControlled, onChange],
80  );
81  return [value, setValue];
82};
83 
84const getChipClassName = (isMulti: boolean, selected: boolean) => {
85// … truncated