321 lines
12 KiB
JavaScript
321 lines
12 KiB
JavaScript
import { api } from "../lib/api.js";
|
|
|
|
class RecommendationsCrud extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
this.items = [];
|
|
this.selected = null;
|
|
this.loading = false;
|
|
this.searchQuery = "";
|
|
this.editMode = null; // 'create' | 'edit' | null
|
|
|
|
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; }
|
|
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 { min-height:60px; resize:vertical; font-size:13px; }
|
|
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-key { font-weight:600; color:#e7eef7; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
|
|
.item-trigger { font-size:12px; color:#8aa0b5; margin-bottom:4px; }
|
|
.item-queries { font-size:11px; color:#2ecc71; }
|
|
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:10px; }
|
|
.badge.active { background:#0f2a1a; color:#2ecc71; }
|
|
.badge.inactive { background:#241214; color:#e74c3c; }
|
|
.badge.priority { background:#253245; color:#8aa0b5; }
|
|
|
|
.form { flex:1; overflow-y:auto; }
|
|
.form-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-hint { font-size:11px; color:#8aa0b5; margin-top:4px; }
|
|
.field-row { display:flex; gap:12px; }
|
|
.field-row .field { flex:1; }
|
|
|
|
.actions { display:flex; gap:8px; margin-top:16px; }
|
|
.loading { text-align:center; padding:40px; color:#8aa0b5; }
|
|
|
|
.toggle { display:flex; align-items:center; gap:8px; cursor:pointer; }
|
|
.toggle input { width:auto; }
|
|
</style>
|
|
|
|
<div class="container">
|
|
<div class="panel">
|
|
<div class="panel-title">Reglas de Recomendacion</div>
|
|
<div class="toolbar">
|
|
<input type="text" id="search" placeholder="Buscar regla..." style="flex:1" />
|
|
<button id="newBtn">+ Nueva</button>
|
|
</div>
|
|
<div class="list" id="list">
|
|
<div class="loading">Cargando...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<div class="panel-title" id="formTitle">Detalle</div>
|
|
<div class="form" id="form">
|
|
<div class="form-empty">Seleccioná una regla o creá una nueva</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("newBtn").onclick = () => this.showCreateForm();
|
|
|
|
this.load();
|
|
}
|
|
|
|
async load() {
|
|
this.loading = true;
|
|
this.renderList();
|
|
|
|
try {
|
|
const data = await api.recommendations({ q: this.searchQuery, limit: 200 });
|
|
this.items = data.items || [];
|
|
this.loading = false;
|
|
this.renderList();
|
|
} catch (e) {
|
|
console.error("Error loading recommendations:", 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 reglas</div>`;
|
|
return;
|
|
}
|
|
|
|
list.innerHTML = "";
|
|
for (const item of this.items) {
|
|
const el = document.createElement("div");
|
|
el.className = "item" + (this.selected?.id === item.id ? " active" : "");
|
|
|
|
const trigger = item.trigger || {};
|
|
const keywords = (trigger.keywords || []).join(", ") || "—";
|
|
const queries = (item.queries || []).slice(0, 3).join(", ");
|
|
const hasMore = (item.queries || []).length > 3;
|
|
|
|
el.innerHTML = `
|
|
<div class="item-key">
|
|
${item.rule_key}
|
|
<span class="badge ${item.active ? "active" : "inactive"}">${item.active ? "Activa" : "Inactiva"}</span>
|
|
<span class="badge priority">P: ${item.priority}</span>
|
|
</div>
|
|
<div class="item-trigger">Keywords: ${keywords}</div>
|
|
<div class="item-queries">→ ${queries}${hasMore ? "..." : ""}</div>
|
|
`;
|
|
|
|
el.onclick = () => {
|
|
this.selected = item;
|
|
this.editMode = "edit";
|
|
this.renderList();
|
|
this.renderForm();
|
|
};
|
|
|
|
list.appendChild(el);
|
|
}
|
|
}
|
|
|
|
showCreateForm() {
|
|
this.selected = null;
|
|
this.editMode = "create";
|
|
this.renderList();
|
|
this.renderForm();
|
|
}
|
|
|
|
renderForm() {
|
|
const form = this.shadowRoot.getElementById("form");
|
|
const title = this.shadowRoot.getElementById("formTitle");
|
|
|
|
if (!this.editMode) {
|
|
title.textContent = "Detalle";
|
|
form.innerHTML = `<div class="form-empty">Seleccioná una regla o creá una nueva</div>`;
|
|
return;
|
|
}
|
|
|
|
const isCreate = this.editMode === "create";
|
|
title.textContent = isCreate ? "Nueva Regla" : "Editar Regla";
|
|
|
|
const rule_key = this.selected?.rule_key || "";
|
|
const trigger = this.selected?.trigger || {};
|
|
const queries = this.selected?.queries || [];
|
|
const ask_slots = this.selected?.ask_slots || [];
|
|
const active = this.selected?.active !== false;
|
|
const priority = this.selected?.priority || 100;
|
|
|
|
// Convert arrays to comma-separated strings for display
|
|
const triggerKeywords = (trigger.keywords || []).join(", ");
|
|
const queriesText = (queries || []).join(", ");
|
|
const askSlotsText = Array.isArray(ask_slots)
|
|
? ask_slots.map(s => typeof s === "string" ? s : s?.slot || s?.keyword || "").filter(Boolean).join(", ")
|
|
: "";
|
|
|
|
form.innerHTML = `
|
|
<div class="field">
|
|
<label>Rule Key (identificador unico)</label>
|
|
<input type="text" id="ruleKeyInput" value="${rule_key}" ${isCreate ? "" : "disabled"} placeholder="ej: asado_core, alcohol_yes" />
|
|
<div class="field-hint">Sin espacios, en minusculas con guiones bajos</div>
|
|
</div>
|
|
|
|
<div class="field-row">
|
|
<div class="field">
|
|
<label>Prioridad</label>
|
|
<input type="number" id="priorityInput" value="${priority}" min="1" max="1000" />
|
|
<div class="field-hint">Mayor = primero</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Estado</label>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="activeInput" ${active ? "checked" : ""} />
|
|
<span>Activa</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label>Trigger (palabras clave)</label>
|
|
<textarea id="triggerInput" placeholder="asado, parrilla, carne, bife...">${triggerKeywords}</textarea>
|
|
<div class="field-hint">Palabras que activan esta regla, separadas por coma</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label>Productos a recomendar</label>
|
|
<textarea id="queriesInput" placeholder="provoleta, chimichurri, ensalada...">${queriesText}</textarea>
|
|
<div class="field-hint">Productos a buscar cuando se activa la regla, separados por coma</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label>Preguntar sobre... (opcional)</label>
|
|
<textarea id="askSlotsInput" placeholder="achuras, cerdo, vino...">${askSlotsText}</textarea>
|
|
<div class="field-hint">El bot preguntara al usuario sobre estos temas de forma natural</div>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<button id="saveBtn">${isCreate ? "Crear" : "Guardar"}</button>
|
|
${!isCreate ? `<button id="deleteBtn" class="danger">Eliminar</button>` : ""}
|
|
<button id="cancelBtn" class="secondary">Cancelar</button>
|
|
</div>
|
|
`;
|
|
|
|
this.shadowRoot.getElementById("saveBtn").onclick = () => this.save();
|
|
this.shadowRoot.getElementById("cancelBtn").onclick = () => this.cancel();
|
|
if (!isCreate) {
|
|
this.shadowRoot.getElementById("deleteBtn").onclick = () => this.delete();
|
|
}
|
|
}
|
|
|
|
parseCommaSeparated(str) {
|
|
return String(str || "")
|
|
.split(",")
|
|
.map(s => s.trim().toLowerCase())
|
|
.filter(Boolean);
|
|
}
|
|
|
|
async save() {
|
|
const ruleKey = this.shadowRoot.getElementById("ruleKeyInput").value.trim().toLowerCase().replace(/\s+/g, "_");
|
|
const priority = parseInt(this.shadowRoot.getElementById("priorityInput").value, 10) || 100;
|
|
const active = this.shadowRoot.getElementById("activeInput").checked;
|
|
|
|
// Parse comma-separated values into arrays
|
|
const triggerKeywords = this.parseCommaSeparated(this.shadowRoot.getElementById("triggerInput").value);
|
|
const queries = this.parseCommaSeparated(this.shadowRoot.getElementById("queriesInput").value);
|
|
const askSlotsKeywords = this.parseCommaSeparated(this.shadowRoot.getElementById("askSlotsInput").value);
|
|
|
|
if (!ruleKey) {
|
|
alert("El rule_key es requerido");
|
|
return;
|
|
}
|
|
|
|
// Build trigger object with keywords array
|
|
const trigger = triggerKeywords.length > 0 ? { keywords: triggerKeywords } : {};
|
|
|
|
// Ask slots as simple array of keywords (LLM will formulate questions naturally)
|
|
const ask_slots = askSlotsKeywords;
|
|
|
|
const data = {
|
|
rule_key: ruleKey,
|
|
trigger,
|
|
queries,
|
|
ask_slots,
|
|
active,
|
|
priority,
|
|
};
|
|
|
|
try {
|
|
if (this.editMode === "create") {
|
|
await api.createRecommendation(data);
|
|
} else {
|
|
await api.updateRecommendation(this.selected.id, data);
|
|
}
|
|
this.editMode = null;
|
|
this.selected = null;
|
|
await this.load();
|
|
this.renderForm();
|
|
} catch (e) {
|
|
console.error("Error saving recommendation:", e);
|
|
alert("Error guardando: " + (e.message || e));
|
|
}
|
|
}
|
|
|
|
async delete() {
|
|
if (!this.selected?.id) return;
|
|
if (!confirm(`¿Eliminar la regla "${this.selected.rule_key}"?`)) return;
|
|
|
|
try {
|
|
await api.deleteRecommendation(this.selected.id);
|
|
this.editMode = null;
|
|
this.selected = null;
|
|
await this.load();
|
|
this.renderForm();
|
|
} catch (e) {
|
|
console.error("Error deleting recommendation:", e);
|
|
alert("Error eliminando: " + (e.message || e));
|
|
}
|
|
}
|
|
|
|
cancel() {
|
|
this.editMode = null;
|
|
this.selected = null;
|
|
this.renderList();
|
|
this.renderForm();
|
|
}
|
|
}
|
|
|
|
customElements.define("recommendations-crud", RecommendationsCrud);
|