DragDrop: extraction done

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);
 }

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');
   }, []);
 

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