Update public/js/chat.js

public/js/chat.js

@@ -11,6 +11,9 @@ let isStreaming      = false;
 let streamingBubble  = null;
 let streamingText    = '';
 let autoScroll       = true;
+// Assets (images/video/audio) received during the current stream.
+// Stored here so they can be re-injected after renderHistory() wipes the DOM.
+let pendingAssets    = [];
 
 export function setActiveSession(id) { activeSessionId = id; }
 export function getIsStreaming()     { return isStreaming; }
@@ -324,7 +327,7 @@ function makeBtn(label, cls) {
 // ── Streaming ─────────────────────────────────────────────────────────────
 
 function onChatStart() {
-  isStreaming = true; streamingText = '';
+  isStreaming = true; streamingText = ''; pendingAssets = [];
   showChat();
   const box = document.getElementById('chat-messages'); if (!box) return;
   streamingBubble = document.createElement('div');
@@ -357,7 +360,18 @@ function onChatDone(msg) {
   streamingBubble?.classList.remove('msg-generating');
   streamingBubble = null; streamingText = '';
   updateSendBtn(false);
-  if (msg.history) renderHistory(msg.history);
+  if (msg.history) {
+    renderHistory(msg.history);
+    // Re-inject any assets that arrived during the stream (they are not in history)
+    if (pendingAssets.length > 0) {
+      const box = document.getElementById('chat-messages');
+      if (box) {
+        pendingAssets.forEach(asset => appendMediaMsg(box, asset.role, asset.content));
+        if (autoScroll) box.scrollTop = box.scrollHeight;
+      }
+      pendingAssets = [];
+    }
+  }
 }
 
 function onChatAborted(msg) {
@@ -371,7 +385,15 @@ function onChatAborted(msg) {
     streamingBubble = null;
   }
   updateSendBtn(false);
-  if (msg.history) renderHistory(msg.history);
+  // Re-inject assets even on abort
+  if (msg.history) {
+    renderHistory(msg.history);
+    if (pendingAssets.length > 0) {
+      const box = document.getElementById('chat-messages');
+      if (box) pendingAssets.forEach(asset => appendMediaMsg(box, asset.role, asset.content));
+    }
+  }
+  pendingAssets = [];
 }
 
 function onChatError(err) {
@@ -409,6 +431,8 @@ function handleLiveToolCall(call) {
 
 function appendAsset(asset) {
   const box = document.getElementById('chat-messages'); if (!box) return;
+  // Store so we can re-inject after renderHistory() wipes the DOM on chat:done
+  pendingAssets.push(asset);
   appendMediaMsg(box, asset.role, asset.content);
   if (autoScroll) box.scrollTop = box.scrollHeight;
 }