function MainComponent() { const [isSubmitting, setIsSubmitting] = React.useState(false); const [response, setResponse] = React.useState(''); const [message, setMessage] = React.useState(''); const handleSubmit = async (event)=>{ event.preventDefault(); setIsSubmitting(true); try { const requestBody = { messages: [ { role: 'user', content: message } ], system_prompt: 'Please provide a seasonal color analysis and complete fashion consultancy.' }; const res = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(requestBody) }); const { result, status } = await res.json(); if (status) { setResponse(result); } else { setResponse(''); } } catch (error) { setResponse('An error occurred, please try again.'); } setIsSubmitting(false); }; const handleChange = (event)=>{ setMessage(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 flex flex-col space-y-4 max-w-[600px] mx-auto", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold text-center font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, "Seasonal Color Analysis & Fashion Consultancy"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#f8f8f8] p-4 rounded shadow", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Welcome to your personalized fashion consultation! Follow the steps described below to receive a seasonal color analysis and a complete fashion consultancy based on your individual characteristics and preferences."), /*#__PURE__*/ React.createElement("ol", { className: "list-decimal pl-6", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Fill in the form with your questions or the details you would like to discuss."), /*#__PURE__*/ React.createElement("li", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Submit your request to get professional advice tailored just for you."), /*#__PURE__*/ React.createElement("li", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Implement the suggestions in your daily wardrobe to enhance your style!"))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col space-y-3", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "form-textarea p-2 w-full rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#6ae5c5] resize-none font-roboto", name: "message", placeholder: "What would you like to ask or discuss?", rows: "5", onChange: handleChange, value: message, disabled: isSubmitting, __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: `btn w-full rounded bg-[#6ae5c5] text-white font-roboto hover:bg-[#57c4ad] ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`, disabled: isSubmitting, __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, isSubmitting ? 'Submitting...' : 'Submit')), response && /*#__PURE__*/ React.createElement("div", { className: "bg-[#f8f8f8] p-4 rounded shadow mt-4 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, response)); }