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

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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

package/package.json

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

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?.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 && 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-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/last-message/last-message.component.scss

@@ -54,6 +54,7 @@
 .container{
     display: flex;
     flex-direction: column;
+    gap: 5px;
 }
 
 .messages {

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

@@ -589,11 +589,12 @@ export class Globals {
 
   setWidgetPreviewContainerSize(width: number, height: number){
     const divTiledeskWidget = this.windowContext.document.querySelector('.messagePreview');
-
+    
     let headerPadding = 10
     let style = getComputedStyle(divTiledeskWidget)
-    let currentHeight = +style.height.substring(0, style.height.length -2)
-    divTiledeskWidget.style.height = currentHeight + height + headerPadding + 'px'    
+    // 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/iframe-style.css

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