function MainComponent() { const [messages, setMessages] = React.useState([]); const [isListening, setIsListening] = React.useState(false); const [recognizer, setRecognizer] = React.useState(null); React.useEffect(()=>{ if (!('webkitSpeechRecognition' in window)) { alert('Speech Recognition API is not available in this browser.'); return; } const SpeechRecognition = window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.continuous = false; recognition.interimResults = false; recognition.onresult = handleVoiceCommand; setRecognizer(recognition); }, []); const handleNewMessage = async (content)=>{ if (content.trim() === '') return; const userMessage = { text: content, isBot: false }; setMessages((prevMessages)=>[ ...prevMessages, userMessage ]); const botResponse = await getBotResponse(content); if (botResponse) { const botMessage = { text: botResponse, isBot: true }; setMessages((prevMessages)=>[ ...prevMessages, botMessage ]); } }; const getBotResponse = async (message)=>{ const responseData = await fetch('https://api.dialogs.com/interact', { method: 'POST', headers: { 'Authorization': 'Bearer DIALOGS_API_KEY', 'Content-Type': 'application/json' }, body: JSON.stringify({ message }) }).then((response)=>response.json()); return responseData.answer; }; const handleInputKeyPress = (e)=>{ if (e.key === 'Enter') { handleNewMessage(e.target.value); e.target.value = ""; } }; const handleSendClick = ()=>{ const inputEl = document.querySelector('input[name="message"]'); handleNewMessage(inputEl.value); inputEl.value = ""; }; const handleVoiceCommand = (event)=>{ const voiceTranscript = event.results[0][0].transcript; handleNewMessage(voiceTranscript); setIsListening(false); }; const toggleListening = ()=>{ if (isListening) { recognizer.stop(); } else { recognizer.start(); } setIsListening(!isListening); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f4f7f6] p-4", __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#121212] text-4xl mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, "AI Ervjoni"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-grow flex-col bg-white shadow-md rounded-lg border border-[#dddddd] w-full max-w-xl p-6 mb-6", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto flex-grow mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex mb-2 ${message.isBot ? 'justify-end' : 'justify-start'}`, __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `rounded px-4 py-2 ${message.isBot ? 'bg-[#e0e0e0]' : 'bg-[#4caf50] text-white'}`, __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, message.text)))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "Type your message...", className: "flex-1 border border-[#dddddd] rounded p-2 mr-2", onKeyPress: handleInputKeyPress, __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: toggleListening, className: `rounded p-2 px-4 mr-2 ${isListening ? 'bg-[#f44336]' : 'bg-[#e0e0e0]'}`, __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, isListening ? '🛑' : '🎤'), /*#__PURE__*/ React.createElement("button", { className: "bg-[#4caf50] text-white rounded p-2 px-4", onClick: handleSendClick, __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "Send"))), /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto text-sm text-[#575757]", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, "AI Ervjoni is always online, available to chat, and ready to assist you.")); }