ux improved

2026-01-17 04:13:35 -03:00
parent 98e3d78e3d
commit 63b9ecef61
35 changed files with 4266 additions and 75 deletions
--- a/public/components/conversations-crud.js
+++ b/public/components/conversations-crud.js
@@ -0,0 +1,267 @@
+import { api } from "../lib/api.js";
+import { emit, on } from "../lib/bus.js";
+
+class ConversationsCrud extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.items = [];
+    this.selected = null;
+    this.loading = false;
+    this.searchQuery = "";
+    this.statusFilter = "";
+    this.stateFilter = "";
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display:block; height:100%; padding:16px; overflow:hidden; }
+        * { box-sizing:border-box; font-family:system-ui,Segoe UI,Roboto,Arial; }
+        .container { display:grid; grid-template-columns:1fr 450px; gap:16px; height:100%; }
+        .panel { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:16px; overflow:hidden; display:flex; flex-direction:column; }
+        .panel-title { font-size:14px; font-weight:700; color:#8aa0b5; text-transform:uppercase; letter-spacing:.4px; margin-bottom:12px; }
+        
+        .toolbar { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
+        input, select { background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:8px; padding:8px 12px; font-size:13px; }
+        input:focus, select:focus { outline:none; border-color:#1f6feb; }
+        button { cursor:pointer; background:#1f6feb; color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:13px; }
+        button:hover { background:#1a5fd0; }
+        button:disabled { opacity:.5; cursor:not-allowed; }
+        button.secondary { background:#253245; }
+        button.secondary:hover { background:#2d3e52; }
+        button.danger { background:#e74c3c; }
+        button.danger:hover { background:#c0392b; }
+        
+        .list { flex:1; overflow-y:auto; }
+        .item { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; transition:all .15s; }
+        .item:hover { border-color:#1f6feb; }
+        .item.active { border-color:#1f6feb; background:#111b2a; }
+        .item-header { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
+        .item-name { font-weight:600; color:#e7eef7; flex:1; }
+        .item-meta { font-size:12px; color:#8aa0b5; }
+        .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
+        .ok { background:#2ecc71; } .warn { background:#f1c40f; } .err { background:#e74c3c; }
+        .chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
+        .chip { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; background:#253245; color:#8aa0b5; }
+        
+        .detail { flex:1; overflow-y:auto; }
+        .detail-empty { color:#8aa0b5; text-align:center; padding:40px; }
+        .field { margin-bottom:16px; }
+        .field label { display:block; font-size:12px; color:#8aa0b5; margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; }
+        .field-value { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:10px 12px; color:#e7eef7; font-size:13px; }
+        
+        .actions { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
+        .loading { text-align:center; padding:40px; color:#8aa0b5; }
+      </style>
+
+      <div class="container">
+        <div class="panel">
+          <div class="panel-title">Conversaciones</div>
+          <div class="toolbar">
+            <input type="text" id="search" placeholder="Buscar chat_id o telefono..." style="flex:1;min-width:150px" />
+            <select id="status">
+              <option value="">Status: todos</option>
+              <option value="ok">ok</option>
+              <option value="warn">warn</option>
+              <option value="error">error</option>
+            </select>
+            <select id="state">
+              <option value="">State: todos</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 class="list" id="list">
+            <div class="loading">Cargando...</div>
+          </div>
+        </div>
+
+        <div class="panel">
+          <div class="panel-title" id="detailTitle">Detalle</div>
+          <div class="detail" id="detail">
+            <div class="detail-empty">Selecciona una conversacion</div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  connectedCallback() {
+    this.shadowRoot.getElementById("search").oninput = (e) => {
+      this.searchQuery = e.target.value;
+      clearTimeout(this._searchTimer);
+      this._searchTimer = setTimeout(() => this.load(), 300);
+    };
+
+    this.shadowRoot.getElementById("status").onchange = (e) => {
+      this.statusFilter = e.target.value;
+      this.load();
+    };
+
+    this.shadowRoot.getElementById("state").onchange = (e) => {
+      this.stateFilter = e.target.value;
+      this.load();
+    };
+
+    this._unsubUpsert = on("conversation:upsert", (conv) => {
+      const idx = this.items.findIndex(x => x.chat_id === conv.chat_id);
+      if (idx >= 0) this.items[idx] = conv;
+      else this.items.unshift(conv);
+      this.renderList();
+    });
+
+    this.load();
+  }
+
+  disconnectedCallback() {
+    this._unsubUpsert?.();
+  }
+
+  async load() {
+    this.loading = true;
+    this.renderList();
+
+    try {
+      const data = await api.conversations({ 
+        q: this.searchQuery, 
+        status: this.statusFilter, 
+        state: this.stateFilter 
+      });
+      this.items = data.items || [];
+      this.loading = false;
+      this.renderList();
+    } catch (e) {
+      console.error("Error loading conversations:", e);
+      this.items = [];
+      this.loading = false;
+      this.renderList();
+    }
+  }
+
+  renderList() {
+    const list = this.shadowRoot.getElementById("list");
+
+    if (this.loading) {
+      list.innerHTML = `<div class="loading">Cargando...</div>`;
+      return;
+    }
+
+    if (!this.items.length) {
+      list.innerHTML = `<div class="loading">No se encontraron conversaciones</div>`;
+      return;
+    }
+
+    list.innerHTML = "";
+    for (const item of this.items) {
+      const el = document.createElement("div");
+      el.className = "item" + (this.selected?.chat_id === item.chat_id ? " active" : "");
+      
+      const dotClass = item.status === "ok" ? "ok" : (item.status === "warn" ? "warn" : "err");
+      const time = item.last_activity ? new Date(item.last_activity).toLocaleString() : "—";
+
+      el.innerHTML = `
+        <div class="item-header">
+          <span class="dot ${dotClass}"></span>
+          <span class="item-name">${item.from || item.chat_id}</span>
+        </div>
+        <div class="item-meta">${item.chat_id}</div>
+        <div class="chips">
+          <span class="chip">state: ${item.state || "—"}</span>
+          <span class="chip">intent: ${item.intent || "—"}</span>
+          <span class="chip">${time}</span>
+        </div>
+      `;
+
+      el.onclick = () => {
+        this.selected = item;
+        this.renderList();
+        this.renderDetail();
+      };
+
+      list.appendChild(el);
+    }
+  }
+
+  renderDetail() {
+    const detail = this.shadowRoot.getElementById("detail");
+    const title = this.shadowRoot.getElementById("detailTitle");
+
+    if (!this.selected) {
+      title.textContent = "Detalle";
+      detail.innerHTML = `<div class="detail-empty">Selecciona una conversacion</div>`;
+      return;
+    }
+
+    const c = this.selected;
+    title.textContent = c.from || c.chat_id;
+
+    detail.innerHTML = `
+      <div class="field">
+        <label>Chat ID</label>
+        <div class="field-value">${c.chat_id}</div>
+      </div>
+      <div class="field">
+        <label>From</label>
+        <div class="field-value">${c.from || "—"}</div>
+      </div>
+      <div class="field">
+        <label>Estado</label>
+        <div class="field-value">${c.state || "—"}</div>
+      </div>
+      <div class="field">
+        <label>Intent</label>
+        <div class="field-value">${c.intent || "—"}</div>
+      </div>
+      <div class="field">
+        <label>Status</label>
+        <div class="field-value">${c.status || "—"}</div>
+      </div>
+      <div class="field">
+        <label>Ultima actividad</label>
+        <div class="field-value">${c.last_activity ? new Date(c.last_activity).toLocaleString() : "—"}</div>
+      </div>
+      <div class="field">
+        <label>Ultimo run</label>
+        <div class="field-value">${c.last_run_id || "—"}</div>
+      </div>
+      <div class="actions">
+        <button id="openChat">Abrir Chat</button>
+        <button id="retryLast" class="secondary">Retry Last</button>
+        <button id="deleteConv" class="danger">Eliminar</button>
+      </div>
+    `;
+
+    detail.scrollTop = 0;
+
+    this.shadowRoot.getElementById("openChat").onclick = () => {
+      emit("ui:selectedChat", { chat_id: c.chat_id });
+      emit("ui:switchView", { view: "chat" });
+    };
+
+    this.shadowRoot.getElementById("retryLast").onclick = async () => {
+      try {
+        await api.retryLast(c.chat_id);
+        alert("Retry ejecutado");
+      } catch (e) {
+        alert("Error: " + (e.message || e));
+      }
+    };
+
+    this.shadowRoot.getElementById("deleteConv").onclick = async () => {
+      if (!confirm(`¿Eliminar la conversacion de "${c.chat_id}"?`)) return;
+      try {
+        await api.deleteConversation(c.chat_id);
+        this.selected = null;
+        await this.load();
+        this.renderDetail();
+      } catch (e) {
+        alert("Error: " + (e.message || e));
+      }
+    };
+  }
+}
+
+customElements.define("conversations-crud", ConversationsCrud);