Message Reply Adjustments

vortisrd · vortisrd · commit 91ab7f5a850d · 2025-09-25T15:58:18.000-03:00
diff --git a/chat.html b/chat.html
@@ -48,8 +48,11 @@
             <div class="message">
                 <div class="first-message">&#10024; First-time Chatter</div>
                 <div class="shared-chat"><span class="origin"><i class="fa-solid fa-comments"></i> <strong></strong></span></div>
+                
                 <div class="header"></div>
 
+                <div class="reply"><i class="fa-solid fa-comment-dots"></i> </div>
+
                 <div class="info">
                     <span class="timestamp"></span>
                     <span class="platform"></span>
@@ -59,8 +62,6 @@
                     <span class="user"></span>
                 </div>
 
-                <div class="reply"><i class="fa-solid fa-arrow-turn-up"></i> </div>
-
                 <div class="actual-message"></div>
             </div>
             
diff --git a/css/chatrd.css b/css/chatrd.css
@@ -169,7 +169,7 @@ body {
 }
 
 #chat .item .reply i {
-    transform: rotate(90deg);
+    /*transform: rotate(90deg);*/
     margin: 0 5px;
 }
 
@@ -464,6 +464,10 @@ body {
     transform: translateY(-3px);
 }
 
+#chat.oneline .item .reply {
+    margin: 0 0 -5px 0;
+}
+
 #chat.oneline .event .info {
     display: inline-block;
 }
diff --git a/js/modules/kick/module.js b/js/modules/kick/module.js
@@ -303,7 +303,7 @@ async function kickChatMessage(data) {
     if (data.type == "reply") {
         classes.push('reply');
         var replyHTML = await getKickEmotes(data.metadata.original_message.content);
-        reply.insertAdjacentHTML('beforeend', ` <strong>${data.metadata.original_sender.username}:</strong> ${replyHTML}`);
+        reply.insertAdjacentHTML('beforeend', `Replying to <strong>${data.metadata.original_sender.username}:</strong> ${replyHTML}`);
     }
     else { reply.remove(); }
 
diff --git a/js/modules/twitch/module.js b/js/modules/twitch/module.js
@@ -157,12 +157,11 @@ async function twitchChatMessage(data) {
 
     header.remove();
 
+    let streamData = data;
+
     user.style.color = data.message.color;
     user.textContent = data.message.displayName;
 
-    message.textContent = data.message.message;
-    await getTwitchEmotes(data, message);
-
     if (data.message.isMe) {
         message.style.color = data.message.color;
     }
@@ -181,8 +180,32 @@ async function twitchChatMessage(data) {
 
     if (data.message.isReply) {
         classes.push('reply');
-        reply.textContent = data.message.reply.msgBody;
-        reply.insertAdjacentHTML('afterbegin', ` <strong>${escapeHTML(data.message.reply.userName)}:</strong> `);
+
+        let offset = 0;
+        let replyTo = `@${data.message.reply.userName}`;
+        let replyMessage = streamData.message.message;
+        
+        if (replyMessage.startsWith(replyTo)) {
+            let startIndex = replyTo.length;
+            if (replyMessage[startIndex] === " ") {
+                startIndex++;
+            }
+            replyMessage = replyMessage.slice(startIndex);
+            offset = startIndex;    
+        
+            let replyEmotes = (streamData.emotes || [])
+            .map(e => ({
+                ...e,
+                startIndex: e.startIndex - offset,
+                endIndex: e.endIndex - offset
+            }))
+            .sort((a, b) => a.startIndex - b.startIndex);
+
+            streamData.message.message = replyMessage;
+            streamData.emotes = replyEmotes;
+        }
+
+        reply.insertAdjacentHTML('beforeend', ` <strong>Replying to ${escapeHTML(data.message.reply.userName)}:</strong> ${data.message.reply.msgBody}`);
     }
     else { reply.remove(); }
 
@@ -210,6 +233,11 @@ async function twitchChatMessage(data) {
     }
     else { pronoun.remove(); }
 
+    
+
+    message.textContent = streamData.message.message;
+    await getTwitchEmotes(streamData, message);
+
     addMessageItem('twitch', clone, classes, userId, messageId);
 }
 

Original file line number	Diff line number	Diff line change
`@@ -169,7 +169,7 @@ body {`
`169`	`169`	`}`
`170`	`170`
`171`	`171`	`#chat .item .reply i {`
`172`		`- transform: rotate(90deg);`
	`172`	`+ /transform: rotate(90deg);/`
`173`	`173`	`margin: 0 5px;`
`174`	`174`	`}`
`175`	`175`
`@@ -464,6 +464,10 @@ body {`
`464`	`464`	`transform: translateY(-3px);`
`465`	`465`	`}`
`466`	`466`
	`467`	`+#chat.oneline .item .reply {`
	`468`	`+ margin: 0 0 -5px 0;`
	`469`	`+}`
	`470`	`+`
`467`	`471`	`#chat.oneline .event .info {`
`468`	`472`	`display: inline-block;`
`469`	`473`	`}`
Original file line number	Diff line number	Diff line change
`@@ -303,7 +303,7 @@ async function kickChatMessage(data) {`
`303`	`303`	`if (data.type == "reply") {`
`304`	`304`	`classes.push('reply');`
`305`	`305`	`var replyHTML = await getKickEmotes(data.metadata.original_message.content);`
`306`		- reply.insertAdjacentHTML('beforeend', ` <strong>${data.metadata.original_sender.username}:</strong> ${replyHTML}`);
	`306`	+ reply.insertAdjacentHTML('beforeend', `Replying to <strong>${data.metadata.original_sender.username}:</strong> ${replyHTML}`);
`307`	`307`	`}`
`308`	`308`	`else { reply.remove(); }`
`309`	`309`