{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "ai-prompt-input",
  "type": "registry:ui",
  "title": "AI Prompt Studio Input",
  "description": "Production LLM prompt container with auto-expanding textarea, model selector pill, token counter, attachment badge, and keyboard submit.",
  "category": "ai",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/ai/ai-prompt-input/ai-prompt-input.tsx",
      "type": "registry:ui",
      "target": "components/ui/ai-prompt-input.tsx",
      "content": "import React, { useState } from 'react';\nimport { Paperclip, Cpu, ArrowUp, Globe, CaretDown } from '@phosphor-icons/react';\n\nexport const AiPromptInput: React.FC = () => {\n  const [value, setValue] = useState('');\n  const [model, setModel] = useState('Claude 3.7 Sonnet');\n  const [webSearch, setWebSearch] = useState(false);\n\n  const tokenCount = Math.round(value.length / 3.8);\n\n  return (\n    <div className=\"w-full max-w-lg mx-auto rounded-2xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900/90 shadow-xl backdrop-blur-xl p-3.5 transition-all focus-within:border-indigo-500/50 focus-within:ring-2 focus-within:ring-indigo-500/20\">\n      <textarea\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        placeholder=\"Ask anything or generate complex UI components...\"\n        rows={2}\n        className=\"w-full bg-transparent resize-none text-xs sm:text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:outline-none font-sans\"\n      />\n\n      <div className=\"mt-3 flex items-center justify-between gap-2 pt-2 border-t border-zinc-100 dark:border-white/5\">\n        <div className=\"flex items-center gap-1.5 flex-wrap\">\n          {/* Model Selector Chip */}\n          <div className=\"flex items-center gap-1 px-2.5 py-1 rounded-lg bg-zinc-100 dark:bg-white/5 text-[11px] font-mono text-zinc-700 dark:text-zinc-300 border border-zinc-200/60 dark:border-white/5\">\n            <Cpu size={12} className=\"text-indigo-500\" />\n            <span>{model}</span>\n          </div>\n\n          {/* Web Search Toggle */}\n          <button\n            onClick={() => setWebSearch(!webSearch)}\n            className={`flex items-center gap-1 px-2.5 py-1 rounded-lg text-[11px] font-mono transition-colors ${\n              webSearch\n                ? 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400 border border-cyan-500/30'\n                : 'text-zinc-500 hover:bg-zinc-100 dark:hover:bg-white/5'\n            }`}\n          >\n            <Globe size={12} />\n            <span className=\"hidden sm:inline\">Search</span>\n          </button>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {value.length > 0 && (\n            <span className=\"text-[10px] font-mono text-zinc-400\">\n              ~{tokenCount} tokens\n            </span>\n          )}\n\n          <button\n            disabled={!value.trim()}\n            className=\"flex h-7 w-7 items-center justify-center rounded-xl bg-zinc-900 text-white dark:bg-white dark:text-zinc-950 disabled:opacity-30 disabled:cursor-not-allowed hover:bg-indigo-600 dark:hover:bg-indigo-400 transition-colors shadow-xs\"\n          >\n            <ArrowUp size={13} weight=\"bold\" />\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}