Ask User Questions

1"use client";
2 
3import {
4  forwardRef,
5  useCallback,
6  useEffect,
7  useId,
8  useMemo,
9  useRef,
10  useState,
11  type HTMLAttributes,
12  type KeyboardEvent as ReactKeyboardEvent,
13} from "react";
14import { AnimatePresence, motion } from "framer-motion";
15import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
16import { Radio as RadioPrimitive } from "@base-ui/react/radio";
17import { CheckboxGroup as CheckboxGroupPrimitive } from "@base-ui/react/checkbox-group";
18import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
19import { Field } from "@base-ui/react/field";
20import { cn } from "@/lib/utils";
21import { spring } from "@/lib/springs";
22import { fontWeights } from "@/lib/font-weight";
23import { useShape } from "@/lib/shape-context";
24import { useIcon } from "@/lib/icon-context";
25import { useProximityHover } from "@/hooks/use-proximity-hover";
26import { useMergeSplitBlocks, SelectionBackgrounds } from "@/hooks/use-merge-split";
27import { Button } from "@/components/ui/button";
28 
29export interface AskUserOption {
30  id?: string;
31  title: string;
32  description?: string;
33}
34 
35export interface AskUserQuestion {
36  id?: string;
37  title: string;
38  /** Options to choose from. Optional only because a `freeText` question
39   *  has none; every other mode requires at least one. */
40  options?: AskUserOption[];
41  multiSelect?: boolean;
42  allowOther?: boolean;
43  otherPlaceholder?: string;
44  skippable?: boolean;
45  nextLabel?: string;
46  /** Visual layout for each option row.
47   *  - "inline" (default): title and description on one line.
48   *  - "stacked": title above, description below — useful when descriptions
49   *    are long enough to wrap. */
50  layout?: "inline" | "stacked";
51  /** Which side of the row the numbered chip sits on.
52   *  - "right" (default): chip on the right; the single-select submit
53   *    arrow overlays it on hover/focus.
54   *  - "left": chip on the left, before the body. The submit arrow
55   *    still appears on the right edge of the row, so the action
56   *    affordance stays where the eye expects it.
57   *  Works with every other option (single/multi-select, allowOther,
58   *  inline/stacked layout). */
59  chipPosition?: "left" | "right";
60  /** Render a single multi-line textarea as the *only* answer, with no
61   *  option rows — for open-ended prompts (a name, a description, free
62   *  comments). Distinct from `allowOther`, which appends a free-text row
63// … truncated