@chat21/chat21-web-widget 5.0.57-rc.1 → 5.0.57-rc.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.57-rc.3
+- changed: tiledesk logo during conversation
+- changed: show entire text of buttons
+- bug-fixed: window.location is undefined in chat21client.js
+
+### 5.0.57-rc.2
+- changed: tiledesk logo during conversation
+- removed: image loader wrapper
+- bug-fixed: callout not render right height if heavy image is received
+
 ### 5.0.57-rc.1
 - added: fileUploadAccept as a tiledesk property
 - added: tiledesk logo during conversation

package/package.json

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

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

@@ -45,6 +45,7 @@
     
     <!-- CONTENT -->
     <chat-conversation-content
+        [class.hideTextReply]="hideFooterTextReply && g?.poweredBy"
         [messages]="messages"
         [senderId]="senderId"
         [baseLocation]="g?.windowContext['tiledesk']?.getBaseLocation()"
@@ -99,10 +100,6 @@
             <div *ngIf="messagesBadgeCount!=0" id="chat21-divBudge" class="c21-divBudge">{{messagesBadgeCount}}</div>
         </div>
 
-        <!-- <div id="hiddenFooter" *ngIf="!hideTextAreaContent" class="fade-in-bottom">
-            <div tabindex="-1" class="c21-powered-by" [innerHTML]="g.poweredBy"></div>
-        </div> -->
-
         <chat-conversation-footer
             [conversationWith]="conversationWith"
             [attributes]="g?.attributes"

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

@@ -9,6 +9,11 @@
     --foregroundColor: var(--col-msg-sent);
 }
 
+:host chat-conversation-content.hideTextReply ::ng-deep .chat21-sheet-content{
+
+    bottom: var(--chat-footer-height) !important
+}
+
 // ============= CSS #chat21-conversation-component ================= //
 #chat21-conversation-component {
     // background-color: #ffffff;
@@ -103,7 +108,7 @@
     #chat21-buttonToBottom {
         display: flex;
         position: relative;
-        margin-right: -25px; //10px;
+        margin-right: 10px; //-25px;
         margin-top: -40px;
         float: right;
         width: 30px;

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.scss

@@ -66,7 +66,7 @@
                 top: 0;
                 right: 0;
                 left: 0;
-                bottom: var(--chat-footer-height); //43px;
+                bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height));
                 overflow: hidden;
                 .time{
                     margin-bottom: 20px;

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.html

@@ -1,3 +1,10 @@
+<!-- LOGO-->
+<div id="hiddenFooter" *ngIf="!hideTextAreaContent && poweredBy" class="fade-in-bottom" 
+    [class.hideTextReply]="hideTextReply">
+    <div tabindex="-1" class="c21-powered-by" [innerHTML]="poweredBy"></div>
+</div>
+
+<!-- TEXTAREA + ICONS: conv active-->
 <div class="textarea-container" *ngIf="!hideTextAreaContent && !hideTextReply">
     
     <div class="icons-container">
@@ -69,12 +76,8 @@
     </div>
 </div>
 
-<div id="hiddenFooter" *ngIf="!hideTextAreaContent" class="fade-in-bottom" 
-    [class.hideTextReply]="hideTextReply">
-    <div tabindex="-1" class="c21-powered-by" [innerHTML]="poweredBy"></div>
-</div>
-
 
+<!-- EMOJII PICKER-->
 <div [style.visibility]="isEmojiiPickerShow?'visible':'hidden'"  class="emoji-container">
     <emoji-mart id="emoji-mart"
         *ngIf="showEmojiPicker"
@@ -90,6 +93,7 @@
     </emoji-mart>
 </div>
 
+<!-- NEW CONV & CONTINE buttons: conv archived-->
 <div id="floating-container" *ngIf="hideTextAreaContent" class="fade-in-bottom" start-focus-chat21-conversation-component> 
     <button tabindex="1040" aflistconv #aflistconv  class="c21-button-primary" (click)="openNewConversation()" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'border-color': stylesMap.get('themeColor'), 'color': stylesMap?.get('foregroundColor')}">
         <span class="v-align-center">

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.scss

@@ -248,19 +248,16 @@ textarea:active{
     // position: absolute;
     bottom: 100%;
     width: 100%;
+    height: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
-    position: absolute;
-    box-shadow: inset 0px -22px 16px -15px rgba(0,0,0,0.1);
+    // position: absolute;
+    // box-shadow: inset 0px -22px 16px -15px rgba(0,0,0,0.1);
     &.hideTextReply{
         height: var(--chat-footer-height);
         position: unset;
         box-shadow: none;
-        .c21-powered-by{
-            background-color: var(--chat-footer-background-color);
-            
-        }
     }
     .c21-powered-by {
         // height: 40px;

package/src/app/component/last-message/last-message.component.html

@@ -38,7 +38,8 @@
           [fontColor]="stylesMap.get('bubbleReceivedTextColor')"
           [fontSize]="stylesMap.get('fontSize')"
           [fontFamily]="stylesMap.get('fontFamily')"
-          [stylesMap]="stylesMap">
+          [stylesMap]="stylesMap"
+          (onElementRendered)="onElementRenderedFN($event)">
         </chat-bubble-message>
   
         <div class="c21-icon-avatar" *ngIf="isFirst">

package/src/app/component/last-message/last-message.component.ts

@@ -188,6 +188,20 @@ export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
     // this.logger.debug('3 isOpenNewMessage: ' + this.g.isOpenNewMessage);
     this.onCloseMessagePreview.emit();
   }
+
+  onElementRenderedFN(event){
+    console.log('eventttttttt-->', event, this.messageListWRP)
+    this.messageListWRP.forEach((item, index)=> {
+      setTimeout(() => {
+        if(this.messageListWRP.get(index)){
+          let height = getComputedStyle(this.messageListWRP.get(index).nativeElement).height
+          console.log('heightttttt--<', height, this.messages[this.messages.length-1])
+          this.g.setWidgetPreviewContainerSize(0, +height.substring(0, height.length-2))
+        }
+      }, 50);
+    })
+
+  }
   // ========= begin:: event emitter function ============//
 
 

package/src/app/component/message/buttons/text-button/text-button.component.scss

@@ -26,7 +26,7 @@
     font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    // white-space: nowrap;
     letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
     color: var(--textColor); //$blue

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

@@ -1,6 +1,6 @@
 <!-- [ngStyle] = "{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; text-align: center; margin: auto"-->
 <div class="c21-img-container" >
-  <div *ngIf="loading" class="loader" [ngStyle] = "{ 'width': width , 'height': height }"></div>
+  <!-- <div *ngIf="loading" class="loader" [ngStyle] = "{ 'width': width , 'height': height }"></div> -->
   <img 
     class="message-contentX message-content-imageX" 
     [alt]="metadata?.name"

package/src/app/sass/_variables.scss

@@ -27,6 +27,7 @@
     --bkg-color-info-message: rgba(24, 119, 242, 0.1);
 
     --chat-footer-height: 56px;
+    --chat-footer-logo-height: 22px;
     --chat-footer-border-radius: 16px;
     --chat-footer-background-color: #f6f7fb;
 

package/src/assets/js/chat21client.js

@@ -24,12 +24,13 @@ class Chat21Client {
         this.reconnections = 0 // just to check how many reconnections
         this.client_id = this.uuidv4();
         this.log = options.log ? true : false;
+       
         if (options && options.MQTTendpoint) {
             if (options.MQTTendpoint.startsWith('/')) {
                 if (this.log) {
                     console.log("MQTTendpoint relative url");
                 }
-                var loc = window.location, new_uri;
+                var loc = window.parent.location, new_uri;
                 if (loc.protocol === "https:") {
                     // new_uri = "wss:";
                     new_uri = "mqtt:";
@@ -41,6 +42,7 @@ class Chat21Client {
                 new_uri += "//" + loc.host;
                 // new_uri += loc.pathname + "/to/ws";
                 new_uri += options.MQTTendpoint;
+                console.log('new_uriiiiiii', new_uri, loc, document.location, window.parent)
                 this.endpoint = new_uri
             } else {
                 this.endpoint = options.MQTTendpoint
@@ -987,6 +989,7 @@ class Chat21Client {
         }
         if (this.log) {console.log("starting mqtt connection with LWT on:", this.presence_topic, this.endpoint)}
         // client = mqtt.connect('mqtt://127.0.0.1:15675/ws',options)
+        console.log("starting mqtt connection with LWT on:", this.presence_topic, this.endpoint)
         this.client = mqtt.connect(this.endpoint,options)
         
         this.client.on('connect', // TODO if token is wrong it must reply with an error!

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

@@ -43,6 +43,7 @@ export class Chat21Service {
     }
     if (!this.chatClient) {
       // const { Chat21Client} = await import("../../../assets/js/chat21client");
+      
       this.chatClient = new Chat21Client(this._config);
     } else {
       console.log("Did you try again to create a Chat21Client istance?");