added stop button for live chat bot

src/components/ChatInterface.tsx

@@ -130,6 +130,12 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
     }
   };
 
+  const handleStopListening = () => {
+    if ('speechSynthesis' in window) {
+      window.speechSynthesis.cancel();
+    }
+  };
+
 
   const handleCreateTicketFromChat = async () => {
     if (!ticketFormData.requester.trim() || !ticketFormData.email.trim()) {
@@ -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' && (

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;