diff --git a/apps/www/content/docs/components/chat.mdx b/apps/www/content/docs/components/chat.mdx
index edb9ee0..dfe4bcc 100644
--- a/apps/www/content/docs/components/chat.mdx
+++ b/apps/www/content/docs/components/chat.mdx
@@ -34,7 +34,7 @@ The Chat component provides a complete chat interface with message history, typi
 <TabsContent value="cli">
 
 ```bash
-npx shadcn@latest add chat
+npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/chat.json
 ```
 
 </TabsContent>
diff --git a/apps/www/content/docs/components/message-input.mdx b/apps/www/content/docs/components/message-input.mdx
index f1f750f..bc775e7 100644
--- a/apps/www/content/docs/components/message-input.mdx
+++ b/apps/www/content/docs/components/message-input.mdx
@@ -33,7 +33,7 @@ The MessageInput component provides a rich textarea experience with support for
 <TabsContent value="cli">
 
 ```bash
-npx shadcn@latest add message-input
+npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/message-input.json
 ```
 
 </TabsContent>
@@ -211,14 +211,6 @@ Show stop button during generation:
 </ChatForm>
 ```
 
-## Design
-
-1. The component uses Framer Motion for smooth animations
-2. File attachments are displayed as removable chips
-3. The textarea auto-resizes for better user experience
-4. The submit button is disabled when input is empty
-5. The submit button changes to a cancel button while generating, if `stop` prop is provided, if not it is disabled during generation
-
 ## Theming
 
 The Chat component is using theme colors and fully themable with CSS variables.
diff --git a/apps/www/public/r/markdown-renderer.json b/apps/www/public/r/markdown-renderer.json
index 64dbec2..b4b2a01 100644
--- a/apps/www/public/r/markdown-renderer.json
+++ b/apps/www/public/r/markdown-renderer.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "ui/markdown-renderer.tsx",
-      "content": "import Markdown from \"react-markdown\"\nimport remarkGfm from \"remark-gfm\"\n\ninterface MarkdownRendererProps {\n  children: string\n}\n\nexport function MarkdownRenderer({ children }: MarkdownRendererProps) {\n  return (\n    <Markdown remarkPlugins={[remarkGfm]} components={COMPONENTS}>\n      {children}\n    </Markdown>\n  )\n}\n\nconst COMPONENTS = {\n  h1: withClass(\"h1\", \"text-2xl font-semibold\"),\n  h2: withClass(\"h2\", \"font-semibold text-xl\"),\n  h3: withClass(\"h3\", \"font-semibold text-lg\"),\n  h4: withClass(\"h4\", \"font-semibold text-base\"),\n  h5: withClass(\"h5\", \"font-medium\"),\n  strong: withClass(\"strong\", \"font-semibold\"),\n  a: withClass(\"a\", \"text-primary underline underline-offset-2\"),\n  blockquote: withClass(\"blockquote\", \"border-l-2 border-primary pl-4\"),\n  // TODO fix anys\n  code: ({ children, className, node, ...rest }: any) => {\n    console.log(\"code renderer\", children)\n    const match = /language-(\\w+)/.exec(className || \"\")\n    return match ? (\n      // TODO: syntax highlighting\n      <>\n        <p>{match[1]}</p>\n        <code\n          className=\"font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:bg-background/50 [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5\"\n          {...rest}\n        >\n          {children}\n        </code>\n      </>\n    ) : (\n      <code\n        className=\"font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:bg-background/50 [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5\"\n        {...rest}\n      >\n        {children}\n      </code>\n    )\n  },\n  ol: withClass(\"ol\", \"list-decimal space-y-2 pl-6\"),\n  ul: withClass(\"ul\", \"list-disc space-y-2 pl-6\"),\n  li: withClass(\"li\", \"my-1.5\"),\n  table: withClass(\n    \"table\",\n    \"w-full border-collapse overflow-y-auto rounded-md border border-foreground/20\"\n  ),\n  th: withClass(\n    \"th\",\n    \"border border-foreground/20 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n  ),\n  td: withClass(\n    \"td\",\n    \"border border-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n  ),\n  tr: withClass(\"tr\", \"m-0 border-t p-0 even:bg-muted\"),\n  p: withClass(\"p\", \"whitespace-pre-wrap\"),\n  hr: withClass(\"hr\", \"border-foreground/20\"),\n  pre: withClass(\"pre\", \"rounded-md bg-background/50 p-4 font-mono text-sm\"),\n}\n\nfunction withClass(Tag: keyof JSX.IntrinsicElements, classes: string) {\n  const Component = ({ node, ...props }: any) => (\n    <Tag className={classes} {...props} />\n  )\n  Component.displayName = Tag\n  return Component\n}\n",
+      "content": "import Markdown from \"react-markdown\"\nimport remarkGfm from \"remark-gfm\"\n\ninterface MarkdownRendererProps {\n  children: string\n}\n\nexport function MarkdownRenderer({ children }: MarkdownRendererProps) {\n  return (\n    <Markdown remarkPlugins={[remarkGfm]} components={COMPONENTS}>\n      {children}\n    </Markdown>\n  )\n}\n\nconst COMPONENTS = {\n  h1: withClass(\"h1\", \"text-2xl font-semibold\"),\n  h2: withClass(\"h2\", \"font-semibold text-xl\"),\n  h3: withClass(\"h3\", \"font-semibold text-lg\"),\n  h4: withClass(\"h4\", \"font-semibold text-base\"),\n  h5: withClass(\"h5\", \"font-medium\"),\n  strong: withClass(\"strong\", \"font-semibold\"),\n  a: withClass(\"a\", \"text-primary underline underline-offset-2\"),\n  blockquote: withClass(\"blockquote\", \"border-l-2 border-primary pl-4\"),\n  code: ({ children, className, node, ...rest }: any) => {\n    return (\n      <code\n        className=\"font-mono [:not(pre)>&]:rounded-md [:not(pre)>&]:bg-background/50 [:not(pre)>&]:px-1 [:not(pre)>&]:py-0.5\"\n        {...rest}\n      >\n        {children}\n      </code>\n    )\n  },\n  ol: withClass(\"ol\", \"list-decimal space-y-2 pl-6\"),\n  ul: withClass(\"ul\", \"list-disc space-y-2 pl-6\"),\n  li: withClass(\"li\", \"my-1.5\"),\n  table: withClass(\n    \"table\",\n    \"w-full border-collapse overflow-y-auto rounded-md border border-foreground/20\"\n  ),\n  th: withClass(\n    \"th\",\n    \"border border-foreground/20 px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n  ),\n  td: withClass(\n    \"td\",\n    \"border border-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n  ),\n  tr: withClass(\"tr\", \"m-0 border-t p-0 even:bg-muted\"),\n  p: withClass(\"p\", \"whitespace-pre-wrap\"),\n  hr: withClass(\"hr\", \"border-foreground/20\"),\n  pre: withClass(\"pre\", \"rounded-md bg-background/50 p-4 font-mono text-sm\"),\n}\n\nfunction withClass(Tag: keyof JSX.IntrinsicElements, classes: string) {\n  const Component = ({ node, ...props }: any) => (\n    <Tag className={classes} {...props} />\n  )\n  Component.displayName = Tag\n  return Component\n}\n",
       "type": "registry:ui",
       "target": ""
     }
diff --git a/apps/www/public/r/message-input.json b/apps/www/public/r/message-input.json
index a8f4a32..b19f9e6 100644
--- a/apps/www/public/r/message-input.json
+++ b/apps/www/public/r/message-input.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "ui/message-input.tsx",
-      "content": "\"use client\"\n\nimport React, { useRef, useState } from \"react\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { ArrowUp, FileIcon, Paperclip, Square, X } from \"lucide-react\"\nimport { omit } from \"remeda\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useAutosizeTextArea } from \"@/registry/default/hooks/use-autosize-textarea\"\nimport { Button } from \"@/registry/default/ui/button\"\n\ninterface MessageInputBaseProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  value: string\n  submitOnEnter?: boolean\n  stop?: () => void\n  isGenerating: boolean\n}\n\ninterface MessageInputWithoutAttachmentProps extends MessageInputBaseProps {\n  allowAttachments?: false\n}\n\ninterface MessageInputWithAttachmentsProps extends MessageInputBaseProps {\n  allowAttachments: true\n  files: File[] | null\n  setFiles: React.Dispatch<React.SetStateAction<File[] | null>>\n}\n\ntype MessageInputProps =\n  | MessageInputWithoutAttachmentProps\n  | MessageInputWithAttachmentsProps\n\nexport function MessageInput({\n  placeholder = \"Ask AI...\",\n  className,\n  onKeyDown: onKeyDownProp,\n  submitOnEnter = true,\n  stop,\n  isGenerating,\n  ...props\n}: MessageInputProps) {\n  const [isDragging, setIsDragging] = useState(false)\n\n  const addFiles = (files: File[] | null) => {\n    if (props.allowAttachments) {\n      props.setFiles((currentFiles) => {\n        if (currentFiles === null) {\n          return files\n        }\n\n        if (files === null) {\n          return currentFiles\n        }\n\n        return [...currentFiles, ...files]\n      })\n    }\n  }\n\n  const onDragOver = (event: React.DragEvent) => {\n    if (props.allowAttachments !== true) return\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const onDragLeave = (event: React.DragEvent) => {\n    if (props.allowAttachments !== true) return\n    event.preventDefault()\n    setIsDragging(false)\n  }\n\n  const onDrop = (event: React.DragEvent) => {\n    setIsDragging(false)\n    if (props.allowAttachments !== true) return\n    event.preventDefault()\n    const dataTransfer = event.dataTransfer\n    if (dataTransfer.files.length) {\n      addFiles(Array.from(dataTransfer.files))\n    }\n  }\n\n  const onPaste = (event: React.ClipboardEvent) => {\n    const items = event.clipboardData?.items\n    if (!items) return\n\n    const files = Array.from(items)\n      .map((item) => item.getAsFile())\n      .filter((file) => file !== null)\n\n    if (props.allowAttachments && files.length > 0) {\n      addFiles(files)\n    }\n  }\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (submitOnEnter && event.key === \"Enter\" && !event.shiftKey) {\n      event.preventDefault()\n      event.currentTarget.form?.requestSubmit()\n    }\n\n    onKeyDownProp?.(event)\n  }\n\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null)\n\n  const showFileList =\n    props.allowAttachments && props.files && props.files.length > 0\n\n  useAutosizeTextArea({\n    ref: textAreaRef,\n    maxHeight: 240,\n    borderWidth: 1,\n    dependencies: [props.value, showFileList],\n  })\n\n  return (\n    <div\n      className=\"relative flex w-full\"\n      onDragOver={onDragOver}\n      onDragLeave={onDragLeave}\n      onDrop={onDrop}\n    >\n      <textarea\n        aria-label=\"Write your prompt here\"\n        placeholder={placeholder}\n        ref={textAreaRef}\n        onPaste={onPaste}\n        onKeyDown={onKeyDown}\n        className={cn(\n          \"w-full grow resize-none rounded-xl border border-input bg-background p-3 pr-24 text-sm ring-offset-background transition-[border] placeholder:text-muted-foreground focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n          showFileList && \"pb-16\",\n          className\n        )}\n        // TODO: better way to do this\n        {...(props.allowAttachments\n          ? omit(props, [\"allowAttachments\", \"files\", \"setFiles\"])\n          : omit(props, [\"allowAttachments\"]))}\n      />\n\n      {props.allowAttachments && (\n        <div className=\"absolute inset-x-3 bottom-0 overflow-x-scroll py-3\">\n          <div className=\"flex space-x-3\">\n            <AnimatePresence mode=\"popLayout\">\n              {props.files?.map((file) => {\n                return (\n                  <FilePreview\n                    key={file.name + String(file.lastModified)}\n                    file={file}\n                    onRemove={() => {\n                      props.setFiles((files) => {\n                        if (!files) return null\n\n                        const filtered = Array.from(files).filter(\n                          (f) => f !== file\n                        )\n                        if (filtered.length === 0) return null\n                        return filtered\n                      })\n                    }}\n                  />\n                )\n              })}\n            </AnimatePresence>\n          </div>\n        </div>\n      )}\n\n      <div className=\"absolute right-3 top-3 flex gap-2\">\n        {props.allowAttachments && (\n          <Button\n            type=\"button\"\n            size=\"icon\"\n            variant=\"outline\"\n            className=\"h-8 w-8\"\n            aria-label=\"Attach a file\"\n            onClick={async () => {\n              const files = await showFileUploadDialog()\n              addFiles(files)\n            }}\n          >\n            <Paperclip className=\"h-4 w-4\" />\n          </Button>\n        )}\n        {isGenerating && stop ? (\n          <Button\n            type=\"button\"\n            size=\"icon\"\n            className=\"h-8 w-8\"\n            aria-label=\"Stop generating\"\n            onClick={stop}\n          >\n            <Square className=\"h-3 w-3 animate-pulse\" fill=\"currentColor\" />\n          </Button>\n        ) : (\n          <Button\n            type=\"submit\"\n            size=\"icon\"\n            className=\"h-8 w-8 transition-opacity\"\n            aria-label=\"Send message\"\n            disabled={props.value === \"\" || isGenerating}\n          >\n            <ArrowUp className=\"h-5 w-5\" />\n          </Button>\n        )}\n      </div>\n\n      {props.allowAttachments && <FileUploadOverlay isDragging={isDragging} />}\n    </div>\n  )\n}\nMessageInput.displayName = \"MessageInput\"\n\ninterface FileUploadOverlayProps {\n  isDragging: boolean\n}\n\nfunction FileUploadOverlay({ isDragging }: FileUploadOverlayProps) {\n  return (\n    <AnimatePresence>\n      {isDragging && (\n        <motion.div\n          className=\"pointer-events-none absolute inset-0 flex items-center justify-center space-x-2 rounded-xl border border-dashed border-border bg-background text-sm text-muted-foreground\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={{ duration: 0.2 }}\n          aria-hidden\n        >\n          <Paperclip className=\"h-4 w-4\" />\n          <span>Drop your files here to attach them.</span>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  )\n}\n\ninterface FilePreviewProps {\n  file: File\n  onRemove: () => void\n}\n\nconst FilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(\n  (props, ref) => {\n    if (props.file.type.startsWith(\"image/\")) {\n      return <ImageFilePreview {...props} ref={ref} />\n    }\n\n    return <GenericFilePreview {...props} ref={ref} />\n  }\n)\nFilePreview.displayName = \"FilePreview\"\n\nconst ImageFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(\n  ({ file, onRemove }, ref) => {\n    return (\n      <motion.div\n        ref={ref}\n        className=\"relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs\"\n        layout\n        initial={{ opacity: 0, y: \"100%\" }}\n        animate={{ opacity: 1, y: 0 }}\n        exit={{ opacity: 0, y: \"100%\" }}\n      >\n        <div className=\"flex w-full items-center space-x-2\">\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img\n            alt={`Attachment ${file.name}`}\n            className=\"grid h-10 w-10 shrink-0 place-items-center rounded-sm border bg-muted object-cover\"\n            src={URL.createObjectURL(file)}\n          />\n          <span className=\"w-full truncate text-muted-foreground\">\n            {file.name}\n          </span>\n        </div>\n\n        <button\n          className=\"absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border bg-background\"\n          type=\"button\"\n          onClick={onRemove}\n        >\n          <X className=\"h-2.5 w-2.5\" />\n        </button>\n      </motion.div>\n    )\n  }\n)\nImageFilePreview.displayName = \"ImageFilePreview\"\n\nconst GenericFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(\n  ({ file, onRemove }, ref) => {\n    return (\n      <motion.div\n        ref={ref}\n        className=\"relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs\"\n        layout\n        initial={{ opacity: 0, y: \"100%\" }}\n        animate={{ opacity: 1, y: 0 }}\n        exit={{ opacity: 0, y: \"100%\" }}\n      >\n        <div className=\"flex w-full items-center space-x-2\">\n          <div className=\"grid h-10 w-10 shrink-0 place-items-center rounded-sm border bg-muted\">\n            <FileIcon className=\"h-6 w-6 text-foreground\" />\n          </div>\n          <span className=\"w-full truncate text-muted-foreground\">\n            {file.name}\n          </span>\n        </div>\n\n        <button\n          className=\"absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border bg-background\"\n          type=\"button\"\n          onClick={onRemove}\n        >\n          <X className=\"h-2.5 w-2.5\" />\n        </button>\n      </motion.div>\n    )\n  }\n)\nGenericFilePreview.displayName = \"GenericFilePreview\"\n\nfunction showFileUploadDialog() {\n  const input = document.createElement(\"input\")\n\n  input.type = \"file\"\n  input.multiple = true\n  // TODO: accept value\n  // file.type.startsWith(\"image/\") || file.type.startsWith(\"text/\")\n  input.accept = \"*/*\"\n  input.click()\n\n  return new Promise<File[] | null>((resolve) => {\n    input.onchange = (e) => {\n      const files = (e.currentTarget as HTMLInputElement).files\n\n      if (files) {\n        resolve(Array.from(files))\n        return\n      }\n\n      resolve(null)\n    }\n  })\n}\n",
+      "content": "\"use client\"\n\nimport React, { useRef, useState } from \"react\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { ArrowUp, FileIcon, Paperclip, Square, X } from \"lucide-react\"\nimport { omit } from \"remeda\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useAutosizeTextArea } from \"@/registry/default/hooks/use-autosize-textarea\"\nimport { Button } from \"@/registry/default/ui/button\"\n\ninterface MessageInputBaseProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  value: string\n  submitOnEnter?: boolean\n  stop?: () => void\n  isGenerating: boolean\n}\n\ninterface MessageInputWithoutAttachmentProps extends MessageInputBaseProps {\n  allowAttachments?: false\n}\n\ninterface MessageInputWithAttachmentsProps extends MessageInputBaseProps {\n  allowAttachments: true\n  files: File[] | null\n  setFiles: React.Dispatch<React.SetStateAction<File[] | null>>\n}\n\ntype MessageInputProps =\n  | MessageInputWithoutAttachmentProps\n  | MessageInputWithAttachmentsProps\n\nexport function MessageInput({\n  placeholder = \"Ask AI...\",\n  className,\n  onKeyDown: onKeyDownProp,\n  submitOnEnter = true,\n  stop,\n  isGenerating,\n  ...props\n}: MessageInputProps) {\n  const [isDragging, setIsDragging] = useState(false)\n\n  const addFiles = (files: File[] | null) => {\n    if (props.allowAttachments) {\n      props.setFiles((currentFiles) => {\n        if (currentFiles === null) {\n          return files\n        }\n\n        if (files === null) {\n          return currentFiles\n        }\n\n        return [...currentFiles, ...files]\n      })\n    }\n  }\n\n  const onDragOver = (event: React.DragEvent) => {\n    if (props.allowAttachments !== true) return\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const onDragLeave = (event: React.DragEvent) => {\n    if (props.allowAttachments !== true) return\n    event.preventDefault()\n    setIsDragging(false)\n  }\n\n  const onDrop = (event: React.DragEvent) => {\n    setIsDragging(false)\n    if (props.allowAttachments !== true) return\n    event.preventDefault()\n    const dataTransfer = event.dataTransfer\n    if (dataTransfer.files.length) {\n      addFiles(Array.from(dataTransfer.files))\n    }\n  }\n\n  const onPaste = (event: React.ClipboardEvent) => {\n    const items = event.clipboardData?.items\n    if (!items) return\n\n    const files = Array.from(items)\n      .map((item) => item.getAsFile())\n      .filter((file) => file !== null)\n\n    if (props.allowAttachments && files.length > 0) {\n      addFiles(files)\n    }\n  }\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (submitOnEnter && event.key === \"Enter\" && !event.shiftKey) {\n      event.preventDefault()\n      event.currentTarget.form?.requestSubmit()\n    }\n\n    onKeyDownProp?.(event)\n  }\n\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null)\n\n  const showFileList =\n    props.allowAttachments && props.files && props.files.length > 0\n\n  useAutosizeTextArea({\n    ref: textAreaRef,\n    maxHeight: 240,\n    borderWidth: 1,\n    dependencies: [props.value, showFileList],\n  })\n\n  return (\n    <div\n      className=\"relative flex w-full\"\n      onDragOver={onDragOver}\n      onDragLeave={onDragLeave}\n      onDrop={onDrop}\n    >\n      <textarea\n        aria-label=\"Write your prompt here\"\n        placeholder={placeholder}\n        ref={textAreaRef}\n        onPaste={onPaste}\n        onKeyDown={onKeyDown}\n        className={cn(\n          \"w-full grow resize-none rounded-xl border border-input bg-background p-3 pr-24 text-sm ring-offset-background transition-[border] placeholder:text-muted-foreground focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n          showFileList && \"pb-16\",\n          className\n        )}\n        {...(props.allowAttachments\n          ? omit(props, [\"allowAttachments\", \"files\", \"setFiles\"])\n          : omit(props, [\"allowAttachments\"]))}\n      />\n\n      {props.allowAttachments && (\n        <div className=\"absolute inset-x-3 bottom-0 overflow-x-scroll py-3\">\n          <div className=\"flex space-x-3\">\n            <AnimatePresence mode=\"popLayout\">\n              {props.files?.map((file) => {\n                return (\n                  <FilePreview\n                    key={file.name + String(file.lastModified)}\n                    file={file}\n                    onRemove={() => {\n                      props.setFiles((files) => {\n                        if (!files) return null\n\n                        const filtered = Array.from(files).filter(\n                          (f) => f !== file\n                        )\n                        if (filtered.length === 0) return null\n                        return filtered\n                      })\n                    }}\n                  />\n                )\n              })}\n            </AnimatePresence>\n          </div>\n        </div>\n      )}\n\n      <div className=\"absolute right-3 top-3 flex gap-2\">\n        {props.allowAttachments && (\n          <Button\n            type=\"button\"\n            size=\"icon\"\n            variant=\"outline\"\n            className=\"h-8 w-8\"\n            aria-label=\"Attach a file\"\n            onClick={async () => {\n              const files = await showFileUploadDialog()\n              addFiles(files)\n            }}\n          >\n            <Paperclip className=\"h-4 w-4\" />\n          </Button>\n        )}\n        {isGenerating && stop ? (\n          <Button\n            type=\"button\"\n            size=\"icon\"\n            className=\"h-8 w-8\"\n            aria-label=\"Stop generating\"\n            onClick={stop}\n          >\n            <Square className=\"h-3 w-3 animate-pulse\" fill=\"currentColor\" />\n          </Button>\n        ) : (\n          <Button\n            type=\"submit\"\n            size=\"icon\"\n            className=\"h-8 w-8 transition-opacity\"\n            aria-label=\"Send message\"\n            disabled={props.value === \"\" || isGenerating}\n          >\n            <ArrowUp className=\"h-5 w-5\" />\n          </Button>\n        )}\n      </div>\n\n      {props.allowAttachments && <FileUploadOverlay isDragging={isDragging} />}\n    </div>\n  )\n}\nMessageInput.displayName = \"MessageInput\"\n\ninterface FileUploadOverlayProps {\n  isDragging: boolean\n}\n\nfunction FileUploadOverlay({ isDragging }: FileUploadOverlayProps) {\n  return (\n    <AnimatePresence>\n      {isDragging && (\n        <motion.div\n          className=\"pointer-events-none absolute inset-0 flex items-center justify-center space-x-2 rounded-xl border border-dashed border-border bg-background text-sm text-muted-foreground\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          transition={{ duration: 0.2 }}\n          aria-hidden\n        >\n          <Paperclip className=\"h-4 w-4\" />\n          <span>Drop your files here to attach them.</span>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  )\n}\n\ninterface FilePreviewProps {\n  file: File\n  onRemove: () => void\n}\n\nconst FilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(\n  (props, ref) => {\n    if (props.file.type.startsWith(\"image/\")) {\n      return <ImageFilePreview {...props} ref={ref} />\n    }\n\n    return <GenericFilePreview {...props} ref={ref} />\n  }\n)\nFilePreview.displayName = \"FilePreview\"\n\nconst ImageFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(\n  ({ file, onRemove }, ref) => {\n    return (\n      <motion.div\n        ref={ref}\n        className=\"relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs\"\n        layout\n        initial={{ opacity: 0, y: \"100%\" }}\n        animate={{ opacity: 1, y: 0 }}\n        exit={{ opacity: 0, y: \"100%\" }}\n      >\n        <div className=\"flex w-full items-center space-x-2\">\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img\n            alt={`Attachment ${file.name}`}\n            className=\"grid h-10 w-10 shrink-0 place-items-center rounded-sm border bg-muted object-cover\"\n            src={URL.createObjectURL(file)}\n          />\n          <span className=\"w-full truncate text-muted-foreground\">\n            {file.name}\n          </span>\n        </div>\n\n        <button\n          className=\"absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border bg-background\"\n          type=\"button\"\n          onClick={onRemove}\n        >\n          <X className=\"h-2.5 w-2.5\" />\n        </button>\n      </motion.div>\n    )\n  }\n)\nImageFilePreview.displayName = \"ImageFilePreview\"\n\nconst GenericFilePreview = React.forwardRef<HTMLDivElement, FilePreviewProps>(\n  ({ file, onRemove }, ref) => {\n    return (\n      <motion.div\n        ref={ref}\n        className=\"relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs\"\n        layout\n        initial={{ opacity: 0, y: \"100%\" }}\n        animate={{ opacity: 1, y: 0 }}\n        exit={{ opacity: 0, y: \"100%\" }}\n      >\n        <div className=\"flex w-full items-center space-x-2\">\n          <div className=\"grid h-10 w-10 shrink-0 place-items-center rounded-sm border bg-muted\">\n            <FileIcon className=\"h-6 w-6 text-foreground\" />\n          </div>\n          <span className=\"w-full truncate text-muted-foreground\">\n            {file.name}\n          </span>\n        </div>\n\n        <button\n          className=\"absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full border bg-background\"\n          type=\"button\"\n          onClick={onRemove}\n        >\n          <X className=\"h-2.5 w-2.5\" />\n        </button>\n      </motion.div>\n    )\n  }\n)\nGenericFilePreview.displayName = \"GenericFilePreview\"\n\nfunction showFileUploadDialog() {\n  const input = document.createElement(\"input\")\n\n  input.type = \"file\"\n  input.multiple = true\n  input.accept = \"*/*\"\n  input.click()\n\n  return new Promise<File[] | null>((resolve) => {\n    input.onchange = (e) => {\n      const files = (e.currentTarget as HTMLInputElement).files\n\n      if (files) {\n        resolve(Array.from(files))\n        return\n      }\n\n      resolve(null)\n    }\n  })\n}\n",
       "type": "registry:ui",
       "target": ""
     }