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

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

@@ -1,19 +1,12 @@
 // $f21ico-schedule: image-url('f21ico-schedule.svg', false, false);
 // $f21ico-done: image-url('../assets/images/f21ico-done.svg', false, false);
 // $f21ico-done_all: image-url('../assets/images/f21ico-done_all.svg', false, false);
-@import 'src/app/sass/variables';
+// @import 'src/app/sass/variables';
 // @import '../../../sass/normalize.css';
 
 :host {
-    --themeColor: $bck-msg-sent;
-    --foregroundColor: $col-msg-sent;
-}
-
-#scroll-me {
-    scroll-behavior: smooth;
-}
-#scroll-me.withoutAnimation {
-    scroll-behavior: unset;
+    --themeColor: var(--bck-msg-sent);
+    --foregroundColor: var(--col-msg-sent);
 }
 
 // ============= CSS #chat21-conversation-component ================= //
@@ -33,384 +26,6 @@
     left: 0px;
     right: 0px;
     bottom: 0px;
-    // border: 0.1px solid lightgray;
-    .c21-title {
-        position: absolute;
-        left: 50px;
-        right: 100px;
-        display: flex;
-        align-items: center;
-        width: auto;
-        height: 42px;
-        padding: 0px;
-        margin: 5px 0px;
-        font-size: 1.6em;
-        font-weight: 500;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .titleText {
-        position: relative;
-        line-height: 40px;
-        text-align: left;
-        font-size: 1em;
-    }
-    .avatar-project {
-        position: relative;
-        padding: 0;
-        margin: 0;
-        margin: 0 10px 0 0;
-        float: left;
-        height: 42px;
-        width: 42px;
-        line-height: 42px;
-    }
-    .avatar-placeholder {
-        font-size: 16px;
-    }
-    .avatar-image {
-        max-width: 30px;
-        max-height: 30px;
-        margin: 6px;
-    }
-
-     /* SET ICON AVATAR */
-     .c21-icon-avatar {
-        position: relative;
-        padding: 0;
-        margin: 0;
-        height: 40px;
-        width: 40px;
-        min-height: 40px;
-        min-width: 40px;
-        line-height: 40px;
-        border-radius: 50%;
-        overflow: hidden;
-        background-color: #ffffff;
-        .c21-avatar-placeholder {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            border-radius: 50%;
-            text-align: center;
-            font-size: 1.4em;
-            color: #ffffff;
-            font-weight: 500;
-        }
-        .c21-avatar-image {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            margin: 0;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: cover;
-            border-radius: 50%;
-        }
-        .c21-avatar-image img{
-            max-width: 100%;
-            width: 100%;
-            height: 100%;
-            min-width: 25px;
-            min-height: 25px;
-            object-fit: cover;
-        }
-    }
-
-     /* SET SCROLLBAR */
-    // ============= CSS c21-header ================= // 
-    .c21-header {
-        position: fixed;
-        left: 0px;
-        right: 0px;
-        .c21-header-container{
-            .c21-header-content {
-                .c21-header-writing{
-                    position: absolute;
-                    left: 40px;
-                    right: 40px;
-                    bottom: 3px;
-                    width: auto;
-                    text-align: center;
-                    margin: 0px;
-                    padding: 0px;
-                    font-size: 1.1em;
-                    color: #ffffff;
-                }
-            }
-        }
-    }
-
-    .rowMsg{
-        position: relative;
-        height: auto;
-        display: block;
-    }
-    // .c21-header-button:hover {
-    //     background-color: rgba(0, 0, 0, 0.4);
-    //     border-radius: 20px;
-    //     height: 40px;
-    //     width: 40px;
-    //     margin: 5px 10px;
-    // }
-    
-    // ============= CSS c21-body ================= //
-    .c21-body {
-        // -webkit-box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.4);
-        // -moz-box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.4);
-        // box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.4);
-        position: fixed;
-        .c21-body-container {
-            // .c21-body-header {
-            //     .chat21-header-modal-select {
-            //         font-family: 'Google Sans', sans-serif !important;
-            //         padding: 0px;
-            //         background-color: #b9b9b921;
-            //         margin: 8px;
-            //         line-height: 1.2em;
-            //         color: #616161;
-            //         font-size: 15px;
-            //         text-align: center;
-            //         word-wrap: break-word;
-            //         border-radius: 8px;
-            //     }
-            //     .chat21-header-modal-select-more-of-one-dept {
-            //         position: relative;
-            //         height: auto;
-            //         padding: 10px;
-            //         margin: 30px 0 0 0;
-            //     }
-            // } // end .chat21-sheet-header
-
-            // .c21-body-content  {
-            //     /* no conflict
-            //     https://stackoverflow.com/questions/28556520/jquery-widget-css-conflicts-with-third-party-site */
-            //     /** CONTENT **/
-            //     .chat21-sheet-content {
-            //         position: absolute;
-            //         top: 0;
-            //         right: 0;
-            //         left: 0;
-            //         bottom: 43px;
-            //         overflow: hidden;
-            //         .time{
-            //             margin-bottom: 20px;
-            //         }
-            //         /* ====== SET SCROLLBAR ====== */
-            //         .chat21-conversation-parts-container {
-            //             height: 100%;
-            //             overflow-y: hidden;
-            //         }
-
-            //         #c21-contentScroll{
-            //             position: absolute;
-            //             left: 0px;
-            //             right: 10px;
-            //             padding: 10px;
-            //             // display: none;
-            //             opacity: 0;
-            //             -webkit-transition: opacity 0.5s; /* Safari */
-            //             transition: opacity 0.5s;
-            //             transition-timing-function: ease-in;
-            //         }
-            //         .chat21-conversation-parts-container::-webkit-scrollbar {
-            //             width: 8px;
-            //             background-color: #00000000!important;
-            //         } 
-            //         .chat21-conversation-parts-container::-webkit-scrollbar-track {
-            //             -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
-            //             background-color: #00000000!important;
-            //         }
-            //         .chat21-conversation-parts-container::-webkit-scrollbar-thumb {
-            //             border-radius: 6px!important;
-            //             -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0); 
-            //             background-color: #00000040!important;   
-            //         } 
-            //         #scroll-me {
-            //             height: 100%;
-            //             width: 100%;
-            //             overflow-y: auto;
-            //             overflow-x: hidden;
-            //             position: absolute;
-            //             top: 0;
-            //             right: 0;
-            //         }
-            //         #scroll-me:hover {
-            //             &::-webkit-scrollbar-thumb {
-            //                 background: #777777; 
-            //             }
-            //         }
-            //         .msg_container {
-            //             overflow: hidden;
-            //             display: flex;
-            //             opacity: 0px;
-            //         }
-            //         /* ====== SET MESSAGES ====== */
-            //         .messages {
-            //             border-radius: 8px;
-            //             padding: 0;
-            //             word-wrap: break-word;
-            //             // padding: 14px;
-            //             // 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;
-            //                 }
-            //             }
-                        
-            //         }
-            //         /* send message */
-            //         .base_sent {
-            //             align-items: flex-end;
-            //             justify-content: flex-end;
-            //             padding: 2px 0px 4px 40px;
-
-            //             .msg_sent {
-            //                 background-color: var(--themeColor);
-            //                 color: var(--foregroundColor);
-            //                 margin-right: 0;
-            //                 margin-left: 4px;
-            //                 max-width: calc(100% - 30px);
-            //                 min-width: 14px;
-            //             }
-            //             .message_innerhtml {
-            //                 padding: 8px;
-            //             }
-            //             .emoticon {
-            //                 background-color: transparent!important;
-            //                 font-size: 4em;
-            //                 .message_innerhtml {
-            //                     padding: 0;
-            //                     margin: 0;
-            //                 }
-            //             }                        
-                        
-            //             .status-message {
-            //                 width: 16px;
-            //                 height: 16px;
-            //                 margin-left: 4px;
-            //                 .icon {
-            //                     width: 13px;
-            //                     height: 13px;
-            //                     background-repeat: no-repeat;
-            //                     background-position: center;
-            //                     background-size: cover;
-            //                     overflow-x: hidden;
-            //                 }
-            //                 .c21-ico-schedule {
-            //                     background-image: url("../../../../assets/images/f21ico-schedule.svg");
-            //                 }
-            //                 .c21-ico-done {
-            //                     background-image: url("../../../../assets/images/f21ico-done.svg");
-            //                 }
-            //                 .c21-ico-done_all {
-            //                     background-image: url("../../../../assets/images/f21ico-done_all.svg");
-            //                 }
-            //             }
-                        
-            //         }
-    
-            //         /** recive message **/
-            //         .base_receive {
-            //             padding: 0px 0px 6px 0px;
-            //             /* avatar */
-            //             .content-avatar {
-            //                 position: relative;
-            //                 border-radius: 50%;
-            //                 width: 28px;
-            //                 height: 28px;
-            //                 margin-right: 6px;
-                        
-            //                 .profile_image{
-            //                     position: relative;
-            //                     width: 25px;
-            //                     height: 25px;
-            //                     border-radius: 50%;
-            //                     overflow: hidden;
-            //                     background-color: #ffffff;
-            //                     border: 1px solid #e2e2e2;
-            //                 }
-            //                 .profile_image img{
-            //                     max-width: 100%;
-            //                     width: 100%;
-            //                     height: 100%;
-            //                     min-width: 25px;
-            //                     min-height: 25px;
-            //                     object-fit: cover;
-            //                 }
-            //             }
-            //             /* message */
-            //             .msg_receive {
-            //                 background-color: $light-white;
-            //                 color: $black;
-            //                 // max-width: 260px;
-            //                 max-width: calc(100% - 70px);
-            //                 min-width: 14px;
-            //                 margin: 0 20px 4px 10px;
-            //                 height: fit-content;
-            //                 width: auto;
-            //             }
-            //             .message_innerhtml {
-            //                 padding: 14px;
-            //             }
-            //             .emoticon {
-            //                 background-color: transparent!important;
-            //                 font-size: 4em;
-            //                 .message_innerhtml {
-            //                     padding: 0;
-            //                     margin: 0;
-            //                 }
-            //             }                     
-            //         }
-    
-            //         .message_sender_fullname{
-            //             font-size: 1em;
-            //             color: $gray;
-            //             margin: 0 auto 4px auto;
-            //         }
-                    
-            //     } // end .chat21-sheet-content
-            // } // end .c21-body-content
-        } // end .c21-body-container
-    }
 }
 
 /* ================== CSS chat21-footer ==================== */ 
@@ -445,13 +60,13 @@
         z-index: 1;
         cursor: pointer;
         background-color: #ffffff;
-        border: 1px solid $trasp-light-gray;
+        border: 1px solid var(--trasp-light-gray);
         // -webkit-box-shadow: 0 3px 2px $trasp-light-black;
         // box-shadow: 0 3px 2px $trasp-light-black;
         text-align: center;
         svg {
             margin: auto;
-            fill: $gray;
+            fill: var(--gray);
         }
     }
     #chat21-buttonToBottom:hover {
@@ -487,44 +102,6 @@
     }
 }
 
-/* ==================== OPTION MENU CONTAINER ==================== */ 
-#c21-options-menu {
-    width: auto;
-    height: auto;
-    min-height: 40px;
-    min-width: 100px;
-    max-width: 80%;
-    position: absolute;
-    z-index: 10;
-    top: 40px;
-    right: 15px;
-    border-radius: 6px;
-    font-size: 1.2em;
-    line-height: normal;
-    overflow: hidden;
-    border: 1px solid #d7d7d7;
-    background-color: #ffffff;
-    padding: 10px 0px 10px 0px;
-    .c21-header-button {
-        padding: 6px 10px 6px 10px;
-        display: flex;
-        align-items: center;
-    }
-    .c21-header-button:hover {
-        background-color: whitesmoke;
-        cursor: pointer;
-    }
-    .label-menu-item{
-        line-height: 20px;
-        position: relative;
-        margin: 0 10px 0px 10px;
-    }
-    
-}
-
-
-
-
 /* ==================== MOBILE VERSION ==================== */ 
 @media (max-width: 451px) {
     #chat21-conversation-component {

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

@@ -1,11 +1,10 @@
-import { EventsService } from './../../../providers/events.service';
 import { ChatManager } from 'src/chat21-core/providers/chat-manager';
+import { EventsService } from './../../../providers/events.service';
 
 import { ConversationFooterComponent } from './../conversation-footer/conversation-footer.component';
 
 // tslint:disable-next-line:max-line-length
-import { ElementRef, Component, OnInit, OnChanges, AfterViewInit, Input, Output, ViewChild, EventEmitter, SimpleChanges, ChangeDetectorRef } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 
 import {
   CHANNEL_TYPE_DIRECT, CHANNEL_TYPE_GROUP, TYPE_MSG_TEXT,
@@ -17,36 +16,35 @@ import {
 import { MessageModel } from 'src/chat21-core/models/message';
 
 // utils
-import { isJustRecived, isPopupUrl} from 'src/app/utils/utils';
+import { isPopupUrl } from 'src/app/utils/utils';
 import { v4 as uuidv4 } from 'uuid';
 
 
 // Import the resized event model
 
-import {DomSanitizer} from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
 
-import { AppComponent } from '../../../app.component';
-import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
-import { ConversationHandlerService } from 'src/chat21-core/providers/abstract/conversation-handler.service';
-import { ConversationHandlerBuilderService } from 'src/chat21-core/providers/abstract/conversation-handler-builder.service';
-import { getDateDifference, getFromNow, popupUrl } from 'src/chat21-core/utils/utils';
-import { ConversationContentComponent } from '../conversation-content/conversation-content.component';
-import { ConversationsHandlerService } from 'src/chat21-core/providers/abstract/conversations-handler.service';
-import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { AppConfigService } from 'src/app/providers/app-config.service';
+import { StarRatingWidgetService } from 'src/app/providers/star-rating-widget.service';
+import { Globals } from 'src/app/utils/globals';
 import { ConversationModel } from 'src/chat21-core/models/conversation';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
+import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service';
+import { ConversationHandlerBuilderService } from 'src/chat21-core/providers/abstract/conversation-handler-builder.service';
+import { ConversationHandlerService } from 'src/chat21-core/providers/abstract/conversation-handler.service';
+import { ConversationsHandlerService } from 'src/chat21-core/providers/abstract/conversations-handler.service';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
 import { TypingService } from 'src/chat21-core/providers/abstract/typing.service';
-import { Globals } from 'src/app/utils/globals';
-import { AppConfigService } from 'src/app/providers/app-config.service';
-import { StarRatingWidgetService } from 'src/app/providers/star-rating-widget.service';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { TiledeskRequestsService } from 'src/chat21-core/providers/tiledesk/tiledesk-requests.service';
-import moment from 'moment';
-import { isUserBanned } from 'src/chat21-core/utils/utils-message';
 import { LIVE_PAGE } from 'src/chat21-core/utils/constants';
+import { getDateDifference, popupUrl } from 'src/chat21-core/utils/utils';
+import { isUserBanned } from 'src/chat21-core/utils/utils-message';
+import { AppComponent } from '../../../app.component';
+import { ConversationContentComponent } from '../conversation-content/conversation-content.component';
 // import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -337,14 +335,14 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   /**
    * do per scontato che this.userId esiste!!!
    */
-  initAll() {
+  async initAll() {
 
     this.logger.debug('[CONV-COMP] ------ 2: setConversation ------ ');
     this.setConversation();
 
     this.logger.debug('[CONV-COMP] ------ 3: connectConversation ------ ');
     // this.connectConversation();
-    this.initConversationHandler();
+    await this.initConversationHandler();
 
     this.logger.debug('[CONV-COMP] ------ 4: initializeChatManager ------ ');
     //this.initializeChatManager();
@@ -549,7 +547,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
    * carico messaggi
    * attendo x sec se nn arrivano messaggi visualizzo msg welcome
    */
-  initConversationHandler() {
+  async initConversationHandler() {
     const tenant = this.g.tenant;
     this.messages = [];
     //TODO-GAB: da sistemare loggedUser in firebase-conversation-handler.service
@@ -561,7 +559,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     this.logger.debug('[CONV-COMP] DETTAGLIO CONV - handler **************', handler, this.conversationWith);
     if (!handler) {
       this.conversationHandlerService = this.conversationHandlerBuilderService.build();
-      this.conversationHandlerService.initialize(
+      await this.conversationHandlerService.initialize(
         this.conversationWith,
         conversationWithFullname,
         loggedUser,