diff --git a/thrimbletrimmer/scripts/common.js b/thrimbletrimmer/scripts/common.js index 413c33e..f541f00 100644 --- a/thrimbletrimmer/scripts/common.js +++ b/thrimbletrimmer/scripts/common.js @@ -549,6 +549,20 @@ function renderChatMessage(chatMessageData) { const messageTextElement = document.createElement("div"); messageTextElement.classList.add("chat-replay-message-text"); + + if (chatMessage.tags.hasOwnProperty("reply-parent-msg-id")) { + const replyParentID = chatMessage.tags["reply-parent-msg-id"]; + const replyParentSender = chatMessage.tags["reply-parent-display-name"]; + const replyParentMessageText = chatMessage.tags["reply-parent-msg-body"]; + const replyContainer = document.createElement("div"); + const replyTextContainer = document.createElement("a"); + replyTextContainer.href = `#chat-replay-message-${replyParentID}`; + replyTextContainer.innerText = `Replying to ${replyParentSender}: ${replyParentMessageText}`; + replyContainer.appendChild(replyTextContainer); + replyContainer.classList.add("chat-replay-message-reply"); + messageTextElement.appendChild(replyContainer); + } + if (chatMessage.tags.emotes) { const emoteDataStrings = chatMessage.tags.emotes.split("/"); let emotePositions = []; @@ -593,7 +607,7 @@ function renderChatMessage(chatMessageData) { } } } else { - messageTextElement.innerText = chatMessage.params[1]; + messageTextElement.appendChild(document.createTextNode(chatMessage.params[1])); } const messageContainer = document.createElement("div"); diff --git a/thrimbletrimmer/styles/thrimbletrimmer.css b/thrimbletrimmer/styles/thrimbletrimmer.css index 9ea85ed..fea155f 100644 --- a/thrimbletrimmer/styles/thrimbletrimmer.css +++ b/thrimbletrimmer/styles/thrimbletrimmer.css @@ -371,6 +371,14 @@ a, flex-grow: 1; } +.chat-replay-message-reply { + font-size: 80%; +} + +.chat-replay-message-reply a { + text-decoration: none; +} + .chat-replay-message-cleared { opacity: 0.5; }