function MainComponent() { const [messages, setMessages] = React.useState([ { role: "assistant", content: "Great Miss Bailey, how can I assist you today? 😄" } ]); const [isRecording, setIsRecording] = React.useState(false); const messageEndRef = React.useRef(null); const handleNewMessage = (message)=>{ setMessages((prevMessages)=>[ ...prevMessages, message ]); messageEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; const startRecording = async ()=>{ try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const mediaRecorder = new MediaRecorder(stream); let audioChunks = []; mediaRecorder.ondataavailable = (event)=>{ audioChunks.push(event.data); }; mediaRecorder.onstop = async ()=>{ const audioBlob = new Blob(audioChunks); const audioUrl = URL.createObjectURL(audioBlob); const formData = new FormData(); formData.append("file", audioBlob); const res = await fetch('/integrations/transcribe-audio-2/listen', { method: 'POST', body: audioBlob }); const { results } = await res.json(); const transcript = results.channels[0].alternatives[0].transcript; handleNewMessage({ role: "user", content: transcript }); fetchResponse(transcript); }; setIsRecording(true); mediaRecorder.start(); setTimeout(()=>{ mediaRecorder.stop(); setIsRecording(false); }, 5000); } catch (error) { console.error('Error accessing your microphone', error); } }; const fetchResponse = async (inputText)=>{ const response = await fetch('/integrations/groq/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": inputText } ] }) }); const data = await response.json(); const responseText = data.choices[0].message.content; handleNewMessage({ role: "assistant", content: responseText }); await fetch(`/integrations/text-to-speech/speech?text=${encodeURIComponent(responseText)}`, { method: 'GET' }).then((res)=>res.blob()).then((blob)=>{ const url = URL.createObjectURL(blob); new Audio(url).play(); }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 84, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startRecording, className: `w-[300px] h-[300px] rounded-full bg-gradient-to-r from-[#00D1FF] to-[#FF007F] animate-pulse ${isRecording ? 'animate-ping' : ''} cursor-pointer`, __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-microphone text-[150px] text-white`, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }), isRecording && /*#__PURE__*/ React.createElement("span", { className: "absolute right-0 top-0 text-[20px] text-white cursor-pointer", onClick: ()=>setIsRecording(false), __source: { fileName: "", lineNumber: 88, columnNumber: 27 }, __self: this }, "Stop")), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 -translate-y-1/2 left-full ml-8 w-[500px] h-[600px] bg-[#ffffff] p-8 shadow-xl rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-xl text-black mb-5", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "Chat with Miss Bailey's Assistant"), /*#__PURE__*/ React.createElement("div", { className: "h-[480px] overflow-auto font-crimson-text text-[#333] text-lg", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-2 ${msg.role === "user" ? "text-right" : "text-left"}`, __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `${msg.role === "user" ? "bg-blue-300" : "bg-pink-300"} rounded-lg p-3 inline-block`, __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, msg.content))), /*#__PURE__*/ React.createElement("div", { ref: messageEndRef, __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 1; } } @keyframes ping { 0%, 75% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.2); opacity: 1; } } `)); }