function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [response, setResponse] = React.useState(null); const sendMessage = async ()=>{ if (inputValue.trim() === '') return; setIsLoading(true); setMessages((prevMessages)=>[ ...prevMessages, { role: 'user', content: inputValue } ]); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: inputValue } ], system_prompt: inputValue }) }); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); setResponse(data.choices[0].message.content); } catch (error) { setResponse(`Error: ${error.message}`); } finally{ setIsLoading(false); setInputValue(''); } }; const handleInputChange = (e)=>{ setInputValue(e.target.value); }; const handleInputKeyPress = (e)=>{ if (e.key === 'Enter') { sendMessage(); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "hidden sm:block", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2 p-4 bg-white", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 p-2 rounded-md font-medium bg-gray-200", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fas fa-comments text-lg text-green-500", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "Chat")))), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("header", { __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-gray-700", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, "Welcome back"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, "Create pages using a variety of features that leverage jampack components"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 my-4", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 font-semibold text-white bg-blue-500 rounded-md", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, "Overview"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 font-semibold text-blue-500 border border-blue-500 rounded-md", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, "Analytics"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 font-semibold text-blue-500 border border-blue-500 rounded-md", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, "Operations"))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "chatInput", type: "text", className: "rounded-md border px-4 py-2 shadow-sm w-full", placeholder: "Ask me anything...", value: inputValue, onChange: handleInputChange, onKeyPress: handleInputKeyPress, __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: `${isLoading ? 'cursor-not-allowed' : ''} px-4 py-2 mt-2 bg-blue-500 text-white rounded-md font-semibold`, onClick: !isLoading ? sendMessage : null, __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, isLoading ? 'Loading...' : 'Send'), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded-md p-4 mt-4", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, response && /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 94, columnNumber: 32 }, __self: this }, response)))))))); }