From e8242bb582167575668cfbaf723f39e3ee42a139 Mon Sep 17 00:00:00 2001
From: Michael Ilyin <milyin@gmail.com>
Date: Fri, 13 Dec 2024 01:08:21 +0100
Subject: [PATCH] feat: improve message display in chat by separating username
 and message text

---
 zenoh-ts/examples/chat/src/main.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/zenoh-ts/examples/chat/src/main.ts b/zenoh-ts/examples/chat/src/main.ts
index 207abe3..777e8da 100644
--- a/zenoh-ts/examples/chat/src/main.ts
+++ b/zenoh-ts/examples/chat/src/main.ts
@@ -87,11 +87,16 @@ document.addEventListener('DOMContentLoaded', () => {
 			});
 			chatSession.onNewMessage((chatSession, user, message) => {
 				const messageElement = document.createElement('div');
+				const usernameElement = document.createElement('span');
+				const messageTextElement = document.createElement('span');
 				if (user.username === chatSession.getUser().username) {
-					messageElement.innerHTML = `<strong>${user.toString()}</strong>: ${message}`;
+					usernameElement.innerHTML = `<strong>${user.toString()}</strong>: `;
 				} else {
-					messageElement.textContent = `${user.toString()}: ${message}`;
+					usernameElement.textContent = `${user.toString()}: `;
 				}
+				messageTextElement.textContent = message;
+				messageElement.appendChild(usernameElement);
+				messageElement.appendChild(messageTextElement);
 				chatLog.appendChild(messageElement);
 				chatLog.scrollTop = chatLog.scrollHeight; // Scroll to the latest message
 			});