286 lines
11 KiB
JavaScript
286 lines
11 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 = [];
|
|
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host { display:block; padding:12px; height:100%; overflow:hidden; }
|
|
.box { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:10px; height:100%; display:flex; flex-direction:column; min-height:0; box-sizing:border-box; }
|
|
.row { display:flex; gap:8px; align-items:center; }
|
|
.muted { color:#8aa0b5; font-size:12px; }
|
|
.title { font-weight:800; }
|
|
.chatlog { display:flex; flex-direction:column; gap:0; overflow-y:auto; padding-right:6px; margin-top:8px; flex:1; min-height:0; }
|
|
/* WhatsApp-ish dark theme bubbles */
|
|
.bubble { max-width:90%; margin-bottom:12px; padding:8px 10px; border-radius:14px; border:1px solid #253245; font-size:13px; line-height:1.35; white-space:pre-wrap; word-break:break-word; box-shadow: 0 1px 0 rgba(0,0,0,.35); box-sizing:border-box; }
|
|
.bubble.user { align-self:flex-end; background:#0f2a1a; border-color:#1f6f43; color:#e7eef7; }
|
|
.bubble.bot { align-self:flex-start; background:#111b2a; border-color:#2a3a55; color:#e7eef7; }
|
|
.bubble.err { align-self:flex-start; background:#241214; border-color:#e74c3c; color:#ffe9ea; cursor:pointer; }
|
|
.bubble.active { outline:2px solid #1f6feb; box-shadow: 0 0 0 2px rgba(31,111,235,.25); }
|
|
.name { display:block; font-size:12px; font-weight:800; margin-bottom:4px; opacity:.95; }
|
|
.bubble.user .name { color:#cdebd8; text-align:right; }
|
|
.bubble.bot .name { color:#c7d8ee; }
|
|
.bubble.err .name { color:#ffd0d4; }
|
|
.bubble .meta { display:block; margin-top:6px; font-size:11px; color:#8aa0b5; }
|
|
.bubble.user .meta { color:#b9d9c6; opacity:.85; }
|
|
.bubble.bot .meta { color:#a9bed6; opacity:.85; }
|
|
.bubble.err .meta { color:#ffd0d4; opacity:.85; }
|
|
.toolbar { display:flex; gap:8px; margin-top:8px; align-items:center; }
|
|
button { cursor:pointer; background:#0f1520; color:#e7eef7; border:1px solid #253245; border-radius:8px; padding:8px; font-size:13px; }
|
|
pre { white-space:pre-wrap; word-break:break-word; background:#0f1520; border:1px solid #253245; border-radius:10px; padding:10px; margin:0; font-size:12px; color:#d7e2ef; }
|
|
</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 }) => {
|
|
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) => {
|
|
if (!this.chatId || 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` : "";
|
|
|
|
log.innerHTML = "";
|
|
|
|
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);
|
|
}
|
|
|
|
// auto-scroll
|
|
log.scrollTop = log.scrollHeight;
|
|
|
|
requestAnimationFrame(() => this.emitLayout());
|
|
this.bindScroll(log);
|
|
|
|
}
|
|
|
|
bindScroll(log) {
|
|
if (this._scrollBound) return;
|
|
this._scrollBound = true;
|
|
log.addEventListener("scroll", () => {
|
|
emit("ui:chatScroll", { chat_id: this.chatId, scrollTop: log.scrollTop });
|
|
});
|
|
}
|
|
|
|
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 });
|
|
// #region agent log
|
|
fetch("http://127.0.0.1:7242/ingest/86c7b1cd-c414-4eae-852c-08e57e562b3b", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
sessionId: "debug-session",
|
|
runId: "pre-fix",
|
|
hypothesisId: "H15",
|
|
location: "run-timeline.js:180",
|
|
message: "bubbles_layout",
|
|
data: {
|
|
count: items.length,
|
|
chat_id: this.chatId || null,
|
|
scroll_height: log.scrollHeight,
|
|
client_height: log.clientHeight,
|
|
host_height: this.getBoundingClientRect().height,
|
|
box_height: box ? box.getBoundingClientRect().height : null,
|
|
},
|
|
timestamp: Date.now(),
|
|
}),
|
|
}).catch(() => {});
|
|
// #endregion
|
|
}
|
|
|
|
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);
|
|
log.scrollTop = log.scrollHeight;
|
|
|
|
// Emit layout update
|
|
requestAnimationFrame(() => this.emitLayout());
|
|
}
|
|
}
|
|
|
|
customElements.define("run-timeline", RunTimeline);
|