Merge pull request #307 from A-adilajaleel/feat/speech-synthesis

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 } 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}
@@ -55,8 +54,19 @@ export default function MessageBubble({ message }: Props) {
   const [copied, setCopied] = useState(false);
   const [shared, setShared] = useState(false);
   const [shareFailed, setShareFailed] = useState(false);
+  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;
@@ -72,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,6 +104,34 @@ export default function MessageBubble({ message }: Props) {
     }
   };
 
+  const handleSpeech = () => {
+    if (!message.content || message.isStreaming) return;
+
+    // Already speaking — cancel ചെയ്യും
+    if (isSpeaking) {
+      window.speechSynthesis.cancel();
+      setIsSpeaking(false);
+      utteranceRef.current = null;
+      return;
+    }
+
+    const utterance = new SpeechSynthesisUtterance(message.content);
+    utteranceRef.current = utterance;
+
+    utterance.onend = () => {
+      setIsSpeaking(false);
+      utteranceRef.current = null;
+    };
+    utterance.onerror = () => {
+      setIsSpeaking(false);
+      utteranceRef.current = null;
+    };
+
+    // Chrome bug fix: onstart reliable അല്ല, speak() മുൻപ് set ചെയ്യണം
+    setIsSpeaking(true);
+    window.speechSynthesis.speak(utterance);
+  };
+
   return (
     <div
       className={`flex gap-3 py-3 animate-fade-in-up ${isUser ? "justify-end" : "justify-start"}`}
@@ -118,6 +155,7 @@ export default function MessageBubble({ message }: Props) {
           <>
             {message.content && (
               <>
+                {/* Share button */}
                 {!message.isStreaming && (
                   <Button
                     type="button"
@@ -140,6 +178,8 @@ export default function MessageBubble({ message }: Props) {
                     )}
                   </Button>
                 )}
+
+                {/* Copy button */}
                 <Button
                   type="button"
                   variant="ghost"
@@ -169,7 +209,8 @@ export default function MessageBubble({ message }: Props) {
                 )}
               </>
             )}
-            <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]}
@@ -200,4 +241,4 @@ export default function MessageBubble({ message }: Props) {
       )}
     </div>
   );
-}
+}