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

package/src/app/component/home/home.component.html

@@ -73,9 +73,6 @@
         <div id="c21-whatsapp" *ngIf="g?.whatsappNumber && g?.whatsappNumber.trim() !== ''">
             <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openConversationOnPlatform('whatsapp')">
                 <span class="v-align-center">
-                    <!-- <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
-                      <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"  [ngStyle]="{'fill': g.themeForegroundColor}"/>
-                    </svg> -->
                     <svg aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" viewBox="0 0 1219.547 1225.016">
                         <path fill="#E0E0E0" d="M1041.858 178.02C927.206 63.289 774.753.07 612.325 0 277.617 0 5.232 272.298 5.098 606.991c-.039 106.986 27.915 211.42 81.048 303.476L0 1225.016l321.898-84.406c88.689 48.368 188.547 73.855 290.166 73.896h.258.003c334.654 0 607.08-272.346 607.222-607.023.056-162.208-63.052-314.724-177.689-429.463zm-429.533 933.963h-.197c-90.578-.048-179.402-24.366-256.878-70.339l-18.438-10.93-191.021 50.083 51-186.176-12.013-19.087c-50.525-80.336-77.198-173.175-77.16-268.504.111-278.186 226.507-504.503 504.898-504.503 134.812.056 261.519 52.604 356.814 147.965 95.289 95.36 147.728 222.128 147.688 356.948-.118 278.195-226.522 504.543-504.693 504.543z"/>
                         <linearGradient id="a" gradientUnits="userSpaceOnUse" x1="609.77" y1="1190.114" x2="609.77" y2="21.084">
@@ -87,6 +84,9 @@
                         <path fill="#FFF" d="M1036.898 176.091C923.562 62.677 772.859.185 612.297.114 281.43.114 12.172 269.286 12.039 600.137 12 705.896 39.633 809.13 92.156 900.13L7 1211.067l318.203-83.438c87.672 47.812 186.383 73.008 286.836 73.047h.255.003c330.812 0 600.109-269.219 600.25-600.055.055-160.343-62.328-311.108-175.649-424.53zm-424.601 923.242h-.195c-89.539-.047-177.344-24.086-253.93-69.531l-18.227-10.805-188.828 49.508 50.414-184.039-11.875-18.867c-49.945-79.414-76.312-171.188-76.273-265.422.109-274.992 223.906-498.711 499.102-498.711 133.266.055 258.516 52 352.719 146.266 94.195 94.266 146.031 219.578 145.992 352.852-.118 274.999-223.923 498.749-498.899 498.749z"/>
                         <title id="altIconTitle">Whatsapp</title>
                     </svg>
+                    <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28" focusable="false" viewBox="0 0 448 512" xml:space="preserve">
+                        <path stroke="#5f6368" stroke-width="8px" fill="#5f6368" d="M380.9,97.1C339,55.1,283.2,32,223.9,32c-122.4,0-222,99.6-222,222c0,39.1,10.2,77.3,29.6,111L0,480l117.7-30.9  c32.4,17.7,68.9,27,106.1,27h0.1c122.3,0,224.1-99.6,224.1-222C448,194.8,422.8,139.1,380.9,97.1z M223.9,438.7  c-33.2,0-65.7-8.9-94-25.7l-6.7-4l-69.8,18.3L72,359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2c0-101.7,82.8-184.5,184.6-184.5  c49.3,0,95.6,19.2,130.4,54.1s56.2,81.2,56.1,130.5C410.5,355.9,325.6,438.7,223.9,438.7z M325.1,300.5c-5.5-2.8-32.8-16.2-37.9-18  c-5.1-1.9-8.8-2.8-12.5,2.8c-3.7,5.6-14.3,18-17.6,21.8c-3.2,3.7-6.5,4.2-12,1.4c-32.6-16.3-54-29.1-75.5-66  c-5.7-9.8,5.7-9.1,16.3-30.3c1.8-3.7,0.9-6.9-0.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5c-3.2-0.2-6.9-0.2-10.6-0.2  c-3.7,0-9.7,1.4-14.8,6.9c-5.1,5.6-19.4,19-19.4,46.3s19.9,53.7,22.6,57.4c2.8,3.7,39.1,59.7,94.8,83.8c35.2,15.2,49,16.5,66.6,13.9  c10.7-1.6,32.8-13.4,37.4-26.4s4.6-24.1,3.2-26.4C334.3,304.6,330.6,303.2,325.1,300.5z"/>
+                    </svg> -->
                   </span>
                 <div class="clear"></div>
             </button>
@@ -94,9 +94,6 @@
         <div id="c21-telegram" *ngIf="g?.telegramUsername && g?.telegramUsername.trim() !== ''">
             <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openConversationOnPlatform('telegram')">
                 <span class="v-align-center">
-                    <!-- <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
-                      <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"  [ngStyle]="{'fill': g.themeForegroundColor}"/>
-                    </svg> -->
                     <svg aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0 0 368 368" style="enable-background:new 0 0 368 368;" xml:space="preserve">
                         <g id="XMLID_1_">
                             <linearGradient id="XMLID_7_" gradientUnits="userSpaceOnUse" x1="-66.831" y1="-68.1757" x2="-65.3102" y2="-68.1757" gradientTransform="matrix(-60 139.992 -139.992 -60 -13316.416 5324.4634)">
@@ -114,9 +111,8 @@
                         </g>
                         <title id="altIconTitle">Telegram</title>
                     </svg>
-                    <!-- <svg xmlns="http://www.w3.org/2000/svg"  width="20" height="20" viewBox="0 0 24 24">
-                        <path [ngStyle]="{'fill': g.themeForegroundColor}" d="M13.92,11.22s-1.22-.6-1.44-.68a.76.76,0,0,0-.27-.06.46.46,0,0,0-.4.24c-.12.17-.48.59-.59.72l-.05,0-.25-.1A6.22,6.22,0,0,1,8.54,9.26l0,0s.05-.06.07-.09l.2-.23.1-.11a1.36,1.36,0,0,0,.19-.31l0-.05a.54.54,0,0,0,0-.52c0-.06-.53-1.27-.58-1.4-.13-.31-.3-.45-.54-.45H7.88a3,3,0,0,0-1,.26,2.08,2.08,0,0,0-.77,1.76A3.78,3.78,0,0,0,7,10.17a.09.09,0,0,0,0,.05,7.81,7.81,0,0,0,3.33,2.89,5.37,5.37,0,0,0,2,.51h0l.32,0h.06a2.13,2.13,0,0,0,1.48-1,1.7,1.7,0,0,0,.09-1.08A.72.72,0,0,0,13.92,11.22Z" transform="translate(-1.83 -1.83)"/>
-                        <path [ngStyle]="{'fill': g.themeForegroundColor}" d="M10.14,1.83a8,8,0,0,0-8,8,7.86,7.86,0,0,0,1.1,4L1.85,17.89a.19.19,0,0,0,0,.21.21.21,0,0,0,.15.07h.06l4.24-1.35a8,8,0,0,0,11.82-7A8,8,0,0,0,10.14,1.83Zm0,14.27a6.37,6.37,0,0,1-3.49-1,.19.19,0,0,0-.12,0H6.47l-2.12.68.68-2a.22.22,0,0,0,0-.19A6.22,6.22,0,0,1,3.79,9.8a6.36,6.36,0,1,1,6.35,6.3Z" transform="translate(-1.83 -1.83)"/>
+                    <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" viewBox="0 0 448 512" xml:space="preserve">
+                        <path fill="#5f6368" d="M446.7,98.6l-67.6,318.8c-5.1,22.5-18.4,28.1-37.3,17.5l-103-75.9l-49.7,47.8c-5.5,5.5-10.1,10.1-20.7,10.1  l7.4-104.9l190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8,284L16.2,252.2c-22.1-6.9-22.5-22.1,4.6-32.7L418.2,66.4  C436.6,59.5,452.7,70.5,446.7,98.6z"/>
                     </svg> -->
                   </span>
                 <div class="clear"></div>
@@ -125,9 +121,6 @@
         <div id="c21-messanger" *ngIf="g?.messangerPageTitle && g?.messangerPageTitle.trim() !== ''">
             <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openConversationOnPlatform('messanger')">
                 <span class="v-align-center">
-                    <!-- <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
-                      <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"  [ngStyle]="{'fill': g.themeForegroundColor}"/>
-                    </svg> -->
                     <svg aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" width="26" height="26" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 800 800">
                         <radialGradient id="Gradient" cx="101.925" cy="809.0079" r="1.0896" gradientTransform="matrix(800 0 0 -799.9985 -81386 648000.75)" gradientUnits="userSpaceOnUse">
                          <stop offset="0" style="stop-color:#0099FF"/>
@@ -139,9 +132,8 @@
                         <path fill="#FFFFFF" d="M159.8,501.5l117.5-186.4c18.7-29.7,58.7-37,86.8-16l93.5,70.1c8.6,6.4,20.4,6.4,28.9-0.1    l126.2-95.8c16.8-12.8,38.8,7.4,27.6,25.3L522.7,484.9c-18.7,29.7-58.7,37-86.8,16l-93.5-70.1c-8.6-6.4-20.4-6.4-28.9,0.1    l-126.2,95.8C170.5,539.5,148.5,519.4,159.8,501.5z"/>
                         <title id="altIconTitle">Facebook Messanger</title>
                     </svg>
-                    <!-- <svg xmlns="http://www.w3.org/2000/svg"  width="20" height="20" viewBox="0 0 24 24">
-                        <path [ngStyle]="{'fill': g.themeForegroundColor}" d="M13.92,11.22s-1.22-.6-1.44-.68a.76.76,0,0,0-.27-.06.46.46,0,0,0-.4.24c-.12.17-.48.59-.59.72l-.05,0-.25-.1A6.22,6.22,0,0,1,8.54,9.26l0,0s.05-.06.07-.09l.2-.23.1-.11a1.36,1.36,0,0,0,.19-.31l0-.05a.54.54,0,0,0,0-.52c0-.06-.53-1.27-.58-1.4-.13-.31-.3-.45-.54-.45H7.88a3,3,0,0,0-1,.26,2.08,2.08,0,0,0-.77,1.76A3.78,3.78,0,0,0,7,10.17a.09.09,0,0,0,0,.05,7.81,7.81,0,0,0,3.33,2.89,5.37,5.37,0,0,0,2,.51h0l.32,0h.06a2.13,2.13,0,0,0,1.48-1,1.7,1.7,0,0,0,.09-1.08A.72.72,0,0,0,13.92,11.22Z" transform="translate(-1.83 -1.83)"/>
-                        <path [ngStyle]="{'fill': g.themeForegroundColor}" d="M10.14,1.83a8,8,0,0,0-8,8,7.86,7.86,0,0,0,1.1,4L1.85,17.89a.19.19,0,0,0,0,.21.21.21,0,0,0,.15.07h.06l4.24-1.35a8,8,0,0,0,11.82-7A8,8,0,0,0,10.14,1.83Zm0,14.27a6.37,6.37,0,0,1-3.49-1,.19.19,0,0,0-.12,0H6.47l-2.12.68.68-2a.22.22,0,0,0,0-.19A6.22,6.22,0,0,1,3.79,9.8a6.36,6.36,0,1,1,6.35,6.3Z" transform="translate(-1.83 -1.83)"/>
+                    <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="26" focusable="false"  viewBox="0 0 512 512"  xml:space="preserve">
+                        <path fill="#5f6368" d="M256.5,8C116.5,8,8,110.3,8,248.6c0,72.3,29.7,134.8,78.1,177.9c8.3,7.5,6.6,11.9,8.1,58.2  c0.4,11,9.6,19.6,20.6,19.2c2.5-0.1,5-0.6,7.3-1.7c52.9-23.3,53.6-25.1,62.6-22.7c153.3,42.2,319.4-55.9,319.4-231  C504,110.3,396.6,8,256.5,8z M405.8,193.1l-73,115.6c-11.1,17.4-34.1,22.6-51.6,11.5c-0.8-0.5-1.6-1-2.3-1.6l-58.1-43.5  c-5.3-4-12.7-4-18,0l-78.4,59.4c-10.5,7.9-24.2-4.6-17.1-15.7l73-115.6c11-17.4,34.1-22.6,51.6-11.6c0.8,0.5,1.6,1.1,2.4,1.6  l58.1,43.5c5.3,4,12.7,4,18,0l78.4-59.4C399.1,169.5,412.8,182,405.8,193.1L405.8,193.1z"/>
                     </svg> -->
                   </span>
                 <div class="clear"></div>

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

@@ -46,10 +46,7 @@
       <!-- <div *ngIf="message.type == 'text'"> -->     
 
         
-      <div *ngIf="message?.text" [tooltip]="timeTooltipLeft" [options]="tooltipOptions" placement="left" contentType="template" (click)="handleTooltipEvents($event)"> 
-        <ng-template #timeTooltipLeft>
-          <span>{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})</span>
-        </ng-template> 
+      <div *ngIf="message?.text" tooltip="{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})"> 
 
 
         <!-- [htmlEnabled]="(message?.type==='html')? true : false" -->

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

@@ -6,7 +6,7 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
 import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 import { isFile, isFrame, isImage, messageType } from 'src/chat21-core/utils/utils-message';
-import { MAX_WIDTH_IMAGES, MIN_WIDTH_IMAGES} from '../../../utils/constants';
+import { MAX_WIDTH_IMAGES, MIN_WIDTH_IMAGES} from 'src/chat21-core/utils/constants';
 
 @Component({
   selector: 'chat-bubble-message',
@@ -35,16 +35,6 @@ export class BubbleMessageComponent implements OnInit {
   MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;
   MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
  // ========== end:: check message type functions ======= //
-  
-  tooltipOptions = {
-    'show-delay': 500,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
   sizeImage : { width: number, height: number}
 
   private logger: LoggerService = LoggerInstance.getInstance()
@@ -119,32 +109,6 @@ export class BubbleMessageComponent implements OnInit {
     return sizeImage
   }
 
-  /**
-  * function customize tooltip
-  */
- handleTooltipEvents(event) {
-  const that = this;
-  const showDelay = this.tooltipOptions['showDelay'];
-  setTimeout(function () {
-    try {
-      const domRepresentation = document.getElementsByClassName('chat-tooltip');
-      if (domRepresentation) {
-        const item = domRepresentation[0] as HTMLInputElement;
-        if (!item.classList.contains('tooltip-show')) {
-          item.classList.add('tooltip-show');
-        }
-        setTimeout(function () {
-          if (item.classList.contains('tooltip-show')) {
-            item.classList.remove('tooltip-show');
-          }
-        }, that.tooltipOptions['hideDelayAfterClick']);
-      }
-    } catch (err) {
-        that.logger.error('[BUBBLE-MESSAGE] handleTooltipEvents >>>> Error :' + err);
-    }
-  }, showDelay);
-}
-
   // ========= begin:: event emitter function ============//
 
   // returnOpenAttachment(event: String) {

package/src/app/component/message/image/image.component.ts

@@ -17,15 +17,7 @@ export class ImageComponent implements OnInit {
 
   loading: boolean = true
   tooltipMessage: string;
-  tooltipOptions = {
-    'show-delay': 0,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
+  
 
   popupUrl = popupUrl;
   

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

@@ -6,10 +6,10 @@
     </div>
       
     <div style="max-width: 70%;">
-        <span class="base_info" [innerHTML]="message?.text | marked" [options]="tooltipOptions" [tooltip]="timeTooltipLeft"  placement="left" contentType="template"></span>
-        <ng-template #timeTooltipLeft>
+        <span class="base_info" [innerHTML]="message?.text | marked" tooltip="{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})"  placement="left" contentType="template"></span>
+        <!-- <ng-template #timeTooltipLeft>
             <span>{{message.timestamp | amTimeAgo}} ({{message.timestamp | amLocal | amDateFormat: 'L HH:mm:ss'}})</span>
-        </ng-template> 
+        </ng-template>  -->
     </div>
     
     <div class="spinner">

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

@@ -15,16 +15,6 @@ export class InfoMessageComponent implements OnInit {
 
   public message_text: string
   private logger: LoggerService = LoggerInstance.getInstance()
-
-  tooltipOptions = {
-    'show-delay': 500,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200
-  };
   
   constructor() { }
 

package/src/app/directives/tooltip.directive.spec.ts

@@ -0,0 +1,8 @@
+import { TooltipDirective } from './tooltip.directive';
+
+describe('TooltipDirective', () => {
+  // it('should create an instance', () => {
+  //   const directive = new TooltipDirective();
+  //   expect(directive).toBeTruthy();
+  // });
+});

package/src/app/directives/tooltip.directive.ts

@@ -0,0 +1,46 @@
+import { Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core';
+
+@Directive({
+  selector: '[tooltip]'
+})
+export class TooltipDirective implements OnDestroy{
+
+  @Input() tooltip: any; // The text for the tooltip to display
+  @Input() delay? = 190; // Optional delay input, in ms
+
+  private myPopup;
+  private timer;
+
+  constructor(private el: ElementRef) { }
+
+  ngOnDestroy(): void {
+    if (this.myPopup) { this.myPopup.remove() }
+  }
+
+  @HostListener('mouseenter') onMouseEnter() {
+    this.timer = setTimeout(() => {
+      let x = this.el.nativeElement.getBoundingClientRect().left + this.el.nativeElement.offsetWidth / 2; // Get the middle of the element
+      let y = this.el.nativeElement.getBoundingClientRect().top + this.el.nativeElement.offsetHeight + 6; // Get the bottom of the element, plus a little extra
+      this.createTooltipPopup(x, y);
+    }, this.delay)
+  }
+
+  @HostListener('mouseleave') onMouseLeave() {
+    if (this.timer) clearTimeout(this.timer);
+    if (this.myPopup) { this.myPopup.remove() }
+  }
+
+  private createTooltipPopup(x: number, y: number) {
+    let popup = document.createElement('div');
+    popup.innerHTML = this.tooltip;
+    popup.setAttribute("class", "tooltip-container");
+    popup.style.top = y.toString() + "px";
+    popup.style.left = x.toString() + "px";
+    document.body.appendChild(popup);
+    this.myPopup = popup;
+    setTimeout(() => {
+      if (this.myPopup) this.myPopup.remove();
+    }, 5000); // Remove tooltip after 5 seconds
+  }
+
+}

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

@@ -1673,12 +1673,12 @@ export class GlobalSettingsService {
 
         TEMP = getParameterByName(windowContext, 'tiledesk_singleConversation');
         if (TEMP) {
-            globals.singleConversation = stringToBoolean(TEMP);;
+            globals.singleConversation = stringToBoolean(TEMP);
         }
 
         TEMP = getParameterByName(windowContext, 'tiledesk_restartConversation');
         if (TEMP) {
-            globals.restartConversation = TEMP;
+            globals.restartConversation = stringToBoolean(TEMP);
         }
 
         TEMP = getParameterByName(windowContext, 'tiledesk_nativeRating');

package/src/app/utils/rules.ts

@@ -0,0 +1,13 @@
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+export class Rules {
+
+    private url = window.location
+
+    private logger: LoggerService = LoggerInstance.getInstance()
+    constructor(){}
+
+    initRules(){
+        console.log('locationnnnnnn', this.url)
+    }
+}

package/src/base_script.html

@@ -0,0 +1,57 @@
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+        <title>Tilechat Widget</title>
+        <link rel="icon" type="image/x-icon" href="favicon.ico">
+        <script>
+            var tiledeskScriptBaseLocation = window.location.href.replace("/base_script.html","");
+            
+            var link_2 = document.createElement('link')
+            link_2.setAttribute('rel', 'stylesheet')
+            link_2.setAttribute('type', 'text/css')
+            link_2.setAttribute('href', tiledeskScriptBaseLocation + '/assets/styles/tiledesk_v1.scss')
+            link_2.setAttribute('media','all')
+
+            var script_1 = document.createElement('script')
+            script_1.setAttribute('type','text/javascript')
+            script_1.setAttribute('src',tiledeskScriptBaseLocation + '/runtime.js')
+            var script_2 = document.createElement('script')
+            script_2.setAttribute('type','text/javascript')
+            script_2.setAttribute('src',tiledeskScriptBaseLocation + '/polyfills.js')
+            var link = document.createElement('link')
+            link.setAttribute('type','text/css')
+            link.setAttribute('rel','stylesheet')
+            link.setAttribute('href',tiledeskScriptBaseLocation + '/styles.css')
+            link.setAttribute('media','all')
+            var script_4 = document.createElement('script')
+            script_4.setAttribute('type','text/javascript')
+            script_4.setAttribute('src',tiledeskScriptBaseLocation + '/vendor.js')
+            var script_5 = document.createElement('script')
+            script_5.setAttribute('type','text/javascript')
+            script_5.setAttribute('src',tiledeskScriptBaseLocation + '/main.js')
+
+            
+            window.addEventListener("load", (event) => {
+
+                let head = document.getElementsByTagName('head')[0]
+                head.appendChild(link_2)
+
+                let body = document.getElementsByTagName('body')[0]
+                body.appendChild(script_1)
+                body.appendChild(script_2)
+                body.appendChild(link)
+                body.appendChild(script_4)
+                body.appendChild(script_5)
+            });
+        </script>
+    </head> 
+    <body>
+        <chat-root></chat-root>
+        <!-- <script type="text/javascript" src="http://localhost:4202/runtime.js"></script>
+        <script type="text/javascript" src="http://localhost:4202/polyfills.js"></script>
+        <script type="text/css" src="http://localhost:4202/styles.css"></script>
+        <script type="text/javascript" src="http://localhost:4202/vendor.js"></script>
+        <script type="text/javascript" src="http://localhost:4202/main.js"></script> -->
+    </body>
+</html>

package/src/chat21-core/providers/abstract/archivedconversations-handler.service.ts

@@ -7,14 +7,14 @@ import { ImageRepoService } from './image-repo.service';
 export abstract class ArchivedConversationsHandlerService {
 
   // BehaviorSubject
-  abstract BSConversationDetail: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);
-  abstract archivedConversationAdded: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);
-  abstract archivedConversationChanged: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);
-  abstract archivedConversationRemoved: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);
+  abstract BSConversationDetail: BehaviorSubject<ConversationModel>;
+  abstract archivedConversationAdded: BehaviorSubject<ConversationModel>;
+  abstract archivedConversationChanged: BehaviorSubject<ConversationModel>;
+  abstract archivedConversationRemoved: BehaviorSubject<ConversationModel>;
   // abstract readAllMessages: BehaviorSubject<string> = new BehaviorSubject<string>(null);
 
   // params
-  abstract archivedConversations: Array<ConversationModel> = [];
+  abstract archivedConversations: Array<ConversationModel>;
   abstract uidConvSelected: string;
   //abstract imageRepo: ImageRepoService;
 

package/src/chat21-core/providers/abstract/conversation-handler.service.ts

@@ -12,15 +12,15 @@ import { UserModel } from 'src/chat21-core/models/user';
 export abstract class ConversationHandlerService {
 
   // BehaviorSubject
-  abstract messageAdded: BehaviorSubject<MessageModel> = new BehaviorSubject<MessageModel>(null);
-  abstract messageChanged: BehaviorSubject<MessageModel> = new BehaviorSubject<MessageModel>(null);
-  abstract messageRemoved: BehaviorSubject<string> = new BehaviorSubject<string>(null);
-  abstract messageWait: BehaviorSubject<any> = new BehaviorSubject<any>(null);
-  abstract messageInfo: BehaviorSubject<MessageModel> = new BehaviorSubject<MessageModel>(null);
+  abstract messageAdded: BehaviorSubject<MessageModel>;
+  abstract messageChanged: BehaviorSubject<MessageModel>;
+  abstract messageRemoved: BehaviorSubject<string>;
+  abstract messageWait: BehaviorSubject<any>;
+  abstract messageInfo: BehaviorSubject<MessageModel>;
   
   // params
   abstract attributes: any;
-  abstract messages: Array<MessageModel> = [];
+  abstract messages: Array<MessageModel>;
   abstract conversationWith: string;
 
   constructor() {}

package/src/chat21-core/providers/abstract/conversations-handler.service.ts

@@ -14,15 +14,15 @@ import { ConversationModel } from './../../models/conversation';
 export abstract class ConversationsHandlerService {
 
   // BehaviorSubject
-  abstract BSConversationDetail: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);
-  abstract conversationAdded: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);
-  abstract conversationChanged: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);
-  abstract conversationChangedDetailed: BehaviorSubject<{value: ConversationModel, previousValue: ConversationModel}> = new BehaviorSubject<{value: ConversationModel, previousValue: ConversationModel}>(null);
-  abstract conversationRemoved: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);
+  abstract BSConversationDetail: BehaviorSubject<ConversationModel>;
+  abstract conversationAdded: BehaviorSubject<ConversationModel>;
+  abstract conversationChanged: BehaviorSubject<ConversationModel>;
+  abstract conversationChangedDetailed: BehaviorSubject<{value: ConversationModel, previousValue: ConversationModel}>;
+  abstract conversationRemoved: BehaviorSubject<ConversationModel>;
   // abstract readAllMessages: BehaviorSubject<string> = new BehaviorSubject<string>(null);
 
   // params
-  abstract conversations: Array<ConversationModel> = [];
+  abstract conversations: Array<ConversationModel>;
   abstract uidConvSelected: string;
 
   // functions

package/src/chat21-core/providers/abstract/groups-handler.service.ts

@@ -8,11 +8,11 @@ import { GroupModel } from '../../models/group';
 export abstract class GroupsHandlerService {
 
   // BehaviorSubject
-  abstract BSgroupDetail: BehaviorSubject<GroupModel> = new BehaviorSubject<GroupModel>(null);
-  abstract SgroupDetail: Subject<GroupModel> = new Subject<GroupModel>();
-  abstract groupAdded: BehaviorSubject<GroupModel> = new BehaviorSubject<GroupModel>(null);
-  abstract groupChanged: BehaviorSubject<GroupModel> = new BehaviorSubject<GroupModel>(null);
-  abstract groupRemoved: BehaviorSubject<GroupModel> = new BehaviorSubject<GroupModel>(null);
+  abstract BSgroupDetail: BehaviorSubject<GroupModel>;
+  abstract SgroupDetail: Subject<GroupModel>;
+  abstract groupAdded: BehaviorSubject<GroupModel>;
+  abstract groupChanged: BehaviorSubject<GroupModel>;
+  abstract groupRemoved: BehaviorSubject<GroupModel>;
 
   abstract initialize(tenant: string, loggedUserId: string): void;
   abstract connect(): void;

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

@@ -9,6 +9,7 @@ export abstract class LoggerService {
   constructor() { }
 
   abstract setLoggerConfig(isLogEnabled: boolean, logLevel: string);
+  abstract getLoggerConfig(): {isLogEnabled: boolean, logLevel: number};
   abstract debug(...message: any[])
   abstract log(...message: any[])
   abstract warn(...message: any[])

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

@@ -9,8 +9,8 @@ import { BehaviorSubject } from 'rxjs';
 export abstract class MessagingAuthService {
 
   // BehaviorSubject
-  abstract BSAuthStateChanged: BehaviorSubject<any> = new BehaviorSubject<any>(null);
-  abstract BSSignOut: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+  abstract BSAuthStateChanged: BehaviorSubject<any>;
+  abstract BSSignOut: BehaviorSubject<any>;
 
   // params
   public DEFAULT_PERSISTENCE: string = 'NONE';

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

@@ -8,8 +8,8 @@ import { BehaviorSubject, Observable } from 'rxjs';
 export abstract class PresenceService {
 
   // BehaviorSubject
-  abstract BSIsOnline: BehaviorSubject<any> = new BehaviorSubject<any>(null);
-  abstract BSLastOnline: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+  abstract BSIsOnline: BehaviorSubject<any>;
+  abstract BSLastOnline: BehaviorSubject<any>;
 
   // params
   // private DEFAULT_TENANT: string = environment.firebaseConfig.tenant;

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

@@ -9,8 +9,8 @@ import { BehaviorSubject } from 'rxjs';
 export abstract class TypingService {
 
   // BehaviorSubject
-  BSIsTyping: BehaviorSubject<any> = new BehaviorSubject<any>(null);
-  BSSetTyping: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+  BSIsTyping: BehaviorSubject<any>;
+  BSSetTyping: BehaviorSubject<any>;
 
   // params
   // private DEFAULT_TENANT: string = environment.firebaseConfig.tenant;

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

@@ -24,7 +24,7 @@ export abstract class UploadService {
   }
 
   //BehaviorSubject
-  abstract BSStateUpload: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+  abstract BSStateUpload: BehaviorSubject<any>;
 
   // functions
   abstract initialize(): void;

package/src/chat21-core/providers/firebase/firebase-archivedconversations-handler.ts

@@ -27,7 +27,7 @@ export class FirebaseArchivedConversationsHandler extends ArchivedConversationsH
     
 
     // BehaviorSubject
-    BSConversationDetail: BehaviorSubject<ConversationModel>;
+    BSConversationDetail: BehaviorSubject<ConversationModel>= new BehaviorSubject<ConversationModel>(null);
     archivedConversationAdded: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);
     archivedConversationChanged: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);
     archivedConversationRemoved: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);

package/src/chat21-core/providers/firebase/firebase-groups-handler.ts

@@ -28,7 +28,7 @@ export class FirebaseGroupsHandler extends GroupsHandlerService {
 
     // BehaviorSubject
     BSgroupDetail: BehaviorSubject<GroupModel> = new BehaviorSubject<GroupModel>(null); 
-    SgroupDetail: Subject<GroupModel> = new BehaviorSubject<GroupModel>(null);
+    SgroupDetail: Subject<GroupModel> = new Subject<GroupModel>();
     groupAdded: BehaviorSubject<GroupModel> = new BehaviorSubject<GroupModel>(null);
     groupChanged: BehaviorSubject<GroupModel> = new BehaviorSubject<GroupModel>(null);
     groupRemoved: BehaviorSubject<GroupModel> = new BehaviorSubject<GroupModel>(null);

package/src/chat21-core/providers/logger/customLogger.ts

@@ -23,6 +23,10 @@ export class CustomLogger extends LoggerService{
         }
     }
 
+    getLoggerConfig(): {isLogEnabled: boolean, logLevel: number}{
+        return {isLogEnabled: this.isLogEnabled, logLevel: this.logLevel}
+    }
+
     error(message: any, ...optionalParams: any[]) {
         if (this.isLogEnabled && this.logLevel >= LogLevel.ERROR) {
             this.logger.error(message, ...optionalParams)

package/src/chat21-core/providers/mqtt/mqtt-archivedconversations-handler.ts

@@ -20,7 +20,7 @@ import { LoggerInstance } from '../logger/loggerInstance';
 export class MQTTArchivedConversationsHandler extends ArchivedConversationsHandlerService {
  
     // BehaviorSubject
-    BSConversationDetail: BehaviorSubject<ConversationModel>;
+    BSConversationDetail: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);
     archivedConversationAdded: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);
     archivedConversationChanged: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);
     archivedConversationRemoved: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);

package/src/chat21-core/providers/mqtt/mqtt-conversations-handler.ts

@@ -25,7 +25,6 @@ export class MQTTConversationsHandler extends ConversationsHandlerService {
     conversationChanged: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);;
     conversationChangedDetailed: BehaviorSubject<{value: ConversationModel, previousValue: ConversationModel}> = new BehaviorSubject<{value: ConversationModel, previousValue: ConversationModel}>(null);
     conversationRemoved: BehaviorSubject<ConversationModel> = new BehaviorSubject<ConversationModel>(null);
-    BSConversations: BehaviorSubject<ConversationModel[]>
     // readAllMessages: BehaviorSubject<string>;
 
     // public variables

package/src/chat21-core/providers/mqtt/mqtt-groups-handler.ts

@@ -14,7 +14,7 @@ export class MQTTGroupsHandler extends GroupsHandlerService {
     
     // BehaviorSubject
     BSgroupDetail: BehaviorSubject<GroupModel> = new BehaviorSubject<GroupModel>(null); 
-    SgroupDetail: Subject<GroupModel> = new BehaviorSubject<GroupModel>(null);
+    SgroupDetail: Subject<GroupModel> = new Subject<GroupModel>();
     groupAdded: BehaviorSubject<GroupModel> = new BehaviorSubject<GroupModel>(null);
     groupChanged: BehaviorSubject<GroupModel> = new BehaviorSubject<GroupModel>(null);
     groupRemoved: BehaviorSubject<GroupModel> = new BehaviorSubject<GroupModel>(null);

package/src/chat21-core/utils/constants.ts

@@ -45,7 +45,8 @@ export const TYPE_MSG_IMAGE = 'image';
 export const TYPE_MSG_FILE = 'file';
 export const TYPE_MSG_BUTTON = 'button';
 
-export const MAX_WIDTH_IMAGES = 300;
+export const MAX_WIDTH_IMAGES = 230;
+export const MIN_WIDTH_IMAGES = 130;
 export const TIME_TYPING_MESSAGE = 2000;
 export const TYPE_DIRECT = 'direct';
 export const TYPE_GROUP = 'group';
@@ -105,4 +106,4 @@ export const LogLevel = {
     'WARN' : 1,
     'INFO' : 2,
     'DEBUG' : 3
-}
+}

package/src/chat21-core/utils/utils.ts

@@ -713,3 +713,5 @@ function componentFromStr(numStr, percent) {
 }
 
 
+
+