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:T1c87,"use client"; import type { ChangeEvent, ComponentProps, FormEvent, HTMLAttributes, MouseEvent, ReactNode, } from "react"; import { Button } from "@/registry/default/ui/button"; import { Textarea } from "@/registry/default/ui/textarea"; import { cn } from "@/lib/utils"; import { createContext, useCallback, useContext, useMemo, useState, } from "react"; export interface QuestionValue { selectedValues: readonly string[]; text: string; } export interface QuestionResponse { selectedValues: readonly string[]; text?: string; } type SelectionMode = "multiple" | "single"; interface QuestionContextValue { disabled: boolean; selectedValues: readonly string[]; selectionMode: SelectionMode; setText: (text: string) => void; text: string; toggleValue: (value: string) => void; } const QuestionContext = createContext(null); const useQuestion = () => { const context = useContext(QuestionContext); if (!context) { throw new Error("Question components must be used within Question"); } return context; }; export type QuestionProps = Omit< ComponentProps<"form">, "defaultValue" | "onSubmit" | "value" > & { defaultValue?: QuestionValue; disabled?: boolean; onSubmit?: ( response: QuestionResponse, event: FormEvent ) => void | Promise; onValueChange?: (value: QuestionValue) => void; selectionMode?: SelectionMode; value?: QuestionValue; }; const EMPTY_VALUE: QuestionValue = { selectedValues: [], text: "" }; const getSelectedValues = ( currentValues: readonly string[], optionValue: string, selectionMode: SelectionMode ): readonly string[] => { const isSelected = currentValues.includes(optionValue); if (selectionMode === "single") { return isSelected ? [] : [optionValue]; } if (isSelected) { return currentValues.filter((item) => item !== optionValue); } return [...currentValues, optionValue]; }; export const Question = ({ children, className, defaultValue = EMPTY_VALUE, disabled = false, onSubmit, onValueChange, selectionMode = "single", value: controlledValue, ...props }: QuestionProps) => { const [internalValue, setInternalValue] = useState(defaultValue); const value = controlledValue ?? internalValue; const setValue = useCallback( (nextValue: QuestionValue) => { if (controlledValue === undefined) { setInternalValue(nextValue); } onValueChange?.(nextValue); }, [controlledValue, onValueChange] ); const setText = useCallback( (text: string) => { setValue({ ...value, text }); }, [setValue, value] ); const toggleValue = useCallback( (optionValue: string) => { const selectedValues = getSelectedValues( value.selectedValues, optionValue, selectionMode ); setValue({ ...value, selectedValues }); }, [selectionMode, setValue, value] ); const contextValue = useMemo( () => ({ disabled, selectedValues: value.selectedValues, selectionMode, setText, text: value.text, toggleValue, }), [disabled, selectionMode, setText, toggleValue, value] ); const handleSubmit = useCallback( async (event: FormEvent) => { event.preventDefault(); if (disabled) { return; } const text = value.text.trim(); if (value.selectedValues.length === 0 && text.length === 0) { return; } await onSubmit?.( { selectedValues: value.selectedValues, text: text.length > 0 ? text : undefined, }, event ); }, [disabled, onSubmit, value] ); return ( ); }; export type QuestionPromptProps = HTMLAttributes; export const QuestionPrompt = ({ className, ...props }: QuestionPromptProps) => (

); export type QuestionDescriptionProps = HTMLAttributes; export const QuestionDescription = ({ className, ...props }: QuestionDescriptionProps) => (

); export type QuestionOptionsProps = HTMLAttributes; export const QuestionOptions = ({ className, ...props }: QuestionOptionsProps) => { const { selectionMode } = useQuestion(); return (

); }; export type QuestionOptionProps = Omit< ComponentProps, "value" > & { value: string; }; export const QuestionOption = ({ children, className, disabled, onClick, value, variant, ...props }: QuestionOptionProps) => { const question = useQuestion(); const isSelected = question.selectedValues.includes(value); const role = question.selectionMode === "single" ? "radio" : "checkbox"; const handleClick = useCallback( (event: MouseEvent) => { question.toggleValue(value); onClick?.(event); }, [onClick, question, value] ); return ( ); }; export type QuestionInputProps = Omit< ComponentProps, "defaultValue" | "value" >; export const QuestionInput = ({ className, disabled, onChange, ...props }: QuestionInputProps) => { const question = useQuestion(); const handleChange = useCallback( (event: ChangeEvent) => { question.setText(event.currentTarget.value); onChange?.(event); }, [onChange, question] ); return (

);
};

export type QuestionActionsProps = HTMLAttributes<HTMLDivElement>;

export const QuestionActions = ({
  className,
  ...props
}: QuestionActionsProps) => (
  <div
    className={cn("flex items-center justify-end gap-2", className)}
    {...props}
  />
);

export type QuestionSubmitProps = ComponentProps<typeof Button> & {
  children?: ReactNode;
};

export const QuestionSubmit = ({
  children = "Submit",
  disabled,
  ...props
}: QuestionSubmitProps) => {
  const question = useQuestion();
  const hasResponse =
    question.selectedValues.length > 0 || question.text.trim().length > 0;

return (
    <Button
      disabled={question.disabled || disabled || !hasResponse}
      type="submit"
      {...props}
    >
      {children}
    </Button>
  );
};
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":"@ai-elements","registryDependencies":["button","textarea"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ai-elements/question.tsx","content":"$52","type":"registry:component","target":"components/ai-elements/question.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>