LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 00:23:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(chat): prevent attachment drag from triggering upload dropzone

Browse Source
This commit is contained in:
Nikunj Kohli
2025-10-27 15:36:11 +05:30
parent a1a0387744
commit dd4b96256c
1 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/MessageInput.tsx
View File

@@ -271,9 +271,12 @@ export default function MessageInput({
// no preview object URLs to revoke (preview removed per reviewer request)
const findIndexById = (id: string) => attachments.findIndex((a) => a.id === id);
const findIndexById = (id: string) =>
attachments.findIndex((a) => a.id === id);
const handleDragStart = (e: React.DragEvent, id: string) => {
// Prevent parent dropzones from reacting to this drag
e.stopPropagation();
setDraggingId(id);
try {
e.dataTransfer.setData('text/plain', id);
@@ -284,11 +287,15 @@ export default function MessageInput({
};
const handleDragOver = (e: React.DragEvent) => {
// Prevent parent dropzones from triggering
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
};
const handleDropOn = (e: React.DragEvent, targetId: string) => {
// Prevent parent dropzones from handling this drop
e.stopPropagation();
e.preventDefault();
const sourceId = e.dataTransfer.getData('text/plain');
if (!sourceId || sourceId === targetId) return;
@@ -301,6 +308,12 @@ export default function MessageInput({
setDraggingId(null);
};
const handleDragEnd = (e: React.DragEvent) => {
// ensure drag state cleared and do not bubble
e.stopPropagation();
setDraggingId(null);
};
return (
<div className="flex w-full flex-col">
<div className="border-dark-gray bg-lotion dark:border-grey relative flex w-full flex-col rounded-[23px] border dark:bg-transparent">
@@ -311,11 +324,14 @@ export default function MessageInput({
key={attachment.id}
draggable={true}
onDragStart={(e) => handleDragStart(e, attachment.id)}
onDragEnd={handleDragEnd}
onDragOver={handleDragOver}
onDrop={(e) => handleDropOn(e, attachment.id)}
className={`group dark:text-bright-gray relative flex items-center rounded-xl bg-[#EFF3F4] px-2 py-1 text-[12px] text-[#5D5D5D] sm:px-3 sm:py-1.5 sm:text-[14px] dark:bg-[#393B3D] ${
attachment.status !== 'completed' ? 'opacity-70' : 'opacity-100'
} ${draggingId === attachment.id ? 'opacity-60 ring-2 ring-dashed ring-purple-200' : ''}`}
attachment.status !== 'completed'
? 'opacity-70'
: 'opacity-100'
} ${draggingId === attachment.id ? 'ring-dashed opacity-60 ring-2 ring-purple-200' : ''}`}
title={attachment.fileName}
>
<div className="bg-purple-30 mr-2 flex h-8 w-8 items-center justify-center rounded-md p-1">