From af347cccdede1090e74e28f096232c1b136afd68 Mon Sep 17 00:00:00 2001
From: SailFlorve <xdygxh@163.com>
Date: Wed, 20 Mar 2024 01:55:41 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20HoverButton=20UI=20adju?=
 =?UTF-8?q?stment,=20change=20code=20font=20(#2017)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style: HoverButton UI adjustment

* style: make Consolas as default code font

---------

Co-authored-by: Danny Avila <messagedaniel@protonmail.com>
---
 client/src/components/Chat/Messages/HoverButtons.tsx | 10 ++++++++--
 client/src/components/Chat/Messages/Message.tsx      |  1 +
 client/src/style.css                                 |  2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Chat/Messages/HoverButtons.tsx b/client/src/components/Chat/Messages/HoverButtons.tsx
index 390d35ef4d..18702f8b4b 100644
--- a/client/src/components/Chat/Messages/HoverButtons.tsx
+++ b/client/src/components/Chat/Messages/HoverButtons.tsx
@@ -14,6 +14,7 @@ type THoverButtons = {
   regenerate: () => void;
   handleContinue: (e: React.MouseEvent<HTMLButtonElement>) => void;
   latestMessage: TMessage | null;
+  isLast: boolean;
 };
 
 export default function HoverButtons({
@@ -26,6 +27,7 @@ export default function HoverButtons({
   regenerate,
   handleContinue,
   latestMessage,
+  isLast,
 }: THoverButtons) {
   const localize = useLocalize();
   const { endpoint: _endpoint, endpointType } = conversation ?? {};
@@ -59,6 +61,7 @@ export default function HoverButtons({
           isCreatedByUser ? '' : 'active',
           hideEditButton ? 'opacity-0' : '',
           isEditing ? 'active bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-200' : '',
+          !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
         )}
         onClick={onEdit}
         type="button"
@@ -71,6 +74,7 @@ export default function HoverButtons({
         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',
           isSubmitting && isCreatedByUser ? 'md:opacity-0 md:group-hover:opacity-100' : '',
+          !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',
         )}
         onClick={() => copyToClipboard(setIsCopied)}
         type="button"
@@ -82,7 +86,8 @@ export default function HoverButtons({
       </button>
       {regenerateEnabled ? (
         <button
-          className="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"
+          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",
+            !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',)}
           onClick={regenerate}
           type="button"
           title={localize('com_ui_regenerate')}
@@ -92,7 +97,8 @@ export default function HoverButtons({
       ) : null}
       {continueSupported ? (
         <button
-          className="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 "
+          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 ",
+            !isLast ? 'md:opacity-0 md:group-hover:opacity-100' : '',)}
           onClick={handleContinue}
           type="button"
           title={localize('com_ui_continue')}
diff --git a/client/src/components/Chat/Messages/Message.tsx b/client/src/components/Chat/Messages/Message.tsx
index c95e6c9e0b..41923138a0 100644
--- a/client/src/components/Chat/Messages/Message.tsx
+++ b/client/src/components/Chat/Messages/Message.tsx
@@ -115,6 +115,7 @@ export default function Message(props: TMessageProps) {
                     copyToClipboard={copyToClipboard}
                     handleContinue={handleContinue}
                     latestMessage={latestMessage}
+                    isLast={isLast}
                   />
                 </SubRow>
               )}
diff --git a/client/src/style.css b/client/src/style.css
index 247e1d6e41..ee3718f3d4 100644
--- a/client/src/style.css
+++ b/client/src/style.css
@@ -894,7 +894,7 @@ blockquote, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
 
 code,
 pre {
-  font-family: Söhne Mono, Monaco, Andale Mono, Ubuntu Mono, monospace !important;
+  font-family: Consolas, Söhne Mono, Monaco, Andale Mono, Ubuntu Mono, monospace !important;
 }
 code[class='language-plaintext'] {
   white-space: pre-line;