lkzwieder/botino
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux improved

Browse Source
This commit is contained in:
Lucas Tettamanti
2026-01-17 04:13:35 -03:00
parent 98e3d78e3d
commit 63b9ecef61
35 changed files with 4266 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
public/components/ops-shell.js
View File

@@ -4,38 +4,87 @@ class OpsShell extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this._currentView = "chat";
this.shadowRoot.innerHTML = `
<style>
:host { --bg:#0b0f14; --panel:#121823; --muted:#8aa0b5; --text:#e7eef7; --line:#1e2a3a; --blue:#1f6feb; }
* { box-sizing:border-box; font-family:system-ui,Segoe UI,Roboto,Arial; }
.app { height:100vh; background:var(--bg); color:var(--text); display:flex; flex-direction:column; }
header { display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); }
header { display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
header h1 { font-size:14px; margin:0; color:var(--muted); font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.nav { display:flex; gap:4px; margin-left:24px; flex-wrap:wrap; }
.nav-btn { background:transparent; border:1px solid var(--line); color:var(--muted); padding:6px 12px; border-radius:6px; font-size:12px; cursor:pointer; transition:all .15s; }
.nav-btn:hover { border-color:var(--blue); color:var(--text); }
.nav-btn.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.spacer { flex:1; }
.status { font-size:12px; color:var(--muted); }
.layout { flex:1; display:grid; grid-template-columns:320px 1fr 360px; min-height:0; }
.col { border-right:1px solid var(--line); min-height:0; overflow:auto; }
.col:last-child { border-right:none; }
.mid { display:flex; flex-direction:column; min-height:0; }
.midTop { flex:1; min-height:0; overflow:auto; border-bottom:1px solid var(--line); }
.midBottom { min-height:220px; overflow:auto; }
/* Layout para chat activo (2 columnas: burbujas + inspector) */
.layout-chat { height:100%; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 310px; min-height:0; overflow:hidden; }
.col { border-right:1px solid var(--line); min-height:0; overflow:hidden; }
.chatTop { grid-column:1; grid-row:1; border-bottom:1px solid var(--line); }
.chatBottom { grid-column:1 / 3; grid-row:2; overflow:hidden; border-top:1px solid var(--line); }
.inspectorTop { grid-column:2; grid-row:1; border-right:none; }
/* Layout para CRUDs */
.layout-crud { height:100%; display:block; min-height:0; overflow:hidden; }
.view { display:none; flex:1; min-height:0; overflow:hidden; }
.view.active { display:flex; flex-direction:column; }
</style>
<div class="app">
<header>
<h1>Bot Ops Console</h1>
<nav class="nav">
<button class="nav-btn active" data-view="chat">Chat</button>
<button class="nav-btn" data-view="conversations">Conversaciones</button>
<button class="nav-btn" data-view="users">Usuarios</button>
<button class="nav-btn" data-view="products">Productos</button>
<button class="nav-btn" data-view="aliases">Equivalencias</button>
<button class="nav-btn" data-view="recommendations">Recomendaciones</button>
</nav>
<div class="spacer"></div>
<div class="status" id="sseStatus">SSE: connecting…</div>
</header>
<div class="layout">
<div class="col"><conversation-list></conversation-list></div>
<div class="col mid">
<div class="midTop"><run-timeline></run-timeline></div>
<div class="midBottom"><chat-simulator></chat-simulator></div>
<div id="viewChat" class="view active">
<div class="layout-chat">
<div class="col chatTop"><run-timeline></run-timeline></div>
<div class="col inspectorTop"><conversation-inspector></conversation-inspector></div>
<div class="col chatBottom"><chat-simulator></chat-simulator></div>
</div>
</div>
<div id="viewConversations" class="view">
<div class="layout-crud">
<conversations-crud></conversations-crud>
</div>
</div>
<div id="viewUsers" class="view">
<div class="layout-crud">
<users-crud></users-crud>
</div>
</div>
<div id="viewProducts" class="view">
<div class="layout-crud">
<products-crud></products-crud>
</div>
</div>
<div id="viewAliases" class="view">
<div class="layout-crud">
<aliases-crud></aliases-crud>
</div>
</div>
<div id="viewRecommendations" class="view">
<div class="layout-crud">
<recommendations-crud></recommendations-crud>
</div>
<div class="col"><debug-panel></debug-panel></div>
</div>
</div>
`;
@@ -46,10 +95,39 @@ class OpsShell extends HTMLElement {
const el = this.shadowRoot.getElementById("sseStatus");
el.textContent = s.ok ? "SSE: connected" : "SSE: disconnected (retrying…)";
});
// Listen for view switch requests from other components
this._unsubSwitch = on("ui:switchView", ({ view }) => {
if (view) this.setView(view);
});
// Navigation
const navBtns = this.shadowRoot.querySelectorAll(".nav-btn");
for (const btn of navBtns) {
btn.onclick = () => this.setView(btn.dataset.view);
}
}
disconnectedCallback() {
this._unsub?.();
this._unsubSwitch?.();
}
setView(viewName) {
this._currentView = viewName;
// Update nav buttons
const navBtns = this.shadowRoot.querySelectorAll(".nav-btn");
for (const btn of navBtns) {
btn.classList.toggle("active", btn.dataset.view === viewName);
}
// Update views
const views = this.shadowRoot.querySelectorAll(".view");
for (const view of views) {
const isActive = view.id === `view${viewName.charAt(0).toUpperCase() + viewName.slice(1)}`;
view.classList.toggle("active", isActive);
}
}
}