@chat21/chat21-web-widget 5.0.53 → 5.0.54

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,63 @@
     }
 }
 
+
+.messages {
+    border-radius: $border-radius-bubble-message;
+    padding: 0;
+    word-wrap: break-word;
+
+    max-height: 160px;
+    display: flex;
+    overflow-y: auto;
+    // 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;   
+    &::-webkit-scrollbar {
+        width: 6px;
+        background-color: #00000000!important;
+    } 
+
+    &:hover {
+        &::-webkit-scrollbar-track {
+            background-color: #f9f9f9 !important;
+        }
+        
+        &::-webkit-scrollbar-thumb {
+            background: #777777; 
+        }
+
+    }
+}
+
+.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-right: 16px;
     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 +132,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 +189,7 @@
 
 .c21-text.c21-time {
     font-size: 13px;
-    padding: 0 10;
+    padding: 0px 10px;
     clear: both;
     color: rgb(115, 115, 118);
 }
@@ -149,9 +225,10 @@
 }
 
 .headerPreviewMessage {
+    margin-right: 16px;
     position: relative;
     height: 40;// height: 50;
-    margin: 10 0 0 50;
+    margin: 10px 0px 0px 50px;
 }
 
 .boxButtons {
@@ -192,18 +269,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;

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'
@@ -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