added stop button for live chat bot
This commit is contained in:
parent
497da3c850
commit
8b49ee3e76
|
|
@ -57,19 +57,19 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
|
|||
console.warn('SpeechRecognition is not supported in this browser.');
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
||||
const speak = (text: string) => {
|
||||
if ('speechSynthesis' in window) {
|
||||
const utterance = new SpeechSynthesisUtterance(text);
|
||||
utterance.lang = 'en-US';
|
||||
utterance.pitch = 1;
|
||||
utterance.rate = 1;
|
||||
utterance.volume = 1;
|
||||
window.speechSynthesis.speak(utterance);
|
||||
} else {
|
||||
console.warn('Speech synthesis not supported in this browser.');
|
||||
}
|
||||
};
|
||||
if ('speechSynthesis' in window) {
|
||||
const utterance = new SpeechSynthesisUtterance(text);
|
||||
utterance.lang = 'en-US';
|
||||
utterance.pitch = 1;
|
||||
utterance.rate = 1;
|
||||
utterance.volume = 1;
|
||||
window.speechSynthesis.speak(utterance);
|
||||
} else {
|
||||
console.warn('Speech synthesis not supported in this browser.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSend = async (messageOverride?: string) => {
|
||||
const messageToSend = messageOverride ?? input;
|
||||
|
|
@ -121,14 +121,20 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
|
|||
};
|
||||
|
||||
const handleMicClick = () => {
|
||||
if (recognitionRef.current) {
|
||||
if (isListening) {
|
||||
recognitionRef.current.stop();
|
||||
} else {
|
||||
recognitionRef.current.start();
|
||||
if (recognitionRef.current) {
|
||||
if (isListening) {
|
||||
recognitionRef.current.stop();
|
||||
} else {
|
||||
recognitionRef.current.start();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const handleStopListening = () => {
|
||||
if ('speechSynthesis' in window) {
|
||||
window.speechSynthesis.cancel();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleCreateTicketFromChat = async () => {
|
||||
|
|
@ -182,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)}
|
||||
|
|
@ -206,18 +212,18 @@ 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'
|
||||
className={`max-w-[70%] p-3 rounded-lg ${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' && (
|
||||
<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" />
|
||||
|
|
@ -225,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">
|
||||
|
|
@ -247,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"
|
||||
|
|
@ -257,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"
|
||||
|
|
@ -266,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}
|
||||
|
|
@ -285,7 +291,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
|
|||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
|
||||
<button
|
||||
onClick={() => setShowTicketForm(false)}
|
||||
disabled={isCreatingTicket}
|
||||
|
|
@ -297,7 +303,7 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
|
||||
|
|
@ -315,35 +321,35 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
|
|||
/>
|
||||
<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
|
||||
|
||||
<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'}
|
||||
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" />
|
||||
) : (
|
||||
<Mic className="w-5 h-5" />
|
||||
)}
|
||||
|
||||
{isListening && (
|
||||
<span className="absolute -bottom-6 text-xs text-red-400 animate-pulse">Listening...</span>
|
||||
)}
|
||||
</button>
|
||||
disabled={isLoading}
|
||||
title={isListening ? "Stop Listening" : "Start Voice Input"}
|
||||
>
|
||||
{isListening ? (
|
||||
<MicOff className="w-5 h-5" />
|
||||
) : (
|
||||
<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}
|
||||
className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white rounded-lg transition-all duration-200 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Send className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleSend()}
|
||||
disabled={!input.trim() || isLoading}
|
||||
className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white rounded-lg transition-all duration-200 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Send className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ export class SpeechService {
|
|||
onError: (error: string) => void
|
||||
): void {
|
||||
if (!this.recognition || this.isListening) return;
|
||||
|
||||
|
||||
this.recognition.onresult = (event) => {
|
||||
let transcript = '';
|
||||
|
|
|
|||
Loading…
Reference in a new issue