{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "ai-input",
"title": "AI Input",
"description": "A animated gradient border AI input component.",
"dependencies": [
"motion",
"lucide-react"
],
"registryDependencies": [
"button",
"input",
"textarea"
],
"files": [
{
"path": "registry/new-york/ui/ai-input.tsx",
"content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ArrowUp, Paperclip } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { cn } from \"@/lib/utils\";\nimport {\n motion,\n useAnimationFrame,\n useMotionValue,\n useTransform,\n} from \"motion/react\";\n\nexport interface AIInputProps {\n value?: string;\n onChange?: (value: string) => void;\n onSubmit?: (value: string) => void;\n onFileAttach?: () => void;\n placeholder?: string;\n disabled?: boolean;\n loading?: boolean;\n maxLength?: number;\n background?: string;\n className?: string;\n}\n\nfunction AnimatedBorder({ children }: { children: React.ReactNode }) {\n const angle = useMotionValue(0);\n\n useAnimationFrame((_, delta) => {\n angle.set((angle.get() + delta * 0.1) % 360);\n });\n\n const conicGradient = useTransform(angle, (a) => {\n const deg = a % 360;\n return `conic-gradient(from ${deg}deg, transparent 0deg, transparent 270deg, #a855f7 290deg, #22d3ee 320deg, #f472b6 340deg, transparent 360deg)`;\n });\n\n return (\n <>\n \n\n \n {children}\n \n \n );\n}\n\nexport function AIInput({\n value: controlledValue,\n onChange,\n onSubmit,\n onFileAttach,\n placeholder = \"Ask anything…\",\n disabled = false,\n loading = false,\n maxLength,\n background,\n className,\n}: AIInputProps) {\n const [internalValue, setInternalValue] = React.useState(\"\");\n const isControlled = controlledValue !== undefined;\n const value = isControlled ? controlledValue : internalValue;\n\n const textareaRef = React.useRef(null);\n\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n setMounted(true);\n }, []);\n\n const resizeTextarea = React.useCallback(() => {\n const el = textareaRef.current;\n if (!el) return;\n\n requestAnimationFrame(() => {\n el.style.height = \"auto\";\n el.style.height = `${el.scrollHeight}px`;\n });\n }, []);\n\n React.useEffect(() => {\n resizeTextarea();\n }, [value, resizeTextarea]);\n\n const handleChange = (e: React.ChangeEvent) => {\n const next = e.target.value;\n\n if (!isControlled) {\n setInternalValue(next);\n }\n\n onChange?.(next);\n resizeTextarea();\n };\n\n const handleSubmit = React.useCallback(() => {\n const trimmed = value.trim();\n\n if (!trimmed || disabled || loading) return;\n\n onSubmit?.(trimmed);\n\n if (!isControlled) {\n setInternalValue(\"\");\n\n requestAnimationFrame(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = \"auto\";\n }\n });\n }\n }, [value, disabled, loading, isControlled, onSubmit]);\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit();\n }\n };\n\n const canSend = value.trim().length > 0 && !disabled && !loading;\n\n const defaultBg = background ?? undefined;\n\n const inner = (\n \n \n\n \n
\n \n \n\n \n {loading ? (\n \n \n \n \n ) : (\n \n )}\n \n