'use client'; import { useState } from 'react'; import { ChevronLeft, ChevronRight } from 'lucide-react'; import { cn } from '@/lib/utils'; /** A single selectable option. */ export interface Option { /** Stable identifier emitted on select. */ id: string; /** Visible label. */ label: string; /** Optional secondary description. */ description?: string; } /** Props for {@link OptionList}. */ export interface OptionListProps { /** The choices to present. Lists longer than `pageSize` paginate. */ options: Option[]; /** Fired with the chosen option when the user selects one. */ onSelect: (option: Option) => void; /** * Maximum options shown per page before paginating. * @default 6 */ pageSize?: number; /** Optional prompt rendered above the choices. */ prompt?: string; /** Currently selected option id (renders that option as active). */ selectedId?: string; /** Disable interaction (e.g. while the agent is thinking). */ disabled?: boolean; /** Additional class names merged onto the root element. */ className?: string; } /** * An inline multi-choice selection list presented in a chat / agent turn for * the user to pick from — distinct from quick-reply suggestion chips. It shows * up to `pageSize` (5–7) options at a time and paginates longer lists. The * choice is meant to feed back into a local agent inquiry loop (e.g. * human-in-the-loop disambiguation in `useAgent`). * * Presentational only — styled with shadcn/ui CSS variables. * * @example * ```tsx * resumeAgent(opt.id)} * /> * ``` */ export function OptionList({ options, onSelect, pageSize = 6, prompt, selectedId, disabled = false, className, }: OptionListProps) { const [page, setPage] = useState(0); const pageCount = Math.max(1, Math.ceil(options.length / pageSize)); const safePage = Math.min(page, pageCount - 1); const start = safePage * pageSize; const visible = options.slice(start, start + pageSize); return (

{prompt &&

{prompt}

}

{pageCount > 1 && (

{safePage + 1} / {pageCount}

)}

); } export default OptionList;