From 54b10952397ce0b3280d3b5a7b9ae9c74b8627a0 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Fri, 21 Jun 2024 15:58:38 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20fix=20inconsistent=20`H?=
 =?UTF-8?q?overButtons`=20and=20correct=20style=20issue=20in=20`Continue`?=
 =?UTF-8?q?=20button=20(#3100)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style: fix inconsistent HoverButtons and fixed style bug in `continue` button

* quick fix; forgot to re-implment the logic

* feat: convo switch buttons
---
 .../src/components/Chat/Messages/HoverButtons.tsx | 12 ++++++------
 .../src/components/Chat/Messages/MessageAudio.tsx |  2 +-
 .../components/Chat/Messages/SiblingSwitch.tsx    | 15 +++++++++++----
 client/src/components/Conversations/Fork.tsx      |  6 +++---
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/client/src/components/Chat/Messages/HoverButtons.tsx b/client/src/components/Chat/Messages/HoverButtons.tsx
index 8096bafabb..3c3ad97890 100644
--- a/client/src/components/Chat/Messages/HoverButtons.tsx
+++ b/client/src/components/Chat/Messages/HoverButtons.tsx
@@ -77,7 +77,7 @@ export default function HoverButtons({
       {isEditableEndpoint && (
         <button
           className={cn(
-            'hover-button rounded-md p-1 text-gray-400 hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
+            'hover-button rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
             isCreatedByUser ? '' : 'active',
             hideEditButton ? 'opacity-0' : '',
             isEditing ? 'active text-gray-700 dark:text-gray-200' : '',
@@ -93,7 +93,7 @@ export default function HoverButtons({
       )}
       <button
         className={cn(
-          'ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
+          'ml-0 flex items-center gap-1.5 rounded-md p-1 text-xs text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
           isSubmitting && isCreatedByUser ? 'md:opacity-0 md:group-hover:opacity-100' : '',
           !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
         )}
@@ -108,7 +108,7 @@ export default function HoverButtons({
       {regenerateEnabled ? (
         <button
           className={cn(
-            'hover-button active rounded-md p-1 text-gray-400 hover:text-gray-900 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible md:group-[.final-completion]:visible',
+            'hover-button active rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible md:group-[.final-completion]:visible',
             !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
           )}
           onClick={regenerate}
@@ -116,7 +116,7 @@ export default function HoverButtons({
           title={localize('com_ui_regenerate')}
         >
           <RegenerateIcon
-            className="hover:text-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"
+            className="hover:text-gray-500 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"
             size="19"
           />
         </button>
@@ -131,14 +131,14 @@ export default function HoverButtons({
       {continueSupported ? (
         <button
           className={cn(
-            'hover-button active rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible ',
+            'hover-button active rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible ',
             !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
           )}
           onClick={handleContinue}
           type="button"
           title={localize('com_ui_continue')}
         >
-          <ContinueIcon className="h-4 w-4 hover:text-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" />
+          <ContinueIcon className="h-4 w-4 hover:text-gray-500 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" />
         </button>
       ) : null}
     </div>
diff --git a/client/src/components/Chat/Messages/MessageAudio.tsx b/client/src/components/Chat/Messages/MessageAudio.tsx
index bdefffa6ec..6d3229e901 100644
--- a/client/src/components/Chat/Messages/MessageAudio.tsx
+++ b/client/src/components/Chat/Messages/MessageAudio.tsx
@@ -49,7 +49,7 @@ export default function MessageAudio({ index, message, isLast }: THoverButtons)
   return (
     <>
       <button
-        className="hover-button rounded-md p-1 pl-0 text-gray-400 hover:text-gray-950 dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible"
+        className="hover-button rounded-md p-1 pl-0 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible"
         // onMouseDownCapture={() => {
         //   if (audioRef.current) {
         //     audioRef.current.muted = false;
diff --git a/client/src/components/Chat/Messages/SiblingSwitch.tsx b/client/src/components/Chat/Messages/SiblingSwitch.tsx
index fdecafe748..378029c480 100644
--- a/client/src/components/Chat/Messages/SiblingSwitch.tsx
+++ b/client/src/components/Chat/Messages/SiblingSwitch.tsx
@@ -1,4 +1,5 @@
 import type { TMessageProps } from '~/common';
+import { cn } from '~/utils';
 
 type TSiblingSwitchProps = Pick<TMessageProps, 'siblingIdx' | 'siblingCount' | 'setSiblingIdx'>;
 
@@ -24,7 +25,10 @@ export default function SiblingSwitch({
   return siblingCount > 1 ? (
     <div className="visible flex items-center justify-center gap-1 self-center pt-0 text-xs">
       <button
-        className="disabled:text-gray-300 dark:text-white dark:disabled:text-gray-400"
+        className={cn(
+          'hover-button rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
+        )}
+        type="button"
         onClick={previous}
         disabled={siblingIdx == 0}
       >
@@ -35,7 +39,7 @@ export default function SiblingSwitch({
           viewBox="0 0 24 24"
           strokeLinecap="round"
           strokeLinejoin="round"
-          className="h-3 w-3"
+          className="h-4 w-4"
           height="1em"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
@@ -47,7 +51,10 @@ export default function SiblingSwitch({
         {siblingIdx + 1} / {siblingCount}
       </span>
       <button
-        className="disabled:text-gray-300 dark:text-white dark:disabled:text-gray-400"
+        className={cn(
+          'hover-button rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:group-hover:visible md:group-[.final-completion]:visible',
+        )}
+        type="button"
         onClick={next}
         disabled={siblingIdx == siblingCount - 1}
       >
@@ -58,7 +65,7 @@ export default function SiblingSwitch({
           viewBox="0 0 24 24"
           strokeLinecap="round"
           strokeLinejoin="round"
-          className="h-3 w-3"
+          className="h-4 w-4"
           height="1em"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/client/src/components/Conversations/Fork.tsx b/client/src/components/Conversations/Fork.tsx
index cb0a62d1a7..bd880ccfe4 100644
--- a/client/src/components/Conversations/Fork.tsx
+++ b/client/src/components/Conversations/Fork.tsx
@@ -165,8 +165,8 @@ export default function Fork({
       <Popover.Trigger asChild>
         <button
           className={cn(
-            'hover-button active rounded-md p-1 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible ',
-            'data-[state=open]:active data-[state=open]:bg-gray-200 data-[state=open]:text-gray-700 data-[state=open]:dark:bg-gray-700 data-[state=open]:dark:text-gray-200',
+            'hover-button active rounded-md p-1 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-400/70 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400 md:invisible md:group-hover:visible ',
+            'data-[state=open]:active data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 data-[state=open]:dark:bg-gray-700 data-[state=open]:dark:text-gray-200',
             !isLast ? 'data-[state=open]:opacity-100 md:opacity-0 md:group-hover:opacity-100' : '',
           )}
           onClick={(e) => {
@@ -184,7 +184,7 @@ export default function Fork({
           type="button"
           title={localize('com_ui_fork')}
         >
-          <GitFork className="h-4 w-4 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" />
+          <GitFork className="h-4 w-4 hover:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400" />
         </button>
       </Popover.Trigger>
       <Popover.Portal>