function MainComponent() { const [message, setMessage] = React.useState(""); const [loading, setLoading] = React.useState(false); const [userMessage, setUserMessage] = React.useState(""); React.useEffect(()=>{ async function fetchData() { setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": "hello" } ], system_prompt: 'Explain this content' }) }); const data = await response.json(); setMessage(data.choices[0].message.content); setLoading(false); } fetchData(); }, []); function handleSendMessage(e) { e.preventDefault(); const newMessage = e.target.elements.message.value; setUserMessage(newMessage); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#F3F4F6] p-4 shadow-md", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-semibold text-[#1F2937]", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Chat Bot"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#1F2937] hover:text-[#334155]", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }, "Home")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#1F2937] hover:text-[#334155]", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }, "About")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#1F2937] hover:text-[#334155]", __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this }, "Services")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#1F2937] hover:text-[#334155]", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, "Contact")))))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow container mx-auto px-4 my-5", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl p-6 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold text-[#1F2937]", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "Chat with GPT")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "chat-messages", className: "h-[400px] overflow-auto p-3 mb-4 bg-[#E5E7EB] rounded-md", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-2 m-2 bg-[#FEE2E2] rounded-md", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, "User: ", userMessage)), /*#__PURE__*/ React.createElement("div", { className: "p-2 m-2 bg-[#DCFCE7] rounded-md", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 64, columnNumber: 30 }, __self: this }, "Loading...") : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 64, columnNumber: 50 }, __self: this }, "Assistant: ", message))), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "Type your message here...", className: "block w-full p-2.5 mr-2 text-sm text-gray-900 bg-gray-50 rounded-l-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 rounded-r-lg", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }))))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#F3F4F6] p-4 text-center", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#1F2937]", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "© 2023 Chat Bot. All rights reserved."))); }