@chat21/chat21-web-widget 5.0.75 → 5.0.77-rc.1

package/CHANGELOG.md

@@ -5,9 +5,17 @@
     *Dario De Pascalis* 
 ### **Copyrigth**: *Tiledesk SRL*
 
+### 5.0.77-rc.1
+- added: ability to programmatically open an old conversation by request_id
+
+### 5.0.76 in PROD
+
 ### 5.0.75 in PROD
 - bug-fixed: WELCOME_TITLE and WELCOME_MSG translation labels not rendered
 
+### 5.0.75-rc.1
+- added: image preview iframe on image click
+
 ### 5.0.74 in PROD
 
 ### 5.0.74-rc.5

package/package.json

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

package/src/app/app.component.scss

@@ -637,6 +637,11 @@ chat-root {
             }
         }
 
+
+        #tiledesk-image-preview {
+            border-radius: 16px;
+        }
+
         .chat21-fullscreen {
             width: 100%;
             height: 100%;

package/src/app/app.component.ts

@@ -1383,13 +1383,20 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 });
             };
 
-            /** set state reinit */
+            /** start new conversation */
             windowContext['tiledesk'].startConversation = function (text: string) {
                 ngZone.run(() => {
                     windowContext['tiledesk']['angularcomponent'].component.onNewConversation(text);
                 });
             };
 
+            /** open widget with conversation ID */
+            windowContext['tiledesk'].openConversationById = function (request_id: string) {
+                ngZone.run(() => {
+                    windowContext['tiledesk']['angularcomponent'].component.openConversationById(request_id);
+                });
+            };
+
             /** set state reinit */
             windowContext['tiledesk'].reInit = function () {
                 ngZone.run(() => {
@@ -1787,6 +1794,15 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         return;
     }
 
+    openConversationById(requestId){
+        this.isOpenConversation = true;
+
+        this.g.setParameter('recipientId', requestId);
+        this.appStorageService.setItem('recipientId', requestId)
+
+        this.isConversationArchived = false;
+    }
+
     /**
      * MODAL HOME:
      * open all-conversation

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

@@ -1,11 +1,12 @@
 <!-- [ngStyle] = "{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; text-align: center; margin: auto"-->
-<div class="c21-img-container" >
+<div class="c21-img-container">
   <img 
     class="message-contentX message-content-imageX" 
     [alt]="metadata?.name"
     [ngClass]="{'isLoadingImage': loading}"
-    [ngStyle] = "{ 'width': width, 'height': height }"
+    [ngStyle] = "{ 'width': width + 'px', 'height': height+'px' }"
     [src]="metadata.src" 
     (load)="onLoaded($event)"
-    (click)="downloadImage(metadata.src, metadata.name)"/>
+    (click)="onClickImage()"/>
+    <!-- downloadImage(metadata.src, metadata.name);  -->
 </div>

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

@@ -9,8 +9,8 @@ import { saveAs } from 'file-saver';
 export class ImageComponent implements OnInit {
 
   @Input() metadata: any;
-  @Input() width: number;
-  @Input() height: number;
+  @Input() width: any;
+  @Input() height: any;
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
 
   loading: boolean = true
@@ -28,8 +28,8 @@ export class ImageComponent implements OnInit {
   }
 
   downloadImage(url: string, fileName: string) {
-    console.log('Image COMP - IMAGE URL ', url) 
-    console.log('Image COMP - IMAGE FILENAME ', fileName) 
+    // console.log('Image COMP - IMAGE URL ', url); 
+    // console.log('Image COMP - IMAGE FILENAME ', fileName); 
     fileName? null: fileName = decodeURIComponent(decodeURIComponent(url).split('/').pop())
     // const a: any = document.createElement('a');
     // a.href = this.sanitizer.bypassSecurityTrustUrl(url);
@@ -43,46 +43,58 @@ export class ImageComponent implements OnInit {
   }
 
   onClickImage(){
+    const that = this;
+    var ifrm = document.createElement("iframe");
+    ifrm.setAttribute("frameborder", "0");
+    // ifrm.setAttribute("border", "0");
+    ifrm.setAttribute('id','tiledesk-image-preview');
+    ifrm.setAttribute('tiledesk_context','parent');
+    ifrm.setAttribute('style', 'width: 100%; height: 100%; position: absolute; z-index: 2147483003;')
+    
+    var iframeContent = '<head>'
+    iframeContent += '<style> .tiledesk-popup {position: absolute; inset: 1px; outline-offset: -5px; background-color: rgba(0, 0, 0, 0.35); border-radius:16px; will-change: opacity;}'
+    iframeContent +=    '.tiledesk-popup-content { position: fixed; inset: 0px; width: 100%;  height: 100%; display: flex;  justify-content: center; align-items: center; outline: 0px;}'
+    iframeContent +=    '.tiledesk-popup-button { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; position: absolute; top: 0px; right: 0px; background-color: transparent; border: none; cursor: pointer; margin: 9px; padding: 0px; }'
+    iframeContent +=    '.tiledesk-popup-image { max-height: 80vh; max-width: 80vw; }'
+    iframeContent += '</style>'
+    iframeContent += '</head>';
+    iframeContent += '<body>'
+    iframeContent +=  '<div class="frame-root" id="frame-root">'
+    iframeContent +=    '<div class="frame-content">'
+    iframeContent +=      '<div class="tiledesk-popup" style="opacity: 1;"></div>'
+    iframeContent +=      '<div role="button" tabindex="-1" class="tiledesk-popup-content">'
+    // iframeContent +=         '<button id="button" type="button" data-testid="closeButton" class="tiledesk-popup-button">'
+    // iframeContent +=           '<svg id="ic_close" fill="#000000" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>'
+    // iframeContent +=         '</button>'
+    iframeContent +=         '<a href="'+this.metadata.src+'" data-testid="popupImage-wrapper" class="tidio-popup-vgwcqv" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">'
+    iframeContent +=           '<img src="'+this.metadata.src+'" class="tiledesk-popup-image" id="image-popup">'
+    iframeContent +=         '</a>'
+    iframeContent +=      '</div>'
+    iframeContent +=   '</div>'
+    iframeContent +='</body>'
 
-  //   var ifrm = document.createElement("iframe");
-  //   ifrm.setAttribute("frameborder", "0");
-  //   ifrm.setAttribute("border", "0");
-  //   ifrm.setAttribute('id','tiledeskiframe');
-  //   ifrm.setAttribute('tiledesk_context','parent');
-  //   ifrm.setAttribute('style', 'width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 2147483003; border: 0px;')
-
-  //   var iframeContent = '<html>'
-  //   iframeContent += '<head></head>'
-  //   iframeContent += '<body>'
-  //   iframeContent +=  '<div class="frame-root">'
-  //   iframeContent +=    '<div class="frame-content">'
-  //   iframeContent +=      '<div class="tiledesk-popup" style="opacity: 1;"></div>'
-  //   iframeContent +=      '<div role="button" tabindex="-1" class="tidio-popup-1y163m9">'
-  //   iframeContent +=        '<button type="button" data-testid="closeButton" class="tidio-popup-fru4e5 >'
-  //   iframeContent +=          '<svg id="ic_close" fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>'
-  //   iframeContent +=        '</button>'
-  //   iframeContent +=        '<a href="#popup" data-testid="popupImage-wrapper" class="tidio-popup-vgwcqv" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">'
-  //   iframeContent +=          '<img src="'+this.metadata.src+'" alt="popup" class="tidio-popup-wuejeg">'
-  //   iframeContent +=        '</a>'
-  //   iframeContent +=      '</div>'
-  //   iframeContent +=     '</div>'
-  //   iframeContent +=    '</div>'
-  //   iframeContent +='</body>'
-  //   iframeContent +='</html>'
-
-  //   var tiledeskdiv = this.globals.windowContext.document.getElementById('tiledeskdiv');
+    // ifrm.src = 'data:text/html;charset=utf-8,' + encodeURI(iframeContent);
+    ifrm.srcdoc = iframeContent
+    window.document.body.appendChild(ifrm)
 
-  //   tiledeskdiv.appendChild(ifrm);
-  //   ifrm.contentWindow.document.open();
-  //   ifrm.contentWindow.document.write(iframeContent);
-  //   ifrm.contentWindow.document.close();
 
-  //   ifrm.onload = function(ev) {
-  //     // var button = document.getElementById("button");
-  //     // button.addEventListener("click", function(event){
-  //     //   alert(event.target);
-  //     // });
-  //   };
+    ifrm.onload = function(ev) {
+      var iframe = window.document.getElementById('tiledesk-image-preview')
+      // var button = ifrm.contentWindow.document.getElementById("button");
+      // button.addEventListener("click", function(event){
+      //   window.document.body.removeChild(iframe)
+      // });
+      var div = ifrm.contentWindow.document.getElementById('frame-root')
+      div.addEventListener("click", function(event){
+        window.document.body.removeChild(iframe)
+      });
+      // var image = ifrm.contentWindow.document.getElementById('image-popup')
+      // image.addEventListener("click", function(event){
+      //   event.preventDefault();
+      //   event.stopPropagation();
+      //   that.downloadImage(that.metadata.src, that.metadata.name)
+      // });
+    };
     
   }
 

package/src/app/providers/translator.service.ts

@@ -266,7 +266,7 @@ export class TranslatorService {
 
 
     this._translate.get(labels).subscribe(res => {
-      console.log('»»»» initI18n »»»»»» »»»»»» GET TRANSLATED LABELS RES ', res);
+      // console.log('»»»» initI18n »»»»»» »»»»»» GET TRANSLATED LABELS RES ', res);
       globals.LABEL_PLACEHOLDER = res['LABEL_PLACEHOLDER']
       globals.LABEL_START_NW_CONV = res['LABEL_START_NW_CONV'];
       globals.LABEL_SELECT_TOPIC = res['LABEL_SELECT_TOPIC'];
@@ -317,7 +317,7 @@ export class TranslatorService {
       globals.LABEL_PREVIEW = res['LABEL_PREVIEW']
       globals.LABEL_ERROR_FIELD_REQUIRED= res['LABEL_ERROR_FIELD_REQUIRED']
       
-      console.log('resss', globals.WELCOME_TITLE)
+      
       if(globals.WELCOME_TITLE === 'WELLCOME_TITLE') globals.WELCOME_TITLE = res['WELCOME_TITLE']
       if (!globals.welcomeTitle) {
         globals.welcomeTitle = globals.WELCOME_TITLE;   /** Set the widget welcome message. Value type : string */

package/src/assets/twp/index-dev.html

@@ -468,7 +468,7 @@
     <meta property="og:locale" content="en">
     
     <link rel="icon" type="image/png" href="./tiledesk_widget_files/logo-short.png">
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
     <script defer="" src="./tiledesk_widget_files/jquery.min.js"></script>
     <script defer="" src="./tiledesk_widget_files/bootstrap.min.js"></script>
 
@@ -791,6 +791,11 @@
             preChatFormTextArea.value = JSON.stringify(preChatFormJSON, null, 4)
         }
 
+        function onClickOpenConversationById(){
+            let request_id = document.getElementById('request_id')
+            window.Tiledesk('openConversationById', request_id)
+        }
+
         // function onClickParameter(elementName){
         //     console.log('onClickParameter: ',elementName)
         //     const radios = document.getElementsByName(elementName)
@@ -1753,10 +1758,21 @@
                             <textarea class="form-control" id="preChatFormGet" placeholder="Get preChatForm JSON..." rows="6" cols="60"></textarea>
                         </div>
                         <div class="row" style="text-align: right; margin:5px 0px">
-                            <button class="btn btn-light" onclick="onClickGetPreChatForm()">Get Form <i class="fa fa-sticky-note-o" aria-hidden="true"></i></button>
+                            <button class="btn btn-light" onclick="onClickGetPreChatForm()">Get Form <i class="fa-regular fa-sticky-note" aria-hidden="true"></i></button>
                         </div>
 
                     </div>
+                    <div class="row section">
+                        <div><h3 style="line-height: 0.3;">OPEN <em><strong>conversation</strong></em></h3></div>
+
+                        <div>Insert an <em><strong>existing</strong></em> request ID </div>
+                        <div class="row" style="margin: 0">
+                            <textarea class="form-control" id="request_id" placeholder="support-group-UUID" rows="1" cols="60"></textarea>
+                        </div>
+                        <div class="row" style="text-align: right; margin:5px 0px">
+                            <button class="btn btn-light" onclick="onClickOpenConversationById()">Open conversation <i class="fa-regular fa-comment" aria-hidden="true"></i></button>
+                        </div>
+                    </div>
                     <div class="row section c21-parameters">
                         <div><h3 style="line-height: 0.3;">MANAGE <em><strong>widget settings</strong></em></h3></div>
                         <div class="docs">Select an option for Tiledesk settings parameter</div>