function MainComponent() { const [messages, setMessages] = React.useState([]); const [userInput, setUserInput] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); if (!userInput.trim()) return; const newMessage = { role: 'user', content: userInput }; setMessages([ ...messages, newMessage ]); setUserInput(''); setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, newMessage ] }) }); const data = await response.json(); if (data.status && data.choices && data.choices.length > 0) { const aiResponse = data.choices[0].message.content; setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: aiResponse } ]); } } catch (error) { console.error('Error:', error); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-6 font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "AI Chat Tool"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 h-64 overflow-y-auto bg-gray-50 rounded p-3", id: "chatDisplay", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-2 ${message.role === 'user' ? 'text-right' : 'text-left'}`, __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `inline-block p-2 rounded ${message.role === 'user' ? 'bg-blue-100' : 'bg-green-100'}`, __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, message.content))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }), " AI is thinking...")), /*#__PURE__*/ React.createElement("form", { id: "chatForm", className: "flex flex-col", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "userInput", className: "w-full p-2 border border-gray-300 rounded mb-2 resize-none", rows: "3", placeholder: "Type your message here...", value: userInput, onChange: (e)=>setUserInput(e.target.value), __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300", disabled: isLoading, __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane mr-2", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }), "Send")))); }