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

@@ -1,5 +1,5 @@
 import userEvent from "@testing-library/user-event";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, afterEach, vi, it, expect } from "vitest";
 import { ChatInput } from "#/components/chat-input";
 
@@ -158,4 +158,37 @@ describe("ChatInput", () => {
     await user.tab();
     expect(onBlurMock).toHaveBeenCalledOnce();
   });
+
+  it("should handle text paste correctly", async () => {
+    const user = userEvent.setup();
+    const onChangeMock = vi.fn();
+    render(<ChatInput onSubmit={onSubmitMock} onChange={onChangeMock} />);
+    const textarea = screen.getByRole("textbox");
+
+    // Simulate pasting text using userEvent
+    await user.click(textarea);
+    await user.paste("Pasted text");
+
+    // onChange should be called with the pasted text
+    expect(onChangeMock).toHaveBeenCalledWith("Pasted text");
+  });
+
+  it("should handle image paste correctly", async () => {
+    const onImagePasteMock = vi.fn();
+    render(<ChatInput onSubmit={onSubmitMock} onImagePaste={onImagePasteMock} />);
+    const textarea = screen.getByRole("textbox");
+
+    // Create a mock image file
+    const imageFile = new File([''], 'test.png', { type: 'image/png' });
+    const clipboardData = {
+      files: [imageFile],
+      getData: () => '',
+    };
+
+    // Simulate paste event
+    fireEvent.paste(textarea, { clipboardData });
+
+    // onImagePaste should be called with the image file
+    expect(onImagePasteMock).toHaveBeenCalledWith([imageFile]);
+  });
 });

frontend/src/components/chat-input.tsx

@@ -48,25 +48,11 @@ export function ChatInput({
       if (files.length > 0) {
         event.preventDefault();
         onImagePaste(files);
-        return;
       }
     }
 
-    // Handle text paste
-    const text = event.clipboardData.getData('text');
-    if (text && textareaRef.current) {
-      event.preventDefault();
-      const start = textareaRef.current.selectionStart;
-      const end = textareaRef.current.selectionEnd;
-      const currentValue = textareaRef.current.value;
-      const newValue = currentValue.substring(0, start) + text + currentValue.substring(end);
-      textareaRef.current.value = newValue;
-      // Update cursor position
-      const newPosition = start + text.length;
-      textareaRef.current.setSelectionRange(newPosition, newPosition);
-      // Trigger onChange if provided
-      onChange?.(newValue);
-    }
+    // For text paste, let the default behavior handle it
+    // The onChange handler will be called automatically
   };
 
   const handleDragOver = (event: React.DragEvent<HTMLTextAreaElement>) => {