{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"core-prompt-input","type":"registry:component","title":"Prompt Input","description":"Tailark core prompt input component","dependencies":["ai","lucide-react"],"registryDependencies":["@tailark/core-utils","@tailark/button","@tailark/select","@tailark/textarea"],"files":[{"path":"core/components/prompt-input.tsx","type":"registry:component","target":"@components/prompt-input.tsx","content":"\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { cn } from \"@/lib/utils\"\nimport type { ChatStatus } from \"ai\"\nimport { Loader2Icon, SendIcon, SquareIcon, XIcon } from \"lucide-react\"\nimport type {\n  ComponentProps,\n  HTMLAttributes,\n  KeyboardEventHandler,\n} from \"react\"\nimport { Children } from \"react\"\n\nexport type PromptInputProps = HTMLAttributes<HTMLFormElement>\n\nexport const PromptInput = ({ className, ...props }: PromptInputProps) => (\n  <form\n    className={cn(\n      \"w-full divide-y overflow-hidden rounded-xl bg-card shadow-md ring-1 ring-border-illustration\",\n      className\n    )}\n    {...props}\n  />\n)\n\nexport type PromptInputTextareaProps = ComponentProps<typeof Textarea> & {\n  minHeight?: number\n  maxHeight?: number\n}\n\nconst handlePromptInputKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (\n  e\n) => {\n  if (e.key === \"Enter\") {\n    // Don't submit if IME composition is in progress\n    if (e.nativeEvent.isComposing) {\n      return\n    }\n\n    if (e.shiftKey) {\n      // Allow newline\n      return\n    }\n\n    // Submit on Enter (without Shift)\n    e.preventDefault()\n    const form = e.currentTarget.form\n    if (form) {\n      form.requestSubmit()\n    }\n  }\n}\n\nexport const PromptInputTextarea = ({\n  onChange,\n  className,\n  placeholder = \"What would you like to know?\",\n  ...props\n}: PromptInputTextareaProps) => {\n  return (\n    <Textarea\n      className={cn(\n        \"w-full resize-none rounded-none border-none p-3 shadow-none ring-0 outline-none\",\n        \"field-sizing-content max-h-[6lh] bg-transparent dark:bg-transparent\",\n        \"focus-visible:ring-0\",\n        className\n      )}\n      name=\"message\"\n      onChange={(e) => {\n        onChange?.(e)\n      }}\n      onKeyDown={handlePromptInputKeyDown}\n      placeholder={placeholder}\n      {...props}\n    />\n  )\n}\n\nexport type PromptInputToolbarProps = HTMLAttributes<HTMLDivElement>\n\nexport const PromptInputToolbar = ({\n  className,\n  ...props\n}: PromptInputToolbarProps) => (\n  <div\n    className={cn(\"flex items-center justify-between p-1\", className)}\n    {...props}\n  />\n)\n\nexport type PromptInputToolsProps = HTMLAttributes<HTMLDivElement>\n\nexport const PromptInputTools = ({\n  className,\n  ...props\n}: PromptInputToolsProps) => (\n  <div\n    className={cn(\n      \"flex items-center gap-1\",\n      \"[&_button:first-child]:rounded-bl-xl\",\n      className\n    )}\n    {...props}\n  />\n)\n\nexport type PromptInputButtonProps = ComponentProps<typeof Button>\n\nexport const PromptInputButton = ({\n  variant = \"ghost\",\n  className,\n  size,\n  ...props\n}: PromptInputButtonProps) => {\n  const newSize =\n    (size ?? Children.count(props.children) > 1) ? \"default\" : \"icon\"\n\n  return (\n    <Button\n      className={cn(\n        \"shrink-0 gap-1.5 rounded-lg\",\n        variant === \"ghost\" && \"text-muted-foreground\",\n        newSize === \"default\" && \"px-3\",\n        className\n      )}\n      size={newSize}\n      type=\"button\"\n      variant={variant}\n      {...props}\n    />\n  )\n}\n\nexport type PromptInputSubmitProps = ComponentProps<typeof Button> & {\n  status?: ChatStatus\n}\n\nexport const PromptInputSubmit = ({\n  className,\n  variant = \"default\",\n  size = \"icon\",\n  status,\n  children,\n  ...props\n}: PromptInputSubmitProps) => {\n  let Icon = <SendIcon className=\"size-4\" />\n\n  if (status === \"submitted\") {\n    Icon = <Loader2Icon className=\"size-4 animate-spin\" />\n  } else if (status === \"streaming\") {\n    Icon = <SquareIcon className=\"size-4\" />\n  } else if (status === \"error\") {\n    Icon = <XIcon className=\"size-4\" />\n  }\n\n  return (\n    <Button\n      className={cn(\"gap-1.5 rounded-lg\", className)}\n      size={size}\n      type=\"submit\"\n      variant={variant}\n      {...props}\n    >\n      {children ?? Icon}\n    </Button>\n  )\n}\n\nexport type PromptInputModelSelectProps = ComponentProps<typeof Select>\n\nexport const PromptInputModelSelect = (props: PromptInputModelSelectProps) => (\n  <Select {...props} />\n)\n\nexport type PromptInputModelSelectTriggerProps = ComponentProps<\n  typeof SelectTrigger\n>\n\nexport const PromptInputModelSelectTrigger = ({\n  className,\n  ...props\n}: PromptInputModelSelectTriggerProps) => (\n  <SelectTrigger\n    className={cn(\n      \"border-none bg-transparent font-medium text-muted-foreground shadow-none transition-colors\",\n      \"hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground\",\n      className\n    )}\n    {...props}\n  />\n)\n\nexport type PromptInputModelSelectContentProps = ComponentProps<\n  typeof SelectContent\n>\n\nexport const PromptInputModelSelectContent = ({\n  className,\n  ...props\n}: PromptInputModelSelectContentProps) => (\n  <SelectContent className={cn(className)} {...props} />\n)\n\nexport type PromptInputModelSelectItemProps = ComponentProps<typeof SelectItem>\n\nexport const PromptInputModelSelectItem = ({\n  className,\n  ...props\n}: PromptInputModelSelectItemProps) => (\n  <SelectItem className={cn(className)} {...props} />\n)\n\nexport type PromptInputModelSelectValueProps = ComponentProps<\n  typeof SelectValue\n>\n\nexport const PromptInputModelSelectValue = ({\n  className,\n  ...props\n}: PromptInputModelSelectValueProps) => (\n  <SelectValue className={cn(className)} {...props} />\n)\n"}]}