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

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # chat21-web-widget ver 5.0
 
+### 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.2",
   "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"
         [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: calc(var(--chat-footer-logo-height) + 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-footer/conversation-footer.component.html

@@ -1,3 +1,10 @@
+<!-- LOGO-->
+<div id="hiddenFooter" *ngIf="!hideTextAreaContent" 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,10 +248,11 @@ textarea:active{
     // position: absolute;
     bottom: 100%;
     width: 100%;
+    height: 22px;
     display: flex;
     align-items: center;
     justify-content: center;
-    position: absolute;
+    // position: absolute;
     box-shadow: inset 0px -22px 16px -15px rgba(0,0,0,0.1);
     &.hideTextReply{
         height: var(--chat-footer-height);

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/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;