From 8ed04e496bc9a9d462a6a043db083665dc238472 Mon Sep 17 00:00:00 2001
From: bsu3338 <bsu3338@users.noreply.github.com>
Date: Sun, 3 Sep 2023 20:37:59 -0500
Subject: [PATCH] Update HoverButtons.tsx

---
 client/src/components/Messages/HoverButtons.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/client/src/components/Messages/HoverButtons.tsx b/client/src/components/Messages/HoverButtons.tsx
index 02368c0e0..dfa968ac0 100644
--- a/client/src/components/Messages/HoverButtons.tsx
+++ b/client/src/components/Messages/HoverButtons.tsx
@@ -48,6 +48,16 @@ export default function HoverButtons({
 
   return (
     <div className="visible mt-2 flex justify-center gap-3 self-end text-gray-400 md:gap-4 lg:absolute lg:right-0 lg:top-0 lg:mt-0 lg:translate-x-full lg:gap-1 lg:self-center lg:pl-2">
+      <button
+        className={cn(
+          'hover-button 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 md:invisible md:group-hover:visible',
+        )}
+        onClick={toggleSpeech}
+        type="button"
+        title={isSpeaking ? 'Mute' : 'Speak'}
+      >
+        {isSpeaking ? <VolumeMuteIcon /> : <VolumeIcon />}
+      </button>
       <button
         className={cn(
           'hover-button 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 md:invisible md:group-hover:visible',