function ChatMessagesDisplay({ messages }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col overflow-auto max-h-[500px] w-[350px] bg-[#EFEFEF] p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, messages.map(({ sender, text }, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2 last:mb-0", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, sender, ":"), " ", text)))); } function ChatMessagesDisplayStory() { const initialMessages = [ { sender: "User", text: "Hello, can you help me?" }, { sender: "App", text: "Of course! What do you need help with?" } ]; const [messages, setMessages] = React.useState(initialMessages); const [userInput, setUserInput] = React.useState(''); const sendMessage = (e)=>{ e.preventDefault(); if (!userInput.trim()) return; setMessages([ ...messages, { sender: "User", text: userInput.trim() } ]); setUserInput(''); }; const respondToMessage = (text)=>{ const responses = { "Can you provide today's date?": `Today's date is ${new Date().toLocaleDateString()}.`, "What time is it?": `The current time is ${new Date().toLocaleTimeString()}.`, fallback: "I'm afraid I can't provide an answer to that. Can you ask something else?" }; return responses[text] || responses.fallback; }; const analyzeAndRespond = (lastMessage)=>{ if (lastMessage.sender === "User") { const responseText = respondToMessage(lastMessage.text); setMessages((prevMessages)=>[ ...prevMessages, { sender: "App", text: responseText } ]); } }; React.useEffect(()=>{ if (messages.length > 0) { const lastMessage = messages[messages.length - 1]; analyzeAndRespond(lastMessage); } }, [ messages ]); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatMessagesDisplay, { messages: messages, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("form", { onSubmit: sendMessage, className: "mt-4 flex", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "flex-1 p-2 border rounded-l", placeholder: "Type a message...", value: userInput, onChange: (e)=>setUserInput(e.target.value), name: "messageInput", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white p-2 rounded-r", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "Send"))); } function MainComponent() { const [apps, setApps] = React.useState([]); const [selectedApps, setSelectedApps] = React.useState([]); const [searchTerm, setSearchTerm] = React.useState(''); const [messages, setMessages] = React.useState({}); React.useEffect(()=>{ fetch("/apps").then((res)=>res.json()).then((data)=>setApps(data)).catch((err)=>console.error(err)); const websocket = new WebSocket("ws://localhost:5000/chat"); websocket.onmessage = (event)=>{ const data = JSON.parse(event.data); setMessages((prevMessages)=>({ ...prevMessages, [data.sender]: [ ...prevMessages[data.sender] || [], data ] })); }; return ()=>websocket.close(); }, []); const handleAppSelection = (appId)=>{ setSelectedApps((prev)=>prev.includes(appId) ? prev.filter((id)=>id !== appId) : [ ...prev, appId ]); }; const addSelectedApps = ()=>{ selectedApps.forEach((appId)=>{ const websocket = new WebSocket(`ws://localhost:5000/chat/${appId}`); websocket.onopen = ()=>{ websocket.send(JSON.stringify({ sender: 'user', recipient: 'server', message: `add-app ${appId}` })); }; }); }; const sendMessage = (e)=>{ e.preventDefault(); const message = e.target.messageInput.value; selectedApps.forEach((appId)=>{ const websocket = new WebSocket(`ws://localhost:5000/chat/${appId}`); websocket.onopen = ()=>{ websocket.send(JSON.stringify({ sender: 'user', recipient: appId, message: message })); }; }); e.target.messageInput.value = ''; }; const filteredApps = apps.filter((app)=>app.name.toLowerCase().includes(searchTerm.toLowerCase())); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 text-white p-4", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "Multi-App Chat Panel")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 overflow-hidden", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-64 bg-white p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Apps"), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search apps...", className: "w-full p-2 border rounded mb-4", name: "appSearch", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, filteredApps.map((app)=>/*#__PURE__*/ React.createElement("li", { key: app.id, className: "flex items-center", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: app.id, name: app.id, className: "mr-2", checked: selectedApps.includes(app.id), onChange: ()=>handleAppSelection(app.id), __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: app.id, __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, app.name)))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", onClick: addSelectedApps, __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "Add Selected Apps")), /*#__PURE__*/ React.createElement("main", { className: "flex-1 p-4 overflow-hidden", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap h-full", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, selectedApps.map((appId)=>/*#__PURE__*/ React.createElement("div", { key: appId, className: "w-1/2 pr-4 mb-4", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, apps.find((app)=>app.id === appId)?.name, " Output"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow h-[calc(100%-2rem)] overflow-y-auto", __source: { fileName: "", lineNumber: 110, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement(ChatMessagesDisplay, { messages: messages[appId] || [], __source: { fileName: "", lineNumber: 111, columnNumber: 19 }, __self: this }))))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white p-4 border-t", __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex", onSubmit: sendMessage, __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Type your message...", className: "flex-1 p-2 border rounded-l", name: "messageInput", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded-r hover:bg-blue-600", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, "Send")))); }