50: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"] 51: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"] 52:T2431,"use client"; import { useEffect, useRef, useState, type ReactNode } from "react"; import styles from "./ai-state.module.css"; export type ApprovalQuestionType = "radio" | "check"; export interface ApprovalQuestion { id?: string; prompt: ReactNode; options: readonly ReactNode[]; type?: ApprovalQuestionType; allowCustomAnswer?: boolean; } export interface ApprovalAnswer { selected: number[]; custom?: string; } export type ApprovalAnswers = Record; export interface ApprovalCardProps { questions: readonly ApprovalQuestion[]; onSubmit?: (answers: ApprovalAnswers) => void; title?: ReactNode; className?: string; defaultOpen?: boolean; } export function ApprovalCard({ questions, onSubmit, title, className = "", defaultOpen = true, }: ApprovalCardProps) { const [questionIndex, setQuestionIndex] = useState(0); const [answers, setAnswers] = useState>({}); const [sent, setSent] = useState(false); const [open, setOpen] = useState(defaultOpen); const timer = useRef(null); const answersRef = useRef(answers); answersRef.current = answers; const question = questions[questionIndex]; useEffect(() => () => { if (timer.current !== null) window.clearTimeout(timer.current); }, []); if (!question || questions.length === 0) return null; const answer = answers[questionIndex] ?? { selected: [], custom: "" }; const type = question.type ?? "radio"; const hasAnswer = answer.selected.length > 0 || Boolean(answer.custom?.trim()); const last = questionIndex === questions.length - 1; const keyFor = (item: ApprovalQuestion, index: number) => item.id ?? String(index); const clearAdvance = () => { if (timer.current === null) return; window.clearTimeout(timer.current); timer.current = null; }; const submit = () => { const result: ApprovalAnswers = {}; questions.forEach((item, index) => { result[keyFor(item, index)] = answersRef.current[index] ?? { selected: [], custom: "" }; }); onSubmit?.(result); setSent(true); }; const advance = () => { if (last) submit(); else setQuestionIndex((value) => Math.min(questions.length - 1, value + 1)); }; const choose = (optionIndex: number) => { setAnswers((current) => { const previous = current[questionIndex] ?? { selected: [], custom: "" }; const selected = type === "radio" ? [optionIndex] : previous.selected.includes(optionIndex) ? previous.selected.filter((item) => item !== optionIndex) : [...previous.selected, optionIndex]; return { ...current, [questionIndex]: { ...previous, selected, custom: type === "radio" ? "" : previous.custom } }; }); if (type === "radio") { clearAdvance(); timer.current = window.setTimeout(() => { timer.current = null; if (last) submit(); else setQuestionIndex((value) => Math.min(questions.length - 1, value + 1)); }, 480); } }; const reset = () => { setQuestionIndex(0); setAnswers({}); setSent(false); setOpen(true); }; if (!open) { return ; } return (

{sent ? (

Answers sent

) : (

{title ?

{title}

: null}

{question.prompt}

{typeof question.prompt === "string" ? question.prompt : "Approval options"} {question.options.map((option, index) => { const selected = answer.selected.includes(index); return choose(index)} /> {option} ; })} {question.allowCustomAnswer !== false ? : null}

)}

{questions.map((_, index) => {!sent ? : null}

); } export default ApprovalCard; 4f:["$","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,["$","$L50",null,{"namespace":"@beadkit","registryDependencies":["https://beadkit.dev/r/ai-core.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ai/ApprovalCard.tsx","content":"$52","type":"registry:component","target":"@components/ai/ApprovalCard.tsx"}],"className":"h-[70svh] min-h-80"}]]}]