From af9ba310fef3f5ca2eceb18754bab86a63c96c30 Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Wed, 15 Apr 2026 08:42:39 -0300
Subject: [PATCH] fix: Remove streaming message from DOM when user sends new
 message

This fixes the visual ordering issue where user messages appeared
in the middle of bot streaming responses. Now when user sends a new
message, the incomplete streaming message is removed from the DOM,
ensuring proper conversation ordering.
---
 ui/suite/partials/chat.html | 80 +++++++++++++++++++++----------------
 1 file changed, 46 insertions(+), 34 deletions(-)

diff --git a/ui/suite/partials/chat.html b/ui/suite/partials/chat.html
index 782eb19..8df821b 100644
--- a/ui/suite/partials/chat.html
+++ b/ui/suite/partials/chat.html
@@ -935,44 +935,56 @@ function updateStreaming(content) {
             });
         }
 
-        function sendMessage(messageContent) {
-            var input = document.getElementById("messageInput");
-            if (!input) {
-                console.error("Chat input not found");
-                return;
-            }
+function sendMessage(messageContent) {
+  var input = document.getElementById("messageInput");
+  if (!input) {
+    console.error("Chat input not found");
+    return;
+  }
 
-            // If no messageContent provided, read from input
-            var content = messageContent || input.value.trim();
-            if (!content) {
-                return;
-            }
+  // If no messageContent provided, read from input
+  var content = messageContent || input.value.trim();
+  if (!content) {
+    return;
+  }
 
-            // If called from input field (no messageContent provided), clear input
-            if (!messageContent) {
-                hideMentionDropdown();
-                input.value = "";
-                input.focus();
-            }
+  // Cancel and remove any ongoing streaming message before sending new message
+  // This ensures the conversation order stays correct
+  if (isStreaming && streamingMessageId) {
+    var streamingEl = document.getElementById(streamingMessageId);
+    if (streamingEl) {
+      streamingEl.remove();
+    }
+    isStreaming = false;
+    streamingMessageId = null;
+    currentStreamingContent = "";
+  }
 
-            addMessage("user", content);
+  // If called from input field (no messageContent provided), clear input
+  if (!messageContent) {
+    hideMentionDropdown();
+    input.value = "";
+    input.focus();
+  }
 
-            if (ws && ws.readyState === WebSocket.OPEN) {
-                ws.send(
-                    JSON.stringify({
-                        bot_id: currentBotId,
-                        user_id: currentUserId,
-                        session_id: currentSessionId,
-                        channel: "web",
-                        content: content,
-                        message_type: MessageType.USER,
-                        timestamp: new Date().toISOString(),
-                    }),
-                );
-            } else {
-                notify("Not connected to server. Message not sent.", "warning");
-            }
-        }
+  addMessage("user", content);
+
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(
+      JSON.stringify({
+        bot_id: currentBotId,
+        user_id: currentUserId,
+        session_id: currentSessionId,
+        channel: "web",
+        content: content,
+        message_type: MessageType.USER,
+        timestamp: new Date().toISOString(),
+      }),
+    );
+  } else {
+    notify("Not connected to server. Message not sent.", "warning");
+  }
+}
 
         window.sendMessage = sendMessage;