{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-03",
  "type": "registry:block",
  "title": "AI Chat Compact Interface",
  "description": "A ai chat compact interface block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "button",
    "dropdown-menu",
    "textarea"
  ],
  "dependencies": [
    "@tabler/icons-react"
  ],
  "files": [
    {
      "path": "content/components/ai/ai-03.tsx",
      "type": "registry:component",
      "target": "components/ai-03.tsx",
      "content": "'use client';\n\nimport {\n  IconBolt,\n  IconChevronDown,\n  IconCircle,\n  IconCircleDashed,\n  IconCloud,\n  IconCode,\n  IconDeviceLaptop,\n  IconHistory,\n  IconPaperclip,\n  IconPlus,\n  IconProgress,\n  IconRobot,\n  IconSend,\n  IconUser,\n  IconWand,\n  IconWorld,\n} from '@tabler/icons-react';\nimport { useRef, useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { Textarea } from '@/components/ui/textarea';\nimport { cn } from '@/lib/utils';\n\nexport default function Ai03() {\n  const [input, setInput] = useState('');\n  const [selectedModel, setSelectedModel] = useState('Local');\n  const [selectedAgent, setSelectedAgent] = useState('Agent');\n  const [selectedPerformance, setSelectedPerformance] = useState('High');\n  const [autoMode, setAutoMode] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (input.trim()) {\n    }\n  };\n\n  return (\n    <div className=\"w-xl\">\n      <div className=\"overflow-hidden rounded-2xl border border-border bg-background\">\n        <input\n          className=\"sr-only\"\n          multiple\n          onChange={(e) => {}}\n          ref={fileInputRef}\n          type=\"file\"\n        />\n\n        <div className=\"grow px-3 pt-3 pb-2\">\n          <form onSubmit={handleSubmit}>\n            <Textarea\n              className=\"max-h-[25vh] min-h-10 w-full resize-none border-0 border-none bg-transparent! p-0 text-foreground text-sm placeholder-muted-foreground shadow-none outline-none focus-visible:ring-0 focus-visible:ring-offset-0\"\n              onChange={(e) => setInput(e.target.value)}\n              onInput={(e) => {\n                const target = e.target as HTMLTextAreaElement;\n                target.style.height = 'auto';\n                target.style.height = target.scrollHeight + 'px';\n              }}\n              placeholder=\"Ask anything\"\n              rows={1}\n              value={input}\n            />\n          </form>\n        </div>\n\n        <div className=\"mb-2 flex items-center justify-between px-2\">\n          <div className=\"flex items-center gap-1\">\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    className=\"h-7 w-7 rounded-full border border-border p-0 hover:bg-accent\"\n                    size=\"sm\"\n                    variant=\"ghost\"\n                  />\n                }\n              >\n                <IconPlus className=\"size-3\" />\n              </DropdownMenuTrigger>\n\n              <DropdownMenuContent\n                align=\"start\"\n                className=\"max-w-xs rounded-2xl p-1.5\"\n              >\n                <DropdownMenuGroup className=\"space-y-1\">\n                  <DropdownMenuItem\n                    className=\"rounded-[calc(1rem-6px)] text-xs\"\n                    onClick={() => fileInputRef.current?.click()}\n                  >\n                    <IconPaperclip className=\"opacity-60\" size={16} />\n                    Attach Files\n                  </DropdownMenuItem>\n                  <DropdownMenuItem\n                    className=\"rounded-[calc(1rem-6px)] text-xs\"\n                    onClick={() => {}}\n                  >\n                    <IconCode className=\"opacity-60\" size={16} />\n                    Code Interpreter\n                  </DropdownMenuItem>\n                  <DropdownMenuItem\n                    className=\"rounded-[calc(1rem-6px)] text-xs\"\n                    onClick={() => {}}\n                  >\n                    <IconWorld className=\"opacity-60\" size={16} />\n                    Web Search\n                  </DropdownMenuItem>\n                  <DropdownMenuItem\n                    className=\"rounded-[calc(1rem-6px)] text-xs\"\n                    onClick={() => {}}\n                  >\n                    <IconHistory className=\"opacity-60\" size={16} />\n                    Chat History\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n\n            <Button\n              className={cn(\n                'h-7 rounded-full border border-border px-2 hover:bg-accent ',\n                {\n                  'border-primary/30 bg-primary/10 text-primary': autoMode,\n                  'text-muted-foreground': !autoMode,\n                }\n              )}\n              onClick={() => setAutoMode(!autoMode)}\n              size=\"sm\"\n              variant=\"ghost\"\n            >\n              <IconWand className=\"size-3\" />\n              <span className=\"text-xs\">Auto</span>\n            </Button>\n          </div>\n\n          <div>\n            <Button\n              className=\"size-7 rounded-full bg-primary p-0 disabled:cursor-not-allowed disabled:opacity-50\"\n              disabled={!input.trim()}\n              onClick={handleSubmit}\n              type=\"submit\"\n            >\n              <IconSend className=\"size-3 fill-primary\" />\n            </Button>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"flex items-center gap-0 pt-2\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                className=\"h-6 rounded-full border border-transparent px-2 text-muted-foreground text-xs hover:bg-accent\"\n                size=\"sm\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            <IconDeviceLaptop className=\"size-3\" />\n            <span>{selectedModel}</span>\n            <IconChevronDown className=\"size-3\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            align=\"start\"\n            className=\"max-w-xs rounded-2xl border-border bg-popover p-1.5\"\n          >\n            <DropdownMenuGroup className=\"space-y-1\">\n              <DropdownMenuItem\n                className=\"rounded-[calc(1rem-6px)] text-xs\"\n                onClick={() => setSelectedModel('Local')}\n              >\n                <IconDeviceLaptop className=\"opacity-60\" size={16} />\n                Local\n              </DropdownMenuItem>\n              <DropdownMenuItem\n                className=\"rounded-[calc(1rem-6px)] text-xs\"\n                onClick={() => setSelectedModel('Cloud')}\n              >\n                <IconCloud className=\"opacity-60\" size={16} />\n                Cloud\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                className=\"h-6 rounded-full border border-transparent px-2 text-muted-foreground text-xs hover:bg-accent\"\n                size=\"sm\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            <IconUser className=\"size-3\" />\n            <span>{selectedAgent}</span>\n            <IconChevronDown className=\"size-3\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            align=\"start\"\n            className=\"max-w-xs rounded-2xl border-border bg-popover p-1.5\"\n          >\n            <DropdownMenuGroup className=\"space-y-1\">\n              <DropdownMenuItem\n                className=\"rounded-[calc(1rem-6px)] text-xs\"\n                onClick={() => setSelectedAgent('Agent')}\n              >\n                <IconUser className=\"opacity-60\" size={16} />\n                Agent\n              </DropdownMenuItem>\n              <DropdownMenuItem\n                className=\"rounded-[calc(1rem-6px)] text-xs\"\n                onClick={() => setSelectedAgent('Assistant')}\n              >\n                <IconRobot className=\"opacity-60\" size={16} />\n                Assistant\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                className=\"h-6 rounded-full border border-transparent px-2 text-muted-foreground text-xs hover:bg-accent\"\n                size=\"sm\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            <IconBolt className=\"size-3\" />\n            <span>{selectedPerformance}</span>\n            <IconChevronDown className=\"size-3\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            align=\"start\"\n            className=\"max-w-xs rounded-2xl border-border bg-popover p-1.5\"\n          >\n            <DropdownMenuGroup className=\"space-y-1\">\n              <DropdownMenuItem\n                className=\"rounded-[calc(1rem-6px)] text-xs\"\n                onClick={() => setSelectedPerformance('High')}\n              >\n                <IconCircle className=\"opacity-60\" size={16} />\n                High\n              </DropdownMenuItem>\n              <DropdownMenuItem\n                className=\"rounded-[calc(1rem-6px)] text-xs\"\n                onClick={() => setSelectedPerformance('Medium')}\n              >\n                <IconProgress className=\"opacity-60\" size={16} />\n                Medium\n              </DropdownMenuItem>\n              <DropdownMenuItem\n                className=\"rounded-[calc(1rem-6px)] text-xs\"\n                onClick={() => setSelectedPerformance('Low')}\n              >\n                <IconCircleDashed className=\"opacity-60\" size={16} />\n                Low\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n\n        <div className=\"flex-1\" />\n      </div>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "ai"
  ]
}