function BlueSendButton({ onClick, children }) { return /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-400 text-white font-roboto rounded-full", type: "submit", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children); } function BlueSendButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BlueSendButton, { onClick: ()=>{}, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, "Send")); } function MainComponent() { const [messageInput, setMessageInput] = React.useState(''); const [responseImage, setResponseImage] = React.useState(null); const [isLoading, setIsLoading] = React.useState(false); const handleSend = async ()=>{ setIsLoading(true); try { const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: messageInput } ], system_prompt: 'Convert this chat input into a suitable prompt for an image' }) }).then((res)=>res.json()); const prompt = chatResponse.choices[0].message.content; const imageResponse = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }).then((res)=>res.json()); setResponseImage(imageResponse.data[0]); } catch (error) { console.error('Error:', error); } finally{ setIsLoading(false); } }; const handleChange = (e)=>{ setMessageInput(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto bg-white", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 border-b border-gray-200 bg-blue-50", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold font-roboto text-blue-500", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Chat to Image Service")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col p-4 space-y-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "flex-1 p-2 border border-gray-200 rounded-md", placeholder: "Type your message here...", name: "chatMessage", value: messageInput, onChange: handleChange, disabled: isLoading, rows: "4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }), isLoading ? /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-400 text-white rounded-md", type: "button", disabled: true, __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Loading...") : /*#__PURE__*/ React.createElement(BlueSendButton, { onClick: handleSend, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Send")), responseImage && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "max-w-full h-auto rounded-lg", src: responseImage, alt: `Generated image based on chat input: "${messageInput}"`, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }))); }