SHREY/Project
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

added stop button for live chat bot

Browse source
This commit is contained in:
Harith_dml 2025-06-30 16:45:11 +05:30
parent 497da3c850
commit 8b49ee3e76
2 changed files with 63 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
src/components/ChatInterface.tsx
View file

@ -59,17 +59,17 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
}, []); }, []);
const speak = (text: string) => { const speak = (text: string) => {
if ('speechSynthesis' in window) { if ('speechSynthesis' in window) {
const utterance = new SpeechSynthesisUtterance(text); const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'en-US'; utterance.lang = 'en-US';
utterance.pitch = 1; utterance.pitch = 1;
utterance.rate = 1; utterance.rate = 1;
utterance.volume = 1; utterance.volume = 1;
window.speechSynthesis.speak(utterance); window.speechSynthesis.speak(utterance);
} else { } else {
console.warn('Speech synthesis not supported in this browser.'); console.warn('Speech synthesis not supported in this browser.');
} }
}; };
const handleSend = async (messageOverride?: string) => { const handleSend = async (messageOverride?: string) => {
const messageToSend = messageOverride ?? input; const messageToSend = messageOverride ?? input;
@ -121,14 +121,20 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
}; };
const handleMicClick = () => { const handleMicClick = () => {
if (recognitionRef.current) { if (recognitionRef.current) {
if (isListening) { if (isListening) {
recognitionRef.current.stop(); recognitionRef.current.stop();
} else { } else {
recognitionRef.current.start(); recognitionRef.current.start();
}
} }
} };
};
const handleStopListening = () => {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
}
};
const handleCreateTicketFromChat = async () => { const handleCreateTicketFromChat = async () => {
@ -208,14 +214,14 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
)} )}
<div <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-blue-600 text-white'
: 'bg-gray-800 text-gray-100 border border-gray-700' : 'bg-gray-800 text-gray-100 border border-gray-700'
}`} }`}
> >
<p className="whitespace-pre-wrap leading-relaxed">{message.content}</p> <p className="whitespace-pre-wrap leading-relaxed">{message.content}</p>
<p className="text-xs opacity-70 mt-2">{message.timestamp}</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> </div>
{message.role === 'user' && ( {message.role === 'user' && (
@ -316,34 +322,34 @@ export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket })
<div className="flex gap-3"> <div className="flex gap-3">
<button <button
onClick={handleMicClick} 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`} text-white disabled:opacity-50 disabled:cursor-not-allowed hover:scale-105`}
disabled={isLoading} disabled={isLoading}
title={isListening ? "Stop Listening" : "Start Voice Input"} title={isListening ? "Stop Listening" : "Start Voice Input"}
> >
{isListening ? ( {isListening ? (
<MicOff className="w-5 h-5" /> <MicOff className="w-5 h-5" />
) : ( ) : (
<Mic className="w-5 h-5" /> <Mic className="w-5 h-5" />
)} )}
{isListening && ( {isListening && (
<span className="absolute -bottom-6 text-xs text-red-400 animate-pulse">Listening...</span> <span className="absolute -bottom-6 text-xs text-red-400 animate-pulse">Listening...</span>
)} )}
</button> </button>
<button <button
onClick={() => handleSend()} onClick={() => handleSend()}
disabled={!input.trim() || isLoading} 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" 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" /> <Send className="w-5 h-5" />
</button> </button>
</div> </div>
</div> </div>
</div> </div>

1
src/services/speechService.ts
View file

@ -24,6 +24,7 @@ export class SpeechService {
): void { ): void {
if (!this.recognition || this.isListening) return; if (!this.recognition || this.isListening) return;
this.recognition.onresult = (event) => { this.recognition.onresult = (event) => {
let transcript = ''; let transcript = '';
let confidence = 0; let confidence = 0;