function MainComponent({ characterImage, chatHistory, sendMessage }) { const [message, setMessage] = React.useState(''); const handleMessageChange = (event)=>{ setMessage(event.target.value); }; const handleSendMessage = ()=>{ sendMessage(message); setMessage(''); }; return /*#__PURE__*/ React.createElement("div", { className: "h-[2220px] w-[1080px] bg-[#f0f0f0] flex flex-col", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-[720px]", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: characterImage, alt: "Animated character: Enchanting and beautifully sexy woman", className: "h-[720px] w-[720px]", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-auto", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, chatHistory.map((chat, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-4 ${chat.role === 'user' ? 'text-right' : 'text-left'}`, __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "inline-block bg-[#d1eefc] rounded-lg px-4 py-2", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, chat.content)))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center p-4 bg-[#ffffff]", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "Type a message", className: "flex-grow border-2 border-[#d1eefc] rounded-lg py-2 px-4", value: message, onChange: handleMessageChange, __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-4 bg-[#007bff] text-white font-semibold py-2 px-4 rounded-lg", onClick: handleSendMessage, __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Send"))); } function StoryComponent() { const [characterImage, setCharacterImage] = React.useState("https://fal-cdn.batuhan-941.workers.dev/files/elephant/y_nTa5HSjqbEuoL5MLnfT.jpeg"); const [chatHistory, setChatHistory] = React.useState([ { role: "user", content: "Hello! How are you?" }, { role: "assistant", content: "I'm great, thank you! How can I assist you today?" } ]); const sendMessage = (userMessage)=>{ setChatHistory((prevHistory)=>[ ...prevHistory, { role: "user", content: userMessage } ]); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": userMessage } ], system_prompt: 'React as a charming and enchanting woman.' }) }).then((response)=>response.json()).then((data)=>{ setChatHistory((prevHistory)=>[ ...prevHistory, { role: "assistant", content: data.choices[0].message.content } ]); fetch('/integrations/stable-diffusion/?prompt=charming and enchanting woman, anime style', { method: 'GET' }).then((response)=>response.json()).then((imageData)=>{ setCharacterImage(imageData.data[0]); }); }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 83, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { characterImage: characterImage, chatHistory: chatHistory, sendMessage: sendMessage, __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this })); }