function MainComponent() { const [chatMessages, setChatMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [error, setError] = React.useState(''); const sendMessageToGPT = async ()=>{ setIsLoading(true); setError(''); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: inputMessage } ], system_prompt: inputMessage }) }); const data = await response.json(); if (response.ok) { setChatMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: data.result } ]); } else { setError(data.result || 'An error occurred while sending the message.'); } } catch (err) { setError('Failed to send message. Please try again later.'); } setIsLoading(false); }; const handleInputChange = (event)=>{ setInputMessage(event.target.value); }; const handleFormSubmit = (event)=>{ event.preventDefault(); if (!inputMessage.trim()) return; setChatMessages((prevMessages)=>[ ...prevMessages, { role: 'user', content: inputMessage } ]); sendMessageToGPT(); setInputMessage(''); }; const chatMessageElements = chatMessages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex mt-4 ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `p-4 rounded-lg ${msg.role === 'user' ? 'bg-[#D9F8C4] text-right' : 'bg-[#F4F4F4] text-left'}`, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, msg.content))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#333333] p-4 text-white text-center font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "Pintas Digital")), /*#__PURE__*/ React.createElement("main", { className: "flex-grow p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#121212] font-crimson-text mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Chat with our digital assistant"), /*#__PURE__*/ React.createElement("div", { className: "border p-4 rounded-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, chatMessageElements, isLoading && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center text-xs text-[#666] font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, "Sending message..."), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center text-xs text-red-500 font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, error)))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#333333] p-4 flex justify-center items-center", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, className: "w-full max-w-[600px] flex", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "Type your message here...", className: "flex-grow p-4 rounded-l-lg border-0", value: inputMessage, onChange: handleInputChange, disabled: isLoading, __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#00B4D8] p-4 rounded-r-lg text-white font-roboto", disabled: isLoading, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Send")))); }