{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "prompt-input",
  "type": "registry:component",
  "title": "Prompt Input",
  "description": "Prompt Input",
  "registryDependencies": [
    "tooltip",
    "textarea"
  ],
  "files": [
    {
      "path": "components/chatcn/ai/prompt-input.tsx",
      "content": "\"use client\";\nimport React, { useEffect, useRef } from \"react\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { createContext, useContext, useState } from \"react\";\nimport {\n  Tooltip,\n  TooltipProvider,\n  TooltipTrigger,\n  TooltipContent,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport { Metadata } from \"next\";\n\ntype PromptInputContext = {\n  value: string;\n  isLoading: boolean;\n  disabled?: boolean;\n  setValue: (value: string) => void;\n  maxHeight: string | number;\n  onSubmit?: () => void;\n  textareaRef: React.RefObject<HTMLTextAreaElement | null>;\n};\n\nconst PromptInputContext = createContext<PromptInputContext>({\n  value: \"\",\n  isLoading: false,\n  setValue: () => {},\n  maxHeight: 240,\n  disabled: false,\n  textareaRef: React.createRef<HTMLTextAreaElement>(),\n});\n\nfunction usePromptInputContext() {\n  const ctx = useContext(PromptInputContext);\n  if (!ctx) {\n    throw Error(\"usePromptInputContext must be used within a PromptInput\");\n  }\n  return ctx;\n}\n\ntype PromptInputTextAreaProps = {\n  disableAutoSize?: boolean;\n} & React.ComponentProps<typeof Textarea>;\n\nexport const metadata: Metadata = {\n  title: \"Prompt Input — Chatcn\",\n  description:\n    \"A ready-made prompt input component for AI chat interfaces. Customizable, responsive, and built with shadcn.\",\n  openGraph: {\n    images: [\n      {\n        url: \"https://chatcn.me/og-default.png\",\n        width: 1200,\n        height: 630,\n        alt: \"Prompt Input Component Preview\",\n      },\n    ],\n  },\n  twitter: {\n    images: [\"https://chatcn.me/og-default.png\"],\n  },\n};\n\nexport function PromptInputTextArea({\n  className,\n  disableAutoSize = false,\n  ...props\n}: PromptInputTextAreaProps) {\n  const { disabled, value, setValue, maxHeight, textareaRef } =\n    usePromptInputContext();\n\n  useEffect(() => {\n    if (disableAutoSize || !textareaRef.current) return;\n    textareaRef.current.style.height = \"auto\";\n    textareaRef.current.style.height =\n      typeof maxHeight == \"number\"\n        ? `${Math.min(textareaRef.current.scrollHeight, maxHeight)}px`\n        : `min(${maxHeight},${textareaRef.current.scrollHeight}px)`;\n  }, [value, maxHeight, disableAutoSize, textareaRef]);\n\n  return (\n    <Textarea\n      style={{ backgroundColor: \"transparent\" }}\n      ref={textareaRef}\n      value={value}\n      onChange={(e) => setValue(e.target.value)}\n      rows={1}\n      className={cn(\n        \"outline-none w-full shadow-none border-0 focus-visible:ring-0 focus-visible:ring-offset-0 bg-transparent text-primary resize-none min-h-[44px]\",\n        className\n      )}\n      disabled={disabled}\n      {...props}\n    />\n  );\n}\n\ntype PromptInputActionProps = {\n  className?: string;\n  tooltip: React.ReactNode;\n  children: React.ReactNode;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n} & React.ComponentProps<typeof Tooltip>;\n\nexport function PromptInputAction({\n  className,\n  tooltip,\n  children,\n  ...props\n}: PromptInputActionProps) {\n  const { disabled } = usePromptInputContext();\n  return (\n    <Tooltip {...props}>\n      <TooltipTrigger\n        asChild\n        disabled={disabled}\n        onClick={(event) => event.stopPropagation()}\n      >\n        {children}\n      </TooltipTrigger>\n      <TooltipContent className={className}>{tooltip}</TooltipContent>\n    </Tooltip>\n  );\n}\n\ntype PromptInputProps = {\n  isLoading?: boolean;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  maxHeight?: number | string;\n  onSubmit?: () => void;\n  children: React.ReactNode;\n  disabled?: boolean;\n  className?: string;\n};\n\ntype PromptInputActionsProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport function PromptInputActions({\n  children,\n  className,\n  ...props\n}: PromptInputActionsProps) {\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport function PromptInput({\n  value,\n  onValueChange,\n  onSubmit,\n  children,\n  className,\n  disabled = false,\n  maxHeight = 240,\n}: PromptInputProps) {\n  const [internalValue, setInternalValue] = useState(value || \"\");\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  function handleChange(newValue: string) {\n    setInternalValue(newValue);\n    onValueChange?.(newValue);\n  }\n  return (\n    <div className={className}>\n      <TooltipProvider>\n        <PromptInputContext.Provider\n          value={{\n            disabled,\n            isLoading: false,\n            value: value ?? internalValue,\n            setValue: onValueChange ?? handleChange,\n            maxHeight,\n            onSubmit,\n            textareaRef,\n          }}\n        >\n          <div\n            className=\"border-input bg-background cursor-text rounded-3xl border p-2 shadow-xs\"\n            onClick={() => textareaRef.current?.focus()}\n          >\n            {children}\n          </div>\n        </PromptInputContext.Provider>\n      </TooltipProvider>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}