ux improved
This commit is contained in:
Lucas Tettamanti
308
public/components/conversation-inspector.js
Normal file
308
public/components/conversation-inspector.js
Normal file
@@ -0,0 +1,308 @@
|
||||
import { api } from "../lib/api.js";
|
||||
import { emit, on } from "../lib/bus.js";
|
||||
|
||||
class ConversationInspector extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: "open" });
|
||||
this.chatId = null;
|
||||
this.messages = [];
|
||||
this.runs = [];
|
||||
this.rowOrder = [];
|
||||
this.rowMap = new Map();
|
||||
this.heights = new Map();
|
||||
this._playing = false;
|
||||
this._playIdx = 0;
|
||||
this._timer = null;
|
||||
|
||||
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; }
|
||||
.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; }
|
||||
.list { display:flex; flex-direction:column; gap:0; overflow-y:auto; padding-right:6px; margin-top:8px; flex:1; min-height:0; }
|
||||
.item { border:1px solid #253245; border-radius:12px; padding:8px 10px; background:#0f1520; font-size:12px; margin-bottom:12px; box-sizing:border-box; }
|
||||
.item.in { background:#0f1520; border-color:#2a3a55; }
|
||||
.item.out { background:#111b2a; border-color:#2a3a55; }
|
||||
.item.active { outline:2px solid #1f6feb; box-shadow: 0 0 0 2px rgba(31,111,235,.25); }
|
||||
.kv { display:grid; grid-template-columns:70px 1fr; gap:6px 10px; }
|
||||
.k { color:#8aa0b5; font-size:11px; letter-spacing:.4px; text-transform:uppercase; }
|
||||
.v { font-size:12px; color:#e7eef7; }
|
||||
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
|
||||
.chip { display:inline-flex; align-items:center; gap:6px; padding:2px 6px; border-radius:999px; background:#1d2a3a; border:1px solid #243247; font-size:11px; color:#8aa0b5; }
|
||||
.cart { margin-top:6px; font-size:11px; color:#c7d8ee; }
|
||||
.tool { margin-top:6px; font-size:11px; color:#8aa0b5; }
|
||||
.dot { width:8px; height:8px; border-radius:50%; }
|
||||
.ok { background:#2ecc71; } .warn { background:#f1c40f; } .err { background:#e74c3c; }
|
||||
</style>
|
||||
|
||||
<div class="box">
|
||||
<div class="muted">Inspector</div>
|
||||
<div class="title" id="chat">—</div>
|
||||
<div class="muted" id="meta">Seleccioná una conversación.</div>
|
||||
<div class="toolbar">
|
||||
<button id="play">Play</button>
|
||||
<button id="pause">Pause</button>
|
||||
<button id="step">Step</button>
|
||||
<span class="muted" id="count"></span>
|
||||
</div>
|
||||
<div class="list" id="list"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.shadowRoot.getElementById("play").onclick = () => this.play();
|
||||
this.shadowRoot.getElementById("pause").onclick = () => this.pause();
|
||||
this.shadowRoot.getElementById("step").onclick = () => this.step();
|
||||
|
||||
this._unsubSel = on("ui:selectedChat", async ({ chat_id }) => {
|
||||
this.chatId = chat_id;
|
||||
await this.loadData();
|
||||
});
|
||||
|
||||
this._unsubRun = on("run:created", (run) => {
|
||||
if (this.chatId && run.chat_id === this.chatId) {
|
||||
this.loadData();
|
||||
}
|
||||
});
|
||||
|
||||
this._unsubLayout = on("ui:bubblesLayout", ({ chat_id, items }) => {
|
||||
if (!this.chatId || chat_id !== this.chatId) return;
|
||||
this.heights = new Map((items || []).map((it) => [it.message_id, it.height || 0]));
|
||||
this.applyHeights();
|
||||
});
|
||||
|
||||
this._unsubScroll = on("ui:chatScroll", ({ chat_id, scrollTop }) => {
|
||||
if (!this.chatId || chat_id !== this.chatId) return;
|
||||
const list = this.shadowRoot.getElementById("list");
|
||||
list.scrollTop = scrollTop || 0;
|
||||
});
|
||||
|
||||
this._unsubSelectMessage = on("ui:selectedMessage", ({ message }) => {
|
||||
const messageId = message?.message_id || null;
|
||||
if (messageId) this.highlight(messageId);
|
||||
});
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this._unsubSel?.();
|
||||
this._unsubRun?.();
|
||||
this._unsubLayout?.();
|
||||
this._unsubScroll?.();
|
||||
this._unsubSelectMessage?.();
|
||||
this.pause();
|
||||
}
|
||||
|
||||
async loadData() {
|
||||
const chatEl = this.shadowRoot.getElementById("chat");
|
||||
const metaEl = this.shadowRoot.getElementById("meta");
|
||||
const countEl = this.shadowRoot.getElementById("count");
|
||||
const list = this.shadowRoot.getElementById("list");
|
||||
|
||||
chatEl.textContent = this.chatId || "—";
|
||||
metaEl.textContent = "Cargando…";
|
||||
countEl.textContent = "";
|
||||
list.innerHTML = "";
|
||||
|
||||
if (!this.chatId) {
|
||||
metaEl.textContent = "Seleccioná una conversación.";
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const [msgs, runs] = await Promise.all([
|
||||
api.messages({ chat_id: this.chatId, limit: 200 }),
|
||||
api.runs({ chat_id: this.chatId, limit: 200 }),
|
||||
]);
|
||||
this.messages = msgs.items || [];
|
||||
this.runs = runs.items || [];
|
||||
this.render();
|
||||
this.applyHeights();
|
||||
} catch (e) {
|
||||
metaEl.textContent = `Error cargando: ${String(e?.message || e)}`;
|
||||
this.messages = [];
|
||||
this.runs = [];
|
||||
}
|
||||
}
|
||||
|
||||
runMap() {
|
||||
const map = new Map();
|
||||
for (const r of this.runs || []) {
|
||||
map.set(r.run_id, r);
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
buildRows() {
|
||||
const runsById = this.runMap();
|
||||
const rows = [];
|
||||
let nextRun = null;
|
||||
for (let i = this.messages.length - 1; i >= 0; i--) {
|
||||
const msg = this.messages[i];
|
||||
const run = msg?.run_id ? runsById.get(msg.run_id) : null;
|
||||
if (run) nextRun = run;
|
||||
rows[i] = { message: msg, run, nextRun };
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
formatCart(items) {
|
||||
const list = Array.isArray(items) ? items : [];
|
||||
if (!list.length) return "—";
|
||||
return list
|
||||
.map((it) => {
|
||||
const label = it.label || it.name || `#${it.product_id}`;
|
||||
const qty = it.quantity != null ? `${it.quantity}` : "?";
|
||||
const unit = it.unit || "";
|
||||
return `${label} (${qty}${unit ? " " + unit : ""})`;
|
||||
})
|
||||
.join(" · ");
|
||||
}
|
||||
|
||||
toolSummary(tools = []) {
|
||||
return tools.map((t) => ({
|
||||
type: t.type || t.name || "tool",
|
||||
ok: t.ok !== false,
|
||||
error: t.error || null,
|
||||
}));
|
||||
}
|
||||
|
||||
render() {
|
||||
const metaEl = this.shadowRoot.getElementById("meta");
|
||||
const countEl = this.shadowRoot.getElementById("count");
|
||||
const list = this.shadowRoot.getElementById("list");
|
||||
|
||||
metaEl.textContent = `Inspector de ${this.messages.length} mensajes.`;
|
||||
countEl.textContent = this.messages.length ? `${this.messages.length} filas` : "";
|
||||
|
||||
list.innerHTML = "";
|
||||
this.rowMap.clear();
|
||||
this.rowOrder = [];
|
||||
|
||||
const rows = this.buildRows();
|
||||
for (const row of rows) {
|
||||
const msg = row.message;
|
||||
const run = row.run;
|
||||
const dir = msg?.direction === "in" ? "in" : "out";
|
||||
const el = document.createElement("div");
|
||||
el.className = `item ${dir}`;
|
||||
el.dataset.messageId = msg.message_id;
|
||||
|
||||
const intent = run?.llm_output?.intent || "—";
|
||||
const nextState = run?.llm_output?.next_state || "—";
|
||||
const prevState = row.nextRun?.prev_state || "—";
|
||||
const basket = run?.llm_output?.basket_resolved?.items || [];
|
||||
const tools = this.toolSummary(run?.tools || []);
|
||||
|
||||
const llmMeta = run?.llm_output?._llm || null;
|
||||
const llmStatus = llmMeta?.audit?.validation?.ok === false ? "warn" : "ok";
|
||||
const llmNote = llmMeta?.audit?.validation?.ok === false
|
||||
? "NLU inválido (fallback)"
|
||||
: llmMeta?.audit?.validation?.retried
|
||||
? "NLU ok (retry)"
|
||||
: "NLU ok";
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="kv">
|
||||
<div class="k">${dir === "in" ? "IN" : "OUT"}</div>
|
||||
<div class="v">${new Date(msg.ts).toLocaleString()}</div>
|
||||
<div class="k">STATE</div>
|
||||
<div class="v">${dir === "out" ? nextState : prevState}</div>
|
||||
<div class="k">INTENT</div>
|
||||
<div class="v">${dir === "out" ? intent : "—"}</div>
|
||||
<div class="k">NLU</div>
|
||||
<div class="v">${dir === "out" && llmMeta ? llmNote : "—"}</div>
|
||||
</div>
|
||||
<div class="cart"><strong>Carrito:</strong> ${dir === "out" ? this.formatCart(basket) : "—"}</div>
|
||||
<div class="chips">
|
||||
${tools
|
||||
.map(
|
||||
(t) =>
|
||||
`<span class="chip"><span class="dot ${t.ok ? "ok" : "err"}"></span>${t.type}</span>`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
`;
|
||||
|
||||
el.onclick = () => {
|
||||
this.highlight(msg.message_id);
|
||||
};
|
||||
|
||||
list.appendChild(el);
|
||||
this.rowMap.set(msg.message_id, el);
|
||||
this.rowOrder.push(msg.message_id);
|
||||
}
|
||||
}
|
||||
|
||||
applyHeights() {
|
||||
const BUBBLE_MARGIN = 12; // same as .bubble margin-bottom in run-timeline
|
||||
const MIN_ITEM_HEIGHT = 120; // minimum height for inspector items
|
||||
|
||||
for (const [messageId, el] of this.rowMap.entries()) {
|
||||
const bubbleHeight = this.heights.get(messageId) || 0;
|
||||
// bubbleHeight includes offsetHeight + marginBottom
|
||||
const bubbleContentHeight = Math.max(0, bubbleHeight - BUBBLE_MARGIN);
|
||||
|
||||
// Use the max between bubble height and our minimum
|
||||
const targetHeight = Math.max(bubbleContentHeight, MIN_ITEM_HEIGHT);
|
||||
el.style.minHeight = `${targetHeight}px`;
|
||||
el.style.marginBottom = `${BUBBLE_MARGIN}px`;
|
||||
}
|
||||
|
||||
// After applying, emit final heights back so bubbles can sync
|
||||
requestAnimationFrame(() => this.emitInspectorHeights());
|
||||
}
|
||||
|
||||
emitInspectorHeights() {
|
||||
const items = [];
|
||||
for (const [messageId, el] of this.rowMap.entries()) {
|
||||
const styles = window.getComputedStyle(el);
|
||||
const marginBottom = parseInt(styles.marginBottom || "0", 10) || 0;
|
||||
items.push({
|
||||
message_id: messageId,
|
||||
height: (el.offsetHeight || 0) + marginBottom,
|
||||
});
|
||||
}
|
||||
emit("ui:inspectorLayout", { chat_id: this.chatId, items });
|
||||
}
|
||||
|
||||
highlight(messageId) {
|
||||
for (const [id, el] of this.rowMap.entries()) {
|
||||
el.classList.toggle("active", id === messageId);
|
||||
}
|
||||
emit("ui:highlightMessage", { message_id: messageId });
|
||||
const idx = this.rowOrder.indexOf(messageId);
|
||||
if (idx >= 0) this._playIdx = idx;
|
||||
}
|
||||
|
||||
play() {
|
||||
if (this._playing) return;
|
||||
this._playing = true;
|
||||
this._timer = setInterval(() => this.step(), 800);
|
||||
}
|
||||
|
||||
pause() {
|
||||
this._playing = false;
|
||||
if (this._timer) clearInterval(this._timer);
|
||||
this._timer = null;
|
||||
}
|
||||
|
||||
step() {
|
||||
if (!this.rowOrder.length) return;
|
||||
if (this._playIdx >= this.rowOrder.length) {
|
||||
this.pause();
|
||||
return;
|
||||
}
|
||||
const messageId = this.rowOrder[this._playIdx];
|
||||
this.highlight(messageId);
|
||||
this._playIdx += 1;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("conversation-inspector", ConversationInspector);
|
||||
|
||||
Reference in New Issue
Block a user