base con front

2026-01-01 22:49:44 -03:00
parent 863449e21d
commit 5c67b27859
16 changed files with 1038 additions and 27 deletions
--- a/public/components/conversation-list.js
+++ b/public/components/conversation-list.js
@@ -0,0 +1,121 @@
+import { api } from "../lib/api.js";
+import { emit, on } from "../lib/bus.js";
+
+class ConversationList extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.conversations = [];
+    this.selected = null;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display:block; padding:12px; }
+        .box { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:10px; margin-bottom:10px; }
+        .row { display:flex; gap:8px; align-items:center; }
+        input,select,button { background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:8px; padding:8px; font-size:13px; }
+        button { cursor:pointer; }
+        .list { display:flex; flex-direction:column; gap:8px; }
+        .item { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:10px; cursor:pointer; }
+        .item:hover { border-color:#2b3b52; }
+        .item.active { border-color:#1f6feb; }
+        .title { font-weight:800; }
+        .muted { color:#8aa0b5; font-size:12px; }
+        .chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
+        .chip { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; background:#1d2a3a; border:1px solid #243247; font-size:12px; color:#8aa0b5; }
+        .dot { width:8px; height:8px; border-radius:50%; }
+        .ok{ background:#2ecc71 } .warn{ background:#f1c40f } .err{ background:#e74c3c }
+      </style>
+
+      <div class="box">
+        <div class="row">
+          <input id="q" style="flex:1" placeholder="Buscar chat_id / teléfono…" />
+          <button id="refresh">Refresh</button>
+        </div>
+        <div class="row" style="margin-top:8px">
+          <select id="status" style="flex:1">
+            <option value="">Status: all</option>
+            <option value="ok">ok</option>
+            <option value="warn">warn</option>
+            <option value="error">error</option>
+          </select>
+          <select id="state" style="flex:1">
+            <option value="">State: all</option>
+            <option>IDLE</option><option>BROWSING</option><option>BUILDING_ORDER</option><option>WAITING_ADDRESS</option><option>WAITING_PAYMENT</option><option>COMPLETED</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="list" id="list"></div>
+    `;
+  }
+
+  connectedCallback() {
+    this.shadowRoot.getElementById("refresh").onclick = () => this.refresh();
+    this.shadowRoot.getElementById("q").oninput = () => {
+      clearTimeout(this._t);
+      this._t = setTimeout(() => this.refresh(), 250);
+    };
+    this.shadowRoot.getElementById("status").onchange = () => this.refresh();
+    this.shadowRoot.getElementById("state").onchange = () => this.refresh();
+
+    this._unsub1 = on("conversation:upsert", (conv) => {
+      const idx = this.conversations.findIndex(x => x.chat_id === conv.chat_id);
+      if (idx >= 0) this.conversations[idx] = conv;
+      else this.conversations.unshift(conv);
+      this.render();
+    });
+
+    this.refresh();
+  }
+
+  disconnectedCallback() {
+    this._unsub1?.();
+  }
+
+  dot(status) {
+    const cls = status === "ok" ? "ok" : (status === "warn" ? "warn" : "err");
+    return `<span class="dot ${cls}"></span>`;
+  }
+
+  async refresh() {
+    const q = this.shadowRoot.getElementById("q").value || "";
+    const status = this.shadowRoot.getElementById("status").value || "";
+    const state = this.shadowRoot.getElementById("state").value || "";
+    const data = await api.conversations({ q, status, state });
+    this.conversations = data.items || [];
+    this.render();
+  }
+
+  render() {
+    const list = this.shadowRoot.getElementById("list");
+    list.innerHTML = "";
+
+    for (const c of this.conversations) {
+      const el = document.createElement("div");
+      el.className = "item" + (c.chat_id === this.selected ? " active" : "");
+      el.innerHTML = `
+        <div class="row">
+          ${this.dot(c.status)}
+          <div style="flex:1">
+            <div class="title">${c.from}</div>
+            <div class="muted">${c.chat_id}</div>
+          </div>
+        </div>
+        <div class="chips">
+          <span class="chip">state: ${c.state}</span>
+          <span class="chip">intent: ${c.intent}</span>
+          <span class="chip">last: ${new Date(c.last_activity).toLocaleTimeString()}</span>
+        </div>
+      `;
+      el.onclick = () => {
+        this.selected = c.chat_id;
+        this.render();
+        emit("ui:selectedChat", { chat_id: c.chat_id });
+      };
+      list.appendChild(el);
+    }
+  }
+}
+
+customElements.define("conversation-list", ConversationList);