@chat21/chat21-web-widget 5.1.0-rc21 → 5.1.0-rc23

package/CHANGELOG.md

@@ -6,6 +6,14 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.0-rc23
+- **added**: hideHeaderConversation tiledeskSettings property
+
+# 5.1.0-rc22
+- **changed**: footer UI if fullscreenMode is enabled
+- **changed**: buttons alignment if fullscreenMode is enabled
+- **changed**: animation while increase/descrease widget size
+
 # 5.1.0-rc21
 - **bug-fixed**: shadow is visible while decrease widget size
 

package/package.json

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

package/src/app/app.component.scss

@@ -515,16 +515,6 @@ chat-root {
             border-radius: 16px;
         }
 
-        .chat21-fullscreen {
-            width: 100%;
-            height: 100%;
-            right: 0px;
-            left: 0px;
-            bottom: 0px;
-            border-radius: 0px;
-            max-height: none;
-        }
-
 
         /***************************
         ******** PAGE MODAL ********
@@ -596,7 +586,7 @@ chat-root {
     .c21-header {
         overflow: hidden;
         width: 100%;
-        height: 52px;
+        height: var(--chat-header-height);
         position: relative;
         margin: 0;
         padding: 0;
@@ -617,7 +607,7 @@ chat-root {
 
         .c21-header-container{
             position: relative;
-            height: 52px;
+            height: 100%;
             width: 100%;
             margin: 0 auto;
 
@@ -688,7 +678,7 @@ chat-root {
     }
     .c21-body {
         position: absolute;
-        top: 52px;
+        top: var(--chat-header-height);
         bottom: 0;
         left: 0;
         right: 0;

package/src/app/app.component.ts

@@ -2122,7 +2122,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.el.nativeElement.style.setProperty('--font-family-bubble-message', this.g.fontFamily)
         this.el.nativeElement.style.setProperty('--button-in-msg-font-family', this.g.fontFamily)
         
-
+        this.el.nativeElement.style.setProperty('--chat-header-height', this.g.hideHeaderConversation? '0px': null)
     }
 
 

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

@@ -8,6 +8,7 @@
 
     <!-- HEADER -->
     <chat-conversation-header
+        *ngIf="!g?.hideHeaderConversation"
         [idConversation]= "conversationWith"
         [senderId]="senderId"
         [soundEnabled]="g?.soundEnabled"

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

@@ -13,6 +13,40 @@
     bottom: var(--chat-footer-height) !important
 }
 
+@media(min-width:688px){
+    :host-context(#chat21-conversations.full-screen-mode){
+        --button-in-msg-padding: 10px 16px;
+        #chat21-footer{
+            left: 20%;
+            right: 20%;
+        }
+    
+        chat-conversation-content ::ng-deep{
+            .attachment_container,
+            .buttons-wrapper {
+                justify-content: flex-start;
+            }
+    
+            .button-in-message{
+                padding: 14px 22px !important
+            }
+    
+        }
+    
+        chat-conversation-footer ::ng-deep {
+            .textarea-container {
+                padding: 8px 24px;
+                background-color: var(--chat-footer-background-color);
+                border-radius: 28px;
+            }
+            #hiddenFooter,
+            #emoji-mart-container {
+                bottom: calc(100% + 10px)
+            }
+        }
+    }
+}
+
 // ============= CSS #chat21-conversation-component ================= //
 #chat21-conversation-component {
     // background-color: #ffffff;
@@ -89,6 +123,7 @@
     left: 0px;
     right: 0px;
     margin: 0px;
+    margin: 12px 8px;
     // padding: 0;
     
     // box-shadow: 0 -1px 0px 0px $trasp-light-gray;

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

@@ -1022,7 +1022,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     var tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv') 
     tiledeskDiv.classList.remove('increaseSize')
     tiledeskDiv.classList.remove('decreaseSize')
-    tiledeskDiv.classList.remove('fullscreen')
+    tiledeskDiv.classList.remove('top')
 
     this.onCloseWidget.emit();
   }
@@ -1078,18 +1078,15 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     if(mode==='max'){
       tiledeskDiv.classList.add('increaseSize')
       tiledeskDiv.classList.remove('decreaseSize')
-      tiledeskDiv.classList.remove('fullscreen')
-      this.g.fullscreenMode = false
+      tiledeskDiv.classList.remove('top')
     }else if(mode==='min'){
       tiledeskDiv.classList.add('decreaseSize')
       tiledeskDiv.classList.remove('increaseSize')
-      tiledeskDiv.classList.remove('fullscreen')
-      this.g.fullscreenMode = false
-    }else if(mode=== 'fullscreen'){
-      tiledeskDiv.classList.add('fullscreen')
+      tiledeskDiv.classList.remove('top')
+    }else if(mode=== 'top'){
+      tiledeskDiv.classList.add('top')
       tiledeskDiv.classList.remove('increaseSize')
       tiledeskDiv.classList.remove('decreaseSize')
-      this.g.fullscreenMode = true
 
     }
     this.isMenuShow = false;
@@ -1132,8 +1129,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       case HEADER_MENU_OPTION.MINIMIZE:
         this.onWidgetSizeChange('min')
         break;
-      case HEADER_MENU_OPTION.FULLSCREEN:
-        this.onWidgetSizeChange('fullscreen')
+      case HEADER_MENU_OPTION.TOP:
+        this.onWidgetSizeChange('top')
         break;
     }
   }

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

@@ -1,7 +1,9 @@
 <div class="audio-recorder">
   <button *ngIf="audioUrl" (click)="deleteRecording()">
     <span class="v-align-center">
-      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm80-160h80v-360h-80v360Zm160 0h80v-360h-80v360Z"/></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+        <path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm80-160h80v-360h-80v360Zm160 0h80v-360h-80v360Z"/>
+      </svg>
       <!-- <i class="material-icons">delete_outline</i> -->
     </span>
   </button>

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

@@ -1,19 +1,10 @@
-
-@font-face {
-    font-family: 'Material Icons';
-    src: url('https://fonts.googleapis.com/icon?family=Material+Icons');
-  }
-  
-  .material-icons.mic_none::before {
-    content: 'mic_none';
-  }
-
 .audio-recorder {
     text-align: center;
     margin: 0px;
     display: inline-flex;
     align-items: center;
-    justify-content: center;
+    // justify-content: center;
+    justify-content: space-between;
     height: 100%;
     width: 100%;
     float: left;
@@ -22,8 +13,8 @@
 
 ::ng-deep chat-audio.test {
   display: flex;
-  width: 80%;
-  margin: 8px 0;
+  width: 90%;
+  // margin: 8px 0;
   pointer-events: auto;
   border-radius: var(--chat-footer-border-radius);
   background-color: var(--chat-footer-background-color);
@@ -52,10 +43,9 @@ button {
     background-color: transparent;
     color: var(--icon-fill-color);
     fill: var(--icon-fill-color);
-    height: var(--chat-footer-height);
+    // height: var(--chat-footer-height);
 
     display: flex;
-    align-self: flex-end;
     // margin: 0 8px;
     width: 34px;
     text-align: center;
@@ -75,6 +65,7 @@ button {
     justify-content: center;
     align-items: center;
     padding: 0px;
+    z-index: 0;
   }
   
   .mic-button svg {

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

@@ -27,8 +27,8 @@
         <!-- ICON ATTACHMENT -->
         <label *ngIf="showAttachmentFooterButton" 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="24px" height="24" viewBox="0 0 24 24" >
-                    <path d="M18.4,13.2l-2.6,4.5c-1.5,2.6-4.9,3.6-7.6,2c-2.6-1.5-3.6-4.9-2-7.6l3.9-6.7c1.1-1.9,3.6-2.6,5.5-1.5 c1.9,1.1,2.6,3.6,1.5,5.5l-3.3,5.7c-0.7,1.3-2.3,1.7-3.6,1c-1.3-0.7-1.7-2.3-1-3.6l2-3.4c0.2-0.3,0.6-0.5,1-0.3s0.5,0.6,0.3,1 l-2,3.4c-0.3,0.5-0.2,1.1,0.3,1.5c0.4,0.4,1.1,0.4,1.5,0c0.1-0.1,0.2-0.2,0.2-0.3l3.3-5.7c0.7-1.2,0.3-2.8-1-3.5 c-1.2-0.7-2.8-0.3-3.5,1l-3.9,6.7C6.4,14.9,7,17.4,9,18.5c1.9,1.1,4.4,0.5,5.6-1.5l2.6-4.5c0.2-0.3,0.6-0.5,1-0.3 C18.5,12.5,18.6,12.9,18.4,13.2L18.4,13.2z"/>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M9.9,22.7c0,0-.1,0-.2,0-1.9.3-3.7-.2-5.2-1.4-3-2.3-3.6-6.4-1.4-9.5L9.5,2.5c.4-.5,1.1-.6,1.6-.3.5.4.6,1.1.3,1.6l-6.5,9.4c-1.4,2-1,4.8.9,6.3,1,.8,2.2,1.1,3.5.9,1.3-.2,2.4-.9,3.1-1.9l6-8.7c.9-1.2.6-3-.6-3.9-.6-.5-1.4-.6-2.1-.5-.8.1-1.4.5-1.9,1.1l-5.8,8.2c-.3.5-.2,1.1.2,1.5.2.2.5.3.8.2.3,0,.6-.2.7-.4l4.7-6.2c.4-.5,1.1-.6,1.6-.2.5.4.6,1.1.2,1.6l-4.7,6.2c-.5.7-1.4,1.2-2.3,1.3-.9.1-1.8-.2-2.5-.7-1.4-1.1-1.6-3.1-.6-4.6l5.8-8.2c.8-1.1,2-1.9,3.4-2.1,1.4-.2,2.7.1,3.8,1,2.2,1.7,2.7,4.8,1.1,7.1l-6,8.7c-1.1,1.5-2.6,2.5-4.4,2.8h0Z"/>
                 </svg>
             </span>
              <input
@@ -47,11 +47,16 @@
         <!-- ICON EMOJII -->
         <label *ngIf="showEmojiFooterButton" 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" viewBox="0 0 24 24" width="24" height="24">
-                    <path d="M0,0H20.57V20.57H0V0Z" fill="none"/>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
+                    <path stroke-width=".4px" stroke="currentColor" d="M12,20.8c-5.1,0-9.3-4.2-9.3-9.3S6.9,2.2,12,2.2s9.3,4.2,9.3,9.3-4.2,9.3-9.3,9.3ZM12,3.6c-4.4,0-7.9,3.6-7.9,7.9s3.6,7.9,7.9,7.9,7.9-3.6,7.9-7.9-3.6-7.9-7.9-7.9Z"/>
+                    <path stroke-width=".4px" stroke="currentColor" d="M12,17.2c-2.7,0-4.3-1.9-4.6-2.3-.2-.3-.2-.7.1-1s.7-.2,1,.1c.1.2,1.4,1.8,3.5,1.8s2.2,0,3.5-1.8c.2-.3.7-.4,1-.1s.4.7.1,1c-1.7,2.2-4.1,2.3-4.6,2.3Z"/>
+                    <path d="M8.7,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
+                    <path d="M15.5,10.9c-.9,0-1.6-.7-1.6-1.6s.7-1.6,1.6-1.6,1.6.7,1.6,1.6-.7,1.6-1.6,1.6Z"/>
+
+                    <!-- <path d="M0,0H20.57V20.57H0V0Z" fill="none"/>
                     <circle cx="15.02" cy="9.86" r="1.29"/>
                     <circle cx="9.02" cy="9.86" r="1.29"/>
-                    <path d="M12.02,15.43c-1.27,0-2.36-.69-2.96-1.71h-1.43c.69,1.76,2.39,3,4.39,3s3.7-1.24,4.39-3h-1.43c-.6,1.02-1.69,1.71-2.96,1.71Zm0-12C7.28,3.43,3.45,7.27,3.45,12s3.83,8.57,8.56,8.57,8.58-3.84,8.58-8.57S16.75,3.43,12.01,3.43Zm0,15.43c-3.79,0-6.86-3.07-6.86-6.86s3.07-6.86,6.86-6.86,6.86,3.07,6.86,6.86-3.07,6.86-6.86,6.86Z"/>
+                    <path d="M12.02,15.43c-1.27,0-2.36-.69-2.96-1.71h-1.43c.69,1.76,2.39,3,4.39,3s3.7-1.24,4.39-3h-1.43c-.6,1.02-1.69,1.71-2.96,1.71Zm0-12C7.28,3.43,3.45,7.27,3.45,12s3.83,8.57,8.56,8.57,8.58-3.84,8.58-8.57S16.75,3.43,12.01,3.43Zm0,15.43c-3.79,0-6.86-3.07-6.86-6.86s3.07-6.86,6.86-6.86,6.86,3.07,6.86,6.86-3.07,6.86-6.86,6.86Z"/> -->
                 </svg>
             </span>
         </label>
@@ -85,8 +90,8 @@
     <!-- ICON SEND -->
     <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton" tabindex="-1" class="chat21-textarea-button" [class.disabled]="showAlertEmoji || showAlertUrl" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
         <span class="v-align-center">
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="24" width="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
-                <path d="M1.8,18.9V1.7L22,10.3L1.8,18.9z M3.9,15.6l12.6-5.4L3.9,4.9v3.7l6.4,1.6l-6.4,1.6V15.6z M3.9,15.6V4.9v7V15.6z"/>
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="24" width="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" fill="currentColor">
+                <path class="cls-1" d="M1.8,20.6V3.4l20.2,8.6L1.8,20.6ZM3.9,17.3l12.6-5.4L3.9,6.6v3.7l6.4,1.6-6.4,1.6v3.8ZM3.9,17.3V6.6v10.7Z"/>
             </svg>
         </span>
     </div>
@@ -107,7 +112,7 @@
 <!-- EMOJII PICKER-->
 <div [style.visibility]="isEmojiiPickerShow?'visible':'hidden'"  class="emoji-container"  id="emoji-mart-container" #emoji_mart_container>
     <!-- <ng-container #emojii_container></ng-container> -->
-    <emoji-mart id="emoji-mart"
+        <emoji-mart id="emoji-mart"
         *ngIf="showEmojiPicker"
         class="emoji-mart"
         [showPreview]="emojiiOptions?.showPreview"

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

@@ -6,9 +6,8 @@
     display: flex;
     // width: 100%;
     align-items: center;
-    gap: 8px;
     justify-content: space-between;
-    margin: 0px 8px;
+    gap: 8px;
 
     //if attachment icon OR emoji icon is not in DOM -> increment textarea width
     &:has(:not(#chat21-start-upload-doc), :not(#chat21-emoticon-picker)) .visible-text-area {
@@ -23,15 +22,15 @@
 
 .icons-container{
     display: flex;
-    align-self: flex-end;
+    // align-self: flex-end;
     // margin-left: 8px;
     // margin-right: 8px;
-    gap: 8px;
+    gap: 4px;
 }
 
 .visible-text-area {
     width: 70%;
-    margin: 8px 0px;
+    // margin: 12px 0px;
     pointer-events: auto;
     border-radius: var(--chat-footer-border-radius);
     background-color: var(--chat-footer-background-color);
@@ -44,9 +43,10 @@
 }
 
 .chat21-textarea-button {
-    fill: var(--icon-fill-color);
+    // fill: var(--icon-fill-color);
+    color: var(--icon-fill-color);
     pointer-events: auto;
-    height: var(--chat-footer-height);
+    // height: var(--chat-footer-height);
     bottom: 22px;
     opacity: 0.3;
     cursor: initial;
@@ -206,7 +206,7 @@ textarea:active{
 
 #chat21-button-send {
     display: flex;
-    align-self: flex-end;
+    // align-self: flex-end;
     // margin: 0 8px;
     width: 34px;
     text-align: center;
@@ -218,7 +218,7 @@ textarea:active{
     width: 34px;
     text-align: center;
     justify-content: center;
-    height: var(--chat-footer-height);
+    // height: var(--chat-footer-height);
     &.active{
         width: 100%;
     }
@@ -392,20 +392,20 @@ textarea:active{
 
 
 .emoji-container {
-    height: 312px;
+    height: 319px;
     position: absolute;
     overflow: hidden;
-    width: 89%;
+    width: 338px;
     bottom: 100%;
     z-index: 10;
     left: 10px;
-    box-shadow: 0px -15px 20px -13px rgba(0, 0, 0 , 0.38);
-    -webkit-box-shadow: 0px -15px 20px -13px rgba(0, 0, 0 , 0.38);
+    box-shadow: 0 -4px 14px -13px rgba(0, 0, 0 , 0.38);
+    -webkit-box-shadow: 0 -4px 14px -13px rgba(0, 0, 0 , 0.38);
 }
 .emoji-mart {
     position: absolute;
     // bottom: 40px;
     // left: 10px;
     border: none;
-    margin: -2px -2px 0px;
+    // margin: -2px -2px 0px;
 }

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

@@ -132,7 +132,7 @@
         <span class="label-menu-item">{{ translationMap?.get('MAXIMIZE') }}</span>
     </div>
     <!-- ICON MINIMIZE -->
-    <div class="c21-header-button c21-right" *ngIf="heightStatus==='max' || heightStatus==='full' || fullscreenMode" (click)="onChangeSize('min')">
+    <div class="c21-header-button c21-right" *ngIf="heightStatus==='max' || heightStatus==='top' || fullscreenMode" (click)="onChangeSize('min')">
         <svg role="img" aria-labelledby="altIconTitle" class="icon-menu" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
             width="17" height="17" viewBox="0 0 17 17">
             <path d="M13.59 5.31h-1.7l3.3-3.3-1.2-1.2-3.3 3.3v-1.7a.85.85 0 1 0-1.7 0v4.6h4.6a.85.85 0 1 0 0-1.7M1.57 9.84c0 .47.38.85.85.85h1.7l-3.3 3.3 1.2 1.2 3.3-3.3v1.7a.85.85 0 1 0 1.7 0v-4.6h-4.6a.85.85 0 0 0-.85.85" fill="currentColor"></path>
@@ -141,8 +141,8 @@
         <span class="label-menu-item">{{ translationMap?.get('MINIMIZE') }}</span>
     </div>
 
-    <!-- FULLSCREEN -->
-    <div class="c21-header-button c21-right" *ngIf="heightStatus!=='full' && !fullscreenMode" (click)="onChangeSize('full')">
+    <!-- ICON TOP -->
+    <!-- <div class="c21-header-button c21-right" *ngIf="heightStatus!=='top' && !fullscreenMode" (click)="onChangeSize('top')">
         <svg  role="img" aria-labelledby="altIconTitle" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1,0,0,1,0,0)"
             width="17" height="17" viewBox="0 0 17 17">
             <path fill="currentColor" d="M6.5,8.3l-2.8,2.8v-1.7c0-.5-.4-.9-.9-.9s-.8.4-.8.9v4.6h4.6c.5,0,.8-.4.8-.9s-.4-.8-.8-.8h-1.7l2.8-2.8-1.2-1.2ZM9.4,2c-.5,0-.8.4-.8.8s.4.9.8.9h1.7l-2.8,2.8,1.2,1.2,2.8-2.8v1.7c0,.5.4.8.8.8s.9-.4.9-.8V2h-4.6Z"/>
@@ -150,7 +150,7 @@
             <title id="altIconTitle">{{ translationMap?.get('FULLSCREEN') }}</title>
         </svg>
         <span class="label-menu-item">{{ translationMap?.get('FULLSCREEN') }}</span>
-    </div>
+    </div> -->
 
     <!-- ICON LOGOUT -->
     <div class="c21-header-button c21-right"  *ngIf="!hideSignOutOptionMenu" (click)="signOut()">

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

@@ -110,7 +110,7 @@ export class ConversationHeaderComponent implements OnInit, OnChanges {
     this.heightStatus = status
     if(status === 'min') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.MINIMIZE)
     if(status === 'max') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.MAXIMIZE)
-    if(status === 'full') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.FULLSCREEN)
+    if(status === 'top') this.onMenuOptionClick.emit(HEADER_MENU_OPTION.TOP)
     this.onMenuOptionShow.emit(false)
   }
   toggleSound() {

package/src/app/component/form/prechat-form/prechat-form.component.scss

@@ -6,7 +6,7 @@
         .c21-header {
             overflow: hidden;
             width: 100%;
-            height: 52px;
+            height: var(--chat-header-height);
             .c21-header-button {
                 .c21-close-button.c21-small {
                     width: 31px;

package/src/app/component/list-all-conversations/list-all-conversations.component.scss

@@ -15,7 +15,7 @@
     .c21-header {
         overflow: hidden;
         width: 100%;
-        height: 52px;
+        height: var(--chat-header-height);
         position: relative;
         margin: 0;
         padding: 0;
@@ -64,7 +64,7 @@
 
         .c21-header-container{
             position: relative;
-            height: 52px;
+            height: 100%;
             width: 100%;
             margin: 0 auto;
 

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

@@ -5,12 +5,13 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --padding: #{var(--button-in-msg-padding)};
     --fontFamily: #{var(--button-in-msg-font-family)};
 }
 
 .button-in-msg {
-    padding: 8px 16px!important;
-    position: relative;
+    padding: var(--padding);
+    // position: relative;
     max-width: var(--max-width);
     min-width: inherit;
     cursor: pointer;

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

@@ -5,11 +5,12 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --padding: #{var(--button-in-msg-padding)};
     --font-family: #{var(--button-in-msg-font-family)};
 }
 
 .button-in-msg {
-    padding: 8px 16px!important;
+    padding: var(--padding);
     position: relative;
     max-width: var(--max-width);
     min-width: inherit;

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

@@ -5,13 +5,14 @@
     --hoverTextColor: #{var(--blue)};
     --buttonFontSize: #{var(--button-in-msg-font-size)};
     --max-width: #{var(--button-in-msg-max-width)};
+    --padding: #{var(--button-in-msg-padding)};
     --font-family: #{var(--button-in-msg-font-family)};
 }
 
 
 .button-in-msg {
 
-    padding: 8px 16px!important;
+    padding: var(--padding);
     position: relative;
     max-width: var(--max-width);
     min-width: inherit;

package/src/app/component/selection-department/selection-department.component.scss

@@ -12,7 +12,7 @@
     .c21-header {
         overflow: hidden;
         width: 100%;
-        height: 52px;
+        height: var(--chat-header-height);
         .c21-header-button {
             .c21-close-button.c21-small {
                 width: 31px;

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

@@ -760,13 +760,19 @@ export class GlobalSettingsService {
         TEMP = tiledeskSettings['fullscreenMode'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > fullscreenMode:: ', TEMP);
         if (TEMP !== undefined) {
-            globals.fullscreenMode = TEMP;
+            globals.fullscreenMode = (TEMP === true) ? true : false;
             // globals.setParameter('fullscreenMode', TEMP);
         }
         TEMP = tiledeskSettings['hideHeaderCloseButton'];
         // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > hideHeaderCloseButton:: ', TEMP);
         if (TEMP !== undefined) {
-            globals.hideHeaderCloseButton = TEMP;
+            globals.hideHeaderCloseButton = (TEMP === true) ? true : false;
+            // globals.setParameter('hideHeaderCloseButton', TEMP);
+        }
+        TEMP = tiledeskSettings['hideHeaderConversation'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > hideHeaderCloseButton:: ', TEMP);
+        if (TEMP !== undefined) {
+            globals.hideHeaderConversation = (TEMP === true) ? true : false;
             // globals.setParameter('hideHeaderCloseButton', TEMP);
         }
         TEMP = tiledeskSettings['themeColor'];
@@ -1510,6 +1516,11 @@ export class GlobalSettingsService {
             globals.hideHeaderCloseButton = stringToBoolean(TEMP);
         }
 
+        TEMP = getParameterByName(windowContext, 'tiledesk_hideHeaderConversation');
+        if (TEMP) {
+            globals.hideHeaderConversation = stringToBoolean(TEMP);
+        }
+
         TEMP = getParameterByName(windowContext, 'tiledesk_themeColor');
         if (TEMP) {
             const themecolor = stringToBoolean(TEMP);

package/src/app/sass/_variables.scss

@@ -22,12 +22,15 @@
     --button-in-msg-font-size: 15px;
     --button-in-msg-font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
     --button-in-msg-max-width: 280px;
+    --button-in-msg-padding: 8px 16px;
 
     --max-width-images: 230px; //change also MAX_WIDTH_IMAGES in constants.ts
 
     --bkg-color-info-message: rgba(24, 119, 242, 0.1);
 
-    --chat-footer-height: 56px;
+    --chat-header-height: 52px;
+    
+    --chat-footer-height: 64px;
     --chat-footer-logo-height: 30px;
     --chat-footer-border-radius: 16px;
     --chat-footer-background-color: #f6f7fb;

package/src/app/utils/constants.ts

@@ -74,6 +74,6 @@ export const HEADER_MENU_OPTION = {
     RESTART     :   'restart',
     MAXIMIZE    :   'maximize',
     MINIMIZE    :   'minimize',
-    FULLSCREEN  :   'fullscreen'
+    TOP  :          'top'
 }
 

package/src/app/utils/globals.ts

@@ -135,7 +135,6 @@ export class Globals {
   userEmail: string;
   widgetTitle: string;
   fullscreenMode: boolean;
-  hideHeaderCloseButton: boolean;
   themeColor: string;
   themeColorOpacity: number;
   themeForegroundColor: string;
@@ -161,6 +160,8 @@ export class Globals {
   baloonShape: string;
   isLogEnabled: boolean;
   openExternalLinkButton: boolean;
+  hideHeaderConversation: boolean
+  hideHeaderCloseButton: boolean;
   hideHeaderConversationOptionsMenu: boolean;
   hideCloseConversationOptionMenu: boolean;
   hideSettings: boolean;
@@ -291,9 +292,6 @@ export class Globals {
      * average response time of his team (if 'dynamicWaitTimeReply' is 
      * false the WAITING_TIME_NOT_FOUND will always be displayed) 
      * is set to true for backward compatibility with old projects */
-    this.hideHeaderCloseButton = false;
-    /** Hide the close button in the widget header. Permitted values: true,
-    false. The default value is false. */
     this.fullscreenMode = false;
     /** if it is true, the chat window is open in fullscreen mode. Permitted
     values: true, false. Default value : false */
@@ -336,6 +334,12 @@ export class Globals {
     this.isLogEnabled = false;
     // this.parameters['isLogEnabled'] = false;
     this.openExternalLinkButton = true;
+    /** Hide the header conversation Permitted values: true,
+    false. The default value is false. */
+    this.hideHeaderConversation= false;
+    /** Hide the close button in the widget header. Permitted values: true,
+    false. The default value is false. */
+    this.hideHeaderCloseButton = false;
     /** enable to hide/show upper-right header conversation options menu */
     this.hideHeaderConversationOptionsMenu = false;
     /** enable to close a conversation from upper-right header menu  */
@@ -534,7 +538,7 @@ export class Globals {
       'fullscreenMode': this.fullscreenMode,
       'filterByRequester': this.filterByRequester,
       'hideHeaderConversationOptionsMenu': this.hideHeaderConversationOptionsMenu, 'hideHeaderCloseButton': this.hideHeaderCloseButton,
-      'hideCloseConversationOptionMenu': this.hideCloseConversationOptionMenu,
+      'hideCloseConversationOptionMenu': this.hideCloseConversationOptionMenu, 'hideHeaderConversation': this.hideHeaderConversation,
       'hideSettings': this.hideSettings,
       'isLogEnabled': this.isLogEnabled,
       'isOpen': this.isOpen, 'isShown': this.isShown,

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

@@ -1249,6 +1249,13 @@
             window.Tiledesk('restart')
         }
         
+        function onClickHideHeaderConversation(){
+            let status = document.querySelector('input[name="hideHeaderConversation"]:checked').value
+            window.tiledeskSettings['hideHeaderConversation'] = stringToBoolean(status)
+            console.log('onClickHideHeaderConversation: status-->',window.tiledeskSettings);
+            window.Tiledesk('restart')
+        }
+
         function onClickHideHeaderCloseButton(){
             let status = document.querySelector('input[name="hideHeaderCloseButton"]:checked').value
             window.tiledeskSettings['hideHeaderCloseButton'] = stringToBoolean(status)
@@ -2245,6 +2252,16 @@
                         
 
                         <div><h3 style="line-height: 0.3;">MANAGE <em><strong>CONVERSATION DETAIL</strong></em></h3></div>
+                        <div class="row">
+                            <div class="col-md-5 formElement"><span><em><strong>hideHeaderConversation</strong></em></span></div>
+                            <div class="col-md-5">
+                                <input class="form-check-input" type="radio" name="hideHeaderConversation" value="true"><label>True</label>
+                                <input class="form-check-input" type="radio" name="hideHeaderConversation" value="false" checked><label>False</label>
+                            </div>
+                            <div class="col-md-2">
+                                <button class="btn btn-light" onclick="onClickHideHeaderConversation()">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>hideHeaderCloseButton</strong></em></span></div>
                             <div class="col-md-5">

package/src/iframe-style.css

@@ -34,10 +34,7 @@
     
 }
 
-
 #tiledeskdiv.fullscreen {
-    /* transition: width 1s, height 1s; */
-    /* transition: all 0.5s ease-in !important; */
     right: 0px;
     left: 0px;
     top: 0px;
@@ -45,6 +42,17 @@
     width: 100%;
     height: 100%;  
 }
+
+#tiledeskdiv.top {
+    /* transition: width 1s, height 1s; */
+    /* transition: all 0.5s ease-in !important; */
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: var(--iframeMaxWidth);
+    height: var(--iframeMaxHeight);
+    transform: translate(-50%, -50%);  
+}
  
 
 @keyframes right-animate {
@@ -106,14 +114,14 @@
 }
 
 #tiledesk-container.open #tiledeskdiv.decreaseSize {
-    transition: all 0.5s ease-in;
+    transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out;
     width: var(--iframeMinWidth);
     height: var(--iframeMinHeight);
 }
 
 #tiledesk-container.open #tiledeskdiv.increaseSize {
     /* transition: width 1s, height 1s; */
-    transition: all 0.5s ease-in;
+    transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out;
     width: var(--iframeMaxWidth);
     height: var(--iframeMaxHeight);
 }