refactor: improve spacing for speech controls

frontend/src/components/chat/MessageBubble.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import ReactMarkdown, { type Components } from "react-markdown";
 import rehypeHighlight from "rehype-highlight";
 import remarkGfm from "remark-gfm";
 import type { ChatMsg } from "@/store/chat-store";
 import { api } from "@/lib/api";
-import { Brain, User, Copy, Check, Share2, Link2, X,Play,Pause } from "lucide-react";
+import { Brain, User, Copy, Check, Share2, Link2, X, Play, Pause } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
 interface Props {
@@ -41,7 +41,6 @@ const markdownComponents: Components = {
   ),
   code: ({ className, children, ...props }) => {
     const language = /language-(\w+)/.exec(className ?? "")?.[1];
-
     return (
       <code className={className} data-language={language} {...props}>
         {children}
@@ -58,6 +57,16 @@ export default function MessageBubble({ message }: Props) {
   const [isSpeaking, setIsSpeaking] = useState(false);
   const copiedTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const sharedTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const utteranceRef = useRef<SpeechSynthesisUtterance | null>(null);
+
+  // Component unmount ആകുമ്പോൾ speech cancel ചെയ്യും
+  useEffect(() => {
+    return () => {
+      if (utteranceRef.current) {
+        window.speechSynthesis.cancel();
+      }
+    };
+  }, []);
 
   const handleCopy = async () => {
     if (!message.content) return;
@@ -73,7 +82,6 @@ export default function MessageBubble({ message }: Props) {
 
   const handleShare = async () => {
     if (!message.content || message.isStreaming) return;
-
     try {
       const data = await api.post<{ message_id: string; share_url: string }>(
         `/api/v1/chat/share/${message.id}`
@@ -95,23 +103,34 @@ export default function MessageBubble({ message }: Props) {
       }, 2000);
     }
   };
-  
+
   const handleSpeech = () => {
-  if (!message.content) return;
+    if (!message.content || message.isStreaming) return;
 
-  if (isSpeaking) {
-    window.speechSynthesis.cancel();
-    setIsSpeaking(false);
-    return;
-  }
+    // Already speaking — cancel ചെയ്യും
+    if (isSpeaking) {
+      window.speechSynthesis.cancel();
+      setIsSpeaking(false);
+      utteranceRef.current = null;
+      return;
+    }
 
-  const utterance = new SpeechSynthesisUtterance(message.content);
+    const utterance = new SpeechSynthesisUtterance(message.content);
+    utteranceRef.current = utterance;
 
-  utterance.onstart = () => setIsSpeaking(true);
-  utterance.onend = () => setIsSpeaking(false);
+    utterance.onend = () => {
+      setIsSpeaking(false);
+      utteranceRef.current = null;
+    };
+    utterance.onerror = () => {
+      setIsSpeaking(false);
+      utteranceRef.current = null;
+    };
 
-  window.speechSynthesis.speak(utterance);
-};
+    // Chrome bug fix: onstart reliable അല്ല, speak() മുൻപ് set ചെയ്യണം
+    setIsSpeaking(true);
+    window.speechSynthesis.speak(utterance);
+  };
 
   return (
     <div
@@ -136,6 +155,7 @@ export default function MessageBubble({ message }: Props) {
           <>
             {message.content && (
               <>
+                {/* Share button */}
                 {!message.isStreaming && (
                   <Button
                     type="button"
@@ -158,6 +178,8 @@ export default function MessageBubble({ message }: Props) {
                     )}
                   </Button>
                 )}
+
+                {/* Copy button */}
                 <Button
                   type="button"
                   variant="ghost"
@@ -176,24 +198,31 @@ export default function MessageBubble({ message }: Props) {
                     <Copy className="w-3.5 h-3.5" />
                   )}
                 </Button>
+
+                {/* Play / Pause button */}
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-xs"
+                  className={`absolute top-2 right-16 text-muted-foreground hover:text-foreground transition-opacity ${
+                    isSpeaking
+                      ? "opacity-100"
+                      : "opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto"
+                  }`}
+                  onClick={handleSpeech}
+                  disabled={message.isStreaming}
+                  aria-label={isSpeaking ? "Stop speech" : "Play speech"}
+                >
+                  {isSpeaking ? (
+                    <Pause className="w-3.5 h-3.5 text-primary" />
+                  ) : (
+                    <Play className="w-3.5 h-3.5" />
+                  )}
+                </Button>
               </>
-              
             )}
-            <Button
-  type="button"
-  variant="ghost"
-  size="icon-xs"
-  className="absolute top-2 right-16 text-muted-foreground hover:text-foreground"
-  onClick={handleSpeech}
-  aria-label={isSpeaking ? "Pause speech" : "Play speech"}
->
-  {isSpeaking ? (
-    <Pause className="w-3.5 h-3.5" />
-  ) : (
-    <Play className="w-3.5 h-3.5" />
-  )}
-</Button>
-            <div className={`prose-chat text-sm ${message.content ? "pr-14" : ""}`}>
+
+            <div className={`prose-chat text-sm ${message.content ? "pr-20" : ""}`}>
               {message.content ? (
                 <ReactMarkdown
                   remarkPlugins={[remarkGfm]}
@@ -224,4 +253,4 @@ export default function MessageBubble({ message }: Props) {
       )}
     </div>
   );
-}
+}