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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # 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-rc.3
 - added: html descriptions to index.html and index-dev.html
 - changed: script tag for style.css to link tag with rel="stylesheet"
@@ -8,7 +23,6 @@
 - removed: jquery plugin
 - removed: relativeLinkResolution from forRoot in RooterModule
 
-
 ### 5.0.53-rc.2
 - added: angular 15 engine
 - added: custom tooltip directive
@@ -24,7 +38,6 @@
 - 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.3",
+  "version": "5.0.53-rc.4",
   "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,9 +167,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 } else {
                     // if(conversation.is_new && isJustRecived(this.g.startedAt.getTime(), conversation.timestamp)){
                     //widget closed
-                    that.lastConversation = conversation;
-                    that.g.isOpenNewMessage = true;
-                    that.logger.debug('[APP-COMP] lastconversationnn', that.lastConversation)
+                    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)
+                    }
+                    
 
                     let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
                     that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
@@ -398,6 +401,12 @@ 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: ');
@@ -783,11 +792,11 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         if (CLIENT_BROWSER) {
             attributes['client'] = CLIENT_BROWSER;
         }
-        if (location.href) {
-            attributes['sourcePage'] = location.href;
+        if (this.g.windowContext.window.location) {
+            attributes['sourcePage'] = this.g.windowContext.window.location.href;
         }
-        if(document.title){
-            attributes['sourceTitle'] = document.title;
+        if(this.g.windowContext.window.document){
+            attributes['sourceTitle'] = this.g.windowContext.window.document.title;
         }
         if (projectid) {
             attributes['projectId'] = projectid;
@@ -1493,6 +1502,7 @@ 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,3 +1,4 @@
+import { EventsService } from './providers/events.service';
 
 // ************** COMPONENTS ************** //
 import { AppComponent } from './app.component';
@@ -61,9 +62,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 './directives/html-entities-encode.pipe';
-import { MarkedPipe } from './directives/marked.pipe';
-import { SafeHtmlPipe } from './directives/safe-html.pipe';
+import { HtmlEntitiesEncodePipe } from './pipe/html-entities-encode.pipe';
+import { MarkedPipe } from './pipe/marked.pipe';
+import { SafeHtmlPipe } from './pipe/safe-html.pipe';
 
 //LOGGER SERVICES
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
@@ -193,7 +194,7 @@ export function conversationHandlerFactory(chat21Service: Chat21Service, appConf
   }
 }
 
-export function typingFactory(appConfig: AppConfigService) {
+export function typingFactory(chat21Service: Chat21Service, appConfig: AppConfigService) {
   const config = appConfig.getConfig()
   if (config.chatEngine === CHAT_ENGINE_MQTT) {
     return new MQTTTypingService();
@@ -202,10 +203,10 @@ export function typingFactory(appConfig: AppConfigService) {
   }
 }
 
-export function presenceFactory(appConfig: AppConfigService) {
+export function presenceFactory(chat21Service: Chat21Service, appConfig: AppConfigService) {
   const config = appConfig.getConfig()
   if (config.chatEngine === CHAT_ENGINE_MQTT) {
-    return new MQTTPresenceService();
+    return new MQTTPresenceService(chat21Service);
   } else {
     return new FirebasePresenceService();
   }
@@ -319,6 +320,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     Rules,
     GlobalSettingsService,
     SettingsSaverService,
+    EventsService,
     StarRatingWidgetService,
     {
       provide: APP_INITIALIZER,
@@ -363,12 +365,12 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     {
       provide: PresenceService,
       useFactory: presenceFactory,
-      deps: [AppConfigService]
+      deps: [Chat21Service, AppConfigService]
     },
     {
       provide: TypingService,
       useFactory: typingFactory,
-      deps: [AppConfigService]
+      deps: [Chat21Service, AppConfigService]
     },
     {
       provide: UploadService,

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

@@ -1,3 +1,4 @@
+import { EventsService } from './../../../providers/events.service';
 import { ChatManager } from 'src/chat21-core/providers/chat-manager';
 
 import { ConversationFooterComponent } from './../conversation-footer/conversation-footer.component';
@@ -182,7 +183,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     public typingService: TypingService,
     private tiledeskRequestService: TiledeskRequestsService,
     private changeDetectorRef: ChangeDetectorRef,
-    private elementRef: ElementRef
+    private elementRef: ElementRef,
+    private events: EventsService
   ) { }
 
   onResize(event){
@@ -828,6 +830,18 @@ 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 '../../../directives/marked.pipe';
-import { HtmlEntitiesEncodePipe } from '../../../directives/html-entities-encode.pipe';
+import { MarkedPipe } from '../../../pipe/marked.pipe';
+import { HtmlEntitiesEncodePipe } from '../../../pipe/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,83 +1,94 @@
-<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>
+      <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" (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 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 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>
+
+    
+
+    <!-- <div class="c21-time c21-text">
+        <time *ngIf="conversation.timestamp !== '{.sv: timestamp}'" >{{conversation.timestamp  | amTimeAgo}} </time>
+    </div> -->
+
+    
+</div>
 
 </div>

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

@@ -1,3 +1,5 @@
+@import 'src/app/sass/variables';
+
 :host  .c21-avatar-image ::ng-deep > chat-avatar-image {
 
     .c21-icon-avatar { 
@@ -17,32 +19,39 @@
 }
 
 #messagePreview {
-    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 {
+    // 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 {
     .boxButtons {
         display: block;
         -webkit-animation: fade-in-dw-up 0.3s ease-in 0.0s;
@@ -50,17 +59,43 @@
     }
 }
 
+
+.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(35, 47, 53, 0.09) 0px 2px 8px 0px;
+    box-shadow: rgba(0, 18, 46, 0.16) 0px 8px 12px 0px;
     clear: both;
     margin-left: 45px;
     margin-bottom: 8px;
-    border-radius: 5px 5px 5px 0px;
-    padding: 4;
-    font-size: 14px;
+    border-radius: 12px 12px 12px 0px;
+    padding: 5px;
 }
 
 .previewNewMessagge::after {
@@ -77,22 +112,43 @@
     
 .c21-text.message_sender_fullname {
     font-size: 13px;
-    padding: 0 10;
-    margin: 4 0;
+    padding: 0px 10px;
+    margin: 4px 0px;
     clear: both;
     color: rgb(104, 104, 104);
 }
 
 .c21-box-text {
-    max-height: 110;
+    max-height: 110px;
+    height: 100%;
+    width: 100%;
     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: 0 10; 
-    margin: 0 0;// margin: 4 0;
+    padding: 0px 10px; 
+    margin: 0px 0px;// margin: 4 0;
     line-height: 1.4;
     word-break: break-word;
 }
@@ -113,7 +169,7 @@
 
 .c21-text.c21-time {
     font-size: 13px;
-    padding: 0 10;
+    padding: 0px 10px;
     clear: both;
     color: rgb(115, 115, 118);
 }
@@ -151,7 +207,7 @@
 .headerPreviewMessage {
     position: relative;
     height: 40;// height: 50;
-    margin: 10 0 0 50;
+    margin: 10px 0px 0px 50px;
 }
 
 .boxButtons {
@@ -192,18 +248,18 @@
 .buttonClose span {
     width: 32px;
     height: 32px;
-    padding: 0;
+    padding: 0px;
 }
 
 .buttonClose span svg {
-    padding: 6;
+    padding: 6px;
 }
 
 #new_message {
     position: absolute;
-    left: 0;
-    right: 10;
-    bottom: 0;
+    left: 0px;
+    right: 10px;
+    bottom: 0px;
 }
 
 /* ==================== MOBILE VERSION ==================== */ 

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

@@ -1,11 +1,11 @@
-import { MarkedPipe } from './../../directives/marked.pipe';
+import { MarkedPipe } from './../../pipe/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 '../../directives/html-entities-encode.pipe';
+import { HtmlEntitiesEncodePipe } from '../../pipe/html-entities-encode.pipe';
 
 describe('LastMessageComponent', () => {
   let component: LastMessageComponent;