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:Tf4c7,"use client"; import { Input as InputPrimitive } from "@base-ui/react/input"; import { ArrowUp, Check, ChevronDown, ChevronLeft, ChevronRight, Mic, Plus, } from "lucide-react"; import { AnimatePresence, LayoutGroup, motion, useReducedMotion, } from "motion/react"; import { type ComponentType, Fragment, type ReactNode, useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; import { createPortal, flushSync } from "react-dom"; import { Switch } from "@/components/ui/b-switch"; const WAVE_DURATION_MS = 1000; const MAX_TEXTAREA_HEIGHT = 132; /** Spring used by the shared hover highlight that glides between plus-menu rows. */ const HOVER_SPRING = { type: "spring", stiffness: 460, damping: 34, mass: 0.58, } as const; /** Apple Intelligence-style spectrum used by the send wave. */ const WAVE_WASH_GRADIENT = "linear-gradient(180deg, transparent, rgba(34,211,238,0.07), rgba(59,130,246,0.09), rgba(217,70,239,0.1), rgba(244,63,94,0.09), rgba(249,115,22,0.08), transparent)"; export type AIInputOption = { value: string; label: string; }; export type AIInputMessage = { id: number; text: string; }; // ─── Settings dropdown types ──────────────────────────────────────────────── export type PromptSettingOption = { value: string; label: string; description?: string; }; export type PromptSettingGroup = { id: string; label: string; options: PromptSettingOption[]; /** Show the selected option as a featured row with description and checkmark. */ display?: "featured" | "submenu"; /** Optional submenu row label for picking other options (e.g. "More models"). */ moreMenuLabel?: string; }; export type PromptMenuAction = { label: string; icon?: ReactNode; onSelect: () => void; }; // ─── Settings dropdown helpers ─────────────────────────────────────────────── function getDefaultSettings( groups: PromptSettingGroup[], defaults?: Record ) { return groups.reduce>((acc, group) => { const preferred = defaults?.[group.id]; const hasPreferred = group.options.some((opt) => opt.value === preferred); acc[group.id] = hasPreferred && preferred ? preferred : (group.options[0]?.value ?? ""); return acc; }, {}); } function getOptionLabel(group: PromptSettingGroup, value: string) { return group.options.find((option) => option.value === value)?.label ?? value; } function getSelectedOption(group: PromptSettingGroup, value: string) { return group.options.find((option) => option.value === value); } const dropdownPanelClassName = "fixed z-[400] w-[min(14.5rem,calc(100vw-1.5rem))] overflow-y-auto overscroll-contain rounded-xl border border-border/60 bg-card py-1 text-sm shadow-[0_10px_28px_-20px_rgba(0,0,0,0.14)] outline-none [-webkit-overflow-scrolling:touch]"; const DROPDOWN_SIDE_OFFSET = 8; const DROPDOWN_VIEWPORT_MARGIN = 12; const DROPDOWN_SUBMENU_OFFSET = 4; const DROPDOWN_PANEL_WIDTH = 232; const DROPDOWN_ESTIMATED_HEIGHT = 240; const COMPACT_VIEWPORT_WIDTH = 640; const DROPDOWN_MIN_PANEL_HEIGHT = 160; function clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), max); } function isCompactViewport() { return window.innerWidth < COMPACT_VIEWPORT_WIDTH; } function getPanelWidth(viewportWidth: number) { return Math.min( DROPDOWN_PANEL_WIDTH, viewportWidth - DROPDOWN_VIEWPORT_MARGIN * 2 ); } function useCompactViewport() { const [isCompact, setIsCompact] = useState(() => { if (typeof window === "undefined") return false; return window.matchMedia(`(max-width: ${COMPACT_VIEWPORT_WIDTH - 1}px)`) .matches; }); useEffect(() => { const mediaQuery = window.matchMedia( `(max-width: ${COMPACT_VIEWPORT_WIDTH - 1}px)` ); const update = () => setIsCompact(mediaQuery.matches); update(); mediaQuery.addEventListener("change", update); return () => mediaQuery.removeEventListener("change", update); }, []); return isCompact; } function usePrefersHover() { const [prefersHover, setPrefersHover] = useState(false); useEffect(() => { const mediaQuery = window.matchMedia("(hover: hover) and (pointer: fine)"); const update = () => setPrefersHover(mediaQuery.matches); update(); mediaQuery.addEventListener("change", update); return () => mediaQuery.removeEventListener("change", update); }, []); return prefersHover; } function useIsMounted() { const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); return mounted; } function isInsideDropdownPanel(node: Node | null) { return ( node instanceof Element && Boolean(node.closest("[data-prompt-dropdown-panel]")) ); } function useDropdownDismiss({ open, onClose, onEscape, triggerRef, }: { open: boolean; onClose: () => void; onEscape?: () => boolean; triggerRef: React.RefObject; }) { useEffect(() => { if (!open) return; const handlePointerDown = (event: PointerEvent) => { const target = event.target as Node; if (triggerRef.current?.contains(target)) return; if (isInsideDropdownPanel(target)) return; onClose(); }; const handleKeyDown = (event: KeyboardEvent) => { if (event.key !== "Escape") return; event.stopPropagation(); if (onEscape?.()) return; onClose(); }; document.addEventListener("pointerdown", handlePointerDown); document.addEventListener("keydown", handleKeyDown); return () => { document.removeEventListener("pointerdown", handlePointerDown); document.removeEventListener("keydown", handleKeyDown); }; }, [onClose, onEscape, open, triggerRef]); } function preventFocusSteal(event: React.MouseEvent) { event.preventDefault(); } function activateOnEnterOrSpace( event: React.KeyboardEvent, action: () => void ) { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); action(); } } function ChevronDownIcon() { return ( ); } const BAR_XS = [1.5, 5.75, 10] as const; const BAR_WIDTH = 2.5; const BAR_BOTTOM = 12.5; type EffortLevel = "low" | "medium" | "high"; const BAR_HEIGHTS = [4.5, 7.5, 10.5] as const; const EFFORT_BAR_LEVELS: Record< EffortLevel, Array<{ height: number; visible: boolean }> > = { low: [ { height: 3.25, visible: true }, { height: 4.75, visible: true }, { height: 0, visible: false }, ], medium: [ { height: BAR_HEIGHTS[0], visible: true }, { height: BAR_HEIGHTS[1], visible: true }, { height: 0, visible: false }, ], high: [ { height: BAR_HEIGHTS[0], visible: true }, { height: BAR_HEIGHTS[1], visible: true }, { height: BAR_HEIGHTS[2], visible: true }, ], }; function normalizeEffortLevel(value: string): EffortLevel { if (value === "low" || value === "medium" || value === "high") return value; return "medium"; } function getEffortGroupId(groups: PromptSettingGroup[]) { return ( groups.find((group) => group.id === "effort")?.id ?? groups.find((group) => group.display === "submenu")?.id ); } const SETTINGS_TRANSITION = { type: "spring" as const, stiffness: 380, damping: 34, }; function EffortBarsIcon({ level }: { level: EffortLevel }) { const bars = EFFORT_BAR_LEVELS[level]; return ( ); } const dropdownSubmenuTriggerClassName = "relative flex min-h-9 w-full cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-sm outline-none transition-colors focus-visible:outline-none"; function DropdownFeaturedRow({ description, label, }: { description?: string; label: string; }) { return (

{label}

{description ? (

{description}

) : null}

); } const dropdownOptionClassName = "relative flex min-h-9 w-full cursor-pointer scroll-m-1 touch-manipulation items-center justify-between gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-sm outline-none transition-colors focus-visible:text-foreground focus-visible:outline-none"; const dropdownOptionHighlightClassName = "absolute inset-x-1 inset-y-0.5 rounded-lg bg-accent/65"; const dropdownHighlightSpring = { type: "spring" as const, stiffness: 600, damping: 38, }; const dropdownLabelSpring = { type: "spring" as const, stiffness: 360, damping: 28, mass: 0.55, }; const dropdownCheckSpring = { type: "spring" as const, stiffness: 460, damping: 24, mass: 0.5, }; const dropdownPanelSpring = { type: "spring" as const, stiffness: 420, damping: 34, mass: 0.72, }; type SubmenuOrigin = "left" | "right" | "below"; type SubmenuPosition = { left: number; top: number; maxHeight: number; origin: SubmenuOrigin; }; type DropdownSide = "top" | "bottom"; type DropdownPosition = { left: number; side: DropdownSide; top?: number; bottom?: number; maxHeight: number; }; function getMainDropdownMotion(side: DropdownSide, instantClose = false) { const offsetY = side === "bottom" ? -10 : 10; return { animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: instantClose ? 1 : 0.98, y: instantClose ? 0 : offsetY * 0.65, }, initial: { opacity: 0, scale: 0.96, y: offsetY }, transition: instantClose ? { duration: 0 } : dropdownPanelSpring, }; } function getMainDropdownInnerMotion(side: DropdownSide, instantClose = false) { const offsetY = side === "bottom" ? 5 : -5; return { animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: instantClose ? 0 : offsetY * 0.5 }, initial: { opacity: 0, y: offsetY }, transition: instantClose ? { duration: 0 } : { duration: 0.22, ease: [0.22, 1, 0.36, 1] as const }, }; } function getFlyoutSubmenuMotion(origin: SubmenuOrigin, instantClose = false) { const offsetX = origin === "right" ? -12 : 12; return { animate: { opacity: 1, scale: 1, x: 0 }, exit: { opacity: 0, scale: instantClose ? 1 : 0.98, x: instantClose ? 0 : offsetX * 0.55, }, initial: { opacity: 0, scale: 0.96, x: offsetX }, transition: instantClose ? { duration: 0 } : dropdownPanelSpring, }; } function getSubmenuPosition( triggerRect: DOMRect, panelHeight: number, panelWidth: number ) { const viewportHeight = window.innerHeight; const viewportWidth = window.innerWidth; const effectiveWidth = Math.min(panelWidth, getPanelWidth(viewportWidth)); if (isCompactViewport()) { const left = clamp( triggerRect.left, DROPDOWN_VIEWPORT_MARGIN, viewportWidth - effectiveWidth - DROPDOWN_VIEWPORT_MARGIN ); const top = triggerRect.bottom + DROPDOWN_SIDE_OFFSET; const maxHeight = Math.max( DROPDOWN_MIN_PANEL_HEIGHT, viewportHeight - top - DROPDOWN_VIEWPORT_MARGIN ); return { left, maxHeight, origin: "below" as const, top }; } const spaceRight = viewportWidth - triggerRect.right - DROPDOWN_SUBMENU_OFFSET - DROPDOWN_VIEWPORT_MARGIN; const openRight = spaceRight >= effectiveWidth; const left = openRight ? triggerRect.right + DROPDOWN_SUBMENU_OFFSET : triggerRect.left - effectiveWidth - DROPDOWN_SUBMENU_OFFSET; const clampedLeft = clamp( left, DROPDOWN_VIEWPORT_MARGIN, viewportWidth - effectiveWidth - DROPDOWN_VIEWPORT_MARGIN ); const maxTop = Math.max( DROPDOWN_VIEWPORT_MARGIN, viewportHeight - panelHeight - DROPDOWN_VIEWPORT_MARGIN ); const top = clamp(triggerRect.top, DROPDOWN_VIEWPORT_MARGIN, maxTop); const maxHeight = Math.max( DROPDOWN_MIN_PANEL_HEIGHT, viewportHeight - top - DROPDOWN_VIEWPORT_MARGIN ); return { left: clampedLeft, maxHeight, origin: openRight ? ("right" as const) : ("left" as const), top, }; } function getDropdownPosition({ align = "start", panelHeight, panelWidth, triggerRect, }: { align?: "end" | "start"; panelHeight: number; panelWidth: number; triggerRect: DOMRect; }): DropdownPosition { const viewportHeight = window.innerHeight; const viewportWidth = window.innerWidth; const effectiveWidth = Math.min(panelWidth, getPanelWidth(viewportWidth)); const spaceBelow = viewportHeight - triggerRect.bottom - DROPDOWN_SIDE_OFFSET - DROPDOWN_VIEWPORT_MARGIN; const spaceAbove = triggerRect.top - DROPDOWN_SIDE_OFFSET - DROPDOWN_VIEWPORT_MARGIN; const openBelow = spaceBelow >= panelHeight ? true : spaceAbove >= panelHeight ? false : spaceBelow >= spaceAbove; const desiredLeft = align === "end" ? triggerRect.right - effectiveWidth : triggerRect.left; const left = clamp( desiredLeft, DROPDOWN_VIEWPORT_MARGIN, viewportWidth - effectiveWidth - DROPDOWN_VIEWPORT_MARGIN ); const maxHeight = Math.max( DROPDOWN_MIN_PANEL_HEIGHT, openBelow ? spaceBelow : spaceAbove ); if (openBelow) { return { left, maxHeight, side: "bottom", top: triggerRect.bottom + DROPDOWN_SIDE_OFFSET, }; } return { left, maxHeight, side: "top", bottom: viewportHeight - triggerRect.top + DROPDOWN_SIDE_OFFSET, }; } function DropdownMenuDivider() { return

; } function DropdownOption({ label, selected, onSelect, activeItemId, highlightLayoutId, setActiveItemId, }: { label: string; selected: boolean; onSelect: () => void; activeItemId: string | null; highlightLayoutId: string; setActiveItemId: (itemId: string | null) => void; }) { const itemId = useId(); const isActive = activeItemId === itemId; return ( ); } function DropdownActionItem({ label, icon, shortcut, onSelect, activeItemId, highlightLayoutId, setActiveItemId, }: { label: string; icon?: ReactNode; shortcut?: string; onSelect: () => void; activeItemId: string | null; highlightLayoutId: string; setActiveItemId: (itemId: string | null) => void; }) { const itemId = useId(); const isActive = activeItemId === itemId; return ( ); } function useSubmenuPosition({ isCompact, isOpen, submenuRef, triggerRef, }: { isCompact: boolean; isOpen: boolean; submenuRef: React.RefObject; triggerRef: React.RefObject; }) { const [submenuPosition, setSubmenuPosition] = useState({ left: 0, maxHeight: DROPDOWN_ESTIMATED_HEIGHT, origin: "right", top: 0, }); const updateSubmenuPosition = useCallback(() => { const trigger = triggerRef.current; const submenu = submenuRef.current; if (!trigger) return; const panelHeight = submenu?.offsetHeight ?? DROPDOWN_ESTIMATED_HEIGHT; const panelWidth = submenu?.offsetWidth ?? DROPDOWN_PANEL_WIDTH; setSubmenuPosition( getSubmenuPosition( trigger.getBoundingClientRect(), panelHeight, panelWidth ) ); }, [submenuRef, triggerRef]); useLayoutEffect(() => { if (!isOpen || isCompact) return; updateSubmenuPosition(); const submenu = submenuRef.current; let observer: ResizeObserver | undefined; if (submenu) { observer = new ResizeObserver(updateSubmenuPosition); observer.observe(submenu); } window.addEventListener("resize", updateSubmenuPosition); window.addEventListener("scroll", updateSubmenuPosition, true); return () => { observer?.disconnect(); window.removeEventListener("resize", updateSubmenuPosition); window.removeEventListener("scroll", updateSubmenuPosition, true); }; }, [isCompact, isOpen, submenuRef, updateSubmenuPosition]); return { submenuPosition, updateSubmenuPosition }; } function SubmenuInlinePanel({ isOpen, submenuOptions, }: { isOpen: boolean; submenuOptions: ReactNode; }) { if (!isOpen) return null; return

{submenuOptions}

; } function SubmenuFlyoutPanel({ flyoutSubmenuMotion, groupLabel, isOpen, itemId, onOpenChange, prefersHover, setActiveItemId, submenuHighlightLayoutId, submenuId, submenuOptions, submenuPosition, submenuRef, triggerRef, }: { flyoutSubmenuMotion: ReturnType; groupLabel: string; isOpen: boolean; itemId: string; onOpenChange: (open: boolean) => void; prefersHover: boolean; setActiveItemId: (itemId: string | null) => void; submenuHighlightLayoutId: string; submenuId: string; submenuOptions: ReactNode; submenuPosition: SubmenuPosition; submenuRef: React.RefObject; triggerRef: React.RefObject; }) { return ( {isOpen ? ( setActiveItemId(itemId)} onMouseLeave={ prefersHover ? (event) => { const related = event.relatedTarget as Node | null; if (triggerRef.current?.contains(related)) return; if (isInsideDropdownPanel(related)) return; onOpenChange(false); } : undefined } ref={submenuRef} role="menu" style={{ left: submenuPosition.left, maxHeight: submenuPosition.maxHeight, top: submenuPosition.top, transformOrigin: submenuPosition.origin === "right" ? "left top" : "right top", zIndex: 401, }} transition={flyoutSubmenuMotion.transition} > 0 ? 3 : -3, }} initial={{ opacity: 0, y: flyoutSubmenuMotion.initial.x > 0 ? -3 : 3, }} transition={{ duration: 0.18, ease: [0.22, 1, 0.36, 1] }} > {submenuOptions} ) : null} ); } function DropdownSubmenu({ group, selectedValue, triggerLabel, valueLabel, icon, submenuId, isOpen, onOpenChange, onSelect, activeItemId, highlightLayoutId, submenuHighlightLayoutId, setActiveItemId, }: { group: PromptSettingGroup; selectedValue: string; triggerLabel: string; valueLabel?: string; icon?: ReactNode; submenuId: string; isOpen: boolean; onOpenChange: (open: boolean) => void; onSelect: (value: string) => void; activeItemId: string | null; highlightLayoutId: string; submenuHighlightLayoutId: string; setActiveItemId: (itemId: string | null) => void; }) { const itemId = useId(); const triggerRef = useRef(null); const submenuRef = useRef(null); const isCompact = useCompactViewport(); const prefersHover = usePrefersHover(); const mounted = useIsMounted(); const { submenuPosition, updateSubmenuPosition } = useSubmenuPosition({ isCompact, isOpen, submenuRef, triggerRef, }); const isActive = activeItemId === itemId || isOpen; const flyoutSubmenuMotion = getFlyoutSubmenuMotion(submenuPosition.origin); const wasCompactRef = useRef(null); useEffect(() => { const previousCompact = wasCompactRef.current; wasCompactRef.current = isCompact; if (previousCompact === false && isCompact && isOpen) { onOpenChange(false); } }, [isCompact, isOpen, onOpenChange]); const openSubmenu = useCallback(() => { if (isCompact) return; updateSubmenuPosition(); onOpenChange(true); }, [isCompact, onOpenChange, updateSubmenuPosition]); const toggleSubmenu = useCallback(() => { setActiveItemId(itemId); onOpenChange(!isOpen); }, [isOpen, itemId, onOpenChange, setActiveItemId]); const handleTriggerMouseLeave = useCallback( (event: React.MouseEvent) => { const related = event.relatedTarget as Node | null; if (submenuRef.current?.contains(related)) return; if (isInsideDropdownPanel(related)) return; if (isOpen) onOpenChange(false); }, [isOpen, onOpenChange] ); const handleOptionSelect = useCallback( (value: string) => { flushSync(() => { onOpenChange(false); }); onSelect(value); }, [onOpenChange, onSelect] ); const submenuOptions = (

{group.options.map((option) => ( handleOptionSelect(option.value)} selected={selectedValue === option.value} setActiveItemId={setActiveItemId} /> ))}

); return ( <> {isCompact ? ( ) : null} {!isCompact && mounted ? createPortal( , document.body ) : null} ); } export function SettingsDropdown({ groups, values, menuActions = [], onOpenChange, onValueChange, }: { groups: PromptSettingGroup[]; values: Record; menuActions?: PromptMenuAction[]; onOpenChange?: (open: boolean) => void; onValueChange: (groupId: string, value: string) => void; }) { const [open, setOpen] = useState(false); const [openSubmenuId, setOpenSubmenuId] = useState(null); const [activeItemId, setActiveItemId] = useState(null); const highlightLayoutId = useId(); const [position, setPosition] = useState({ left: 0, maxHeight: DROPDOWN_ESTIMATED_HEIGHT, side: "bottom", top: 0, }); const triggerRef = useRef(null); const panelRef = useRef(null); const prefersHover = usePrefersHover(); const isCompact = useCompactViewport(); const mounted = useIsMounted(); const [instantDismiss, setInstantDismiss] = useState(false); const handleOpenChange = useCallback( (nextOpen: boolean) => { setOpen(nextOpen); onOpenChange?.(nextOpen); if (!nextOpen) { setActiveItemId(null); setOpenSubmenuId(null); } }, [onOpenChange] ); const dismissDropdown = useCallback( (instant = false) => { if (instant) setInstantDismiss(true); handleOpenChange(false); }, [handleOpenChange] ); useEffect(() => { if (open) setInstantDismiss(false); }, [open]); const handleSubmenuSelect = useCallback( (groupId: string, value: string) => { onValueChange(groupId, value); setOpenSubmenuId(null); if (!isCompact) dismissDropdown(true); }, [dismissDropdown, isCompact, onValueChange] ); const updatePosition = useCallback(() => { const trigger = triggerRef.current; if (!trigger) return; const triggerRect = trigger.getBoundingClientRect(); const panel = panelRef.current; const panelHeight = panel?.offsetHeight ?? DROPDOWN_ESTIMATED_HEIGHT; const panelWidth = panel?.offsetWidth ?? DROPDOWN_PANEL_WIDTH; setPosition(getDropdownPosition({ panelHeight, panelWidth, triggerRect })); }, []); useLayoutEffect(() => { if (!open) return; updatePosition(); const panel = panelRef.current; let observer: ResizeObserver | undefined; if (panel) { observer = new ResizeObserver(() => updatePosition()); observer.observe(panel); } window.addEventListener("resize", updatePosition); window.addEventListener("scroll", updatePosition, true); return () => { observer?.disconnect(); window.removeEventListener("resize", updatePosition); window.removeEventListener("scroll", updatePosition, true); }; }, [open, updatePosition]); const handleEscape = useCallback(() => { if (openSubmenuId) { setOpenSubmenuId(null); return true; } return false; }, [openSubmenuId]); useDropdownDismiss({ onClose: () => handleOpenChange(false), onEscape: handleEscape, open, triggerRef, }); const toggleOpen = useCallback(() => { if (open) { handleOpenChange(false); return; } updatePosition(); handleOpenChange(true); }, [handleOpenChange, open, updatePosition]); const selectedLabels = groups.map((group) => getOptionLabel(group, values[group.id] ?? "") ); const triggerLabel = selectedLabels.join(", "); const effortGroupId = getEffortGroupId(groups); const effortLevel = normalizeEffortLevel( effortGroupId ? (values[effortGroupId] ?? "medium") : "medium" ); const mainDropdownMotion = getMainDropdownMotion( position.side, instantDismiss ); const mainDropdownInnerMotion = getMainDropdownInnerMotion( position.side, instantDismiss ); return ( <> {mounted && createPortal( {open ? ( ) : null} , document.body )} ); } // ─── Plus menu ─────────────────────────────────────────────────────────────── export type AIInputMenuItem = { value: string; /** Not needed for separators. */ label?: string; icon?: ComponentType<{ className?: string }>; /** "action" (default) fires onMenuSelect, "toggle" renders a switch, "separator" draws a divider. */ type?: "action" | "toggle" | "separator"; /** Initial state for toggle items. */ defaultChecked?: boolean; /** Keyboard shortcut shown on the right of action items (e.g. "⌘U"). */ shortcut?: string; /** Called when this action item is clicked, in addition to onMenuSelect. */ onClick?: () => void; /** Called when this toggle item changes, in addition to onMenuToggle. */ onCheckedChange?: (checked: boolean) => void; /** Nested items turn an action into a submenu (one level deep). */ items?: AIInputMenuItem[]; }; function OptionMenu({ align = "start", ariaLabel, chipClassName, onChange, options, value, }: { align?: "start" | "end"; ariaLabel: string; chipClassName: string; onChange: (value: string) => void; options: AIInputOption[]; value: string; }) { const [open, setOpen] = useState(false); const [upward, setUpward] = useState(false); const [hoveredValue, setHoveredValue] = useState(null); const hoverLayoutId = useId(); const containerRef = useRef(null); useEffect(() => { if (!open) return; const handlePointerDown = (event: PointerEvent) => { if (containerRef.current?.contains(event.target as Node)) return; setOpen(false); }; const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") setOpen(false); }; document.addEventListener("pointerdown", handlePointerDown); document.addEventListener("keydown", handleKeyDown); return () => { document.removeEventListener("pointerdown", handlePointerDown); document.removeEventListener("keydown", handleKeyDown); }; }, [open]); const selected = options.find((option) => option.value === value) ?? options[0]; return (

{open ? ( setHoveredValue(null)} role="menu" transition={{ duration: 0.16, ease: "easeOut" }} > {options.map((option) => ( ))} ) : null}

); } function SendWave({ reducedMotion }: { reducedMotion: boolean }) { return ( ); } const PLUS_PANEL_HEIGHT = 260; const plusSlideVariants = { enter: (dir: number) => ({ opacity: 0, x: dir * 10 }), visible: { opacity: 1, x: 0 }, exit: (dir: number) => ({ opacity: 0, x: dir * -10 }), }; function collectToggleDefaults(items: AIInputMenuItem[]) { const defaults: Record = {}; for (const item of items) { if (item.type === "toggle") { defaults[item.value] = item.defaultChecked ?? false; } for (const child of item.items ?? []) { if (child.type === "toggle") { defaults[child.value] = child.defaultChecked ?? false; } } } return defaults; } function PlusMenuIcon({ icon: Icon, }: { icon?: ComponentType<{ className?: string }>; }) { if (!Icon) return null; return ( ); } function PlusMenu({ items, onSelect, onToggle, }: { items: AIInputMenuItem[]; onSelect?: (value: string) => void; onToggle?: (value: string, checked: boolean) => void; }) { const [open, setOpen] = useState(false); const [upward, setUpward] = useState(false); const [toggles, setToggles] = useState>(() => collectToggleDefaults(items) ); const [activeSubmenu, setActiveSubmenu] = useState(null); const [slideDir, setSlideDir] = useState(1); const [hoveredValue, setHoveredValue] = useState(null); const hoverLayoutId = useId(); const containerRef = useRef(null); useEffect(() => { if (!open) return; const handlePointerDown = (event: PointerEvent) => { if (containerRef.current?.contains(event.target as Node)) return; setOpen(false); }; const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") setOpen(false); }; document.addEventListener("pointerdown", handlePointerDown); document.addEventListener("keydown", handleKeyDown); return () => { document.removeEventListener("pointerdown", handlePointerDown); document.removeEventListener("keydown", handleKeyDown); }; }, [open]); const handleOpen = () => { if (!open) { if (containerRef.current) { const rect = containerRef.current.getBoundingClientRect(); setUpward(window.innerHeight - rect.bottom < PLUS_PANEL_HEIGHT); } setActiveSubmenu(null); setSlideDir(1); setHoveredValue(null); } setOpen((previous) => !previous); }; const handleToggle = (item: AIInputMenuItem, checked: boolean) => { setToggles((previous) => ({ ...previous, [item.value]: checked })); item.onCheckedChange?.(checked); onToggle?.(item.value, checked); }; const handleAction = (item: AIInputMenuItem) => { item.onClick?.(); onSelect?.(item.value); setOpen(false); }; const openSub = (value: string) => { setSlideDir(1); setActiveSubmenu(value); setHoveredValue(null); }; const closeSub = () => { setSlideDir(-1); setActiveSubmenu(null); setHoveredValue(null); }; const hoverHighlight = (key: string) => hoveredValue === key ? ( ) : null; const renderItem = (item: AIInputMenuItem, inSubmenu: boolean) => { if (item.type === "separator") { return

; } if (item.type === "toggle") { return (

setHoveredValue(item.value)} > {hoverHighlight(item.value)}

{item.label}

handleToggle(item, checked)} size="sm" />

); } if (!inSubmenu && item.items && item.items.length > 0) { return ( ); } return ( ); }; const activeParent = activeSubmenu ? items.find((item) => item.value === activeSubmenu) : undefined; return (

{open ? ( setHoveredValue(null)} role="menu" transition={{ duration: 0.16, ease: "easeOut" }} > {activeParent ? (

{(activeParent.items ?? []).map((item) => renderItem(item, true) )} ) : ( {items.map((item) => renderItem(item, false))} )} ) : null}

); } // ─── Public component ──────────────────────────────────────────────────────── export type AIInputProps = { /** Options for the agent chip on the left. */ agents?: AIInputOption[]; defaultAgent?: string; /** Setting groups for the settings dropdown (model, effort, etc.). */ settingGroups?: PromptSettingGroup[]; defaultSettings?: Record; /** Action items shown at the top of the settings dropdown. */ menuActions?: PromptMenuAction[]; /** Items for the plus menu: actions, toggles, separators, and one-level submenus. */ menuItems?: AIInputMenuItem[]; placeholder?: string; /** Render sent messages as chat bubbles above the composer. */ showMessages?: boolean; onSend?: ( message: string, meta: { agent: string; settings: Record } ) => void; onMicClick?: () => void; /** Fired when the plus button is clicked and no menuItems are provided. */ onPlusClick?: () => void; /** Fired when an action item (or submenu item) is selected in the plus menu. */ onMenuSelect?: (value: string) => void; /** Fired when a toggle item in the plus menu changes. */ onMenuToggle?: (value: string, checked: boolean) => void; /** Fired when the agent chip selection changes. */ onAgentChange?: (value: string) => void; /** Fired when any setting in the settings dropdown changes. */ onSettingsChange?: (settings: Record) => void; className?: string; }; export function AIInput({ agents = [], defaultAgent, settingGroups = [], defaultSettings, menuActions = [], menuItems = [], placeholder = "Ask for follow-up changes", showMessages = true, onSend, onMicClick, onPlusClick, onMenuSelect, onMenuToggle, onAgentChange, onSettingsChange, className, }: AIInputProps) { const [value, setValue] = useState(""); const [messages, setMessages] = useState([]); const [waveRun, setWaveRun] = useState(0); const [agent, setAgent] = useState( () => defaultAgent ?? agents[0]?.value ?? "" ); const [internalSettings, setInternalSettings] = useState(() => getDefaultSettings(settingGroups, defaultSettings) ); const nextMessageIdRef = useRef(0); const waveTimeoutRef = useRef(undefined); const textareaRef = useRef(null); const messagesRef = useRef(null); const reducedMotion = useReducedMotion() ?? false; const hasValue = value.trim() !== ""; useEffect(() => () => window.clearTimeout(waveTimeoutRef.current), []); const syncHeight = useCallback(() => { const element = textareaRef.current; if (!element) return; element.style.height = "auto"; element.style.height = `${Math.min(element.scrollHeight, MAX_TEXTAREA_HEIGHT)}px`; }, []); const handleSend = useCallback(() => { const trimmed = value.trim(); if (trimmed === "") return; nextMessageIdRef.current += 1; setMessages((previous) => [ ...previous, { id: nextMessageIdRef.current, text: trimmed }, ]); onSend?.(trimmed, { agent, settings: internalSettings }); setValue(""); requestAnimationFrame(() => { const element = textareaRef.current; if (element) element.style.height = "auto"; messagesRef.current?.scrollTo({ top: messagesRef.current.scrollHeight, behavior: reducedMotion ? "auto" : "smooth", }); }); setWaveRun((run) => run + 1); window.clearTimeout(waveTimeoutRef.current); waveTimeoutRef.current = window.setTimeout(() => { setWaveRun(0); }, WAVE_DURATION_MS); }, [agent, internalSettings, onSend, reducedMotion, value]); const handleKeyDown = useCallback( (event: React.KeyboardEvent) => { if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); handleSend(); } }, [handleSend] ); return (

{showMessages && messages.length > 0 ? (

{messages.map((message) => ( {message.text} ))}

) : null}

{waveRun > 0 ? ( ) : null} { setValue(next); syncHeight(); }} placeholder={placeholder} render={

}
          value={value}
        />

<div className="flex items-center gap-1.5 px-2.5 pt-1 pb-2.5 sm:gap-2 sm:px-3 sm:pb-3">
          {menuItems.length > 0 ? (
            <PlusMenu
              items={menuItems}
              onSelect={onMenuSelect}
              onToggle={onMenuToggle}
            />
          ) : (
            <button
              aria-label="Add attachment"
              className="flex size-8 shrink-0 items-center justify-center rounded-full text-foreground/70 transition-colors hover:text-foreground sm:size-9"
              onClick={onPlusClick}
              type="button"
            >
              <Plus aria-hidden="true" className="size-4" />
            </button>
          )}

{agents.length > 0 ? (
            <OptionMenu
              ariaLabel="Select agent"
              chipClassName="flex w-full min-w-14 items-center gap-1.5 rounded-full bg-muted px-3 py-1.5 font-medium text-foreground text-sm transition-colors hover:bg-accent sm:px-3.5 sm:py-2"
              onChange={(next) => {
                setAgent(next);
                onAgentChange?.(next);
              }}
              options={agents}
              value={agent}
            />
          ) : null}

<div className="ml-auto flex shrink-0 items-center gap-1 sm:gap-1.5">
            {settingGroups.length > 0 || menuActions.length > 0 ? (
              <SettingsDropdown
                groups={settingGroups}
                menuActions={menuActions}
                onValueChange={(groupId, val) => {
                  const next = { ...internalSettings, [groupId]: val };
                  setInternalSettings(next);
                  onSettingsChange?.(next);
                }}
                values={internalSettings}
              />
            ) : null}

<button
              aria-label="Send message"
              className={`flex size-8 shrink-0 items-center justify-center rounded-full transition-[background-color,opacity,transform] sm:size-9 ${hasValue ? "bg-foreground text-background hover:opacity-90" : "cursor-default bg-muted-foreground/50 text-background"}`}
              disabled={!hasValue}
              onClick={handleSend}
              type="button"
            >
              <ArrowUp
                aria-hidden="true"
                className="size-4"
                strokeWidth={2.25}
              />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@iconiq","registryDependencies":["b-switch"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ai-input.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>