[front] - enh(InputBarAttachmentsPicker): styling (#11462)

* [assistant/conversation] - refactor: enhance input bar attachments picker UI and functionality

 - Redesigned the attachments picker dropdown width for consistency
 - Integrated a file input for multiple file uploads directly within the dropdown menu
 - Removed the old upload button and related elements outside of the search area
 - Provided visual feedback for data sources with the insertion of connector provider logos
 - Updated the `@dust-tt/sparkle` package to a newer version for potential improvements and fixes

* fix: lint/format

Author: JulesBelveze

front/components/assistant/conversation/input_bar/InputBarAttachmentsPicker.tsx

@@ -16,6 +16,7 @@ import {
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import type { FileUploaderService } from "@app/hooks/useFileUploaderService";
+import { getConnectorProviderLogoWithFallback } from "@app/lib/connector_providers";
 import {
   getLocationForDataSourceViewContentNode,
   getVisualForDataSourceViewContentNode,
@@ -115,23 +116,44 @@ export const InputBarAttachmentsPicker = ({
         />
       </DropdownMenuTrigger>
       <DropdownMenuContent
-        className="w-125"
+        className="w-100"
         side="bottom"
         onInteractOutside={() => setIsOpen(false)}
       >
-        <div className="items-end pb-2">
-          <DropdownMenuSearchbar
-            ref={searchbarRef}
-            name="search-files"
-            placeholder="Search knowledge or attach files"
-            value={search}
-            onChange={setSearch}
-            disabled={isLoading}
-          />
-          <DropdownMenuSeparator />
-          <ScrollArea className="flex max-h-96 flex-col" hideScrollBar>
-            {showSearchResults ? (
-              <div className="pt-2">
+        <Input
+          type="file"
+          ref={fileInputRef}
+          style={{ display: "none" }}
+          onChange={async (e) => {
+            setIsOpen(false);
+            await fileUploaderService.handleFileChange(e);
+            if (fileInputRef.current) {
+              fileInputRef.current.value = "";
+            }
+          }}
+          multiple={true}
+        />
+        <DropdownMenuItem
+          key="upload-item"
+          label="Upload file"
+          icon={CloudArrowUpIcon}
+          onClick={() => fileInputRef.current?.click()}
+        />
+        <DropdownMenuSeparator />
+        <DropdownMenuSearchbar
+          ref={searchbarRef}
+          name="search-files"
+          placeholder="Search knowledge or attach files"
+          value={search}
+          onChange={setSearch}
+          disabled={isLoading}
+        />
+
+        {showSearchResults && (
+          <>
+            <DropdownMenuSeparator />
+            <ScrollArea className="flex max-h-96 flex-col" hideScrollBar>
+              <div className="pt-0">
                 {unfoldedNodes.length > 0 ? (
                   unfoldedNodes.map((item, index) => (
                     <DropdownMenuItem
@@ -142,6 +164,10 @@ export const InputBarAttachmentsPicker = ({
                           className: "min-w-4",
                         })
                       }
+                      extraIcon={getConnectorProviderLogoWithFallback({
+                        provider:
+                          item.dataSourceView.dataSource.connectorProvider,
+                      })}
                       disabled={
                         atachedNodeIds.includes(item.internalId) ||
                         item.type !== "document"
@@ -164,32 +190,10 @@ export const InputBarAttachmentsPicker = ({
                   </div>
                 )}
               </div>
-            ) : (
-              <div className="flex flex-col items-end gap-4 pr-1">
-                <Input
-                  type="file"
-                  ref={fileInputRef}
-                  style={{ display: "none" }}
-                  onChange={async (e) => {
-                    setIsOpen(false);
-                    await fileUploaderService.handleFileChange(e);
-                    if (fileInputRef.current) {
-                      fileInputRef.current.value = "";
-                    }
-                  }}
-                  multiple={true}
-                />
-                <Button
-                  onClick={() => fileInputRef.current?.click()}
-                  disabled={isLoading}
-                  icon={CloudArrowUpIcon}
-                  label="Upload file"
-                />
-              </div>
-            )}
-            <ScrollBar className="py-0" />
-          </ScrollArea>
-        </div>
+              <ScrollBar className="py-0" />
+            </ScrollArea>
+          </>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );

front/package-lock.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@auth0/nextjs-auth0": "^3.5.0",
     "@dust-tt/client": "file:../sdks/js",
-    "@dust-tt/sparkle": "^0.2.441",
+    "@dust-tt/sparkle": "^0.2.442",
     "@google-cloud/bigquery": "^7.9.1",
     "@google-cloud/storage-transfer": "^3.6.0",
     "@heroicons/react": "^2.0.11",