adds like dislike

frontend/src/conversation/ConversationBubble.tsx

@@ -1,7 +1,10 @@
-import { forwardRef } from 'react';
+import React from 'react';
+import { forwardRef, useState } from 'react';
 import Avatar from '../Avatar';
 import { MESSAGE_TYPE } from './conversationModels';
 import Alert from './../assets/alert.svg';
+import { ReactComponent as Like } from './../assets/like.svg';
+import { ReactComponent as Dislike } from './../assets/dislike.svg';
 
 const ConversationBubble = forwardRef<
   HTMLDivElement,
@@ -11,6 +14,8 @@ const ConversationBubble = forwardRef<
     className?: string;
   }
 >(function ConversationBubble({ message, type, className }, ref) {
+  const [showFeedback, setShowFeedback] = useState(false);
+
   let bubble;
   if (type === 'QUESTION') {
     bubble = (
@@ -23,10 +28,15 @@ const ConversationBubble = forwardRef<
     );
   } else {
     bubble = (
-      <div ref={ref} className={`flex self-start ${className}`}>
+      <div
+        ref={ref}
+        className={`flex self-start ${className}`}
+        onMouseEnter={() => setShowFeedback(true)}
+        onMouseLeave={() => setShowFeedback(false)}
+      >
         <Avatar className="mt-4 text-2xl" avatar="🦖"></Avatar>
         <div
-          className={`ml-2 mr-10 flex items-center rounded-3xl bg-gray-1000 py-5 px-5 ${
+          className={`ml-2 mr-5 flex items-center rounded-3xl bg-gray-1000 py-5 px-5 ${
             type === 'ERROR'
               ? ' rounded-lg border border-red-2000 bg-red-1000 p-2 text-red-3000'
               : ''
@@ -37,6 +47,20 @@ const ConversationBubble = forwardRef<
           )}
           <p className="whitespace-pre-wrap break-words">{message}</p>
         </div>
+        <div
+          className={`mr-2 flex items-center justify-center ${
+            showFeedback ? '' : 'invisible'
+          }`}
+        >
+          <Like fill="none" className="hover:fill-gray-4000"></Like>
+        </div>
+        <div
+          className={`mr-10 flex items-center justify-center ${
+            showFeedback ? '' : 'invisible'
+          }`}
+        >
+          <Dislike fill="none" className="hover:fill-gray-4000"></Dislike>
+        </div>
       </div>
     );
   }