[extension] Improve drag and drop handling, various fixes (#8707)

* Improve drag and drop handling, various fixes * cleaned params * lint * revert extraction changes
dust-tt · Nov 18, 2024 · 568ada6 · 568ada6
1 parent 7c8d09a
commit 568ada6
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 39 deletions.
diff --git a/extension/app/background.ts b/extension/app/background.ts
@@ -55,12 +55,12 @@ chrome.runtime.onInstalled.addListener(() => {
   chrome.contextMenus.create({
     id: "add_tab_content",
     title: "Add tab content to conversation",
-    contexts: ["page"],
+    contexts: ["all"],
   });
   chrome.contextMenus.create({
     id: "add_tab_screenshot",
     title: "Add tab screenshot to conversation",
-    contexts: ["page"],
+    contexts: ["all"],
   });
 
   chrome.contextMenus.create({

diff --git a/extension/app/src/components/DropzoneContainer.tsx b/extension/app/src/components/DropzoneContainer.tsx
@@ -5,7 +5,7 @@ import {
   supportedImage,
   supportedPlainText,
 } from "@dust-tt/client";
-import { DropzoneOverlay } from "@dust-tt/sparkle";
+import { DropzoneOverlay, useSendNotification } from "@dust-tt/sparkle";
 import { useFileDrop } from "@extension/components/conversation/FileUploaderContext";
 import { useEffect } from "react";
 import { useDropzone } from "react-dropzone";
@@ -30,6 +30,23 @@ const generateFileName = (blob: Blob) => {
   return `${name}${extension}`;
 };
 
+const getDroppedUrl = (dataTransfer: DataTransfer) => {
+  const textHtml = dataTransfer.getData("text/html");
+  const droppedUrl = dataTransfer.getData("text/uri-list");
+  if (textHtml) {
+    const div = document.createElement("div");
+    div.innerHTML = textHtml;
+
+    const url = div.querySelector("img")?.src || div.querySelector("a")?.href;
+    div.remove();
+
+    if (url) {
+      return url;
+    }
+  }
+  return droppedUrl;
+};
+
 export function DropzoneContainer({
   children,
   description,
@@ -41,6 +58,8 @@ export function DropzoneContainer({
     setDroppedFiles(acceptedFiles);
   };
 
+  const sendNotification = useSendNotification();
+
   const { getRootProps, isDragActive } = useDropzone({
     onDrop,
     noClick: true, // Prevent default click behavior.
@@ -53,23 +72,38 @@ export function DropzoneContainer({
       const element = rootProps.ref.current;
       const listener = async (e: React.DragEvent) => {
         if (e.dataTransfer) {
-          const droppedUrl = e.dataTransfer.getData("text/uri-list");
+          const droppedUrl = getDroppedUrl(e.dataTransfer);
           if (droppedUrl) {
             const response = await fetch(droppedUrl);
             const blob = await response.blob();
-
-            if (isSupportedFileContentType(blob.type)) {
-              const filename = droppedUrl.startsWith("data:")
-                ? generateFileName(blob)
-                : decodeURIComponent(
-                    droppedUrl.split("/").pop() || generateFileName(blob)
-                  );
-
+            const filename = droppedUrl.startsWith("data:")
+              ? generateFileName(blob)
+              : decodeURIComponent(
+                  droppedUrl.split("/").pop() || generateFileName(blob)
+                );
+            if (blob.type === "text/html") {
+              const text = await blob.text();
+              const div = document.createElement("div");
+              div.innerHTML = text;
+              const textBlob = new Blob([div.textContent || ""], {
+                type: "text/plain",
+              });
+              div.remove();
+              const file = new File([textBlob], `${filename}.txt`, {
+                type: textBlob.type,
+              });
+              onDrop([file]);
+            } else if (isSupportedFileContentType(blob.type)) {
               const file = new File([blob], filename, {
                 type: blob.type,
               });
-
               onDrop([file]);
+            } else {
+              sendNotification({
+                description: "Unsupported file type : " + blob.type,
+                title: "Unsupported file type",
+                type: "error",
+              });
             }
           }
         }

diff --git a/extension/app/src/components/input_bar/InputBar.tsx b/extension/app/src/components/input_bar/InputBar.tsx
@@ -55,9 +55,7 @@ export function AssistantInputBar({
   const { agentConfigurations: baseAgentConfigurations } =
     usePublicAgentConfigurations();
 
-  const fileUploaderService = useFileUploaderService({
-    owner,
-  });
+  const fileUploaderService = useFileUploaderService();
 
   const port = useContext(PortContext);
   useEffect(() => {

diff --git a/extension/app/src/hooks/useFileUploaderService.ts b/extension/app/src/hooks/useFileUploaderService.ts
@@ -1,6 +1,5 @@
 import type {
   ConversationPublicType,
-  LightWorkspaceType,
   Result,
   SupportedFileContentType,
 } from "@dust-tt/client";
@@ -50,11 +49,7 @@ export const MAX_FILE_SIZES: Record<"plainText" | "image", number> = {
 const COMBINED_MAX_TEXT_FILES_SIZE = MAX_FILE_SIZES["plainText"] * 2;
 const COMBINED_MAX_IMAGE_FILES_SIZE = MAX_FILE_SIZES["image"] * 5;
 
-export function useFileUploaderService({
-  owner,
-}: {
-  owner: LightWorkspaceType;
-}) {
+export function useFileUploaderService() {
   const [fileBlobs, setFileBlobs] = useState<FileBlob[]>([]);
   const [isProcessingFiles, setIsProcessingFiles] = useState(false);
   const sendNotification = useSendNotification();
@@ -241,13 +236,10 @@ export function useFileUploaderService({
         prevFiles.filter((f) => f.fileId !== fileBlob?.fileId)
       );
 
-      // Intentionally not awaiting the fetch call to allow it to run asynchronously.
-      void fetch(`/api/w/${owner.sId}/files/${fileBlob.fileId}`, {
-        method: "DELETE",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
+      if (fileBlob.fileId) {
+        // Intentionally not awaiting the fetch call to allow it to run asynchronously.
+        void dustAPI.deleteFile(fileBlob.fileId);
+      }
 
       const allFilesReady = fileBlobs.every((f) => f.isUploading === false);
       if (allFilesReady && isProcessingFiles) {

diff --git a/extension/app/src/pages/RunPage.tsx b/extension/app/src/pages/RunPage.tsx
@@ -1,19 +1,16 @@
-import type { LightWorkspaceType } from "@dust-tt/client";
 import { Spinner } from "@dust-tt/sparkle";
 import { useFileUploaderService } from "@extension/hooks/useFileUploaderService";
 import { postConversation } from "@extension/lib/conversation";
 import { useDustAPI } from "@extension/lib/dust_api";
 import { useEffect } from "react";
 import { useLocation, useNavigate } from "react-router";
 
-export const RunPage = ({ workspace }: { workspace: LightWorkspaceType }) => {
+export const RunPage = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const dustAPI = useDustAPI();
 
-  const fileUploaderService = useFileUploaderService({
-    owner: workspace,
-  });
+  const fileUploaderService = useFileUploaderService();
 
   useEffect(() => {
     const run = async () => {

diff --git a/extension/app/src/pages/routes.tsx b/extension/app/src/pages/routes.tsx
@@ -54,10 +54,6 @@ export const routes = [
   },
   {
     path: "/run",
-    element: (
-      <ProtectedRoute>
-        {({ workspace }) => <RunPage workspace={workspace} />}
-      </ProtectedRoute>
-    ),
+    element: <ProtectedRoute>{() => <RunPage />}</ProtectedRoute>,
   },
 ];
diff --git a/sdks/js/src/index.ts b/sdks/js/src/index.ts
@@ -842,6 +842,15 @@ export class DustAPI {
     return new Ok(fileUploaded);
   }
 
+  async deleteFile(fileID: string) {
+    const res = await this.request({
+      method: "DELETE",
+      path: `files/${fileID}`,
+    });
+
+    return res;
+  }
+
   async getActiveMemberEmailsInWorkspace() {
     const res = await this.request({
       method: "GET",