From 6eb2250d883cb904a67404ca543ac6c2975a7011 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Tue, 31 Mar 2026 10:17:10 +0200
Subject: [PATCH] fix(chat): remove separator line in bubbles and use WebSocket
 for echo updates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove unnecessary border-top separator above action buttons in message bubbles.
Replace 15s deferred loadMessages() after send with real-time echo updates via
WebSocket — API now returns msg_id so optimistic message gets linked to DB record.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/meshcore/cli.py      | 10 +++++-----
 app/routes/api.py        |  5 +++--
 app/static/css/style.css |  2 --
 app/static/js/app.js     |  7 +++++--
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/app/meshcore/cli.py b/app/meshcore/cli.py
index 56d1a5d..7cec645 100644
--- a/app/meshcore/cli.py
+++ b/app/meshcore/cli.py
@@ -60,8 +60,8 @@ def recv_messages() -> Tuple[bool, str]:
     return True, "Messages are received automatically via events"
 
 
-def send_message(text: str, reply_to: Optional[str] = None, channel_index: int = 0) -> Tuple[bool, str]:
-    """Send a message to a channel."""
+def send_message(text: str, reply_to: Optional[str] = None, channel_index: int = 0) -> Tuple[bool, str, Optional[int]]:
+    """Send a message to a channel. Returns (success, message, msg_id)."""
     if reply_to:
         text = f"@[{reply_to}] {text}"
 
@@ -69,11 +69,11 @@ def send_message(text: str, reply_to: Optional[str] = None, channel_index: int =
         dm = _get_dm()
         result = dm.send_channel_message(channel_index, text)
         if result['success']:
-            return True, result.get('message', 'Message sent')
-        return False, result.get('error', 'Failed to send message')
+            return True, result.get('message', 'Message sent'), result.get('id')
+        return False, result.get('error', 'Failed to send message'), None
     except Exception as e:
         logger.error(f"send_message error: {e}")
-        return False, str(e)
+        return False, str(e), None
 
 
 # =============================================================================
diff --git a/app/routes/api.py b/app/routes/api.py
index 8126b7f..294712f 100644
--- a/app/routes/api.py
+++ b/app/routes/api.py
@@ -601,7 +601,7 @@ def send_message():
         channel_idx = data.get('channel_idx', 0)
 
         # Send message via meshcli
-        success, message = cli.send_message(text, reply_to=reply_to, channel_index=channel_idx)
+        success, message, msg_id = cli.send_message(text, reply_to=reply_to, channel_index=channel_idx)
 
         if success:
             # v2: Echo tracking is handled automatically by DeviceManager events
@@ -609,7 +609,8 @@ def send_message():
             return jsonify({
                 'success': True,
                 'message': 'Message sent successfully',
-                'channel_idx': channel_idx
+                'channel_idx': channel_idx,
+                'id': msg_id,
             }), 200
         else:
             return jsonify({
diff --git a/app/static/css/style.css b/app/static/css/style.css
index 1d2b4c9..a400e6e 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -323,8 +323,6 @@ main {
     display: flex;
     gap: 0.25rem;
     margin-top: 0.5rem;
-    padding-top: 0.5rem;
-    border-top: 1px solid var(--actions-border);
 }
 
 /* Message Bubbles */
diff --git a/app/static/js/app.js b/app/static/js/app.js
index 9594588..3681725 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -1320,8 +1320,11 @@ async function sendMessage() {
         if (data.success) {
             showNotification('Message sent', 'success');
 
-            // Schedule deferred reload to pick up echo data + replace optimistic msg with real one
-            setTimeout(() => loadMessages(), 15000);
+            // Replace optimistic ID with real DB id so echo WebSocket updates work
+            if (data.id) {
+                const wrapper = document.querySelector(`.message-wrapper[data-msg-id="${optimisticId}"]`);
+                if (wrapper) wrapper.dataset.msgId = data.id;
+            }
         } else {
             showNotification('Failed to send: ' + data.error, 'danger');
         }