function MainComponent() { const [currentPage, setCurrentPage] = React.useState('home'); const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [localStream, setLocalStream] = React.useState(null); const [remoteStream, setRemoteStream] = React.useState(null); const [peerConnection, setPeerConnection] = React.useState(null); const [isCalling, setIsCalling] = React.useState(false); const [chatMessages, setChatMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const [localVideoPosition, setLocalVideoPosition] = React.useState({ x: 20, y: 20 }); const localVideoRef = React.useRef(null); const remoteVideoRef = React.useRef(null); React.useEffect(()=>{ if (currentPage === 'call' && isLoggedIn) { startLocalStream(); } return ()=>{ if (localStream) { localStream.getTracks().forEach((track)=>track.stop()); } }; }, [ currentPage, isLoggedIn ]); const startLocalStream = async ()=>{ try { const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); setLocalStream(stream); if (localVideoRef.current) { localVideoRef.current.srcObject = stream; } } catch (error) { console.error('Error accessing media devices:', error); } }; const createPeerConnection = ()=>{ const pc = new RTCPeerConnection(); pc.onicecandidate = (event)=>{ if (event.candidate) { console.error('New ICE candidate:', event.candidate); } }; pc.ontrack = (event)=>{ setRemoteStream(event.streams[0]); if (remoteVideoRef.current) { remoteVideoRef.current.srcObject = event.streams[0]; } }; localStream.getTracks().forEach((track)=>pc.addTrack(track, localStream)); setPeerConnection(pc); return pc; }; const startCall = async ()=>{ setIsCalling(true); const pc = createPeerConnection(); try { const offer = await pc.createOffer(); await pc.setLocalDescription(offer); console.error('Offer:', offer); } catch (error) { console.error('Error creating offer:', error); setIsCalling(false); } }; const answerCall = async (offer)=>{ const pc = createPeerConnection(); try { await pc.setRemoteDescription(new RTCSessionDescription(offer)); const answer = await pc.createAnswer(); await pc.setLocalDescription(answer); console.error('Answer:', answer); } catch (error) { console.error('Error answering call:', error); } }; const handleInputChange = (e)=>{ setInputMessage(e.target.value); }; const handleSendMessage = async ()=>{ if (inputMessage.trim() === '') return; const userMessage = { role: 'user', content: inputMessage }; setChatMessages([ ...chatMessages, userMessage ]); setInputMessage(''); setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...chatMessages, userMessage ] }) }); const data = await response.json(); if (data.status && data.choices && data.choices.length > 0) { const assistantMessage = { role: 'assistant', content: data.choices[0].message.content }; setChatMessages((prevMessages)=>[ ...prevMessages, assistantMessage ]); } } catch (error) { console.error('Error sending message:', error); } finally{ setIsLoading(false); } }; const handleLogin = (e)=>{ e.preventDefault(); if (username && password) { setIsLoggedIn(true); setCurrentPage('call'); } }; const handleDragStart = (e)=>{ const startX = e.clientX - localVideoPosition.x; const startY = e.clientY - localVideoPosition.y; const handleDrag = (e)=>{ setLocalVideoPosition({ x: e.clientX - startX, y: e.clientY - startY }); }; const handleDragEnd = ()=>{ document.removeEventListener('mousemove', handleDrag); document.removeEventListener('mouseup', handleDragEnd); }; document.addEventListener('mousemove', handleDrag); document.addEventListener('mouseup', handleDragEnd); }; const renderHome = ()=>/*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f8f9fa] p-4", __source: { fileName: "", lineNumber: 152, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl md:text-6xl font-playfair mb-8 text-[#2c3e50] text-center", __source: { fileName: "", lineNumber: 153, columnNumber: 7 }, __self: this }, "Deco Calling"), /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl mb-12 text-[#34495e] font-light text-center", __source: { fileName: "", lineNumber: 154, columnNumber: 7 }, __self: this }, "Elegant and simple video calls for everyone"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage('login'), className: "bg-[#3498db] text-white font-semibold py-3 px-8 md:py-4 md:px-10 rounded-full transition duration-300 ease-in-out hover:bg-[#2980b9] text-lg md:text-xl shadow-lg", __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, "Get Started")); const renderLogin = ()=>/*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f8f9fa] p-4", __source: { fileName: "", lineNumber: 165, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl md:text-4xl font-playfair mb-8 md:mb-12 text-[#2c3e50] text-center", __source: { fileName: "", lineNumber: 166, columnNumber: 7 }, __self: this }, "Login to Deco Calling"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "w-full max-w-md", __source: { fileName: "", lineNumber: 167, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", placeholder: "Username", value: username, onChange: (e)=>setUsername(e.target.value), className: "w-full mb-4 md:mb-6 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#3498db] text-lg", __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: "Password", value: password, onChange: (e)=>setPassword(e.target.value), className: "w-full mb-6 md:mb-8 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#3498db] text-lg", __source: { fileName: "", lineNumber: 176, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#3498db] text-white font-semibold py-3 px-8 md:py-4 md:px-8 rounded-full transition duration-300 ease-in-out hover:bg-[#2980b9] text-lg md:text-xl shadow-lg", __source: { fileName: "", lineNumber: 184, columnNumber: 9 }, __self: this }, "Login"))); const renderCall = ()=>/*#__PURE__*/ React.createElement("div", { className: "relative h-screen bg-[#f8f9fa] overflow-hidden", __source: { fileName: "", lineNumber: 195, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 196, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("video", { ref: remoteVideoRef, autoPlay: true, playsInline: true, className: "w-full h-full object-cover bg-black", __source: { fileName: "", lineNumber: 197, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute cursor-move", style: { top: `${localVideoPosition.y}px`, left: `${localVideoPosition.x}px` }, onMouseDown: handleDragStart, __source: { fileName: "", lineNumber: 199, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-32 h-48 md:w-48 md:h-64 rounded-lg overflow-hidden shadow-xl", __source: { fileName: "", lineNumber: 204, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("video", { ref: localVideoRef, autoPlay: true, muted: true, playsInline: true, className: "w-full h-full object-cover bg-black transform scale-x-[-1]", __source: { fileName: "", lineNumber: 205, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-4", __source: { fileName: "", lineNumber: 208, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startCall, disabled: isCalling, className: "bg-[#3498db] text-white font-semibold py-2 px-4 md:py-3 md:px-8 rounded-full transition duration-300 ease-in-out hover:bg-[#2980b9] text-sm md:text-lg shadow-md", __source: { fileName: "", lineNumber: 209, columnNumber: 9 }, __self: this }, isCalling ? 'Calling...' : 'Start Call'), /*#__PURE__*/ React.createElement("button", { onClick: ()=>answerCall({}), className: "bg-[#2ecc71] text-white font-semibold py-2 px-4 md:py-3 md:px-8 rounded-full transition duration-300 ease-in-out hover:bg-[#27ae60] text-sm md:text-lg shadow-md", __source: { fileName: "", lineNumber: 216, columnNumber: 9 }, __self: this }, "Answer Call"))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-[#f8f9fa]", __source: { fileName: "", lineNumber: 227, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#2c3e50] p-4 md:p-6 shadow-lg", __source: { fileName: "", lineNumber: 228, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-3xl md:text-4xl font-playfair", __source: { fileName: "", lineNumber: 229, columnNumber: 9 }, __self: this }, "Deco Calling")), currentPage === 'home' && renderHome(), currentPage === 'login' && renderLogin(), currentPage === 'call' && isLoggedIn && renderCall(), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 234, columnNumber: 7 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap'); body { margin: 0; font-family: 'Arial', sans-serif; } * { box-sizing: border-box; } `)); }