@chat21/chat21-web-widget 5.0.70-ionic → 5.0.71-rc.1

package/CHANGELOG.md

@@ -1,7 +1,9 @@
 # chat21-web-widget ver 5.0
 
-### 5.0.70-ionic in PROD
-- bug-fixed: widget not showed when click on launch button if is in mobile ionic app
+### 5.0.71-rc.1
+- added: ability to start conversation from an intent hiddenMessage name
+- added: postMessage to notice parent the current message
+- changed: carousel UI if image is not available
 
 ### 5.0.70 in PROD
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.70-ionic",
+  "version": "5.0.71-rc.1",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/app.component.ts

@@ -748,6 +748,25 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.appStorageService.setItem('recipientId', newConvId)
         this.logger.debug('[APP-COMP]  recipientId: ', this.g.recipientId);
         this.isConversationArchived = false;
+        
+        if(window.location.search && window.location.search.substring(1).split('&').find((param => param.includes('tiledesk_hiddenMessage')))){
+            let hiddenMessage = window.location.search.substring(1).split('&').find((param => param.includes('tiledesk_hiddenMessage'))).split('=')[1]
+            let participant = window.location.search.substring(1).split('&').find((param => param.includes('tiledesk_participants'))).split('=')[1]
+            this.logger.debug('[APP-COMP] startNewConversation ', window.location.search.substring(1).split('&').find((param => param.includes('tiledesk_hiddenMessage'))))
+            let message: any = {}
+            message.attributes = { subtype: 'info', ...this.g.attributes}
+            message.userAgent = this.g.attributes['client']
+            message.request_id = newConvId
+            message.sourcePage = this.g.attributes['sourcePage']
+            message.language = this.g.lang
+            message.text = '/'+ hiddenMessage
+            message.participants = [ participant ]
+            message.departmentid = this.g.attributes.departmentId
+            // this.sendMessage(message)
+            this.tiledeskRequestsService.sendMessageToRequest(newConvId, this.g.tiledeskToken, message)
+            return;
+        }
+
         this.triggerNewConversationEvent(newConvId);
     }
 
@@ -781,9 +800,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         if (this.g.windowContext.window.location) {
             attributes['sourcePage'] = this.g.windowContext.window.location.href;
         }
-        if(this.g.windowContext.window.document){
+        if(this.g.windowContext.window.document) {
             attributes['sourceTitle'] = this.g.windowContext.window.document.title;
         }
+        // if(this.g.windowContext.window.document && this.g.windowContext.window.document.cookie) {
+        //     attributes['cookie'] = this.g.windowContext.window.document.cookie;
+        // }
         if (projectid) {
             attributes['projectId'] = projectid;
         }

package/src/app/component/conversation-detail/conversation/conversation.component.ts

@@ -504,7 +504,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
         '',
         '',
         false,
-        'text')
+        'text',
+        false)
     }
   }
 

package/src/app/component/message/carousel/carousel.component.html

@@ -8,9 +8,13 @@
         <!-- <div class="card" style="width: 17px;"></div> -->
         <div class="card" *ngFor="let card of gallery; let i = index">
             <div [style.opacity]="i+1 === activeElement? 1: 0.5">
-                <div class="card-image">
+                <div class="card-image" *ngIf="card?.preview?.src !== ''">
                     <img [src]="card?.preview?.src" alt="img" draggable="false">
                 </div>
+                <div class="card-image card-image-placeholder" *ngIf="card?.preview?.src == ''">
+                    <img src="assets/images/icons/no-image.svg" alt="img" draggable="false">
+                    <span>Image not available</span>
+                </div>
                 <div class="card-content">
                     <div class="card-title">{{card?.title}}</div>
                     <div class="card-description">{{card?.description}}</div>

package/src/app/component/message/carousel/carousel.component.scss

@@ -100,6 +100,26 @@
 .carousel .card .card-image {
     height: 150px;
     width: var(--cardWidth);
+    border-radius: 8px 8px 0px 0px;
+}
+
+.carousel .card .card-image-placeholder{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 10px;
+    background: #c1b9b952;
+    align-items: center;
+
+    img{
+        width: 30px;
+        height: 30px;
+        filter: brightness(0) saturate(100%) invert(44%) sepia(8%) saturate(449%) hue-rotate(190deg) brightness(94%) contrast(93%);
+    }
+
+    span{
+        font-size: 0.8rem;
+    }
 }
 .card .card-image img {
     height: 100%;
@@ -110,6 +130,7 @@
     display: block;
     max-width: 100% !important;
     border-radius: 8px 8px 0px 0px;
+    
 }
 .carousel .card .card-content {
     // font-weight: 500;

package/src/app/component/message/carousel/carousel.component.ts

@@ -76,7 +76,7 @@ export class CarouselComponent implements OnInit{
   ngOnChanges(changes: SimpleChanges){
     if(this.message && this.message.attributes && this.message.attributes?.attachment && this.message.attributes?.attachment?.gallery){
       this.gallery = this.message.attributes.attachment.gallery
-      console.log('carrrrrrrrr', this.wrapper, this.elementRef.nativeElement.querySelector(".card"))
+      // console.log('carrrrrrrrr', this.wrapper, this.elementRef.nativeElement.querySelector(".card"))
       // this.firstCardWidth = (this.elementRef.nativeElement.querySelector(".card") as HTMLElement).offsetWidth
     }
 

package/src/app/utils/globals.ts

@@ -568,7 +568,7 @@ export class Globals {
     if(isOpen && isMobile){
       //block body scroll
       // window.parent.document.body.style.height = '100vh';
-      // window.parent.document.body.style.height = '0';
+      window.parent.document.body.style.height = '0';
       window.parent.document.body.style.width = '100%';
       window.parent.document.body.style.overflowY = 'hidden'
       window.parent.document.body.style.position = 'fixed';

package/src/assets/images/icons/no-image.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+    <g>
+        <rect fill="none" height="24" width="24"/>
+        <path d="M21.9,21.9l-8.49-8.49l0,0L3.59,3.59l0,0L2.1,2.1L0.69,3.51L3,5.83V19c0,1.1,0.9,2,2,2h13.17l2.31,2.31L21.9,21.9z M5,18 l3.5-4.5l2.5,3.01L12.17,15l3,3H5z M21,18.17L5.83,3H19c1.1,0,2,0.9,2,2V18.17z"/>
+    </g>
+</svg>

package/src/assets/js/chat21client.js

@@ -1,7 +1,7 @@
 /*
     Chat21Client
 
-    v0.1.12.6
+    v0.1.12.7
 
     @Author Andrea Sponziello
     @Member Gabriele Panico
@@ -1000,7 +1000,10 @@ class Chat21Client {
         
         this.client.on('connect', // TODO if token is wrong it must reply with an error!
             () => {
-                if (this.log) {console.log("Chat client connected. User:" + user_id)}
+                if (this.log) {
+                    console.log("Chat client connected. User:" + user_id)
+                    console.log("Chat client connected. this.connected:" + this.connected)
+                }
                 if (!this.connected) {
                     if (this.log) {console.log("Chat client first connection for:" + user_id)}
                     this.connected = true
@@ -1027,6 +1030,7 @@ class Chat21Client {
         );
         this.client.on('close',
             () => {
+                this.connected = false
                 if (this.log) {console.log("Chat client close event");}
             }
         );

package/src/assets/twp/chatbot-panel.html

@@ -377,11 +377,12 @@
                 }
             }, 1000);
 
+            //open widget after 3s if is closed
             setTimeout(() => {
                 if(event_data && event_data.detail && event_data.detail.global && !event_data.detail.global.isOpen){
                     window.Tiledesk('open')
                 }
-            }, 3000);
+            }, 1000);
             
         });
         
@@ -391,11 +392,11 @@
             //     document.getElementById("preloader").style.display = "none";
             // }, 1000);
             //open widget after 3s if is closed
-            setTimeout(() => {
-                if(event_data && event_data.detail && event_data.detail.global && !event_data.detail.global.isOpen){
-                    window.Tiledesk('open')
-                }
-            }, 3000);
+            // setTimeout(() => {
+            //     if(event_data && event_data.detail && event_data.detail.global && !event_data.detail.global.isOpen){
+            //         window.Tiledesk('open')
+            //     }
+            // }, 3000);
         });
 
         window.Tiledesk('onAuthStateChanged', function(event_data) {
@@ -405,6 +406,15 @@
             // 	window.Tiledesk('show')
             // }
         });
+
+        window.Tiledesk('onMessageCreated', function(event_data) {
+        	console.log("onMessageCreated!", event_data);
+            window.parent.postMessage(event_data.detail, '*')
+       		// if(event_data.detail.isLogged){
+            // 	console.log("isLogged!!!!", event_data);
+            // 	window.Tiledesk('show')
+            // }
+        });
     </script>
 
     <script type="application/javascript">
@@ -453,14 +463,14 @@
     </div>
 
     <header id="header">
-        <ul class="nav navbar-nav navbar-left">
+        <!-- <ul class="nav navbar-nav navbar-left">
             <li class="sign-up"><button class="share-btn" onclick="copyLink()">SHARE THIS PROTOTYPE</button></li>
-        </ul>
+        </ul> -->
     </header>
     <!-- The actual snackbar -->
     <div id="snackbar">Copied to clipboard...</div>
 
-    <div id="wrapper" class="mockup">
+    <!-- <div id="wrapper" class="mockup"> -->
     </div>
 
     <footer id="footer">

package/src/chat21-core/models/conversation.ts

@@ -20,6 +20,7 @@ export class ConversationModel {
     public color: string,
     public avatar: string,
     public archived: boolean,
-    public type: string
+    public type: string,
+    public sound: boolean
   ) { }
 } 

package/src/chat21-core/providers/mqtt/mqtt-conversations-handler.ts

@@ -150,6 +150,7 @@ export class MQTTConversationsHandler extends ConversationsHandlerService {
         this.logger.debug('[MQTTConversationsHandler] connecting MQTT conversations handler');
         this.chat21Service.chatClient.onConversationAdded( (conv) => {
             let conversation = this.completeConversation(conv); // needed to get the "conversation_with", and find the conv in the conv-history
+            conversation.sound = true
             this.logger.log("[MQTTConversationsHandler] onConversationAdded completed:",conversation);
             const index = this.searchIndexInArrayForConversationWith(this.conversations, conversation.conversation_with);
             if (index > -1) {
@@ -162,6 +163,7 @@ export class MQTTConversationsHandler extends ConversationsHandlerService {
             }
         });
         this.chat21Service.chatClient.onConversationUpdated( (conv, topic) => {
+            conv.sound = true;
             this.logger.debug('[MQTTConversationsHandler] conversation updated:', JSON.stringify(conv));
             this.changed(conv);
         });
@@ -184,6 +186,7 @@ export class MQTTConversationsHandler extends ConversationsHandlerService {
             this.logger.debug('[MQTTConversationsHandler] Last conversations', conversations, 'err', err);
             if (!err) {
                 conversations.forEach(conv => {
+                    conv.sound = false;
                     this.added(conv);
                 });
                 loaded();

package/src/chat21-core/providers/mqtt/mqtt-presence.service.ts

@@ -49,7 +49,7 @@ export class MQTTPresenceService extends PresenceService {
     const that = this;
     let local_BSIsOnline = new BehaviorSubject<any>(null);
     this.webSocketService.wsRequesterStatus$.subscribe((data: any) => {
-    this.logger.log('[NATIVEPresenceSERVICE] $subs to wsService - data ', data, userid);
+    // this.logger.log('[NATIVEPresenceSERVICE] $subs to wsService - data ', data, userid);
     if (data && data.presence && data.presence.status === 'online' ) {
         that.BSIsOnline.next({ uid: data.uuid_user, isOnline: true });
         local_BSIsOnline.next({ uid: data.uuid_user, isOnline: true });