From 81417073b90c01c892b8dc79613911a64217ce4b Mon Sep 17 00:00:00 2001 From: Harith_dml Date: Mon, 30 Jun 2025 16:53:27 +0530 Subject: [PATCH] stop button added --- src/components/ChatInterface.tsx | 88 ++++++++++++++++---------------- 1 file changed, 44 insertions(+), 44 deletions(-) diff --git a/src/components/ChatInterface.tsx b/src/components/ChatInterface.tsx index 04e52f6..e0ed060 100644 --- a/src/components/ChatInterface.tsx +++ b/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 = ({ onCreateTicket }) => { const [messages, setMessages] = useState([ { @@ -26,20 +26,20 @@ export const ChatInterface: React.FC = ({ onCreateTicket }) const [chatService] = useState(() => new ChatService()); const [isListening, setIsListening] = useState(false); const recognitionRef = useRef(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 = ({ 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 = ({ 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 = ({ 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 = ({ 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 = ({ onCreateTicket }) ticketFormData.email, messages ); - + // Show success message const successMessage: ChatMessage = { id: (Date.now() + 2).toString(), @@ -157,7 +157,7 @@ export const ChatInterface: React.FC = ({ 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 = ({ onCreateTicket }) setIsCreatingTicket(false); } }; - + return (
{/* Header */} @@ -188,7 +188,7 @@ export const ChatInterface: React.FC = ({ onCreateTicket })

Ask me anything about IT issues

- + {messages.length > 1 && !showTicketForm && ( )} - + {/* Messages */}
{messages.map((message) => ( @@ -212,7 +212,7 @@ export const ChatInterface: React.FC = ({ onCreateTicket })
)} - +
= ({ onCreateTicket })

{message.timestamp}

{message.role !== 'user' && ()}
- + {message.role === 'user' && (
@@ -231,7 +231,7 @@ export const ChatInterface: React.FC = ({ onCreateTicket }) )}
))} - + {isLoading && (
@@ -245,7 +245,7 @@ export const ChatInterface: React.FC = ({ onCreateTicket })
)} - + {/* Ticket Creation Form */} {showTicketForm && (
@@ -253,7 +253,7 @@ export const ChatInterface: React.FC = ({ onCreateTicket })

Create Support Ticket

- +
= ({ 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} /> - + = ({ 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 */}
@@ -320,12 +320,12 @@ export const ChatInterface: React.FC = ({ onCreateTicket }) disabled={isLoading} />
- - + + - - + +
- +