From f41850e4044b6cb52b3117a23582b24a04aabb36 Mon Sep 17 00:00:00 2001
From: Alexander <98586297+Alexander-Kezik@users.noreply.github.com>
Date: Tue, 24 Dec 2024 10:08:37 +0100
Subject: [PATCH] fix(chat): show like/dislike/copy buttons only if content
 message hasn't error message or content isn't empty (Issue #125) (#2865)

---
 .../Chat/ChatMessage/MessageButtons.tsx       | 139 +++++++++---------
 1 file changed, 71 insertions(+), 68 deletions(-)

diff --git a/apps/chat/src/components/Chat/ChatMessage/MessageButtons.tsx b/apps/chat/src/components/Chat/ChatMessage/MessageButtons.tsx
index 85e095fd01..0e7249dc19 100644
--- a/apps/chat/src/components/Chat/ChatMessage/MessageButtons.tsx
+++ b/apps/chat/src/components/Chat/ChatMessage/MessageButtons.tsx
@@ -154,81 +154,84 @@ export const MessageAssistantButtons = ({
           </Button>
         </Tooltip>
       )}
-      {messageCopied ? (
-        <Tooltip key="copied" placement="top" tooltip={t('Text copied')}>
-          <IconCheck size={18} className="text-secondary" />
-        </Tooltip>
-      ) : (
-        <Tooltip
-          key="copy"
-          placement="top"
-          isTriggerClickable
-          tooltip={t('Copy text')}
-        >
-          <Button className="text-secondary" onClick={copyOnClick}>
-            <IconCopy size={18} />
-          </Button>
-        </Tooltip>
-      )}
+      {(message.content.trim() || !message.errorMessage) &&
+        (messageCopied ? (
+          <Tooltip key="copied" placement="top" tooltip={t('Text copied')}>
+            <IconCheck size={18} className="text-secondary" />
+          </Tooltip>
+        ) : (
+          <Tooltip
+            key="copy"
+            placement="top"
+            isTriggerClickable
+            tooltip={t('Copy text')}
+          >
+            <Button className="text-secondary" onClick={copyOnClick}>
+              <IconCopy size={18} />
+            </Button>
+          </Tooltip>
+        ))}
       <div className="flex flex-row gap-2">
-        {isLikesEnabled && !!message.responseId && (
-          <>
-            {message.like !== LikeState.Disliked && (
-              <Tooltip
-                placement="top"
-                isTriggerClickable={message.like !== LikeState.Liked}
-                tooltip={
-                  message.like !== LikeState.Liked ? t('Like') : t('Liked')
-                }
-              >
-                <Button
-                  onClick={() => {
-                    if (message.like !== LikeState.NoState) {
-                      onLike(LikeState.Liked);
-                    }
-                  }}
-                  className={
-                    message.like !== LikeState.Liked
-                      ? 'text-secondary'
-                      : 'text-accent-primary'
+        {isLikesEnabled &&
+          (!message.errorMessage ||
+            (message.content.trim() && message.errorMessage)) && (
+            <>
+              {message.like !== LikeState.Disliked && (
+                <Tooltip
+                  placement="top"
+                  isTriggerClickable={message.like !== LikeState.Liked}
+                  tooltip={
+                    message.like !== LikeState.Liked ? t('Like') : t('Liked')
                   }
-                  disabled={message.like === LikeState.Liked}
-                  data-qa="like"
                 >
-                  <IconThumbUp size={18} />
-                </Button>
-              </Tooltip>
-            )}
-            {message.like !== LikeState.Liked && (
-              <Tooltip
-                placement="top"
-                isTriggerClickable={message.like !== LikeState.Disliked}
-                tooltip={
-                  message.like !== LikeState.Disliked
-                    ? t('Dislike')
-                    : t('Disliked')
-                }
-              >
-                <Button
-                  onClick={() => {
-                    if (message.like !== LikeState.NoState) {
-                      onLike(LikeState.Disliked);
+                  <Button
+                    onClick={() => {
+                      if (message.like !== LikeState.NoState) {
+                        onLike(LikeState.Liked);
+                      }
+                    }}
+                    className={
+                      message.like !== LikeState.Liked
+                        ? 'text-secondary'
+                        : 'text-accent-primary'
                     }
-                  }}
-                  className={
+                    disabled={message.like === LikeState.Liked}
+                    data-qa="like"
+                  >
+                    <IconThumbUp size={18} />
+                  </Button>
+                </Tooltip>
+              )}
+              {message.like !== LikeState.Liked && (
+                <Tooltip
+                  placement="top"
+                  isTriggerClickable={message.like !== LikeState.Disliked}
+                  tooltip={
                     message.like !== LikeState.Disliked
-                      ? 'text-secondary'
-                      : 'text-accent-primary'
+                      ? t('Dislike')
+                      : t('Disliked')
                   }
-                  disabled={message.like === LikeState.Disliked}
-                  data-qa="dislike"
                 >
-                  <IconThumbDown size={18} />
-                </Button>
-              </Tooltip>
-            )}
-          </>
-        )}
+                  <Button
+                    onClick={() => {
+                      if (message.like !== LikeState.NoState) {
+                        onLike(LikeState.Disliked);
+                      }
+                    }}
+                    className={
+                      message.like !== LikeState.Disliked
+                        ? 'text-secondary'
+                        : 'text-accent-primary'
+                    }
+                    disabled={message.like === LikeState.Disliked}
+                    data-qa="dislike"
+                  >
+                    <IconThumbDown size={18} />
+                  </Button>
+                </Tooltip>
+              )}
+            </>
+          )}
       </div>
     </div>
   );