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

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

@@ -1,3 +1,6 @@
+import { MessageModel } from './../../../chat21-core/models/message';
+import { UserModel } from './../../../chat21-core/models/user';
+import { EventsService } from './../../providers/events.service';
 import { Component, OnInit, Output, OnDestroy, AfterViewInit, EventEmitter, Input, SimpleChanges } from '@angular/core';
 import { Subscription } from 'rxjs';
 // services
@@ -6,9 +9,9 @@ import { Globals } from 'src/app/utils/globals';
 // utils
 import { popupUrl, isPopupUrl, strip_tags } from '../../utils/utils';
 
-import { MAX_WIDTH_IMAGES} from 'src/app/utils/constants';
+import { MIN_WIDTH_IMAGES } from 'src/app/utils/constants';
 import { ConversationModel } from 'src/chat21-core/models/conversation';
-import { isImage } from 'src/chat21-core/utils/utils-message';
+import { conversationToMessage, isEmojii, isImage } from 'src/chat21-core/utils/utils-message';
 import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
@@ -30,15 +33,14 @@ export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
   subscriptions: Subscription[] = []; /** */
   // ========= end:: sottoscrizioni ======= //
 
-  isPopupUrl = isPopupUrl;
-  popupUrl = popupUrl;
-  strip_tags = strip_tags;
-  isImage = isImage;
-
+  isEmojii = isEmojii;
+  
   private logger: LoggerService = LoggerInstance.getInstance();
+  public fileSelected: any;
+  public message: MessageModel;
   
   constructor(
-    private imageRepoService: ImageRepoService,
+    private events: EventsService,
     public g: Globals,
     // public conversationsService: ConversationsService
   ) { }
@@ -54,32 +56,52 @@ export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
   ngOnChanges(changes: SimpleChanges) {
     this.logger.debug('[LASTMESSAGE] onChanges', changes)
     if(this.conversation){
-      this.conversation.image = this.imageRepoService.getImagePhotoUrl(this.conversation.sender)
+      this.message = conversationToMessage(this.conversation, this.g.senderId)
+      console.log('messsageeeeeeeee', this.message)
+      // if(isImage(this.conversation)){
+      //   this.fileSelected = Object.assign({}, this.conversation.metadata)
+      //   this.fileSelected = Object.assign(this.fileSelected, this.getMetadataSize(this.fileSelected))
+      // }
     }
   }
 
-  /**
-   *
-   * @param message
-   */
-  getMetadataSize(metadata): any {
-    if(metadata.width === undefined){
-      metadata.width= MAX_WIDTH_IMAGES
-    }
-    if(metadata.height === undefined){
-      metadata.height = MAX_WIDTH_IMAGES
-    }
+  
+
+  getMetadataSize(metadata): {width, height} {
+    const MAX_WIDTH_IMAGES_PREVIEW = 230
+    const MAX_HEIGHT_IMAGES_PREIEW = 150
+    // if(metadata.width === undefined){
+    //   metadata.width= MAX_WIDTH_IMAGES_PREVIEW
+    // }
+    // if(metadata.height === undefined){
+    //   metadata.height = MAX_HEIGHT_IMAGES_PREIEW
+    // }
     // const MAX_WIDTH_IMAGES = 300;
+    
     const sizeImage = {
         width: metadata.width,
         height: metadata.height
     };
-    //   that.g.wdLog(['message::: ', metadata);
-    if (metadata.width && metadata.width > (MAX_WIDTH_IMAGES)) {
-        const rapporto = (metadata['width'] / metadata['height']);
-        sizeImage.width = MAX_WIDTH_IMAGES;
-        sizeImage.height = (MAX_WIDTH_IMAGES) / rapporto;
+
+    
+    // SCALE IN WIDTH --> for horizontal images
+    if (metadata.width && metadata.width > MAX_WIDTH_IMAGES_PREVIEW) {
+      const ratio = (metadata['width'] / metadata['height']);
+      sizeImage.width = metadata.width = MAX_WIDTH_IMAGES_PREVIEW;
+      sizeImage.height = metadata.height = MAX_WIDTH_IMAGES_PREVIEW / ratio;
+    } else if(metadata.width && metadata.width <= 55){
+      const ratio = (metadata['width'] / metadata['height']);
+      sizeImage.width = MIN_WIDTH_IMAGES;
+      sizeImage.height = MIN_WIDTH_IMAGES / ratio;
     }
+
+    // SCALE IN HEIGHT --> for vertical images
+    if(metadata.height && metadata.height > MAX_HEIGHT_IMAGES_PREIEW){
+      const ratio = (MAX_HEIGHT_IMAGES_PREIEW / metadata['width']);
+      sizeImage.width = MAX_HEIGHT_IMAGES_PREIEW / ratio;
+      sizeImage.height = MAX_HEIGHT_IMAGES_PREIEW ;
+    }
+
     return sizeImage; // h.toString();
   }
 
@@ -90,6 +112,8 @@ export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
   onAttachmentButtonClicked(event: any){
     // this.onAttachmentButtonClicked.emit(event)
     this.logger.debug('[LASTMESSAGE] onAttachmentButtonClicked', event)
+    this.events.publish('lastMessage:attachmentButtonClicked', event)
+    this.openConversationByID(this.conversation);
   }
   /** */
   openConversationByID(conversation) {

package/src/app/component/list-all-conversations/list-all-conversations.component.ts

@@ -149,7 +149,7 @@ export class ListAllConversationsComponent implements OnInit, OnDestroy, AfterVi
   }
 
   onConversationLoadedFN(conversation: ConversationModel){
-    this.logger.debug('[LISTALLCONVERSATIONS] onImageLoadedFN', conversation)
+    this.logger.debug('[LISTALLCONVERSATIONS] onConversationLoadedFN', conversation)
   }
 
   // private openConversationByID(conversation) {

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

@@ -80,11 +80,6 @@
     </div>
   
   </div>
-  
-  <!-- icon status message -->
-  <!-- <chat-return-receipt *ngIf="isSender"
-    [status]="message.status">
-  </chat-return-receipt> -->
 
 
   

package/src/app/component/message/html/html.component.spec.ts

@@ -1,4 +1,4 @@
-import { SafeHtmlPipe } from './../../../directives/safe-html.pipe';
+import { SafeHtmlPipe } from './../../../pipe/safe-html.pipe';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { HtmlComponent } from './html.component';

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

@@ -2,7 +2,7 @@ import { CustomLogger } from './../../../../chat21-core/providers/logger/customL
 import { LoggerInstance } from './../../../../chat21-core/providers/logger/loggerInstance';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MarkedPipe } from '../../../directives/marked.pipe';
+import { MarkedPipe } from '../../../pipe/marked.pipe';
 
 import { InfoMessageComponent } from './info-message.component';
 import { NGXLogger } from 'ngx-logger';

package/src/app/component/message/text/text.component.scss

@@ -25,4 +25,8 @@ p {
     font-variant: normal;
     font-weight: 300;
     overflow: hidden;
+}
+
+p ::ng-deep a {
+    word-break: break-all
 }

package/src/app/component/message/text/text.component.spec.ts

@@ -1,5 +1,5 @@
-import { HtmlEntitiesEncodePipe } from './../../../directives/html-entities-encode.pipe';
-import { MarkedPipe } from './../../../directives/marked.pipe';
+import { HtmlEntitiesEncodePipe } from './../../../pipe/html-entities-encode.pipe';
+import { MarkedPipe } from './../../../pipe/marked.pipe';
 import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { TextComponent } from './text.component';

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

@@ -1,7 +1,7 @@
 <div id="buttons-in-message">
   <div class="buttons-wrapper">
 
-    <span *ngFor="let button of buttons" class="div-button">
+    <span *ngFor="let button of buttons | slice:0:limit" class="div-button">
       
       <chat-text-button-attachment *ngIf="button.type === 'text' && isLastMessage === true" class="div-button"
         [button]="button"

package/src/app/component/message-attachment/message-attachment.component.ts

@@ -14,6 +14,8 @@ export class MessageAttachmentComponent implements OnInit {
   @Input() message: MessageModel;
   @Input() isConversationArchived: boolean;
   @Input() isLastMessage: boolean;
+  @Input() fullscreenMode: boolean;
+  @Input() limit: number;
   @Input() stylesMap: Map<string, string>;
   @Output() onAttachmentButtonClicked = new EventEmitter<any>();
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>()

package/src/app/providers/events.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { EventsService } from './events.service';
+
+describe('EventsService', () => {
+  let service: EventsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(EventsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/app/providers/events.service.ts

@@ -0,0 +1,76 @@
+import { Injectable } from '@angular/core';
+export type EventHandler = (...args: any[]) => any;
+@Injectable({
+  providedIn: 'root'
+})
+export class EventsService {
+  private c = new Map<string, EventHandler[]>();
+  constructor() { }
+
+  /**
+   * Subscribe to an event topic. Events that get posted to that topic will trigger the provided handler.
+   *
+   * @param topic the topic to subscribe to
+   * @param handler the event handler
+   */
+  subscribe(topic: string, ...handlers: EventHandler[]) {
+    let topics = this.c.get(topic);
+    if (!topics) {
+      this.c.set(topic, topics = []);
+    }
+    topics.push(...handlers);
+  }
+
+  /**
+   * Unsubscribe from the given topic. Your handler will no longer receive events published to this topic.
+   *
+   * @param topic the topic to unsubscribe from
+   * @param handler the event handler
+   *
+   * @return true if a handler was removed
+   */
+  unsubscribe(topic: string, handler?: EventHandler): boolean {
+    if (!handler) {
+      return this.c.delete(topic);
+    }
+
+    const topics = this.c.get(topic);
+    if (!topics) {
+      return false;
+    }
+
+    // We need to find and remove a specific handler
+    const index = topics.indexOf(handler);
+
+    if (index < 0) {
+      // Wasn't found, wasn't removed
+      return false;
+    }
+    topics.splice(index, 1);
+    if (topics.length === 0) {
+      this.c.delete(topic);
+    }
+    return true;
+  }
+
+  /**
+   * Publish an event to the given topic.
+   *
+   * @param topic the topic to publish to
+   * @param eventData the data to send as the event
+   */
+  publish(topic: string, ...args: any[]): any[] | null {
+    const topics = this.c.get(topic);
+    if (!topics) {
+      return null;
+    }
+    return topics.map(handler => {
+      try {
+        return handler(...args);
+      } catch (e) {
+        console.error(e);
+        return null;
+      }
+    });
+  }
+}

package/src/app/providers/global-settings.service.ts

@@ -408,12 +408,17 @@ export class GlobalSettingsService {
             this.logger.error('[GLOBAL-SET] setVariablesFromService > Error is departments: ', error);
         }
 
-        // DEPARTMENTS
-        // if (response && response.departments !== null) {
-        //     this.logger.debug('[GLOBAL-SET] response DEP ::::', response.departments);
-        //     // globals.setParameter('departments', response.departments);
-        //     this.initDepartments(response.departments);
-        // }
+        // BOTS_RULES
+        try{
+            const botsRules = response.botsRules
+            if (typeof botsRules !== 'undefined') {
+                this.logger.debug('[GLOBAL-SET] setVariablesFromService > botsRules ::::', botsRules);
+                this.globals.botsRules = botsRules
+            }
+        }catch(error){
+            this.logger.error('[GLOBAL-SET] setVariablesFromService > Error is botsRules: ', error);
+        }
+        
 
         // AVAILABLE AGENTS
         try {
@@ -427,12 +432,6 @@ export class GlobalSettingsService {
             this.logger.error('[GLOBAL-SET] setVariablesFromService > Error is departments: ', error);
         }
 
-        // AVAILABLE AGENTS
-        // if (response && response.user_available !== null) {
-        //     //this.logger.error('[GLOBAL-SET] setVariablesFromService > user_available ::::', response.user_available);
-        //     this.setAvailableAgentsStatus(response.user_available);
-        // }
-
         // WIDGET
         try {
             const variables = response.project.widget;

package/src/app/utils/globals.ts

@@ -14,6 +14,7 @@ import { DepartmentModel } from 'src/models/department';
 import { avatarPlaceholder, detectIfIsMobile, getParameterByName, setColorFromString } from 'src/app/utils/utils';
 import { ConversationModel } from 'src/chat21-core/models/conversation';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
+import { Rule } from 'src/models/rule';
 
 @Injectable({
     providedIn: 'root'
@@ -24,7 +25,7 @@ export class Globals {
   obsIsOpen = new BehaviorSubject<boolean>(null);
 
   BASE_LOCATION = 'https://widget.tiledesk.com/v2';
-  POWERED_BY ='<a tabindex="-1" target="_blank" href="http://www.tiledesk.com/"><img src="https://support-pre.tiledesk.com/dashboard/assets/img/logos/tiledesk-logo_new_gray.svg"/></a>'
+  POWERED_BY ='<a tabindex="-1" target="_blank" href="http://www.tiledesk.com/?utm_source=widget"><img src="https://support-pre.tiledesk.com/dashboard/assets/img/logos/tiledesk-logo_new_gray.svg"/></a>'
   DEFAULT_LOGO_CHAT = '/assets/images/tiledesk_logo_white_small.svg';
   WIDGET_TITLE = 'Tiledesk';
 
@@ -64,6 +65,8 @@ export class Globals {
   isOpenMenuOptions: boolean;
   isOpenPrechatForm: boolean;
 
+  botsRules: Rule[];
+
   // areAgentsAvailable = false;
   areAgentsAvailableText: string;
   availableAgentsStatus = false; // indica quando è impostato lo stato degli agenti nel subscribe

package/src/app/utils/rules.ts

@@ -1,13 +1,96 @@
+import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
+import { Globals } from './globals';
+import { UserModel } from './../../chat21-core/models/user';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-export class Rules {
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { TiledeskRequestsService } from 'src/chat21-core/providers/tiledesk/tiledesk-requests.service';
+import { Inject, Injectable } from '@angular/core';
+import { IRules, Rule } from 'src/models/rule';
+import { getDateDifference } from 'src/chat21-core/utils/utils';
+
 
-    private url = window.location
+@Injectable({
+    providedIn: 'root'
+  })
+export class Rules {
 
+    private windowContext:Window = window
+    private tiledeskToken: string;
+    private currentUser: UserModel;
+    private request_id: string;
+    private rules: Rule[]
     private logger: LoggerService = LoggerInstance.getInstance()
-    constructor(){}
+    constructor(
+        private tiledeskRequestsService: TiledeskRequestsService,
+        private appStorageService: AppStorageService,
+        private g: Globals
+    ){}
+
+
+    initRules(context: Window, tiledeskToken: string, currentUser: UserModel, request_id: string, rules:Rule[]){
+        this.logger.info('[RULES] initRules',context, currentUser, rules)
+        this.windowContext = context
+        this.tiledeskToken = tiledeskToken
+        this.currentUser = currentUser
+        this.request_id = request_id
+        this.rules = rules
+        this.checkRules()
+    }
+
+    checkRules(){
+        this.rules.forEach((rule, index)=>{
+            if(rule.when && new RegExp(rule.when.urlMatches).test(this.windowContext.location.href)){
+                if(this.checkIfAlreadyDone(rule)){
+                    this.doAction(rule.do)
+                    return;
+                }
+                
+            }
+        })
+    }
 
-    initRules(){
-        console.log('locationnnnnnn', this.url)
+    private doAction(action: Rule['do']){
+        this.logger.info('[RULES] doAction', this.currentUser, action)
+        let message = action.filter(obj => Object.keys(obj).includes('message'))
+        let wait = action.filter(obj => Object.keys(obj).includes('wait'))
+        if(message && message.length>0){
+            message[0]['message'].attributes = { ...this.g.attributes, ...message[0]['message'].attributes}
+            message[0]['message'].userAgent = this.g.attributes['client']
+            message[0]['message'].request_id = this.request_id
+            message[0]['message'].sourcePage = this.g.attributes['sourcePage']
+            message[0]['message'].language = this.g.lang
+            message[0]['message'].departmentid = this.g.attributes.departmentId
+            console.log('message[0]', message[0]['message'])
+            setTimeout(() => {
+                this.tiledeskRequestsService.sendMessageToRequest(this.request_id, this.tiledeskToken, message[0]['message']) 
+                console.log('rulessss', this.appStorageService.getItem('_botsRules'))
+            }, wait[0]['wait']);
+        }
     }
+
+
+    private checkIfAlreadyDone(rule: Rule): boolean{
+        let storedRules = JSON.parse(this.appStorageService.getItem('_rules')) || {}
+        let canHandleAction: boolean = false
+        if(storedRules && storedRules.hasOwnProperty(rule.uid)){
+            let timeDifference = getDateDifference(storedRules[rule.uid], Date.now())
+            if(timeDifference.hours > rule.when.triggerEvery){
+                storedRules[rule.uid]= Date.now()
+                canHandleAction = true
+            }else{
+                canHandleAction = false
+            }
+        }else{
+            canHandleAction = true
+            storedRules[rule.uid]= Date.now()
+            
+        }
+        this.appStorageService.setItem('_rules', JSON.stringify(storedRules))
+        return canHandleAction
+    }
+
+
+
+
 }

package/src/assets/js/chat21client.js

@@ -1,7 +1,7 @@
 /*
     Chat21Client
 
-    v0.1.12.3
+    v0.1.12.4
 
     @Author Andrea Sponziello
     (c) Tiledesk 2020
@@ -966,7 +966,7 @@ class Chat21Client {
         if (this.client) {
             this.client.end()
         }
-        const presence_topic = 'apps/tilechat/users/' + this.user_id + '/presence/' + this.client_id
+        this.presence_topic = 'apps/tilechat/users/' + this.user_id + '/presence/' + this.client_id
         let options = {
             keepalive: 10,
             // protocolId: 'MQTT',
@@ -975,7 +975,7 @@ class Chat21Client {
             reconnectPeriod: 1000,
             // connectTimeout: 30 * 1000,
             will: {
-                topic: presence_topic,
+                topic: this.presence_topic,
                 payload: '{"disconnected":true}',
                 qos: 1,
                 retain: true
@@ -985,7 +985,7 @@ class Chat21Client {
             password: jwt,
             rejectUnauthorized: false
         }
-        if (this.log) {console.log("starting mqtt connection with LWT on:", presence_topic, this.endpoint)}
+        if (this.log) {console.log("starting mqtt connection with LWT on:", this.presence_topic, this.endpoint)}
         // client = mqtt.connect('mqtt://127.0.0.1:15675/ws',options)
         this.client = mqtt.connect(this.endpoint,options)
         
@@ -999,6 +999,15 @@ class Chat21Client {
                         callback();
                     });
                 }
+                this.client.publish(
+                    this.presence_topic,
+                    JSON.stringify({connected: true}),
+                    null, (err) => {
+                        if (err) {
+                            console.error("Error con presence publish:", err);
+                        }
+                    }
+                );
             }
         );
         this.client.on('reconnect',
@@ -1023,6 +1032,20 @@ class Chat21Client {
         );
     }
 
+    ImHere() {
+        if (this.client) {
+            this.client.publish(
+                this.presence_topic,
+                JSON.stringify({connected: true}),
+                null, (err) => {
+                    if (err) {
+                        console.error("Error on presence publish:", err);
+                    }
+                }
+            );
+        }
+    }
+
     close(callback) {
         if (this.topic_inbox) {
             this.client.unsubscribe(this.topic_inbox, (err)  => {

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

@@ -298,11 +298,6 @@
             setTimeout(() => {
                 document.getElementById("preloader").style.display = "none";
                 if(event_data && event_data.detail && event_data.detail.appConfigs){
-                    
-                    var enbedJs = event_data.detail.appConfigs.enbedJs? event_data.detail.appConfigs.enbedJs : false;
-                    document.getElementById("enbed").style.display = enbedJs? "inline-block": "none";
-                    document.getElementById("base_url").innerHTML = enbedJs ? baseUrl + '/launch.js': null;
-                    
                     baseUrlConsole = event_data.detail.appConfigs.dashboardUrl? event_data.detail.appConfigs.dashboardUrl : baseUrlConsole;
                 }
             }, 1000);

package/src/assets/twp/index-dev.html

@@ -437,7 +437,7 @@
                     
                     var enbedJs = event_data.detail.appConfigs.enbedJs? event_data.detail.appConfigs.enbedJs : false;
                     document.getElementById("enbed").style.display = enbedJs? "inline-block": "none";
-                    document.getElementById("base_url").innerHTML = enbedJs ? baseUrl + '/launch.js': null;
+                    document.getElementById("base_url").innerHTML = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
                     
                     baseUrlConsole = event_data.detail.appConfigs.dashboardUrl? event_data.detail.appConfigs.dashboardUrl : baseUrlConsole;
                 }

package/src/assets/twp/index.html

@@ -282,7 +282,7 @@
                     
                     var enbedJs = event_data.detail.appConfigs.enbedJs? event_data.detail.appConfigs.enbedJs : false;
                     document.getElementById("enbed").style.display = enbedJs? "inline-block": "none";
-                    document.getElementById("base_url").innerHTML = enbedJs ? baseUrl + '/launch.js': null;
+                    document.getElementById("base_url").innerHTML = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
                     
                     baseUrlConsole = event_data.detail.appConfigs.dashboardUrl? event_data.detail.appConfigs.dashboardUrl : baseUrlConsole;
                 }
@@ -296,11 +296,11 @@
                 document.getElementById("preloader").style.display = "none";
             }, 1000);
             //open widget after 3s if is closed
-            setTimeout(() => {
-                if(event_data && event_data.detail && event_data.detail.global && !event_data.detail.global.isOpen){
-                    window.Tiledesk('open')
-                }
-            }, 3000);
+            // setTimeout(() => {
+            //     if(event_data && event_data.detail && event_data.detail.global && !event_data.detail.global.isOpen){
+            //         window.Tiledesk('open')
+            //     }
+            // }, 3000);
         });
 
         window.Tiledesk('onAuthStateChanged', function(event_data) {

package/src/chat21-core/models/conversation.ts

@@ -20,6 +20,6 @@ export class ConversationModel {
     public color: string,
     public avatar: string,
     public archived: boolean,
-    public type: string,
+    public type: string
   ) { }
-}
+} 

package/src/chat21-core/models/upload.ts

@@ -5,6 +5,7 @@ export class UploadModel {
   url: string;
   progress: number;
   createdAt: Date = new Date();
+  
   constructor(file: File) {
     this.file = file;
   }

package/src/chat21-core/providers/abstract/presence.service.ts

@@ -31,5 +31,6 @@ export abstract class PresenceService {
   abstract userIsOnline(userid: string): Observable<any>
   abstract lastOnlineForUser(userid: string): void;
   abstract setPresence(userid: string): void;
+  abstract imHere():void;
   abstract removePresence(): void;
 }