function MainComponent() { const [inputText, setInputText] = React.useState(''); const [loading, setLoading] = React.useState(false); const [scriptPlan, setScriptPlan] = React.useState(null); const [scriptContent, setScriptContent] = React.useState(null); const handleInputChange = (e)=>setInputText(e.target.value); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setScriptPlan(null); setScriptContent(null); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: inputText } ], system_prompt: 'Create a plan point by point for a YouTube video script about the following subject' }) }); const responseData = await response.json(); if (responseData.status) { setScriptPlan(responseData.result.split('\n').filter((point)=>point)); // Assuming every point is separated by a new line } else { setScriptPlan("Failed to generate the script plan. Please try again."); } } catch (error) { setScriptPlan("An error occurred. Please try again later."); } finally{ setLoading(false); } }; const handleValidation = async ()=>{ setLoading(true); try { const messages = scriptPlan.map((point)=>({ role: 'user', content: point })); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages, system_prompt: 'Generate a detailed script for the following points of the video' }) }); const responseData = await response.json(); if (responseData.status) { setScriptContent(responseData.result); } else { setScriptContent('Failed to generate the script content. Please try again.'); } } catch (error) { setScriptContent('An error occurred while creating the script. Please try again later.'); } finally{ setLoading(false); } }; const loadingIndicator = loading && /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center my-4", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-6 h-6 border-b-2 border-gray-900 rounded-full animate-spin", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this })); const formContent = /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "subjectInput", value: inputText, onChange: handleInputChange, className: "w-full h-40 p-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500", placeholder: "Enter your video subject here...", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "mt-4 w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:bg-gray-400", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, "Generate Video Script Plan")); const scriptPlanOutput = scriptPlan && !scriptContent && /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-gray-200 p-4 rounded-lg font-roboto text-gray-800", __source: { fileName: "", lineNumber: 106, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, "Video Script Plan:"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, scriptPlan.map((point, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, point))), /*#__PURE__*/ React.createElement("button", { onClick: handleValidation, disabled: loading, className: "mt-4 w-full bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:bg-gray-400", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, "Validate Script Plan")); const scriptContentOutput = scriptContent && /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-gray-300 p-4 rounded-lg font-roboto text-gray-800", __source: { fileName: "", lineNumber: 124, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, "Detailed Video Script:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }, scriptContent)); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 131, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto text-gray-900 mb-4", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, "AI Video Script Creator"), /*#__PURE__*/ React.createElement("p", { className: "text-base font-normal font-roboto text-gray-600 mb-8", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, "Provide a subject for your YouTube video and let AI draft your script plan and detailed script."), formContent, loadingIndicator, /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, scriptPlanOutput, scriptContentOutput))); }