@chat21/chat21-ionic 3.0.79 → 3.0.80-rc.1

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.scss

@@ -33,6 +33,59 @@
     }
 }
 
+.manage_conversation_info_container{
+    height: 34px;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    position: fixed;
+    transition: transform 300ms ease-in-out 0s;
+    transform: translate(0px);
+    right: 300px;
+    top: 60px;
+    z-index:10;
+    background: linear-gradient(to right, rgba(226, 232, 239, 0) 128px, rgb(226, 232, 239) 128px);
+    
+    &.close{
+        right: 0px;
+        &:not(.mobile){
+            top: calc(60px + var(--padding-conversation-detail));
+        }
+    }
+
+    &.mobile{
+        right: 0px;
+    }
+    &:not(.mobile):not(.close){
+        right: calc(300px + var(--padding-conversation-detail));
+        top: calc(60px + var(--padding-conversation-detail));
+    }
+    &::before{
+        content: "";
+        width: 102px;
+        height: 34px;
+        background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMTAyIDM0IiB3aWR0aD0iMTAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0ibTEwMiAwaC0xMDJsLjA3MTQwOC40MTk3NTNjMTEuMzE5MTkyLS4wMTU1NTggMjIuMjg4MTkyIDMuOTIwMzM3IDMxLjAxMjA5MiAxMS4xMjc2NDdsNy40ODk0IDYuNTAyIDEuNjUwOCAxLjQyMjkgNi42OTU1IDUuNzhjNi41Mzc0IDUuNjQwNSAxNC44ODU3IDguNzQ1MSAyMy41MjI3IDguNzQ3N2gzMS41NTQxeiIKICAgICAgICAgIGZpbGw9IiNlMmU4ZWYiLz4KPC9zdmc+);
+        position: relative;
+        left: 50px;
+        z-index: -1;
+    }
+
+    ion-button {
+        text-transform: unset;
+        color: var(--basic-blue);
+        &:hover {
+            --background-hover: transparent;
+            text-decoration: underline;
+            text-decoration-color: var(--basic-blue);
+        }
+    }
+
+    ion-icon{
+        margin: 5px;
+    }
+}
+
+
 ion-item {
     --padding-end: 0px;
     --inner-padding-end: 0px;
@@ -60,12 +113,33 @@ ion-item {
 
 .message_sender_fullname {
     font-size: 0.9em;
-    margin: 0 0 1px 10px;
+    margin: 0px 10px 0px 10px;
     // color: var(--gray);
     font-weight: 500;
     color: #080f1a;
 }
 
+.typing_container{
+    display:flex;
+    align-items: center;
+
+    user-typing {
+        text-align: right;
+    }
+    .typing_info{  
+        color: var(--basic-gray);
+        margin-left: 10px;
+        font-size: 12px;
+        animation: blinker 1s linear infinite;
+
+        @keyframes blinker {
+            50% {
+              opacity: 0;
+            }
+          }
+    }
+}
+
 .messages {
     border-radius: 18px;
     padding: 0;
@@ -82,12 +156,16 @@ ion-item {
     align-items: flex-end;
     justify-content: flex-end;
     // padding: 2px 0px 4px 40px;
-    padding: 2px 0px 14px 40px; // edited to display the date at the bottom of the "message bubble"
+    padding: 0px 0px 6px 40px;
+
+    &:hover .message-date-hover, &:hover .btn-add-msg{
+        display: block;
+    }
+
     .msg_sent {
         background-color: var(--bubble-blue);
         color: var(--col-msg-sent);
-        margin-right: 4px;
-        margin-left: 4px;
+        margin: 0px 0px 0px 0px;
         max-width: calc(100% - 70px);
         min-width: 14px;
         border-top-right-radius: 8px;
@@ -112,8 +190,17 @@ ion-item {
 
 /** recive message **/
 .base_receive {
-    // padding: 0px 0px 6px 0px;
-    padding: 0px 0px 15px 0px; // edited to display the date at the bottom of the "message bubble"
+    padding: 0px 20px 6px 0px;
+    .message-date{
+        color: #647491;
+        font-size: 12px;
+        align-self: center;
+    }
+    
+
+    &:hover .message-date-hover, &:hover .btn-add-msg{
+        display: block;
+    }
     /* avatar */
     .content-avatar {
         position: relative;
@@ -142,12 +229,12 @@ ion-item {
     }
     /* message */
     .msg_receive {
-        background-color: var(--light-white);
-        color: #1a1a1a;
+        background-color: var(--bck-msg-received);
+        color: var(--col-msg-received);
         // max-width: 260px;
         max-width: calc(100% - 70px);
         min-width: 14px;
-        margin: 0 20px 4px 10px;
+        margin: 0 0px 0px 10px;
         height: fit-content;
         width: auto;
         border-top-left-radius: 8px;
@@ -167,63 +254,93 @@ ion-item {
     .has-metadata {
         max-width: 100% !important;
     }
+
 }
 
-.time {
-    margin-bottom: 20px;
+.message-date-hover{
+    color: #647491;
+    font-size: 12px;
+    align-self: center;
+
+    display: none;
+    
+}
+
+.btn-add-msg {
+    border-radius: 50%;
+    --padding-end: 7px;
+    --padding-start: 7px;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.13);
+    display: none;
+    align-self: center;
+    margin: 0px 5px;
+
+    ion-icon{
+        font-size: 1.2em;
+        color: var(--basic-blue)
+    }
+
+    .add-canned-response-add-icon{
+        color: var(--basic-blue);
+        cursor: pointer;
+        position: relative;
+        top: 6px;
+        left: -6px;
+        font-size: 9px;
+    }
 }
 
-// Loading Spinner
-.spinner {
-    // margin: 100px auto 0;
-    width: 90px;
+ /* LOADING */
+/*http://tobiasahlin.com/spinkit/*/
+#chat21-spinner {
+    display: none;
+    width: 70px;
     min-height: 20px;
-    padding: 7px;
+    margin: 20px auto 0;
     text-align: center;
 }
-
-.spinner > div {
-    width: 10px;
-    height: 10px;
-    background-color: rgb(255, 255, 255);
-
+#chat21-spinner.active {
+    display: block;
+}
+#chat21-spinner > div {
+    width: 12px;
+    height: 12px;
+    background-color: var(--bubble-blue);
     border-radius: 100%;
     display: inline-block;
     -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
     animation: sk-bouncedelay 1.4s infinite ease-in-out both;
 }
-
-.spinner .bounce1 {
+#chat21-spinner .chat21-bounce1 {
     -webkit-animation-delay: -0.32s;
     animation-delay: -0.32s;
 }
-
-.spinner .bounce2 {
+#chat21-spinner .chat21-bounce2 {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
 }
-
+#chat21-spinner span {
+    display: block;
+    margin: 0.5em 0 0 0;
+    color: var(--col-msg-sent);
+    /* text-transform: uppercase; */
+    font-family: 'Roboto', sans-serif;
+    -webkit-animation: pulse 2000ms linear infinite;
+    -moz-animation: pulse 2000ms linear infinite;
+    animation: pulse 2000ms linear infinite;
+    text-align: center;
+}
 @-webkit-keyframes sk-bouncedelay {
-    0%,
-    80%,
-    100% {
-        -webkit-transform: scale(0);
-    }
-    40% {
-        -webkit-transform: scale(1);
-    }
+    0%, 80%, 100% { -webkit-transform: scale(0) }
+    40% { -webkit-transform: scale(1.0) }
 }
-
 @keyframes sk-bouncedelay {
-    0%,
-    80%,
-    100% {
-        -webkit-transform: scale(0);
-        transform: scale(0);
-    }
-    40% {
-        -webkit-transform: scale(1);
-        transform: scale(1);
+    0%, 80%, 100% { 
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    } 40% { 
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
     }
 }
 
@@ -245,28 +362,6 @@ ion-item {
     // left: -26px;
 }
 
-:host .base_receive .msg_receive ::ng-deep div > div > div > ion-button.canned {
-    display: none;
-    position: absolute;
-    top: -3px;
-    right: -31px;
-}
-
-:host .base_receive .msg_receive ::ng-deep div > div > div >ion-button.emoji {
-    display: none;
-    position: absolute;
-    top: -3px;
-    right: -51px;
-}
-
-// :host .base_receive .msg_receive:hover ::ng-deep div > div > ion-button {
-:host .base_receive:hover .msg_receive ::ng-deep div > div > div > ion-button {
-    display: block;
-    // position: absolute;
-    // top: -11px;
-    // left: 91px;
-}
-
 // ---------------------------------------------------------
 // Long date divider
 // ---------------------------------------------------------
@@ -295,24 +390,6 @@ ion-item {
     color: #64748b;
 }
 
-// ---------------------------------------------------------
-// message date
-// ---------------------------------------------------------
-:host .base_sent .msg_sent ::ng-deep div > div > div > .message-date {
-    position: absolute;
-    bottom: -11px;
-    color: #64748b;
-    font-size: 10px;
-    right: 0px;
-}
-
-:host .base_receive .msg_receive ::ng-deep div > div > .message-date {
-    position: absolute;
-    bottom: -11px;
-    color: #64748b;
-    font-size: 10px;
-    left: 0px;
-}
 // ---------------------------------------------------------
 // emoticon
 // ---------------------------------------------------------

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.ts

@@ -1,5 +1,6 @@
+import { MessageModel } from 'src/chat21-core/models/message';
 import { ConversationContentComponent } from '../conversation-content/conversation-content.component';
-import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter, SimpleChange, SimpleChanges } from '@angular/core';
 
 
 import { MESSAGE_TYPE_INFO, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS } from 'src/chat21-core/utils/constants';
@@ -13,6 +14,8 @@ import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk
 import { TranslateService } from '@ngx-translate/core';
 import * as moment from 'moment';
 import { AppConfigProvider } from 'src/app/services/app-config';
+import { ModalController } from '@ionic/angular';
+import { CreateCannedResponsePage } from 'src/app/pages/create-canned-response/create-canned-response.page';
 @Component({
   selector: 'ion-conversation-detail',
   templateUrl: './ion-conversation-detail.component.html',
@@ -24,14 +27,17 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   @Input() channelType: string;
   @Input() areVisibleCAR: boolean;
   @Input() supportMode: boolean;
+  @Input() isMobile: boolean;
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   @Output() onAddUploadingBubble = new EventEmitter<boolean>();
-
+  @Output() onOpenCloseInfoConversation = new EventEmitter<boolean>();
+  
   public public_Key: any
   public uploadProgress: number = 100
   public fileType: any
   public browserLang: string;
   public addAsCannedResponseTooltipText: string;
+  public openInfoConversation: boolean = true;
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
@@ -58,6 +64,7 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     public tiledeskAuthService: TiledeskAuthService,
     private translate: TranslateService,
     public appConfigProvider: AppConfigProvider,
+    public modalController: ModalController,
   ) {
     super(cdref, uploadService)
 
@@ -66,6 +73,11 @@ export class IonConversationDetailComponent extends ConversationContentComponent
   ngOnInit() {
     this.listenToUploadFileProgress();
     this.setMomentLocaleAndGetTranslation();
+    
+  }
+
+  ngOnChanges(changes: SimpleChanges){
+    this.isMobile? this.openInfoConversation = false: null;
   }
 
 
@@ -136,6 +148,11 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     this.onElementRendered.emit(event)
   }
 
+  onOpenCloseInfoConversationFN(){
+    this.openInfoConversation = !this.openInfoConversation
+    this.onOpenCloseInfoConversation.emit(this.openInfoConversation)
+  }
+
   /**
    * Track by function for ngFor loops
    *
@@ -147,4 +164,24 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     // console.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - trackByFn item', item)
     return item.uid || index;
   }
+
+
+  async presentCreateCannedResponseModal(message: MessageModel): Promise<any> {
+    this.logger.log('[BUBBLE-MESSAGE] PRESENT CREATE CANNED RESPONSE MODAL ')
+    const attributes = {
+       message: message,
+    }
+    const modal: HTMLIonModalElement = await this.modalController.create({
+      component: CreateCannedResponsePage,
+      componentProps: attributes,
+      swipeToClose: false,
+      backdropDismiss: false,
+    })
+    modal.onDidDismiss().then((dataReturned: any) => {
+      // 
+      this.logger.log('[BUBBLE-MESSAGE] ', dataReturned.data)
+    })
+
+    return await modal.present()
+  }
 }

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.html

@@ -7,6 +7,12 @@
 
 
   <div>
+
+    <div *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && !isSameSender" 
+      [style.color]="convertColorToRGBA(fontColor, 65)"
+      [ngStyle]="{'margin': (isImage(message) || isFrame(message))? '10px 16px 0px 16px': '10px 8px 0px 8px'}" class="message_sender_fullname">
+      {{message?.sender_fullname}}
+    </div>
     <!-- message type:: image -->
     <!-- <div *ngIf="message.type == 'image' && message.metadata"  [ngStyle] = "{ 'max-width': getSizeImg(message).width, 'max-height': getSizeImg(message).height }">
         <img class="message-contentX message-content-imageX" [src]="message.metadata.src" />
@@ -43,14 +49,10 @@
 
     <!-- [tooltip]="timeTooltipLeft" [options]="tooltipOptions" placement="left" content-type="template" (click)="handleTooltipEvents($event)" -->
     <div *ngIf="message?.text">
-      <span class="message-date"> {{message.timestamp | date:'HH:mm' }} </span>
-      <!-- <ng-template #timeTooltipLeft>
-        <span> {{message.timestamp | amCalendar }} </span>
-      </ng-template> -->
 
       <chat-text *ngIf="message?.type !=='html'"
         [text]="message?.text" 
-        [color]="textColor" 
+        [color]="fontColor" 
         [message]="message"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)">
@@ -60,20 +62,6 @@
         [htmlText]="message?.text">
       </chat-html>
 
-      <ng-container *ngIf="areVisibleCAR && supportMode">
-        <ion-button shape="round" size="small" class="btn-add-msg canned" ion-button fill="clear"
-          (click)="presentCreateCannedResponseModal()" tooltip="{{addAsCannedResponseTooltipText}}"
-          [options]="tooltipOptions" placement="bottom">
-          <ion-icon slot="icon-only" name="flash-outline" style="font-size: 1em;"> </ion-icon>
-        </ion-button>
-      </ng-container>
-      <!-- <ng-container *ngIf="supportMode">
-        <ion-button shape="round" size="small" class="btn-add-msg emoji" ion-button fill="clear"
-          (click)="presentEmojiiModal()" tooltip="{{addAsCannedResponseTooltipText}}"
-          [options]="tooltipOptions" placement="bottom">
-          <ion-icon slot="icon-only" name="happy-outline" style="font-size: 1em;"> </ion-icon>
-        </ion-button>
-      </ng-container> -->
     </div>
   </div>
 

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.scss

@@ -11,6 +11,11 @@
     // -webkit-animation: heartbeat 1.5s ease-in-out both;
     // animation: heartbeat 1.5s ease-in-out both;
 
+    .message_sender_fullname{
+        font-size: 12px;
+        font-weight: 600;
+    }
+
     p {
         font-size: 1.4em;
         margin: 0;
@@ -48,16 +53,7 @@
 
 }
 // > .button-native
-.btn-add-msg {
-    border-radius: 50%;
-    --padding-end: 7px;
-    --padding-start: 7px;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
-
-    ion-icon{
-        font-size: 1.2em;
-    }
-}
+
 
 
 

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.spec.ts

@@ -50,7 +50,7 @@ describe('BubbleMessageComponent', () => {
           isSender: false
     }
     component.message = messages
-    component.textColor = 'black'
+    component.fontColor = 'black'
     fixture.detectChanges()
     const textChild = fixture.debugElement.query(By.css('chat-text'))
     textChild.properties.text
@@ -76,7 +76,7 @@ describe('BubbleMessageComponent', () => {
           isSender: false
     }
     component.message = messages
-    component.textColor = 'black'
+    component.fontColor = 'black'
     fixture.detectChanges()
     const textChild = fixture.debugElement.query(By.css('chat-text'))
     expect(textChild.properties.text).toEqual(messages.text)

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.ts

@@ -1,15 +1,16 @@
 import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MessageModel } from 'src/chat21-core/models/message';
-import { MAX_WIDTH_IMAGES, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
+import { MAX_WIDTH_IMAGES, MESSAGE_TYPE_MINE, MESSAGE_TYPE_OTHERS, MIN_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-import { isFile, isFrame, isImage } from 'src/chat21-core/utils/utils-message';
+import { isFile, isFrame, isImage, messageType } from 'src/chat21-core/utils/utils-message';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { TranslateService } from '@ngx-translate/core';
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import * as moment from 'moment';
 import { CreateCannedResponsePage } from 'src/app/pages/create-canned-response/create-canned-response.page'
 import { ModalController } from '@ionic/angular';
+import { convertColorToRGBA } from 'src/chat21-core/utils/utils';
 @Component({
   selector: 'chat-bubble-message',
   templateUrl: './bubble-message.component.html',
@@ -18,16 +19,25 @@ import { ModalController } from '@ionic/angular';
 export class BubbleMessageComponent implements OnInit, OnChanges {
 
   @Input() message: MessageModel;
-  @Input() textColor: string;
-  @Input() areVisibleCAR: boolean;
-  @Input() supportMode: boolean;
+  @Input() isSameSender: boolean;
+  @Input() fontColor: string;
+  @Input() fontSize: string;
+  @Input() fontFamily: string;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
-  @Input() addAsCannedResponseTooltipText : string;
+  convertColorToRGBA = convertColorToRGBA
+
+  // ========== begin:: check message type functions ======= //
+  messageType = messageType;
+
+  MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;
+  MESSAGE_TYPE_OTHERS = MESSAGE_TYPE_OTHERS;
+ // ========== end:: check message type functions ======= //
+ 
   public browserLang: string;
 
   tooltipOptions = {
@@ -194,25 +204,6 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
     this.onElementRendered.emit({element: event.element, status: event.status})
   }
 
-  async presentCreateCannedResponseModal(): Promise<any> {
-    this.logger.log('[BUBBLE-MESSAGE] PRESENT CREATE CANNED RESPONSE MODAL ')
-    const attributes = {
-       message: this.message,
-    }
-    const modal: HTMLIonModalElement = await this.modalController.create({
-      component: CreateCannedResponsePage,
-      componentProps: attributes,
-      swipeToClose: false,
-      backdropDismiss: false,
-    })
-    modal.onDidDismiss().then((dataReturned: any) => {
-      // 
-      this.logger.log('[BUBBLE-MESSAGE] ', dataReturned.data)
-    })
-
-    return await modal.present()
-  }
-
 
   // printMessage(message, messageEl, component) {
   //   const messageOBJ = { message: message, sanitizer: this.sanitizer, messageEl: messageEl, component: component}

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

@@ -1,3 +1,7 @@
-<div #actionButton id="actionButton" class="button-in-msg action" (click)="actionButtonAction()" title="{{button?.value}}">
+<div #actionButton id="actionButton" class="button-in-msg action" 
+title="{{button?.value}}"
+(click)="actionButtonAction()"
+(mouseover)="onMouseOver($event)" 
+(mouseout)="onMouseOut($event)">
   {{button.value}}
 </div>

package/src/app/chatlib/conversation-detail/message/buttons/action-button/action-button.component.scss

@@ -1,12 +1,11 @@
 // @import '../../../../../sass/variables';
 
 div {
-    --bck-msg-sent: #62a8ea;
-    --col-msg-sent:#ffffff;
-    --light-white: #f7f7f7;
-    --black: #1a1a1a;
-    --gray: #aaaaaa;
-    --blue: rgb(42, 106, 193);
+    --backgroundColor: --basic-blue;
+    --textColor: --bck-msg-sent;
+    --hoverBackgroundColor: --bck-msg-sent;
+    --hoverTextColor: --basic-blue;
+    --buttonFontSize: --button-in-msg-font-size;
 }
 
 .button-in-msg {
@@ -15,32 +14,32 @@ div {
     max-width: 300px;
     min-width: inherit;
     cursor: pointer;
-    border: 1px solid var(--blue);
+    border: 1px solid var(--textColor);
     border-radius: 20px;
     margin: 3px;
-    background: transparent;
+    background: var(--backgroundColor);
     overflow: hidden;
     font-family: 'Muli', sans-serif;
-    font-size: 15px;
+    font-size: var(--buttonFontSize);
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
     letter-spacing: -0.24px;
     -webkit-font-smoothing: antialiased;
-    color: var(--blue);
+    color: var(--textColor);
     line-height: 16px;
 }
 
 .action {
-    background: white;
+    background: var(--backgroundColor);
     transition: background-color .6s ease;
     &:focus,
     &:hover {
-        color: white;
-        background:  var(--blue);
+        color: var(--hoverTextColor);
+        background:  var(--hoverBackgroundColor);
         .icon-button-action {
             svg {
-                fill: white;
+                fill:  var(--hoverTextColor);
             }
         }
     }
@@ -80,4 +79,12 @@ div {
     //         height: 200px;
     //     }
     // }
-}
+}
+
+
+.disabled {
+    // border: 1px solid #999999;
+    // background-color: #cccccc;
+    // color: #666666;
+    pointer-events: none;
+}