{
  "title": "Chat Input",
  "description": "Renders the message input area, supporting key event handling (Enter to submit) and loading status",
  "name": "native-ai-chat-input",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "input"
  ],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/native-ai/chat-input/index.tsx",
      "type": "registry:ui",
      "content": "import { type KeyboardEvent } from \"react\";\n\nimport { Loader2, Send, Square } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\n\nexport interface ChatInputProps {\n    value: string;\n    onChange: (value: string) => void;\n    onSubmit: () => void;\n    onStop?: () => void;\n    onFocus?: () => void;\n    isLoading?: boolean;\n    isSupported?: boolean;\n    placeholder?: string;\n}\n\nexport const ChatInput = ({\n    value,\n    onChange,\n    onSubmit,\n    onStop,\n    onFocus,\n    isLoading = false,\n    isSupported = false,\n    placeholder = \"Type your message...\",\n}: ChatInputProps) => {\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === \"Enter\" && !e.shiftKey) {\n            e.preventDefault();\n            if (isLoading && onStop) {\n                onStop();\n            } else {\n                onSubmit();\n            }\n        }\n    };\n\n    return (\n        <form\n            onSubmit={(e) => {\n                e.preventDefault();\n                if (isLoading && onStop) {\n                    onStop();\n                } else {\n                    onSubmit();\n                }\n            }}\n            className=\"flex items-center gap-2\">\n            <Input\n                value={value}\n                onChange={(e) => onChange(e.target.value)}\n                onFocus={onFocus}\n                onKeyDown={handleKeyDown}\n                placeholder={isSupported ? placeholder : \"AI disabled\"}\n                disabled={!isSupported || (isLoading && !onStop)}\n                className=\"grow shadow-none\"\n            />\n            {isLoading && onStop ? (\n                <Button\n                    size=\"icon\"\n                    variant=\"destructive\"\n                    onClick={onStop}\n                    title=\"Stop streaming\"\n                    aria-label=\"Stop streaming\">\n                    <Square />\n                </Button>\n            ) : (\n                <Button\n                    type=\"submit\"\n                    size=\"icon\"\n                    disabled={!isSupported || isLoading || !value.trim()}\n                    aria-label=\"Send message\">\n                    {isLoading ? <Loader2 className=\"h-4 w-4 animate-spin\" /> : <Send className=\"h-4 w-4\" />}\n                </Button>\n            )}\n        </form>\n    );\n};\n"
    }
  ],
  "mcp": {
    "description": "Device-local AI-powered functionality. Renders the message input area, supporting key event handling (Enter to submit) and loading status Ideal for privacy-first AI interfaces, streaming text responses, and Chrome Gemini Nano integrations.",
    "tags": [
      "native-ai",
      "chat"
    ]
  }
}