@chat21/chat21-web-widget 5.0.56-rc.3 → 5.0.56-rc.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.56-rc.5
+- added: if hideFooterTextReply is set to true, hide footer input area and display logo
+- added: mobileMarginX and mobileMarginY property to dev page
+- added: root css variable to manage dynamic iframe height
+- changed: minor UI changes in last-messsage and bubble-message components to display trasnsparent background if image/iframe/gif is received/sent
+- bug-fixed: dynamic height in .messagePreview container div modify the height of the entire iframe also when it is open
+
+### 5.0.56-rc.4
+- added: function to manage messagePreview height programatically
+- added: implementation of commands messages inside callout component
+- added: isFirstMessage, isSameSender, isLastMessage, isFirstMessage function to utils-message
+- removed:  margin-block of inner p html tag in chat-text base message component
+- bug-fixed: cannot read trim() of undefined with image text message
+
 ### 5.0.56-rc.3
 - added: widget loading in chatbot-panel.html page
 

package/package.json

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

package/src/app/app.component.html

@@ -104,7 +104,7 @@
   ******* EYE-CATCHER (aka CALLOUT) *********
   *******************************************
   tabindex -> 20 -->
-  <chat-eyeeye-catcher-card *ngIf="g.senderId"
+  <chat-eyeeye-catcher-card *ngIf="g.senderId && !g.isOpenNewMessage"
     (onOpenChat)="onOpenCloseWidget($event)"
     (onCloseEyeCatcherCard)="onCloseEyeCatcherCard($event)">
   </chat-eyeeye-catcher-card> 

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

@@ -92,7 +92,7 @@
     </chat-conversation-attachment-preview>
 
     <!-- FOOTER -->
-    <div id="chat21-footer"  [class.maximize-width]="(g?.singleConversation && hideTextAreaContent) || (isConversationArchived && !g?.allowReopen)">
+    <div id="chat21-footer"  [class.maximize-width]="(g?.singleConversation && hideTextAreaContent) || (isConversationArchived && !g?.allowReopen)" [class.hideFooterReply]="hideFooterTextReply">
         <div *ngIf="showBadgeScroollToBottom" id="chat21-buttonToBottom" (click)="scrollToBottom()">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M24 24H0V0h24v24z"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>
             <div *ngIf="messagesBadgeCount!=0" id="chat21-divBudge" class="c21-divBudge">{{messagesBadgeCount}}</div>
@@ -117,6 +117,7 @@
             [footerMessagePlaceholder]="footerMessagePlaceholder"
             [fileUploadAccept]="appConfigService?.getConfig().fileUploadAccept"
             [dropEvent]="dropEvent"
+            [poweredBy]="g?.poweredBy"
             [stylesMap]="stylesMap"
             [translationMap]="translationMapFooter"
             (onEmojiiPickerShow)="onEmojiiPickerShow($event)"

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

@@ -47,6 +47,10 @@
         padding: 8px 0px;
     }
 
+    &.hideFooterReply{
+        padding: 0px;
+    }
+
     /* button scroll to bottom page */
     #chat21-buttonToBottom {
         display: flex;

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

@@ -28,7 +28,7 @@
                             <!--backgroundColor non viene ancora usato -->
                             <!-- class="messages msg_sent slide-in-right" -->
                             <chat-bubble-message class="messages msg_sent"
-                              [class.no-background]="(isImage(message) || isFrame(message)) && message?.text && message?.textmessage?.text.trim() === '' "  
+                              [class.no-background]="(isImage(message) || isFrame(message)) && ((message?.text && message?.text.trim() === '') || !message?.text)"  
                               [class.emoticon]="isEmojii(message?.text)"
                               [ngStyle]="{'background': stylesMap.get('bubbleSentBackground'), 'color': stylesMap.get('bubbleSentTextColor')}"
                               [ngClass]="{'button-in-msg' : message?.metadata && message?.metadata?.button}"
@@ -63,7 +63,7 @@
                             <!-- [ngClass]="{'slide-in-left': !isFirstMessage(message?.sender, i)}"  -->
                             <chat-bubble-message class="messages msg_receive"
                               [ngClass]="{'slide-in-left': false}"
-                              [class.no-background]="(isImage(message) || isFrame(message)) && message?.text && message?.text.trim() === '' "  
+                              [class.no-background]="(isImage(message) || isFrame(message)) && ((message?.text && message?.text.trim() === '') || !message?.text)"  
                               [class.emoticon]="isEmojii(message?.text)"
                               [style.margin-left]="isSameSender(message?.sender, i)? '50px': null"
                               [ngStyle]="{'background': stylesMap.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor')}"

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

@@ -148,42 +148,7 @@
                     // padding: 6px 6px 6px 6px;
                     // box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
                     // -webkit-animation: heartbeat 1.5s ease-in-out both;
-                    // animation: heartbeat 1.5s ease-in-out both;
-
-                    p {
-                        font-size: 1.4em;
-                        margin: 0;
-                        padding: 14px;
-                        font-style: normal;
-                        letter-spacing: normal;
-                        font-stretch: normal;
-                        font-variant: normal;
-                        font-weight: 300;
-                        overflow: hidden;
-                    }
-                    img {
-                        border-radius: 8px;
-                        padding: 3px;
-                        margin-bottom: 0px;
-                        max-width: calc(100% - 6px);
-                        width: auto;
-                        height: auto;
-                        object-fit: cover;
-                    }
-                    .message_innerhtml {
-                        margin: 0px;
-                        // padding: 0px 14px;
-                        &.marked{
-                            padding:8px;
-                            margin-block-start: -1em!important;
-                            margin-block-end: -1em!important;
-                        }
-                        
-                        .text-message {
-                            padding-top: 14px;
-                        }
-                    }
-                    
+                    // animation: heartbeat 1.5s ease-in-out both;        
                 }
 
                 .base_info {

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

@@ -6,7 +6,7 @@ import { UploadService } from 'src/chat21-core/providers/abstract/upload.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { MESSAGE_TYPE_INFO, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
 import { isPopupUrl, popupUrl } from 'src/chat21-core/utils/utils';
-import { isEmojii, isFrame, isImage, isInfo, isMine, messageType } from 'src/chat21-core/utils/utils-message';
+import { isEmojii, isFirstMessage, isFrame, isImage, isInfo, isLastMessage, isMine, isSameSender, messageType } from 'src/chat21-core/utils/utils-message';
 
 @Component({
   selector: 'chat-conversation-content',
@@ -198,27 +198,31 @@ export class ConversationContentComponent implements OnInit {
 
   // ========= END:: functions scroll position ======= //
   isLastMessage(idMessage: string):boolean {
-    if (idMessage === this.messages[this.messages.length - 1].uid) {
-      return true;
-    }
-    return false;
+    return isLastMessage(this.messages, idMessage)
+    // if (idMessage === this.messages[this.messages.length - 1].uid) {
+    //   return true;
+    // }
+    // return false;
   }
 
   isSameSender(senderId, index):boolean{
-    if(senderId && this.messages[index - 1] && (senderId === this.messages[index - 1].sender)){
-      return true;
-    }
-    return false;
+    return isSameSender(this.messages, senderId, index)
+    // if(senderId && this.messages[index - 1] && (senderId === this.messages[index - 1].sender)){
+    //   return true;
+    // }
+    // return false;
   }
 
 
   isFirstMessage(senderId, index):boolean{
-    if(senderId && index == 0 && this.messages[index] && (this.messages[index] !== senderId)){
-      return true;
-    }
-    return false;
+    return isFirstMessage(this.messages, senderId, index)
+    // if(senderId && index == 0 && this.messages[index] && (this.messages[index] !== senderId)){
+    //   return true;
+    // }
+    // return false;
   }
 
+
   hideOutsideElements(){
     this.onMenuOptionShow.emit(false)
     this.onEmojiiPickerShow.emit(false)

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

@@ -18,7 +18,11 @@
     </button>
 </div>
 
-<div class="visible-text-area"  *ngIf="!hideTextAreaContent" [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
+<div id="hiddenFooter" *ngIf="hideTextReply && !hideTextAreaContent" class="fade-in-bottom">
+    <div tabindex="-1" class="c21-powered-by" [innerHTML]="poweredBy"></div>
+</div>
+
+<div class="visible-text-area"  *ngIf="!hideTextAreaContent && !hideTextReply" [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
     <!-- isFilePendingToUpload || -->
   <textarea 
     [attr.disabled] = "(hideTextReply)? true : null"
@@ -40,7 +44,7 @@
 
 </div>
 <!--   -->
-<div #div_attached  *ngIf="!hideTextAreaContent">
+<div #div_attached  *ngIf="!hideTextAreaContent && !hideTextReply">
     <!-- ICON ATTACHMENT -->
     <label *ngIf="showAttachmentButton == true" tabindex="1502" aria-label="allegati" for="chat21-file" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-start-upload-doc">
         <span class="v-align-center">

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

@@ -251,6 +251,56 @@ textarea:active{
 
 }
 
+
+#hiddenFooter{
+    .c21-powered-by {
+        height: 40px;
+        text-align: center;
+        padding: 0;
+        // margin: 5px 0;
+        // position: absolute;
+        color: var(--gray);
+        // top: 0;
+        // left: 20px; //60px;
+        // right: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        &::ng-deep a {
+            text-decoration: none;
+            cursor: pointer;
+            display: inline-block;
+            color: var(--gray);
+            font-size: 1.1em;
+            font-weight: 500;
+            line-height: 22px;
+
+            font-family: Mulish, sans-serif;
+            letter-spacing: -0.24px;
+            -webkit-font-smoothing: antialiased;
+
+            span {
+                display: inline-block;
+                position: relative;
+                top: 2px;
+            }
+
+            img {
+                width: 80px; //60px;
+                height: auto;
+                max-height: 40px;
+                position: relative;
+                vertical-align: middle;
+                object-fit: contain;
+            }
+        }
+        b{
+            font-weight: bolder;
+        }
+    }
+}
+
 .fade-in-bottom {
     -webkit-animation: fade-in-bottom 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 0.0s;
     animation: fade-in-bottom 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 0.0s;

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

@@ -35,9 +35,10 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   @Input() isEmojiiPickerShow: boolean;
   @Input() footerMessagePlaceholder: string;
   @Input() fileUploadAccept: string;
+  @Input() dropEvent: Event;
+  @Input() poweredBy: string;
   @Input() stylesMap: Map<string, string>
   @Input() translationMap: Map< string, string>;
-  @Input() dropEvent: Event;
   @Output() onEmojiiPickerShow = new EventEmitter<boolean>();
   @Output() onBeforeMessageSent = new EventEmitter();
   @Output() onAfterSendMessage = new EventEmitter<MessageModel>();

package/src/app/component/eyeeye-catcher-card/eyeeye-catcher-card.component.html

@@ -1,6 +1,6 @@
 
 <!-- ******* EYE-CATCHER CARD  - DISPLAYED ONLY IS-MOBILE IS FALSE ******** -->
-<div *ngIf="!g.isOpenNewMessage" class="eye-catcher-card scale-in-center"
+<div class="eye-catcher-card scale-in-center"
     [class.mobile]="g.isMobile"
     [ngClass]="{'c21-align-left' : g.align === 'left', 'c21-align-right' : g.align !== 'left'}"
     [ngStyle]="{ 'display':g.displayEyeCatcherCard,  'bottom': g.marginY+'px', 'left':(g.align==='left')?g.marginX+'px':'', 'right':(g.align==='right')?g.marginX+'px':'' }">

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

@@ -1,94 +1,70 @@
-<div *ngIf="conversation && g.isOpenNewMessage" id="messagePreview" > 
-  <!-- message recipient:: -->
-
-  <div class="headerPreviewMessage">
-
-    <div class="boxButtons">
-      
-      <div role="button" tabindex="0" class="buttonMore" (click)="openConversationByID(conversation)">
-        <span>View more</span>
+<div id="messagePreview" *ngIf="g.isOpenNewMessage">
+  <div *ngFor="let message of messages; let i = index; first as isFirst; let last=last" class="message-wrp" #message_wrp> 
+    <!-- message recipient:: -->
+  
+    <div class="headerPreviewMessage" *ngIf="isFirst">
+  
+      <div class="boxButtons">
+        
+        <!-- <div role="button" tabindex="0" class="buttonMore" (click)="openConversationByID(conversation)">
+          <span>View more</span>
+        </div> -->
+  
+        <div aria-label="Dismiss" role="button" tabindex="0" class="buttonClose" (click)="closeMessagePreview()">
+          <span>
+            <svg aria-labelledby="altIconTitle" height="20px" role="img" viewBox="0 0 24 24" width="20px" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(255, 255, 255);">
+              <path d="M0 0h24v24H0V0z" fill="none"></path>
+              <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 12 19 6.41z"></path>
+            </svg>
+          </span>
+        </div>
+  
       </div>
-
-      <div aria-label="Dismiss" role="button" tabindex="0" class="buttonClose" (click)="closeMessagePreview()">
-        <span>
-          <svg aria-labelledby="altIconTitle" height="20px" role="img" viewBox="0 0 24 24" width="20px" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(255, 255, 255);">
-            <path d="M0 0h24v24H0V0z" fill="none"></path>
-            <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 12 19 6.41z"></path>
-          </svg>
-        </span>
-      </div>
-
+  
     </div>
-
-</div>
-
-
-<div>
-    <!-- <div role="messaggio" class="c21-text message_sender_fullname">{{conversation.sender_fullname}}</div> -->
-    <!-- <img *ngIf="conversation.type == 'image' && conversation.metadata" class="message-content message-content-image"
-        [src]="conversation.metadata.src" [width]="getSizeImg(conversation).width"
-        [height]="getSizeImg(conversation).height" /> -->
-      
-    
-    <div class="previewNewMessagge msg_container" (click)="openConversationByID(conversation)">
-
-      <!-- <div *ngIf="isImage(conversation)">
-        <chat-image 
-          [metadata]="fileSelected"
-          [width]="fileSelected?.width"
-          [height]="fileSelected?.height">
-        </chat-image>
+  
+  
+    <div class="container">
+
+      <div class="previewNewMessagge" (click)="openConversationByID(conversation)"
+        [class.left-indicator]="isFirst && (!isImage(message) || isFrame(message))" 
+        [class.no-background]="(isImage(message) || isFrame(message)) && message?.text?.trim() === ''">
+  
+        <chat-bubble-message class="messages no-background"
+          [class.emoticon]="isEmojii(message?.text)"
+          [ngClass]="{'button-in-msg' : message?.metadata && message?.metadata?.button}"
+          [message]="message"
+          [isSameSender]="isSameSender(message?.sender, i)"
+          [fontColor]="stylesMap.get('bubbleReceivedTextColor')"
+          [fontSize]="stylesMap.get('fontSize')"
+          [fontFamily]="stylesMap.get('fontFamily')"
+          [stylesMap]="stylesMap">
+        </chat-bubble-message>
+  
+        <div class="c21-icon-avatar" *ngIf="isFirst">
+          <div class="c21-avatar-image profile_image">
+            <chat-avatar-image class="slide-in-left"  
+              [senderID]="message?.sender"
+              [senderFullname]="message?.sender_fullname"
+              [baseLocation]="baseLocation">
+            </chat-avatar-image>
+          </div> 
+        </div>
+  
       </div>
-
-      <div *ngIf="conversation.type == 'text'" class="c21-box-text">
-        <chat-text
-          [text]="conversation?.last_message_text"
-          [fontSize]="stylesMap?.get('fontSize')"
-          [fontFamily]="stylesMap?.get('fontFamily')">
-        </chat-text>
-      </div> -->
-
-      <chat-bubble-message class="messages no-background"
-        [class.emoticon]="isEmojii(message?.text)"
-        [ngClass]="{'button-in-msg' : message?.metadata && message?.metadata?.button}"
-        [message]="message"
-        [fontColor]="stylesMap.get('bubbleReceivedTextColor')"
-        [fontSize]="stylesMap.get('fontSize')"
-        [fontFamily]="stylesMap.get('fontFamily')"
-        [stylesMap]="stylesMap">
-      </chat-bubble-message>
-
-      <div class="c21-icon-avatar">
-        <div class="c21-avatar-image profile_image">
-          <chat-avatar-image class="slide-in-left"  
-            [senderID]="message?.sender"
-            [senderFullname]="message?.sender_fullname"
-            [baseLocation]="baseLocation">
-          </chat-avatar-image>
-        </div> 
+  
+      <div *ngIf="message?.attributes && message?.attributes?.attachment && last" class="conversations-buttons">
+        <chat-message-attachment 
+          style="height: 100%; display: block;"
+          [message]="message"
+          [isLastMessage] = "true"
+          [limit]="3"
+          [stylesMap]="stylesMap"
+          (onAttachmentButtonClicked)="onAttachmentButtonClicked($event)">
+        </chat-message-attachment>
       </div>
-
-    </div>
-
-    <div *ngIf="message.attributes && message.attributes.attachment " class="conversations-buttons">
-      <chat-message-attachment 
-        style="height: 100%; display: block;"
-        [message]="message"
-        [isLastMessage] = "true"
-        [limit]="3"
-        [stylesMap]="stylesMap"
-        (onAttachmentButtonClicked)="onAttachmentButtonClicked($event)">
-      </chat-message-attachment>
+     
     </div>
-
-
-    
-
-    <!-- <div class="c21-time c21-text">
-        <time *ngIf="conversation.timestamp !== '{.sv: timestamp}'" >{{conversation.timestamp  | amTimeAgo}} </time>
-    </div> -->
-
-    
-</div>
-
+  
+  </div>
 </div>

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

@@ -9,6 +9,15 @@
         min-height: 32px;
     }  
 }
+:host .previewNewMessagge ::ng-deep > chat-bubble-message > #bubble-message > div > div > chat-text {
+    p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+    }
+}
 
 :host .slide-in-left ::ng-deep > chat-message-attachment > #buttons-in-message > span  > chat-text-button-attachment{
     
@@ -19,36 +28,15 @@
 }
 
 #messagePreview {
-    // position: relative;
-    // width: 320px;
-    // /* bottom: 90; */
-    // max-height: 200px;
-    // height: 200px; //100%;
-    // padding: 0px 10px 10px;
-    // background-color: transparent;
-
-    // font-family: "Helvetica Neue", "Apple Color Emoji", Helvetica, Arial, sans-serif;
-    // font-size: 100%;
-    // font-style: normal;
-    // letter-spacing: normal;
-    // font-stretch: normal;
-    // font-weight: normal;
-    // text-align: left;
-    // text-align-last: initial;
-    // text-indent: 0px;
-    // text-shadow: none;
-    // text-transform: none;
-    // box-sizing: content-box;
-    // -webkit-font-smoothing: antialiased;
-    // line-height: 1;
-    // font-variant: normal;
-
     position: fixed;
     // right: 5px;
     bottom: 90px;
     // max-height: calc(100% - 75px);
     width: 375px;
     max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
 }
 
 #messagePreview:hover {
@@ -59,13 +47,21 @@
     }
 }
 
+.message-wrp{
+    animation: fade-in-dw-up 0.3s ease-in 0.0s;
+}
+
+.container{
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
 
 .messages {
-    border-radius: var(--border-radius-bubble-message);
     padding: 0;
     word-wrap: break-word;
 
-    max-height: 160px;
+    // max-height: 160px;
     display: flex;
     overflow-y: auto;
     // padding: 14px;
@@ -109,70 +105,37 @@
     position: relative;
     box-sizing: border-box;
     background-color: rgb(255, 255, 255);
-    box-shadow: rgba(0, 18, 46, 0.16) 0px 8px 12px 0px;
+    box-shadow: rgba(35, 47, 53, 0.09) 0px 2px 8px 0px;
     clear: both;
     margin-left: 45px;
     margin-right: 16px;
-    margin-bottom: 8px;
-    border-radius: 12px 12px 12px 0px;
+    border-radius: 12px 12px 12px 12px;
     padding: 5px;
 }
 
-.previewNewMessagge::after {
-    content: "";
-    position: absolute;
-    bottom: 0px;
-    left: -5px;
-    width: 0px;
-    height: 0px;
-    border-style: solid;
-    border-width: 0px 0px 13px 5px;
-    border-color: transparent transparent white;
-}
-    
-.c21-text.message_sender_fullname {
-    font-size: 13px;
-    padding: 0px 10px;
-    margin: 4px 0px;
-    clear: both;
-    color: rgb(104, 104, 104);
+.previewNewMessagge.no-background{
+    background-color: transparent;
+    box-shadow: unset;
 }
 
-.c21-box-text {
-    max-height: 110px;
-    height: 100%;
-    width: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    border-radius: 12px 12px 12px 0px;
-
-    &::-webkit-scrollbar {
-        width: 6px;
-        background-color: #00000000!important;
-    } 
-
-}
+.left-indicator{
 
-.c21-box-text:hover {
-    &::-webkit-scrollbar-track {
-        background-color: #f9f9f9 !important;
-    }
+    border-radius: 12px 12px 12px 0px;
 
-    &::-webkit-scrollbar-thumb {
-        background: #d3d6dc; 
+    &::after {
+        content: "";
+        position: absolute;
+        bottom: 0px;
+        left: -5px;
+        width: 0px;
+        height: 0px;
+        border-style: solid;
+        border-width: 0px 0px 13px 5px;
+        border-color: transparent transparent white;
+        
     }
 }
-
-
-.c21-text {
-    font-size: 14px;
-    color: black;
-    padding: 0px 10px; 
-    margin: 0px 0px;// margin: 4 0;
-    line-height: 1.4;
-    word-break: break-word;
-}
-
+    
 .overflow4Lines {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -181,19 +144,6 @@
     -webkit-box-orient: vertical;
 }
 
-.c21-img{
-    margin-left: 5px;
-    width: 120px;
-    // height: 100px;
-}
-
-.c21-text.c21-time {
-    font-size: 13px;
-    padding: 0px 10px;
-    clear: both;
-    color: rgb(115, 115, 118);
-}
-
 .c21-link {
     text-decoration: underline; 
     padding: 8px; 
@@ -224,11 +174,17 @@
     height: 100%;
 }
 
+
+//__________START: HEADER ____________
 .headerPreviewMessage {
     margin-right: 16px;
     position: relative;
-    height: 40;// height: 50;
-    margin: 10px 0px 0px 50px;
+    // height: 40;// height: 50;
+    // margin: 10px 0px 0px 50px;
+    bottom: -20px;
+    right: -15px;
+    top: -15px;
+    z-index: 1;
 }
 
 .boxButtons {
@@ -275,6 +231,7 @@
 .buttonClose span svg {
     padding: 6px;
 }
+//__________END: HEADER ____________
 
 #new_message {
     position: absolute;

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

@@ -1,4 +1,5 @@
-import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
+import { style } from '@angular/animations';
+import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, OnInit, Output, SimpleChanges, ElementRef, QueryList, ViewChildren } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { MessageModel } from './../../../chat21-core/models/message';
 import { EventsService } from './../../providers/events.service';
@@ -11,7 +12,7 @@ import { MIN_WIDTH_IMAGES } from 'src/app/utils/constants';
 import { ConversationModel } from 'src/chat21-core/models/conversation';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { conversationToMessage, isEmojii } from 'src/chat21-core/utils/utils-message';
+import { commandToMessage, conversationToMessage, isEmojii, isFrame, isImage, isSameSender } from 'src/chat21-core/utils/utils-message';
 
 
 @Component({
@@ -21,6 +22,8 @@ import { conversationToMessage, isEmojii } from 'src/chat21-core/utils/utils-mes
 })
 export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
 
+  @ViewChildren("message_wrp") messageListWRP: QueryList<ElementRef>;
+
   @Input() conversation: ConversationModel
   @Input() baseLocation: string;
   @Input() stylesMap: Map<string, string>;
@@ -31,14 +34,17 @@ export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
   // ========= end:: sottoscrizioni ======= //
 
   isEmojii = isEmojii;
-  
+  isImage = isImage;
+  isFrame = isFrame;
+
   private logger: LoggerService = LoggerInstance.getInstance();
   public fileSelected: any;
-  public message: MessageModel;
+  public messages: MessageModel[] = [];
   
   constructor(
     private events: EventsService,
     public g: Globals,
+    private el: ElementRef
     // public conversationsService: ConversationsService
   ) { }
 
@@ -53,8 +59,14 @@ export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
   ngOnChanges(changes: SimpleChanges) {
     this.logger.debug('[LASTMESSAGE] onChanges', changes)
     if(this.conversation){
-      this.message = conversationToMessage(this.conversation, this.g.senderId)
-      console.log('messsageeeeeeeee', this.message)
+
+      if(this.conversation.attributes && this.conversation.attributes.commands){
+        this.addCommandMessage(this.conversation)
+      }else{
+        this.messages.push(conversationToMessage(this.conversation, this.g.senderId))
+        this.manageIframeHeight();
+      }
+      console.log('messsageeeeeeeee', this.messages)
       // if(isImage(this.conversation)){
       //   this.fileSelected = Object.assign({}, this.conversation.metadata)
       //   this.fileSelected = Object.assign(this.fileSelected, this.getMetadataSize(this.fileSelected))
@@ -103,6 +115,51 @@ export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
 
+  addCommandMessage(conversation: ConversationModel){
+    const that = this;
+    const commands = conversation.attributes.commands;
+    let i=0;
+    function execute(command){
+      if(command.type === "message"){
+        that.messages.push(commandToMessage(command.message,that.conversation, that.g.senderId))
+        that.manageIframeHeight()
+        i += 1
+        if (i < commands.length) {
+            execute(commands[i])
+        }
+        else {
+            that.logger.debug('[FIREBASEConversationHandlerSERVICE] addCommandMessage --> last command executed (wait), exit') 
+        }
+      }else if(command.type === "wait"){
+        setTimeout(function() {
+          i += 1
+          if (i < commands.length) {
+              execute(commands[i])
+          }
+          else {
+              that.logger.debug('[FIREBASEConversationHandlerSERVICE] addCommandMessage --> last command executed (send message), exit') 
+          }
+        },command.time)
+      }
+    }
+    execute(commands[0])
+
+  }
+
+  private manageIframeHeight(){
+    setTimeout(() => {
+      if(this.messageListWRP.get(this.messages.length-1)){
+        let height = getComputedStyle(this.messageListWRP.get(this.messages.length-1).nativeElement).height
+        this.g.setWidgetPreviewContainerSize(0, +height.substring(0, height.length-2))
+      }
+    }, 50);
+  }
+  isSameSender(senderId: string, index: number){
+    return isSameSender(this.messages, senderId, index)
+  }
+
+
+
 
 // ========= begin:: event emitter function ============//
 
@@ -136,6 +193,7 @@ export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
   ngOnDestroy() {
     this.conversation = null;
     this.g.isOpenNewMessage = false;
+    this.messages = []
     // this.logger.debug('4 isOpenNewMessage: ' + this.g.isOpenNewMessage);
     //this.unsubscribe();
   }

package/src/app/component/message/bubble-message/bubble-message.component.scss

@@ -11,17 +11,6 @@
     // -webkit-animation: heartbeat 1.5s ease-in-out both;
     // animation: heartbeat 1.5s ease-in-out both;
 
-    // p {
-    //     font-size: 1.4em;
-    //     margin: 0;
-    //     padding: 14px;
-    //     font-style: normal;
-    //     letter-spacing: normal;
-    //     font-stretch: normal;
-    //     font-variant: normal;
-    //     font-weight: 300;
-    //     overflow: hidden;
-    // }
 
     .message_sender_fullname{
         font-size: 12px;
@@ -37,18 +26,4 @@
         height: auto;
         object-fit: cover;
     }
-    .message_innerhtml {
-        margin: 0px;
-        // padding: 0px 14px;
-        &.marked{
-            padding:8px;
-            margin-block-start: -1em!important;
-            margin-block-end: -1em!important;
-        }
-        
-        .text-message {
-            padding-top: 14px;
-        }
-    }
-    
 }

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

@@ -5,8 +5,8 @@
     // padding: 0px 14px;
     &.marked{
         padding:8px;
-        margin-block-start: -1em!important;
-        margin-block-end: -1em!important;
+        margin-block-start: 0em!important;
+        margin-block-end: 0em!important;
     }
     
     .text-message {
@@ -25,8 +25,14 @@ p {
     font-variant: normal;
     font-weight: 300;
     overflow: hidden;
+    
 }
 
 p ::ng-deep a {
     word-break: break-word;
+}
+
+p ::ng-deep p{
+    margin-block-end: 0em;
+    margin-block-start: 0em
 }

package/src/app/utils/globals.ts

@@ -1,3 +1,4 @@
+import { style } from '@angular/animations';
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { environment } from '../../environments/environment';
@@ -586,6 +587,16 @@ export class Globals {
     }
   }
 
+  setWidgetPreviewContainerSize(width: number, height: number){
+    const divTiledeskWidget = this.windowContext.document.querySelector('.messagePreview');
+    
+    let headerPadding = 10
+    let style = getComputedStyle(divTiledeskWidget)
+    // console.log('computedddd', style.getPropertyValue('--messagePreviewHeight'))
+    let currentHeight = +style.getPropertyValue('--messagePreviewHeight').substring(0, style.getPropertyValue('--messagePreviewHeight').length -2)
+    this.windowContext.document.documentElement.style.setProperty('--messagePreviewHeight', currentHeight + height + headerPadding + 'px');
+  }
+
 
   /**
    *

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

@@ -916,6 +916,22 @@
             window.Tiledesk('restart')
         }
 
+        function onClickMobileMarginX(){
+            let text = document.getElementById('mobileMarginX').value
+            text === ""? text= '100px': text
+            window.tiledeskSettings['mobileMarginX'] = text
+            console.log('onClickMobileMarginX:',window.tiledeskSettings);
+            window.Tiledesk('restart')
+        }
+
+        function onClickMobileMarginY(){
+            let text = document.getElementById('mobileMarginY').value
+            text === ""? text= '50px' : text //set default value if user not write a value
+            window.tiledeskSettings['mobileMarginY'] = text
+            console.log('onClickMobileMarginY:',window.tiledeskSettings);
+            window.Tiledesk('restart')
+        }
+
         function onClickAutoStart(){
             let status = document.querySelector('input[name="autoStart"]:checked').value
             window.tiledeskSettings['autoStart'] = stringToBoolean(status)
@@ -1816,6 +1832,24 @@
                                 <button class="btn btn-light" onclick="onClickMarginY()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
                             </div>
                         </div>
+                        <div class="row">
+                            <div class="col-md-5 formElement"><span><em><strong>mobileMarginX</strong></em></span></div>
+                            <div class="col-md-5 formElement">
+                                <input class="form-control col-sm-2" type="text" id="mobileMarginX" name="mobileMarginX" placeholder="Ex. 100px, 1em">
+                            </div>
+                            <div class="col-md-2">
+                                <button class="btn btn-light" onclick="onClickMobileMarginX()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-md-5 formElement"><span><em><strong>mobileMarginY</strong></em></span></div>
+                            <div class="col-md-5 formElement">
+                                <input class="form-control col-sm-2" type="text" id="mobileMarginY" name="mobileMarginY" placeholder="Ex. 100px, 1em">
+                            </div>
+                            <div class="col-md-2 ">
+                                <button class="btn btn-light" onclick="onClickMobileMarginY()">Test this setting <i class="fa fa-magic" aria-hidden="true"></i></button>
+                            </div>
+                        </div>
                         <div class="row">
                             <div class="col-md-5 formElement"><span><em><strong>autoStart</strong></em></span></div>
                             <div class="col-md-5">

package/src/chat21-core/providers/firebase/firebase-conversation-handler.ts

@@ -299,7 +299,7 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
     private messageGenerate(childSnapshot: any) {
         const msg: MessageModel = childSnapshot.val();        
         msg.uid = childSnapshot.key;
-        msg.text = msg.text.trim() //remove black msg with only spaces
+        if(msg.text) msg.text = msg.text.trim(); //remove black msg with only spaces
         // controllo fatto per i gruppi da rifattorizzare
         if (!msg.sender_fullname || msg.sender_fullname === 'undefined') {
             msg.sender_fullname = msg.sender;

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

@@ -297,7 +297,7 @@ export class MQTTConversationHandler extends ConversationHandlerService {
         this.logger.log("[MQTTConversationHandlerSERVICE] childSnapshot >" + JSON.stringify(childSnapshot));
         const msg = childSnapshot;
         // msg.uid = childSnapshot.key;
-        msg.text = msg.text.trim() //remove black msg with only spaces
+        if(msg.text) msg.text = msg.text.trim(); //remove black msg with only spaces
         // controllo fatto per i gruppi da rifattorizzare
         if (!msg.sender_fullname || msg.sender_fullname === 'undefined') {
             msg.sender_fullname = msg.sender;

package/src/chat21-core/utils/utils-message.ts

@@ -1,4 +1,3 @@
-import { convertMessage } from 'src/app/utils/utils';
 import { MessageModel } from './../models/message';
 import { ConversationModel } from './../models/conversation';
 import { v4 as uuidv4 } from 'uuid';
@@ -11,28 +10,12 @@ import {
     TYPE_SUPPORT_GROUP
 } from '../../chat21-core/utils/constants';
 
-/**  */
-export function isFirstMessage(i: number) {
-    if ( i > 0 ) {
-      try {
-        const message = this.messages[i];
-        const prevMessage = this.messages[ i - 1 ];
-        if (prevMessage.sender !== message.sender || message.headerDate || (prevMessage && this.isInfo(prevMessage))) {
-          return true;
-        }
-        return false;
-      } catch (err) {
-        console.log('error: ', err);
-      }
-    }
-}
-
 /** */
 export function isImage(message: any) {
-    if (message && message.type && message.metadata && message.metadata.src && message.type === 'image') {
-      return true;
-    }
-    return false;
+  if (message && message.type && message.metadata && message.metadata.src && message.type === 'image') {
+    return true;
+  }
+  return false;
 }
 
 export function isFrame(message: any) {
@@ -85,6 +68,28 @@ export function isSender(sender: string, currentUserId: string) {
   }
 }
 
+export function isSameSender(messages, senderId, index):boolean{
+  if(senderId && messages[index - 1] && (senderId === messages[index - 1].sender)){
+    return true;
+  }
+  return false;
+}
+
+export function isLastMessage(messages, idMessage):boolean {
+  if (idMessage === messages[messages.length - 1].uid) {
+    return true;
+  }
+  return false;
+}
+
+export function isFirstMessage(messages, senderId, index):boolean{
+  if(senderId && index == 0 && messages[index] && (messages[index] !== senderId)){
+    return true;
+  }
+  return false;
+}
+
+
 /** */
 export function messageType(msgType: string, message: any) {
 
@@ -194,6 +199,18 @@ export function hideInfoMessage(msg, infoMessageKeyEnabled): boolean{
   return true
 }
 
+export function getProjectIdSelectedConversation(conversationWith: string): string{
+  const conversationWith_segments = conversationWith.split('-')
+  // Removes the last element of the array if is = to the separator
+  if (conversationWith_segments[conversationWith_segments.length - 1] === '') {
+    conversationWith_segments.pop()
+  }
+  let projectId = ''
+  if (conversationWith_segments.length >= 4) {
+    projectId = conversationWith_segments[2]
+  }
+  return projectId
+}
 
 export function conversationToMessage(conversation: ConversationModel, currentUserId: string): MessageModel{
   let message: any = {}
@@ -213,3 +230,22 @@ export function conversationToMessage(conversation: ConversationModel, currentUs
 
   return message as MessageModel
 }
+
+export function commandToMessage(msg: MessageModel, conversation: ConversationModel, currentUserId: string): MessageModel{
+  let message: any = {}
+  message.uid = conversation['message_id']? conversation['message_id'] : uuidv4()
+  message.text = msg.text? msg.text.trim(): '';
+  message.sender = conversation.sender
+  message.sender_fullname = conversation.sender_fullname
+  message.recipient = conversation.recipient
+  message.recipient_fullname = conversation.recipient_fullname
+  message.status = +conversation.status
+  message.timestamp = conversation.timestamp
+  message.metadata = msg['metadata']
+  message.channel_type = conversation.channel_type
+  message.type = msg.type
+  message.isSender = isSender(message.sender, currentUserId)
+  message.attributes = { ...conversation.attributes, ...msg.attributes}
+
+  return message as MessageModel
+}

package/src/iframe-style.css

@@ -1,3 +1,7 @@
+:root{
+    --messagePreviewHeight: 100px;
+}
+
 #tiledesk-container {
     position: fixed; 
     right: 0px;
@@ -69,8 +73,8 @@
     max-width: 400px;
 }
 #tiledesk-container.closed #tiledeskdiv.messagePreview {
-    width: 375px; /*340px*/
-    height: 440px; /*300px*/
+    width: 340px; /*340px*/
+    height: var(--messagePreviewHeight); /*300px*/
     min-width: 340px;
 }
 

package/src/launch.js

@@ -152,7 +152,19 @@ function loadIframe(tiledeskScriptBaseLocation) {
           var httpRequest = createCORSRequest('POST', event_data.detail.appConfigs.apiUrl+event_data.detail.default_settings.projectid+'/events',true); //set async to false because loadParams must return when the get is complete
           httpRequest.setRequestHeader('Content-type', 'application/json');
           httpRequest.setRequestHeader('Authorization',tiledeskToken);
-          httpRequest.send(JSON.stringify({"name":"new_conversation","attributes": {"request_id":event_data.detail.newConvId, "department": event_data.detail.global.departmentSelected.id, "participants": event_data.detail.global.participants, "language": event_data.detail.global.lang, "subtype":"info", "fullname":event_data.detail.global.attributes.userFullname, "email":event_data.detail.global.attributes.userEmail, "attributes":event_data.detail.global.attributes}}));
+          httpRequest.send(JSON.stringify({ "name":"new_conversation",
+                                            "attributes": {
+                                              "request_id":event_data.detail.newConvId, 
+                                              "department": event_data.detail.global.departmentSelected.id, 
+                                              "participants": event_data.detail.global.participants, 
+                                              "language": event_data.detail.global.lang, 
+                                              "subtype":"info", 
+                                              "fullname":event_data.detail.global.attributes.userFullname, 
+                                              "email":event_data.detail.global.attributes.userEmail, 
+                                              "attributes":event_data.detail.global.attributes
+                                            }
+                                          }
+          ));
         }
     });