From f5afbf05b1c818dbfe969e76f379474c15dcb91b Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Sun, 10 Aug 2025 11:48:56 +0200
Subject: [PATCH] [mirotalk] - add chat in query params, update widget

---
 README.md              | 17 +++++++++--------
 app/api/join/join.js   |  1 +
 app/api/join/join.php  |  1 +
 app/api/join/join.py   |  1 +
 app/api/join/join.sh   |  1 +
 app/api/swagger.yaml   |  3 +++
 app/src/server.js      | 10 +++++-----
 package-lock.json      |  4 ++--
 package.json           |  2 +-
 public/css/landing.css |  2 +-
 public/js/brand.js     |  2 +-
 public/js/client.js    | 35 +++++++++++++++++++++++++++++++++--
 public/js/iframe.js    |  2 ++
 public/js/widget.js    | 27 +++++++++++++++++++++++----
 widgets/example-5.html |  1 +
 15 files changed, 85 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index e69fec5e..ac6f9c6c 100644
--- a/README.md
+++ b/README.md
@@ -107,8 +107,8 @@
 <br/>
 
 - You can `directly join a room` by using links like:
-- https://p2p.mirotalk.com/join?room=test&name=mirotalk&avatar=0&audio=0&video=0&screen=0&hide=0&notify=0
-- https://mirotalk.up.railway.app/join?room=test&name=mirotalk&avatar=0&audio=0&video=0&screen=0&hide=0&notify=0
+- https://p2p.mirotalk.com/join?room=test&name=mirotalk&avatar=0&audio=0&video=0&screen=0&chat=0&hide=0&notify=0
+- https://mirotalk.up.railway.app/join?room=test&name=mirotalk&avatar=0&audio=0&video=0&screen=0&chat=0&hide=0&notify=0
 
     | Params | Type    | Description     |
     | ------ | ------- | --------------- |
@@ -118,6 +118,7 @@
     | audio  | boolean | Audio stream    |
     | video  | boolean | Video stream    |
     | screen | boolean | Screen stream   |
+    | chat.  | boolean | Chat            |
     | hide   | boolean | Hide myself     |
     | notify | boolean | Welcome message |
     | token  | string  | jwt token       |
@@ -261,17 +262,17 @@ curl -X POST "https://mirotalk.up.railway.app/api/v1/meeting" -H "authorization:
 ### 4. Join Meeting (Basic)
 
 ```bash
-curl -X POST "http://localhost:3000/api/v1/join" -H "authorization: mirotalkp2p_default_secret" -H "Content-Type: application/json" --data '{"room":"test","name":"mirotalk","avatar":false,"audio":true,"video":true,"screen":false,"hide":false,"notify":true}'
-curl -X POST "https://p2p.mirotalk.com/api/v1/join" -H "authorization: mirotalkp2p_default_secret" -H "Content-Type: application/json" --data '{"room":"test","name":"mirotalk","avatar":false,"audio":true,"video":true,"screen":false,"hide":false,"notify":true}'
-curl -X POST "https://mirotalk.up.railway.app/api/v1/join" -H "authorization: mirotalkp2p_default_secret" -H "Content-Type: application/json" --data '{"room":"test","name":"mirotalk","avatar":false,"audio":true,"video":true,"screen":false,"hide":false,"notify":true}'
+curl -X POST "http://localhost:3000/api/v1/join" -H "authorization: mirotalkp2p_default_secret" -H "Content-Type: application/json" --data '{"room":"test","name":"mirotalk","avatar":false,"audio":true,"video":true,"screen":false,"chat":false,"hide":false,"notify":true}'
+curl -X POST "https://p2p.mirotalk.com/api/v1/join" -H "authorization: mirotalkp2p_default_secret" -H "Content-Type: application/json" --data '{"room":"test","name":"mirotalk","avatar":false,"audio":true,"video":true,"screen":false,"chat":false,"hide":false,"notify":true}'
+curl -X POST "https://mirotalk.up.railway.app/api/v1/join" -H "authorization: mirotalkp2p_default_secret" -H "Content-Type: application/json" --data '{"room":"test","name":"mirotalk","avatar":false,"audio":true,"video":true,"screen":false,"chat":false,"hide":false,"notify":true}'
 ```
 
 ### 5. Join Meeting with Token
 
 ```bash
-curl -X POST "http://localhost:3000/api/v1/join" -H "authorization: mirotalkp2p_default_secret" -H "Content-Type: application/json" --data '{"room":"test","name":"mirotalk","audio":true,"video":true,"screen":false,"hide":false,"notify":true,"token":{"username":"username","password":"password","presenter":true,"expire":"1h"}}'
-curl -X POST "https://p2p.mirotalk.com/api/v1/join" -H "authorization: mirotalkp2p_default_secret" -H "Content-Type: application/json" --data '{"room":"test","name":"mirotalk","audio":true,"video":true,"screen":false,"hide":false,"notify":true,"token":{"username":"username","password":"password","presenter":true,"expire":"1h"}}'
-curl -X POST "https://mirotalk.up.railway.app/api/v1/join" -H "authorization: mirotalkp2p_default_secret" -H "Content-Type: application/json" --data '{"room":"test","name":"mirotalk","audio":true,"video":true,"screen":false,"hide":false,"notify":true,"token":{"username":"username","password":"password","presenter":true,"expire":"1h"}}'
+curl -X POST "http://localhost:3000/api/v1/join" -H "authorization: mirotalkp2p_default_secret" -H "Content-Type: application/json" --data '{"room":"test","name":"mirotalk","audio":true,"video":true,"screen":false,"chat":false,"hide":false,"notify":true,"token":{"username":"username","password":"password","presenter":true,"expire":"1h"}}'
+curl -X POST "https://p2p.mirotalk.com/api/v1/join" -H "authorization: mirotalkp2p_default_secret" -H "Content-Type: application/json" --data '{"room":"test","name":"mirotalk","audio":true,"video":true,"screen":false,"chat":false,"hide":false,"notify":true,"token":{"username":"username","password":"password","presenter":true,"expire":"1h"}}'
+curl -X POST "https://mirotalk.up.railway.app/api/v1/join" -H "authorization: mirotalkp2p_default_secret" -H "Content-Type: application/json" --data '{"room":"test","name":"mirotalk","audio":true,"video":true,"screen":false,"chat":false,"hide":false,"notify":true,"token":{"username":"username","password":"password","presenter":true,"expire":"1h"}}'
 ```
 
 ### 6. Generate Token
diff --git a/app/api/join/join.js b/app/api/join/join.js
index 2783780a..ba54764b 100644
--- a/app/api/join/join.js
+++ b/app/api/join/join.js
@@ -25,6 +25,7 @@ async function getJoin() {
                 audio: false,
                 video: false,
                 screen: false,
+                chat: false,
                 hide: false,
                 notify: true,
                 token: {
diff --git a/app/api/join/join.php b/app/api/join/join.php
index 6851b340..1ed3c04d 100644
--- a/app/api/join/join.php
+++ b/app/api/join/join.php
@@ -24,6 +24,7 @@ $data = array(
     "audio"         => false,
     "video"         => false,
     "screen"        => false,
+    "chat"          => false,
     "hide"          => false,
     "notify"        => true,
     "token"         => array(
diff --git a/app/api/join/join.py b/app/api/join/join.py
index 858e5a9e..e20e0afd 100644
--- a/app/api/join/join.py
+++ b/app/api/join/join.py
@@ -19,6 +19,7 @@ data = {
     "audio": "false",
     "video": "false",
     "screen": "false",
+    "chat": "false",
     "hide": "false",
     "notify": "true",
     "token": {
diff --git a/app/api/join/join.sh b/app/api/join/join.sh
index a7b22e6d..15ca89d8 100755
--- a/app/api/join/join.sh
+++ b/app/api/join/join.sh
@@ -15,6 +15,7 @@ REQUEST_DATA='{
     "audio": false,
     "video": false,
     "screen": false,
+    "chat": false,
     "hide": false,
     "notify": true,
     "token": {
diff --git a/app/api/swagger.yaml b/app/api/swagger.yaml
index 691b73dd..aa10d0e7 100644
--- a/app/api/swagger.yaml
+++ b/app/api/swagger.yaml
@@ -96,6 +96,9 @@ paths:
                           screen:
                               type: boolean
                               default: false
+                          chat:
+                              type: boolean
+                              default: false
                           hide:
                               type: boolean
                               default: false
diff --git a/app/src/server.js b/app/src/server.js
index b98e94d8..7ff53ac6 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.5.54
+ * @version 1.5.55
  *
  */
 
@@ -612,11 +612,11 @@ app.get('/join/', async (req, res) => {
     if (Object.keys(req.query).length > 0) {
         log.debug('Request Query', req.query);
         /* 
-            http://localhost:3000/join?room=test&name=mirotalk&audio=1&video=1&screen=0&notify=0&hide=0
-            https://p2p.mirotalk.com/join?room=test&name=mirotalk&audio=1&video=1&screen=0&notify=0&hide=0
-            https://mirotalk.up.railway.app/join?room=test&name=mirotalk&audio=1&video=1&screen=0&notify=0&hide=0
+            http://localhost:3000/join?room=test&name=mirotalk&audio=1&video=1&screen=0&chat=1&notify=0&hide=0
+            https://p2p.mirotalk.com/join?room=test&name=mirotalk&audio=1&video=1&screen=0&chat=1&notify=0&hide=0
+            https://mirotalk.up.railway.app/join?room=test&name=mirotalk&audio=1&video=1&screen=0&chat=1&notify=0&hide=0
         */
-        const { room, name, audio, video, screen, notify, hide, token } = checkXSS(req.query);
+        const { room, name, audio, video, screen, chat, notify, hide, token } = checkXSS(req.query);
 
         if (!room) {
             log.warn('/join/params room empty', room);
diff --git a/package-lock.json b/package-lock.json
index ad2a2af0..e7a5a4ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "mirotalk",
-    "version": "1.5.54",
+    "version": "1.5.55",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalk",
-            "version": "1.5.54",
+            "version": "1.5.55",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@mattermost/client": "10.9.0",
diff --git a/package.json b/package.json
index 37d03ee7..fcb19eef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.5.54",
+    "version": "1.5.55",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
diff --git a/public/css/landing.css b/public/css/landing.css
index 1a54ae2a..e23bd4d6 100755
--- a/public/css/landing.css
+++ b/public/css/landing.css
@@ -56,7 +56,7 @@ pre {
     font-size: 1em;
 }
 
-a {
+a {#020202
     background-color: transparent;
     -webkit-text-decoration-skip: objects;
 }
diff --git a/public/js/brand.js b/public/js/brand.js
index 8ab5773a..85d059a9 100644
--- a/public/js/brand.js
+++ b/public/js/brand.js
@@ -96,7 +96,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.5.54',
+        title: 'WebRTC P2P v1.5.55',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/client.js b/public/js/client.js
index a5fa0176..8abf3c6e 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.5.54
+ * @version 1.5.55
  *
  */
 
@@ -534,6 +534,7 @@ let myVideoStatusBefore = false;
 let myScreenStatus = false;
 let isScreenEnabled = getScreenEnabled();
 let notify = getNotify(); // popup room sharing on join
+let chat = getChat(); // popup chat on join
 let notifyBySound = true; // turn on - off sound notifications
 let isPeerReconnected = false;
 
@@ -1025,6 +1026,25 @@ function getNotify() {
     return notify;
 }
 
+/**
+ * Check if chat is set
+ * @returns {boolean} true/false
+ */
+function getChat() {
+    let qs = new URLSearchParams(window.location.search);
+    let chat = filterXSS(qs.get('chat'));
+    if (chat) {
+        let queryChat = chat === '1' || chat === 'true';
+        if (queryChat != null) {
+            console.log('Direct join', { chat: queryChat });
+            notify = false; // From widget disable notify on join...
+            return queryChat;
+        }
+    }
+    console.log('Direct join', { chat: chat });
+    return chat;
+}
+
 /**
  * Get Peer JWT
  * @returns {mixed} boolean false or token string
@@ -1298,6 +1318,8 @@ function handleServerInfo(config) {
     } else {
         checkShareScreen();
     }
+
+    checkChatOnJoin();
 }
 
 /**
@@ -3390,6 +3412,15 @@ function checkShareScreen() {
     }
 }
 
+/**
+ * Open chat on Join 
+ */
+function checkChatOnJoin() {
+    if (chat) {
+        chatRoomBtn.click();
+    }
+}
+
 /**
  * Load Remote Media Stream obj
  * @param {MediaStream} stream media stream audio - video
@@ -11242,7 +11273,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.5.54',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.5.55',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: `
diff --git a/public/js/iframe.js b/public/js/iframe.js
index 51af3da2..8bf6c0d8 100644
--- a/public/js/iframe.js
+++ b/public/js/iframe.js
@@ -6,6 +6,7 @@ class IframeApi {
         audio: false,
         video: false,
         screen: false,
+        chat: false,
         hide: false,
         notify: false,
         width: '100vw',
@@ -49,6 +50,7 @@ class IframeApi {
             audio: this.options.audio ? 1 : 0,
             video: this.options.video ? 1 : 0,
             screen: this.options.screen ? 1 : 0,
+            chat: this.options.chat ? 1 : 0,
             hide: this.options.hide ? 1 : 0,
             notify: this.options.notify ? 1 : 0,
         });
diff --git a/public/js/widget.js b/public/js/widget.js
index 72c92ae6..0b0e83f0 100644
--- a/public/js/widget.js
+++ b/public/js/widget.js
@@ -155,7 +155,7 @@ class MiroTalkWidget {
 
     async loadSupportWidgetAssets() {
         await this.injectExternalCSS(
-            `${this.protocol}://${this.domain}/css/widgets/support.css`,
+            `${this.protocol}://${this.domain}/css/widgets/Support.css`,
             'mirotalk-support-css'
         );
     }
@@ -233,6 +233,9 @@ class MiroTalkWidget {
             buttons.push({ action: 'startScreenShare', icon: this.getScreenIcon(), text: 'Start Screen Share' });
         }
 
+        // Add chat button
+        buttons.push({ action: 'startChat', icon: this.getChatIcon(), text: 'Start Chat' });
+
         // Insert "Start Screen Share" before "Join Room" if present
         buttons.push({ action: 'joinRoom', icon: this.getJoinIcon(), text: 'Join Room' });
 
@@ -430,7 +433,7 @@ class MiroTalkWidget {
     startAudioCall() {
         if (this.isOnline) {
             console.log('Starting audio call...');
-            this.openMeetingWindow({ audio: 1, video: 0, screen: 0 });
+            this.openMeetingWindow({ audio: 1, video: 0, screen: 0, chat: 0 });
         } else {
             this.supportOffline();
         }
@@ -439,7 +442,16 @@ class MiroTalkWidget {
     startVideoCall() {
         if (this.isOnline) {
             console.log('Starting video call...');
-            this.openMeetingWindow({ audio: 0, video: 1, screen: 0 });
+            this.openMeetingWindow({ audio: 0, video: 1, screen: 0, chat: 0 });
+        } else {
+            this.supportOffline();
+        }
+    }
+
+    startChat() {
+        if (this.isOnline) {
+            console.log('Starting chat...');
+            this.openMeetingWindow({ audio: 0, video: 0, screen: 0, chat: 1 });
         } else {
             this.supportOffline();
         }
@@ -448,7 +460,7 @@ class MiroTalkWidget {
     startScreenShare() {
         if (this.isOnline) {
             console.log('Starting screen share...');
-            this.openMeetingWindow({ audio: 0, video: 0, screen: 1 });
+            this.openMeetingWindow({ audio: 0, video: 0, screen: 1, chat: 0 });
         } else {
             this.supportOffline();
         }
@@ -575,6 +587,12 @@ class MiroTalkWidget {
         </svg>`;
     }
 
+    getChatIcon() {
+        return `<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
+            <path d="M21 6.5a2.5 2.5 0 0 0-2.5-2.5h-13A2.5 2.5 0 0 0 3 6.5v11A2.5 2.5 0 0 0 5.5 20H6v2l3-2h9.5A2.5 2.5 0 0 0 21 17.5v-11zm-2.5-.5a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5H8.17L7 19.17V18H5.5a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5h13z"/>
+        </svg>`;
+    }
+
     getJoinIcon() {
         return `<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
             <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
@@ -666,6 +684,7 @@ window.miroTalkWidgetAction = function (action, element) {
             reopen: () => widget.reopenWidget(),
             startAudioCall: () => widget.startAudioCall(),
             startVideoCall: () => widget.startVideoCall(),
+            startChat: () => widget.startChat(),
             startScreenShare: () => widget.startScreenShare(),
             joinRoom: () => widget.joinRoom(),
         };
diff --git a/widgets/example-5.html b/widgets/example-5.html
index 92819bc0..f0263403 100644
--- a/widgets/example-5.html
+++ b/widgets/example-5.html
@@ -17,6 +17,7 @@
                     audio: 0,
                     video: 0,
                     screen: 0,
+                    chat: 0,
                     hide: 0,
                     notify: 0,
                     token: null,