From 1796821888ff09fbe0e9912408cb1387822ee866 Mon Sep 17 00:00:00 2001
From: Walber Cardoso <50842245+walbercardoso@users.noreply.github.com>
Date: Tue, 19 Mar 2024 14:43:24 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20style(fix):=20Convo=20Title=20Fa?=
 =?UTF-8?q?de=20Effect=20(#2117)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Improve Google search plugin to assistants

* 🔧 fix(Nav SidePanel): Center buttons when collapsed

* 🔧(fix) Convo title fade effect

* 🔧(fix) Convo title fade effect / remove deletion

* 🔧(fix) Convo title fade effect / remove deletion .env.example

* 🔧(fix) Convo title fade effect

---------

Co-authored-by: Danny Avila <messagedaniel@protonmail.com>
---
 .env.example                                  |  2 +-
 client/src/components/Conversations/Convo.tsx | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/.env.example b/.env.example
index b65896d7dd..eac5463e86 100644
--- a/.env.example
+++ b/.env.example
@@ -359,4 +359,4 @@ HELP_AND_FAQ_URL=https://librechat.ai
 # USE_REDIS=
 
 # E2E_USER_EMAIL=
-# E2E_USER_PASSWORD=
+# E2E_USER_PASSWORD=
\ No newline at end of file
diff --git a/client/src/components/Conversations/Convo.tsx b/client/src/components/Conversations/Convo.tsx
index c304209a72..c0ce632d5f 100644
--- a/client/src/components/Conversations/Convo.tsx
+++ b/client/src/components/Conversations/Convo.tsx
@@ -52,7 +52,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
       try {
         lastSelectedTools = JSON.parse(localStorage.getItem('lastSelectedTools') ?? '') ?? [];
       } catch (e) {
-      // console.error(e);
+        // console.error(e);
       }
       navigateToConvo({ ...conversation, tools: lastSelectedTools });
     } else {
@@ -119,14 +119,13 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
     (isLatestConvo && currentConvoId === 'new' && activeConvos[0] && activeConvos[0] !== 'new');
 
   const aProps = {
-    className: `group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg bg-gray-300 dark:bg-gray-800 py-2 px-2 ${
-      renaming ? 'pr-14' : ''
-    }`,
+    className:
+      'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg bg-gray-300 dark:bg-gray-800 py-2 px-2}',
   };
 
   if (!activeConvo) {
     aProps.className =
-      'group relative rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 py-2 px-2';
+      'group relative grow overflow-hidden whitespace-nowrap rounded-lg active:opacity-50 flex cursor-pointer items-center mt-2 gap-2 break-all rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 py-2 px-2';
   }
 
   return (
@@ -153,14 +152,16 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
           title
         )}
       </div>
-      {activeConvo && (
+      {activeConvo ? (
         <div
           className={`absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l ${
             !renaming ? 'from-gray-300 from-60% to-transparent dark:from-gray-800' : ''
           }`}
         ></div>
+      ) : (
+        <div className="from--gray-900 absolute bottom-0 right-0 top-0 w-2 bg-gradient-to-l from-0% to-transparent group-hover:w-1 group-hover:from-60%"></div>
       )}
-      {activeConvo && (
+      {activeConvo ? (
         <div className="visible absolute right-1 z-10 flex from-gray-900 dark:text-gray-200">
           <RenameButton renaming={renaming} onRename={onRename} renameHandler={renameHandler} />
           <DeleteButton
@@ -170,6 +171,8 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
             title={title}
           />
         </div>
+      ) : (
+        <div className="absolute bottom-0 right-0 top-0 w-14 rounded-lg bg-gradient-to-l from-gray-50 from-0% to-transparent group-hover:from-gray-200 dark:from-gray-900 dark:group-hover:from-gray-800" />
       )}
     </a>
   );