From 3792ccb0055d2b92fa699a7c8c9ff2e378658dbe Mon Sep 17 00:00:00 2001
From: Jules Belveze <32683010+JulesBelveze@users.noreply.github.com>
Date: Thu, 5 Dec 2024 16:34:46 +0100
Subject: [PATCH] [front] - chore: upgrade sparkle (#9150)

* [front] - refactor: update @dust-tt/sparkle and remove container queries dependency

 - Update the @dust-tt/sparkle package to version 0.2.334-rc-1
 - Remove the deprecated @tailwindcss/container-queries package following the update

[front/components/spaces] - fix: adjust paddingRight in SpaceSideBarMenu

 - Add a paddingRight of 1 to the div in SpaceSideBarMenu for better spacing in UI elements

* [front/components/assistant] - fix: adjust scroll area in AssistantPicker component

 - Hide the default scroll bar in the assistant picker dropdown
 - Include a custom ScrollBar component for better UI consistency

[front] - refactor: update @dust-tt/sparkle package to new release candidate

 - Bump the version of the @dust-tt/sparkle package to incorporate latest changes and fixes

* [front] - feature: update @dust-tt/sparkle dependency to 0.2.336

 - Upgrade the @dust-tt/sparkle package from version 0.2.334-rc-2 to version 0.2.336
 - Update package-lock.json to reflect the new version's resolved URL and integrity SHA

* fix: lint/format

* [front] - refactor: improve styling and scrolling in AssistantPicker

 - Changed ScrollArea to a flex column with a maximum height and automatic overflow-y to enhance user experience
 - ScrollBar is now hidden to provide a cleaner look in the AssistantPicker component

* fix: lint/format
---
 front/components/assistant/AssistantPicker.tsx |  7 ++++++-
 front/components/spaces/SpaceSideBarMenu.tsx   |  2 +-
 front/package-lock.json                        | 17 ++++-------------
 front/package.json                             |  2 +-
 4 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/front/components/assistant/AssistantPicker.tsx b/front/components/assistant/AssistantPicker.tsx
index 9f20314e7ea9..7ba2f96a83ff 100644
--- a/front/components/assistant/AssistantPicker.tsx
+++ b/front/components/assistant/AssistantPicker.tsx
@@ -10,6 +10,7 @@ import {
   PlusIcon,
   RobotIcon,
   ScrollArea,
+  ScrollBar,
 } from "@dust-tt/sparkle";
 import type {
   LightAgentConfigurationType,
@@ -81,7 +82,10 @@ export function AssistantPicker({
           }}
         />
         <DropdownMenuSeparator />
-        <ScrollArea className="border-1 -mb-1 -mt-1 h-[300px]">
+        <ScrollArea
+          className="flex max-h-[300px] flex-col overflow-y-auto"
+          hideScrollBar
+        >
           {searchedAssistants.map((c) => (
             <DropdownMenuItem
               key={`assistant-picker-${c.sId}`}
@@ -93,6 +97,7 @@ export function AssistantPicker({
               }}
             />
           ))}
+          <ScrollBar className="py-0" />
         </ScrollArea>
         <DropdownMenuSeparator />
         {showFooterButtons && (
diff --git a/front/components/spaces/SpaceSideBarMenu.tsx b/front/components/spaces/SpaceSideBarMenu.tsx
index a2d1cc27b8ca..cfe0a46bd396 100644
--- a/front/components/spaces/SpaceSideBarMenu.tsx
+++ b/front/components/spaces/SpaceSideBarMenu.tsx
@@ -140,7 +140,7 @@ export default function SpaceSideBarMenu({
 
               return (
                 <Fragment key={`space-section-${index}`}>
-                  <div className="flex items-center justify-between">
+                  <div className="flex items-center justify-between pr-1">
                     <NavigationListLabel
                       label={sectionDetails.label}
                       variant="secondary"
diff --git a/front/package-lock.json b/front/package-lock.json
index d0b48d434ff2..e4d52f312c24 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -7,7 +7,7 @@
       "dependencies": {
         "@auth0/nextjs-auth0": "^3.5.0",
         "@dust-tt/client": "file:../sdks/js",
-        "@dust-tt/sparkle": "^0.2.332",
+        "@dust-tt/sparkle": "^0.2.336",
         "@dust-tt/types": "file:../types",
         "@headlessui/react": "^1.7.7",
         "@heroicons/react": "^2.0.11",
@@ -11486,9 +11486,9 @@
       "link": true
     },
     "node_modules/@dust-tt/sparkle": {
-      "version": "0.2.332",
-      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.332.tgz",
-      "integrity": "sha512-6m26Q51zpY/Z2CdVuDvGzIT6z57McAgRU+bLcFt7uzCmGo/8INv37LnZ/2+whzeFjGORsjj5xb9PDn2GIZhlXQ==",
+      "version": "0.2.336",
+      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.336.tgz",
+      "integrity": "sha512-5Un1MxSPPHwvqfaA1w9j8s0tuqOF42LNUAbfNHc+e6xc0Fk/xM2fnPpWAGYE897hZtXmCUs6kUXUNsae5E+0WA==",
       "dependencies": {
         "@emoji-mart/data": "^1.1.2",
         "@emoji-mart/react": "^1.1.1",
@@ -11505,7 +11505,6 @@
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-tabs": "^1.1.1",
         "@radix-ui/react-tooltip": "^1.1.3",
-        "@tailwindcss/container-queries": "^0.1.1",
         "@tanstack/react-table": "^8.13.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
@@ -17982,14 +17981,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@tailwindcss/container-queries": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
-      "integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==",
-      "peerDependencies": {
-        "tailwindcss": ">=3.2.0"
-      }
-    },
     "node_modules/@tailwindcss/forms": {
       "version": "0.5.6",
       "license": "MIT",
diff --git a/front/package.json b/front/package.json
index 63618a187455..7727426d492f 100644
--- a/front/package.json
+++ b/front/package.json
@@ -20,7 +20,7 @@
   "dependencies": {
     "@auth0/nextjs-auth0": "^3.5.0",
     "@dust-tt/client": "file:../sdks/js",
-    "@dust-tt/sparkle": "^0.2.332",
+    "@dust-tt/sparkle": "^0.2.336",
     "@dust-tt/types": "file:../types",
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.11",