Fix pr #4832: Fix issue #4830: [Bug]: Copy-paste into the "What do yo…

…u want to build?" bar doesn't work

frontend/__tests__/components/chat/chat-input.test.tsx

@@ -169,8 +169,24 @@ describe("ChatInput", () => {
     const input = screen.getByTestId("chat-input").querySelector("textarea");
     expect(input).toBeTruthy();
 
-    // Paste text data
-    await user.paste(input!, "test paste");
+    // Create a paste event with text data
+    const clipboardData = {
+      files: [],
+      getData: (type: string) => type === "text" ? "test paste" : "",
+      items: [],
+      types: ["text"]
+    };
+
+    // Create and dispatch paste event
+    const pasteEvent = new Event("paste", { bubbles: true });
+    Object.defineProperty(pasteEvent, "clipboardData", {
+      value: clipboardData
+    });
+
+    input!.dispatchEvent(pasteEvent);
+
+    // Verify text paste was handled
+    expect(onChange).toHaveBeenCalledWith("test paste");
   });
 
   it("should handle image paste correctly", async () => {
@@ -185,12 +201,21 @@ describe("ChatInput", () => {
 
     // Create a paste event with an image file
     const file = new File(["dummy content"], "image.png", { type: "image/png" });
+    const clipboardData = {
+      files: [file],
+      getData: () => "",
+      items: [],
+      types: ["Files"]
+    };
 
-    // Paste image data
-    await user.paste(input!, {
-      files: [file]
+    // Create and dispatch paste event
+    const pasteEvent = new Event("paste", { bubbles: true });
+    Object.defineProperty(pasteEvent, "clipboardData", {
+      value: clipboardData
     });
 
+    input!.dispatchEvent(pasteEvent);
+
     // Verify image paste was handled
     expect(onImagePaste).toHaveBeenCalledWith([file]);
   });

frontend/src/components/chat-input.tsx

@@ -40,18 +40,28 @@ export function ChatInput({
   const [isDraggingOver, setIsDraggingOver] = React.useState(false);
 
   const handlePaste = (event: React.ClipboardEvent<HTMLTextAreaElement>) => {
-    // Only handle paste if we have an image paste handler and there are files
+    // Handle image paste if we have an image paste handler and there are files
     if (onImagePaste && event.clipboardData.files.length > 0) {
       const files = Array.from(event.clipboardData.files).filter((file) =>
         file.type.startsWith("image/"),
       );
-      // Only prevent default if we found image files to handle
       if (files.length > 0) {
         event.preventDefault();
         onImagePaste(files);
+        return;
       }
     }
-    // For text paste, let the default behavior handle it
+    // Handle text paste
+    const text = event.clipboardData.getData("text");
+    if (text && onChange) {
+      const target = event.target as HTMLTextAreaElement;
+      const start = target.selectionStart;
+      const end = target.selectionEnd;
+      const currentValue = target.value;
+      const newValue =
+        currentValue.substring(0, start) + text + currentValue.substring(end);
+      onChange(newValue);
+    }
   };
 
   const handleDragOver = (event: React.DragEvent<HTMLTextAreaElement>) => {