[mirotalk] - feat: add typing indicator animation for ChatGPT chat

Author: miroslavpejic85

.env.template

@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk P2P v.1.8.05 - Environment Configuration
+# MiroTalk P2P v.1.8.06 - Environment Configuration
 # ====================================================
 
 # App environment

app/src/config.template.js

@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.8.05 - Configuration File
+ * MiroTalk P2P v.1.8.06 - Configuration File
  * ==============================================
  *
  * This file is the central configuration source.

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.8.05
+ * @version 1.8.06
  *
  */
 

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.8.05",
+    "version": "1.8.06",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {

package.json

@@ -4250,6 +4250,61 @@ body {
     color: #d4a017 !important;
 }
 
+/* AI Typing Indicator */
+.ai-typing-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    margin: 8px 0;
+    float: left;
+    clear: both;
+}
+
+.ai-typing-indicator .typing-dots {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 16px;
+    padding: 12px 18px;
+    backdrop-filter: blur(8px);
+}
+
+.ai-typing-indicator .typing-dots span {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.5);
+    animation: typingBounce 1.4s infinite ease-in-out both;
+}
+
+.ai-typing-indicator .typing-dots span:nth-child(1) {
+    animation-delay: -0.32s;
+}
+
+.ai-typing-indicator .typing-dots span:nth-child(2) {
+    animation-delay: -0.16s;
+}
+
+.ai-typing-indicator .typing-dots span:nth-child(3) {
+    animation-delay: 0s;
+}
+
+@keyframes typingBounce {
+    0%,
+    80%,
+    100% {
+        transform: scale(0.6);
+        opacity: 0.4;
+    }
+    40% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
 /*
 z-index
 6 theme custom picker

public/css/client.css

@@ -109,7 +109,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.8.05',
+        title: 'WebRTC P2P v1.8.06',
         html: `
             <button 
                 id="support-button" 

public/js/brand.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.8.05
+ * @version 1.8.06
  *
  */
 
@@ -11558,13 +11558,47 @@ function emitMsg(from, fromAvatar, to, msg, privateMsg, id) {
     sendToDataChannel(chatMessage);
 }
 
+/**
+ * Show AI typing indicator animation in the chat
+ * @param {string} aiName
+ */
+function showAITypingIndicator(aiName) {
+    const existing = getId(`ai-typing-${aiName}`);
+    if (existing) return;
+    const typingHTML = `
+        <div id="ai-typing-${aiName}" class="msg left-msg">
+            <div class="ai-typing-indicator">
+                <div class="typing-dots">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+            </div>
+        </div>
+    `;
+    msgerChat.insertAdjacentHTML('beforeend', typingHTML);
+    msgerChat.scrollTop = msgerChat.scrollHeight;
+}
+
+/**
+ * Hide AI typing indicator animation from the chat
+ * @param {string} aiName
+ */
+function hideAITypingIndicator(aiName) {
+    const indicator = getId(`ai-typing-${aiName}`);
+    if (indicator) indicator.remove();
+}
+
 /**
  * Read ChatGPT incoming message
  * https://platform.openai.com/docs/introduction
  * @param {string} msg
  */
 async function getChatGPTmessage(msg) {
     console.log('Send ChatGPT message:', msg);
+
+    showAITypingIndicator('ChatGPT');
+
     signalingSocket
         .request('data', {
             room_id: roomId,
@@ -11579,6 +11613,7 @@ async function getChatGPTmessage(msg) {
         })
         .then(
             function (completion) {
+                hideAITypingIndicator('ChatGPT');
                 if (!completion) return;
                 const { message, context } = completion;
                 chatGPTcontext = context ? context : [];
@@ -11590,6 +11625,7 @@ async function getChatGPTmessage(msg) {
             }.bind(this)
         )
         .catch((err) => {
+            hideAITypingIndicator('ChatGPT');
             console.log('ChatGPT error:', err);
         });
 }
@@ -14966,7 +15002,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.05',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.06',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: `