From 9b3f1caa2ff0e2ea75e560f5140ccff11089c513 Mon Sep 17 00:00:00 2001
From: Caolan McMahon <caolan@caolan.uk>
Date: Mon, 7 Oct 2024 16:51:03 +0100
Subject: [PATCH] Chat example: update nick in message history on peer announce

---
 examples/chat/components/message-history.js | 17 +++++++----------
 examples/chat/style.css                     |  2 ++
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/examples/chat/components/message-history.js b/examples/chat/components/message-history.js
index 8e6a405..f5b68b9 100644
--- a/examples/chat/components/message-history.js
+++ b/examples/chat/components/message-history.js
@@ -7,15 +7,12 @@ export default class ChatMessageHistory extends HTMLElement {
     }
 
     connectedCallback() {
-        this.shadow = this.attachShadow({mode: "open"});
-        this.shadow.innerHTML = `
-            <link rel="stylesheet" href="style.css">
-            <pre id="message-history"></pre>
-        `;
-        this.history = this.shadow.getElementById('message-history');
-        this.stop = watch([local_peer_id, selected_announcement, messages], () => {
-            this.updateMessages();
-        });
+        this.stop = watch([
+            local_peer_id, 
+            selected_announcement, 
+            announcements,
+            messages,
+        ], () => this.updateMessages());
         this.updateMessages();
     }
 
@@ -52,7 +49,7 @@ export default class ChatMessageHistory extends HTMLElement {
                 }
             }
         }
-        this.history.textContent = txt;
+        this.textContent = txt;
     }
 }
 
diff --git a/examples/chat/style.css b/examples/chat/style.css
index 445c12e..3ec10d1 100644
--- a/examples/chat/style.css
+++ b/examples/chat/style.css
@@ -71,6 +71,8 @@ chat-message-history {
     flex-grow: 1;
     flex-shrink: 1;
     padding: 1em;
+    font-family: monospace;
+    white-space: pre;
 }
 
 #send-message-form {