function MainComponent() { const [selectedTheme, setSelectedTheme] = React.useState(''); const [userName, setUserName] = React.useState(''); const [message, setMessage] = React.useState(''); const [responses, setResponses] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const handleThemeSelection = (event)=>{ event.preventDefault(); setSelectedTheme(event.target.theme.value); setResponses([]); }; const handleNameChange = (event)=>{ setUserName(event.target.value); }; const handleMessageChange = (event)=>{ setMessage(event.target.value); }; const handleConversationSubmit = async (event)=>{ event.preventDefault(); setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": message } ], system_prompt: `Please simulate a dialog about ${selectedTheme} in English. Comment on grammatical mistakes.` }) }); if (!response.ok) throw new Error('Network response was not ok.'); const data = await response.json(); setResponses((oldResponses)=>[ ...oldResponses, { content: message, role: 'user' }, { content: data.result, role: 'assistant' } ]); } catch (error) { console.error('There was a problem with your fetch operation:', error); } finally{ setIsLoading(false); } setMessage(''); }; const startOver = ()=>{ setSelectedTheme(''); setUserName(''); setResponses([]); }; if (selectedTheme === '') { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex justify-center items-center bg-[#f9f9f9]", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg p-8 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-[#333] mb-6", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Choose a Dialog Theme"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleThemeSelection, __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "theme", className: "block mb-3 text-md font-medium text-[#666]", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "Dialog Theme"), /*#__PURE__*/ React.createElement("select", { id: "theme", name: "theme", className: "border border-[#ddd] text-[#333] text-md rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-3", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "travel", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, "Travel"), /*#__PURE__*/ React.createElement("option", { value: "shopping", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, "Shopping"), /*#__PURE__*/ React.createElement("option", { value: "healthcare", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, "Healthcare"), /*#__PURE__*/ React.createElement("option", { value: "hotel-booking", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, "Hotel Booking"), /*#__PURE__*/ React.createElement("option", { value: "hotel-check-in", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, "Hotel Check-In"), /*#__PURE__*/ React.createElement("option", { value: "restaurant", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, "Restaurant"), /*#__PURE__*/ React.createElement("option", { value: "making-purchases", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, "Making Purchases"), /*#__PURE__*/ React.createElement("option", { value: "visiting-tourist-site", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, "Visiting a Tourist Site"), /*#__PURE__*/ React.createElement("option", { value: "visiting-museum", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, "Visiting a Museum"), /*#__PURE__*/ React.createElement("option", { value: "currency-exchange", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, "Currency Exchange"), /*#__PURE__*/ React.createElement("option", { value: "other", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, "Other"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-md px-6 py-3 text-center", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Choose")))); } return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex justify-center items-center bg-[#f9f9f9]", __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg p-8 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold text-[#333] mb-6", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, "Let's talk about ", selectedTheme), /*#__PURE__*/ React.createElement("form", { onSubmit: handleConversationSubmit, __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, responses.length === 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block mb-2 text-md font-medium text-[#666]", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, "Your Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", value: userName, onChange: handleNameChange, className: "border border-[#ddd] text-[#333] text-md rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-3", placeholder: "Enter your name", required: true, __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block mb-2 text-md font-medium text-[#666]", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "Your Message"), /*#__PURE__*/ React.createElement("textarea", { id: "message", name: "message", value: message, onChange: handleMessageChange, className: "border border-[#ddd] text-[#333] text-md rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-3", rows: "4", required: true, __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-md px-6 py-2 text-center mr-2", disabled: isLoading, __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, isLoading ? 'Sending...' : 'Send'), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: startOver, className: "text-[#666] bg-transparent hover:bg-[#f2f2f2] focus:ring-4 focus:outline-none focus:ring-[#ddd] font-medium rounded-lg text-md px-6 py-2 text-center mr-2", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "Start Over / Choose Another Theme")), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, responses.map((resp, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-4 p-4 rounded-lg text-md ${resp.role === 'user' ? 'bg-blue-100 text-blue-900' : 'bg-blue-500 text-white'}`, __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, resp.content))))); }