stop button added

src/components/ChatInterface.tsx

@@ -3,11 +3,11 @@ import { Send, Bot, User, Loader, MessageSquare, UserPlus } from 'lucide-react';
 import { ChatMessage } from '../types';
 import { ChatService } from '../services/chatService';
 import { Mic, MicOff } from 'lucide-react';
-
+ 
 interface ChatInterfaceProps {
   onCreateTicket?: (conversation: string) => void;
 }
-
+ 
 export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket }) => {
   const [messages, setMessages] = useState<ChatMessage[]>([
     {
@@ -26,20 +26,20 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
   const [chatService] = useState(() => new ChatService());
   const [isListening, setIsListening] = useState(false);
   const recognitionRef = useRef<SpeechRecognition | null>(null);
-
+ 
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   };
-
+ 
   useEffect(() => {
     const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
-
+ 
     if (SpeechRecognition) {
       const recognition = new SpeechRecognition();
       recognition.lang = 'en-US';
       recognition.interimResults = false;
       recognition.maxAlternatives = 1;
-
+ 
       recognition.onstart = () => setIsListening(true);
       recognition.onend = () => setIsListening(false);
       recognition.onerror = (e: any) => {
@@ -51,13 +51,13 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
         setInput(transcript);
         handleSend(transcript);
       };
-
+ 
       recognitionRef.current = recognition;
     } else {
       console.warn('SpeechRecognition is not supported in this browser.');
     }
   }, []);
-
+ 
   const speak = (text: string) => {
     if ('speechSynthesis' in window) {
       const utterance = new SpeechSynthesisUtterance(text);
@@ -70,32 +70,32 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
       console.warn('Speech synthesis not supported in this browser.');
     }
   };
-
+ 
   const handleSend = async (messageOverride?: string) => {
     const messageToSend = messageOverride ?? input;
     if (!messageToSend.trim() || isLoading) return;
-
+ 
     const userMessage: ChatMessage = {
       id: Date.now().toString(),
       role: 'user',
       content: messageToSend,
       timestamp: new Date().toLocaleString()
     };
-
+ 
     setMessages(prev => [...prev, userMessage]);
     setInput('');
     setIsLoading(true);
-
+ 
     try {
       const response = await chatService.sendMessage([...messages, userMessage]);
-
+ 
       const assistantMessage: ChatMessage = {
         id: (Date.now() + 1).toString(),
         role: 'assistant',
         content: response,
         timestamp: new Date().toLocaleString()
       };
-
+ 
       setMessages(prev => [...prev, assistantMessage]);
       speak(response);
     } catch (error) {
@@ -111,15 +111,15 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
       setIsLoading(false);
     }
   };
-
+ 
-
+ 
   const handleKeyPress = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       handleSend();
     }
   };
-
+ 
   const handleMicClick = () => {
     if (recognitionRef.current) {
       if (isListening) {
@@ -129,19 +129,19 @@ 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()) {
       return;
     }
-
+ 
     setIsCreatingTicket(true);
     try {
       const ticket = await chatService.createTicketFromConversation(
@@ -149,7 +149,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
         ticketFormData.email,
         messages
       );
-
+ 
       // Show success message
       const successMessage: ChatMessage = {
         id: (Date.now() + 2).toString(),
@@ -157,7 +157,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
         content: `Great! I've created a support ticket for you. Your ticket ID is ${ticket.id}. Our ${ticket.department} team will review your request and get back to you soon.`,
         timestamp: new Date().toLocaleString()
       };
-
+ 
       setMessages(prev => [...prev, successMessage]);
       setShowTicketForm(false);
       setTicketFormData({ requester: '', email: '' });
@@ -174,7 +174,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
       setIsCreatingTicket(false);
     }
   };
-
+ 
   return (
     <div className="bg-gray-900 rounded-xl border border-gray-800 h-[600px] flex flex-col">
       {/* Header */}
@@ -188,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)}
@@ -199,7 +199,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
           </button>
         )}
       </div>
-
+ 
       {/* Messages */}
       <div className="flex-1 overflow-y-auto p-4 space-y-4">
         {messages.map((message) => (
@@ -212,7 +212,7 @@ 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 ${message.role === 'user'
                   ? 'bg-blue-600 text-white'
@@ -223,7 +223,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
               <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" />
@@ -231,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">
@@ -245,7 +245,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
             </div>
           </div>
         )}
-
+ 
         {/* Ticket Creation Form */}
         {showTicketForm && (
           <div className="bg-gray-800 border border-gray-700 rounded-lg p-4">
@@ -253,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"
@@ -263,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"
@@ -272,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}
@@ -291,7 +291,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
                     </>
                   )}
                 </button>
-
+ 
                 <button
                   onClick={() => setShowTicketForm(false)}
                   disabled={isCreatingTicket}
@@ -303,10 +303,10 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
             </div>
           </div>
         )}
-
+ 
         <div ref={messagesEndRef} />
       </div>
-
+ 
       {/* Input */}
       <div className="p-4 border-t border-gray-800">
         <div className="flex gap-3">
@@ -320,12 +320,12 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
             disabled={isLoading}
           />
           <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 
+              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'} 
+    ${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"}
@@ -335,13 +335,13 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
               ) : (
                 <Mic className="w-5 h-5" />
               )}
-
+ 
               {isListening && (
                 <span className="absolute -bottom-6 text-xs text-red-400 animate-pulse">Listening...</span>
               )}
             </button>
-
+ 
-
+ 
             <button
               onClick={() => handleSend()}
               disabled={!input.trim() || isLoading}
@@ -350,7 +350,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
               <Send className="w-5 h-5" />
             </button>
           </div>
-
+ 
         </div>
       </div>
     </div>