stop button added
This commit is contained in:
parent
cc36fe740f
commit
81417073b9
|
|
@ -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
|
||||
${isListening ? 'bg-red-600 animate-pulse' : 'bg-gray-700 hover:bg-gray-600'}
|
||||
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}
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue