function MainComponent() { const [content, setContent] = React.useState("This is a paragraph about the topic. Certain words like automation and AI-driven processes are auto-linkified. When you click on them, new topics are dynamically generated. For instance, clicking on machine learning will fetch a new page about it."); const [loading, setLoading] = React.useState(false); const [topic, setTopic] = React.useState("Topic Title"); const [prompt, setPrompt] = React.useState(""); const handleClick = (event)=>{ const keyword = event.target.innerText; fetchPageContent(keyword); }; const fetchPageContent = async (keyword)=>{ setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { "role": "user", "content": `Create a detailed Wikipedia page about ${keyword}` } ] }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); const newContent = data.choices[0].message.content.replace(/\b(\w+)\b/g, '$1'); setContent(newContent); setTopic(keyword); setLoading(false); }; const handleFormSubmit = async (event)=>{ event.preventDefault(); fetchPageContent(prompt); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen p-6 bg-gray-100 text-[#121212]", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white p-8 rounded shadow-md", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, topic), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("p", { className: "text-center", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Loading...") : /*#__PURE__*/ React.createElement("div", { dangerouslySetInnerHTML: { __html: content }, onClick: handleClick, __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("form", { className: "mt-6", onSubmit: handleFormSubmit, __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-gray-700 mb-2", htmlFor: "prompt", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Edit the prompt for this topic:"), /*#__PURE__*/ React.createElement("textarea", { id: "prompt", name: "prompt", rows: "4", className: "block w-full p-3 border border-gray-300 rounded-md", placeholder: "Refine the content...", onChange: (e)=>setPrompt(e.target.value), __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 px-4 py-2 bg-blue-600 text-white rounded-md", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Update Content")))); }