function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(''); const handleInputChange = (event)=>{ setInputValue(event.target.value); }; const handleSendMessage = ()=>{ if (inputValue.trim()) { setMessages((prevMessages)=>[ ...prevMessages, { text: inputValue, sender: 'user' } ]); setInputValue(''); } }; const handleSpeechInput = ()=>{ const recognition = new window.webkitSpeechRecognition(); recognition.lang = 'en-US'; recognition.start(); recognition.onresult = (event)=>{ const speechResult = event.results[0][0].transcript; setMessages((prevMessages)=>[ ...prevMessages, { text: speechResult, sender: 'user' } ]); }; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#F0F2F5] p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center text-[#121212] mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "AI Ervjon"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col border-2 border-[#DADDE1] rounded-lg p-4 mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2 flex", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userInput", placeholder: "Type your message...", className: "flex-1 p-2 border border-[#DADDE1] rounded-lg mr-2 font-roboto", onChange: handleInputChange, value: inputValue, onKeyDown: (e)=>e.key === 'Enter' && handleSendMessage(), __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-10 h-10 flex items-center justify-center bg-[#4267B2] text-white rounded-full", onClick: handleSpeechInput, __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-microphone", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto max-h-64", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 ${message.sender === 'user' ? 'self-end' : 'self-start'} bg-[#E4E6EB] rounded-lg my-1`, __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, message.text)))), /*#__PURE__*/ React.createElement("button", { className: "w-full p-3 bg-[#4267B2] text-white font-semibold rounded-md", onClick: handleSendMessage, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Send"))); }