add hoverbuttons

src/components/Messages/Embed.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Clipboard from '../svg/Clipboard';
 
 export default function Embed({ children, language = '', matched}) {

src/components/Messages/HoverButtons.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+// import Clipboard from '../svg/Clipboard';
+import EditIcon from '../svg/EditIcon';
+
+export default function HoverButtons({ user }) {
+  return (
+
+      <div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:top-0 lg:right-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
+        {user && (
+          <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400">
+            <EditIcon />
+          </button>
+        )}
+        {/* <button className="rounded-md p-1 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400">
+          <Clipboard />
+        </button> */}
+      </div>
+  );
+}

src/components/Messages/Message.jsx

@@ -3,6 +3,7 @@ import TextWrapper from './TextWrapper';
 import { useSelector } from 'react-redux';
 import GPTIcon from '../svg/GPTIcon';
 import BingIcon from '../svg/BingIcon';
+import HoverButtons from './HoverButtons';
 
 export default function Message({
   sender,
@@ -13,6 +14,7 @@ export default function Message({
 }) {
   const { isSubmitting } = useSelector((state) => state.submit);
   const [abortScroll, setAbort] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
   const notUser = sender.toLowerCase() !== 'user';
   const blinker = isSubmitting && last && notUser;
 
@@ -30,6 +32,14 @@ export default function Message({
     }
   };
 
+  const handleMouseOver = () => {
+    setIsHovering(true);
+  };
+
+  const handleMouseOut = () => {
+    setIsHovering(false);
+  };
+
   const props = {
     className:
       'w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800'
@@ -38,7 +48,7 @@ export default function Message({
   const bgColors = {
     chatgpt: 'rgb(16, 163, 127)',
     chatgptBrowser: 'rgb(25, 207, 207)',
-    bingai: '',
+    bingai: ''
   };
 
   let icon = `${sender}:`;
@@ -63,6 +73,8 @@ export default function Message({
     <div
       {...props}
       onWheel={handleWheel}
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
     >
       <div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
         <strong className="relative flex w-[30px] flex-col items-end">{icon}</strong>
@@ -84,6 +96,9 @@ export default function Message({
               </div>
             )}
           </div>
+          <div className="flex justify-between">
+            {isHovering && <HoverButtons user={!notUser} />}
+          </div>
         </div>
       </div>
     </div>

src/components/svg/DislikeIcon.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function DislikeIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path>
+    </svg>
+  );
+}

src/components/svg/EditIcon.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export default function EditIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+    </svg>
+  );
+}

src/components/svg/LikeIcon.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function LikeIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="h-4 w-4"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
+    </svg>
+  );
+}