"use client"; import { Input as InputPrimitive } from "@base-ui/react/input"; import { ArrowUp, Check, ChevronDown, ChevronLeft, Mic } from "lucide-react"; import { AnimatePresence, LayoutGroup, motion } from "motion/react"; import { Fragment, type ReactNode, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react"; import { createPortal, flushSync } from "react-dom"; import { ClaudeAI, Cursor, OpenAI } from "./prompt-box-icons"; const SHELL_SPRING = { type: "spring" as const, stiffness: 400, damping: 25, mass: 1.5, }; const SETTINGS_PANEL_SPRING = { type: "spring" as const, stiffness: 480, damping: 24, mass: 0.85, }; const EASE_OUT = [0.215, 0.61, 0.355, 1] as const; const EASE_OUT_QUAD = [0.25, 0.46, 0.45, 0.94] as const; const FAST_TRANSITION = { duration: 0.16, ease: EASE_OUT_QUAD, }; const COLLAPSED_HEIGHT = 52; /** Approximate settle time for SHELL_SPRING height collapse before hover affordances. */ const SHELL_COLLAPSE_SETTLE_MS = 320; const FOOTER_HEIGHT = 52; /** One line: pt-5 (20px) + leading-5 (20px) */ const SINGLE_LINE_TEXTAREA_HEIGHT = 40; const MIN_EXPANDED_HEIGHT = SINGLE_LINE_TEXTAREA_HEIGHT + FOOTER_HEIGHT; const MAX_TEXTAREA_HEIGHT = 254; const MAX_EXPANDED_HEIGHT = MAX_TEXTAREA_HEIGHT + FOOTER_HEIGHT; const promptFieldClassName = "field-sizing-content w-full border-0 bg-transparent text-base leading-5 text-foreground shadow-none outline-none placeholder:font-medium placeholder:text-muted-foreground focus:outline-none focus-visible:outline-none focus-visible:ring-0"; const promptFieldCollapsedClassName = "w-full border-0 bg-transparent text-base text-muted-foreground shadow-none outline-none placeholder:font-medium placeholder:text-muted-foreground focus:outline-none focus-visible:outline-none focus-visible:ring-0"; const promptFieldCollapsedRowClassName = "h-8 min-w-0 flex-1 cursor-text border-0 bg-transparent p-0 font-medium leading-8 text-muted-foreground placeholder:text-muted-foreground placeholder:leading-8"; export type PromptSettingOption = { value: string; label: string; description?: string; icon?: ReactNode; }; export type PromptSettingGroup = { id: string; label: string; options: PromptSettingOption[]; /** Render options as selectable rows in the main panel. */ display?: "featured" | "submenu"; }; export type PromptMenuAction = { label: string; icon?: ReactNode; onSelect: () => void; }; export type PromptPlusMenuOption = { value: string; label: string; }; export type PromptPlusMenuItem = { id: string; label: string; icon?: ReactNode; shortcut?: string; onSelect?: () => void; options?: PromptPlusMenuOption[]; onOptionSelect?: (value: string) => void; }; function getDefaultSettings( groups: PromptSettingGroup[], defaults?: Record ) { return groups.reduce>((settings, group) => { const preferred = defaults?.[group.id]; const hasPreferred = group.options.some( (option) => option.value === preferred ); settings[group.id] = hasPreferred && preferred ? preferred : (group.options[0]?.value ?? ""); return settings; }, {}); } function getOptionLabel(group: PromptSettingGroup, value: string) { return group.options.find((option) => option.value === value)?.label ?? value; } function getSelectedSettingIcon( groups: PromptSettingGroup[], values: Record ) { const featuredGroup = groups.find((group) => group.display === "featured"); const group = featuredGroup ?? groups[0]; if (!group) return null; const selectedValue = values[group.id] ?? ""; return group.options.find((option) => option.value === selectedValue)?.icon ?? null; } function CollapsedSelectedModelIcon({ icon, reduceMotion, visible, }: { icon: ReactNode; reduceMotion: boolean; visible: boolean; }) { return ( {visible ? ( ) : null} ); } const dropdownPanelClassName = "fixed z-[400] w-[min(17rem,calc(100vw-1.5rem))] overflow-y-auto overscroll-contain rounded-lg bg-popover py-1 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-none [-webkit-overflow-scrolling:touch]"; const settingsDropdownPanelClassName = "fixed z-[400] min-w-[15rem] w-max max-w-[calc(100vw-1.5rem)] overflow-y-auto overscroll-contain rounded-lg bg-popover p-1 text-sm leading-none text-popover-foreground shadow-md ring-1 ring-foreground/10 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 = 272; const DROPDOWN_ESTIMATED_HEIGHT = 280; 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 getPanelWidth(viewportWidth: number) { return Math.min( DROPDOWN_PANEL_WIDTH, viewportWidth - DROPDOWN_VIEWPORT_MARGIN * 2 ); } /** * Starts at `false` on both server and client and is corrected in the effect. * Matching the query during the initial render instead would make the first * client render disagree with the server HTML, and buy nothing: the effect * below already applies the real value on mount. */ function useMediaQuery(query: string) { const [matches, setMatches] = useState(false); useEffect(() => { const mediaQuery = window.matchMedia(query); const update = () => setMatches(mediaQuery.matches); update(); mediaQuery.addEventListener("change", update); return () => mediaQuery.removeEventListener("change", update); }, [query]); return matches; } const COMPACT_VIEWPORT_QUERY = `(max-width: ${COMPACT_VIEWPORT_WIDTH - 1}px)`; function useCompactViewport() { return useMediaQuery(COMPACT_VIEWPORT_QUERY); } function usePrefersHover() { return useMediaQuery("(hover: hover) and (pointer: fine)"); } function usePrefersReducedMotion() { return useMediaQuery("(prefers-reduced-motion: reduce)"); } function useIsMounted() { const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); return mounted; } function getPanelMotion({ offsetX = 0, offsetY = 0, openingEase, reduceMotion = false, instantDismiss = false, }: { offsetX?: number; offsetY?: number; openingEase?: { type: "spring"; stiffness: number; damping: number; mass: number; }; reduceMotion?: boolean; instantDismiss?: boolean; }) { if (reduceMotion) { return { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: instantDismiss ? 0 : 0.12 } }, transition: { duration: instantDismiss ? 0 : 0.12 }, }; } return { initial: { opacity: 0, scale: 0.94, x: offsetX, y: offsetY }, animate: { opacity: 1, scale: 1, x: 0, y: 0 }, exit: instantDismiss ? { opacity: 0, scale: 1, x: 0, y: 0, transition: { duration: 0 } } : { opacity: 0, scale: 0.98, x: offsetX * 0.55, y: offsetY * 0.65, transition: { duration: 0.14, ease: EASE_OUT_QUAD }, }, transition: instantDismiss ? { duration: 0 } : (openingEase ?? { duration: 0.24, ease: EASE_OUT }), }; } 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(); } } 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 ); } function EffortBarsIcon({ level }: { level: EffortLevel }) { const bars = EFFORT_BAR_LEVELS[level]; return ( ); } const dropdownSubmenuTriggerClassName = "relative flex min-h-11 w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-start text-sm outline-none transition-colors focus-visible:outline-none"; const dropdownOptionClassName = "relative flex min-h-11 w-full cursor-pointer scroll-m-1 touch-manipulation items-center justify-between gap-3 rounded-lg px-3 py-2.5 text-start text-sm outline-none transition-colors focus-visible:text-foreground focus-visible:outline-none"; const settingsDropdownOptionClassName = "relative flex min-h-10 w-full cursor-pointer scroll-m-1 touch-manipulation items-center justify-between gap-2.5 rounded-md py-2 ps-2 pe-2 text-start text-sm outline-none transition-[color,background-color,transform] duration-150 ease-out active:scale-[0.96] focus-visible:text-foreground focus-visible:outline-none"; const settingsDropdownHighlightClassName = "absolute inset-0 rounded-md bg-accent"; const dropdownOptionHighlightClassName = "absolute inset-x-1 inset-y-0.5 rounded-lg bg-accent/65"; 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; }; 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, isCompact: boolean ) { const viewportHeight = window.innerHeight; const viewportWidth = window.innerWidth; const effectiveWidth = Math.min(panelWidth, getPanelWidth(viewportWidth)); if (isCompact) { 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 DropdownMenuDivider() { return

; } function DropdownOption({ compact = false, icon, label, reveal = false, reduceMotion = false, selected, staggerIndex, onSelect, activeItemId, highlightLayoutId, setActiveItemId, }: { compact?: boolean; icon?: ReactNode; label: string; reveal?: boolean; reduceMotion?: boolean; selected: boolean; staggerIndex?: number; onSelect: () => void; activeItemId: string | null; highlightLayoutId: string; setActiveItemId: (itemId: string | null) => void; }) { const itemId = useId(); const isActive = activeItemId === itemId; const shouldReveal = compact && staggerIndex !== undefined && reveal; const revealMotion = shouldReveal ? reduceMotion ? { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.12, ease: EASE_OUT_QUAD }, } : { initial: { opacity: 0, y: 8, filter: "blur(4px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { delay: staggerIndex * 0.08, duration: 0.22, ease: EASE_OUT, }, } : undefined; return ( activateOnEnterOrSpace(event, onSelect)} onMouseDown={preventFocusSteal} onMouseEnter={() => setActiveItemId(itemId)} onPointerMove={() => setActiveItemId(itemId)} role="menuitemradio" tabIndex={-1} type="button" {...revealMotion} > {isActive ? ( ) : null} {icon ? ( {icon} ) : null} {label} {selected ? ( ) : null} ); } function DropdownActionItem({ label, icon, shortcut, onSelect, activeItemId, highlightLayoutId, setActiveItemId, }: { label: string; icon?: React.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, isCompact ) ); }, [isCompact, 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} >

{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} ); } type DropdownSide = "top" | "bottom"; type DropdownPosition = { left: number; side: DropdownSide; top?: number; bottom?: number; maxHeight: number; }; 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 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 menuLayoutRef = useRef(null); const prefersHover = usePrefersHover(); const prefersReducedMotion = usePrefersReducedMotion(); const isCompact = useCompactViewport(); const mounted = useIsMounted(); const [instantDismiss, setInstantDismiss] = useState(false); const settingsPanelMotion = getPanelMotion({ instantDismiss, offsetY: position.side === "bottom" ? -8 : 8, openingEase: SETTINGS_PANEL_SPRING, reduceMotion: prefersReducedMotion, }); const handleActiveItemChange = useCallback((itemId: string | null) => { setActiveItemId(itemId); }, []); 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" ); return ( <> {mounted ? createPortal( {open ? ( ) : null} , document.body ) : null} ); } function PlusMenuDropdown({ items, onOpenChange, }: { items: PromptPlusMenuItem[]; onOpenChange: (open: boolean) => void; }) { const [open, setOpen] = useState(false); const [openSubmenuId, setOpenSubmenuId] = useState(null); const [activeItemId, setActiveItemId] = useState(null); const highlightLayoutId = useId(); const prefersHover = usePrefersHover(); const [position, setPosition] = useState({ left: 0, maxHeight: DROPDOWN_ESTIMATED_HEIGHT, side: "top", top: 0, }); const triggerRef = useRef(null); const panelRef = useRef(null); const menuLayoutRef = useRef(null); const isCompact = useCompactViewport(); const mounted = useIsMounted(); const [instantDismiss, setInstantDismiss] = useState(false); const plusPanelMotion = getPanelMotion({ instantDismiss, offsetY: position.side === "bottom" ? -10 : 10, }); const handleActiveItemChange = useCallback((itemId: string | null) => { setActiveItemId(itemId); }, []); 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 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({ align: "end", 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]); return ( <> {mounted ? createPortal( {open ? ( ) : null} , document.body ) : null} ); } function PlusIcon() { return ( ); } export type PromptInputProps = { onSubmit?: (value: string) => void; placeholder?: string; menuActions?: PromptMenuAction[]; plusMenuItems?: PromptPlusMenuItem[]; settingGroups?: PromptSettingGroup[]; settings?: Record; defaultSettings?: Record; onSettingsChange?: (settings: Record) => void; }; export function PromptInput({ onSubmit, placeholder, menuActions = [], plusMenuItems = [], settingGroups = [], settings: settingsProp, defaultSettings, onSettingsChange, }: PromptInputProps) { const [expanded, setExpanded] = useState(false); const [value, setValue] = useState(""); const valueRef = useRef(value); valueRef.current = value; const [internalSettings, setInternalSettings] = useState(() => getDefaultSettings(settingGroups, defaultSettings) ); const isSettingsControlled = settingsProp !== undefined; const settings = isSettingsControlled ? settingsProp : internalSettings; const [settingsOpen, setSettingsOpen] = useState(false); const [plusOpen, setPlusOpen] = useState(false); const settingsOpenRef = useRef(settingsOpen); const plusOpenRef = useRef(plusOpen); settingsOpenRef.current = settingsOpen; plusOpenRef.current = plusOpen; const [expandedHeight, setExpandedHeight] = useState(MIN_EXPANDED_HEIGHT); const [collapsedHover, setCollapsedHover] = useState(false); const [collapsedHoverReady, setCollapsedHoverReady] = useState(!expanded); const hasValue = value.trim() !== ""; const inputRef = useRef(null); const containerRef = useRef(null); const showSettings = settingGroups.length > 0 || menuActions.length > 0; const prefersHover = usePrefersHover(); const prefersReducedMotion = usePrefersReducedMotion(); const shellTransition = prefersReducedMotion ? { duration: 0.2, ease: EASE_OUT_QUAD } : SHELL_SPRING; const selectedModelIcon = useMemo( () => getSelectedSettingIcon(settingGroups, settings), [settingGroups, settings] ); useEffect(() => { if (expanded) { setCollapsedHover(false); setCollapsedHoverReady(false); return; } setCollapsedHover(false); const timeout = window.setTimeout(() => { setCollapsedHoverReady(true); }, SHELL_COLLAPSE_SETTLE_MS); return () => window.clearTimeout(timeout); }, [expanded]); const updateSettings = useCallback( (groupId: string, nextValue: string) => { const nextSettings = { ...settings, [groupId]: nextValue }; if (!isSettingsControlled) { setInternalSettings(nextSettings); } onSettingsChange?.(nextSettings); }, [isSettingsControlled, onSettingsChange, settings] ); useEffect(() => { if (isSettingsControlled) return; setInternalSettings((previous) => { const defaults = getDefaultSettings(settingGroups, defaultSettings); const next = { ...defaults }; for (const group of settingGroups) { const previousValue = previous[group.id]; const isValid = group.options.some( (option) => option.value === previousValue ); if (isValid && previousValue) { next[group.id] = previousValue; } } return next; }); }, [defaultSettings, isSettingsControlled, settingGroups]); const syncExpandedHeight = useCallback(() => { const element = inputRef.current; if (!(element instanceof HTMLTextAreaElement)) return; const panelHeight = element.getBoundingClientRect().height; const nextHeight = Math.min( MAX_EXPANDED_HEIGHT, Math.max(MIN_EXPANDED_HEIGHT, Math.ceil(panelHeight) + FOOTER_HEIGHT) ); setExpandedHeight(nextHeight); }, []); useLayoutEffect(() => { if (!expanded) { setExpandedHeight(MIN_EXPANDED_HEIGHT); return; } const element = inputRef.current; if (!(element instanceof HTMLTextAreaElement)) return; const observer = new ResizeObserver(() => { syncExpandedHeight(); }); observer.observe(element); syncExpandedHeight(); return () => { observer.disconnect(); }; }, [expanded, syncExpandedHeight]); const handleValueChange = useCallback((nextValue: string) => { setValue(nextValue); }, []); const expand = () => { setExpanded(true); requestAnimationFrame(() => { inputRef.current?.focus(); }); }; const maybeCollapse = useCallback(() => { requestAnimationFrame(() => { if (settingsOpenRef.current || plusOpenRef.current) return; if (valueRef.current.trim() !== "") return; const active = document.activeElement; if (active instanceof Element) { if (isInsideDropdownPanel(active)) return; if (containerRef.current?.contains(active)) return; } setExpanded(false); }); }, []); const handleBlur = useCallback( (event: React.FocusEvent) => { const related = event.relatedTarget as Node | null; if (related instanceof Element) { if (isInsideDropdownPanel(related)) return; if (containerRef.current?.contains(related)) return; } maybeCollapse(); }, [maybeCollapse] ); const handleSubmit = useCallback(() => { if (settingsOpenRef.current || plusOpenRef.current) return; if (value.trim() === "") return; onSubmit?.(value); setValue(""); setExpanded(false); }, [onSubmit, value]); const handleTextareaKeyDown = useCallback( (event: React.KeyboardEvent) => { if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); handleSubmit(); return; } if (event.key === "Escape") { if (settingsOpenRef.current || plusOpenRef.current) return; if (value.trim() === "") { setExpanded(false); } } }, [handleSubmit, value] ); useEffect(() => { if (!expanded) { setSettingsOpen(false); setPlusOpen(false); } }, [expanded]); return (

{expanded ? ( (

{
                  props.onKeyDown?.(event);
                  handleTextareaKeyDown(event);
                }}
                rows={1}
                style={{ maxHeight: MAX_TEXTAREA_HEIGHT }}
              />
            )}
            value={value}
          />
        ) : (
        <div
          className="group/collapsed absolute inset-0 flex items-center overflow-hidden px-6"
          key="placeholder"
          onMouseEnter={
            prefersHover ? () => setCollapsedHover(true) : undefined
          }
          onMouseLeave={
            prefersHover ? () => setCollapsedHover(false) : undefined
          }
        >
            <InputPrimitive
              aria-label="باز کردن ورودی پرامپت"
              className={`${promptFieldCollapsedClassName} ${promptFieldCollapsedRowClassName} ${selectedModelIcon && collapsedHoverReady ? "pe-8" : ""}`}
              onMouseDown={(event) => {
                event.preventDefault();
                expand();
              }}
              placeholder={placeholder}
              readOnly
            />
            {selectedModelIcon && collapsedHoverReady ? (
              <div
                aria-hidden="true"
                className="pointer-events-none absolute top-1/2 end-6 flex size-4 -translate-y-1/2 items-center justify-center"
              >
                <CollapsedSelectedModelIcon
                  icon={selectedModelIcon}
                  reduceMotion={prefersReducedMotion}
                  visible={prefersHover && collapsedHover}
                />
              </div>
            ) : null}
        </div>
      )}

<AnimatePresence>
        {expanded ? (
          <motion.div
            animate={{ opacity: 1 }}
            className="absolute inset-x-0 bottom-0 flex items-center ps-6 pe-2.5"
            exit={{ opacity: 0, transition: { duration: 0.16, ease: EASE_OUT_QUAD } }}
            initial={{ opacity: 0 }}
            key="footer"
            style={{ height: FOOTER_HEIGHT }}
            transition={{ duration: 0.2, delay: 0.08, ease: EASE_OUT_QUAD }}
          >
            {showSettings ? (
              <SettingsDropdown
                groups={settingGroups}
                menuActions={menuActions}
                onOpenChange={(nextOpen) => {
                  setSettingsOpen(nextOpen);
                  if (nextOpen) {
                    setPlusOpen(false);
                    return;
                  }
                  maybeCollapse();
                }}
                onValueChange={updateSettings}
                values={settings}
              />
            ) : null}
            <div className="ms-auto flex items-center gap-0.5">
              {plusMenuItems.length > 0 ? (
                <PlusMenuDropdown
                  items={plusMenuItems}
                  onOpenChange={(nextOpen) => {
                    setPlusOpen(nextOpen);
                    if (nextOpen) {
                      setSettingsOpen(false);
                      return;
                    }
                    maybeCollapse();
                  }}
                />
              ) : null}
              <motion.button
                animate={{ opacity: 1, scale: 1 }}
                aria-label={hasValue ? "ارسال پرامپت" : "ورودی صوتی"}
                className="flex size-8 cursor-pointer items-center justify-center rounded-full bg-foreground text-background shadow-xs transition-opacity hover:opacity-90"
                exit={{ opacity: 0, scale: 0.85 }}
                initial={{ opacity: 0, scale: 0.85 }}
                onClick={handleSubmit}
                transition={{ duration: 0.15, ease: EASE_OUT_QUAD }}
                type="button"
              >
                <AnimatePresence initial={false} mode="wait">
                  {hasValue ? (
                    <motion.span
                      animate={{ opacity: 1, scale: 1 }}
                      className="flex items-center justify-center"
                      exit={{ opacity: 0, scale: 0.5 }}
                      initial={{ opacity: 0, scale: 0.5 }}
                      key="arrow"
                      transition={{ duration: 0.15, ease: EASE_OUT_QUAD }}
                    >
                      <ArrowUp className="size-4" strokeWidth={2.25} />
                    </motion.span>
                  ) : (
                    <motion.span
                      animate={{ opacity: 1, scale: 1 }}
                      className="flex items-center justify-center"
                      exit={{ opacity: 0, scale: 0.5 }}
                      initial={{ opacity: 0, scale: 0.5 }}
                      key="mic"
                      transition={{ duration: 0.15, ease: EASE_OUT_QUAD }}
                    >
                      <Mic className="size-4" strokeWidth={2.25} />
                    </motion.span>
                  )}
                </AnimatePresence>
              </motion.button>
            </div>
          </motion.div>
        ) : null}
      </AnimatePresence>
        </div>
      </motion.div>
    </motion.div>
  );
}

const MODEL_PLACEHOLDERS: Record<string, string> = {
  "fable-5": "ارسال به Claude",
  "composer-2.5": "ارسال به Cursor",
  "gpt-5.5": "ارسال به Codex",
};

const defaultSettingGroups: PromptSettingGroup[] = [
  {
    id: "model",
    label: "مدل",
    display: "featured",
    options: [
      {
        value: "fable-5",
        label: "Fable 5",
        icon: <ClaudeAI className="size-4 shrink-0" />,
      },
      {
        value: "composer-2.5",
        label: "Composer 2.5",
        icon: <Cursor className="size-4 shrink-0" />,
      },
      {
        value: "gpt-5.5",
        label: "GPT 5.5",
        icon: <OpenAI className="size-4 shrink-0" />,
      },
    ],
  },
];

const defaultPromptSettings = { model: "fable-5" };

export default function PromptBox() {
  const [settings, setSettings] =
    useState<Record<string, string>>(defaultPromptSettings);
  const placeholder =
    MODEL_PLACEHOLDERS[settings.model ?? ""] ?? "هر چیزی بپرس";

return (
    <div
      dir="rtl"
      lang="fa"
      className="flex h-full w-full items-center justify-center px-4 font-[family-name:var(--font-estedad),Tahoma,Arial,sans-serif] tracking-normal"
    >
      <PromptInput
        defaultSettings={defaultPromptSettings}
        onSettingsChange={setSettings}
        placeholder={placeholder}
        settingGroups={defaultSettingGroups}
      />
    </div>
  );
}
</article></body></html>