410 lines
14 KiB
JavaScript
410 lines
14 KiB
JavaScript
import { api } from "../lib/api.js";
|
|
import { on } from "../lib/bus.js";
|
|
|
|
class TakeoversCrud extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
this.items = [];
|
|
this.selected = null;
|
|
this.loading = false;
|
|
this.products = [];
|
|
this.pendingCount = 0;
|
|
|
|
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:350px 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; display:flex; align-items:center; gap:8px; }
|
|
.panel-title .badge { background:#e74c3c; color:#fff; padding:2px 8px; border-radius:10px; font-size:11px; }
|
|
|
|
input, select, textarea { background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:8px; padding:8px 12px; font-size:13px; width:100%; }
|
|
input:focus, select:focus, textarea:focus { outline:none; border-color:#1f6feb; }
|
|
textarea { resize:vertical; min-height:100px; }
|
|
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-query { font-weight:600; color:#f39c12; margin-bottom:4px; font-size:14px; }
|
|
.item-reason { font-size:12px; color:#8aa0b5; margin-bottom:4px; }
|
|
.item-time { font-size:11px; color:#6c7a89; }
|
|
.item-chat { font-size:11px; color:#1f6feb; }
|
|
|
|
.form { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:16px; }
|
|
.form-empty { color:#8aa0b5; text-align:center; padding:40px; }
|
|
.field { }
|
|
.field label { display:block; font-size:12px; color:#8aa0b5; margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; }
|
|
|
|
.actions { display:flex; gap:8px; margin-top:16px; }
|
|
.loading { text-align:center; padding:40px; color:#8aa0b5; }
|
|
|
|
.conversation-history { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:12px; max-height:200px; overflow-y:auto; }
|
|
.msg { margin-bottom:8px; padding:8px; border-radius:6px; font-size:12px; }
|
|
.msg.user { background:#1a2a3a; border-left:3px solid #1f6feb; }
|
|
.msg.assistant { background:#1a2535; border-left:3px solid #2ecc71; }
|
|
.msg-role { font-size:10px; color:#8aa0b5; margin-bottom:4px; text-transform:uppercase; }
|
|
.msg-content { color:#e7eef7; white-space:pre-wrap; }
|
|
|
|
.query-highlight { background:#f39c1230; border:1px solid #f39c12; border-radius:8px; padding:12px; margin-bottom:16px; }
|
|
.query-highlight label { color:#f39c12; }
|
|
.query-highlight .query { font-size:16px; font-weight:600; color:#f39c12; margin-top:4px; }
|
|
|
|
.alias-section { background:#0f1520; border:1px solid #253245; border-radius:8px; padding:12px; margin-top:12px; }
|
|
.alias-section h4 { margin:0 0 12px; font-size:13px; color:#8aa0b5; }
|
|
.checkbox-row { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
|
|
.checkbox-row input[type="checkbox"] { width:auto; }
|
|
.checkbox-row label { font-size:13px; color:#e7eef7; text-transform:none; }
|
|
|
|
.product-selector { position:relative; }
|
|
.product-dropdown {
|
|
position:absolute; top:100%; left:0; right:0; z-index:100;
|
|
background:#0f1520; border:1px solid #253245; border-radius:8px;
|
|
max-height:200px; overflow-y:auto; display:none;
|
|
}
|
|
.product-dropdown.open { display:block; }
|
|
.product-option {
|
|
padding:8px 12px; cursor:pointer; font-size:13px; color:#e7eef7;
|
|
display:flex; justify-content:space-between; align-items:center;
|
|
}
|
|
.product-option:hover { background:#1a2535; }
|
|
.product-option .price { font-size:11px; color:#8aa0b5; }
|
|
|
|
.no-pending { text-align:center; padding:60px 20px; color:#2ecc71; }
|
|
.no-pending svg { width:48px; height:48px; fill:#2ecc71; margin-bottom:16px; }
|
|
</style>
|
|
|
|
<div class="container">
|
|
<div class="panel">
|
|
<div class="panel-title">
|
|
Takeovers Pendientes
|
|
<span class="badge" id="pendingBadge" style="display:none;">0</span>
|
|
</div>
|
|
<div class="list" id="list">
|
|
<div class="loading">Cargando...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-title">Responder</div>
|
|
<div class="form" id="form">
|
|
<div class="form-empty">Selecciona un takeover para responder</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.load();
|
|
this.loadProducts();
|
|
|
|
// Refresh cuando se recibe evento SSE de nuevo takeover
|
|
this._unsubSse = on("sse:takeover", () => this.load());
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
this._unsubSse?.();
|
|
}
|
|
|
|
async load() {
|
|
this.loading = true;
|
|
this.renderList();
|
|
|
|
try {
|
|
const data = await api.takeovers({ limit: 50 });
|
|
this.items = data.items || [];
|
|
this.pendingCount = data.pending_count || this.items.length;
|
|
this.loading = false;
|
|
this.renderList();
|
|
} catch (e) {
|
|
console.error("Error loading takeovers:", e);
|
|
this.items = [];
|
|
this.loading = false;
|
|
this.renderList();
|
|
}
|
|
}
|
|
|
|
async loadProducts() {
|
|
try {
|
|
const data = await api.products({ limit: 2000 });
|
|
this.products = data.items || [];
|
|
} catch (e) {
|
|
console.error("Error loading products:", e);
|
|
this.products = [];
|
|
}
|
|
}
|
|
|
|
getProductName(id) {
|
|
const p = this.products.find(x => x.woo_product_id === id);
|
|
return p?.name || `Producto #${id}`;
|
|
}
|
|
|
|
formatTime(dateStr) {
|
|
if (!dateStr) return "";
|
|
const d = new Date(dateStr);
|
|
const now = new Date();
|
|
const diffMs = now - d;
|
|
const diffMins = Math.floor(diffMs / 60000);
|
|
|
|
if (diffMins < 1) return "Hace un momento";
|
|
if (diffMins < 60) return `Hace ${diffMins} min`;
|
|
if (diffMins < 1440) return `Hace ${Math.floor(diffMins / 60)} hs`;
|
|
return d.toLocaleDateString("es-AR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" });
|
|
}
|
|
|
|
renderList() {
|
|
const list = this.shadowRoot.getElementById("list");
|
|
const badge = this.shadowRoot.getElementById("pendingBadge");
|
|
|
|
if (this.pendingCount > 0) {
|
|
badge.textContent = this.pendingCount;
|
|
badge.style.display = "inline";
|
|
} else {
|
|
badge.style.display = "none";
|
|
}
|
|
|
|
if (this.loading) {
|
|
list.innerHTML = `<div class="loading">Cargando...</div>`;
|
|
return;
|
|
}
|
|
|
|
if (!this.items.length) {
|
|
list.innerHTML = `
|
|
<div class="no-pending">
|
|
<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
|
|
<div>No hay takeovers pendientes</div>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
list.innerHTML = "";
|
|
for (const item of this.items) {
|
|
const el = document.createElement("div");
|
|
el.className = "item" + (this.selected?.id === item.id ? " active" : "");
|
|
|
|
el.innerHTML = `
|
|
<div class="item-query">"${item.pending_query}"</div>
|
|
<div class="item-reason">${this.getReasonLabel(item.reason)}</div>
|
|
<div class="item-chat">Chat: ${item.chat_id}</div>
|
|
<div class="item-time">${this.formatTime(item.created_at)}</div>
|
|
`;
|
|
|
|
el.onclick = () => this.selectTakeover(item);
|
|
list.appendChild(el);
|
|
}
|
|
}
|
|
|
|
getReasonLabel(reason) {
|
|
const labels = {
|
|
product_not_found: "Producto no encontrado",
|
|
low_confidence: "Baja confianza del NLU",
|
|
ambiguous: "Consulta ambigua",
|
|
};
|
|
return labels[reason] || reason;
|
|
}
|
|
|
|
async selectTakeover(item) {
|
|
this.selected = item;
|
|
this.renderList();
|
|
|
|
// Cargar detalles con historial
|
|
try {
|
|
const details = await api.getTakeover(item.id);
|
|
this.selected = { ...item, ...details };
|
|
this.renderForm();
|
|
} catch (e) {
|
|
console.error("Error loading takeover details:", e);
|
|
this.renderForm();
|
|
}
|
|
}
|
|
|
|
renderForm() {
|
|
const form = this.shadowRoot.getElementById("form");
|
|
|
|
if (!this.selected) {
|
|
form.innerHTML = `<div class="form-empty">Selecciona un takeover para responder</div>`;
|
|
return;
|
|
}
|
|
|
|
const history = this.selected.conversation_history || this.selected.recent_messages || [];
|
|
|
|
form.innerHTML = `
|
|
<div class="query-highlight">
|
|
<label>Consulta del cliente</label>
|
|
<div class="query">"${this.selected.pending_query}"</div>
|
|
</div>
|
|
|
|
${history.length > 0 ? `
|
|
<div class="field">
|
|
<label>Historial de conversacion</label>
|
|
<div class="conversation-history">
|
|
${history.slice(-10).map(m => `
|
|
<div class="msg ${m.role}">
|
|
<div class="msg-role">${m.role === "user" ? "Cliente" : "Bot"}</div>
|
|
<div class="msg-content">${this.escapeHtml((m.content || "").slice(0, 300))}</div>
|
|
</div>
|
|
`).join("")}
|
|
</div>
|
|
</div>
|
|
` : ""}
|
|
|
|
<div class="field" style="flex:1;">
|
|
<label>Tu respuesta (se enviara como el bot)</label>
|
|
<textarea id="responseInput" placeholder="Ej: Disculpa, no tenemos ese producto. Pero tenemos..."></textarea>
|
|
</div>
|
|
|
|
<div class="alias-section">
|
|
<h4>Agregar Alias (opcional)</h4>
|
|
<div class="checkbox-row">
|
|
<input type="checkbox" id="addAliasCheck" />
|
|
<label for="addAliasCheck">Agregar "${this.selected.pending_query}" como alias de un producto</label>
|
|
</div>
|
|
<div id="aliasProductSection" style="display:none;">
|
|
<div class="field">
|
|
<label>Seleccionar producto</label>
|
|
<div class="product-selector" id="productSelector">
|
|
<input type="text" id="productSearch" placeholder="Buscar producto..." />
|
|
<div class="product-dropdown" id="productDropdown"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button id="respondBtn">Enviar Respuesta</button>
|
|
<button id="cancelBtn" class="danger">Cancelar Takeover</button>
|
|
</div>
|
|
`;
|
|
|
|
// Event listeners
|
|
this.shadowRoot.getElementById("respondBtn").onclick = () => this.respond();
|
|
this.shadowRoot.getElementById("cancelBtn").onclick = () => this.cancel();
|
|
|
|
const addAliasCheck = this.shadowRoot.getElementById("addAliasCheck");
|
|
const aliasSection = this.shadowRoot.getElementById("aliasProductSection");
|
|
addAliasCheck.onchange = () => {
|
|
aliasSection.style.display = addAliasCheck.checked ? "block" : "none";
|
|
};
|
|
|
|
this.setupProductSelector();
|
|
}
|
|
|
|
escapeHtml(str) {
|
|
return (str || "").replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
}
|
|
|
|
setupProductSelector() {
|
|
const searchInput = this.shadowRoot.getElementById("productSearch");
|
|
const dropdown = this.shadowRoot.getElementById("productDropdown");
|
|
|
|
if (!searchInput || !dropdown) return;
|
|
|
|
this._selectedProductId = null;
|
|
|
|
const renderDropdown = (query) => {
|
|
const q = (query || "").toLowerCase().trim();
|
|
let filtered = this.products;
|
|
if (q) {
|
|
filtered = filtered.filter(p => p.name.toLowerCase().includes(q));
|
|
}
|
|
filtered = filtered.slice(0, 30);
|
|
|
|
if (!filtered.length) {
|
|
dropdown.classList.remove("open");
|
|
return;
|
|
}
|
|
|
|
dropdown.innerHTML = filtered.map(p => `
|
|
<div class="product-option" data-id="${p.woo_product_id}">
|
|
<span>${p.name}</span>
|
|
<span class="price">$${p.price || 0}</span>
|
|
</div>
|
|
`).join("");
|
|
|
|
dropdown.querySelectorAll(".product-option").forEach(opt => {
|
|
opt.onclick = () => {
|
|
this._selectedProductId = parseInt(opt.dataset.id, 10);
|
|
searchInput.value = this.getProductName(this._selectedProductId);
|
|
dropdown.classList.remove("open");
|
|
};
|
|
});
|
|
|
|
dropdown.classList.add("open");
|
|
};
|
|
|
|
searchInput.oninput = () => {
|
|
this._selectedProductId = null;
|
|
clearTimeout(this._searchTimer);
|
|
this._searchTimer = setTimeout(() => renderDropdown(searchInput.value), 150);
|
|
};
|
|
|
|
searchInput.onfocus = () => renderDropdown(searchInput.value);
|
|
|
|
// Close on outside click
|
|
document.addEventListener("click", (e) => {
|
|
if (!this.shadowRoot.getElementById("productSelector")?.contains(e.target)) {
|
|
dropdown.classList.remove("open");
|
|
}
|
|
});
|
|
}
|
|
|
|
async respond() {
|
|
const response = this.shadowRoot.getElementById("responseInput").value.trim();
|
|
if (!response) {
|
|
alert("Escribe una respuesta");
|
|
return;
|
|
}
|
|
|
|
const addAliasCheck = this.shadowRoot.getElementById("addAliasCheck");
|
|
let addAlias = null;
|
|
|
|
if (addAliasCheck.checked && this._selectedProductId) {
|
|
addAlias = {
|
|
query: this.selected.pending_query,
|
|
woo_product_id: this._selectedProductId,
|
|
};
|
|
}
|
|
|
|
try {
|
|
await api.respondTakeover(this.selected.id, { response, add_alias: addAlias });
|
|
alert("Respuesta enviada");
|
|
this.selected = null;
|
|
await this.load();
|
|
this.renderForm();
|
|
} catch (e) {
|
|
console.error("Error responding:", e);
|
|
alert("Error: " + (e.message || e));
|
|
}
|
|
}
|
|
|
|
async cancel() {
|
|
if (!confirm("Cancelar este takeover? El cliente no recibira respuesta automatica.")) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await api.cancelTakeover(this.selected.id);
|
|
alert("Takeover cancelado");
|
|
this.selected = null;
|
|
await this.load();
|
|
this.renderForm();
|
|
} catch (e) {
|
|
console.error("Error cancelling:", e);
|
|
alert("Error: " + (e.message || e));
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define("takeovers-crud", TakeoversCrud);
|