Prevent unneccessary renders. Update show/hide state of feedback buttons by css instead React

frontend/src/conversation/ConversationBubble.tsx

@@ -27,7 +27,6 @@ const ConversationBubble = forwardRef<
   { message, type, className, feedback, handleFeedback, sources },
   ref,
 ) {
-  const [showFeedback, setShowFeedback] = useState(false);
   const [openSource, setOpenSource] = useState<number | null>(null);
   const [copied, setCopied] = useState(false);
 
@@ -65,12 +64,7 @@ const ConversationBubble = forwardRef<
     );
   } else {
     bubble = (
-      <div
+      <div ref={ref} className={`flex self-start ${className} group flex-col`}>
-        ref={ref}
-        className={`flex self-start ${className} flex-col`}
-        onMouseEnter={() => setShowFeedback(true)}
-        onMouseLeave={() => setShowFeedback(false)}
-      >
         <div className="flex self-start">
           <Avatar className="mt-2 text-2xl" avatar="🦖"></Avatar>
           <div
@@ -118,9 +112,7 @@ const ConversationBubble = forwardRef<
               <>
                 <span className="mt-3 h-px w-full bg-[#DEDEDE]"></span>
                 <div className="mt-3 flex w-full flex-row flex-wrap items-center justify-start gap-2">
-                  <div className="py-1 text-base font-semibold">
+                  <div className="py-1 text-base font-semibold">Sources:</div>
-                    Sources:
-                  </div>
                   <div className="flex flex-row flex-wrap items-center justify-start gap-2">
                     {sources?.map((source, index) => (
                       <div
@@ -151,8 +143,8 @@ const ConversationBubble = forwardRef<
             )}
           </div>
           <div
-            className={`relative mr-2 flex items-center justify-center ${
+            className={`relative mr-2 flex items-center justify-center md:invisible ${
-              type !== 'ERROR' && showFeedback ? '' : 'md:invisible'
+              type !== 'ERROR' ? 'group-hover:md:visible' : ''
             }`}
           >
             {copied ? (
@@ -167,10 +159,10 @@ const ConversationBubble = forwardRef<
             )}
           </div>
           <div
-            className={`relative mr-2 flex items-center justify-center ${
+            className={`relative mr-2 flex items-center justify-center md:invisible ${
-              feedback === 'LIKE' || (type !== 'ERROR' && showFeedback)
+              feedback === 'LIKE' || type !== 'ERROR'
-                ? ''
+                ? 'group-hover:md:visible'
-                : 'md:invisible'
+                : ''
             }`}
           >
             <Like
@@ -183,10 +175,10 @@ const ConversationBubble = forwardRef<
             ></Like>
           </div>
           <div
-            className={`relative mr-10 flex items-center justify-center ${
+            className={`relative mr-10 flex items-center justify-center md:invisible ${
-              feedback === 'DISLIKE' || (type !== 'ERROR' && showFeedback)
+              feedback === 'DISLIKE' || type !== 'ERROR'
-                ? ''
+                ? 'group-hover:md:visible'
-                : 'md:invisible'
+                : ''
             }`}
           >
             <Dislike