52: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"] 53: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"] 54:Tafae,"use client" import * as React from "react" import { ArrowUpIcon, AudioLinesIcon, CheckIcon, GlobeIcon, Loader2Icon, MicIcon, PlusIcon, PuzzleIcon, SquareIcon, TelescopeIcon, UnplugIcon, UploadIcon, XIcon, } from "lucide-react" import { AnimatePresence, motion, type HTMLMotionProps } from "motion/react" import { createPortal } from "react-dom" import { cn } from "@/lib/utils" import { DEFAULT_AI_MODELS, defaultSelectionFor, ModelSelector, ModelSelectorContent, ModelSelectorTrigger, ModelSelectorValue, type AiModel, type AiModelSelection, } from "@/components/ui/ai-model-selector" /* ============================================================================= * AiPromptInput — Motoko UI * * A premium AI prompt composer: auto-growing textarea, rotating placeholder, * floating toolbar, Cursor-style model selector, and stateful send control. * * console.log(value, selection)} /> * ============================================================================= */ // --------------------------------------------------------------------------- // Motion tokens // --------------------------------------------------------------------------- const EASE = [0.2, 0, 0, 1] as const const SPRING_SOFT = { type: "spring" as const, stiffness: 420, damping: 32 } const SPRING_HEIGHT = { type: "spring" as const, stiffness: 380, damping: 34 } const SPRING_PRESS = { type: "spring" as const, stiffness: 500, damping: 28 } const SPRING_ICON = { type: "spring" as const, duration: 0.3, bounce: 0 } const MENU_PANEL_CLASS = cn( "bg-b-pop origin-bottom-left overflow-hidden rounded-2xl border-2 p-1.5", "shadow-[0_8px_30px_-8px_rgba(8,8,8,0.18),0_2px_8px_-2px_rgba(8,8,8,0.08)]", "dark:shadow-[0_8px_30px_-8px_rgba(0,0,0,0.45),0_2px_8px_-2px_rgba(0,0,0,0.3)]" ) const CHIP_SURFACE_CLASS = cn( "bg-b-surface1 text-t-primary inline-flex items-center gap-1.5 rounded-full py-1 pr-1 pl-2 text-xs font-medium", "shadow-[inset_0_0_0_1px_rgba(123,123,123,0.12)]" ) const TOOLBAR_BTN_CLASS = cn( "relative flex size-9 cursor-pointer items-center justify-center rounded-xl", "transition-[background-color,color,box-shadow,opacity,transform] duration-200 ease-[cubic-bezier(0.2,0,0,1)]", "hover:bg-b-surface1 hover:text-t-primary", "focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none", "disabled:pointer-events-none disabled:opacity-40" ) type PresenceProps = Pick< HTMLMotionProps<"span">, "initial" | "animate" | "exit" | "transition" > const FADE_ONLY: PresenceProps = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, } const ICON_SWAP: PresenceProps = { initial: { opacity: 0, scale: 0.25, filter: "blur(4px)" }, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { opacity: 0, scale: 0.25, filter: "blur(4px)" }, transition: SPRING_ICON, } function scaleBlurPresence(reduceMotion: boolean): PresenceProps { if (reduceMotion) return FADE_ONLY return { initial: { opacity: 0, scale: 0.9, filter: "blur(4px)" }, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { opacity: 0, scale: 0.9, filter: "blur(4px)" }, transition: SPRING_ICON, } } function menuPresence(reduceMotion: boolean): PresenceProps { if (reduceMotion) return FADE_ONLY return { initial: { opacity: 0, y: 6, scale: 0.96, filter: "blur(4px)" }, animate: { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }, exit: { opacity: 0, y: 4, scale: 0.98, filter: "blur(2px)" }, transition: { duration: 0.2, ease: EASE }, } } function placeholderPresence(reduceMotion: boolean): PresenceProps { if (reduceMotion) return FADE_ONLY return { initial: { opacity: 0, y: 6, filter: "blur(4px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, y: -6, filter: "blur(4px)" }, transition: { duration: 0.35, ease: EASE }, } } function iconPresence(reduceMotion: boolean): PresenceProps { return reduceMotion ? FADE_ONLY : ICON_SWAP } function statusPresence(reduceMotion: boolean): PresenceProps { if (reduceMotion) return FADE_ONLY return { initial: { opacity: 0, scale: 0.92, filter: "blur(4px)" }, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { opacity: 0, scale: 0.94, filter: "blur(4px)" }, transition: { type: "spring", duration: 0.35, bounce: 0 }, } } // --------------------------------------------------------------------------- // Public types & defaults // --------------------------------------------------------------------------- export type { AiModel, AiModelSelection } /** @deprecated Use `AiModel` from the model selector. */ export type AiPromptModel = AiModel export type AiPromptSendStatus = "idle" | "loading" | "success" export type DictationPhase = "idle" | "recording" | "processing" export const DEFAULT_PLACEHOLDERS = [ "Ask anything...", "Explain this React component...", "Generate a landing page...", "Fix this TypeScript error...", "Create a pricing section...", "Write SQL query...", ] as const /** Default models — same set as `DEFAULT_AI_MODELS` from AI Model Selector. */ export const DEFAULT_MODELS: AiModel[] = DEFAULT_AI_MODELS export interface AiPromptInputProps { /** Controlled prompt value. */ value?: string /** Uncontrolled initial value. */ defaultValue?: string /** Fires on every value change. */ onChange?: (value: string) => void /** Fires when the user sends (Enter or Send button). */ onSubmit?: (value: string, selection: AiModelSelection) => void /** Rotating placeholder phrases. Falls back to Motoko defaults. */ placeholders?: readonly string[] /** Interval between placeholder rotates, in ms. */ placeholderInterval?: number /** Available models for the selector. */ models?: AiModel[] /** Controlled model selection (id + effort / context / modes). */ modelSelection?: AiModelSelection /** Uncontrolled initial model selection. */ defaultModelSelection?: AiModelSelection /** Fires when the model selection changes. */ onModelSelectionChange?: (selection: AiModelSelection) => void /** Disable the whole composer. */ disabled?: boolean /** External send status — drives loader / success on the send button. */ status?: AiPromptSendStatus /** Soft limit for the textarea `maxLength` attribute. */ maxLength?: number /** Minimum textarea rows. */ minRows?: number /** Maximum textarea rows before scrolling. */ maxRows?: number /** Show the floating toolbar. */ showToolbar?: boolean /** Show the + actions menu. */ showActions?: boolean /** Show the model selector. */ showModelSelector?: boolean /** Controlled deep research toggle. */ deepResearch?: boolean /** Uncontrolled initial deep research. */ defaultDeepResearch?: boolean /** Fires when deep research is toggled. */ onDeepResearchChange?: (active: boolean) => void /** Controlled web search toggle. */ webSearch?: boolean /** Uncontrolled initial web search. */ defaultWebSearch?: boolean /** Fires when web search is toggled. */ onWebSearchChange?: (active: boolean) => void /** Fires when Upload file is chosen. */ onUploadFile?: () => void /** Fires when Skills is chosen. */ onSkills?: () => void /** Fires when Connectors is chosen. */ onConnectors?: () => void /** * Optional transcript provider for mic dictation. * Defaults to cycling Motoko demo phrases when omitted. */ getDictationTranscript?: () => string /** Fires when mic dictation starts or stops. */ onDictationChange?: (listening: boolean) => void /** Fires when talk-with-AI voice mode starts or stops. */ onVoiceChange?: (active: boolean) => void /** Extra classes on the shell. */ className?: string /** Extra classes on the textarea. */ textareaClassName?: string /** Accessible name for the prompt field. */ "aria-label"?: string /** Test id for the shell. */ "data-testid"?: string } // --------------------------------------------------------------------------- // Shared utilities // --------------------------------------------------------------------------- function assignRef( node: T | null, ...refs: Array | undefined> ) { for (const ref of refs) { if (typeof ref === "function") ref(node) else if (ref) (ref as React.MutableRefObject).current = node } } function usePrefersReducedMotion() { const [reduceMotion, setReduceMotion] = React.useState(false) React.useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)") const sync = () => setReduceMotion(mq.matches) sync() mq.addEventListener("change", sync) return () => mq.removeEventListener("change", sync) }, []) return reduceMotion } function useControllableState({ value, defaultValue, onChange, }: { value: T | undefined defaultValue: T onChange?: (value: T) => void }): [T, (next: T) => void] { const [uncontrolled, setUncontrolled] = React.useState(defaultValue) const isControlled = value !== undefined const current = isControlled ? value : uncontrolled const setValue = React.useCallback( (next: T) => { if (!isControlled) setUncontrolled(next) onChange?.(next) }, [isControlled, onChange] ) return [current, setValue] } type MenuCoords = { top: number; left: number } /** Shared open/close, portal coords, outside-click, and Escape for anchored menus. */ function useAnchoredMenu(disabled = false) { const [open, setOpen] = React.useState(false) const [mounted, setMounted] = React.useState(false) const [coords, setCoords] = React.useState(null) const triggerRef = React.useRef(null) const contentRef = React.useRef(null) const menuId = React.useId() React.useEffect(() => { setMounted(true) }, []) React.useLayoutEffect(() => { if (!open) return const update = () => { const trigger = triggerRef.current if (!trigger) return const rect = trigger.getBoundingClientRect() setCoords({ top: rect.top + window.scrollY - 8, left: rect.left + window.scrollX, }) } update() window.addEventListener("resize", update) window.addEventListener("scroll", update, true) return () => { window.removeEventListener("resize", update) window.removeEventListener("scroll", update, true) } }, [open]) React.useEffect(() => { if (!open) return const onPointer = (event: MouseEvent | TouchEvent) => { const target = event.target as Node | null if (!target) return const inTrigger = triggerRef.current?.contains(target) const inContent = contentRef.current?.contains(target) if (!inTrigger && !inContent) setOpen(false) } const onKey = (event: KeyboardEvent) => { if (event.key !== "Escape") return event.preventDefault() setOpen(false) triggerRef.current?.focus() } document.addEventListener("mousedown", onPointer) document.addEventListener("touchstart", onPointer) document.addEventListener("keydown", onKey) return () => { document.removeEventListener("mousedown", onPointer) document.removeEventListener("touchstart", onPointer) document.removeEventListener("keydown", onKey) } }, [open]) React.useEffect(() => { if (disabled) setOpen(false) }, [disabled]) return { open, setOpen, mounted, coords, triggerRef, contentRef, menuId } } function AnchoredMenuPortal({ mounted, open, coords, contentRef, id, role, "aria-label": ariaLabel, reduceMotion, className, children, }: { mounted: boolean open: boolean coords: MenuCoords | null contentRef: React.RefObject id: string role: "menu" | "listbox" "aria-label": string reduceMotion: boolean className?: string children: React.ReactNode }) { if (!mounted) return null return createPortal( {open && coords ? ( {children} ) : null} , document.body ) } function MenuCheckmark({ visible, reduceMotion, className, }: { visible: boolean reduceMotion: boolean className?: string }) { return ( {visible ? ( ) : null} ) } function IconSwapFrame({ swapKey, reduceMotion, children, }: { swapKey: string reduceMotion: boolean children: React.ReactNode }) { return ( {children} ) } // --------------------------------------------------------------------------- // Rotating placeholder // --------------------------------------------------------------------------- function RotatingPlaceholder({ phrases, interval, active, reduceMotion, }: { phrases: readonly string[] interval: number active: boolean reduceMotion: boolean }) { const [index, setIndex] = React.useState(0) const safePhrases = phrases.length > 0 ? phrases : DEFAULT_PLACEHOLDERS const phraseCount = safePhrases.length React.useEffect(() => { if (!active || reduceMotion || phraseCount <= 1) return const id = window.setInterval(() => { setIndex((i) => (i + 1) % phraseCount) }, interval) return () => window.clearInterval(id) }, [active, interval, reduceMotion, phraseCount]) const current = safePhrases[index % phraseCount] ?? safePhrases[0] if (!active) return null return (

{current}

) } // --------------------------------------------------------------------------- // Active tool chip // --------------------------------------------------------------------------- function ActiveToolChip({ label, icon, onRemove, reduceMotion, }: { label: string icon: React.ReactNode onRemove: () => void reduceMotion: boolean }) { return ( {icon} {label} ) } // --------------------------------------------------------------------------- // Plus actions menu // --------------------------------------------------------------------------- function actionsItemClass(active = false) { return cn( "relative flex w-full cursor-pointer items-center gap-2.5 rounded-xl px-2.5 py-2 text-left text-sm", "transition-colors duration-150 ease-[cubic-bezier(0.2,0,0,1)]", "focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none", active ? "bg-b-surface1 text-t-primary" : "text-t-secondary hover:bg-b-surface1/70 hover:text-t-primary" ) } function PlusActionsMenu({ disabled, reduceMotion, deepResearch, webSearch, onUploadFile, onToggleDeepResearch, onToggleWebSearch, onSkills, onConnectors, }: { disabled?: boolean reduceMotion: boolean deepResearch: boolean webSearch: boolean onUploadFile?: () => void onToggleDeepResearch: () => void onToggleWebSearch: () => void onSkills?: () => void onConnectors?: () => void }) { const { open, setOpen, mounted, coords, triggerRef, contentRef, menuId } = useAnchoredMenu(disabled) const runAndClose = (action?: () => void) => { action?.() setOpen(false) } return (

setOpen((v) => !v)} whileHover={disabled ? undefined : { scale: 1.05, y: -1 }} whileTap={disabled ? undefined : { scale: 0.96 }} transition={SPRING_PRESS} className={cn( TOOLBAR_BTN_CLASS, "text-t-secondary", open && "bg-b-surface1 text-t-primary" )} >