5 bloques en una pasada:
A. Scroll fixes (síntoma reportado por el usuario):
- run-timeline: nuevo flag _userScrolledUp con detección por rAF en
bindScroll. Auto-scroll al final SOLO si el usuario está abajo
(umbral 150px) o si él mismo disparó un optimistic bubble. Cuando
el usuario manda mensaje, se resetea el flag y se scrollea.
- conversation-inspector: mismo patrón. ui:chatScroll respeta el
flag userScrolledUp del emisor para no perseguir al usuario que
lee arriba.
- .bubble: + min-width:0, overflow-wrap:anywhere para URLs/JSON
largos sin espacios.
- <pre>: + overflow-x:auto, max-width:100%.
- chat-simulator: textarea con resize:vertical, min/max heights
viewport-friendly. inputs-col con overflow-y:auto.
B. Stale state options:
- conversation-list y conversations-crud: dropdowns ahora muestran
IDLE / CART / SHIPPING / AWAITING_HUMAN. Quitados BROWSING,
BUILDING_ORDER, WAITING_ADDRESS, WAITING_PAYMENT, COMPLETED.
- main.js: simulated plan.next_state pasa a CART.
C. SSE resilience (lib/sse.js):
- connect() con backoff exponencial (1s → 30s).
- safeParse() helper: cada evento envuelve JSON.parse en try-catch
para que un payload malformado no rompa otros listeners.
- reset retryDelay al primer "hello" exitoso.
- ops-shell: indicador con dot (verde "En vivo" / naranja pulsante
"Reconectando…") en lugar de texto plano.
D. Toast service global (public/lib/toast.js):
- API simple: toast({ kind, text, ms }). Apila, animación slide-in,
auto-dismiss 4s. Click para cerrar.
- safeFetch en api.js: wrapper que dispara toast en network error y
non-OK. Migrados simEvolution + retryLast.
- chat-simulator usa toast en lugar de status text efímero.
E. Theming con CSS vars:
- public/styles/theme.css con paleta completa (panels, borders,
text, accents, bubbles, charts, radii, shadows). Linkeado desde
index.html.
- Migrados a var(--*) los 5 componentes más visibles:
run-timeline, chat-simulator, conversation-inspector,
conversation-list, home-dashboard. Custom properties heredan a
través del shadow DOM, así que los demás componentes pueden
migrar gradualmente sin cambios estructurales.
- home-dashboard ya tenía vars locales: ahora apuntan a las globales.
Backend: 192/192 tests pasando. Sin cambios de API.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
329 lines
10 KiB
JavaScript
329 lines
10 KiB
JavaScript
import { toast } from "./toast.js";
|
|
|
|
/**
|
|
* fetch wrapper que dispara toast en error de red o respuesta no-OK.
|
|
* Devuelve la respuesta parseada como JSON. Si la respuesta tiene
|
|
* `{ ok: false, error }`, también dispara toast.
|
|
*/
|
|
export async function safeFetch(url, opts = {}, { silent = false, label = null } = {}) {
|
|
let res;
|
|
try {
|
|
res = await fetch(url, opts);
|
|
} catch (err) {
|
|
if (!silent) toast({ kind: "error", text: `${label || "Red"}: ${err?.message || "sin conexión"}` });
|
|
throw err;
|
|
}
|
|
if (!res.ok) {
|
|
let body = null;
|
|
try { body = await res.json(); } catch (_) {}
|
|
const msg = body?.error || body?.message || `${res.status} ${res.statusText}`;
|
|
if (!silent) toast({ kind: "error", text: `${label || "Error"}: ${msg}` });
|
|
const err = new Error(msg);
|
|
err.status = res.status;
|
|
err.body = body;
|
|
throw err;
|
|
}
|
|
try {
|
|
return await res.json();
|
|
} catch (_) {
|
|
return {};
|
|
}
|
|
}
|
|
|
|
export const api = {
|
|
async conversations({ q = "", status = "", state = "" } = {}) {
|
|
const u = new URL("/conversations", location.origin);
|
|
if (q) u.searchParams.set("q", q);
|
|
if (status) u.searchParams.set("status", status);
|
|
if (state) u.searchParams.set("state", state);
|
|
return fetch(u).then(r => r.json());
|
|
},
|
|
|
|
async deleteConversation(chat_id) {
|
|
if (!chat_id) throw new Error("chat_id_required");
|
|
return fetch(`/conversations/${encodeURIComponent(chat_id)}`, { method: "DELETE" }).then(r => r.json());
|
|
},
|
|
|
|
async users({ q = "", limit = 200 } = {}) {
|
|
const u = new URL("/users", location.origin);
|
|
if (q) u.searchParams.set("q", String(q));
|
|
u.searchParams.set("limit", String(limit));
|
|
return fetch(u).then(r => r.json());
|
|
},
|
|
|
|
async deleteUser(chat_id, { deleteWoo = false } = {}) {
|
|
if (!chat_id) throw new Error("chat_id_required");
|
|
const u = new URL(`/users/${encodeURIComponent(chat_id)}`, location.origin);
|
|
if (deleteWoo) u.searchParams.set("deleteWoo", "1");
|
|
return fetch(u, { method: "DELETE" }).then(r => r.json());
|
|
},
|
|
|
|
async messages({ chat_id, limit = 200 } = {}) {
|
|
const u = new URL("/messages", location.origin);
|
|
if (chat_id) u.searchParams.set("chat_id", chat_id);
|
|
u.searchParams.set("limit", String(limit));
|
|
return fetch(u).then(r => r.json());
|
|
},
|
|
|
|
async runs({ chat_id, limit = 1 } = {}) {
|
|
const u = new URL("/runs", location.origin);
|
|
if (chat_id) u.searchParams.set("chat_id", chat_id);
|
|
u.searchParams.set("limit", String(limit));
|
|
return fetch(u).then(r => r.json());
|
|
},
|
|
|
|
async runById(run_id) {
|
|
if (!run_id) return null;
|
|
return fetch(`/runs/${encodeURIComponent(run_id)}`).then(r => r.json());
|
|
},
|
|
|
|
async simEvolution(payload) {
|
|
return safeFetch("/webhook/evolution", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload),
|
|
}, { label: "Sim Evolution" });
|
|
},
|
|
|
|
async retryLast(chat_id) {
|
|
if (!chat_id) throw new Error("chat_id_required");
|
|
return safeFetch(`/conversations/${encodeURIComponent(chat_id)}/retry-last`, { method: "POST" }, { label: "Retry" });
|
|
},
|
|
|
|
// Products CRUD
|
|
async products({ q = "", limit = 2000, offset = 0 } = {}) {
|
|
const u = new URL("/products", location.origin);
|
|
if (q) u.searchParams.set("q", q);
|
|
u.searchParams.set("limit", String(limit));
|
|
u.searchParams.set("offset", String(offset));
|
|
return fetch(u).then(r => r.json());
|
|
},
|
|
|
|
async productById(id) {
|
|
if (!id) return null;
|
|
return fetch(`/products/${encodeURIComponent(id)}`).then(r => r.json());
|
|
},
|
|
|
|
async syncProducts() {
|
|
return fetch("/products/sync", { method: "POST" }).then(r => r.json());
|
|
},
|
|
|
|
async updateProductUnit(wooProductId, { sell_unit }) {
|
|
return fetch(`/products/${encodeURIComponent(wooProductId)}/unit`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ sell_unit }),
|
|
}).then(r => r.json());
|
|
},
|
|
|
|
async updateProduct(wooProductId, { sell_unit, categories }) {
|
|
return fetch(`/products/${encodeURIComponent(wooProductId)}`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ sell_unit, categories }),
|
|
}).then(r => r.json());
|
|
},
|
|
|
|
async updateProductsUnit(wooProductIds, { sell_unit }) {
|
|
return fetch(`/products/bulk/unit`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ woo_product_ids: wooProductIds, sell_unit }),
|
|
}).then(r => r.json());
|
|
},
|
|
|
|
// Aliases CRUD
|
|
async aliases({ q = "", woo_product_id = null, limit = 200 } = {}) {
|
|
const u = new URL("/aliases", location.origin);
|
|
if (q) u.searchParams.set("q", q);
|
|
if (woo_product_id) u.searchParams.set("woo_product_id", String(woo_product_id));
|
|
u.searchParams.set("limit", String(limit));
|
|
return fetch(u).then(r => r.json());
|
|
},
|
|
|
|
async createAlias(data) {
|
|
return fetch("/aliases", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(data),
|
|
}).then(r => r.json());
|
|
},
|
|
|
|
async updateAlias(alias, data) {
|
|
return fetch(`/aliases/${encodeURIComponent(alias)}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(data),
|
|
}).then(r => r.json());
|
|
},
|
|
|
|
async deleteAlias(alias) {
|
|
return fetch(`/aliases/${encodeURIComponent(alias)}`, { method: "DELETE" }).then(r => r.json());
|
|
},
|
|
|
|
// Recommendations CRUD
|
|
async recommendations({ q = "", limit = 200 } = {}) {
|
|
const u = new URL("/recommendations", location.origin);
|
|
if (q) u.searchParams.set("q", q);
|
|
u.searchParams.set("limit", String(limit));
|
|
return fetch(u).then(r => r.json());
|
|
},
|
|
|
|
async getRecommendation(id) {
|
|
if (!id) return null;
|
|
return fetch(`/recommendations/${encodeURIComponent(id)}`).then(r => r.json());
|
|
},
|
|
|
|
async createRecommendation(data) {
|
|
return fetch("/recommendations", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(data),
|
|
}).then(r => r.json());
|
|
},
|
|
|
|
async updateRecommendation(id, data) {
|
|
return fetch(`/recommendations/${encodeURIComponent(id)}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(data),
|
|
}).then(r => r.json());
|
|
},
|
|
|
|
async deleteRecommendation(id) {
|
|
return fetch(`/recommendations/${encodeURIComponent(id)}`, { method: "DELETE" }).then(r => r.json());
|
|
},
|
|
|
|
// Quantities (cantidades por producto/evento/persona)
|
|
async listQuantities() {
|
|
return fetch("/quantities").then(r => r.json());
|
|
},
|
|
|
|
async getProductQuantities(wooProductId) {
|
|
if (!wooProductId) return { rules: [] };
|
|
return fetch(`/quantities/${encodeURIComponent(wooProductId)}`).then(r => r.json());
|
|
},
|
|
|
|
async saveProductQuantities(wooProductId, rules) {
|
|
return fetch(`/quantities/${encodeURIComponent(wooProductId)}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ rules }),
|
|
}).then(r => r.json());
|
|
},
|
|
|
|
// Sync de emergencia desde WooCommerce
|
|
async syncFromWoo() {
|
|
return fetch("/products/sync-from-woo", { method: "POST" }).then(r => r.json());
|
|
},
|
|
|
|
// --- Orders & Stats ---
|
|
async listOrders({ page = 1, limit = 50 } = {}) {
|
|
const u = new URL("/api/orders", location.origin);
|
|
u.searchParams.set("page", String(page));
|
|
u.searchParams.set("limit", String(limit));
|
|
return fetch(u).then(r => r.json());
|
|
},
|
|
|
|
async getOrderStats() {
|
|
return fetch("/api/stats/orders").then(r => r.json());
|
|
},
|
|
|
|
// Alias para compatibilidad
|
|
async listRecentOrders({ limit = 20 } = {}) {
|
|
return this.listOrders({ page: 1, limit });
|
|
},
|
|
|
|
async getProductsWithStock() {
|
|
return fetch("/test/products-with-stock").then(r => r.json());
|
|
},
|
|
|
|
async createTestOrder({ basket, address, wa_chat_id }) {
|
|
return fetch("/test/order", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ basket, address, wa_chat_id }),
|
|
}).then(r => r.json());
|
|
},
|
|
|
|
// --- Prompts CRUD ---
|
|
async prompts() {
|
|
return fetch("/prompts").then(r => r.json());
|
|
},
|
|
|
|
async getPrompt(key) {
|
|
return fetch(`/prompts/${encodeURIComponent(key)}`).then(r => r.json());
|
|
},
|
|
|
|
async savePrompt(key, { content, model, created_by }) {
|
|
return fetch(`/prompts/${encodeURIComponent(key)}`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ content, model, created_by }),
|
|
}).then(r => r.json());
|
|
},
|
|
|
|
async rollbackPrompt(key, version) {
|
|
return fetch(`/prompts/${encodeURIComponent(key)}/rollback/${version}`, {
|
|
method: "POST"
|
|
}).then(r => r.json());
|
|
},
|
|
|
|
async resetPrompt(key) {
|
|
return fetch(`/prompts/${encodeURIComponent(key)}/reset`, {
|
|
method: "POST"
|
|
}).then(r => r.json());
|
|
},
|
|
|
|
async testPrompt(key, { content, test_message, store_config }) {
|
|
return fetch(`/prompts/${encodeURIComponent(key)}/test`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ content, test_message, store_config }),
|
|
}).then(r => r.json());
|
|
},
|
|
|
|
// --- Human Takeovers ---
|
|
async takeovers({ limit = 50 } = {}) {
|
|
const u = new URL("/takeovers", location.origin);
|
|
u.searchParams.set("limit", String(limit));
|
|
return fetch(u).then(r => r.json());
|
|
},
|
|
|
|
async getTakeover(id) {
|
|
return fetch(`/takeovers/${id}`).then(r => r.json());
|
|
},
|
|
|
|
async respondTakeover(id, { response, add_alias, cart_items }) {
|
|
return fetch(`/takeovers/${id}/respond`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ response, add_alias, cart_items }),
|
|
}).then(r => r.json());
|
|
},
|
|
|
|
async cancelTakeover(id) {
|
|
return fetch(`/takeovers/${id}/cancel`, {
|
|
method: "POST"
|
|
}).then(r => r.json());
|
|
},
|
|
|
|
// --- Settings ---
|
|
async getSettings() {
|
|
return fetch("/settings").then(r => r.json());
|
|
},
|
|
|
|
async saveSettings(settings) {
|
|
const res = await fetch("/settings", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(settings),
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok || data.ok === false) {
|
|
throw new Error(data.message || data.error || "Error guardando configuración");
|
|
}
|
|
return data;
|
|
},
|
|
};
|