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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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
+- added: presence manger on mqtt service
+- changed: new conversation-footer UI
+- removed: fileUploadAccept from envs and template
+
 ### 5.0.56 in PROD
 
 ### 5.0.56-rc.6

package/README.md

@@ -72,7 +72,6 @@ export const environment = {
   remoteTranslationsUrl: 'https://<YOUR_REMOTE_TRANSLATIONS_URL>/',
   chatEngine: "mqtt", // OR YOUR CUSTOM CHAT ENGINE
   updloaEngine: "native", // OR YOUR CUSTOM UPLOAD ENGINE
-  fileUploadAccept:"*/*",
   logLevel: '<YOUR-PREFERRED-LOG-LEVEL-NUMBER>',
   firebaseConfig: {
     apiKey: '123ABC..',
@@ -103,8 +102,6 @@ export const environment = {
 * `logLevel`: The Tiledesk web-widget supports 4 log levels. The order is as follows:
   `Error < Warn < Info < Debug`
 
-* `fileUploadAccept`: The Tiledesk web-widget allows you to manage the type of files that can be uploaded. By default, all file types are accepted.
-
 ### RUN in dev
 
 Run the app with `ng serve`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.56",
+  "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()"
@@ -92,7 +93,8 @@
     </chat-conversation-attachment-preview>
 
     <!-- FOOTER -->
-    <div id="chat21-footer"  [class.maximize-width]="(g?.singleConversation && hideTextAreaContent) || (isConversationArchived && !g?.allowReopen)" [class.hideFooterReply]="hideFooterTextReply">
+    <!-- [class.maximize-width]="(g?.singleConversation && hideTextAreaContent) || (isConversationArchived && !g?.allowReopen)" -->
+    <div id="chat21-footer">
         <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>
@@ -115,7 +117,7 @@
             [isMobile]="g?.isMobile"
             [isEmojiiPickerShow]="isEmojiiPickerShow"
             [footerMessagePlaceholder]="footerMessagePlaceholder"
-            [fileUploadAccept]="appConfigService?.getConfig().fileUploadAccept"
+            [fileUploadAccept]="g?.fileUploadAccept"
             [dropEvent]="dropEvent"
             [poweredBy]="g?.poweredBy"
             [stylesMap]="stylesMap"

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;
@@ -29,6 +34,56 @@
 }
 
 /* ================== CSS chat21-footer ==================== */ 
+
+#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;
+        }
+    }
+}
+
 #chat21-footer {
     position: fixed;
     bottom: 0px;
@@ -36,9 +91,7 @@
     right: 0px;
     margin: 0px;
     // padding: 0;
-    padding: 8px 34px;
-    padding-left: 70px;
-    padding-right: 45px;
+    
     // box-shadow: 0 -1px 0px 0px $trasp-light-gray;
     background: white;
     min-height: 40px;
@@ -55,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,70 +1,71 @@
-<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">
-          <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
-            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"  [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}"/>
-          </svg>
-        </span>
-        <span class="v-align-center c21-label-button">
-          {{translationMap?.get('LABEL_START_NW_CONV')}}
-        </span>  
-        <div class="clear"></div>
-    </button>
-    <button *ngIf="showContinueConversationButton" tabindex="1040"  class="c21-button-primary" (click)="onContinueConversation()" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'border-color': stylesMap.get('themeColor'), 'color': stylesMap?.get('foregroundColor')}">
-        <span class="v-align-center c21-label-button">
-          {{translationMap?.get('CONTINUE')}}
-        </span>  
-        <div class="clear"></div>
-    </button>
-</div>
-
-<div id="hiddenFooter" *ngIf="hideTextReply && !hideTextAreaContent" class="fade-in-bottom">
+<!-- LOGO-->
+<div id="hiddenFooter" *ngIf="!hideTextAreaContent" class="fade-in-bottom" 
+    [class.hideTextReply]="hideTextReply">
     <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"
-    [attr.placeholder] ="(footerMessagePlaceholder)? footerMessagePlaceholder : translationMap?.get('LABEL_PLACEHOLDER')"
-    start-focus-chat21-conversation-component
-    inputTextArea
-    #textbox 
-    tabindex="1501"
-    aria-labelledby="altTextArea"
-    rows="1"
-    id="chat21-main-message-context"
-    class='f21textarea c21-button-clean'
-    [(ngModel)]="textInputTextArea"
-    (ngModelChange)="onTextAreaChange()"
-    (keypress)="onkeypress($event)"
-    (keydown)="onkeydown($event)"
-    (paste)="onPaste($event)">
-  </textarea>
+<!-- TEXTAREA + ICONS: conv active-->
+<div class="textarea-container" *ngIf="!hideTextAreaContent && !hideTextReply">
+    
+    <div class="icons-container">
+        <!-- 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">
+                <svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 28 28" transform="rotate(45)">
+                    <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
+                </svg>
+            </span>
+             <input
+                [attr.disabled] = "(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
+                tabindex="1503" 
+                type="file" 
+                aria-label="seleziona allegato"
+                [accept]="fileUploadAccept"
+                name="chat21-file"
+                id="chat21-file"
+                #chat21_file
+                class="inputfile" 
+                [ngStyle]="{'display': 'block', height:'1px', width:'1px', overflow: 'hidden' }"
+                (change)="detectFiles($event)"/>
+        </label>
+        <!-- ICON EMOJII -->
+        <label tabindex="1504" aria-label="emojii" for="chat21-emojii" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-emoticon-picker" (click)="onEmojiiPickerClicked()">
+            <span class="v-align-center">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 28 28" >
+                    <path d="M0 0h24v24H0V0z" fill="none"/>
+                    <circle cx="15.5" cy="9.5" r="1.5"/>
+                    <circle cx="8.5" cy="9.5" r="1.5"/>
+                    <path d="M12 16c-1.48 0-2.75-.81-3.45-2H6.88c.8 2.05 2.79 3.5 5.12 3.5s4.32-1.45 5.12-3.5h-1.67c-.7 1.19-1.97 2-3.45 2zm-.01-14C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
+                </svg>
+            </span>
+        </label>
+    </div>
+
+
+
+
+    <div class="visible-text-area"  [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
+        <!-- isFilePendingToUpload || -->
+      <textarea 
+        [attr.disabled] = "(hideTextReply)? true : null"
+        [attr.placeholder] ="(footerMessagePlaceholder)? footerMessagePlaceholder : translationMap?.get('LABEL_PLACEHOLDER')"
+        start-focus-chat21-conversation-component
+        inputTextArea
+        #textbox 
+        tabindex="1501"
+        aria-labelledby="altTextArea"
+        rows="1"
+        id="chat21-main-message-context"
+        class='f21textarea c21-button-clean'
+        [(ngModel)]="textInputTextArea"
+        (ngModelChange)="onTextAreaChange()"
+        (keypress)="onkeypress($event)"
+        (keydown)="onkeydown($event)"
+        (paste)="onPaste($event)">
+      </textarea>
+    
+    </div>
 
-</div>
-<!--   -->
-<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">
-            <svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 28 28" transform="rotate(45)">
-                <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
-            </svg>
-        </span>
-         <input
-            [attr.disabled] = "(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
-            tabindex="1503" 
-            type="file" 
-            aria-label="seleziona allegato"
-            [accept]="fileUploadAccept"
-            name="chat21-file"
-            id="chat21-file"
-            #chat21_file
-            class="inputfile" 
-            [ngStyle]="{'display': 'block', height:'1px', width:'1px', overflow: 'hidden' }"
-            (change)="detectFiles($event)"/>
-    </label>
     <!-- ICON SEND -->
     <div tabindex="-1" class="chat21-textarea-button" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
         <span class="v-align-center">
@@ -73,39 +74,10 @@
             </svg>
         </span>
     </div>
-    <!-- ICON EMOJII -->
-    <label tabindex="1504" aria-label="emojii" for="chat21-emojii" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-emoticon-picker" (click)="onEmojiiPickerClicked()">
-        <span class="v-align-center">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 28 28" >
-                <path d="M0 0h24v24H0V0z" fill="none"/>
-                <circle cx="15.5" cy="9.5" r="1.5"/>
-                <circle cx="8.5" cy="9.5" r="1.5"/>
-                <path d="M12 16c-1.48 0-2.75-.81-3.45-2H6.88c.8 2.05 2.79 3.5 5.12 3.5s4.32-1.45 5.12-3.5h-1.67c-.7 1.19-1.97 2-3.45 2zm-.01-14C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
-            </svg>
-        </span>
-    </label>
 </div>
 
 
-<!-- <div #div_mic *ngIf="g.showMicButton" id="playbutton">
-  <button *ngIf="!isRecording"  tabindex="1502" aria-label="microfono" for="chat21-file" [class.active]="true" class="chat21-textarea-button c21-button-clean" id="chat21-start-mic" (click)="toggleRecording($event)">
-      <span class="v-align-center">
-          <svg aria-label="registra traccia audio" xmlns="http://www.w3.org/2000/svg" [ngStyle]="{'fill': g.themeColor}" width="24" height="24" viewBox="0 0 28 28">
-              <path d="M12,14c1.66,0,3-1.34,3-3V5c0-1.66-1.34-3-3-3S9,3.34,9,5v6C9,12.66,10.34,14,12,14z"/>
-              <path d="M17,11c0,2.76-2.24,5-5,5s-5-2.24-5-5H5c0,3.53,2.61,6.43,6,6.92V21h2v-3.08c3.39-0.49,6-3.39,6-6.92H17z"/>    
-          </svg>
-      </span>
-  </button>
-  <button  *ngIf="isRecording" tabindex="1502" aria-label="stop registrazione" for="chat21-file" [class.active]="true" class="chat21-textarea-button c21-button-clean " id="chat21-start-mic" (click)="toggleRecording($event)" autofocus> 
-      <span class="v-align-center">
-          <svg aria-label="termina registrazione" xmlns="http://www.w3.org/2000/svg" [ngStyle]="{'fill': g.themeColor}" width="24" height="24" viewBox="0 0 28 28">
-              <path d="M0 0h24v24H0z" fill="none"/>
-              <path d="M6 6h12v12H6z"/>
-          </svg>
-      </span>
-  </button>
-</div> -->
-
+<!-- EMOJII PICKER-->
 <div [style.visibility]="isEmojiiPickerShow?'visible':'hidden'"  class="emoji-container">
     <emoji-mart id="emoji-mart"
         *ngIf="showEmojiPicker"
@@ -120,3 +92,24 @@
         (emojiSelect)="addEmoji($event)">
     </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">
+          <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"  [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}"/>
+          </svg>
+        </span>
+        <span class="v-align-center c21-label-button">
+          {{translationMap?.get('LABEL_START_NW_CONV')}}
+        </span>  
+        <div class="clear"></div>
+    </button>
+    <button *ngIf="showContinueConversationButton" tabindex="1040"  class="c21-button-primary" (click)="onContinueConversation()" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'border-color': stylesMap.get('themeColor'), 'color': stylesMap?.get('foregroundColor')}">
+        <span class="v-align-center c21-label-button">
+          {{translationMap?.get('CONTINUE')}}
+        </span>  
+        <div class="clear"></div>
+    </button>
+</div>

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

@@ -1,6 +1,25 @@
 // @import 'src/app/sass/variables';
 
+.textarea-container{
+    // padding: 8px 34px;
+    // padding-left: 70px;
+    // padding-right: 45px;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 10px;
+    justify-content: space-between;
+}
+
+.icons-container{
+    display: flex;
+    align-self: flex-end;
+    margin-left: 8px
+}
+
 .visible-text-area {
+    width: 70%;
+    margin: 8px 0px;
     pointer-events: auto;
     border-radius: var(--chat-footer-border-radius);
     background-color: var(--chat-footer-background-color);
@@ -12,6 +31,26 @@
 .chat21-textarea-button {
     fill: var(--icon-fill-color);
     pointer-events: auto;
+
+    height: var(--chat-footer-height);
+    bottom: 22px;
+    opacity: 0.3;
+    cursor: initial;
+    &.active {
+        opacity: 1;
+        cursor: pointer;
+    }
+}
+
+.chat21-textarea-button span svg:hover {
+    background: rgba(240,240,240,0.4)!important;
+    opacity: 1!important;
+    transition: all .45s ease-in-out 0s!important;
+    -moz-transition: all .45s ease-in-out 0s!important;
+    -webkit-transition: all .45s ease-in-out 0s!important;
+    padding: 0px;
+    margin: 0px;
+    border-radius: 50%;
 }
 
 textarea,
@@ -107,13 +146,6 @@ textarea:active{
     }
 }
 
-textarea,
-textarea:visited,
-textarea:focus,
-textarea:hover,
-textarea:active{
-    all: unset;
-}
 
 #chat21-main-message-context {
     overflow: hidden;
@@ -152,53 +184,14 @@ textarea:active{
     }
 }
 
-.chat21-textarea-button {
-    position: absolute;
-    display: block;
-    height: var(--chat-footer-height);
-    bottom: 22px;
-    opacity: 0.3;
-    cursor: initial;
-    &.active {
-        opacity: 1;
-        cursor: pointer;
-    }
-}
-
-.chat21-textarea-button span svg:hover {
-    background: rgba(240,240,240,0.4)!important;
-    opacity: 1!important;
-    transition: all .45s ease-in-out 0s!important;
-    -moz-transition: all .45s ease-in-out 0s!important;
-    -webkit-transition: all .45s ease-in-out 0s!important;
-    padding: 0px;
-    margin: 0px;
-    border-radius: 50%;
-}
-
-.chat21-back-button{
-    position: absolute;
-    display: block;
-    height: var(--chat-footer-height);
-    cursor: pointer;
-}
-
-.chat21-back-button span svg:hover {
-    background: rgba(240,240,240,0.4)!important;
-    opacity: 1!important;
-    transition: all .45s ease-in-out 0s!important;
-    -moz-transition: all .45s ease-in-out 0s!important;
-    -webkit-transition: all .45s ease-in-out 0s!important;
-    padding: 0px;
-    margin: 0px;
-    border-radius: 50%;
-}
-
-
 #chat21-button-send {
-    right: 8px;
-    bottom: 0;
+    // right: 8px;
+    // bottom: 0;
+    display: flex;
+    align-self: flex-end;
+    margin: 0 8px
 }
+
 #chat21-file{
     left: 8px;
     bottom: 0;
@@ -212,10 +205,8 @@ textarea:active{
     left: 8px;
     bottom: 0;
 }
-#chat21-back-button{
-    left: 8px;
-    bottom: 0;
-}
+
+
 
 #floating-container{
     width: 100%; //not 100% due to vertical scroll bar
@@ -231,6 +222,7 @@ textarea:active{
     box-shadow: none;
     vertical-align: top;
     text-align: center;
+    padding: 8px 0px;
 
     .c21-label-button {
         margin-left: 8px;
@@ -253,10 +245,28 @@ textarea:active{
 
 
 #hiddenFooter{
+    // 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);
+    &.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;
+        // height: 40px;
         text-align: center;
-        padding: 0;
+        // padding: 0;
         // margin: 5px 0;
         // position: absolute;
         color: var(--gray);
@@ -267,6 +277,12 @@ textarea:active{
         align-items: center;
         justify-content: center;
         
+        
+        
+        // background: white;
+        border-radius: 16px;
+        padding: 1px 8px;
+        
         &::ng-deep a {
             text-decoration: none;
             cursor: pointer;
@@ -287,7 +303,7 @@ textarea:active{
             }
 
             img {
-                width: 80px; //60px;
+                width: 60px; //60px;
                 height: auto;
                 max-height: 40px;
                 position: relative;
@@ -311,7 +327,7 @@ textarea:active{
     height: 312px;
     position: absolute;
     overflow: hidden;
-    width: 93%;
+    width: 89%;
     bottom: 100%;
     z-index: 10;
     left: 10px;

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

@@ -150,10 +150,12 @@ export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
     setTimeout(() => {
       if(this.messageListWRP.get(this.messages.length-1)){
         let height = getComputedStyle(this.messageListWRP.get(this.messages.length-1).nativeElement).height
+        // console.log('heightttttt--<', height, this.messages[this.messages.length-1])
         this.g.setWidgetPreviewContainerSize(0, +height.substring(0, height.length-2))
       }
     }, 50);
   }
+
   isSameSender(senderId: string, index: number){
     return isSameSender(this.messages, senderId, index)
   }
@@ -186,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/bubble-message/bubble-message.component.ts

@@ -99,6 +99,8 @@ export class BubbleMessageComponent implements OnInit {
       height: metadata.height
     };
 
+    // console.log('sizeeeeeeee--<', sizeImage, metadata)
+
     if (metadata.width && metadata.width < MAX_WIDTH_IMAGES) {
       if (metadata.width <= 55) {
         const ratio = (metadata['width'] / metadata['height']);

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

@@ -1,8 +1,9 @@
 <!-- [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"
     [ngClass]="{'isLoadingImage': loading}"
     [ngStyle] = "{ 'width': width, 'height': height }"
     [src]="metadata.src" 

package/src/app/providers/global-settings.service.ts

@@ -503,6 +503,9 @@ export class GlobalSettingsService {
                     if (variables.hasOwnProperty('themeColorOpacity')) {
                         globals['themeColorOpacity'] = variables['themeColorOpacity'];
                     }
+                    if (variables.hasOwnProperty('fileUploadAccept')) {
+                        globals['fileUploadAccept'] = variables['fileUploadAccept'];
+                    }
                     
                 }
             }
@@ -1009,7 +1012,12 @@ export class GlobalSettingsService {
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > telegramUsername:: ', TEMP]);
         if (TEMP !== undefined) {
             globals.telegramUsername = TEMP;
-        }       
+        }
+        TEMP = tiledeskSettings['fileUploadAccept'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > telegramUsername:: ', TEMP]);
+        if (TEMP !== undefined) {
+            globals.fileUploadAccept = TEMP;
+        }      
     }
 
     /**
@@ -1272,6 +1280,10 @@ export class GlobalSettingsService {
         if (TEMP !== null) {
             this.globals.participants = TEMP.split(',').map(key => { return key.trim()});
         }
+        TEMP = el.nativeElement.getAttribute('fileUploadAccept');
+        if (TEMP !== null) {
+            this.globals.fileUploadAccept = TEMP;
+        }
         
     }
 
@@ -1709,6 +1721,11 @@ export class GlobalSettingsService {
         if (TEMP) {
             globals.participants = TEMP.split(',').map(key => { return key.trim()});
         }
+
+        TEMP = getParameterByName(windowContext, 'tiledesk_fileUploadAccept');
+        if (TEMP) {
+            globals.fileUploadAccept = TEMP;
+        }
     }
 
     /**

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/app/utils/globals.ts

@@ -211,6 +211,7 @@ export class Globals {
    whatsappNumber: string; // *******  new ********
    messangerPageTitle: string; // *******  new ********
    telegramUsername: string; // *******  new ********
+   fileUploadAccept: string; // *******  new ********
   constructor(
   ) { }
 
@@ -385,6 +386,7 @@ export class Globals {
     /**enable user to set a facebook messanger page to chat with */
     this.telegramUsername = ''
     /**enable user to set a telegram number to chat with */
+    this.fileUploadAccept = "image/*,.pdf,.txt"
 
     this.showWaitTime = true;
 

package/src/chat21-core/providers/abstract/typing.service.ts

@@ -9,8 +9,8 @@ import { BehaviorSubject } from 'rxjs';
 export abstract class TypingService {
 
   // BehaviorSubject
-  BSIsTyping: BehaviorSubject<any>;
-  BSSetTyping: BehaviorSubject<any>;
+  abstract BSIsTyping: BehaviorSubject<any>;
+  abstract BSSetTyping: BehaviorSubject<any>;
 
   // params
   // private DEFAULT_TENANT: string = environment.firebaseConfig.tenant;

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

@@ -148,6 +148,10 @@ export class FirebasePresenceService extends PresenceService {
     });
   }
 
+  public imHere(){
+    //NOT IMPLEMENTED FOR FIREBASE ENGINE
+  }
+
   /**
    * removePresence
    * richiamato prima del logout
@@ -186,8 +190,4 @@ export class FirebasePresenceService extends PresenceService {
     return connectionsRef;
   }
 
-  public imHere(){
-    //NOT IMPLEMENTED FOR FIREBASE ENGINE
-  }
-
 }

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

@@ -1,5 +1,5 @@
 import { Chat21Service } from 'src/chat21-core/providers/mqtt/chat-service';
-import { Injectable } from '@angular/core';
+import { Inject, Injectable, Optional } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 
 // firebase
@@ -32,7 +32,8 @@ export class MQTTPresenceService extends PresenceService {
   private logger: LoggerService = LoggerInstance.getInstance();
 
   constructor(
-    public chat21Service: Chat21Service
+    public chat21Service: Chat21Service,
+    @Optional() @Inject('webSocketService') public webSocketService?: any,
   ) {
     super();
   }
@@ -45,7 +46,20 @@ export class MQTTPresenceService extends PresenceService {
   }
 
   userIsOnline(userid: string): Observable<any> {
-    return this.BSIsOnline
+    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);
+    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 });
+    } else {
+        that.BSIsOnline.next({ uid: data.uuid_user, isOnline: false });
+        local_BSIsOnline.next({ uid: data.uuid_user, isOnline: false });
+    }
+    });
+
+    return local_BSIsOnline
   }
 
   lastOnlineForUser(userid: string) {
@@ -53,14 +67,6 @@ export class MQTTPresenceService extends PresenceService {
   }
 
   public setPresence(userid: string): void  {
-    
-  }
-
-  /**
-   * removePresence
-   * richiamato prima del logout
-   */
-  public removePresence(): void {
 
   }
 
@@ -71,4 +77,12 @@ export class MQTTPresenceService extends PresenceService {
     }, 2000);
   }
 
+  /**
+   * removePresence
+   * richiamato prima del logout
+   */
+  public removePresence(): void {
+
+  }
+
 }

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

@@ -243,9 +243,9 @@ export function commandToMessage(msg: MessageModel, conversation: ConversationMo
   message.timestamp = conversation.timestamp
   message.metadata = msg['metadata']
   message.channel_type = conversation.channel_type
-  message.type = msg.type
+  message.type = msg['type']
   message.isSender = isSender(message.sender, currentUserId)
-  message.attributes = { ...conversation.attributes, ...msg.attributes}
+  message.attributes = { ...conversation.attributes, ...msg['attributes']}
 
   return message as MessageModel
 }

package/src/widget-config-template.json

@@ -2,7 +2,6 @@
     "chatEngine": "${CHAT21_ENGINE}",
     "uploadEngine": "${UPLOAD_ENGINE}",
     "pushEngine": "${PUSH_ENGINE}",
-    "fileUploadAccept":"${FILE_UPLOAD_ACCEPT}",
     "logLevel": "${LOG_LEVEL}"    ,
     "remoteTranslationsUrl": "${TRANSLATIONS_URL}",
     "firebaseConfig": {

package/src/widget-config.json

@@ -2,7 +2,6 @@
     "chatEngine": "mqtt",
     "uploadEngine": "native",
     "pushEngine":"none",
-    "fileUploadAccept":"*/*",
     "logLevel":"INFO",
     "remoteTranslationsUrl": "http://localhost:3000/",
     "firebaseConfig": {