function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const messagesEndRef = React.useRef(null); React.useEffect(()=>{ handleStevesResponse("Think different."); }, []); React.useEffect(()=>{ scrollToBottom(); }, [ messages ]); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; const handleStevesResponse = async (userMessage)=>{ setIsLoading(true); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are Steve Jobs. Respond as if you were him, keeping responses concise and to the point. Do not introduce yourself." }, ...messages.map((message)=>({ role: message.sender === "Steve" ? "assistant" : "user", content: message.text })), { role: "user", content: userMessage } ] }) }); const data = await response.json(); if (data.status && data.choices && data.choices[0] && data.choices[0].message) { const stevesResponse = data.choices[0].message.content; setMessages((prev)=>[ ...prev, { sender: "Steve", text: stevesResponse } ]); } } catch (error) { console.error("Error:", error); } finally{ setIsLoading(false); } }; const handleSendMessage = ()=>{ if (inputMessage.trim() !== "") { setMessages((prev)=>[ ...prev, { sender: "User", text: inputMessage } ]); handleStevesResponse(inputMessage); setInputMessage(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100", __source: { fileName: "", lineNumber: 71, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4 bg-white", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Steve_Jobs_Headshot_2010-CROP_%28cropped_2%29.jpg/1920px-Steve_Jobs_Headshot_2010-CROP_%28cropped_2%29.jpg", alt: "Steve Jobs headshot", className: "w-20 h-20 rounded-full object-cover", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "mt-2 text-xl font-semibold font-sans", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "Steve Jobs")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 bg-[#F5F5F5]", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.sender === "User" ? "justify-end" : "justify-start"} mb-4`, __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `rounded-3xl p-3 max-w-xs lg:max-w-md ${message.sender === "User" ? "bg-[#007AFF] text-white" : "bg-[#E9E9EB] text-black"}`, __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, message.text))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#E9E9EB] rounded-3xl p-3 text-black", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-ellipsis-h", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-[#F5F5F5] p-4", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex rounded-full bg-white border border-gray-300", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "iMessage", className: "flex-grow px-4 py-2 rounded-l-full focus:outline-none", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), onKeyPress: (e)=>e.key === "Enter" && handleSendMessage(), __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, className: "bg-white text-[#007AFF] rounded-r-full px-4 py-2", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-up", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }))))); }