@chat21/chat21-web-widget 5.0.53-rc.4 → 5.0.53

package/CHANGELOG.md

@@ -1,19 +1,6 @@
 # chat21-web-widget ver 5.0
 
-### 5.0.53-rc.4
-- added: proactive rules from /widget/botsRules
-- added: imHere method for presence service
-- added: limit parameter to message-attachment component
-- added: send message on attachment button clicked on last-message component
-- added: events service
-- added: /requests/messages tiledesk api
-- added: convertConversationToMessage utils function in last-message component
-- changed: last-message UI
-- upgraded: chat21client.js to v0.1.12.4
-- changed: pipe files moved from /directives folder to /pipe folder
-- changed: moved isSender function from service to utils-message
-- bug-fixed: location.href and document.title is wrong (about:srcdoc)
-- bug-fixed: wait 2s before publish ImHere event to MQTT presence
+### 5.0.53 in PROD
 
 ### 5.0.53-rc.3
 - added: html descriptions to index.html and index-dev.html
@@ -23,6 +10,7 @@
 - removed: jquery plugin
 - removed: relativeLinkResolution from forRoot in RooterModule
 
+
 ### 5.0.53-rc.2
 - added: angular 15 engine
 - added: custom tooltip directive
@@ -38,6 +26,7 @@
 - removed: document.write() injection
 - removed: unused html test file
 
+
 ### 5.0.52 in PROD
 
 ### 5.0.52-rc.4

package/package.json

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

package/src/app/app.component.ts

@@ -148,7 +148,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     that.disposeWidget();
                     return;
                 }
- 
+
                 if(conversation.is_new && conversation.sender !== this.g.senderId && !isInfo(conversation)){
                     that.manageTabNotification();
                 }
@@ -167,12 +167,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 } else {
                     // if(conversation.is_new && isJustRecived(this.g.startedAt.getTime(), conversation.timestamp)){
                     //widget closed
-                    if(conversation.is_new && conversation.sender !== this.g.senderId && !isInfo(conversation)){
-                        that.lastConversation = conversation;
-                        that.g.isOpenNewMessage = true;
-                        that.logger.debug('[APP-COMP] lastconversationnn', that.lastConversation)
-                    }
-                    
+                    that.lastConversation = conversation;
+                    that.g.isOpenNewMessage = true;
+                    that.logger.debug('[APP-COMP] lastconversationnn', that.lastConversation)
 
                     let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
                     that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
@@ -401,12 +398,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     that.showWidget();
                 }
 
-                if(this.g.botsRules){
-                    const rules = new Rules(that.tiledeskRequestsService, that.appStorageService,that.g)
-                    rules.initRules(that.g.windowContext, that.g.tiledeskToken, user, that.generateNewUidConversation(), that.g.botsRules)
-                }
-
-
             } else if (state && state === AUTH_STATE_OFFLINE) {
                 /** non sono loggato */
                 that.logger.info('[APP-COMP] OFFLINE - NO CURRENT USER AUTENTICATE: ');
@@ -792,11 +783,11 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         if (CLIENT_BROWSER) {
             attributes['client'] = CLIENT_BROWSER;
         }
-        if (this.g.windowContext.window.location) {
-            attributes['sourcePage'] = this.g.windowContext.window.location.href;
+        if (location.href) {
+            attributes['sourcePage'] = location.href;
         }
-        if(this.g.windowContext.window.document){
-            attributes['sourceTitle'] = this.g.windowContext.window.document.title;
+        if(document.title){
+            attributes['sourceTitle'] = document.title;
         }
         if (projectid) {
             attributes['projectId'] = projectid;
@@ -1502,7 +1493,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             // this.g.windowContext.window.document.title = this.tabTitle
         } else {
             // TAB IS ACTIVE --> restore title and DO NOT SOUND
-            this.presenceService.imHere()
             clearInterval(this.setIntervalTime)
             this.setIntervalTime = null;
             this.isTabVisible = true;

package/src/app/app.module.ts

@@ -1,4 +1,3 @@
-import { EventsService } from './providers/events.service';
 
 // ************** COMPONENTS ************** //
 import { AppComponent } from './app.component';
@@ -62,9 +61,9 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
 import { INGXLoggerMetadata, LoggerModule, NGXLogger, NgxLoggerLevel, NGXLoggerServerService, TOKEN_LOGGER_SERVER_SERVICE } from "ngx-logger";
 
 //DIRECTIVES
-import { HtmlEntitiesEncodePipe } from './pipe/html-entities-encode.pipe';
-import { MarkedPipe } from './pipe/marked.pipe';
-import { SafeHtmlPipe } from './pipe/safe-html.pipe';
+import { HtmlEntitiesEncodePipe } from './directives/html-entities-encode.pipe';
+import { MarkedPipe } from './directives/marked.pipe';
+import { SafeHtmlPipe } from './directives/safe-html.pipe';
 
 //LOGGER SERVICES
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
@@ -194,7 +193,7 @@ export function conversationHandlerFactory(chat21Service: Chat21Service, appConf
   }
 }
 
-export function typingFactory(chat21Service: Chat21Service, appConfig: AppConfigService) {
+export function typingFactory(appConfig: AppConfigService) {
   const config = appConfig.getConfig()
   if (config.chatEngine === CHAT_ENGINE_MQTT) {
     return new MQTTTypingService();
@@ -203,10 +202,10 @@ export function typingFactory(chat21Service: Chat21Service, appConfig: AppConfig
   }
 }
 
-export function presenceFactory(chat21Service: Chat21Service, appConfig: AppConfigService) {
+export function presenceFactory(appConfig: AppConfigService) {
   const config = appConfig.getConfig()
   if (config.chatEngine === CHAT_ENGINE_MQTT) {
-    return new MQTTPresenceService(chat21Service);
+    return new MQTTPresenceService();
   } else {
     return new FirebasePresenceService();
   }
@@ -320,7 +319,6 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     Rules,
     GlobalSettingsService,
     SettingsSaverService,
-    EventsService,
     StarRatingWidgetService,
     {
       provide: APP_INITIALIZER,
@@ -365,12 +363,12 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     {
       provide: PresenceService,
       useFactory: presenceFactory,
-      deps: [Chat21Service, AppConfigService]
+      deps: [AppConfigService]
     },
     {
       provide: TypingService,
       useFactory: typingFactory,
-      deps: [Chat21Service, AppConfigService]
+      deps: [AppConfigService]
     },
     {
       provide: UploadService,

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

@@ -1,4 +1,3 @@
-import { EventsService } from './../../../providers/events.service';
 import { ChatManager } from 'src/chat21-core/providers/chat-manager';
 
 import { ConversationFooterComponent } from './../conversation-footer/conversation-footer.component';
@@ -183,8 +182,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     public typingService: TypingService,
     private tiledeskRequestService: TiledeskRequestsService,
     private changeDetectorRef: ChangeDetectorRef,
-    private elementRef: ElementRef,
-    private events: EventsService
+    private elementRef: ElementRef
   ) { }
 
   onResize(event){
@@ -830,18 +828,6 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       this.subscriptions.push(subscribe);
     }
 
-    subscribtionKey = 'lastMessage:attachmentButtonClicked';
-    this.events.subscribe('lastMessage:attachmentButtonClicked', (event: any) => {
-        this.logger.debug('[CONV-COMP] ***** lastMessage:attachmentButtonClicked *****', event);
-        if (event) {
-          const conversationUid = event.message.conversation_with; //support-group-...
-          if(this.conversationId === conversationUid){
-            this.onAttachmentButtonClicked(event)
-          }
-        }
-    });
-
-
   }
 
   checkMessagesLegntForTranscriptDownloadMenuOption(){

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

@@ -2,8 +2,8 @@ import { MomentModule } from 'ngx-moment';
 import { async, ComponentFixture, TestBed, waitForAsync, inject } from '@angular/core/testing';
 
 import { ConversationContentComponent } from './conversation-content.component';
-import { MarkedPipe } from '../../../pipe/marked.pipe';
-import { HtmlEntitiesEncodePipe } from '../../../pipe/html-entities-encode.pipe';
+import { MarkedPipe } from '../../../directives/marked.pipe';
+import { HtmlEntitiesEncodePipe } from '../../../directives/html-entities-encode.pipe';
 import { UploadService } from '../../../../chat21-core/providers/abstract/upload.service';
 import { CustomLogger } from '../../../../chat21-core/providers/logger/customLogger';
 import { LoggerInstance } from '../../../../chat21-core/providers/logger/loggerInstance';

package/src/app/component/last-message/last-message.component.html

@@ -1,94 +1,83 @@
-<div *ngIf="conversation && g.isOpenNewMessage" id="messagePreview" > 
+<div *ngIf="conversation && g.isOpenNewMessage" id="messagePreview">
   <!-- message recipient:: -->
+  <div role="messaggio" id="new_message">
 
-  <div class="headerPreviewMessage">
+    <div class="headerPreviewMessage">
 
-    <div class="boxButtons">
-      
-      <div role="button" tabindex="0" class="buttonMore" (click)="openConversationByID(conversation)">
-        <span>View more</span>
-      </div>
+        <div class="boxButtons">
+          
+          <div role="button" tabindex="0" class="buttonMore" (click)="openConversationByID(conversation)">
+            <span>View more</span>
+          </div>
 
-      <div aria-label="Dismiss" role="button" tabindex="0" class="buttonClose" (click)="closeMessagePreview()">
-        <span>
-          <svg aria-labelledby="altIconTitle" height="20px" role="img" viewBox="0 0 24 24" width="20px" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(255, 255, 255);">
-            <path d="M0 0h24v24H0V0z" fill="none"></path>
-            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
-          </svg>
-        </span>
-      </div>
+          <div aria-label="Dismiss" role="button" tabindex="0" class="buttonClose" (click)="closeMessagePreview()">
+            <span>
+              <svg aria-labelledby="altIconTitle" height="20px" role="img" viewBox="0 0 24 24" width="20px" xmlns="http://www.w3.org/2000/svg" style="fill: rgb(255, 255, 255);">
+                <path d="M0 0h24v24H0V0z" fill="none"></path>
+                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
+              </svg>
+            </span>
+          </div>
 
-    </div>
-
-</div>
-
-
-<div>
-    <!-- <div role="messaggio" class="c21-text message_sender_fullname">{{conversation.sender_fullname}}</div> -->
-    <!-- <img *ngIf="conversation.type == 'image' && conversation.metadata" class="message-content message-content-image"
-        [src]="conversation.metadata.src" [width]="getSizeImg(conversation).width"
-        [height]="getSizeImg(conversation).height" /> -->
-      
-    
-    <div class="previewNewMessagge msg_container" (click)="openConversationByID(conversation)">
-
-      <!-- <div *ngIf="isImage(conversation)">
-        <chat-image 
-          [metadata]="fileSelected"
-          [width]="fileSelected?.width"
-          [height]="fileSelected?.height">
-        </chat-image>
-      </div>
-
-      <div *ngIf="conversation.type == 'text'" class="c21-box-text">
-        <chat-text
-          [text]="conversation?.last_message_text"
-          [fontSize]="stylesMap?.get('fontSize')"
-          [fontFamily]="stylesMap?.get('fontFamily')">
-        </chat-text>
-      </div> -->
-
-      <chat-bubble-message class="messages no-background"
-        [class.emoticon]="isEmojii(message?.text)"
-        [ngClass]="{'button-in-msg' : message?.metadata && message?.metadata?.button}"
-        [message]="message"
-        [fontColor]="stylesMap.get('bubbleReceivedTextColor')"
-        [fontSize]="stylesMap.get('fontSize')"
-        [fontFamily]="stylesMap.get('fontFamily')"
-        [stylesMap]="stylesMap">
-      </chat-bubble-message>
+        </div>
 
-      <div class="c21-icon-avatar">
-        <div class="c21-avatar-image profile_image">
-          <chat-avatar-image class="slide-in-left"  
-            [senderID]="message?.sender"
-            [senderFullname]="message?.sender_fullname"
-            [baseLocation]="baseLocation">
-          </chat-avatar-image>
-        </div> 
-      </div>
-
-    </div>
-
-    <div *ngIf="message.attributes && message.attributes.attachment " class="conversations-buttons">
-      <chat-message-attachment 
-        style="height: 100%; display: block;"
-        [message]="message"
-        [isLastMessage] = "true"
-        [limit]="3"
-        [stylesMap]="stylesMap"
-        (onAttachmentButtonClicked)="onAttachmentButtonClicked($event)">
-      </chat-message-attachment>
     </div>
-
-
     
+    <div class="previewNewMessagge" (click)="openConversationByID(conversation)">
+        <div role="messaggio" class="c21-text message_sender_fullname">{{conversation.sender_fullname}}</div>
+        <!-- <img *ngIf="conversation.type == 'image' && conversation.metadata" class="message-content message-content-image"
+            [src]="conversation.metadata.src" [width]="getSizeImg(conversation).width"
+            [height]="getSizeImg(conversation).height" /> -->
+          
+        <!-- <div *ngIf="isImage(conversation)" class="c21-img">
+          <chat-image *ngIf="isImage(conversation)"
+            [metadata]="conversation?.metadata"
+            [width]="getMetadataSize(conversation?.metadata).width"
+            [height]="getMetadataSize(conversation?.metadata).height">
+          </chat-image>
+        </div> -->
+
+
+        <div *ngIf="conversation.type == 'text'" class="c21-box-text">
+            <div *ngIf="isPopupUrl(conversation.last_message_text); then contentPopup else contentNewTab">here
+                is ignored</div>
+            <ng-template #contentPopup>
+                <p class="c21-link"
+                    (click)="popupUrl(g.windowContext, conversation.last_message_text,'windowName')">{{strip_tags(conversation.last_message_text)}}
+                </p>
+            </ng-template>
+            <ng-template #contentNewTab>
+                <p class="c21-text overflow4Lines" [innerHTML]="conversation.last_message_text | htmlEntitiesEncode  | marked"></p>
+            </ng-template>
+
+            <!-- NOT AVAILABLE WITH FIREBASE DUE TO INCOMPATIBILITY WITH conversation OBJECT-->
+            <!-- <div *ngIf="conversation.attributes && conversation.attributes.attachment " class="slide-in-left" > 
+              <chat-message-attachment 
+                  style="height: 100%; display: block;"
+                  [message]="conversation"
+                  [isLastMessage] = "true"
+                  [stylesMap]="stylesMap"
+                  (onAttachmentButtonClicked)="onAttachmentButtonClicked($event)">
+              </chat-message-attachment>
+            </div>   -->
+        </div>
+
+        <div class="c21-time c21-text">
+            <time *ngIf="conversation.timestamp !== '{.sv: timestamp}'" >{{conversation.timestamp  | amTimeAgo}} </time>
+        </div>
+
+        <div class="c21-icon-avatar">
+            <div class="c21-avatar-image profile_image">
+              <chat-avatar-image class="slide-in-left"  
+                [senderID]="conversation.sender"
+                [senderFullname]="conversation.sender_fullname"
+                [baseLocation]="baseLocation">
+               </chat-avatar-image>
+              <!-- <img src="{{conversation.image}}" onError="this.src = 'https://s3.eu-west-1.amazonaws.com/tiledesk-widget/dev/2.0.4-beta.7/assets/images/avatar_bot_tiledesk.svg'" /> -->
+            </div> 
+        </div>
+    </div>
 
-    <!-- <div class="c21-time c21-text">
-        <time *ngIf="conversation.timestamp !== '{.sv: timestamp}'" >{{conversation.timestamp  | amTimeAgo}} </time>
-    </div> -->
-
-    
-</div>
+  </div>
 
 </div>

package/src/app/component/last-message/last-message.component.scss

@@ -1,5 +1,3 @@
-@import 'src/app/sass/variables';
-
 :host  .c21-avatar-image ::ng-deep > chat-avatar-image {
 
     .c21-icon-avatar { 
@@ -19,39 +17,32 @@
 }
 
 #messagePreview {
-    // position: relative;
-    // width: 320px;
-    // /* bottom: 90; */
-    // max-height: 200px;
-    // height: 200px; //100%;
-    // padding: 0px 10px 10px;
-    // background-color: transparent;
-
-    // font-family: "Helvetica Neue", "Apple Color Emoji", Helvetica, Arial, sans-serif;
-    // font-size: 100%;
-    // font-style: normal;
-    // letter-spacing: normal;
-    // font-stretch: normal;
-    // font-weight: normal;
-    // text-align: left;
-    // text-align-last: initial;
-    // text-indent: 0px;
-    // text-shadow: none;
-    // text-transform: none;
-    // box-sizing: content-box;
-    // -webkit-font-smoothing: antialiased;
-    // line-height: 1;
-    // font-variant: normal;
-
-    position: fixed;
-    // right: 5px;
-    bottom: 90px;
-    max-height: calc(100% - 75px);
-    width: 375px;
-    max-width: 100%;
-}
-
-#messagePreview:hover {
+    position: relative;
+    width: 320px;
+    /* bottom: 90; */
+    max-height: 200px;
+    height: 100%;
+    padding: 0px 10px 10px;
+    background-color: transparent;
+
+    font-family: "Helvetica Neue", "Apple Color Emoji", Helvetica, Arial, sans-serif;
+    font-size: 100%;
+    font-style: normal;
+    letter-spacing: normal;
+    font-stretch: normal;
+    font-weight: normal;
+    text-align: left;
+    text-align-last: initial;
+    text-indent: 0px;
+    text-shadow: none;
+    text-transform: none;
+    box-sizing: content-box;
+    -webkit-font-smoothing: antialiased;
+    line-height: 1;
+    font-variant: normal;
+}
+
+#new_message:hover {
     .boxButtons {
         display: block;
         -webkit-animation: fade-in-dw-up 0.3s ease-in 0.0s;
@@ -59,43 +50,17 @@
     }
 }
 
-
-.messages {
-    border-radius: $border-radius-bubble-message;
-    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;   
-}
-
-.no-background{
-    background: transparent!important;
-}
-
-.emoticon {
-    background-color: transparent!important;
-    font-size: 4em;
-    margin: -15px 20px -10px 10px;
-    .message_innerhtml {
-        padding: 0;
-        margin: 0;
-    }
-}
-
-
 .previewNewMessagge {
     position: relative;
     box-sizing: border-box;
     background-color: rgb(255, 255, 255);
-    box-shadow: rgba(0, 18, 46, 0.16) 0px 8px 12px 0px;
+    box-shadow: rgba(35, 47, 53, 0.09) 0px 2px 8px 0px;
     clear: both;
     margin-left: 45px;
     margin-bottom: 8px;
-    border-radius: 12px 12px 12px 0px;
-    padding: 5px;
+    border-radius: 5px 5px 5px 0px;
+    padding: 4;
+    font-size: 14px;
 }
 
 .previewNewMessagge::after {
@@ -112,43 +77,22 @@
     
 .c21-text.message_sender_fullname {
     font-size: 13px;
-    padding: 0px 10px;
-    margin: 4px 0px;
+    padding: 0 10;
+    margin: 4 0;
     clear: both;
     color: rgb(104, 104, 104);
 }
 
 .c21-box-text {
-    max-height: 110px;
-    height: 100%;
-    width: 100%;
+    max-height: 110;
     overflow-y: auto;
-    overflow-x: hidden;
-    border-radius: 12px 12px 12px 0px;
-
-    &::-webkit-scrollbar {
-        width: 6px;
-        background-color: #00000000!important;
-    } 
-
 }
 
-.c21-box-text:hover {
-    &::-webkit-scrollbar-track {
-        background-color: #f9f9f9 !important;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: #d3d6dc; 
-    }
-}
-
-
 .c21-text {
     font-size: 14px;
     color: black;
-    padding: 0px 10px; 
-    margin: 0px 0px;// margin: 4 0;
+    padding: 0 10; 
+    margin: 0 0;// margin: 4 0;
     line-height: 1.4;
     word-break: break-word;
 }
@@ -169,7 +113,7 @@
 
 .c21-text.c21-time {
     font-size: 13px;
-    padding: 0px 10px;
+    padding: 0 10;
     clear: both;
     color: rgb(115, 115, 118);
 }
@@ -207,7 +151,7 @@
 .headerPreviewMessage {
     position: relative;
     height: 40;// height: 50;
-    margin: 10px 0px 0px 50px;
+    margin: 10 0 0 50;
 }
 
 .boxButtons {
@@ -248,18 +192,18 @@
 .buttonClose span {
     width: 32px;
     height: 32px;
-    padding: 0px;
+    padding: 0;
 }
 
 .buttonClose span svg {
-    padding: 6px;
+    padding: 6;
 }
 
 #new_message {
     position: absolute;
-    left: 0px;
-    right: 10px;
-    bottom: 0px;
+    left: 0;
+    right: 10;
+    bottom: 0;
 }
 
 /* ==================== MOBILE VERSION ==================== */ 

package/src/app/component/last-message/last-message.component.spec.ts

@@ -1,11 +1,11 @@
-import { MarkedPipe } from './../../pipe/marked.pipe';
+import { MarkedPipe } from './../../directives/marked.pipe';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ImageRepoService } from '../../../chat21-core/providers/abstract/image-repo.service';
 import { Globals } from '../../utils/globals';
 
 import { LastMessageComponent } from './last-message.component';
-import { HtmlEntitiesEncodePipe } from '../../pipe/html-entities-encode.pipe';
+import { HtmlEntitiesEncodePipe } from '../../directives/html-entities-encode.pipe';
 
 describe('LastMessageComponent', () => {
   let component: LastMessageComponent;