function MainComponent() { const [conversation, setConversation] = React.useState([]); const [message, setMessage] = React.useState(''); const [loading, setLoading] = React.useState(false); const [articles, setArticles] = React.useState([]); const [filter, setFilter] = React.useState(''); const fetchArticles = async ()=>{ setLoading(true); try { const response = await fetch('/api/erp-system', { method: 'GET' }); const data = await response.json(); if (data && data.status) { setArticles(data.result); } } catch (error) { console.error('Failed to fetch articles:', error); } setLoading(false); }; const sendMessage = async ()=>{ if (message) { setLoading(true); const newMessage = { role: 'user', content: message }; setConversation([ ...conversation, newMessage ]); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: conversation, system_prompt: message }) }); const data = await response.json(); if (data && data.status) { setConversation([ ...conversation, newMessage, { role: 'assistant', content: data.result } ]); } } catch (error) { console.error('Failed to send message:', error); } setMessage(''); setLoading(false); } }; React.useEffect(()=>{ fetchArticles(); }, []); const handleInputChange = (e)=>{ setMessage(e.target.value); }; const handleKeyPress = (e)=>{ if (e.key === 'Enter') { sendMessage(); } }; const handleFilterChange = (e)=>{ setFilter(e.target.value); }; const filteredArticles = articles.filter((article)=>article.group.toLowerCase().includes(filter.toLowerCase())); return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-screen bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg flex flex-col overflow-hidden w-full max-w-sm", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#4a90e2] text-white font-roboto p-4 text-center text-xl", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "Drinks Marketplace"), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-auto p-4", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "filter", value: filter, onChange: handleFilterChange, className: "w-full p-2 border rounded-md mb-4 focus:ring-2 focus:ring-[#4a90e2] focus:outline-none", placeholder: "Filter groups...", disabled: loading, __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }), filteredArticles.map((article, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center border-b py-2", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: article.photoUrl, alt: `${article.name} drink`, className: "w-16 h-16 rounded-full mr-4", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, article.name), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#4a90e2]", __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }, article.price))))))); }