function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(''); const handleSendMessage = async (event)=>{ event.preventDefault(); if (!inputValue.trim()) return; const userMessage = { role: 'user', content: inputValue }; setMessages([ ...messages, userMessage ]); setIsLoading(true); const result = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ userMessage ], system_prompt: 'Assist with travel and tourism information' }) }).then((response)=>response.json()); setIsLoading(false); if (result.status) { const assistantMessage = { role: 'assistant', content: result.result }; setMessages([ ...messages, userMessage, assistantMessage ]); } setInputValue(''); }; const chatMessages = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `rounded px-4 py-2 ${message.role === 'user' ? 'bg-blue-300 self-end' : 'bg-green-300 self-start'}`, __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, message.content))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col h-screen", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#00A5CF] text-white p-4 text-center text-2xl", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, "Travel and Tourism Chat Assistant"), /*#__PURE__*/ React.createElement("main", { className: "flex-1 p-4 bg-[#E5E5E5]", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-[50px] w-[50px] border-b-2 border-gray-900", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col p-4 h-full w-full md:w-[600px] lg:w-[800px] mx-auto bg-white shadow-lg rounded-md", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto p-3", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, chatMessages), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex justify-between", onSubmit: handleSendMessage, __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-1 border border-gray-300 p-2 rounded-l-md focus:outline-none focus:border-gray-400", placeholder: "Type a message...", value: inputValue, onChange: (e)=>setInputValue(e.target.value), __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-6 py-2 rounded-r-md hover:bg-blue-600", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, "Send"))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#00A5CF] text-white p-4 text-center", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, "Powered by CHAT_GPT")); }