{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-ai-prompt-input",
  "title": "Prompt Input",
  "description": "Simple Prompt Interface input design.",
  "dependencies": [
    "@hugeicons/core-free-icons",
    "@hugeicons/react"
  ],
  "files": [
    {
      "path": "registry/components/ai/prompt-input/index.tsx",
      "content": "'use client';\n\nimport { useState, useRef, useLayoutEffect } from 'react';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport {\n  ArrowUp02Icon,\n  Attachment,\n  Earth,\n  Mic,\n} from '@hugeicons/core-free-icons';\nimport { Button } from '../../buttons/button';\n\nexport default function PromptInput() {\n  const [value, setValue] = useState('');\n  const [searchEnabled, setSearchEnabled] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Auto-resize textarea\n  useLayoutEffect(() => {\n    const el = textareaRef.current;\n    if (!el) return;\n    el.style.height = 'auto';\n    el.style.height = `${Math.min(el.scrollHeight, 240)}px`;\n  }, [value]);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      // handle submit\n    }\n  };\n\n  return (\n    <div className=\"absolute inset-x-0 bottom-0 mx-auto max-w-3xl px-3 pb-4 md:px-5 md:pb-0\">\n      {/* Outer wrapper */}\n      <div className=\"border-border/50 bg-input/50 border border-b-0 p-1.5 pb-0 rounded-4xl rounded-b-none backdrop-blur-sm\">\n        {/* Inner card */}\n        <div className=\"border-input bg-popover/50 relative z-10 w-full rounded-3xl rounded-b-none border border-b-0 p-0 pt-1 shadow-xs\">\n          <div className=\"flex flex-col\">\n            {/* Textarea */}\n            <textarea\n              ref={textareaRef}\n              value={value}\n              onChange={(e) => setValue(e.target.value)}\n              onKeyDown={handleKeyDown}\n              placeholder=\"Ask anything...\"\n              rows={1}\n              className=\"text-[#096cdc] min-h-[44px] w-full resize-none border-none bg-transparent shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0 min-h-16 pt-3 pl-4 pr-4 text-base leading-[1.3] sm:text-base md:text-base\"\n              style={{ maxHeight: 240 }}\n            />\n\n            {/* Action bar */}\n            <div className=\"mt-4 flex w-full items-center justify-between gap-2 px-3 pb-5\">\n              {/* Left actions */}\n              <div className=\"flex items-center gap-2\">\n                {/* Attachment */}\n                <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  className=\"size-9 rounded-full\"\n                  onClick={() => fileInputRef.current?.click()}\n                  type=\"button\"\n                >\n                  <HugeiconsIcon\n                    icon={Attachment}\n                    strokeWidth={2}\n                    className=\"rotate-45\"\n                  />\n                </Button>\n\n                {/* Search toggle */}\n\n                <Button\n                  className={`rounded-full px-3 transition-colors bg-background text-black dark:text-white hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 ${\n                    searchEnabled\n                      ? 'bg-blue-glossy text-white hover:text-white'\n                      : ''\n                  }`}\n                  onClick={() => setSearchEnabled((v) => !v)}\n                  type=\"button\"\n                >\n                  <HugeiconsIcon icon={Earth} strokeWidth={2} />\n                  Search\n                </Button>\n              </div>\n\n              <div className=\"flex items-center gap-2\">\n                <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  className=\"size-9 rounded-full\"\n                  type=\"button\"\n                >\n                  <HugeiconsIcon icon={Mic} strokeWidth={2} />\n                </Button>\n\n                <Button\n                  size=\"icon\"\n                  className=\"size-9  bg-[#096cdc] hover:bg-blue-glossy\"\n                >\n                  <HugeiconsIcon icon={ArrowUp02Icon} strokeWidth={2} />\n                </Button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        className=\"hidden\"\n        multiple\n        onChange={(e) => {\n          if (!e.target.files) return;\n          // handle files: Array.from(e.target.files)\n          e.target.value = '';\n        }}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/odysseyui/prompt-input.tsx"
    }
  ],
  "cssVars": {
    "light": {
      "blue-glossy": "linear-gradient(145deg, hsl(217 90% 54%) 0%, hsl(217 90% 34%) 25%, hsl(217 90% 62%) 50%, hsl(217 90% 38%) 75%, hsl(217 90% 48%) 100%)"
    }
  },
  "css": {
    "@utility bg-blue-glossy": {
      "background": "var(--blue-glossy)"
    }
  },
  "type": "registry:ui"
}