function MainComponent({ frontImage, backImage, brochureText, onUrlChange, onGoClick, loading }) { return /*#__PURE__*/ React.createElement("div", { className: "w-[210mm] h-[297mm] flex flex-col", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-white", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: frontImage, alt: "Front side of brochure", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-white mt-[10mm]", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: backImage, alt: "Back side of brochure", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-[10mm] bg-white p-[20mm]", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-justify font-roboto text-sm", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, brochureText)), /*#__PURE__*/ React.createElement("div", { className: "mt-[10mm] bg-white p-[20mm] flex", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "url", className: "border rounded flex-1 p-2", placeholder: "Enter URL here", onChange: onUrlChange, __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: `ml-2 bg-blue-500 text-white p-2 rounded ${loading ? 'opacity-50' : ''}`, onClick: onGoClick, disabled: loading, __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, loading ? 'Loading...' : 'Go'))); } function StoryComponent() { const [url, setUrl] = useState(''); const [loading, setLoading] = useState(false); const [frontImage, setFrontImage] = useState(''); const [backImage, setBackImage] = useState(''); const [brochureText, setBrochureText] = useState('Welcome to our company! We are excited to give you a tour through our values, missions, and services. At [Company Name], we believe in excellence and innovation. Our team works diligently to bring the best solutions to our clients. Contact us at [Contact Information] to learn more.'); const handleUrlChange = (event)=>{ setUrl(event.target.value); }; const handleGoClick = ()=>{ setLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: url } ], system_prompt: 'Create a brochure with images and text' }) }).then((response)=>response.json()).then((data)=>{ setLoading(false); const content = data.choices[0].message.content; const parsedData = JSON.parse(content); setFrontImage(parsedData.frontImage); setBackImage(parsedData.backImage); setBrochureText(parsedData.brochureText); }).catch((error)=>{ setLoading(false); console.error(error); }); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-center", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { frontImage: frontImage, backImage: backImage, brochureText: brochureText, onUrlChange: handleUrlChange, onGoClick: handleGoClick, loading: loading, __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this })); }