From f28b7ebeb9b635173cdf1d12e2b6293fd1e34cd9 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Wed, 7 Aug 2024 13:14:46 -0700
Subject: [PATCH] DragDrop: extraction done

---
 .../chat/components/composer/useComposerDragDrop.tsx     | 2 +-
 src/common/components/useDragDropDataTransfer.tsx        | 9 ++++++++-
 src/common/livefile/LiveFileSyncButton.tsx               | 4 +++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/apps/chat/components/composer/useComposerDragDrop.tsx b/src/apps/chat/components/composer/useComposerDragDrop.tsx
index 246bb4453..f6133067f 100644
--- a/src/apps/chat/components/composer/useComposerDragDrop.tsx
+++ b/src/apps/chat/components/composer/useComposerDragDrop.tsx
@@ -43,5 +43,5 @@ export function useComposerDragDrop(
 
   }, [onDataTransfer]);
 
-  return useDragDropDataTransfer(enabled, 'I will hold on to this for you.', AttachFileRoundedIcon as typeof SvgIcon, 'largeIcon', handleComposerDrop);
+  return useDragDropDataTransfer(enabled, 'I will hold on to this for you.', AttachFileRoundedIcon as typeof SvgIcon, 'largeIcon', false, handleComposerDrop);
 }
diff --git a/src/common/components/useDragDropDataTransfer.tsx b/src/common/components/useDragDropDataTransfer.tsx
index c3a36f066..2a9dec791 100644
--- a/src/common/components/useDragDropDataTransfer.tsx
+++ b/src/common/components/useDragDropDataTransfer.tsx
@@ -43,6 +43,7 @@ export function useDragDropDataTransfer(
   dropText: string, // that the button says
   DropIcon: typeof SvgIcon | null, // icon on the button
   dropVariant: 'largeIcon' | 'startDecorator',
+  acceptOnlyFiles: boolean,
   onDropCallback: (dataTransfer: DataTransfer) => Promise<any>,
 ) {
 
@@ -60,13 +61,19 @@ export function useDragDropDataTransfer(
 
   const handleContainerDragEnter = React.useCallback((event: React.DragEvent) => {
     const isFromSelf = event.dataTransfer.types.includes(EXCLUDE_SELF_TYPE);
+    if (acceptOnlyFiles) {
+      const hasFiles = Array.from(event.dataTransfer.items).some(item => item.kind === 'file');
+      if (!hasFiles)
+        return;
+    }
     if (!isFromSelf) {
       _eatDragEvent(event);
       setIsDragging(true);
     }
-  }, [_eatDragEvent]);
+  }, [_eatDragEvent, acceptOnlyFiles]);
 
   const handleContainerDragStart = React.useCallback((event: React.DragEvent) => {
+    // This is for drags that originate from the container (e.g. anything within the Textarea's surroundings in Composer)
     event.dataTransfer.setData(EXCLUDE_SELF_TYPE, 'do-not-intercept');
   }, []);
 
diff --git a/src/common/livefile/LiveFileSyncButton.tsx b/src/common/livefile/LiveFileSyncButton.tsx
index eb14345bd..e83c387c4 100644
--- a/src/common/livefile/LiveFileSyncButton.tsx
+++ b/src/common/livefile/LiveFileSyncButton.tsx
@@ -17,6 +17,8 @@ export function LiveFileSyncButton(props: {
 }) {
 
   const handleDataTransfer = React.useCallback(async (dataTransfer: DataTransfer) => {
+
+
     console.log('LiveFileSyncButton: handleDataTransfer', dataTransfer);
   }, []);
 
@@ -25,7 +27,7 @@ export function LiveFileSyncButton(props: {
     dropComponent,
     handleContainerDragEnter,
     handleContainerDragStart,
-  } = useDragDropDataTransfer(true, 'Pair', UploadFileRoundedIcon as typeof SvgIcon, 'startDecorator', handleDataTransfer);
+  } = useDragDropDataTransfer(true, 'Pair', UploadFileRoundedIcon as typeof SvgIcon, 'startDecorator', true, handleDataTransfer);
 
   return (
     <Box