@chat21/chat21-web-widget 5.0.71-rc.7 → 5.0.71-rc.8

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.71-rc.8
+- chaged: chatbot-panel.html page UI (added header as CDS)
+- bug-fixed: drop-zone area wrong height if footer in not visible
+- bug-fixed: set archived conversations as read always 
+
 ### 5.0.71-rc.5
 - bug-fixed: last-message box is visible also if text is empty
 

package/package.json

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

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

@@ -37,9 +37,10 @@
         (onMenuOptionShow)="onMenuOption($event)">
     </chat-conversation-header>
 
-    <div id="dropZone_container" *ngIf="isHovering">
+    <div id="dropZone_container" *ngIf="isHovering"
+        [class.hideTextReply]="hideFooterTextReply && g?.poweredBy">
         <div class="drop">
-            drop zone
+            <!-- drop zone -->
         </div>
     </div>
     

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

@@ -9,7 +9,8 @@
     --foregroundColor: var(--col-msg-sent);
 }
 
-:host chat-conversation-content.hideTextReply ::ng-deep .chat21-sheet-content{
+:host chat-conversation-content.hideTextReply ::ng-deep .chat21-sheet-content,
+:host #dropZone_container.hideTextReply{
 
     bottom: var(--chat-footer-height) !important
 }
@@ -143,7 +144,7 @@
 #dropZone_container{
     position: absolute;
     top: 52px;
-    bottom: 56px;
+    bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height));
     left: 0;
     right: 0;
     background-color: rgba(240,248,255,0.6);

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

@@ -248,7 +248,7 @@ textarea:active{
     // position: absolute;
     bottom: 100%;
     width: 100%;
-    // height: 22px;
+    height: var(--chat-footer-logo-height);
     display: flex;
     align-items: center;
     justify-content: center;

package/src/app/sass/_variables.scss

@@ -27,7 +27,7 @@
     --bkg-color-info-message: rgba(24, 119, 242, 0.1);
 
     --chat-footer-height: 56px;
-    --chat-footer-logo-height: 22px;
+    --chat-footer-logo-height: 30px;
     --chat-footer-border-radius: 16px;
     --chat-footer-background-color: #f6f7fb;
 

package/src/assets/twp/chatbot-panel.html

@@ -14,6 +14,15 @@
         @-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
         @keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */
 
+        body{
+            --font-family-poppins: 'Poppins', 'Roboto', Arial, sans-serif;
+            --blu: #506493;
+            --gray-light-02: rgb(223, 227, 237);
+            --tiledesk-base-color: rgb(224,106,88);
+            --header-height: 60px;
+
+        }
+
         #preloader {
             background: #fff;
             position: fixed;
@@ -162,6 +171,71 @@
             z-index: 2;
             position: absolute;
             cursor: pointer;
+            font-size: 21px;
+            height: var(--header-height);
+            font-family: var(--font-family-poppins);
+            color: var(--blu);
+            background: white;
+            border-bottom: 1px solid var(--gray-light-02);
+            display: flex;
+            width: 100%;
+            
+        }
+
+        .header-left{
+            max-width: var(--header-height);
+            width: 100%;
+            transition: 0.3s;
+            border-right: 1px solid transparent;
+            /* border-right: 1px solid var(--gray-light-02); */
+            padding: 10px;
+        }
+
+        .header-left div {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            box-shadow: rgba(17, 49, 96, 0.16) 0px 8px 16px 0px, rgba(17, 49, 96, 0.06) 0px 0px 0px 1px;        ;
+        }
+
+        .header-left div .logo {
+            opacity: 1;
+            width: 25px;
+            position: absolute;
+            transition: opacity 0.2s ease-in-out;
+        }
+
+        .header-right {
+            display: flex;
+            align-items: center;
+            justify-content: start;
+            width: 100%;
+            padding: 0px 10px;
+            box-sizing: border-box;
+        }
+
+        .header-right .header-go-back {
+            cursor: pointer;
+            position: relative;
+        }
+
+        .header-right .header-go-back .cds-text {
+            font-weight: 700;
+            color: rgb(224,106,88);
+        }
+
+        .header-right .header-title{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 5px;
+            font-weight: 300;
+            width: 80%;
+
         }
 
         .share-btn{
@@ -263,6 +337,12 @@
             to {bottom: 0; opacity: 0;}
         }
 
+        @media (max-width: 451px) {
+            .cds-text{
+                display: none;
+            }
+        }
+
     </style>
 
     <!-- <script type="text/javascript">
@@ -440,6 +520,7 @@
                         
         var url = new URL(currentUrl);
         var tiledesk_projectid = url.searchParams.get("tiledesk_projectid");
+        var tiledesk_widgetTitle = url.searchParams.get("tiledesk_widgetTitle");
         var project_name = url.searchParams.get("project_name");
         var role = url.searchParams.get("role")
         var urlConsole = baseUrlConsole + "#/projects/"+tiledesk_projectid+"/home";
@@ -456,6 +537,10 @@
             return(false);
         }
 
+        window.onload = function() {
+            document.getElementById("tiledesk_widgetTitle").innerHTML = tiledesk_widgetTitle;
+        }
+
         
 
     </script>
@@ -473,6 +558,24 @@
         <!-- <ul class="nav navbar-nav navbar-left">
             <li class="sign-up"><button class="share-btn" onclick="copyLink()">SHARE THIS PROTOTYPE</button></li>
         </ul> -->
+        <div class="header-left">
+            <div>
+                <img class="logo" src="./tiledesk_widget_files/logo-short.png">
+            </div>
+        </div>
+        <div class="header-right">
+            <div class="header-go-back">
+                <!-- <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#006cff">
+                    <path d="M0 0h24v24H0z" fill="none"/><path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"/>
+                </svg> -->
+                <span class="cds-text">
+                    Design Studio
+                </span>
+                
+            </div>
+            <div class="header-title ellips" id="tiledesk_widgetTitle"></div>
+        </div>
+
     </header>
     <!-- The actual snackbar -->
     <div id="snackbar">Copied to clipboard...</div>

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

@@ -230,6 +230,7 @@ export class FirebaseConversationsHandler extends ConversationsHandlerService {
     archiveConversation(conversationId: string) {
         const that = this
         this.setClosingConversation(conversationId, true);
+        this.setConversationRead(conversationId)
         const index = searchIndexInArrayForUid(this.conversations, conversationId);
         // if (index > -1) {
         //     this.conversations.splice(index, 1);

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

@@ -384,7 +384,8 @@ export class MQTTConversationsHandler extends ConversationsHandlerService {
         this.isConversationClosingMap.delete(conversationId);
     }
 
-    archiveConversation(conversationId: string) { 
+    archiveConversation(conversationId: string) {
+        this.setConversationRead(conversationId)
         this.chat21Service.chatClient.archiveConversation(conversationId);
     }