function MainComponent() { const [tone, setTone] = React.useState('Neutral'); const [model, setModel] = React.useState('ChatGPT'); const [textInput, setTextInput] = React.useState(''); const [customInstructions, setCustomInstructions] = React.useState(''); const [generatedContent, setGeneratedContent] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const toneOptions = [ 'Formal', 'Neutral', 'Informal', 'Friendly' ]; const modelOptions = [ 'ChatGPT', 'GROQ' ]; const handleSubmit = async (e)=>{ e.preventDefault(); setIsLoading(true); const chatGPTResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: "Use Prompt Engineering principles and techniques to enhance this prompt" } ], system_prompt: 'Enhance the user prompt for better response.' }) }).then((res)=>res.json()); const enhancedPrompt = chatGPTResponse.choices[0].message.content; const groqResponse = await fetch('/integrations/groq/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: enhancedPrompt }, { role: 'user', content: `${textInput} | Tone: ${tone} | Custom instructions: ${customInstructions}` } ] }) }).then((res)=>res.json()); setGeneratedContent(groqResponse.choices[0].message.content); setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl mb-6", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "AI-Powered Writing Assistant"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg mb-2", htmlFor: "text-input", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Enter your text:"), /*#__PURE__*/ React.createElement("textarea", { name: "text-input", className: "w-full p-2 border rounded h-40", value: textInput, onChange: (e)=>setTextInput(e.target.value), __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg mb-2", htmlFor: "custom-instructions", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Custom Instructions:"), /*#__PURE__*/ React.createElement("input", { name: "custom-instructions", className: "w-full p-2 border rounded", value: customInstructions, onChange: (e)=>setCustomInstructions(e.target.value), __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg mb-2", htmlFor: "tone", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Select Tone:"), /*#__PURE__*/ React.createElement("select", { name: "tone", className: "w-full p-2 border rounded", value: tone, onChange: (e)=>setTone(e.target.value), __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, toneOptions.map((tone)=>/*#__PURE__*/ React.createElement("option", { key: tone, value: tone, __source: { fileName: "", lineNumber: 77, columnNumber: 40 }, __self: this }, tone)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg mb-2", htmlFor: "model", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Select AI Model:"), /*#__PURE__*/ React.createElement("select", { name: "model", className: "w-full p-2 border rounded", value: model, onChange: (e)=>setModel(e.target.value), __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, modelOptions.map((model)=>/*#__PURE__*/ React.createElement("option", { key: model, value: model, __source: { fileName: "", lineNumber: 89, columnNumber: 42 }, __self: this }, model)))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-3 bg-blue-600 text-white rounded", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, isLoading ? 'Loading...' : 'Submit')), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, "Generated Content:"), /*#__PURE__*/ React.createElement("div", { className: "w-full p-4 border rounded bg-gray-100", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, generatedContent || 'Content will appear here after generation.')))); }