function MainComponent() { const [commandInput, setCommandInput] = useState(""); const [commandResult, setCommandResult] = useState(""); const [commandError, setCommandError] = useState(""); const [commandLoading, setCommandLoading] = useState(false); const [apiInput, setApiInput] = useState(""); const [apiResult, setApiResult] = useState(""); const [apiError, setApiError] = useState(""); const [apiLoading, setApiLoading] = useState(false); const [chatbotMessages, setChatbotMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); const handleCommandInputChange = (event)=>setCommandInput(event.target.value); const handleApiInputChange = (event)=>setApiInput(event.target.value); const handleCommandSubmit = async ()=>{ setCommandLoading(true); try { const result = await fetch(`/runcmd/${commandInput}`); const text = await result.text(); setCommandResult(text); } catch (error) { setCommandError(error.message); } finally{ setCommandLoading(false); } }; const handleApiSubmit = async ()=>{ setApiLoading(true); try { const response = await fetch(`/termux/api/${apiInput}`); if (response.status_code === 404) { setApiError('API not found'); return; } const data = await response.json(); setApiResult(JSON.stringify(data, null, 2)); } catch (error) { setApiError(error.message); } finally{ setApiLoading(false); } }; const handleSendChatbotMessage = ()=>{ if (!newMessage.trim()) return; setChatbotMessages((messages)=>[ ...messages, { type: 'user', content: newMessage } ]); setNewMessage(''); // Placeholder for AI chatbot API call }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen bg-[#121212] text-white flex flex-col", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1e1e1e] py-4 px-8 flex justify-between items-center", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "DevOps Assistant")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex p-8", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-8 space-y-8", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-8 order-first md:order-none bg-[#1e1e1e] space-y-4 flex flex-col", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2 p-8", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1e1e1e] py-4 px-8 text-center w-full md:w-1/2", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "© 2023 DevOps Assistant. All rights reserved.")))); }