function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [messageContent, setMessageContent] = React.useState(''); const [conversation, setConversation] = React.useState([]); const [response, setResponse] = React.useState(''); const sendMessageToGPT = async ()=>{ setIsLoading(true); try { const bodyContent = { messages: conversation.concat({ role: 'user', content: messageContent }), system_prompt: 'Please assist with the following request.', max_tokens: 2000 }; const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(bodyContent) }); const data = await response.json(); if (data.status) { setConversation((prev)=>prev.concat({ role: 'assistant', content: data.result })); setResponse(data.result); } else { setResponse("There was an error processing your request."); } } catch (error) { setResponse("Failed to communicate with the ChatGPT API."); } finally{ setIsLoading(false); } }; const handleSubmit = (event)=>{ event.preventDefault(); if (messageContent.trim()) { sendMessageToGPT(); setMessageContent(''); } }; const handleChange = (event)=>{ setMessageContent(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center gap-4 p-4 h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full bg-white rounded-lg border border-gray-200 shadow-md p-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "text-2xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "Chat with ChatGPT"), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-56 mb-4 p-4 bg-gray-50 border border-gray-200 rounded", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, conversation.map((chat, index)=>/*#__PURE__*/ React.createElement("div", { key: `chat_${index}`, className: `mb-2 ${chat.role === 'assistant' ? 'text-left' : 'text-right'}`, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `inline-block p-2 rounded-lg ${chat.role === 'assistant' ? 'bg-blue-100' : 'bg-green-100'}`, __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, chat.content)))), response && /*#__PURE__*/ React.createElement("div", { className: "p-2 bg-red-100 border border-red-200 rounded mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 22 }, __self: this }, response), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "message", rows: "3", placeholder: "Type your message...", className: "resize-none p-2 border border-gray-200 rounded focus:ring-blue-500 focus:border-blue-500", onChange: handleChange, value: messageContent, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2", disabled: isLoading, __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, isLoading ? "Loading..." : "Send Message")))); }