[Fix] Dragging files into the chat input fails unless Shift is held

webview-ui/src/components/chat/ChatTextArea.tsx

@@ -36,6 +36,22 @@ import { ZooCodeAuthBadge } from "./ZooCodeAuthBadge"
 import { usePromptHistory } from "./hooks/usePromptHistory"
 import { disabledChatControlClassName, enabledChatControlClassName } from "./chatControlStyles"
 
+// Data transfer types that signal a file-oriented drag rather than an in-webview
+// text selection drag. "Files" covers drags from the OS file manager; the
+// remaining types are set by VS Code when dragging resources from the Explorer
+// or editor tabs, in local and remote workspaces alike (see fillEditorsDragData
+// in VS Code's workbench drag-and-drop code).
+const FILE_DRAG_DATA_TRANSFER_TYPES = [
+	"Files",
+	"text/uri-list",
+	"ResourceURIs",
+	"application/vnd.code.files",
+	"application/vnd.code.uri-list",
+]
+
+const isFileDrag = (dataTransfer: DataTransfer): boolean =>
+	FILE_DRAG_DATA_TRANSFER_TYPES.some((type) => dataTransfer.types.includes(type))
+
 interface ChatTextAreaProps {
 	inputValue: string
 	setInputValue: (value: string) => void
@@ -967,8 +983,11 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						className={cn("chat-text-area", !isEditMode && "relative", "flex", "flex-col", "outline-none")}
 						onDrop={handleDrop}
 						onDragOver={(e) => {
-							// Only allowed to drop images/files on shift key pressed.
-							if (!e.shiftKey) {
+							// Accept file drags from the OS file manager, the VS Code
+							// Explorer, and editor tabs without requiring Shift. In-webview
+							// text drags, such as moving a selection inside the input, keep
+							// the browser's native drop behavior unless Shift is held.
+							if (!e.shiftKey && !isFileDrag(e.dataTransfer)) {
 								setIsDraggingOver(false)
 								return
 							}

webview-ui/src/components/chat/__tests__/ChatTextArea.spec.tsx

@@ -521,6 +521,64 @@ describe("ChatTextArea", () => {
 			expect(setInputValue).not.toHaveBeenCalled()
 		})
 
+		describe("dragover acceptance", () => {
+			// jsdom has no DragEvent constructor, so build a plain cancelable
+			// Event and attach the drag payload the React handler expects.
+			const fireDragOver = (element: Element, types: string[], shiftKey = false) => {
+				const event = new Event("dragover", { bubbles: true, cancelable: true })
+				Object.defineProperty(event, "dataTransfer", {
+					value: { types, files: [], dropEffect: "none" },
+				})
+				Object.defineProperty(event, "shiftKey", { value: shiftKey })
+				fireEvent(element, event)
+				return event
+			}
+
+			it("accepts VS Code Explorer file drags without holding Shift", () => {
+				const { container } = render(<ChatTextArea {...defaultProps} />)
+
+				const event = fireDragOver(
+					container.querySelector(".chat-text-area")!,
+					["text/plain", "ResourceURIs", "application/vnd.code.uri-list", "text/uri-list"],
+					false,
+				)
+
+				expect(event.defaultPrevented).toBe(true)
+			})
+
+			it("accepts OS file manager drags without holding Shift", () => {
+				const { container } = render(<ChatTextArea {...defaultProps} />)
+
+				const event = fireDragOver(container.querySelector(".chat-text-area")!, ["Files"], false)
+
+				expect(event.defaultPrevented).toBe(true)
+			})
+
+			it.each(["text/uri-list", "application/vnd.code.files"])("accepts %s drags without Shift", (type) => {
+				const { container } = render(<ChatTextArea {...defaultProps} />)
+
+				const event = fireDragOver(container.querySelector(".chat-text-area")!, [type], false)
+
+				expect(event.defaultPrevented).toBe(true)
+			})
+
+			it("keeps the browser's native behavior for plain text drags without Shift", () => {
+				const { container } = render(<ChatTextArea {...defaultProps} />)
+
+				const event = fireDragOver(container.querySelector(".chat-text-area")!, ["text/plain"], false)
+
+				expect(event.defaultPrevented).toBe(false)
+			})
+
+			it("still accepts plain text drags when Shift is held", () => {
+				const { container } = render(<ChatTextArea {...defaultProps} />)
+
+				const event = fireDragOver(container.querySelector(".chat-text-area")!, ["text/plain"], true)
+
+				expect(event.defaultPrevented).toBe(true)
+			})
+		})
+
 		describe("prompt history navigation", () => {
 			const mockClineMessages = [
 				{ type: "say", say: "user_feedback", text: "First prompt", ts: 1000 },