added stop button for live chat bot

src/components/ChatInterface.tsx

@@ -59,17 +59,17 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
   }, []);
 
   const speak = (text: string) => {
-  if ('speechSynthesis' in window) {
-    const utterance = new SpeechSynthesisUtterance(text);
-    utterance.lang = 'en-US';
-    utterance.pitch = 1;
-    utterance.rate = 1;
-    utterance.volume = 1;
-    window.speechSynthesis.speak(utterance);
-  } else {
-    console.warn('Speech synthesis not supported in this browser.');
-  }
-};
+    if ('speechSynthesis' in window) {
+      const utterance = new SpeechSynthesisUtterance(text);
+      utterance.lang = 'en-US';
+      utterance.pitch = 1;
+      utterance.rate = 1;
+      utterance.volume = 1;
+      window.speechSynthesis.speak(utterance);
+    } else {
+      console.warn('Speech synthesis not supported in this browser.');
+    }
+  };
 
   const handleSend = async (messageOverride?: string) => {
     const messageToSend = messageOverride ?? input;
@@ -121,14 +121,20 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
   };
 
   const handleMicClick = () => {
-  if (recognitionRef.current) {
-    if (isListening) {
-      recognitionRef.current.stop();
-    } else {
-      recognitionRef.current.start();
+    if (recognitionRef.current) {
+      if (isListening) {
+        recognitionRef.current.stop();
+      } else {
+        recognitionRef.current.start();
+      }
     }
-  }
-};
+  };
+
+  const handleStopListening = () => {
+    if ('speechSynthesis' in window) {
+      window.speechSynthesis.cancel();
+    }
+  };
 
 
   const handleCreateTicketFromChat = async () => {
@@ -208,14 +214,14 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
             )}
 
             <div
-              className={`max-w-[70%] p-3 rounded-lg ${
-                message.role === 'user'
+              className={`max-w-[70%] p-3 rounded-lg ${message.role === 'user'
                   ? 'bg-blue-600 text-white'
                   : 'bg-gray-800 text-gray-100 border border-gray-700'
-              }`}
+                }`}
             >
               <p className="whitespace-pre-wrap leading-relaxed">{message.content}</p>
               <p className="text-xs opacity-70 mt-2">{message.timestamp}</p>
+              {message.role !== 'user' && (<button className= "text-red-800" onClick={handleStopListening}>Stop</button>)}
             </div>
 
             {message.role === 'user' && (
@@ -316,34 +322,34 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
           <div className="flex gap-3">
 
 
- <button
-  onClick={handleMicClick}
-  className={`relative flex items-center justify-center px-4 py-3 rounded-lg transition-all duration-200 
+            <button
+              onClick={handleMicClick}
+              className={`relative flex items-center justify-center px-4 py-3 rounded-lg transition-all duration-200 
     ${isListening ? 'bg-red-600 animate-pulse' : 'bg-gray-700 hover:bg-gray-600'} 
     text-white disabled:opacity-50 disabled:cursor-not-allowed hover:scale-105`}
-  disabled={isLoading}
-  title={isListening ? "Stop Listening" : "Start Voice Input"}
->
-  {isListening ? (
-    <MicOff className="w-5 h-5" />
-  ) : (
-    <Mic className="w-5 h-5" />
-  )}
+              disabled={isLoading}
+              title={isListening ? "Stop Listening" : "Start Voice Input"}
+            >
+              {isListening ? (
+                <MicOff className="w-5 h-5" />
+              ) : (
+                <Mic className="w-5 h-5" />
+              )}
 
-  {isListening && (
-    <span className="absolute -bottom-6 text-xs text-red-400 animate-pulse">Listening...</span>
-  )}
-</button>
+              {isListening && (
+                <span className="absolute -bottom-6 text-xs text-red-400 animate-pulse">Listening...</span>
+              )}
+            </button>
 
 
-  <button
-    onClick={() => handleSend()}
-    disabled={!input.trim() || isLoading}
-    className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white rounded-lg transition-all duration-200 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
-  >
-    <Send className="w-5 h-5" />
-  </button>
-</div>
+            <button
+              onClick={() => handleSend()}
+              disabled={!input.trim() || isLoading}
+              className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white rounded-lg transition-all duration-200 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              <Send className="w-5 h-5" />
+            </button>
+          </div>
 
         </div>
       </div>

src/services/speechService.ts

@@ -24,6 +24,7 @@ export class SpeechService {
   ): void {
     if (!this.recognition || this.isListening) return;
     
+
     this.recognition.onresult = (event) => {
       let transcript = '';
       let confidence = 0;