From b3dc1e2452f3f26f7c0b3134ea4d0d9aef4ecffb Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Sun, 6 Apr 2025 16:09:15 +0200
Subject: [PATCH] [mirotalk] - #280 improve private messages

---
 app/src/server.js     |  2 +-
 package.json          |  2 +-
 public/css/client.css |  4 ++++
 public/js/brand.js    |  2 +-
 public/js/client.js   | 35 ++++++++++++++++++++---------------
 5 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/app/src/server.js b/app/src/server.js
index 368618c5..6b5b46c9 100755
--- a/app/src/server.js
+++ b/app/src/server.js
@@ -45,7 +45,7 @@ dependencies: {
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.98
+ * @version 1.4.99
  *
  */
 
diff --git a/package.json b/package.json
index 844ec614..377d33e5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.4.98",
+    "version": "1.4.99",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
diff --git a/public/css/client.css b/public/css/client.css
index a006889a..353700ab 100755
--- a/public/css/client.css
+++ b/public/css/client.css
@@ -2152,6 +2152,10 @@ hr {
     color: rgb(0, 255, 71) !important;
 }
 
+.b-yellow {
+    color: #d4a017 !important;
+}
+
 /*
 z-index
 6 theme custom picker
diff --git a/public/js/brand.js b/public/js/brand.js
index dfde68dc..4e591125 100644
--- a/public/js/brand.js
+++ b/public/js/brand.js
@@ -73,7 +73,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.4.98',
+        title: 'WebRTC P2P v1.4.99',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/client.js b/public/js/client.js
index b58c17e4..84508a72 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -15,7 +15,7 @@
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.98
+ * @version 1.4.99
  *
  */
 
@@ -7872,7 +7872,7 @@ function handleDataChannelChat(dataMessage) {
     }
 
     setPeerChatAvatarImgName('left', msgFrom);
-    appendMessage(msgFrom, leftChatAvatar, 'left', msg, msgPrivate, msgId);
+    appendMessage(msgFrom, leftChatAvatar, 'left', msg, msgPrivate, msgId, msgFrom);
     speechInMessages ? speechMessage(true, msgFrom, msg) : playSound('chatMessage');
 }
 
@@ -7963,18 +7963,22 @@ function escapeSpecialChars(regex) {
  * @param {string} msg message to append
  * @param {boolean} privateMsg if is private message
  * @param {string} msgId peer id
+ * @param {string} to peer name
  */
-function appendMessage(from, img, side, msg, privateMsg, msgId = null) {
+function appendMessage(from, img, side, msg, privateMsg, msgId = null, to = '') {
     let time = getFormatDate(new Date());
 
     // sanitize all params
     const getFrom = filterXSS(from);
+    const getTo = filterXSS(to);
     const getSide = filterXSS(side);
     const getImg = isChatGPTOn && getSide === 'left' ? images.chatgpt : filterXSS(img);
     const getMsg = filterXSS(msg);
     const getPrivateMsg = filterXSS(privateMsg);
     const getMsgId = filterXSS(msgId);
 
+    const isChatGPT = getFrom === 'ChatGPT';
+
     // collect chat messages to save it later
     chatMessages.push({
         time: time,
@@ -8002,13 +8006,20 @@ function appendMessage(from, img, side, msg, privateMsg, msgId = null) {
     `;
     // add btn direct reply to private message
     if (isValidPrivateMessage) {
-        msgHTML += `
+        const privateMessageTag =
+            getSide === 'left' ? `Private message from ${getFrom}` : `Private message to ${getTo}`;
+
+        msgHTML += `<p class="b-yellow">${privateMessageTag}</p>`;
+
+        if (!isChatGPT && getSide === 'left') {
+            msgHTML += `
                 <button 
-                    class="${className.msgPrivate}"
+                    class="${className.msgPrivate} b-yellow"
                     id="msg-private-reply-${chatMessagesId}"
                     style="color:#fff; border:none; background:transparent;"
                     onclick="sendPrivateMsgToPeer('${myPeerId}','${getFrom}')"
                 ></button>`;
+        }
     }
     msgHTML += `
                 <button
@@ -8058,7 +8069,7 @@ function appendMessage(from, img, side, msg, privateMsg, msgId = null) {
         setTippy(getId('msg-copy-' + chatMessagesId), 'Copy', 'top');
         setTippy(getId('msg-speech-' + chatMessagesId), 'Speech', 'top');
         if (isValidPrivateMessage) {
-            setTippy(getId('msg-private-reply-' + chatMessagesId), 'Reply', 'top');
+            setTippy(getId('msg-private-reply-' + chatMessagesId), 'Reply to ' + getTo, 'top');
         }
     }
     chatMessagesId++;
@@ -8313,7 +8324,7 @@ function addMsgerPrivateBtn(msgerPrivateBtn, msgerPrivateMsgInput, peerId) {
 
         const toPeerName = msgerPrivateBtn.value;
         emitMsg(myPeerName, toPeerName, pMsg, true, peerId);
-        appendMessage(myPeerName, rightChatAvatar, 'right', pMsg + '<hr>Private message to ' + toPeerName, true);
+        appendMessage(myPeerName, rightChatAvatar, 'right', pMsg, true, null, toPeerName);
         msgerPrivateMsgInput.value = '';
         elemDisplay(msgerCP, false);
     }
@@ -8982,13 +8993,7 @@ function sendPrivateMsgToPeer(toPeerId, toPeerName) {
                 return;
             }
             emitMsg(myPeerName, toPeerName, pMsg, true, toPeerId);
-            appendMessage(
-                myPeerName,
-                rightChatAvatar,
-                'right',
-                pMsg + '<br/><hr>Private message to ' + toPeerName,
-                true,
-            );
+            appendMessage(myPeerName, rightChatAvatar, 'right', pMsg, true, null, toPeerName);
             userLog('toast', 'Message sent to ' + toPeerName + ' 👍');
         }
     });
@@ -11080,7 +11085,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.4.98',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.4.99',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: `