268 lines
9.4 KiB
JavaScript
268 lines
9.4 KiB
JavaScript
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 1fr; 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);
|