@chat21/chat21-web-widget 5.0.59-rc.1 → 5.0.59-rc.2

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.59-rc.2
+- added: handler for buttons in last-message component
+- changed: tooltip custom directive
+- changed: user-avatar size in last-message component
+
 ### 5.0.59-rc.1
 - added: hashing while building dist files
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.59-rc.1",
+  "version": "5.0.59-rc.2",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/app.component.scss

@@ -208,6 +208,8 @@ textarea::placeholder {
     
 }
 
+
+// TOOLTIP: start
 .tooltip-container {
     font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
     font-size: 12px;
@@ -245,6 +247,68 @@ textarea::placeholder {
   }
 }
 
+.ng-tooltip {
+    position: absolute;
+    max-width: 150px;
+    font-size: 14px;
+    text-align: center;
+    color: black;
+    padding: 3px 8px;
+    background:rgb(255, 255, 255);
+    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); 
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
+    border-radius: 10px;
+    z-index: 1000;
+    opacity: 0;
+
+    font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    letter-spacing: normal;
+    font-stretch: normal;
+    font-variant: normal;
+    font-weight: 300;
+
+  }
+  .ng-tooltip:after {
+    content: "";
+    position: absolute;
+    border-style: solid;
+  }
+  .ng-tooltip-top:after {
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-color: rgb(255, 255, 255) transparent transparent transparent;
+  }
+  .ng-tooltip-bottom:after {
+    bottom: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-color: transparent transparent rgb(255, 255, 255) transparent;
+  }
+  .ng-tooltip-left:after {
+    top: 50%;
+    left: 100%;
+    margin-top: -5px;
+    border-width: 5px;
+    border-color: transparent transparent transparent rgb(255, 255, 255);
+  }
+  .ng-tooltip-right:after {
+    top: 50%;
+    right: 100%;
+    margin-top: -5px;
+    border-width: 5px;
+    border-color: transparent rgb(255, 255, 255) transparent transparent;
+  }
+  .ng-tooltip-show {
+    opacity: 1;
+  }
+
+  //TOOLTIP : end
+
 chat-root {
     position: absolute;
     display: block;

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

@@ -3,10 +3,10 @@
 :host  .c21-avatar-image ::ng-deep > chat-avatar-image {
 
     .c21-icon-avatar { 
-        height: 32px;
-        width: 32px;
-        min-width: 32px;
-        min-height: 32px;
+        height: 38px;
+        width: 38px;
+        min-width: 38px;
+        min-height: 38px;
     }  
 }
 :host .previewNewMessagge ::ng-deep > chat-bubble-message > #bubble-message > div > div > chat-text {
@@ -152,10 +152,10 @@
 
 .c21-icon-avatar {
     position: absolute;
-    width: 32px;
-    height: 32px;
+    width: 38px;
+    height: 38px;
     bottom: 0px;
-    left: -40px;
+    left: -46px;
     box-shadow: rgba(35, 47, 53, 0.09) 0px 2px 8px 0px;
     border-radius: 100%; //GAB
     border: 1px solid #eee;
@@ -163,8 +163,8 @@
 }
 
 .c21-avatar-image {
-    width: 32px;
-    height: 32px;
+    width: 38px;
+    height: 38px;
     display: block;
     position: absolute;
 }

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

@@ -167,8 +167,10 @@ 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);
+    setTimeout(() => {
+      this.events.publish('lastMessage:attachmentButtonClicked', event)
+    }, 500);
   }
   /** */
   openConversationByID(conversation) {

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

@@ -46,7 +46,7 @@
       <!-- <div *ngIf="message.type == 'text'"> -->     
 
         
-      <div *ngIf="message?.text" tooltip="{{message.timestamp | dateAgo}} ({{message.timestamp | date:'shortDate'}} {{message.timestamp | date:'HH:mm:ss'}})">
+      <div *ngIf="message?.text" tooltip="{{message.timestamp | dateAgo}} ({{message.timestamp | date:'shortDate'}} {{message.timestamp | date:'HH:mm:ss'}})" placement="bottom">
 
         <!-- [htmlEnabled]="(message?.type==='html')? true : false" -->
         <chat-text *ngIf="message?.type !=='html'"

package/src/app/component/message/buttons/action-button/action-button.component.html

@@ -1,8 +1,8 @@
 <div #actionButton id="actionButton" class="button-in-msg action" 
   [ngClass]="{'disabled': isConversationArchived}"
-  title="{{button?.value}}"
   (click)="actionButtonAction()" 
   (mouseover)="onMouseOver($event)" 
   (mouseout)="onMouseOut($event)">
     {{button?.value}}
 </div>
+<!-- title="{{button?.value}}" -->

package/src/app/component/message/buttons/link-button/link-button.component.html

@@ -1,4 +1,5 @@
-<div class="button-in-msg url" (click)="actionButtonUrl()" title="{{button?.value}}"
+<!-- title="{{button?.value}}" -->
+<div class="button-in-msg url" (click)="actionButtonUrl()" 
 (mouseover)="onMouseOver($event)" (mouseout)="onMouseOut($event)"> 
   <span *ngIf="button?.target !== 'self'" class="icon-button-action">
     <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="12px" height="12px">

package/src/app/component/message/buttons/text-button/text-button.component.html

@@ -1,8 +1,8 @@
+<!-- title="{{button?.value}}" -->
 <div class="button-in-msg text" 
-[ngClass]="{'disabled': isConversationArchived}"
-title="{{button?.value}}"
-(click)="actionButtonText()" 
-(mouseover)="onMouseOver($event)" 
-(mouseout)="onMouseOut($event)">
+  [ngClass]="{'disabled': isConversationArchived}"
+  (click)="actionButtonText()" 
+  (mouseover)="onMouseOver($event)" 
+  (mouseout)="onMouseOut($event)">
   {{button?.value}}
 </div>

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

@@ -1,6 +1,5 @@
 <!-- [ngStyle] = "{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; text-align: center; margin: auto"-->
 <div class="c21-img-container" >
-  <!-- <div *ngIf="loading" class="loader" [ngStyle] = "{ 'width': width , 'height': height }"></div> -->
   <img 
     class="message-contentX message-content-imageX" 
     [alt]="metadata?.name"
@@ -9,7 +8,4 @@
     [src]="metadata.src" 
     (load)="onLoaded($event)"
     (click)="downloadImage(metadata.src, metadata.name)"/>
-  <ng-template #timeTooltipRight>
-    <span>{{ tooltipMessage }}</span>
-  </ng-template>
 </div>

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

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

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

@@ -1,46 +1,134 @@
-import { Directive, ElementRef, HostListener, Input, OnDestroy } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';
+import { isOnMobileDevice } from 'src/chat21-core/utils/utils';
 
 @Directive({
   selector: '[tooltip]'
 })
-export class TooltipDirective implements OnDestroy{
+export class TooltipDirective {
 
-  @Input() tooltip: any; // The text for the tooltip to display
-  @Input() delay? = 190; // Optional delay input, in ms
+  @Input('tooltip') tooltipTitle: string;
+  @Input() placement: string;
+  @Input() delay: string;
+  tooltip: HTMLElement;
+  
+  offset = 10;
+  isMobile = isOnMobileDevice()
 
-  private myPopup;
-  private timer;
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
 
-  constructor(private el: ElementRef) { }
+  @HostListener('mouseenter') onMouseEnter() {
+    if (!this.tooltip && !this.isMobile) { this.show(); }
+  }
 
-  ngOnDestroy(): void {
-    if (this.myPopup) { this.myPopup.remove() }
+  @HostListener('mouseleave') onMouseLeave() {
+    if (this.tooltip) { this.hide(); }
   }
 
-  @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)
+  show() {
+    this.create();
+    this.setPosition();
+    this.renderer.addClass(this.tooltip, 'ng-tooltip-show');
   }
 
-  @HostListener('mouseleave') onMouseLeave() {
-    if (this.timer) clearTimeout(this.timer);
-    if (this.myPopup) { this.myPopup.remove() }
+  hide() {
+    this.renderer.removeClass(this.tooltip, 'ng-tooltip-show');
+    window.setTimeout(() => {
+      this.renderer.removeChild(document.body, this.tooltip);
+      this.tooltip = null;
+    }, +this.delay);
+  }
+
+  create() {
+    this.tooltip = this.renderer.createElement('span');
+
+    this.renderer.appendChild(
+      this.tooltip,
+      this.renderer.createText(this.tooltipTitle) // textNode
+    );
+
+    this.renderer.appendChild(document.body, this.tooltip);
+    // this.renderer.appendChild(this.el.nativeElement, this.tooltip);
+
+    this.renderer.addClass(this.tooltip, 'ng-tooltip');
+    this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`);
+
+    // delay 설정
+    this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity ${this.delay}ms`);
+    this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity ${this.delay}ms`);
+    this.renderer.setStyle(this.tooltip, '-o-transition', `opacity ${this.delay}ms`);
+    this.renderer.setStyle(this.tooltip, 'transition', `opacity ${this.delay}ms`);
   }
 
-  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
+  setPosition() {
+    const hostPos = this.el.nativeElement.getBoundingClientRect();
+    const tooltipPos = this.tooltip.getBoundingClientRect();
+
+    const scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+
+    let top, left;
+
+    if (this.placement === 'top') {
+      top = hostPos.top - tooltipPos.height - this.offset;
+      left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+    }
+
+    if (this.placement === 'bottom') {
+      top = hostPos.bottom + this.offset;
+      left = hostPos.left + (hostPos.width - tooltipPos.width) / 2;
+    }
+
+    if (this.placement === 'left') {
+      top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+      left = hostPos.left - tooltipPos.width - this.offset;
+    }
+
+    if (this.placement === 'right') {
+      top = hostPos.top + (hostPos.height - tooltipPos.height) / 2;
+      left = hostPos.right + this.offset;
+    }
+
+    this.renderer.setStyle(this.tooltip, 'top', `${top + scrollPos}px`);
+    this.renderer.setStyle(this.tooltip, 'left', `${left}px`);
   }
 
+
+
+  // @Input() tooltip2: any; // The text for the tooltip to display
+  // @Input() delay? = 190; // Optional delay input, in ms
+
+  // private myPopup;
+  // private timer;
+
+
+  // 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.tooltip2;
+  //   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/chat21-core/utils/utils-message.ts

@@ -220,6 +220,7 @@ export function conversationToMessage(conversation: ConversationModel, currentUs
   message.sender_fullname = conversation.sender_fullname
   message.recipient = conversation.recipient
   message.recipient_fullname = conversation.recipient_fullname
+  message.conversation_with = conversation.conversation_with
   message.status = +conversation.status
   message.timestamp = conversation.timestamp
   message.metadata = conversation['metadata']
@@ -239,6 +240,7 @@ export function commandToMessage(msg: MessageModel, conversation: ConversationMo
   message.sender_fullname = conversation.sender_fullname
   message.recipient = conversation.recipient
   message.recipient_fullname = conversation.recipient_fullname
+  message.conversation_with = conversation.conversation_with
   message.status = +conversation.status
   message.timestamp = conversation.timestamp
   message.metadata = msg['metadata']
@@ -246,6 +248,7 @@ export function commandToMessage(msg: MessageModel, conversation: ConversationMo
   message.type = msg['type']
   message.isSender = isSender(message.sender, currentUserId)
   message.attributes = { ...conversation.attributes, ...msg['attributes']}
+  
 
   return message as MessageModel
 }

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

@@ -19,6 +19,26 @@ export function windowsMatchMedia() {
   }
 }
 
+/** */
+export function isOniOSMobileDevice(): boolean {
+  let IS_ON_IOS_MOBILE_DEVICE = false;
+  if (/iPad|iPhone|iPod/i.test(window.navigator.userAgent)) {
+    IS_ON_IOS_MOBILE_DEVICE = true;
+
+  }
+  // console.log('[CONVS-DETAIL][HEADER] IS_ON_IOS_MOBILE_DEVICE ', this.IS_ON_IOS_MOBILE_DEVICE)
+  return IS_ON_IOS_MOBILE_DEVICE;
+}
+
+export function isOnMobileDevice() {
+  let IS_ON_MOBILE_DEVICE = false;
+  if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+    IS_ON_MOBILE_DEVICE = true;
+  }
+  // this.logger.log('[APP-COMP] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+  return IS_ON_MOBILE_DEVICE;
+}
+
 /**
  * chiamata da ChatConversationsHandler
  * restituisce url '/conversations'