Use DropzoneOverlay (#6175)

front/components/assistant/conversation/ConversationContainer.tsx

@@ -244,7 +244,10 @@ export function ConversationContainer({
   );
 
   return (
-    <DropzoneContainer dropMessage="Drag and drop files here to include them in the conversation.">
+    <DropzoneContainer
+      description="Drag and drop your text files (txt, doc, pdf) and image files (jpg, png) here."
+      title="Attach files to the conversation"
+    >
       <Transition
         show={!!activeConversationId}
         as={Fragment}

front/components/misc/DropzoneContainer.tsx

@@ -1,16 +1,18 @@
-import { ArrowDownOnSquareIcon, Icon } from "@dust-tt/sparkle";
+import { DropzoneOverlay } from "@dust-tt/sparkle";
 import { useDropzone } from "react-dropzone";
 
 import { useFileDrop } from "@app/components/assistant/conversation/FileUploaderContext";
 
 interface DropzoneContainerProps {
   children: React.ReactNode;
-  dropMessage: string;
+  description: string;
+  title: string;
 }
 
 export function DropzoneContainer({
   children,
-  dropMessage,
+  description,
+  title,
 }: DropzoneContainerProps) {
   const { setDroppedFiles } = useFileDrop();
 
@@ -28,12 +30,11 @@ export function DropzoneContainer({
       {...getRootProps()}
       className="flex h-full w-full flex-col items-center"
     >
-      {isDragActive && (
-        <div className="absolute inset-0 z-50 flex items-center justify-center bg-blue-100 bg-opacity-80 text-element-700">
-          <Icon visual={ArrowDownOnSquareIcon} />
-          <p className="text-lg font-semibold">{dropMessage}</p>
-        </div>
-      )}
+      <DropzoneOverlay
+        description={description}
+        isDragActive={isDragActive}
+        title={title}
+      />
       {children}
     </div>
   );

front/package.json

@@ -21,7 +21,7 @@
     "@amplitude/analytics-browser": "^2.5.2",
     "@amplitude/analytics-node": "^1.3.5",
     "@auth0/nextjs-auth0": "^3.5.0",
-    "@dust-tt/sparkle": "^0.2.189",
+    "@dust-tt/sparkle": "^0.2.190",
     "@dust-tt/types": "file:../types",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",