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

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # 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"
+- changed: binding to tiledesk iframe from scr to srcdoc 
+- removed: base_script.html 
+- removed: jquery plugin
+- removed: relativeLinkResolution from forRoot in RooterModule
+
 ### 5.0.53-rc.2
 - added: angular 15 engine
 - added: custom tooltip directive
@@ -15,7 +38,6 @@
 - removed: document.write() injection
 - removed: unused html test file
 
-
 ### 5.0.52 in PROD
 
 ### 5.0.52-rc.4

package/angular.json

@@ -46,7 +46,6 @@
             ],
             "scripts": [
               "src/assets/js/mqtt/4.2.6/mqtt.min.js",
-              "node_modules/jquery/dist/jquery.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.min.js",
               "node_modules/popper.js/dist/umd/popper.min.js"
             ],
@@ -55,7 +54,8 @@
             "buildOptimizer": false,
             "allowedCommonJsDependencies": [
               "rxjs-compat",
-              "moment"
+              "moment",
+              "idb"
             ],
             "sourceMap": true,
             "optimization": false,
@@ -142,8 +142,7 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": [

package/karma.conf.js

@@ -7,6 +7,7 @@ module.exports = function (config) {
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
+      require('karma-coverage'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.53-rc.2",
-  "license": "MIT License",
+  "version": "5.0.53-rc.4",
+  "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
     "@angular/platform-browser": "^15.0.4",
     "@angular/platform-browser-dynamic": "^15.0.4",
     "@angular/router": "^15.0.4",
-    "@ctrl/ngx-emoji-mart": "^5.1.2",
+    "@ctrl/ngx-emoji-mart": "^7.1.0",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^4.0.0",
     "@popperjs/core": "^2.11.5",
@@ -38,7 +38,6 @@
     "file-saver": "^2.0.5",
     "firebase": "^8.6.7",
     "humanize-duration-ts": "^2.1.1",
-    "jquery": "^3.6.0",
     "marked": "^4.0.16",
     "moment": "^2.29.3",
     "ngx-logger": "^5.0.11",
@@ -62,12 +61,13 @@
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~6.3.20",
     "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "^2.2.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
     "ts-node": "~7.0.0",
     "tslint": "~6.1.0",
-    "typescript": "4.8.4"
+    "typescript": "^4.8.4"
   }
 }

package/src/app/app-routing.module.ts

@@ -5,7 +5,7 @@ import { Routes, RouterModule } from '@angular/router';
 const routes: Routes = [];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
+  imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

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>