diff --git a/apps/www/content/docs/components/message-input.mdx b/apps/www/content/docs/components/message-input.mdx
index 1266958..0d6bffd 100644
--- a/apps/www/content/docs/components/message-input.mdx
+++ b/apps/www/content/docs/components/message-input.mdx
@@ -19,6 +19,7 @@ The MessageInput component provides a rich textarea experience with support for
 - Drag and drop file uploads
 - Submit on Enter (configurable)
 - Stop generation button
+- Double-enter interrupt behavior
 - Fully customizable styling
 
 ## Installation
@@ -86,6 +87,24 @@ export function BasicMessageInput() {
 }
 ```
 
+### With Interrupt Behavior
+
+```tsx
+export function MessageInputWithInterrupt() {
+  return (
+    <MessageInput
+      value={input}
+      onChange={handleInputChange}
+      isGenerating={isGenerating}
+      stop={handleStop}
+      enableInterrupt={true}
+    />
+  )
+}
+```
+
+When `enableInterrupt` is enabled and `isGenerating` is true, pressing Enter once will show a prompt asking the user to press Enter again to interrupt the generation. The prompt will disappear either when the user presses Enter again (triggering the stop function) or when the generation completes.
+
 ### With File Attachments
 
 ```tsx
@@ -140,6 +159,7 @@ The MessageInput component accepts two sets of props depending on whether file a
 | `isGenerating`     | `boolean`    | Whether AI is generating       | Required    |
 | `placeholder`      | `string`     | Input placeholder text         | "Ask AI..." |
 | `allowAttachments` | `boolean`    | Enable file attachments        |
+| `enableInterrupt`  | `boolean`    | Enable double-enter interrupt  | `true`      |
 
 ### With Attachments
 
@@ -205,6 +225,20 @@ Show stop button during generation:
 />
 ```
 
+### Interrupt Behavior
+
+The double-enter interrupt behavior is enabled by default. To disable it:
+
+```tsx
+<MessageInput
+  value={input}
+  onChange={handleInputChange}
+  isGenerating={isGenerating}
+  stop={handleStop}
+  enableInterrupt={false}
+/>
+```
+
 ## Theming
 
 The Chat component is using theme colors and fully themable with CSS variables.
diff --git a/apps/www/public/r/chat.json b/apps/www/public/r/chat.json
index 3230e15..b0cffba 100644
--- a/apps/www/public/r/chat.json
+++ b/apps/www/public/r/chat.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "ui/chat.tsx",
-      "content": "\"use client\"\n\nimport { forwardRef, useCallback, useState, type ReactElement } from \"react\"\nimport { ArrowDown, ThumbsDown, ThumbsUp } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useAutoScroll } from \"@/registry/default/hooks/use-auto-scroll\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { type Message } from \"@/registry/default/ui/chat-message\"\nimport { CopyButton } from \"@/registry/default/ui/copy-button\"\nimport { MessageInput } from \"@/registry/default/ui/message-input\"\nimport { MessageList } from \"@/registry/default/ui/message-list\"\nimport { PromptSuggestions } from \"@/registry/default/ui/prompt-suggestions\"\n\ninterface ChatPropsBase {\n  handleSubmit: (\n    event?: { preventDefault?: () => void },\n    options?: { experimental_attachments?: FileList }\n  ) => void\n  messages: Array<Message>\n  input: string\n  className?: string\n  handleInputChange: React.ChangeEventHandler<HTMLTextAreaElement>\n  isGenerating: boolean\n  stop?: () => void\n  onRateResponse?: (\n    messageId: string,\n    rating: \"thumbs-up\" | \"thumbs-down\"\n  ) => void\n}\n\ninterface ChatPropsWithoutSuggestions extends ChatPropsBase {\n  append?: never\n  suggestions?: never\n}\n\ninterface ChatPropsWithSuggestions extends ChatPropsBase {\n  append: (message: { role: \"user\"; content: string }) => void\n  suggestions: string[]\n}\n\ntype ChatProps = ChatPropsWithoutSuggestions | ChatPropsWithSuggestions\n\nexport function Chat({\n  messages,\n  handleSubmit,\n  input,\n  handleInputChange,\n  stop,\n  isGenerating,\n  append,\n  suggestions,\n  className,\n  onRateResponse,\n}: ChatProps) {\n  const lastMessage = messages.at(-1)\n  const isEmpty = messages.length === 0\n  const isTyping = lastMessage?.role === \"user\"\n\n  const messageOptions = useCallback(\n    (message: Message) => ({\n      actions: onRateResponse ? (\n        <>\n          <div className=\"border-r pr-1\">\n            <CopyButton\n              content={message.content}\n              copyMessage=\"Copied response to clipboard!\"\n            />\n          </div>\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            className=\"h-6 w-6\"\n            onClick={() => onRateResponse(message.id, \"thumbs-up\")}\n          >\n            <ThumbsUp className=\"h-4 w-4\" />\n          </Button>\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            className=\"h-6 w-6\"\n            onClick={() => onRateResponse(message.id, \"thumbs-down\")}\n          >\n            <ThumbsDown className=\"h-4 w-4\" />\n          </Button>\n        </>\n      ) : (\n        <CopyButton\n          content={message.content}\n          copyMessage=\"Copied response to clipboard!\"\n        />\n      ),\n    }),\n    [onRateResponse]\n  )\n\n  return (\n    <ChatContainer className={className}>\n      {isEmpty && append && suggestions ? (\n        <PromptSuggestions\n          label=\"Try these prompts ✨\"\n          append={append}\n          suggestions={suggestions}\n        />\n      ) : null}\n\n      {messages.length > 0 ? (\n        <ChatMessages messages={messages}>\n          <MessageList\n            messages={messages}\n            isTyping={isTyping}\n            messageOptions={messageOptions}\n          />\n        </ChatMessages>\n      ) : null}\n\n      <ChatForm\n        className=\"mt-auto\"\n        isPending={isGenerating || isTyping}\n        handleSubmit={handleSubmit}\n      >\n        {({ files, setFiles }) => (\n          <MessageInput\n            value={input}\n            onChange={handleInputChange}\n            allowAttachments\n            files={files}\n            setFiles={setFiles}\n            stop={stop}\n            isGenerating={isGenerating}\n          />\n        )}\n      </ChatForm>\n    </ChatContainer>\n  )\n}\nChat.displayName = \"Chat\"\n\nexport function ChatMessages({\n  messages,\n  children,\n}: React.PropsWithChildren<{\n  messages: Message[]\n}>) {\n  const {\n    containerRef,\n    scrollToBottom,\n    handleScroll,\n    shouldAutoScroll,\n    handleTouchStart,\n  } = useAutoScroll([messages])\n\n  return (\n    <div\n      className=\"grid overflow-y-auto pb-4 grid-cols-1\"\n      ref={containerRef}\n      onScroll={handleScroll}\n      onTouchStart={handleTouchStart}\n    >\n      <div className=\"[grid-column:1/1] [grid-row:1/1] max-w-full\">\n        {children}\n      </div>\n\n      <div className=\"flex justify-end items-end [grid-column:1/1] [grid-row:1/1] flex-1\">\n        {!shouldAutoScroll && (\n          <div className=\"sticky bottom-0 left-0 flex w-full justify-end\">\n            <Button\n              onClick={scrollToBottom}\n              className=\"h-8 w-8 rounded-full ease-in-out animate-in fade-in-0 slide-in-from-bottom-1\"\n              size=\"icon\"\n              variant=\"ghost\"\n            >\n              <ArrowDown className=\"h-4 w-4\" />\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport const ChatContainer = forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"grid max-h-full w-full grid-rows-[1fr_auto]\", className)}\n      {...props}\n    />\n  )\n})\nChatContainer.displayName = \"ChatContainer\"\n\ninterface ChatFormProps {\n  className?: string\n  isPending: boolean\n  handleSubmit: (\n    event?: { preventDefault?: () => void },\n    options?: { experimental_attachments?: FileList }\n  ) => void\n  children: (props: {\n    files: File[] | null\n    setFiles: React.Dispatch<React.SetStateAction<File[] | null>>\n  }) => ReactElement\n}\n\nexport const ChatForm = forwardRef<HTMLFormElement, ChatFormProps>(\n  ({ children, handleSubmit, isPending, className }, ref) => {\n    const [files, setFiles] = useState<File[] | null>(null)\n\n    const onSubmit = (event: React.FormEvent) => {\n      if (isPending) {\n        event.preventDefault()\n        return\n      }\n\n      if (!files) {\n        handleSubmit(event)\n        return\n      }\n\n      const fileList = createFileList(files)\n      handleSubmit(event, { experimental_attachments: fileList })\n      setFiles(null)\n    }\n\n    return (\n      <form ref={ref} onSubmit={onSubmit} className={className}>\n        {children({ files, setFiles })}\n      </form>\n    )\n  }\n)\nChatForm.displayName = \"ChatForm\"\n\nfunction createFileList(files: File[] | FileList): FileList {\n  const dataTransfer = new DataTransfer()\n  for (const file of Array.from(files)) {\n    dataTransfer.items.add(file)\n  }\n  return dataTransfer.files\n}\n",
+      "content": "\"use client\"\n\nimport { forwardRef, useCallback, useState, type ReactElement } from \"react\"\nimport { ArrowDown, ThumbsDown, ThumbsUp } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useAutoScroll } from \"@/registry/default/hooks/use-auto-scroll\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { type Message } from \"@/registry/default/ui/chat-message\"\nimport { CopyButton } from \"@/registry/default/ui/copy-button\"\nimport { MessageInput } from \"@/registry/default/ui/message-input\"\nimport { MessageList } from \"@/registry/default/ui/message-list\"\nimport { PromptSuggestions } from \"@/registry/default/ui/prompt-suggestions\"\n\ninterface ChatPropsBase {\n  handleSubmit: (\n    event?: { preventDefault?: () => void },\n    options?: { experimental_attachments?: FileList }\n  ) => void\n  messages: Array<Message>\n  input: string\n  className?: string\n  handleInputChange: React.ChangeEventHandler<HTMLTextAreaElement>\n  isGenerating: boolean\n  stop?: () => void\n  onRateResponse?: (\n    messageId: string,\n    rating: \"thumbs-up\" | \"thumbs-down\"\n  ) => void\n}\n\ninterface ChatPropsWithoutSuggestions extends ChatPropsBase {\n  append?: never\n  suggestions?: never\n}\n\ninterface ChatPropsWithSuggestions extends ChatPropsBase {\n  append: (message: { role: \"user\"; content: string }) => void\n  suggestions: string[]\n}\n\ntype ChatProps = ChatPropsWithoutSuggestions | ChatPropsWithSuggestions\n\nexport function Chat({\n  messages,\n  handleSubmit,\n  input,\n  handleInputChange,\n  stop,\n  isGenerating,\n  append,\n  suggestions,\n  className,\n  onRateResponse,\n}: ChatProps) {\n  const lastMessage = messages.at(-1)\n  const isEmpty = messages.length === 0\n  const isTyping = lastMessage?.role === \"user\"\n\n  const messageOptions = useCallback(\n    (message: Message) => ({\n      actions: onRateResponse ? (\n        <>\n          <div className=\"border-r pr-1\">\n            <CopyButton\n              content={message.content}\n              copyMessage=\"Copied response to clipboard!\"\n            />\n          </div>\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            className=\"h-6 w-6\"\n            onClick={() => onRateResponse(message.id, \"thumbs-up\")}\n          >\n            <ThumbsUp className=\"h-4 w-4\" />\n          </Button>\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            className=\"h-6 w-6\"\n            onClick={() => onRateResponse(message.id, \"thumbs-down\")}\n          >\n            <ThumbsDown className=\"h-4 w-4\" />\n          </Button>\n        </>\n      ) : (\n        <CopyButton\n          content={message.content}\n          copyMessage=\"Copied response to clipboard!\"\n        />\n      ),\n    }),\n    [onRateResponse]\n  )\n\n  return (\n    <ChatContainer className={className}>\n      {isEmpty && append && suggestions ? (\n        <PromptSuggestions\n          label=\"Try these prompts ✨\"\n          append={append}\n          suggestions={suggestions}\n        />\n      ) : null}\n\n      {messages.length > 0 ? (\n        <ChatMessages messages={messages}>\n          <MessageList\n            messages={messages}\n            isTyping={isTyping}\n            messageOptions={messageOptions}\n          />\n        </ChatMessages>\n      ) : null}\n\n      <ChatForm\n        className=\"mt-auto\"\n        isPending={isGenerating || isTyping}\n        handleSubmit={handleSubmit}\n      >\n        {({ files, setFiles }) => (\n          <MessageInput\n            value={input}\n            onChange={handleInputChange}\n            allowAttachments\n            files={files}\n            setFiles={setFiles}\n            stop={stop}\n            isGenerating={isGenerating}\n          />\n        )}\n      </ChatForm>\n    </ChatContainer>\n  )\n}\nChat.displayName = \"Chat\"\n\nexport function ChatMessages({\n  messages,\n  children,\n}: React.PropsWithChildren<{\n  messages: Message[]\n}>) {\n  const {\n    containerRef,\n    scrollToBottom,\n    handleScroll,\n    shouldAutoScroll,\n    handleTouchStart,\n  } = useAutoScroll([messages])\n\n  return (\n    <div\n      className=\"grid grid-cols-1 overflow-y-auto pb-4\"\n      ref={containerRef}\n      onScroll={handleScroll}\n      onTouchStart={handleTouchStart}\n    >\n      <div className=\"max-w-full [grid-column:1/1] [grid-row:1/1]\">\n        {children}\n      </div>\n\n      <div className=\"flex flex-1 items-end justify-end [grid-column:1/1] [grid-row:1/1]\">\n        {!shouldAutoScroll && (\n          <div className=\"sticky bottom-0 left-0 flex w-full justify-end\">\n            <Button\n              onClick={scrollToBottom}\n              className=\"h-8 w-8 rounded-full ease-in-out animate-in fade-in-0 slide-in-from-bottom-1\"\n              size=\"icon\"\n              variant=\"ghost\"\n            >\n              <ArrowDown className=\"h-4 w-4\" />\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport const ChatContainer = forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"grid max-h-full w-full grid-rows-[1fr_auto]\", className)}\n      {...props}\n    />\n  )\n})\nChatContainer.displayName = \"ChatContainer\"\n\ninterface ChatFormProps {\n  className?: string\n  isPending: boolean\n  handleSubmit: (\n    event?: { preventDefault?: () => void },\n    options?: { experimental_attachments?: FileList }\n  ) => void\n  children: (props: {\n    files: File[] | null\n    setFiles: React.Dispatch<React.SetStateAction<File[] | null>>\n  }) => ReactElement\n}\n\nexport const ChatForm = forwardRef<HTMLFormElement, ChatFormProps>(\n  ({ children, handleSubmit, isPending, className }, ref) => {\n    const [files, setFiles] = useState<File[] | null>(null)\n\n    const onSubmit = (event: React.FormEvent) => {\n      if (!files) {\n        handleSubmit(event)\n        return\n      }\n\n      const fileList = createFileList(files)\n      handleSubmit(event, { experimental_attachments: fileList })\n      setFiles(null)\n    }\n\n    return (\n      <form ref={ref} onSubmit={onSubmit} className={className}>\n        {children({ files, setFiles })}\n      </form>\n    )\n  }\n)\nChatForm.displayName = \"ChatForm\"\n\nfunction createFileList(files: File[] | FileList): FileList {\n  const dataTransfer = new DataTransfer()\n  for (const file of Array.from(files)) {\n    dataTransfer.items.add(file)\n  }\n  return dataTransfer.files\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 9ff9a48..6f76fe4 100644
--- a/apps/www/public/r/message-input.json
+++ b/apps/www/public/r/message-input.json
@@ -13,7 +13,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, Paperclip, Square } 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\"\nimport { FilePreview } from \"@/registry/default/ui/file-preview\"\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\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",
+      "content": "\"use client\"\n\nimport React, { useEffect, useRef, useState } from \"react\"\nimport { AnimatePresence, motion } from \"framer-motion\"\nimport { ArrowUp, 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\"\nimport { FilePreview } from \"@/registry/default/ui/file-preview\"\n\ninterface MessageInputBaseProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  value: string\n  submitOnEnter?: boolean\n  stop?: () => void\n  isGenerating: boolean\n  enableInterrupt?: 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  enableInterrupt = true,\n  ...props\n}: MessageInputProps) {\n  const [isDragging, setIsDragging] = useState(false)\n  const [showInterruptPrompt, setShowInterruptPrompt] = useState(false)\n\n  useEffect(() => {\n    if (!isGenerating) {\n      setShowInterruptPrompt(false)\n    }\n  }, [isGenerating])\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\n      if (isGenerating && stop && enableInterrupt) {\n        if (showInterruptPrompt) {\n          stop()\n          setShowInterruptPrompt(false)\n          event.currentTarget.form?.requestSubmit()\n        } else if (\n          props.value ||\n          (props.allowAttachments && props.files?.length)\n        ) {\n          setShowInterruptPrompt(true)\n          return\n        }\n      }\n\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      {enableInterrupt && (\n        <InterruptPrompt\n          isOpen={showInterruptPrompt}\n          close={() => setShowInterruptPrompt(false)}\n        />\n      )}\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          \"z-10 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 z-20 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 z-20 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 InterruptPromptProps {\n  isOpen: boolean\n  close: () => void\n}\n\nfunction InterruptPrompt({ isOpen, close }: InterruptPromptProps) {\n  return (\n    <AnimatePresence>\n      {isOpen && (\n        <motion.div\n          initial={{ top: 0, filter: \"blur(5px)\" }}\n          animate={{\n            top: -40,\n            filter: \"blur(0px)\",\n            transition: {\n              type: \"spring\",\n              filter: { type: \"tween\" },\n            },\n          }}\n          exit={{ top: 0, filter: \"blur(5px)\" }}\n          className=\"absolute left-1/2 flex -translate-x-1/2 overflow-hidden whitespace-nowrap rounded-full border bg-background py-1 text-center text-sm text-muted-foreground\"\n        >\n          <span className=\"ml-2.5\">Press Enter again to interrupt</span>\n          <button\n            className=\"ml-1 mr-2.5 flex items-center\"\n            type=\"button\"\n            onClick={close}\n            aria-label=\"Close\"\n          >\n            <X className=\"h-3 w-3\" />\n          </button>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  )\n}\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 z-20 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\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": ""
     }
diff --git a/apps/www/registry/default/ui/chat.tsx b/apps/www/registry/default/ui/chat.tsx
index 3f2fd04..ed6d37e 100644
--- a/apps/www/registry/default/ui/chat.tsx
+++ b/apps/www/registry/default/ui/chat.tsx
@@ -152,16 +152,16 @@ export function ChatMessages({
 
   return (
     <div
-      className="grid overflow-y-auto pb-4 grid-cols-1"
+      className="grid grid-cols-1 overflow-y-auto pb-4"
       ref={containerRef}
       onScroll={handleScroll}
       onTouchStart={handleTouchStart}
     >
-      <div className="[grid-column:1/1] [grid-row:1/1] max-w-full">
+      <div className="max-w-full [grid-column:1/1] [grid-row:1/1]">
         {children}
       </div>
 
-      <div className="flex justify-end items-end [grid-column:1/1] [grid-row:1/1] flex-1">
+      <div className="flex flex-1 items-end justify-end [grid-column:1/1] [grid-row:1/1]">
         {!shouldAutoScroll && (
           <div className="sticky bottom-0 left-0 flex w-full justify-end">
             <Button
@@ -211,11 +211,6 @@ export const ChatForm = forwardRef<HTMLFormElement, ChatFormProps>(
     const [files, setFiles] = useState<File[] | null>(null)
 
     const onSubmit = (event: React.FormEvent) => {
-      if (isPending) {
-        event.preventDefault()
-        return
-      }
-
       if (!files) {
         handleSubmit(event)
         return
diff --git a/apps/www/registry/default/ui/message-input.tsx b/apps/www/registry/default/ui/message-input.tsx
index d25227c..1990e4d 100644
--- a/apps/www/registry/default/ui/message-input.tsx
+++ b/apps/www/registry/default/ui/message-input.tsx
@@ -1,8 +1,8 @@
 "use client"
 
-import React, { useRef, useState } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import { AnimatePresence, motion } from "framer-motion"
-import { ArrowUp, Paperclip, Square } from "lucide-react"
+import { ArrowUp, Paperclip, Square, X } from "lucide-react"
 import { omit } from "remeda"
 
 import { cn } from "@/lib/utils"
@@ -16,6 +16,7 @@ interface MessageInputBaseProps
   submitOnEnter?: boolean
   stop?: () => void
   isGenerating: boolean
+  enableInterrupt?: boolean
 }
 
 interface MessageInputWithoutAttachmentProps extends MessageInputBaseProps {
@@ -39,9 +40,17 @@ export function MessageInput({
   submitOnEnter = true,
   stop,
   isGenerating,
+  enableInterrupt = true,
   ...props
 }: MessageInputProps) {
   const [isDragging, setIsDragging] = useState(false)
+  const [showInterruptPrompt, setShowInterruptPrompt] = useState(false)
+
+  useEffect(() => {
+    if (!isGenerating) {
+      setShowInterruptPrompt(false)
+    }
+  }, [isGenerating])
 
   const addFiles = (files: File[] | null) => {
     if (props.allowAttachments) {
@@ -97,6 +106,21 @@ export function MessageInput({
   const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (submitOnEnter && event.key === "Enter" && !event.shiftKey) {
       event.preventDefault()
+
+      if (isGenerating && stop && enableInterrupt) {
+        if (showInterruptPrompt) {
+          stop()
+          setShowInterruptPrompt(false)
+          event.currentTarget.form?.requestSubmit()
+        } else if (
+          props.value ||
+          (props.allowAttachments && props.files?.length)
+        ) {
+          setShowInterruptPrompt(true)
+          return
+        }
+      }
+
       event.currentTarget.form?.requestSubmit()
     }
 
@@ -122,6 +146,13 @@ export function MessageInput({
       onDragLeave={onDragLeave}
       onDrop={onDrop}
     >
+      {enableInterrupt && (
+        <InterruptPrompt
+          isOpen={showInterruptPrompt}
+          close={() => setShowInterruptPrompt(false)}
+        />
+      )}
+
       <textarea
         aria-label="Write your prompt here"
         placeholder={placeholder}
@@ -129,7 +160,7 @@ export function MessageInput({
         onPaste={onPaste}
         onKeyDown={onKeyDown}
         className={cn(
-          "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",
+          "z-10 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",
           showFileList && "pb-16",
           className
         )}
@@ -139,7 +170,7 @@ export function MessageInput({
       />
 
       {props.allowAttachments && (
-        <div className="absolute inset-x-3 bottom-0 overflow-x-scroll py-3">
+        <div className="absolute inset-x-3 bottom-0 z-20 overflow-x-scroll py-3">
           <div className="flex space-x-3">
             <AnimatePresence mode="popLayout">
               {props.files?.map((file) => {
@@ -166,7 +197,7 @@ export function MessageInput({
         </div>
       )}
 
-      <div className="absolute right-3 top-3 flex gap-2">
+      <div className="absolute right-3 top-3 z-20 flex gap-2">
         {props.allowAttachments && (
           <Button
             type="button"
@@ -211,6 +242,43 @@ export function MessageInput({
 }
 MessageInput.displayName = "MessageInput"
 
+interface InterruptPromptProps {
+  isOpen: boolean
+  close: () => void
+}
+
+function InterruptPrompt({ isOpen, close }: InterruptPromptProps) {
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ top: 0, filter: "blur(5px)" }}
+          animate={{
+            top: -40,
+            filter: "blur(0px)",
+            transition: {
+              type: "spring",
+              filter: { type: "tween" },
+            },
+          }}
+          exit={{ top: 0, filter: "blur(5px)" }}
+          className="absolute left-1/2 flex -translate-x-1/2 overflow-hidden whitespace-nowrap rounded-full border bg-background py-1 text-center text-sm text-muted-foreground"
+        >
+          <span className="ml-2.5">Press Enter again to interrupt</span>
+          <button
+            className="ml-1 mr-2.5 flex items-center"
+            type="button"
+            onClick={close}
+            aria-label="Close"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}
+
 interface FileUploadOverlayProps {
   isDragging: boolean
 }
@@ -220,7 +288,7 @@ function FileUploadOverlay({ isDragging }: FileUploadOverlayProps) {
     <AnimatePresence>
       {isDragging && (
         <motion.div
-          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"
+          className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center space-x-2 rounded-xl border border-dashed border-border bg-background text-sm text-muted-foreground"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}