function MainComponent() { const [input, setInput] = React.useState(''); const [messages, setMessages] = React.useState([ { role: 'system', content: 'Welcome to the SpongeBob Choose Your Own Adventure! Make a choice and see what happens!' } ]); const [loading, setLoading] = React.useState(false); const [imageUrl, setImageUrl] = React.useState(''); const handleInput = (event)=>{ setInput(event.target.value); }; const handleSendMessage = async ()=>{ if (!input.trim()) return; setLoading(true); setMessages((prevMessages)=>[ ...prevMessages, { role: 'user', content: input } ]); try { const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: input } ], system_prompt: "You're in Bikini Bottom with SpongeBob. What do you do?", max_tokens: 150 }) }); const chatData = await chatResponse.json(); if (chatData && chatData.status) { setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: chatData.result } ]); const stableDiffusionResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent('SpongeBob ' + input)}&batch_size=1`, { method: 'GET' }); const stableDiffusionData = await stableDiffusionResponse.json(); if (stableDiffusionData && stableDiffusionData.data) { setImageUrl(stableDiffusionData.data[0]); } } } catch (error) { setMessages((prevMessages)=>[ ...prevMessages, { role: 'system', content: 'Oops! Something went wrong. Please try again later.' } ]); } setInput(''); setLoading(false); }; const handleKeyDown = (event)=>{ if (event.key === 'Enter') { handleSendMessage(); } }; const messageElements = messages.map((message, index)=>{ let messageStyles; switch(message.role){ case 'user': messageStyles = 'bg-[#e0e0e0] text-left self-start'; break; case 'assistant': messageStyles = 'bg-[#ffcd06] text-left self-start'; break; default: messageStyles = 'bg-[#32a852] text-white text-center'; } return /*#__PURE__*/ React.createElement("p", { key: index, className: `p-2 rounded my-1 ${messageStyles}`, __source: { fileName: "", lineNumber: 53, columnNumber: 12 }, __self: this }, message.content); }); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center p-4 bg-[#f7f7f7] min-h-screen", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-[#333333] my-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, "SpongeBob Adventure"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl overflow-auto p-4 border border-gray-300 h-[500px] mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, messageElements), imageUrl && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Imaginative scene in Bikini Bottom related to your adventure with SpongeBob", className: "w-full h-auto", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl flex mb-5", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "What's your next move?", className: "flex-1 p-2 border border-gray-300 rounded-l", value: input, onChange: handleInput, onKeyDown: handleKeyDown, disabled: loading, __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleSendMessage, className: "bg-[#ffcd06] text-[#333333] p-2 rounded-r", disabled: loading, __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this })))); }