added stop button for live chat bot

src/components/ChatInterface.tsx

@@ -69,7 +69,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
     } else {
       console.warn('Speech synthesis not supported in this browser.');
     }
-};
+  };
 
   const handleSend = async (messageOverride?: string) => {
     const messageToSend = messageOverride ?? input;
@@ -128,7 +128,13 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
         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 ${
+              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' && (
@@ -323,7 +329,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
     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" />
               ) : (
@@ -333,7 +339,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
               {isListening && (
                 <span className="absolute -bottom-6 text-xs text-red-400 animate-pulse">Listening...</span>
               )}
-</button>
+            </button>
 
 
             <button
@@ -343,7 +349,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
             >
               <Send className="w-5 h-5" />
             </button>
-</div>
+          </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;