diff --git a/src/components/ui/chat/chat-input.tsx b/src/components/ui/chat/chat-input.tsx
index a23670a..2065c6a 100644
--- a/src/components/ui/chat/chat-input.tsx
+++ b/src/components/ui/chat/chat-input.tsx
@@ -8,6 +8,7 @@ interface ChatInputProps
 const ChatInput = React.forwardRef<HTMLTextAreaElement, ChatInputProps>(
   ({ className, ...props }, ref) => (
     <Textarea
+      mockOnChange={false}
       autoComplete="off"
       ref={ref}
       name="message"
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index dc0b532..d148e97 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -1,16 +1,22 @@
-import * as React from "react";
+import { forwardRef, ComponentProps, useState } from "react";
 
 import { cn } from "@/lib/utils";
 
-const Textarea = React.forwardRef<
+const Textarea = forwardRef<
   HTMLTextAreaElement,
-  React.ComponentProps<"textarea">
->(({ className, value, onChange, ...props }, ref) => {
-  const [innerValue, setInnerValue] = React.useState(value);
+  ComponentProps<"textarea"> & { mockOnChange?: boolean }
+>(({ className, value, onChange, mockOnChange = true, ...props }, ref) => {
+  const [innerValue, setInnerValue] = useState(value);
   return (
     <textarea
-      value={innerValue}
-      onChange={(e) => setInnerValue(e.target.value)}
+      value={mockOnChange ? innerValue : value}
+      onChange={(e) => {
+        if (mockOnChange) {
+          setInnerValue(e.target.value);
+        } else {
+          onChange?.(e);
+        }
+      }}
       className={cn(
         "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className