{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "prompt-input-01",
  "type": "registry:component",
  "title": "Prompt Input 01",
  "description": "A first component for inputting ai prompts",
  "dependencies": [
    "react-textarea-autosize",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "dropdown-menu",
    "tooltip",
    "toggle",
    "utils"
  ],
  "files": [
    {
      "path": "registry/default/components/input/prompt-input-01.tsx",
      "content": "'use client'\r\n\r\nimport { Button } from '@/registry/default/ui/button'\r\nimport { cn } from '@/lib/utils'\r\nimport {\r\n    ArrowUpIcon,\r\n    CloudUploadIcon,\r\n    GlobeIcon,\r\n    LightbulbIcon,\r\n    MicIcon,\r\n    PaperclipIcon,\r\n} from 'lucide-react'\r\nimport {\r\n    DropdownMenu,\r\n    DropdownMenuContent,\r\n    DropdownMenuItem,\r\n    DropdownMenuSeparator,\r\n    DropdownMenuTrigger,\r\n} from '@/registry/default/ui/dropdown-menu'\r\nimport {\r\n    Tooltip,\r\n    TooltipContent,\r\n    TooltipProvider,\r\n    TooltipTrigger,\r\n} from '@/registry/default/ui/tooltip'\r\nimport React from 'react'\r\nimport TextareaAutosize from 'react-textarea-autosize'\r\nimport { Toggle } from '@/registry/default/ui/toggle'\r\n\r\nexport default function PromptInput01() {\r\n    const [message, setMessage] = React.useState<string>('')\r\n    const [searchToggle, setSearchToggle] = React.useState<boolean>(false)\r\n    const [reasonToggle, setReasonToggle] = React.useState<boolean>(false)\r\n\r\n    const handleSubmit = () => {\r\n        if (message.trim() === '') return\r\n        // Handle message submission logic here\r\n        console.log('Message submitted:', message)\r\n        console.log(\r\n            'Search toggle state:',\r\n            searchToggle ? 'Enabled' : 'Disabled'\r\n        )\r\n        console.log(\r\n            'Reason toggle state:',\r\n            reasonToggle ? 'Enabled' : 'Disabled'\r\n        )\r\n        setMessage('')\r\n    }\r\n\r\n    return (\r\n        <div\r\n            className={cn(\r\n                'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input rounded-xl border bg-transparent text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm',\r\n                'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',\r\n                'has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive group p-4',\r\n                'flex w-full flex-col gap-6'\r\n            )}\r\n        >\r\n            <TextareaAutosize\r\n                className=\"min-h-9 w-full resize-none border-none bg-transparent text-base focus-visible:outline-none\"\r\n                placeholder=\"Ask anything...\"\r\n                minRows={1}\r\n                rows={1}\r\n                maxRows={6}\r\n                value={message}\r\n                onChange={(e) => setMessage(e.target.value)}\r\n            />\r\n\r\n            <div className=\"flex items-center justify-between\">\r\n                <TooltipProvider delayDuration={0}>\r\n                    <div className=\"flex items-center gap-2\">\r\n                        <Attachments />\r\n\r\n                        <Tooltip>\r\n                            <Toggle\r\n                                value=\"search\"\r\n                                variant=\"outline\"\r\n                                asChild\r\n                                pressed={searchToggle}\r\n                                onPressedChange={setSearchToggle}\r\n                                className=\"cursor-pointer\"\r\n                            >\r\n                                <TooltipTrigger>\r\n                                    <GlobeIcon />\r\n                                    <span className=\"hidden sm:block\">\r\n                                        Search\r\n                                    </span>\r\n                                </TooltipTrigger>\r\n                            </Toggle>\r\n                            <TooltipContent>\r\n                                <p>Search the web</p>\r\n                            </TooltipContent>\r\n                        </Tooltip>\r\n\r\n                        <Tooltip>\r\n                            <Toggle\r\n                                value=\"reason\"\r\n                                variant=\"outline\"\r\n                                asChild\r\n                                pressed={reasonToggle}\r\n                                onPressedChange={setReasonToggle}\r\n                                className=\"cursor-pointer\"\r\n                            >\r\n                                <TooltipTrigger>\r\n                                    <LightbulbIcon />\r\n                                    <span className=\"hidden sm:block\">\r\n                                        Reason\r\n                                    </span>\r\n                                </TooltipTrigger>\r\n                            </Toggle>\r\n                            <TooltipContent>\r\n                                <p>Think before responding</p>\r\n                            </TooltipContent>\r\n                        </Tooltip>\r\n                    </div>\r\n\r\n                    <div className=\"flex items-center gap-2\">\r\n                        <Tooltip>\r\n                            <TooltipTrigger asChild>\r\n                                <Button\r\n                                    type=\"button\"\r\n                                    size=\"icon\"\r\n                                    className=\"cursor-pointer\"\r\n                                    variant=\"outline\"\r\n                                >\r\n                                    <MicIcon />\r\n                                </Button>\r\n                            </TooltipTrigger>\r\n                            <TooltipContent>\r\n                                <p>Dictate</p>\r\n                            </TooltipContent>\r\n                        </Tooltip>\r\n                        <Tooltip>\r\n                            <TooltipTrigger asChild>\r\n                                <Button\r\n                                    type=\"submit\"\r\n                                    size=\"icon\"\r\n                                    className=\"cursor-pointer\"\r\n                                    disabled={!message || message.length === 0}\r\n                                    onClick={() => handleSubmit()}\r\n                                >\r\n                                    <ArrowUpIcon />\r\n                                </Button>\r\n                            </TooltipTrigger>\r\n                            <TooltipContent>\r\n                                <p>Send</p>\r\n                            </TooltipContent>\r\n                        </Tooltip>\r\n                    </div>\r\n                </TooltipProvider>\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n\r\nfunction Attachments() {\r\n    return (\r\n        <DropdownMenu>\r\n            <Tooltip>\r\n                <TooltipTrigger asChild>\r\n                    <DropdownMenuTrigger asChild>\r\n                        <Button\r\n                            type=\"button\"\r\n                            variant=\"outline\"\r\n                            size=\"icon\"\r\n                            className=\"cursor-pointer\"\r\n                        >\r\n                            <PaperclipIcon />\r\n                            <span className=\"sr-only\">Attachments</span>\r\n                        </Button>\r\n                    </DropdownMenuTrigger>\r\n                </TooltipTrigger>\r\n\r\n                <TooltipContent>\r\n                    <p>Add photos and files</p>\r\n                </TooltipContent>\r\n            </Tooltip>\r\n\r\n            <DropdownMenuContent align=\"start\" side=\"top\">\r\n                <DropdownMenuItem className=\"cursor-pointer\">\r\n                    <svg\r\n                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                        viewBox=\"0 0 87.3 78\"\r\n                    >\r\n                        <path\r\n                            fill=\"#0066da\"\r\n                            d=\"m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3L27.5 53H0c0 1.55.4 3.1 1.2 4.5z\"\r\n                        />\r\n                        <path\r\n                            fill=\"#00ac47\"\r\n                            d=\"M43.65 25 29.9 1.2c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44A9.06 9.06 0 0 0 0 53h27.5z\"\r\n                        />\r\n                        <path\r\n                            fill=\"#ea4335\"\r\n                            d=\"M73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75L86.1 57.5c.8-1.4 1.2-2.95 1.2-4.5H59.798l5.852 11.5z\"\r\n                        />\r\n                        <path\r\n                            fill=\"#00832d\"\r\n                            d=\"M43.65 25 57.4 1.2C56.05.4 54.5 0 52.9 0H34.4c-1.6 0-3.15.45-4.5 1.2z\"\r\n                        />\r\n                        <path\r\n                            fill=\"#2684fc\"\r\n                            d=\"M59.8 53H27.5L13.75 76.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z\"\r\n                        />\r\n                        <path\r\n                            fill=\"#ffba00\"\r\n                            d=\"m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3L43.65 25 59.8 53h27.45c0-1.55-.4-3.1-1.2-4.5z\"\r\n                        />\r\n                    </svg>\r\n                    Connect to Google Drive\r\n                </DropdownMenuItem>\r\n                <DropdownMenuSeparator />\r\n                <DropdownMenuItem className=\"cursor-pointer\">\r\n                    <CloudUploadIcon /> Add photos and files\r\n                </DropdownMenuItem>\r\n            </DropdownMenuContent>\r\n        </DropdownMenu>\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/prompt-input-01.tsx"
    }
  ]
}