{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "prompt-composer", "type": "registry:ui", "description": "Multiline prompt field with shader avatar, staggered placeholder, loading line, and send/attach chrome", "dependencies": [ "@base-ui/react", "@paper-design/shaders-react", "lucide-react", "motion" ], "files": [ { "path": "registry/default/ui/prompt-composer.tsx", "content": "\"use client\"\n\n/**\n * Multiline prompt field matching `HaloSearchInput` polish: animated gradient\n * rim blobs (inlined; no `halo-card` import), soft ambient backdrop orbs, frosted\n * fill, `AiBlobWarpAvatar` + Paper `Warp` shader (inlined; no `halo-search` import),\n * staggered\n * placeholder / loading line, trailing attach + send with the same layout + crossfade\n * as search (send ↔ spinner).\n */\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n type ChangeEvent,\n type ComponentProps,\n type KeyboardEvent,\n type TextareaHTMLAttributes,\n} from \"react\"\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { Warp, type WarpProps } from \"@paper-design/shaders-react\"\nimport { Paperclip, Send } from \"lucide-react\"\nimport {\n AnimatePresence,\n motion,\n useInView,\n useReducedMotion,\n} from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* ─── Rim blobs (self-contained; no halo-card import) ─── */\n\ntype RimVariant = \"default\" | \"success\" | \"destructive\"\n\nconst RIM_BLOB_GRADIENTS: Record<\n RimVariant,\n { primaryBg: string; secondaryBg: string; tertiaryBg: string }\n> = {\n default: {\n primaryBg: \"linear-gradient(90deg, #ff0080, #7928ca, #00d4ff, #0070f3)\",\n secondaryBg: \"linear-gradient(90deg, #ff4d4d, #f9cb28, #ff0080)\",\n tertiaryBg: \"linear-gradient(90deg, #0070f3, #00d4ff, #7928ca)\",\n },\n success: {\n primaryBg:\n \"linear-gradient(90deg, #047857, #059669, #10b981, #14b8a6, #0d9488)\",\n secondaryBg: \"linear-gradient(90deg, #34d399, #6ee7b7, #2dd4bf, #5eead4)\",\n tertiaryBg: \"linear-gradient(90deg, #065f46, #047857, #0f766e)\",\n },\n destructive: {\n primaryBg:\n \"linear-gradient(90deg, #991b1b, #dc2626, #e11d48, #f43f5e, #be123c)\",\n secondaryBg: \"linear-gradient(90deg, #fb7185, #fda4af, #f87171, #fecdd3)\",\n tertiaryBg: \"linear-gradient(90deg, #7f1d1d, #b91c1c, #dc2626)\",\n },\n}\n\nfunction composerBorderGlowConfig(\n translucent: boolean,\n rimEmphasis: boolean,\n rimVariant: RimVariant = \"default\"\n) {\n let idleOpacity: number\n if (translucent) {\n idleOpacity = rimEmphasis ? 0.92 : 0.72\n } else {\n idleOpacity = rimEmphasis ? 0.78 : 0.5\n }\n const gradients = RIM_BLOB_GRADIENTS[rimVariant]\n return {\n opacityIdle: idleOpacity,\n primaryBg: gradients.primaryBg,\n secondaryBg: gradients.secondaryBg,\n tertiaryBg: gradients.tertiaryBg,\n primaryLeft: [\"-5%\", \"75%\", \"-5%\"],\n secondaryLeft: [\"65%\", \"10%\", \"65%\"],\n tertiaryLeft: [\"25%\", \"55%\", \"25%\"],\n durationMain: 6,\n durationSec: 5,\n durationTer: 4,\n }\n}\n\ntype ComposerBorderGlowState = ReturnType\n\nfunction ComposerCardRimBlobs({\n borderGlow,\n reduceMotion,\n}: {\n borderGlow: ComposerBorderGlowState\n reduceMotion: boolean\n}) {\n return (\n
\n \n \n \n \n \n
\n )\n}\n\n/* ─── Shader avatar (inlined; no halo-search import) ─── */\n\nconst DEFAULT_WARP: Partial = {\n colors: [\"#fda4af\", \"#0070f3\", \"#fb923c\", \"#f472b6\", \"#00d4ff\"],\n distortion: 0.25,\n height: 720,\n proportion: 0.54,\n scale: 0.2,\n shape: \"checks\",\n shapeScale: 1,\n softness: 1,\n speed: 0.1,\n swirl: 0.8,\n swirlIterations: 10,\n width: 1280,\n}\n\nexport type AiBlobWarpAvatarProps = Omit, \"children\"> & {\n pulseDurationSec?: number\n warpProps?: Partial\n}\n\nexport const AiBlobWarpAvatar = forwardRef<\n HTMLDivElement,\n AiBlobWarpAvatarProps\n>(function AiBlobWarpAvatarImpl(\n { className, pulseDurationSec = 5.2, warpProps, ...props },\n forwardedRef\n) {\n const {\n className: _warpClassName,\n speed: warpSpeed,\n ...restWarpProps\n } = warpProps ?? {}\n const rootRef = useRef(null)\n const reduceMotion = useReducedMotion()\n const inView = useInView(rootRef, {\n amount: 0.2,\n margin: \"0px 0px -10% 0px\",\n })\n const live = inView && !reduceMotion\n\n const setRefs = useCallback(\n (node: HTMLDivElement | null) => {\n rootRef.current = node\n if (typeof forwardedRef === \"function\") {\n forwardedRef(node)\n } else if (forwardedRef) {\n forwardedRef.current = node\n }\n },\n [forwardedRef]\n )\n\n const baseSpeed = warpSpeed ?? DEFAULT_WARP.speed ?? 1\n\n return (\n \n \n \n \n \n )\n})\n\nAiBlobWarpAvatar.displayName = \"AiBlobWarpAvatar\"\n\n/** Placeholder line: snappy stagger (matches search). */\nconst PLACEHOLDER_STAGGER_SEC = 0.018\nconst PLACEHOLDER_CHAR_DURATION_SEC = 0.16\n\nconst DEFAULT_LOADING_STAGGER_SEC = 0.038\nconst DEFAULT_LOADING_CHAR_DURATION_SEC = 0.36\n\nconst TRAILING_ACTION_DURATION_SEC = 0.2\n\nconst trailingMotionTransition = (reduceMotion: boolean) => ({\n duration: reduceMotion ? 0 : TRAILING_ACTION_DURATION_SEC,\n ease: \"easeOut\" as const,\n})\n\nconst trailingCrossfade = (reduceMotion: boolean) => ({\n exit: {\n opacity: reduceMotion ? 1 : 0,\n scale: reduceMotion ? 1 : 0.88,\n },\n initial: {\n opacity: reduceMotion ? 1 : 0,\n scale: reduceMotion ? 1 : 0.88,\n },\n})\n\nfunction FieldSpinner({\n className,\n reduceMotion,\n}: {\n className?: string\n reduceMotion: boolean\n}) {\n return (\n \n \n \n \n \n \n )\n}\n\nfunction AnimatedPlaceholder({\n text,\n animateKey,\n reduceMotion,\n staggerSec = PLACEHOLDER_STAGGER_SEC,\n charDurationSec = PLACEHOLDER_CHAR_DURATION_SEC,\n className,\n alignTop,\n}: {\n text: string\n animateKey: number\n reduceMotion: boolean\n staggerSec?: number\n charDurationSec?: number\n className?: string\n alignTop?: boolean\n}) {\n const chars = useMemo(() => {\n const counts = new Map()\n return Array.from(text, (char) => {\n const count = counts.get(char) ?? 0\n counts.set(char, count + 1)\n return { char, key: `${char}-${count}` }\n })\n }, [text])\n\n return (\n \n {chars.map((glyph) => (\n \n {glyph.char}\n \n ))}\n \n )\n}\n\nfunction TrailingLoadingSlot({ reduceMotion }: { reduceMotion: boolean }) {\n const cross = trailingCrossfade(reduceMotion)\n return (\n \n \n \n )\n}\n\nfunction TrailingSendSlot({\n reduceMotion,\n disabled,\n onClick,\n}: {\n reduceMotion: boolean\n disabled: boolean\n onClick: () => void\n}) {\n const cross = trailingCrossfade(reduceMotion)\n return (\n \n \n \n Send message\n \n \n )\n}\n\n/** Large, soft aurora behind the rim — balances the tall textarea without fighting the bottom blobs. */\nfunction AmbientComposerBackdrop({\n reduceMotion,\n emphasis,\n}: {\n reduceMotion: boolean\n emphasis: boolean\n}) {\n const drift = reduceMotion\n ? { duration: 0 }\n : {\n duration: 18,\n repeat: Number.POSITIVE_INFINITY,\n ease: \"easeInOut\" as const,\n }\n\n return (\n
\n \n \n \n
\n )\n}\n\nexport interface PromptComposerProps\n extends Omit<\n TextareaHTMLAttributes,\n \"onResize\" | \"children\"\n > {\n /**\n * Frosted fill so animated gradient blobs read through more clearly.\n * Also applied automatically while `isLoading`.\n */\n blobTranslucent?: boolean\n isLoading?: boolean\n loadingText?: string\n loadingStaggerSec?: number\n loadingCharDurationSec?: number\n /** Fires when the user clicks Send or presses ⌘/Ctrl+Enter (unless `disabled` / loading / empty). */\n onSend?: () => void\n /** When set, an attach control is shown (unless `showAttach` is false). */\n onAttach?: () => void\n showAttach?: boolean\n /** Grow height with content up to `maxAutoGrowPx`. */\n autoGrow?: boolean\n maxAutoGrowPx?: number\n}\n\nexport const PromptComposer = forwardRef<\n HTMLTextAreaElement,\n PromptComposerProps\n>(\n // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: mirrors search/composer surface; splitting would obscure the single-field API.\n function PromptComposerImpl(\n {\n className,\n value,\n onChange,\n placeholder = \"Write a prompt…\",\n blobTranslucent = false,\n isLoading = false,\n loadingText = \"Sending…\",\n loadingStaggerSec = DEFAULT_LOADING_STAGGER_SEC,\n loadingCharDurationSec = DEFAULT_LOADING_CHAR_DURATION_SEC,\n disabled,\n readOnly,\n onSend,\n onAttach,\n showAttach,\n autoGrow = true,\n maxAutoGrowPx = 280,\n onKeyDown,\n ...props\n },\n forwardedRef\n ) {\n const showBlobTranslucent = blobTranslucent || isLoading\n const [internalValue, setInternalValue] = useState(\"\")\n const [isFocused, setIsFocused] = useState(false)\n const [placeholderAnimKey, setPlaceholderAnimKey] = useState(0)\n const [loadingAnimKey, setLoadingAnimKey] = useState(0)\n const [isTypingBurst, setIsTypingBurst] = useState(false)\n const textareaRef = useRef(null)\n const typingIdleTimerRef = useRef | null>(\n null\n )\n const wasLoadingRef = useRef(isLoading)\n const reduceMotion = useReducedMotion() ?? false\n const fieldId = useId()\n\n useEffect(() => {\n if (isLoading && !wasLoadingRef.current) {\n setLoadingAnimKey((k) => k + 1)\n }\n wasLoadingRef.current = isLoading\n }, [isLoading])\n\n const setRefs = useCallback(\n (node: HTMLTextAreaElement | null) => {\n textareaRef.current = node\n if (typeof forwardedRef === \"function\") {\n forwardedRef(node)\n } else if (forwardedRef) {\n forwardedRef.current = node\n }\n },\n [forwardedRef]\n )\n\n const currentValue = value === undefined ? internalValue : value\n const hasValue = String(currentValue).trim().length > 0\n const canSend = hasValue && !isLoading && !disabled && !readOnly\n\n const showAttachControl = (showAttach ?? !!onAttach) && !!onAttach\n\n useEffect(() => {\n return () => {\n if (typingIdleTimerRef.current) {\n clearTimeout(typingIdleTimerRef.current)\n }\n }\n }, [])\n\n const adjustHeight = useCallback(() => {\n const el = textareaRef.current\n if (!(el && autoGrow)) {\n return\n }\n el.style.height = \"auto\"\n const next = Math.min(el.scrollHeight, maxAutoGrowPx)\n el.style.height = `${next}px`\n }, [autoGrow, maxAutoGrowPx])\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: rerun when controlled `value` changes from parent (not only via onChange).\n useEffect(() => {\n adjustHeight()\n }, [adjustHeight, currentValue])\n\n const handleChange = (e: ChangeEvent) => {\n const prevLen = String(currentValue).length\n const nextLen = e.target.value.length\n if (nextLen === 0 && prevLen > 0) {\n setPlaceholderAnimKey((k) => k + 1)\n }\n\n if (onChange) {\n onChange(e)\n } else {\n setInternalValue(e.target.value)\n }\n\n if (!reduceMotion) {\n if (typingIdleTimerRef.current) {\n clearTimeout(typingIdleTimerRef.current)\n }\n setIsTypingBurst(true)\n typingIdleTimerRef.current = setTimeout(() => {\n setIsTypingBurst(false)\n typingIdleTimerRef.current = null\n }, 420)\n }\n }\n\n const fireSend = useCallback(() => {\n if (!canSend) {\n return\n }\n onSend?.()\n }, [canSend, onSend])\n\n const handleKeyDown = (e: KeyboardEvent) => {\n onKeyDown?.(e)\n if (e.defaultPrevented) {\n return\n }\n if (e.key === \"Enter\" && (e.metaKey || e.ctrlKey)) {\n e.preventDefault()\n fireSend()\n }\n }\n\n const borderGlow = useMemo(\n () => composerBorderGlowConfig(showBlobTranslucent, isFocused),\n [showBlobTranslucent, isFocused]\n )\n\n const { avatarPulseSec, avatarWarpSpeed } = useMemo(() => {\n if (isLoading) {\n return { avatarPulseSec: 1.65, avatarWarpSpeed: 3.45 }\n }\n if (isTypingBurst) {\n return { avatarPulseSec: 2.65, avatarWarpSpeed: 2.65 }\n }\n return { avatarPulseSec: 5.2, avatarWarpSpeed: 1.15 }\n }, [isLoading, isTypingBurst])\n\n return (\n
\n
\n \n \n\n \n
\n \n\n
\n setIsFocused(false)}\n onChange={(e) => {\n handleChange(e)\n queueMicrotask(adjustHeight)\n }}\n onFocus={() => setIsFocused(true)}\n onKeyDown={handleKeyDown}\n placeholder=\"\"\n readOnly={readOnly || isLoading}\n ref={setRefs}\n rows={props.rows ?? 4}\n value={currentValue}\n />\n {isLoading && (\n \n )}\n {!(hasValue || isLoading) && (\n \n )}\n
\n
\n\n
\n {showAttachControl ? (\n \n \n Attach file\n \n ) : null}\n\n
\n \n {isLoading ? (\n \n ) : (\n \n )}\n \n
\n
\n
\n
\n \n )\n }\n)\n\nexport type PromptTextareaProps = PromptComposerProps\n\n/** Alias for consumers that think of this surface as a textarea first. */\nexport { PromptComposer as PromptTextarea }\n", "type": "registry:ui" } ] }