{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "option-list", "dependencies": [ "@radix-ui/react-separator", "@radix-ui/react-slot", "class-variance-authority", "lucide-react", "zod" ], "registryDependencies": [ "utils" ], "files": [ { "path": "src/components/watermelon-ui/option-list.tsx", "content": "\"use client\";\n\nimport {\n useMemo,\n useState,\n useCallback,\n useEffect,\n useRef,\n Fragment,\n} from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\n\nfunction parseSelectionToIdSet(\n value: OptionListSelection | undefined,\n mode: \"multi\" | \"single\",\n maxSelections?: number,\n): Set {\n if (mode === \"single\") {\n const single =\n typeof value === \"string\"\n ? value\n : Array.isArray(value)\n ? value[0]\n : null;\n return single ? new Set([single]) : new Set();\n }\n\n const arr =\n typeof value === \"string\" ? [value] : Array.isArray(value) ? value : [];\n\n return new Set(maxSelections ? arr.slice(0, maxSelections) : arr);\n}\n\nfunction convertIdSetToSelection(\n selected: Set,\n mode: \"multi\" | \"single\",\n): OptionListSelection {\n if (mode === \"single\") {\n const [first] = selected;\n return first ?? null;\n }\n return Array.from(selected);\n}\n\nfunction areSetsEqual(a: Set, b: Set) {\n if (a.size !== b.size) return false;\n for (const val of a) {\n if (!b.has(val)) return false;\n }\n return true;\n}\n\ninterface SelectionIndicatorProps {\n mode: \"multi\" | \"single\";\n isSelected: boolean;\n disabled?: boolean;\n}\n\nfunction SelectionIndicator({\n mode,\n isSelected,\n disabled,\n}: SelectionIndicatorProps) {\n const shape = mode === \"single\" ? \"rounded-full\" : \"rounded\";\n\n return (\n \n {mode === \"multi\" && isSelected && }\n {mode === \"single\" && isSelected && (\n \n )}\n \n );\n}\n\ninterface OptionItemProps {\n option: OptionListOption;\n isSelected: boolean;\n isDisabled: boolean;\n selectionMode: \"multi\" | \"single\";\n isFirst: boolean;\n isLast: boolean;\n onToggle: () => void;\n tabIndex?: number;\n onFocus?: () => void;\n buttonRef?: (el: HTMLButtonElement | null) => void;\n}\n\nfunction OptionItem({\n option,\n isSelected,\n isDisabled,\n selectionMode,\n isFirst,\n isLast,\n onToggle,\n tabIndex,\n onFocus,\n buttonRef,\n}: OptionItemProps) {\n const hasAdjacentOptions = !isFirst && !isLast;\n\n return (\n \n \n
\n \n \n \n {option.icon && (\n {option.icon}\n )}\n
\n {option.label}\n {option.description && (\n \n {option.description}\n \n )}\n
\n
\n \n );\n}\n\ninterface OptionListConfirmationProps {\n id: string;\n options: OptionListOption[];\n selectedIds: Set;\n className?: string;\n}\n\nfunction OptionListConfirmation({\n id,\n options,\n selectedIds,\n className,\n}: OptionListConfirmationProps) {\n const confirmedOptions = options.filter((opt) => selectedIds.has(opt.id));\n\n return (\n \n \n {confirmedOptions.map((option, index) => (\n \n {index > 0 && }\n
\n \n \n \n {option.icon && (\n {option.icon}\n )}\n
\n \n {option.label}\n \n {option.description && (\n \n {option.description}\n \n )}\n
\n
\n \n ))}\n \n \n );\n}\n\nexport function OptionList({\n id,\n options,\n selectionMode = \"multi\",\n minSelections = 1,\n maxSelections,\n value,\n defaultValue,\n choice,\n onChange,\n onConfirm,\n onCancel,\n responseActions,\n onResponseAction,\n onBeforeResponseAction,\n className,\n}: OptionListProps) {\n if (process.env[\"NODE_ENV\"] !== \"production\") {\n if (value !== undefined && defaultValue !== undefined) {\n console.warn(\n \"[OptionList] Both `value` (controlled) and `defaultValue` (uncontrolled) were provided. `defaultValue` is ignored when `value` is set.\",\n );\n }\n if (value !== undefined && !onChange) {\n console.warn(\n \"[OptionList] `value` was provided without `onChange`. This makes OptionList controlled; selection will not update unless the parent updates `value`.\",\n );\n }\n }\n\n const effectiveMaxSelections = selectionMode === \"single\" ? 1 : maxSelections;\n\n const [uncontrolledSelected, setUncontrolledSelected] = useState>(\n () =>\n parseSelectionToIdSet(\n defaultValue,\n selectionMode,\n effectiveMaxSelections,\n ),\n );\n\n useEffect(() => {\n\n setUncontrolledSelected((prev) => {\n const normalized = parseSelectionToIdSet(\n Array.from(prev),\n selectionMode,\n effectiveMaxSelections,\n );\n return areSetsEqual(prev, normalized) ? prev : normalized;\n });\n }, [selectionMode, effectiveMaxSelections]);\n\n const selectedIds = useMemo(\n () =>\n value !== undefined\n ? parseSelectionToIdSet(value, selectionMode, effectiveMaxSelections)\n : uncontrolledSelected,\n [value, uncontrolledSelected, selectionMode, effectiveMaxSelections],\n );\n\n const selectedCount = selectedIds.size;\n\n const optionStates = useMemo(() => {\n return options.map((option) => {\n const isSelected = selectedIds.has(option.id);\n const isSelectionLocked =\n selectionMode === \"multi\" &&\n effectiveMaxSelections !== undefined &&\n selectedCount >= effectiveMaxSelections &&\n !isSelected;\n const isDisabled = option.disabled || isSelectionLocked;\n\n return { option, isSelected, isDisabled };\n });\n }, [\n options,\n selectedIds,\n selectionMode,\n effectiveMaxSelections,\n selectedCount,\n ]);\n\n const optionRefs = useRef>([]);\n const [activeIndex, setActiveIndex] = useState(() => {\n const firstSelected = optionStates.findIndex(\n (s) => s.isSelected && !s.isDisabled,\n );\n if (firstSelected >= 0) return firstSelected;\n const firstEnabled = optionStates.findIndex((s) => !s.isDisabled);\n return firstEnabled >= 0 ? firstEnabled : 0;\n });\n\n useEffect(() => {\n if (optionStates.length === 0) return;\n\n setActiveIndex((prev) => {\n if (\n prev < 0 ||\n prev >= optionStates.length ||\n optionStates[prev].isDisabled\n ) {\n const firstEnabled = optionStates.findIndex((s) => !s.isDisabled);\n return firstEnabled >= 0 ? firstEnabled : 0;\n }\n return prev;\n });\n }, [optionStates]);\n\n const updateSelection = useCallback(\n (next: Set) => {\n const normalizedNext = parseSelectionToIdSet(\n Array.from(next),\n selectionMode,\n effectiveMaxSelections,\n );\n\n if (value === undefined) {\n if (!areSetsEqual(uncontrolledSelected, normalizedNext)) {\n setUncontrolledSelected(normalizedNext);\n }\n }\n\n onChange?.(convertIdSetToSelection(normalizedNext, selectionMode));\n },\n [\n effectiveMaxSelections,\n selectionMode,\n uncontrolledSelected,\n value,\n onChange,\n ],\n );\n\n const toggleSelection = useCallback(\n (optionId: string) => {\n const next = new Set(selectedIds);\n const isSelected = next.has(optionId);\n\n if (selectionMode === \"single\") {\n if (isSelected) {\n next.delete(optionId);\n } else {\n next.clear();\n next.add(optionId);\n }\n } else {\n if (isSelected) {\n next.delete(optionId);\n } else {\n if (effectiveMaxSelections && next.size >= effectiveMaxSelections) {\n return;\n }\n next.add(optionId);\n }\n }\n\n updateSelection(next);\n },\n [effectiveMaxSelections, selectedIds, selectionMode, updateSelection],\n );\n\n const handleConfirm = useCallback(async () => {\n if (!onConfirm) return;\n if (selectedCount === 0 || selectedCount < minSelections) return;\n await onConfirm(convertIdSetToSelection(selectedIds, selectionMode));\n }, [minSelections, onConfirm, selectedCount, selectedIds, selectionMode]);\n\n const handleCancel = useCallback(() => {\n const empty = new Set();\n updateSelection(empty);\n onCancel?.();\n }, [onCancel, updateSelection]);\n\n const hasCustomResponseActions = responseActions !== undefined;\n\n const handleFooterAction = useCallback(\n async (actionId: string) => {\n if (actionId === \"confirm\") {\n await handleConfirm();\n } else if (actionId === \"cancel\") {\n handleCancel();\n }\n if (hasCustomResponseActions) {\n await onResponseAction?.(actionId);\n }\n },\n [handleConfirm, handleCancel, hasCustomResponseActions, onResponseAction],\n );\n\n const normalizedFooterActions = useMemo(() => {\n const normalized = normalizeActionsConfig(responseActions);\n if (normalized) return normalized;\n return {\n items: [\n { id: \"cancel\", label: \"Clear\", variant: \"ghost\" as const },\n { id: \"confirm\", label: \"Confirm\", variant: \"default\" as const },\n ],\n align: \"right\" as const,\n } satisfies ReturnType;\n }, [responseActions]);\n\n const isConfirmDisabled =\n selectedCount < minSelections || selectedCount === 0;\n const hasNothingToClear = selectedCount === 0;\n\n const focusOptionAt = useCallback((index: number) => {\n const el = optionRefs.current[index];\n if (el) el.focus();\n setActiveIndex(index);\n }, []);\n\n const findFirstEnabledIndex = useCallback(() => {\n const idx = optionStates.findIndex((s) => !s.isDisabled);\n return idx >= 0 ? idx : 0;\n }, [optionStates]);\n\n const findLastEnabledIndex = useCallback(() => {\n for (let i = optionStates.length - 1; i >= 0; i--) {\n if (!optionStates[i].isDisabled) return i;\n }\n return 0;\n }, [optionStates]);\n\n const findNextEnabledIndex = useCallback(\n (start: number, direction: 1 | -1) => {\n const len = optionStates.length;\n if (len === 0) return 0;\n for (let step = 1; step <= len; step++) {\n const idx = (start + direction * step + len) % len;\n if (!optionStates[idx].isDisabled) return idx;\n }\n return start;\n },\n [optionStates],\n );\n\n const handleListboxKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (optionStates.length === 0) return;\n\n const key = e.key;\n\n if (key === \"ArrowDown\") {\n e.preventDefault();\n e.stopPropagation();\n focusOptionAt(findNextEnabledIndex(activeIndex, 1));\n return;\n }\n\n if (key === \"ArrowUp\") {\n e.preventDefault();\n e.stopPropagation();\n focusOptionAt(findNextEnabledIndex(activeIndex, -1));\n return;\n }\n\n if (key === \"Home\") {\n e.preventDefault();\n e.stopPropagation();\n focusOptionAt(findFirstEnabledIndex());\n return;\n }\n\n if (key === \"End\") {\n e.preventDefault();\n e.stopPropagation();\n focusOptionAt(findLastEnabledIndex());\n return;\n }\n\n if (key === \"Enter\" || key === \" \") {\n e.preventDefault();\n e.stopPropagation();\n const current = optionStates[activeIndex];\n if (!current || current.isDisabled) return;\n toggleSelection(current.option.id);\n return;\n }\n\n if (key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n if (!hasNothingToClear) {\n handleCancel();\n }\n }\n },\n [\n activeIndex,\n findFirstEnabledIndex,\n findLastEnabledIndex,\n findNextEnabledIndex,\n focusOptionAt,\n handleCancel,\n hasNothingToClear,\n optionStates,\n toggleSelection,\n ],\n );\n\n const actionsWithDisabledState = useMemo((): Action[] => {\n return normalizedFooterActions.items.map((action) => {\n const isDisabledByValidation =\n (action.id === \"confirm\" && isConfirmDisabled) ||\n (action.id === \"cancel\" && hasNothingToClear);\n return {\n ...action,\n disabled: action.disabled || isDisabledByValidation,\n label:\n action.id === \"confirm\" &&\n selectionMode === \"multi\" &&\n selectedCount > 0\n ? `${action.label} (${selectedCount})`\n : action.label,\n };\n });\n }, [\n normalizedFooterActions.items,\n isConfirmDisabled,\n hasNothingToClear,\n selectionMode,\n selectedCount,\n ]);\n\n const isReceipt = choice !== undefined && choice !== null;\n const viewKey = isReceipt ? `receipt-${String(choice)}` : \"interactive\";\n\n return (\n
\n {isReceipt ? (\n \n ) : (\n \n \n {optionStates.map(({ option, isSelected, isDisabled }, index) => {\n return (\n \n {index > 0 && (\n \n )}\n setActiveIndex(index)}\n buttonRef={(el) => {\n optionRefs.current[index] = el;\n }}\n onToggle={() => toggleSelection(option.id)}\n />\n \n );\n })}\n
\n\n
\n \n
\n \n )}\n \n );\n}\n\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\n\nfunction Separator({\n className,\n orientation = \"horizontal\",\n decorative = true,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Separator }\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost:\n \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n \"icon-sm\": \"size-8\",\n \"icon-lg\": \"size-10\",\n homeCTA: \"rounded-full px-6 py-3 text-lg w-fit text-start\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps & {\n asChild?: boolean;\n }) {\n const Comp = asChild ? Slot : \"button\";\n\n return (\n \n );\n}\n\nexport { Button, buttonVariants };\n\n/**\n * Tool UI conventions:\n * - Serializable schemas are JSON-safe (no callbacks/ReactNode/`className`).\n * - Schema: `SerializableXSchema`\n * - Parser: `parseSerializableX(input: unknown)`\n * - Actions: `responseActions`, `onResponseAction`, `onBeforeResponseAction`\n * - Root attrs: `data-tool-ui-id` + `data-slot`\n */\n\n/**\n * Schema for tool UI identity.\n *\n * Every tool UI should have a unique identifier that:\n * - Is stable across re-renders\n * - Is meaningful (not auto-generated)\n * - Is unique within the conversation\n *\n * Format recommendation: `{component-type}-{semantic-identifier}`\n * Examples: \"data-table-expenses-q3\", \"option-list-deploy-target\"\n */\nexport const ToolUIIdSchema = z.string().min(1);\n\nexport type ToolUIId = z.infer;\n\n/**\n * Primary role of a Tool UI surface in a chat context.\n */\nexport const ToolUIRoleSchema = z.enum([\n \"information\",\n \"decision\",\n \"control\",\n \"state\",\n \"composite\",\n]);\n\nexport type ToolUIRole = z.infer;\n\nexport const ToolUIReceiptOutcomeSchema = z.enum([\n \"success\",\n \"partial\",\n \"failed\",\n \"cancelled\",\n]);\n\nexport type ToolUIReceiptOutcome = z.infer;\n\n/**\n * Optional receipt metadata: a durable summary of an outcome.\n */\nexport const ToolUIReceiptSchema = z.object({\n outcome: ToolUIReceiptOutcomeSchema,\n summary: z.string().min(1),\n identifiers: z.record(z.string(), z.string()).optional(),\n at: z.string().datetime(),\n});\n\nexport type ToolUIReceipt = z.infer;\n\n/**\n * Base schema for Tool UI payloads (id + optional role/receipt).\n */\nexport const ToolUISurfaceSchema = z.object({\n id: ToolUIIdSchema,\n role: ToolUIRoleSchema.optional(),\n receipt: ToolUIReceiptSchema.optional(),\n});\n\nexport type ToolUISurface = z.infer;\n\nexport const ActionSchema = z.object({\n id: z.string().min(1),\n label: z.string().min(1),\n /**\n * Canonical narration the assistant can use after this action is taken.\n *\n * Example: \"I exported the table as CSV.\" / \"I opened the link in a new tab.\"\n */\n sentence: z.string().optional(),\n confirmLabel: z.string().optional(),\n variant: z\n .enum([\"default\", \"destructive\", \"secondary\", \"ghost\", \"outline\"])\n .optional(),\n icon: z.custom().optional(),\n loading: z.boolean().optional(),\n disabled: z.boolean().optional(),\n shortcut: z.string().optional(),\n});\n\nexport type Action = z.infer;\n\nexport const ActionButtonsPropsSchema = z.object({\n actions: z.array(ActionSchema).min(1),\n align: z.enum([\"left\", \"center\", \"right\"]).optional(),\n confirmTimeout: z.number().positive().optional(),\n className: z.string().optional(),\n});\n\nexport const SerializableActionSchema = ActionSchema.omit({ icon: true });\nexport const SerializableActionsSchema = ActionButtonsPropsSchema.extend({\n actions: z.array(SerializableActionSchema),\n}).omit({ className: true });\n\nexport interface ActionsConfig {\n items: Action[];\n align?: \"left\" | \"center\" | \"right\";\n confirmTimeout?: number;\n}\n\nexport const SerializableActionsConfigSchema = z.object({\n items: z.array(SerializableActionSchema).min(1),\n align: z.enum([\"left\", \"center\", \"right\"]).optional(),\n confirmTimeout: z.number().positive().optional(),\n});\n\nexport type SerializableActionsConfig = z.infer<\n typeof SerializableActionsConfigSchema\n>;\n\nexport type SerializableAction = z.infer;\n\nexport type ActionsProp = ActionsConfig | Action[];\n\nconst NEGATORY_ACTION_IDS = new Set([\n \"cancel\",\n \"dismiss\",\n \"skip\",\n \"no\",\n \"reset\",\n \"close\",\n \"decline\",\n \"reject\",\n \"back\",\n \"later\",\n \"not-now\",\n \"maybe-later\",\n]);\n\nfunction inferVariant(action: Action): Action {\n if (action.variant) return action;\n if (NEGATORY_ACTION_IDS.has(action.id)) {\n return { ...action, variant: \"ghost\" };\n }\n return action;\n}\n\nexport function normalizeActionsConfig(\n actions?: ActionsProp,\n): ActionsConfig | null {\n if (!actions) return null;\n\n const rawItems = Array.isArray(actions) ? actions : (actions.items ?? []);\n\n if (rawItems.length === 0) {\n return null;\n }\n\n const items = rawItems.map(inferVariant);\n\n return Array.isArray(actions)\n ? { items }\n : {\n items,\n align: actions.align,\n confirmTimeout: actions.confirmTimeout,\n };\n}\n\nexport interface ActionButtonsProps {\n actions: Action[];\n onAction: (actionId: string) => void | Promise;\n onBeforeAction?: (actionId: string) => boolean | Promise;\n confirmTimeout?: number;\n align?: \"left\" | \"center\" | \"right\";\n className?: string;\n}\n\nexport function ActionButtons({\n actions,\n onAction,\n onBeforeAction,\n confirmTimeout = 3000,\n align = \"right\",\n className,\n}: ActionButtonsProps) {\n const { actions: resolvedActions, runAction } = useActionButtons({\n actions,\n onAction,\n onBeforeAction,\n confirmTimeout,\n });\n\n return (\n \n {resolvedActions.map((action) => {\n const label = action.currentLabel;\n const variant = action.variant || \"default\";\n\n return (\n runAction(action.id)}\n disabled={action.isDisabled}\n className={cn(\n \"rounded-full px-4!\",\n \"justify-center\",\n \"min-h-11 w-full text-base\",\n \"@sm/actions:min-h-0 @sm/actions:w-auto @sm/actions:px-3 @sm/actions:py-2 @sm/actions:text-sm\",\n action.isConfirming &&\n \"ring-destructive ring-2 ring-offset-2 motion-safe:animate-pulse\",\n )}\n aria-label={\n action.shortcut ? `${label} (${action.shortcut})` : label\n }\n >\n {action.isLoading && (\n \n \n \n \n )}\n {action.icon && !action.isLoading && (\n {action.icon}\n )}\n {label}\n {action.shortcut && !action.isLoading && (\n \n )}\n \n );\n })}\n \n );\n}\n\nexport type UseActionButtonsOptions = {\n actions: Action[];\n onAction: (actionId: string) => void | Promise;\n onBeforeAction?: (actionId: string) => boolean | Promise;\n confirmTimeout?: number;\n};\n\nexport type UseActionButtonsResult = {\n actions: Array<\n Action & {\n currentLabel: string;\n isConfirming: boolean;\n isExecuting: boolean;\n isDisabled: boolean;\n isLoading: boolean;\n }\n >;\n runAction: (actionId: string) => Promise;\n confirmingActionId: string | null;\n executingActionId: string | null;\n};\n\nexport function useActionButtons(\n options: UseActionButtonsOptions,\n): UseActionButtonsResult {\n const {\n actions,\n onAction,\n onBeforeAction,\n confirmTimeout = 3000,\n } = options;\n\n const [confirmingActionId, setConfirmingActionId] = useState(\n null,\n );\n const [executingActionId, setExecutingActionId] = useState(\n null,\n );\n\n useEffect(() => {\n if (!confirmingActionId) return;\n const id = setTimeout(() => setConfirmingActionId(null), confirmTimeout);\n return () => clearTimeout(id);\n }, [confirmingActionId, confirmTimeout]);\n\n useEffect(() => {\n if (!confirmingActionId) return;\n const handleKeyDown = (e: globalThis.KeyboardEvent) => {\n if (e.key === \"Escape\") {\n setConfirmingActionId(null);\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [confirmingActionId]);\n\n const runAction = useCallback(\n async (actionId: string) => {\n const action = actions.find((a) => a.id === actionId);\n if (!action) return;\n\n const isAnyActionExecuting = executingActionId !== null;\n if (action.disabled || action.loading || isAnyActionExecuting) {\n return;\n }\n\n if (action.confirmLabel && confirmingActionId !== action.id) {\n setConfirmingActionId(action.id);\n return;\n }\n\n if (onBeforeAction) {\n const shouldProceed = await onBeforeAction(action.id);\n if (!shouldProceed) {\n setConfirmingActionId(null);\n return;\n }\n }\n\n try {\n setExecutingActionId(action.id);\n await onAction(action.id);\n } finally {\n setExecutingActionId(null);\n setConfirmingActionId(null);\n }\n },\n [actions, confirmingActionId, executingActionId, onAction, onBeforeAction],\n );\n\n const resolvedActions = useMemo(\n () =>\n actions.map((action) => {\n const isConfirming = confirmingActionId === action.id;\n const isThisActionExecuting = executingActionId === action.id;\n const isLoading = action.loading || isThisActionExecuting;\n const isDisabled =\n action.disabled || (executingActionId !== null && !isThisActionExecuting);\n const currentLabel =\n isConfirming && action.confirmLabel\n ? action.confirmLabel\n : action.label;\n\n return {\n ...action,\n currentLabel,\n isConfirming,\n isExecuting: isThisActionExecuting,\n isDisabled,\n isLoading,\n };\n }),\n [actions, confirmingActionId, executingActionId],\n );\n\n return {\n actions: resolvedActions,\n runAction,\n confirmingActionId,\n executingActionId,\n };\n}\n\nexport const OptionListOptionSchema = z.object({\n id: z.string().min(1),\n label: z.string().min(1),\n description: z.string().optional(),\n icon: z.custom().optional(),\n disabled: z.boolean().optional(),\n});\n\nexport const OptionListPropsSchema = z.object({\n /**\n * Unique identifier for this tool UI instance in the conversation.\n *\n * Used for:\n * - Assistant referencing (\"the options above\")\n * - Receipt generation (linking selections to their source)\n * - Narration context\n *\n * Should be stable across re-renders, meaningful, and unique within the conversation.\n *\n * @example \"option-list-deploy-target\", \"format-selection\"\n */\n id: ToolUIIdSchema,\n role: ToolUIRoleSchema.optional(),\n receipt: ToolUIReceiptSchema.optional(),\n options: z.array(OptionListOptionSchema).min(1),\n selectionMode: z.enum([\"multi\", \"single\"]).optional(),\n /**\n * Controlled selection value (advanced / runtime only).\n *\n * For Tool UI tool payloads, prefer `defaultValue` (initial selection) and\n * `choice` (receipt state). Controlled `value` is intentionally excluded\n * from `SerializableOptionListSchema` to avoid accidental \"controlled but\n * non-interactive\" states when an LLM includes `value` in args.\n */\n value: z.union([z.array(z.string()), z.string(), z.null()]).optional(),\n defaultValue: z.union([z.array(z.string()), z.string(), z.null()]).optional(),\n /**\n * When set, renders the component in receipt state showing the user's choice.\n *\n * In receipt state:\n * - Only the chosen option(s) are shown\n * - Response actions are hidden\n * - The component is read-only\n *\n * Use this with assistant-ui's `addResult` to show the outcome of a decision.\n *\n * @example\n * ```tsx\n * // In makeAssistantToolUI render:\n * if (result) {\n * return ;\n * }\n * ```\n */\n choice: z.union([z.array(z.string()), z.string(), z.null()]).optional(),\n responseActions: z\n .union([z.array(ActionSchema), SerializableActionsConfigSchema])\n .optional(),\n minSelections: z.number().min(0).optional(),\n maxSelections: z.number().min(1).optional(),\n});\n\nexport type OptionListSelection = string[] | string | null;\n\nexport type OptionListOption = z.infer;\n\nexport type OptionListProps = Omit<\n z.infer,\n \"value\" | \"defaultValue\" | \"choice\"\n> & {\n /** @see OptionListPropsSchema.id */\n id: string;\n value?: OptionListSelection;\n defaultValue?: OptionListSelection;\n /** @see OptionListPropsSchema.choice */\n choice?: OptionListSelection;\n onChange?: (value: OptionListSelection) => void;\n onConfirm?: (value: OptionListSelection) => void | Promise;\n onCancel?: () => void;\n responseActions?: ActionsProp;\n onResponseAction?: (actionId: string) => void | Promise;\n onBeforeResponseAction?: (actionId: string) => boolean | Promise;\n className?: string;\n};\n\nexport const SerializableOptionListSchema = OptionListPropsSchema.omit({\n // Exclude controlled selection from tool/LLM payloads.\n value: true,\n}).extend({\n options: z.array(OptionListOptionSchema.omit({ icon: true })),\n responseActions: z\n .union([z.array(SerializableActionSchema), SerializableActionsConfigSchema])\n .optional(),\n});\n\nexport type SerializableOptionList = z.infer<\n typeof SerializableOptionListSchema\n>;\n\nexport function parseSerializableOptionList(\n input: unknown,\n): SerializableOptionList {\n return parseWithSchema(SerializableOptionListSchema, input, \"OptionList\");\n}\n\nimport { z } from \"zod\";\nimport { cn } from \"@/lib/utils\";\n\nfunction formatZodPath(path: Array): string {\n if (path.length === 0) return \"root\";\n return path\n .map((segment) =>\n typeof segment === \"number\" ? `[${segment}]` : String(segment),\n )\n .join(\".\");\n}\n\n/**\n * Format Zod errors into a compact `path: message` string.\n */\nexport function formatZodError(error: z.ZodError): string {\n const parts = error.issues.map((issue) => {\n const path = formatZodPath(issue.path);\n return `${path}: ${issue.message}`;\n });\n\n return Array.from(new Set(parts)).join(\"; \");\n}\n\n/**\n * Parse unknown input and throw a readable error.\n */\nexport function parseWithSchema(\n schema: z.ZodType,\n input: unknown,\n name: string,\n): T {\n const res = schema.safeParse(input);\n if (!res.success) {\n throw new Error(`Invalid ${name} payload: ${formatZodError(res.error)}`);\n }\n return res.data;\n}\n", "type": "registry:ui", "target": "components/ui/option-list.tsx" } ], "type": "registry:ui" }