added stop button for live chat bot

src/components/ChatInterface.tsx

@@ -57,19 +57,19 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
       console.warn('SpeechRecognition is not supported in this browser.');
     }
   }, []);
-  
+
   const speak = (text: string) => {
-  if ('speechSynthesis' in window) {
+    if ('speechSynthesis' in window) {
-    const utterance = new SpeechSynthesisUtterance(text);
+      const utterance = new SpeechSynthesisUtterance(text);
-    utterance.lang = 'en-US';
+      utterance.lang = 'en-US';
-    utterance.pitch = 1;
+      utterance.pitch = 1;
-    utterance.rate = 1;
+      utterance.rate = 1;
-    utterance.volume = 1;
+      utterance.volume = 1;
-    window.speechSynthesis.speak(utterance);
+      window.speechSynthesis.speak(utterance);
-  } else {
+    } else {
-    console.warn('Speech synthesis not supported in this browser.');
+      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 (recognitionRef.current) {
-    if (isListening) {
+      if (isListening) {
-      recognitionRef.current.stop();
+        recognitionRef.current.stop();
-    } else {
+      } else {
-      recognitionRef.current.start();
+        recognitionRef.current.start();
+      }
     }
-  }
+  };
-};
+
+  const handleStopListening = () => {
+    if ('speechSynthesis' in window) {
+      window.speechSynthesis.cancel();
+    }
+  };
 
 
   const handleCreateTicketFromChat = async () => {
@@ -182,7 +188,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
             <p className="text-sm text-gray-400">Ask me anything about IT issues</p>
           </div>
         </div>
-        
+
         {messages.length > 1 && !showTicketForm && (
           <button
             onClick={() => setShowTicketForm(true)}
@@ -206,18 +212,18 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
                 <Bot className="w-4 h-4 text-white" />
               </div>
             )}
-            
+
             <div
-              className={`max-w-[70%] p-3 rounded-lg ${
+              className={`max-w-[70%] p-3 rounded-lg ${message.role === 'user'
-                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' && (
               <div className="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0">
                 <User className="w-4 h-4 text-gray-300" />
@@ -225,7 +231,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
             )}
           </div>
         ))}
-        
+
         {isLoading && (
           <div className="flex gap-3 justify-start">
             <div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center">
@@ -247,7 +253,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
               <UserPlus className="w-5 h-5 text-green-400" />
               <h4 className="text-white font-medium">Create Support Ticket</h4>
             </div>
-            
+
             <div className="space-y-3">
               <input
                 type="text"
@@ -257,7 +263,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
                 className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
                 disabled={isCreatingTicket}
               />
-              
+
               <input
                 type="email"
                 placeholder="Your email address"
@@ -266,7 +272,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
                 className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
                 disabled={isCreatingTicket}
               />
-              
+
               <div className="flex gap-2">
                 <button
                   onClick={handleCreateTicketFromChat}
@@ -285,7 +291,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
                     </>
                   )}
                 </button>
-                
+
                 <button
                   onClick={() => setShowTicketForm(false)}
                   disabled={isCreatingTicket}
@@ -297,7 +303,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
             </div>
           </div>
         )}
-        
+
         <div ref={messagesEndRef} />
       </div>
 
@@ -315,35 +321,35 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
           />
           <div className="flex gap-3">
 
-  
+
- <button
+            <button
-  onClick={handleMicClick}
+              onClick={handleMicClick}
-  className={`relative flex items-center justify-center px-4 py-3 rounded-lg transition-all duration-200 
+              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}
+              disabled={isLoading}
-  title={isListening ? "Stop Listening" : "Start Voice Input"}
+              title={isListening ? "Stop Listening" : "Start Voice Input"}
->
+            >
-  {isListening ? (
+              {isListening ? (
-    <MicOff className="w-5 h-5" />
+                <MicOff className="w-5 h-5" />
-  ) : (
+              ) : (
-    <Mic className="w-5 h-5" />
+                <Mic className="w-5 h-5" />
-  )}
+              )}
-  
+
-  {isListening && (
+              {isListening && (
-    <span className="absolute -bottom-6 text-xs text-red-400 animate-pulse">Listening...</span>
+                <span className="absolute -bottom-6 text-xs text-red-400 animate-pulse">Listening...</span>
-  )}
+              )}
-</button>
+            </button>
 
 
-  <button
+            <button
-    onClick={() => handleSend()}
+              onClick={() => handleSend()}
-    disabled={!input.trim() || isLoading}
+              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"
+              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" />
+              <Send className="w-5 h-5" />
-  </button>
+            </button>
-</div>
+          </div>
 
         </div>
       </div>

src/services/speechService.ts

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