function MainComponent() { const [loading, setLoading] = React.useState(false); const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(''); const [apiResponse, setApiResponse] = React.useState(''); const sendMessage = async (e)=>{ e.preventDefault(); const newMessages = [ ...messages, { role: 'user', content: inputValue } ]; setMessages(newMessages); setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newMessages, system_prompt: `Please provide assistance for the request.` }) }); const result = await response.json(); if (result.status) { setApiResponse(result.result); } } catch (error) { console.error('Request failed', error); } finally{ setLoading(false); } setInputValue(''); }; const handleInputChange = (e)=>{ setInputValue(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[700px] flex flex-col space-y-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "portrait-worn-old-man.png", alt: "Portrait of a worn old man with a rugged expression", className: "w-full max-w-[300px] h-auto mx-auto rounded-md", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }), messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `max-w-md ${message.role === 'user' ? 'self-end' : 'self-start'}`, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "bg-white p-2 shadow rounded-md", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, message.content))), apiResponse && /*#__PURE__*/ React.createElement("div", { className: "max-w-md self-start", __source: { fileName: "", lineNumber: 55, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "bg-blue-100 p-2 shadow rounded-md", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, apiResponse)), loading && /*#__PURE__*/ React.createElement("div", { className: "max-w-md self-center", __source: { fileName: "", lineNumber: 58, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Loading...")), /*#__PURE__*/ React.createElement("form", { className: "w-full flex space-x-2", onSubmit: sendMessage, __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "flex-1 p-2 border border-gray-300 rounded-md", value: inputValue, onChange: handleInputChange, name: "messageInput", placeholder: "Type your message here...", autoComplete: "off", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-blue-500 text-white rounded-md disabled:opacity-50", disabled: !inputValue.trim() || loading, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Send")))); }