From eb05132008ddfcee11324574f8fe839c42643957 Mon Sep 17 00:00:00 2001
From: Hanzalah Waheed <hanzalah.w@gmail.com>
Date: Tue, 12 Aug 2025 00:16:21 +0400
Subject: [PATCH 1/4] fix: always show the response bubble buttons.

---
 .../src/conversation/ConversationBubble.tsx   | 41 +++++++++----------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 6379eb0a..38d4053f 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -550,20 +550,16 @@ const ConversationBubble = forwardRef<
         )}
         {message && (
           <div className="my-2 ml-2 flex justify-start">
-            <div
-              className={`relative mr-2 block items-center justify-center lg:invisible ${type !== 'ERROR' ? 'lg:group-hover:visible' : 'hidden'}`}
-            >
-              <div>
-                <CopyButton textToCopy={message} />
-              </div>
-            </div>
-            <div
-              className={`relative mr-2 block items-center justify-center lg:invisible ${type !== 'ERROR' ? 'lg:group-hover:visible' : 'hidden'}`}
-            >
-              <div>
-                <SpeakButton text={message} />
-              </div>
-            </div>
+            {type !== 'ERROR' && (
+              <>
+                <div className="relative mr-2 block items-center justify-center">
+                  <CopyButton textToCopy={message} />
+                </div>
+                <div className="relative mr-2 block items-center justify-center">
+                  <SpeakButton text={message} />
+                </div>
+              </>
+            )}
             {type === 'ERROR' && (
               <div className="relative mr-2 block items-center justify-center">
                 <div>{retryBtn}</div>
@@ -573,10 +569,11 @@ const ConversationBubble = forwardRef<
               <>
                 <div
                   className={`relative mr-2 flex items-center justify-center ${
-                    feedback === 'LIKE' || isLikeClicked
-                      ? 'visible'
-                      : 'lg:invisible'
-                  } ${type !== 'ERROR' ? 'lg:group-hover:visible' : ''} ${feedback === 'DISLIKE' && type !== 'ERROR' ? 'hidden' : ''}`}
+                    (feedback === 'DISLIKE' || isDislikeClicked) &&
+                    type !== 'ERROR'
+                      ? 'hidden'
+                      : 'visible'
+                  }`}
                 >
                   <div>
                     <div
@@ -612,10 +609,10 @@ const ConversationBubble = forwardRef<
 
                 <div
                   className={`relative mr-2 flex items-center justify-center ${
-                    feedback === 'DISLIKE' || isLikeClicked
-                      ? 'visible'
-                      : 'lg:invisible'
-                  } ${type !== 'ERROR' ? 'lg:group-hover:visible' : ''} ${feedback === 'LIKE' && type !== 'ERROR' ? 'hidden' : ''}`}
+                    (feedback === 'LIKE' || isLikeClicked) && type !== 'ERROR'
+                      ? 'hidden'
+                      : 'visible'
+                  }`}
                 >
                   <div>
                     <div

From 143854fa8164053d834120605784f83bf01ef339 Mon Sep 17 00:00:00 2001
From: Hanzalah Waheed <hanzalah.w@gmail.com>
Date: Wed, 13 Aug 2025 02:11:47 +0400
Subject: [PATCH 2/4] fix: show both like and dislike buttons

---
 .../src/conversation/ConversationBubble.tsx   | 39 +++++++------------
 1 file changed, 13 insertions(+), 26 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 38d4053f..0d708cd6 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -565,16 +565,9 @@ const ConversationBubble = forwardRef<
                 <div>{retryBtn}</div>
               </div>
             )}
-            {handleFeedback && (
+            {handleFeedback && type !== 'ERROR' && (
               <>
-                <div
-                  className={`relative mr-2 flex items-center justify-center ${
-                    (feedback === 'DISLIKE' || isDislikeClicked) &&
-                    type !== 'ERROR'
-                      ? 'hidden'
-                      : 'visible'
-                  }`}
-                >
+                <div className="relative mr-2 flex items-center justify-center">
                   <div>
                     <div
                       className={`flex items-center justify-center rounded-full p-2 ${
@@ -584,11 +577,7 @@ const ConversationBubble = forwardRef<
                       }`}
                     >
                       <Like
-                        className={`cursor-pointer ${
-                          isLikeClicked || feedback === 'LIKE'
-                            ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
-                            : 'stroke-gray-4000 fill-none'
-                        }`}
+                        className={`${isLikeClicked || feedback === 'LIKE' ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent' : 'stroke-gray-4000 fill-none'} cursor-pointer`}
                         onClick={() => {
                           if (feedback === undefined || feedback === null) {
                             handleFeedback?.('LIKE');
@@ -598,6 +587,10 @@ const ConversationBubble = forwardRef<
                             handleFeedback?.(null);
                             setIsLikeClicked(false);
                             setIsDislikeClicked(false);
+                          } else if (feedback === 'DISLIKE') {
+                            handleFeedback?.('LIKE');
+                            setIsDislikeClicked(false);
+                            setIsLikeClicked(true);
                           }
                         }}
                         onMouseEnter={() => setIsLikeHovered(true)}
@@ -607,13 +600,7 @@ const ConversationBubble = forwardRef<
                   </div>
                 </div>
 
-                <div
-                  className={`relative mr-2 flex items-center justify-center ${
-                    (feedback === 'LIKE' || isLikeClicked) && type !== 'ERROR'
-                      ? 'hidden'
-                      : 'visible'
-                  }`}
-                >
+                <div className="relative mr-2 flex items-center justify-center">
                   <div>
                     <div
                       className={`flex items-center justify-center rounded-full p-2 ${
@@ -623,11 +610,7 @@ const ConversationBubble = forwardRef<
                       }`}
                     >
                       <Dislike
-                        className={`cursor-pointer ${
-                          isDislikeClicked || feedback === 'DISLIKE'
-                            ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent'
-                            : 'stroke-gray-4000 fill-none'
-                        }`}
+                        className={`${isDislikeClicked || feedback === 'DISLIKE' ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent' : 'stroke-gray-4000 fill-none'} cursor-pointer`}
                         onClick={() => {
                           if (feedback === undefined || feedback === null) {
                             handleFeedback?.('DISLIKE');
@@ -637,6 +620,10 @@ const ConversationBubble = forwardRef<
                             handleFeedback?.(null);
                             setIsLikeClicked(false);
                             setIsDislikeClicked(false);
+                          } else if (feedback === 'LIKE') {
+                            handleFeedback?.('DISLIKE');
+                            setIsDislikeClicked(true);
+                            setIsLikeClicked(false);
                           }
                         }}
                         onMouseEnter={() => setIsDislikeHovered(true)}

From cb9ec69cf686130cd4c084b1f93373842c03be0f Mon Sep 17 00:00:00 2001
From: Hanzalah Waheed <hanzalah.w@gmail.com>
Date: Wed, 13 Aug 2025 02:31:25 +0400
Subject: [PATCH 3/4] chore: refactor code to use ternary operator for error
 type check

---
 .../src/conversation/ConversationBubble.tsx   | 143 +++++++++---------
 1 file changed, 71 insertions(+), 72 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 0d708cd6..f1af7862 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -550,7 +550,11 @@ const ConversationBubble = forwardRef<
         )}
         {message && (
           <div className="my-2 ml-2 flex justify-start">
-            {type !== 'ERROR' && (
+            {type === 'ERROR' ? (
+              <div className="relative mr-2 block items-center justify-center">
+                <div>{retryBtn}</div>
+              </div>
+            ) : (
               <>
                 <div className="relative mr-2 block items-center justify-center">
                   <CopyButton textToCopy={message} />
@@ -558,80 +562,75 @@ const ConversationBubble = forwardRef<
                 <div className="relative mr-2 block items-center justify-center">
                   <SpeakButton text={message} />
                 </div>
-              </>
-            )}
-            {type === 'ERROR' && (
-              <div className="relative mr-2 block items-center justify-center">
-                <div>{retryBtn}</div>
-              </div>
-            )}
-            {handleFeedback && type !== 'ERROR' && (
-              <>
-                <div className="relative mr-2 flex items-center justify-center">
-                  <div>
-                    <div
-                      className={`flex items-center justify-center rounded-full p-2 ${
-                        isLikeHovered
-                          ? 'dark:bg-purple-taupe bg-[#EEEEEE]'
-                          : 'bg-white-3000 dark:bg-transparent'
-                      }`}
-                    >
-                      <Like
-                        className={`${isLikeClicked || feedback === 'LIKE' ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent' : 'stroke-gray-4000 fill-none'} cursor-pointer`}
-                        onClick={() => {
-                          if (feedback === undefined || feedback === null) {
-                            handleFeedback?.('LIKE');
-                            setIsLikeClicked(true);
-                            setIsDislikeClicked(false);
-                          } else if (feedback === 'LIKE') {
-                            handleFeedback?.(null);
-                            setIsLikeClicked(false);
-                            setIsDislikeClicked(false);
-                          } else if (feedback === 'DISLIKE') {
-                            handleFeedback?.('LIKE');
-                            setIsDislikeClicked(false);
-                            setIsLikeClicked(true);
-                          }
-                        }}
-                        onMouseEnter={() => setIsLikeHovered(true)}
-                        onMouseLeave={() => setIsLikeHovered(false)}
-                      ></Like>
+                {handleFeedback && (
+                  <>
+                    <div className="relative mr-2 flex items-center justify-center">
+                      <div>
+                        <div
+                          className={`flex items-center justify-center rounded-full p-2 ${
+                            isLikeHovered
+                              ? 'dark:bg-purple-taupe bg-[#EEEEEE]'
+                              : 'bg-white-3000 dark:bg-transparent'
+                          }`}
+                        >
+                          <Like
+                            className={`${isLikeClicked || feedback === 'LIKE' ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent' : 'stroke-gray-4000 fill-none'} cursor-pointer`}
+                            onClick={() => {
+                              if (feedback === undefined || feedback === null) {
+                                handleFeedback?.('LIKE');
+                                setIsLikeClicked(true);
+                                setIsDislikeClicked(false);
+                              } else if (feedback === 'LIKE') {
+                                handleFeedback?.(null);
+                                setIsLikeClicked(false);
+                                setIsDislikeClicked(false);
+                              } else if (feedback === 'DISLIKE') {
+                                handleFeedback?.('LIKE');
+                                setIsDislikeClicked(false);
+                                setIsLikeClicked(true);
+                              }
+                            }}
+                            onMouseEnter={() => setIsLikeHovered(true)}
+                            onMouseLeave={() => setIsLikeHovered(false)}
+                          ></Like>
+                        </div>
+                      </div>
                     </div>
-                  </div>
-                </div>
 
-                <div className="relative mr-2 flex items-center justify-center">
-                  <div>
-                    <div
-                      className={`flex items-center justify-center rounded-full p-2 ${
-                        isDislikeHovered
-                          ? 'dark:bg-purple-taupe bg-[#EEEEEE]'
-                          : 'bg-white-3000 dark:bg-transparent'
-                      }`}
-                    >
-                      <Dislike
-                        className={`${isDislikeClicked || feedback === 'DISLIKE' ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent' : 'stroke-gray-4000 fill-none'} cursor-pointer`}
-                        onClick={() => {
-                          if (feedback === undefined || feedback === null) {
-                            handleFeedback?.('DISLIKE');
-                            setIsDislikeClicked(true);
-                            setIsLikeClicked(false);
-                          } else if (feedback === 'DISLIKE') {
-                            handleFeedback?.(null);
-                            setIsLikeClicked(false);
-                            setIsDislikeClicked(false);
-                          } else if (feedback === 'LIKE') {
-                            handleFeedback?.('DISLIKE');
-                            setIsDislikeClicked(true);
-                            setIsLikeClicked(false);
-                          }
-                        }}
-                        onMouseEnter={() => setIsDislikeHovered(true)}
-                        onMouseLeave={() => setIsDislikeHovered(false)}
-                      ></Dislike>
+                    <div className="relative mr-2 flex items-center justify-center">
+                      <div>
+                        <div
+                          className={`flex items-center justify-center rounded-full p-2 ${
+                            isDislikeHovered
+                              ? 'dark:bg-purple-taupe bg-[#EEEEEE]'
+                              : 'bg-white-3000 dark:bg-transparent'
+                          }`}
+                        >
+                          <Dislike
+                            className={`${isDislikeClicked || feedback === 'DISLIKE' ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent' : 'stroke-gray-4000 fill-none'} cursor-pointer`}
+                            onClick={() => {
+                              if (feedback === undefined || feedback === null) {
+                                handleFeedback?.('DISLIKE');
+                                setIsDislikeClicked(true);
+                                setIsLikeClicked(false);
+                              } else if (feedback === 'DISLIKE') {
+                                handleFeedback?.(null);
+                                setIsLikeClicked(false);
+                                setIsDislikeClicked(false);
+                              } else if (feedback === 'LIKE') {
+                                handleFeedback?.('DISLIKE');
+                                setIsDislikeClicked(true);
+                                setIsLikeClicked(false);
+                              }
+                            }}
+                            onMouseEnter={() => setIsDislikeHovered(true)}
+                            onMouseLeave={() => setIsDislikeHovered(false)}
+                          ></Dislike>
+                        </div>
+                      </div>
                     </div>
-                  </div>
-                </div>
+                  </>
+                )}
               </>
             )}
           </div>

From 6bb0cd535a035e5fce39c63743729b90e43e163d Mon Sep 17 00:00:00 2001
From: Hanzalah Waheed <hanzalah.w@gmail.com>
Date: Wed, 13 Aug 2025 02:36:58 +0400
Subject: [PATCH 4/4] fix: rm redundant states. track feedback state w prop var

---
 .../src/conversation/ConversationBubble.tsx   | 31 +++++--------------
 1 file changed, 7 insertions(+), 24 deletions(-)

diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index f1af7862..3be40df7 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -92,8 +92,7 @@ const ConversationBubble = forwardRef<
   const [editInputBox, setEditInputBox] = useState<string>('');
   const messageRef = useRef<HTMLDivElement>(null);
   const [shouldShowToggle, setShouldShowToggle] = useState(false);
-  const [isLikeClicked, setIsLikeClicked] = useState(false);
-  const [isDislikeClicked, setIsDislikeClicked] = useState(false);
+
   const [activeTooltip, setActiveTooltip] = useState<number | null>(null);
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
   const editableQueryRef = useRef<HTMLDivElement>(null);
@@ -574,20 +573,12 @@ const ConversationBubble = forwardRef<
                           }`}
                         >
                           <Like
-                            className={`${isLikeClicked || feedback === 'LIKE' ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent' : 'stroke-gray-4000 fill-none'} cursor-pointer`}
+                            className={`${feedback === 'LIKE' ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent' : 'stroke-gray-4000 fill-none'} cursor-pointer`}
                             onClick={() => {
-                              if (feedback === undefined || feedback === null) {
-                                handleFeedback?.('LIKE');
-                                setIsLikeClicked(true);
-                                setIsDislikeClicked(false);
-                              } else if (feedback === 'LIKE') {
+                              if (feedback === 'LIKE') {
                                 handleFeedback?.(null);
-                                setIsLikeClicked(false);
-                                setIsDislikeClicked(false);
-                              } else if (feedback === 'DISLIKE') {
+                              } else {
                                 handleFeedback?.('LIKE');
-                                setIsDislikeClicked(false);
-                                setIsLikeClicked(true);
                               }
                             }}
                             onMouseEnter={() => setIsLikeHovered(true)}
@@ -607,20 +598,12 @@ const ConversationBubble = forwardRef<
                           }`}
                         >
                           <Dislike
-                            className={`${isDislikeClicked || feedback === 'DISLIKE' ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent' : 'stroke-gray-4000 fill-none'} cursor-pointer`}
+                            className={`${feedback === 'DISLIKE' ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent' : 'stroke-gray-4000 fill-none'} cursor-pointer`}
                             onClick={() => {
-                              if (feedback === undefined || feedback === null) {
-                                handleFeedback?.('DISLIKE');
-                                setIsDislikeClicked(true);
-                                setIsLikeClicked(false);
-                              } else if (feedback === 'DISLIKE') {
+                              if (feedback === 'DISLIKE') {
                                 handleFeedback?.(null);
-                                setIsLikeClicked(false);
-                                setIsDislikeClicked(false);
-                              } else if (feedback === 'LIKE') {
+                              } else {
                                 handleFeedback?.('DISLIKE');
-                                setIsDislikeClicked(true);
-                                setIsLikeClicked(false);
                               }
                             }}
                             onMouseEnter={() => setIsDislikeHovered(true)}