function MainComponent() { const [loading, setLoading] = React.useState(false); const [messageText, setMessageText] = React.useState(''); const [messages, setMessages] = React.useState([]); const fetchChatGPTResponse = async ()=>{ setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: messageText } ], system_prompt: 'Explain this content' }) }); const data = await response.json(); setMessages((prevMessages)=>[ ...prevMessages, { role: 'user', content: messageText }, { role: 'assistant', content: data.choices[0].message.content } ]); setLoading(false); }; const handleSubmit = (event)=>{ event.preventDefault(); if (!messageText.trim()) return; fetchChatGPTResponse(); setMessageText(''); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] min-h-screen flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white font-roboto text-center mb-8", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "BTS and FIFTY FIFTY Chat"), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Integration: CHAT_GPT")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-start gap-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f0f0] w-full md:w-[400px] rounded-lg p-4 flex flex-col gap-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#000000] font-roboto text-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-2", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Messages"), /*#__PURE__*/ React.createElement("div", { className: "h-[300px] overflow-auto bg-white rounded p-2", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 ${msg.role === 'user' ? 'text-right' : 'text-left'}`, __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, msg.content))), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-2 mt-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "message", rows: "3", placeholder: "Your Message", className: "border p-2 rounded resize-none", value: messageText, onChange: (e)=>setMessageText(e.target.value), __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#007bff] text-white p-2 rounded", disabled: loading, __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, loading ? 'Sending...' : 'Send')))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[400px]", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white font-roboto text-2xl mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Responses"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#f0f0f0] rounded-lg p-4 font-roboto text-[#000000] h-[400px] overflow-auto", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, messages.filter((msg)=>msg.role === 'assistant').map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-2", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, msg.content)))))); }