feat: display replies

2 files changed, 32 insertions, 1 deletions

diff --git a/scripts/chat.js b/scripts/chat.js
index e6c9e81..7c23eeb 100644
--- a/scripts/chat.js
+++ b/scripts/chat.js
@@ -50,6 +50,25 @@ function addMessage(message) {
     const elem = document.createElement("p");
     elem.classList.add("message");
     
+    if ("id" in message.tags) {
+        elem.setAttribute("msg-id", message.tags["id"]);
+    }
+    
+    if ("reply-parent-msg-id" in message.tags && "reply-parent-user-login" in message.tags) {
+        const replyMessage = document.querySelector(`.message[msg-id='${message.tags["reply-parent-msg-id"]}']>.content`);
+        
+        if (replyMessage) {
+            const username = message.tags["reply-parent-user-login"];
+            message.params[1] = message.params[1].substring(username.length + 1).trim();
+            
+            const replyThread = document.createElement("p");
+            replyThread.classList.add("message-thread");
+            replyThread.innerHTML = `Replying to @${username}: ${replyMessage.innerHTML}`;
+            
+            elem.append(replyThread);
+        }
+    } 
+    
     // badges
     if ("badges" in message.tags && message.tags["badges"].length > 0) {
         for (const b of message.tags["badges"].split(",")) {
@@ -100,7 +119,10 @@ function addMessage(message) {
         }
     }
     
-    elem.innerHTML += ' ' + msgWords.join(" ");
+    const msgContentElem = document.createElement("span");
+    msgContentElem.classList.add("content");
+    elem.append(msgContentElem);
+    msgContentElem.innerHTML += ' ' + msgWords.join(" ");
     
     messages.append(elem);
     
diff --git a/style.css b/style.css
index 24e9519..bec003a 100644
--- a/style.css
+++ b/style.css
@@ -41,6 +41,15 @@ form div {
     color: gray;
 }
 
+.message-thread {
+    color: gray;
+    font-size: 12px;
+}
+
+.message-thread::before {
+    content: '>>> ';
+}
+
 .message:has(.author) {
     color: var(--message-color);
 }