From a147daa7a63f2c89f9daa3ee22d9c480d885d9d3 Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Tue, 26 Nov 2024 15:02:23 +0100
Subject: [PATCH 1/7] [front] - fix: adjust conversation sidebar padding and
 scroll area

 - Remove left padding from the conversation sidebar container for a cleaner layout
 - Add horizontal padding within the scroll area for better content spacing and readability
---
 front/components/assistant/conversation/SidebarMenu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/front/components/assistant/conversation/SidebarMenu.tsx b/front/components/assistant/conversation/SidebarMenu.tsx
index 0675dbc87cb0..a1a5c35cba73 100644
--- a/front/components/assistant/conversation/SidebarMenu.tsx
+++ b/front/components/assistant/conversation/SidebarMenu.tsx
@@ -201,7 +201,7 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
         )}
       >
         <div className="flex h-0 min-h-full w-full overflow-y-auto">
-          <div className="flex w-full flex-col pl-2">
+          <div className="flex w-full flex-col">
             {isMultiSelect ? (
               <div className="flex w-full items-center justify-end py-2 pr-2">
                 <Button
@@ -284,7 +284,7 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
               </Label>
             )}
             <Separator />
-            <ScrollArea className="w-full">
+            <ScrollArea className="w-full px-2">
               {conversationsByDate &&
                 Object.keys(conversationsByDate).map((dateLabel) => (
                   <RenderConversations

From 7567abaf1ad8d734b80740eb5154b56a138a5ea8 Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Tue, 26 Nov 2024 17:11:50 +0100
Subject: [PATCH 2/7] [assistant/conversation] - refactor: streamline
 multi-select actions in SidebarMenu

- Consolidated action buttons for multi-select mode to improve accessibility and interface consistency
- Added a shadow box style to enhance visual separation of action buttons from conversation list
---
 .../assistant/conversation/SidebarMenu.tsx    | 151 +++++++++---------
 1 file changed, 77 insertions(+), 74 deletions(-)

diff --git a/front/components/assistant/conversation/SidebarMenu.tsx b/front/components/assistant/conversation/SidebarMenu.tsx
index a1a5c35cba73..9752ebf0e903 100644
--- a/front/components/assistant/conversation/SidebarMenu.tsx
+++ b/front/components/assistant/conversation/SidebarMenu.tsx
@@ -202,88 +202,91 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
       >
         <div className="flex h-0 min-h-full w-full overflow-y-auto">
           <div className="flex w-full flex-col">
-            {isMultiSelect ? (
-              <div className="flex w-full items-center justify-end py-2 pr-2">
-                <Button
-                  size="xs"
-                  variant="outline"
-                  icon={XMarkIcon}
-                  onClick={toggleMultiSelect}
-                  className="mr-2"
-                />
-                <Button
-                  icon={TrashIcon}
-                  size="xs"
-                  variant={
-                    selectedConversations.length === 0 ? "outline" : "warning"
-                  }
-                  tooltip="Delete conversations"
-                  disabled={selectedConversations.length === 0}
-                  onClick={() => setShowDeleteDialog("selection")}
-                />
-              </div>
-            ) : (
-              <div className={classNames("flex justify-end gap-2 py-2 pr-2")}>
-                <Button
-                  href={`/w/${owner.sId}/assistant/new`}
-                  label="New"
-                  icon={ChatBubbleBottomCenterPlusIcon}
-                  className="shrink"
-                  tooltip="Create a new conversation"
-                  onClick={() => {
-                    setSidebarOpen(false);
-                    const { cId } = router.query;
-                    const isNewConversation =
-                      router.pathname === "/w/[wId]/assistant/[cId]" &&
-                      typeof cId === "string" &&
-                      cId === "new";
-
-                    if (isNewConversation && triggerInputAnimation) {
-                      triggerInputAnimation();
+            <div
+              className="z-50 flex justify-end gap-2 py-2 pr-2"
+              style={{ boxShadow: "0px 0px 12px 12px #F6F8FB" }}
+            >
+              {isMultiSelect ? (
+                <>
+                  <Button
+                    size="xs"
+                    variant={
+                      selectedConversations.length === 0 ? "outline" : "warning"
                     }
-                  }}
-                />
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button size="sm" icon={MoreIcon} variant="outline" />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent>
-                    <DropdownMenuLabel>Assistants</DropdownMenuLabel>
-                    <DropdownMenuItem
-                      label="Create new assistant"
-                      href={`/w/${owner.sId}/builder/assistants/create`}
-                      icon={PlusIcon}
-                    />
-                    {isBuilder(owner) && (
+                    label="Delete"
+                    disabled={selectedConversations.length === 0}
+                    onClick={() => setShowDeleteDialog("selection")}
+                  />
+                  <Button
+                    size="xs"
+                    variant="ghost"
+                    icon={XMarkIcon}
+                    onClick={toggleMultiSelect}
+                    className="mr-2"
+                  />
+                </>
+              ) : (
+                <>
+                  <Button
+                    href={`/w/${owner.sId}/assistant/new`}
+                    label="New"
+                    icon={ChatBubbleBottomCenterPlusIcon}
+                    className="shrink"
+                    tooltip="Create a new conversation"
+                    onClick={() => {
+                      setSidebarOpen(false);
+                      const { cId } = router.query;
+                      const isNewConversation =
+                        router.pathname === "/w/[wId]/assistant/[cId]" &&
+                        typeof cId === "string" &&
+                        cId === "new";
+
+                      if (isNewConversation && triggerInputAnimation) {
+                        triggerInputAnimation();
+                      }
+                    }}
+                  />
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button size="sm" icon={MoreIcon} variant="outline" />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                      <DropdownMenuLabel>Assistants</DropdownMenuLabel>
                       <DropdownMenuItem
-                        href={`/w/${owner.sId}/builder/assistants`}
-                        label="Manage assistants"
-                        icon={RobotIcon}
+                        label="Create new assistant"
+                        href={`/w/${owner.sId}/builder/assistants/create`}
+                        icon={PlusIcon}
                       />
-                    )}
-                    <DropdownMenuLabel>Conversations</DropdownMenuLabel>
-                    <DropdownMenuItem
-                      label="Edit conversations"
-                      onClick={toggleMultiSelect}
-                      icon={ListCheckIcon}
-                      disabled={conversations.length === 0}
-                    />
-                    <DropdownMenuItem
-                      label="Clear conversation history"
-                      onClick={() => setShowDeleteDialog("all")}
-                      icon={TrashIcon}
-                      disabled={conversations.length === 0}
-                    />
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
-            )}
+                      {isBuilder(owner) && (
+                        <DropdownMenuItem
+                          href={`/w/${owner.sId}/builder/assistants`}
+                          label="Manage assistants"
+                          icon={RobotIcon}
+                        />
+                      )}
+                      <DropdownMenuLabel>Conversations</DropdownMenuLabel>
+                      <DropdownMenuItem
+                        label="Edit conversations"
+                        onClick={toggleMultiSelect}
+                        icon={ListCheckIcon}
+                        disabled={conversations.length === 0}
+                      />
+                      <DropdownMenuItem
+                        label="Clear conversation history"
+                        onClick={() => setShowDeleteDialog("all")}
+                        icon={TrashIcon}
+                        disabled={conversations.length === 0}
+                      />
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </>
+              )}
+            </div>
             {isConversationsError && (
               <Label className="py-1 text-xs font-medium text-element-800">
                 Error loading conversations
               </Label>
             )}
-            <Separator />
             <ScrollArea className="w-full px-2">
               {conversationsByDate &&
                 Object.keys(conversationsByDate).map((dateLabel) => (

From 1cec5dd49bd59dab797060bc5340b35daa5267d2 Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Tue, 26 Nov 2024 17:16:27 +0100
Subject: [PATCH 3/7] [front/components/assistant/conversation] - refactor:
 streamline rendering of sidebar menu actions

 - Simplified the conditionals by separating the multi-select and default action views into distinct blocks
 - Removed redundant classes and elements to clean up the UI structure for better maintainability
---
 .../assistant/conversation/SidebarMenu.tsx    | 153 +++++++++---------
 1 file changed, 76 insertions(+), 77 deletions(-)

diff --git a/front/components/assistant/conversation/SidebarMenu.tsx b/front/components/assistant/conversation/SidebarMenu.tsx
index 9752ebf0e903..9bb80c108f77 100644
--- a/front/components/assistant/conversation/SidebarMenu.tsx
+++ b/front/components/assistant/conversation/SidebarMenu.tsx
@@ -202,86 +202,85 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
       >
         <div className="flex h-0 min-h-full w-full overflow-y-auto">
           <div className="flex w-full flex-col">
-            <div
-              className="z-50 flex justify-end gap-2 py-2 pr-2"
-              style={{ boxShadow: "0px 0px 12px 12px #F6F8FB" }}
-            >
-              {isMultiSelect ? (
-                <>
-                  <Button
-                    size="xs"
-                    variant={
-                      selectedConversations.length === 0 ? "outline" : "warning"
-                    }
-                    label="Delete"
-                    disabled={selectedConversations.length === 0}
-                    onClick={() => setShowDeleteDialog("selection")}
-                  />
-                  <Button
-                    size="xs"
-                    variant="ghost"
-                    icon={XMarkIcon}
-                    onClick={toggleMultiSelect}
-                    className="mr-2"
-                  />
-                </>
-              ) : (
-                <>
-                  <Button
-                    href={`/w/${owner.sId}/assistant/new`}
-                    label="New"
-                    icon={ChatBubbleBottomCenterPlusIcon}
-                    className="shrink"
-                    tooltip="Create a new conversation"
-                    onClick={() => {
-                      setSidebarOpen(false);
-                      const { cId } = router.query;
-                      const isNewConversation =
-                        router.pathname === "/w/[wId]/assistant/[cId]" &&
-                        typeof cId === "string" &&
-                        cId === "new";
+            {isMultiSelect ? (
+              <div
+                className="z-50 flex justify-between gap-2 p-2"
+                style={{ boxShadow: "0px 0px 12px 12px #F6F8FB" }}
+              >
+                <Button
+                  variant={
+                    selectedConversations.length === 0 ? "outline" : "warning"
+                  }
+                  label="Delete"
+                  disabled={selectedConversations.length === 0}
+                  onClick={() => setShowDeleteDialog("selection")}
+                />
+                <Button
+                  variant="ghost"
+                  icon={XMarkIcon}
+                  onClick={toggleMultiSelect}
+                  className="mr-2"
+                />
+              </div>
+            ) : (
+              <div
+                className="z-50 flex justify-end gap-2 py-2 pr-2"
+                style={{ boxShadow: "0px 0px 12px 12px #F6F8FB" }}
+              >
+                <Button
+                  href={`/w/${owner.sId}/assistant/new`}
+                  label="New"
+                  icon={ChatBubbleBottomCenterPlusIcon}
+                  className="shrink"
+                  tooltip="Create a new conversation"
+                  onClick={() => {
+                    setSidebarOpen(false);
+                    const { cId } = router.query;
+                    const isNewConversation =
+                      router.pathname === "/w/[wId]/assistant/[cId]" &&
+                      typeof cId === "string" &&
+                      cId === "new";
 
-                      if (isNewConversation && triggerInputAnimation) {
-                        triggerInputAnimation();
-                      }
-                    }}
-                  />
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button size="sm" icon={MoreIcon} variant="outline" />
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent>
-                      <DropdownMenuLabel>Assistants</DropdownMenuLabel>
-                      <DropdownMenuItem
-                        label="Create new assistant"
-                        href={`/w/${owner.sId}/builder/assistants/create`}
-                        icon={PlusIcon}
-                      />
-                      {isBuilder(owner) && (
-                        <DropdownMenuItem
-                          href={`/w/${owner.sId}/builder/assistants`}
-                          label="Manage assistants"
-                          icon={RobotIcon}
-                        />
-                      )}
-                      <DropdownMenuLabel>Conversations</DropdownMenuLabel>
-                      <DropdownMenuItem
-                        label="Edit conversations"
-                        onClick={toggleMultiSelect}
-                        icon={ListCheckIcon}
-                        disabled={conversations.length === 0}
-                      />
+                    if (isNewConversation && triggerInputAnimation) {
+                      triggerInputAnimation();
+                    }
+                  }}
+                />
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button size="sm" icon={MoreIcon} variant="outline" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent>
+                    <DropdownMenuLabel>Assistants</DropdownMenuLabel>
+                    <DropdownMenuItem
+                      label="Create new assistant"
+                      href={`/w/${owner.sId}/builder/assistants/create`}
+                      icon={PlusIcon}
+                    />
+                    {isBuilder(owner) && (
                       <DropdownMenuItem
-                        label="Clear conversation history"
-                        onClick={() => setShowDeleteDialog("all")}
-                        icon={TrashIcon}
-                        disabled={conversations.length === 0}
+                        href={`/w/${owner.sId}/builder/assistants`}
+                        label="Manage assistants"
+                        icon={RobotIcon}
                       />
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </>
-              )}
-            </div>
+                    )}
+                    <DropdownMenuLabel>Conversations</DropdownMenuLabel>
+                    <DropdownMenuItem
+                      label="Edit conversations"
+                      onClick={toggleMultiSelect}
+                      icon={ListCheckIcon}
+                      disabled={conversations.length === 0}
+                    />
+                    <DropdownMenuItem
+                      label="Clear conversation history"
+                      onClick={() => setShowDeleteDialog("all")}
+                      icon={TrashIcon}
+                      disabled={conversations.length === 0}
+                    />
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            )}
             {isConversationsError && (
               <Label className="py-1 text-xs font-medium text-element-800">
                 Error loading conversations

From ff6f6ab2aac729ded7cdc6d667b80bd50a56049d Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Tue, 26 Nov 2024 17:33:28 +0100
Subject: [PATCH 4/7] [front/assistant/conversation] - refactor: remove unused
 Separator import from SidebarMenu

 - Cleanup of SidebarMenu component by removing the import statement for Separator which is no longer used
---
 front/components/assistant/conversation/SidebarMenu.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/front/components/assistant/conversation/SidebarMenu.tsx b/front/components/assistant/conversation/SidebarMenu.tsx
index 9bb80c108f77..0cda26557bf4 100644
--- a/front/components/assistant/conversation/SidebarMenu.tsx
+++ b/front/components/assistant/conversation/SidebarMenu.tsx
@@ -17,7 +17,6 @@ import {
   PlusIcon,
   RobotIcon,
   ScrollArea,
-  Separator,
   TrashIcon,
   XMarkIcon,
 } from "@dust-tt/sparkle";

From 5c171b1435ef4ce41fdb684f444480982b651281 Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Tue, 26 Nov 2024 18:57:46 +0100
Subject: [PATCH 5/7] [front] - refactor: streamline shadow styling in
 SidebarMenu components

 - Replace inline shadow styles with a `shadow-fade` utility class for consistency and maintainability
 - Apply the new `shadow-fade` class to elements within the `SidebarMenu.tsx` file
---
 .../components/assistant/conversation/SidebarMenu.tsx  | 10 ++--------
 front/styles/global.css                                |  5 +++++
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/front/components/assistant/conversation/SidebarMenu.tsx b/front/components/assistant/conversation/SidebarMenu.tsx
index 0cda26557bf4..38b51647a5aa 100644
--- a/front/components/assistant/conversation/SidebarMenu.tsx
+++ b/front/components/assistant/conversation/SidebarMenu.tsx
@@ -202,10 +202,7 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
         <div className="flex h-0 min-h-full w-full overflow-y-auto">
           <div className="flex w-full flex-col">
             {isMultiSelect ? (
-              <div
-                className="z-50 flex justify-between gap-2 p-2"
-                style={{ boxShadow: "0px 0px 12px 12px #F6F8FB" }}
-              >
+              <div className="shadow-fade z-50 flex justify-between gap-2 p-2">
                 <Button
                   variant={
                     selectedConversations.length === 0 ? "outline" : "warning"
@@ -222,10 +219,7 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
                 />
               </div>
             ) : (
-              <div
-                className="z-50 flex justify-end gap-2 py-2 pr-2"
-                style={{ boxShadow: "0px 0px 12px 12px #F6F8FB" }}
-              >
+              <div className="shadow-fade z-50 flex justify-end gap-2 p-2">
                 <Button
                   href={`/w/${owner.sId}/assistant/new`}
                   label="New"
diff --git a/front/styles/global.css b/front/styles/global.css
index fe1d84bf0c3c..1875bc46d94f 100644
--- a/front/styles/global.css
+++ b/front/styles/global.css
@@ -51,6 +51,11 @@ main {
   top: 4px;
 }
 
+.shadow-fade {
+  @apply bg-structure-50;
+  box-shadow: 0 0 12px 12px theme("colors.structure.50.DEFAULT");
+}
+
 @keyframes shake {
   10%,
   90% {

From dc08a7e04ac6b2dd97478f7dd37b1752421dff56 Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Wed, 27 Nov 2024 09:33:20 +0100
Subject: [PATCH 6/7] [front/components/assistant/conversation] - refactor:
 update shadow styling for SidebarMenu

- Replace `shadow-fade` with `shadow-tale` in SidebarMenu for multi-select and action buttons
- Remove deprecated `shadow-fade` styling from global.css

[front/tailwind.config] - feature: add new 'tale' box-shadow to tailwind configuration

- Introduce a new `tale` box-shadow definition to the TailwindCSS configuration for future use in styling
---
 front/components/assistant/conversation/SidebarMenu.tsx | 4 ++--
 front/styles/global.css                                 | 5 -----
 front/tailwind.config.js                                | 1 +
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/front/components/assistant/conversation/SidebarMenu.tsx b/front/components/assistant/conversation/SidebarMenu.tsx
index 38b51647a5aa..769342f68789 100644
--- a/front/components/assistant/conversation/SidebarMenu.tsx
+++ b/front/components/assistant/conversation/SidebarMenu.tsx
@@ -202,7 +202,7 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
         <div className="flex h-0 min-h-full w-full overflow-y-auto">
           <div className="flex w-full flex-col">
             {isMultiSelect ? (
-              <div className="shadow-fade z-50 flex justify-between gap-2 p-2">
+              <div className="shadow-tale z-50 flex justify-between gap-2 p-2">
                 <Button
                   variant={
                     selectedConversations.length === 0 ? "outline" : "warning"
@@ -219,7 +219,7 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
                 />
               </div>
             ) : (
-              <div className="shadow-fade z-50 flex justify-end gap-2 p-2">
+              <div className="shadow-tale z-50 flex justify-end gap-2 p-2">
                 <Button
                   href={`/w/${owner.sId}/assistant/new`}
                   label="New"
diff --git a/front/styles/global.css b/front/styles/global.css
index 1875bc46d94f..fe1d84bf0c3c 100644
--- a/front/styles/global.css
+++ b/front/styles/global.css
@@ -51,11 +51,6 @@ main {
   top: 4px;
 }
 
-.shadow-fade {
-  @apply bg-structure-50;
-  box-shadow: 0 0 12px 12px theme("colors.structure.50.DEFAULT");
-}
-
 @keyframes shake {
   10%,
   90% {
diff --git a/front/tailwind.config.js b/front/tailwind.config.js
index 53a1fcc493ce..c7b08a4dccee 100644
--- a/front/tailwind.config.js
+++ b/front/tailwind.config.js
@@ -28,6 +28,7 @@ module.exports = {
         lg: "0 10px 20px rgba(15, 23, 42, 0.12)",
         xl: "0 20px 25px rgba(15, 23, 42, 0.12)",
         "2xl": "0 25px 50px rgba(15, 23, 42, 0.12)",
+        tale: "0px 0px 12px 12px #F6F8FB",
       },
       zIndex: {
         60: "60",

From b7d73278f5bd98aa211efda56bbf2ea4235e4b58 Mon Sep 17 00:00:00 2001
From: JulesBelveze <jules.belveze@hotmail.fr>
Date: Wed, 27 Nov 2024 09:47:31 +0100
Subject: [PATCH 7/7] [front] - fix: adjust shadow-tale CSS class ordering in
 SidebarMenu

 - Ensure consistent ordering of CSS classes for improved readability and adherence to styling guidelines
 - Modify the positioning of 'shadow-tale' to be the last class in the class list for sidebar elements
---
 front/components/assistant/conversation/SidebarMenu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/front/components/assistant/conversation/SidebarMenu.tsx b/front/components/assistant/conversation/SidebarMenu.tsx
index 769342f68789..e4bbafb23d51 100644
--- a/front/components/assistant/conversation/SidebarMenu.tsx
+++ b/front/components/assistant/conversation/SidebarMenu.tsx
@@ -202,7 +202,7 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
         <div className="flex h-0 min-h-full w-full overflow-y-auto">
           <div className="flex w-full flex-col">
             {isMultiSelect ? (
-              <div className="shadow-tale z-50 flex justify-between gap-2 p-2">
+              <div className="z-50 flex justify-between gap-2 p-2 shadow-tale">
                 <Button
                   variant={
                     selectedConversations.length === 0 ? "outline" : "warning"
@@ -219,7 +219,7 @@ export function AssistantSidebarMenu({ owner }: AssistantSidebarMenuProps) {
                 />
               </div>
             ) : (
-              <div className="shadow-tale z-50 flex justify-end gap-2 p-2">
+              <div className="z-50 flex justify-end gap-2 p-2 shadow-tale">
                 <Button
                   href={`/w/${owner.sId}/assistant/new`}
                   label="New"