0bf26f8eb5
- theme.css reescrito: paleta light (sky/emerald accents, slate neutrals), tokens de spacing/typography/radii/shadows, @font-face Inter + JetBrains Mono variable woff2 self-hosted. - ops-shell: header blanco con nav active=accent-soft + status pill pastel. - run-timeline: bubbles emerald-100 (user) / blue-100 (bot) sobre blanco. - home-dashboard: helpers cssVar + withAlpha, 6 charts coordinados a paleta pastel (--chart-blue/green/purple/orange/pink/gray). - 8 CRUDs (users, products, orders, conversations, aliases, recommendations, quantities, takeovers, settings, debug) migrados de hex hardcoded oscuros a var(--*). - modal.js + toast.js refactor a vars con fallbacks; modal blanco con shadow-lg y soft icon backgrounds. - test-panel: aliases :host apuntan a globals en vez de override dark. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
356 lines
14 KiB
JavaScript
356 lines
14 KiB
JavaScript
import { api } from "../lib/api.js";
|
|
import { emit, on } from "../lib/bus.js";
|
|
|
|
class RunTimeline extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
this.chatId = null;
|
|
this.items = [];
|
|
// Track if user scrolled away from the bottom — pause auto-scroll to not chase them
|
|
this._userScrolledUp = false;
|
|
this._scrollRaf = null;
|
|
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host { display:block; padding: var(--space-4); height:100%; overflow:hidden; font-family: var(--font-sans); }
|
|
.box {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-lg);
|
|
padding: var(--space-5);
|
|
height:100%; display:flex; flex-direction:column; min-height:0; box-sizing:border-box;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.row { display:flex; gap: var(--space-2); align-items:center; }
|
|
.muted { color: var(--text-muted); font-size: var(--fs-sm); }
|
|
.title { font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--text); }
|
|
.chatlog { display:flex; flex-direction:column; gap:0; overflow-y:auto; padding-right:8px; margin-top: var(--space-3); flex:1; min-height:0; }
|
|
|
|
/* WhatsApp-ish light pastel bubbles */
|
|
.bubble {
|
|
max-width: 88%; min-width:0;
|
|
margin-bottom: var(--space-3);
|
|
padding: 10px 14px;
|
|
border-radius: var(--r-xl);
|
|
border: 1px solid;
|
|
font-size: var(--fs-base); line-height: var(--lh-base);
|
|
white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere;
|
|
box-shadow: var(--shadow-bubble);
|
|
box-sizing:border-box;
|
|
}
|
|
.bubble.user { align-self:flex-end; background: var(--user-bubble); border-color: var(--user-border); color: var(--user-text); }
|
|
.bubble.bot { align-self:flex-start; background: var(--bot-bubble); border-color: var(--bot-border); color: var(--bot-text); }
|
|
.bubble.err { align-self:flex-start; background: var(--err-bubble); border-color: var(--err-border); color: var(--err-text); cursor:pointer; }
|
|
.bubble.active { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
|
|
.name { display:block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); margin-bottom: 4px; letter-spacing: 0.02em; }
|
|
.bubble.user .name { color: var(--user-name); text-align:right; }
|
|
.bubble.bot .name { color: var(--bot-name); }
|
|
.bubble.err .name { color: var(--err-name); }
|
|
.bubble .meta { display:block; margin-top: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
|
|
.bubble.user .meta { color: var(--user-meta); }
|
|
.bubble.bot .meta { color: var(--bot-meta); }
|
|
.bubble.err .meta { color: var(--err-meta); }
|
|
|
|
.toolbar { display:flex; gap: var(--space-2); margin-top: var(--space-3); align-items:center; }
|
|
button {
|
|
cursor:pointer;
|
|
background: var(--panel); color: var(--text);
|
|
border: 1px solid var(--border-hi);
|
|
border-radius: var(--r-md);
|
|
padding: 8px 14px;
|
|
font: var(--fw-medium) var(--fs-sm)/1 var(--font-sans);
|
|
transition: border-color .15s, background .15s;
|
|
}
|
|
button:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
|
|
button:focus-visible { outline:none; box-shadow: var(--focus-ring); }
|
|
pre {
|
|
white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; overflow-x:auto; max-width:100%;
|
|
background: var(--panel-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-lg);
|
|
padding: 10px 12px;
|
|
margin:0;
|
|
font: 400 12px/1.5 var(--font-mono);
|
|
color: var(--text-dim);
|
|
}
|
|
</style>
|
|
|
|
<div class="box">
|
|
<div class="muted">Conversación</div>
|
|
<div class="title" id="chat">—</div>
|
|
<div class="muted" id="meta">Seleccioná una conversación.</div>
|
|
<div class="toolbar">
|
|
<button id="refresh">Refresh</button>
|
|
<span class="muted" id="count"></span>
|
|
</div>
|
|
<div class="chatlog" id="log"></div>
|
|
</div>
|
|
|
|
`;
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.shadowRoot.getElementById("refresh").onclick = () => this.loadMessages();
|
|
|
|
this._unsubSel = on("ui:selectedChat", async ({ chat_id }) => {
|
|
// Si es el mismo chat, no recargar (para no borrar burbujas optimistas)
|
|
if (this.chatId === chat_id) return;
|
|
this.chatId = chat_id;
|
|
await this.loadMessages();
|
|
});
|
|
|
|
this._unsubRun = on("run:created", (run) => {
|
|
if (this.chatId && run.chat_id === this.chatId) {
|
|
// nuevo run => refrescar mensajes para ver los bubbles actualizados
|
|
this.loadMessages();
|
|
}
|
|
});
|
|
|
|
this._unsubHighlight = on("ui:highlightMessage", ({ message_id }) => {
|
|
this.highlightMessage(message_id);
|
|
});
|
|
|
|
// Listen for inspector heights to sync bubble heights
|
|
this._unsubInspector = on("ui:inspectorLayout", ({ chat_id, items }) => {
|
|
if (!this.chatId || chat_id !== this.chatId) return;
|
|
this.applyInspectorHeights(items);
|
|
});
|
|
|
|
// Listen for optimistic messages (show bubble immediately before API response)
|
|
this._unsubOptimistic = on("message:optimistic", (msg) => {
|
|
// Si no hay chatId seteado, setearlo al del mensaje
|
|
if (!this.chatId) {
|
|
this.chatId = msg.chat_id;
|
|
this.shadowRoot.getElementById("chat").textContent = msg.chat_id;
|
|
this.shadowRoot.getElementById("meta").textContent = "Nueva conversación";
|
|
}
|
|
if (msg.chat_id !== this.chatId) return;
|
|
this.addOptimisticBubble(msg);
|
|
});
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
this._unsubSel?.();
|
|
this._unsubRun?.();
|
|
this._unsubHighlight?.();
|
|
this._unsubInspector?.();
|
|
this._unsubOptimistic?.();
|
|
}
|
|
|
|
async loadMessages() {
|
|
this.shadowRoot.getElementById("chat").textContent = this.chatId || "—";
|
|
this.shadowRoot.getElementById("meta").textContent = "Cargando…";
|
|
this.shadowRoot.getElementById("count").textContent = "";
|
|
|
|
if (!this.chatId) {
|
|
this.shadowRoot.getElementById("meta").textContent = "Seleccioná una conversación.";
|
|
this.shadowRoot.getElementById("log").innerHTML = "";
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const data = await api.messages({ chat_id: this.chatId, limit: 200 });
|
|
this.items = data.items || [];
|
|
this.render();
|
|
} catch (e) {
|
|
this.items = [];
|
|
this.shadowRoot.getElementById("meta").textContent = `Error cargando mensajes: ${String(
|
|
e?.message || e
|
|
)}`;
|
|
this.shadowRoot.getElementById("log").innerHTML = "";
|
|
}
|
|
}
|
|
|
|
isErrorMsg(m) {
|
|
const txt = String(m?.text || "");
|
|
return Boolean(m?.payload?.error) || txt.startsWith("[ERROR]") || txt.toLowerCase().includes("internal_error");
|
|
}
|
|
|
|
displayNameFor(m) {
|
|
// Inbound: usar pushName si vino del webhook; fallback al "from" (teléfono) si existe.
|
|
const pushName = m?.payload?.raw?.meta?.pushName || m?.payload?.raw?.meta?.pushname || null;
|
|
const from = m?.payload?.raw?.from || null;
|
|
if (m?.direction === "in") return pushName || from || "test_lucas";
|
|
// Outbound: nombre del bot
|
|
return "Piaf";
|
|
}
|
|
|
|
render() {
|
|
const meta = this.shadowRoot.getElementById("meta");
|
|
const count = this.shadowRoot.getElementById("count");
|
|
const log = this.shadowRoot.getElementById("log");
|
|
|
|
meta.textContent = `Mostrando historial (últimos ${this.items.length}).`;
|
|
count.textContent = this.items.length ? `${this.items.length} msgs` : "";
|
|
|
|
// Capturar info de burbujas optimistas antes de limpiar
|
|
const optimisticBubbles = [...log.querySelectorAll('.bubble[data-message-id^="optimistic-"]')];
|
|
const optimisticTexts = optimisticBubbles.map(b => {
|
|
const textEl = b.querySelector("div:not(.name):not(.meta)");
|
|
return (textEl ? textEl.textContent : "").trim().toLowerCase();
|
|
});
|
|
|
|
log.innerHTML = "";
|
|
|
|
// Obtener textos de mensajes IN del servidor (normalizados para comparación)
|
|
const serverUserTexts = this.items
|
|
.filter(m => m.direction === "in")
|
|
.map(m => (m.text || "").trim().toLowerCase());
|
|
|
|
for (const m of this.items) {
|
|
const who = m.direction === "in" ? "user" : "bot";
|
|
const isErr = this.isErrorMsg(m);
|
|
const bubble = document.createElement("div");
|
|
bubble.className = `bubble ${isErr ? "err" : who}`;
|
|
bubble.dataset.messageId = m.message_id;
|
|
|
|
const nameEl = document.createElement("span");
|
|
nameEl.className = "name";
|
|
nameEl.textContent = this.displayNameFor(m);
|
|
bubble.appendChild(nameEl);
|
|
|
|
const textEl = document.createElement("div");
|
|
textEl.textContent = m.text || (isErr ? "Error" : "—");
|
|
bubble.appendChild(textEl);
|
|
|
|
const metaEl = document.createElement("span");
|
|
metaEl.className = "meta";
|
|
metaEl.textContent = `${new Date(m.ts).toLocaleString()} • ${m.provider} • ${m.message_id}`;
|
|
bubble.appendChild(metaEl);
|
|
|
|
bubble.title = "Click para ver detalles (JSON)";
|
|
bubble.onclick = () => emit("ui:selectedMessage", { message: m });
|
|
|
|
log.appendChild(bubble);
|
|
}
|
|
|
|
// Re-agregar burbujas optimistas SOLO si su texto no está ya en los mensajes del servidor
|
|
// Comparación case-insensitive y trimmed
|
|
let addedOptimistic = false;
|
|
for (let i = 0; i < optimisticBubbles.length; i++) {
|
|
const optText = optimisticTexts[i];
|
|
// Si el texto ya existe en un mensaje del servidor, no re-agregar
|
|
if (serverUserTexts.includes(optText)) {
|
|
continue;
|
|
}
|
|
log.appendChild(optimisticBubbles[i]);
|
|
addedOptimistic = true;
|
|
}
|
|
|
|
// Auto-scroll al final cuando hay mensajes nuevos.
|
|
// Si el usuario scrolleó arriba (>150px del fondo), respetamos su posición
|
|
// a menos que él mismo haya disparado un optimistic bubble.
|
|
if (addedOptimistic || !this._userScrolledUp) {
|
|
log.scrollTop = log.scrollHeight;
|
|
// Una vez forzado al final, considerarlo "abajo" hasta que vuelva a scrollear arriba.
|
|
this._userScrolledUp = false;
|
|
}
|
|
|
|
requestAnimationFrame(() => this.emitLayout());
|
|
this.bindScroll(log);
|
|
|
|
}
|
|
|
|
bindScroll(log) {
|
|
if (this._scrollBound) return;
|
|
this._scrollBound = true;
|
|
log.addEventListener("scroll", () => {
|
|
// Throttle con rAF: el handler real corre 1x por frame.
|
|
if (this._scrollRaf) return;
|
|
this._scrollRaf = requestAnimationFrame(() => {
|
|
this._scrollRaf = null;
|
|
const distFromBottom = log.scrollHeight - log.scrollTop - log.clientHeight;
|
|
this._userScrolledUp = distFromBottom > 150;
|
|
emit("ui:chatScroll", { chat_id: this.chatId, scrollTop: log.scrollTop, userScrolledUp: this._userScrolledUp });
|
|
});
|
|
});
|
|
}
|
|
|
|
emitLayout() {
|
|
const log = this.shadowRoot.getElementById("log");
|
|
const box = this.shadowRoot.querySelector(".box");
|
|
const bubbles = [...log.querySelectorAll(".bubble")];
|
|
const items = bubbles.map((el) => {
|
|
const styles = window.getComputedStyle(el);
|
|
const marginBottom = parseInt(styles.marginBottom || "0", 10) || 0;
|
|
return {
|
|
message_id: el.dataset.messageId || null,
|
|
height: (el.offsetHeight || 0) + marginBottom,
|
|
};
|
|
});
|
|
emit("ui:bubblesLayout", { chat_id: this.chatId, items });
|
|
}
|
|
|
|
highlightMessage(message_id) {
|
|
const log = this.shadowRoot.getElementById("log");
|
|
if (!log) return;
|
|
const bubbles = [...log.querySelectorAll(".bubble")];
|
|
for (const el of bubbles) {
|
|
el.classList.toggle("active", el.dataset.messageId === message_id);
|
|
}
|
|
// No auto-scroll - mantener posición actual del usuario
|
|
}
|
|
|
|
applyInspectorHeights(items) {
|
|
const log = this.shadowRoot.getElementById("log");
|
|
if (!log) return;
|
|
const BUBBLE_MARGIN = 12;
|
|
const MIN_HEIGHT = 120;
|
|
const heightMap = new Map((items || []).map((it) => [it.message_id, it.height || 0]));
|
|
|
|
const bubbles = [...log.querySelectorAll(".bubble")];
|
|
for (const el of bubbles) {
|
|
const messageId = el.dataset.messageId;
|
|
const inspectorHeight = heightMap.get(messageId) || 0;
|
|
// Inspector height includes margin, extract content height
|
|
const inspectorContentHeight = Math.max(0, inspectorHeight - BUBBLE_MARGIN);
|
|
// Use max between inspector height and our minimum
|
|
const targetHeight = Math.max(inspectorContentHeight, MIN_HEIGHT);
|
|
// Always apply to ensure sync
|
|
el.style.minHeight = `${targetHeight}px`;
|
|
el.style.marginBottom = `${BUBBLE_MARGIN}px`;
|
|
}
|
|
}
|
|
|
|
addOptimisticBubble(msg) {
|
|
const log = this.shadowRoot.getElementById("log");
|
|
if (!log) return;
|
|
|
|
// Check if already exists (by optimistic ID pattern)
|
|
const existing = log.querySelector(`.bubble[data-message-id^="optimistic-"]`);
|
|
if (existing) existing.remove();
|
|
|
|
const bubble = document.createElement("div");
|
|
bubble.className = "bubble user";
|
|
bubble.dataset.messageId = msg.message_id;
|
|
|
|
const nameEl = document.createElement("span");
|
|
nameEl.className = "name";
|
|
nameEl.textContent = msg.pushName || "test_lucas";
|
|
bubble.appendChild(nameEl);
|
|
|
|
const textEl = document.createElement("div");
|
|
textEl.textContent = msg.text || "—";
|
|
bubble.appendChild(textEl);
|
|
|
|
const metaEl = document.createElement("span");
|
|
metaEl.className = "meta";
|
|
metaEl.textContent = `${new Date(msg.ts).toLocaleString()} • ${msg.provider} • enviando...`;
|
|
bubble.appendChild(metaEl);
|
|
|
|
log.appendChild(bubble);
|
|
|
|
// El usuario acaba de mandar un mensaje: forzamos al final y reseteamos
|
|
// el flag "scrolled-up" así los próximos mensajes del bot también auto-scrollean.
|
|
log.scrollTop = log.scrollHeight;
|
|
this._userScrolledUp = false;
|
|
|
|
// Emit layout update
|
|
requestAnimationFrame(() => this.emitLayout());
|
|
}
|
|
}
|
|
|
|
customElements.define("run-timeline", RunTimeline);
|