function MainComponent() { const [messages, setMessages] = React.useState([]); const [userInput, setUserInput] = React.useState(''); const [isProcessing, setIsProcessing] = React.useState(false); const [integrations, setIntegrations] = React.useState([ { name: 'ShipStation', status: 'Active' }, { name: 'Shopify', status: 'Pending' } ]); const [isDarkMode, setIsDarkMode] = React.useState(false); const handleSendMessage = async ()=>{ if (!userInput.trim()) return; setIsProcessing(true); setMessages((prev)=>[ ...prev, { role: 'user', content: userInput } ]); try { const response = await fetch('/integrations/anthropic-claude/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: userInput } ] }) }); const data = await response.json(); const assistantMessage = data.choices[0].message.content; setMessages((prev)=>[ ...prev, { role: 'assistant', content: assistantMessage } ]); } catch (error) { console.error('Error:', error); setMessages((prev)=>[ ...prev, { role: 'assistant', content: 'Sorry, there was an error processing your request.' } ]); } setUserInput(''); setIsProcessing(false); }; const toggleDarkMode = ()=>{ setIsDarkMode((prev)=>!prev); }; return /*#__PURE__*/ React.createElement("div", { className: `flex flex-col h-screen ${isDarkMode ? 'dark' : ''}`, __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white dark:bg-gray-800 shadow-md p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/00af867e-e219-4977-8002-0ebc598002fd/freightcompanionlogoico.png", alt: "Freight Companion Logo", className: "h-10 w-10 mr-2", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Freight Companion")), /*#__PURE__*/ React.createElement("button", { onClick: toggleDarkMode, className: "p-2 rounded-full bg-gray-200 dark:bg-gray-700", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isDarkMode ? 'fa-sun' : 'fa-moon'}`, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 overflow-hidden", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-64 bg-white dark:bg-gray-800 p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "API Integrations"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, integrations.map((integration, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: `mb-2 p-2 ${integration.status === 'Active' ? 'bg-blue-100 dark:bg-blue-900' : 'bg-gray-200 dark:bg-gray-700'} rounded`, __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }, integration.name), /*#__PURE__*/ React.createElement("span", { className: `ml-2 text-sm ${integration.status === 'Active' ? 'text-green-600 dark:text-green-400' : 'text-yellow-600 dark:text-yellow-400'}`, __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this }, integration.status))))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 flex flex-col bg-gray-50 dark:bg-gray-900", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex mb-4 ${message.role === 'user' ? 'justify-end' : ''}`, __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }, message.role === 'assistant' && /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/ff5b546d-abaf-4044-8ad5-4f1f17e6ad1e/chatBubblepng.png", alt: "AI Assistant", className: "h-8 w-8 rounded-full mr-2", __source: { fileName: "", lineNumber: 81, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `p-3 rounded-lg shadow max-w-xs ${message.role === 'user' ? 'bg-blue-500 text-white' : 'bg-white dark:bg-gray-800'}`, __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 86, columnNumber: 21 }, __self: this }, message.content))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 p-4 border-t border-gray-200 dark:border-gray-700", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: userInput, onChange: (e)=>setUserInput(e.target.value), onKeyPress: (e)=>e.key === 'Enter' && handleSendMessage(), placeholder: "Type your message...", className: "flex-1 p-2 rounded-l-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, disabled: isProcessing, className: "bg-blue-500 text-white p-2 rounded-r-lg disabled:opacity-50", __source: { fileName: "", lineNumber: 103, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this })))))))); }