mejoras en el modelo de clarificacion de productos

public/components/run-timeline.js

@@ -53,6 +53,8 @@ class RunTimeline extends HTMLElement {
     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();
     });
@@ -76,7 +78,13 @@ class RunTimeline extends HTMLElement {
 
     // 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;
+      // 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);
     });
   }
@@ -135,8 +143,20 @@ class RunTimeline extends HTMLElement {
     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);
@@ -164,8 +184,23 @@ class RunTimeline extends HTMLElement {
       log.appendChild(bubble);
     }
 
-    // auto-scroll
-    log.scrollTop = log.scrollHeight;
+    // 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 solo si agregamos burbujas optimistas nuevas
+    if (addedOptimistic) {
+      log.scrollTop = log.scrollHeight;
+    }
 
     requestAnimationFrame(() => this.emitLayout());
     this.bindScroll(log);
@@ -193,29 +228,7 @@ class RunTimeline extends HTMLElement {
       };
     });
     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");
@@ -275,7 +288,12 @@ class RunTimeline extends HTMLElement {
     bubble.appendChild(metaEl);
 
     log.appendChild(bubble);
-    log.scrollTop = log.scrollHeight;
+    
+    // Solo hacer scroll si el usuario ya estaba cerca del final (dentro de 100px)
+    const wasNearBottom = (log.scrollHeight - log.scrollTop - log.clientHeight) < 100;
+    if (wasNearBottom) {
+      log.scrollTop = log.scrollHeight;
+    }
 
     // Emit layout update
     requestAnimationFrame(() => this.emitLayout());