51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T2172,"use client"; import { useCallback, useId, useRef, useState, type ComponentProps, } from "react"; import { useIsomorphicLayoutEffect } from "../utils/useIsomorphicLayoutEffect"; import { cn } from "@/lib/utils"; import { OptionList, type OptionListOption } from "./option-list"; import { ghostButton, mono, paper } from "./surfaces"; import { useReceiptFocus } from "./receipt-focus"; export interface QuestionFlowStep { id: string; question: string; description?: string | undefined; options: readonly OptionListOption[]; selectionMode?: "single" | "multiple" | undefined; minSelections?: number | undefined; maxSelections?: number | undefined; } export interface QuestionFlowProps extends Omit< ComponentProps<"div">, "children" | "defaultValue" | "onSubmit" > { steps: readonly QuestionFlowStep[]; defaultValue?: Readonly> | undefined; onComplete?: | ((answers: Record) => void | Promise) | undefined; completeLabel?: string | undefined; choice?: Readonly> | undefined; } export function QuestionFlow({ steps, defaultValue, onComplete, completeLabel = "Submit", choice, className, ...props }: QuestionFlowProps) { const [stepIndex, setStepIndex] = useState(0); const [answers, setAnswers] = useState>(() => { const initial: Record = {}; for (const [id, value] of Object.entries(defaultValue ?? {})) { initial[id] = [...value]; } return initial; }); const [confirmedAnswers, setConfirmedAnswers] = useState< Record | undefined >(); const [isCompleting, setIsCompleting] = useState(false); const questionPrefix = useId(); const optionListRef = useRef(null); const { receiptRef, focusHandlers } = useReceiptFocus(props); const setReceiptRef = useCallback( (node: HTMLDivElement | null) => { receiptRef.current = node; const { ref } = props; if (typeof ref === "function") return ref(node); if (ref && typeof ref === "object") (ref as { current: HTMLDivElement | null }).current = node; return undefined; }, [props.ref, receiptRef], ); const currentIndex = Math.min(stepIndex, Math.max(0, steps.length - 1)); const currentStep = steps[currentIndex]; const previousStepId = useRef(currentStep?.id); useIsomorphicLayoutEffect(() => { if (previousStepId.current === currentStep?.id) return; previousStepId.current = currentStep?.id; optionListRef.current ?.querySelector( 'button:not([disabled]):not([aria-disabled="true"])', ) ?.focus(); }, [currentStep?.id]); const root = cn( paper, "flex w-full max-w-sm flex-col rounded-2xl p-2", className, ); const completedChoice = choice ?? confirmedAnswers; if (completedChoice !== undefined) { return (

{steps.flatMap((step) => { const selected = completedChoice[step.id]; if (!selected?.length) return []; const labels = step.options .filter((option) => selected.includes(option.id)) .map((option) => option.label) .join(", "); return (

{step.question} {labels}

); })}

); } if (!onComplete) { return (

{steps.map((step) => { const questionId = `${questionPrefix}-${step.id}`; return (

{step.question}

{step.description ? (

{step.description}

) : null}

); })}

); } if (!currentStep) { return (

); } const questionId = `${questionPrefix}-${currentStep.id}`; const currentAnswer = answers[currentStep.id]; const finalStep = currentIndex === steps.length - 1; const confirm = (ids: string[]) => { const nextAnswers = { ...answers, [currentStep.id]: ids }; if (!finalStep) { setAnswers(nextAnswers); setStepIndex(currentIndex + 1); return; } const stepIds = new Set(steps.map((step) => step.id)); const completedAnswers = Object.fromEntries( Object.entries(nextAnswers).filter(([id]) => stepIds.has(id)), ); setIsCompleting(true); try { return Promise.resolve(onComplete(completedAnswers)).then( () => { setAnswers(nextAnswers); setConfirmedAnswers(completedAnswers); }, (error) => { setIsCompleting(false); throw error; }, ); } catch (error) { setIsCompleting(false); return Promise.reject(error); } }; return (

{currentIndex + 1} of {steps.length} {currentIndex > 0 ? ( ) : null}

{currentStep.question}

{currentStep.description ? (

{currentStep.description}

) : null}

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@assistant-ui","registryDependencies":["https://r.assistant-ui.com/elements-surfaces.json","https://r.assistant-ui.com/elements-option-list.json","https://r.assistant-ui.com/elements-receipt-focus.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/assistant-ui/elements/question-flow.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]