@chat21/chat21-ionic 3.0.78-rc.2 → 3.0.78-rc.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # chat21-ionic ver 3.0
 
+### 3.0.78-rc.3
+- changed: user-typing location moved from conversation-header to conversation-detail component
+- changed: replace includes with startsWith for check what type of conversation is in project info conversation-list component
+- added: styleMap integrations to some elements	
+- bug-fixed: no tooltip showed if no unserved request are present
+
 ### 3.0.78-rc.2
 - changed: project item UI and tooltip msg
 - changed: conversation UI in conversations list component

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.78-rc.2",
+    "version": "3.0.78-rc.3",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

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

@@ -17,11 +17,18 @@ export class ConversationContentComponent implements OnInit {
   @Input() messages: MessageModel[]
   @Input() senderId: string;
   @Input() baseLocation: string;
+  @Input() isConversationArchived: boolean;
+  @Input() isTypings: boolean;
+  @Input() idUserTypingNow: string;
+  @Input() nameUserTypingNow: string;
+  @Input() typingLocation: string;
+  @Input() fullscreenMode: boolean;
   @Input() translationMap: Map<string, string>;
   @Input() stylesMap: Map<string, string>;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
-  @Output() onMenuOptionShow = new EventEmitter();
+  @Output() onMenuOptionShow = new EventEmitter<boolean>();
+  @Output() onEmojiiPickerShow = new EventEmitter<boolean>()
   @Output() onAttachmentButtonClicked = new EventEmitter();
   @Output() onScrollContent = new EventEmitter();
 

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

@@ -92,9 +92,12 @@
       <chat-bubble-message class="messages msg_sent" id="message_msg_sent" style="position: relative;" 
         [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
         [class.emoticon]="isEmojii(message?.text)"
+        [ngStyle]="{'background': stylesMap.get('bubbleSentBackground'), 'color': stylesMap.get('bubbleSentTextColor')}"
         [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}"
         [message]="message" 
-        [textColor]="'col-msg-sent'"
+        [fontColor]="stylesMap.get('bubbleSentTextColor')"
+        [fontSize]="stylesMap.get('fontSize')"
+        [fontFamily]="stylesMap.get('fontFamily')"
         [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
         [areVisibleCAR]="areVisibleCAR"
         [supportMode]="supportMode"
@@ -132,8 +135,11 @@
       <chat-bubble-message class="messages msg_receive" id="message_msg_receive" style="position: relative;"
         [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
         [class.emoticon]="isEmojii(message?.text)"
+        [ngStyle]="{'background': stylesMap?.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor')}"
         [message]="message" 
-        [textColor]="'black'"
+        [fontColor]="stylesMap?.get('bubbleReceivedTextColor')"
+        [fontSize]="stylesMap?.get('fontSize')"
+        [fontFamily]="stylesMap?.get('fontFamily')"
         [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
         [areVisibleCAR]="areVisibleCAR"
         [supportMode]="supportMode"
@@ -167,6 +173,18 @@
     </div>
   </div>
 
+  <div *ngIf="isTypings" class="msg_container base_receive typing_container">
+    <!-- !isSameSender(idUserTypingNow, i) -->
+    <!-- <div *ngIf="nameUserTypingNow">{{nameUserTypingNow}}</div> -->
+    <user-typing
+      [themeColor]="stylesMap?.get('themeColor')"
+      [translationMap]="translationMap"
+      [idUserTypingNow]="idUserTypingNow"
+      [nameUserTypingNow]="nameUserTypingNow">
+    </user-typing>
+    <div class="typing_info" *ngIf="nameUserTypingNow"> {{nameUserTypingNow}} {{translationMap.get('LABEL_IS_WRITING')}}</div>
+  </div>
+
 </div>
 
 <!-- fileType > {{fileType }} uploadProgress {{uploadProgress}} -->

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

@@ -111,6 +111,27 @@ ion-item {
     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;
@@ -187,8 +208,8 @@ 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;
@@ -212,6 +233,7 @@ ion-item {
     .has-metadata {
         max-width: 100% !important;
     }
+
 }
 
 .time {

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

@@ -50,7 +50,7 @@
 
       <chat-text *ngIf="message?.type !=='html'"
         [text]="message?.text" 
-        [color]="textColor" 
+        [color]="fontColor" 
         [message]="message"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)">

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

@@ -18,7 +18,9 @@ import { ModalController } from '@ionic/angular';
 export class BubbleMessageComponent implements OnInit, OnChanges {
 
   @Input() message: MessageModel;
-  @Input() textColor: string;
+  @Input() fontColor: string;
+  @Input() fontSize: string;
+  @Input() fontFamily: string;
   @Input() areVisibleCAR: boolean;
   @Input() supportMode: boolean;
   @Output() onBeforeMessageRender = new EventEmitter();

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.html

@@ -100,12 +100,12 @@
           <span  class="truncate">{{translationsMap.get('DIRECT_CHAT')}}</span>
         </div>
         <!-- GROUP CONV -->
-        <div *ngIf="!conversation.uid.includes(TYPE_SUPPORT_GROUP) &&  conversation.channel_type !== TYPE_DIRECT">
+        <div *ngIf="conversation.uid.startsWith(TYPE_GROUP)">
           <svg xmlns="http://www.w3.org/2000/svg" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
           <span  class="truncate">{{translationsMap.get('GROUP_CHAT')}}</span>
         </div>
         <!-- SUPPORT-GROUP CONV -->
-        <div  *ngIf="conversation.uid.includes(TYPE_SUPPORT_GROUP) > 0 ">
+        <div  *ngIf="conversation.uid.startsWith(TYPE_SUPPORT_GROUP)">
           <svg xmlns="http://www.w3.org/2000/svg" data-v-78d18411="" width="15" height="15" fill="none" viewBox="0 0 24 24" class="inbox-icon"><path d="M22.002 12C22.002 6.477 17.524 2 12 2 6.476 1.999 2 6.477 2 12.001c0 5.186 3.947 9.45 9.001 9.952V20.11c-.778-.612-1.478-1.905-1.939-3.61h1.94V15H8.737a18.969 18.969 0 0 1-.135-5h6.794c.068.64.105 1.31.105 2h1.5c0-.684-.033-1.353-.095-2h3.358c.154.64.237 1.31.237 2h1.5ZM4.786 16.5h2.722l.102.396c.317 1.17.748 2.195 1.27 3.015a8.532 8.532 0 0 1-4.094-3.41ZM3.736 10h3.358a20.847 20.847 0 0 0-.095 2c0 1.043.075 2.051.217 3H4.043a8.483 8.483 0 0 1-.544-3c0-.682.08-1.347.232-1.983L3.736 10Zm5.122-5.902.023-.008C8.16 5.222 7.611 6.748 7.298 8.5H4.25c.905-2 2.56-3.587 4.608-4.402Zm3.026-.594L12 3.5l.126.006c1.262.126 2.48 2.125 3.045 4.995H8.83c.568-2.878 1.79-4.88 3.055-4.996Zm3.343.76-.107-.174.291.121a8.533 8.533 0 0 1 4.339 4.29h-3.048c-.298-1.665-.806-3.125-1.475-4.237Z M12 19a1 1 0 0 0 1 1h3v2h-.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 0-1H19v-2h3a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v5Z" fill="currentColor"/></svg>
           <span *ngIf="conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.project_name}}</span>
           <span *ngIf="!conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.projectId}}</span>

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.html

@@ -44,27 +44,18 @@
                 <span  class="truncate">{{translationsMap.get('DIRECT_CHAT')}}</span>
               </div>
               <!-- GROUP CONV -->
-              <div *ngIf="!conversationUid?.includes(TYPE_SUPPORT_GROUP) &&  !isDirect">
+              <div *ngIf="conversationUid?.startsWith(TYPE_GROUP)">
                 <svg xmlns="http://www.w3.org/2000/svg" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
                 <span  class="truncate">{{translationsMap.get('GROUP_CHAT')}}</span>
               </div>
               <!-- SUPPORT-GROUP CONV -->
-              <div  *ngIf="conversationUid?.includes(TYPE_SUPPORT_GROUP)">
+              <div  *ngIf="conversationUid?.startsWith(TYPE_SUPPORT_GROUP)">
                 <svg xmlns="http://www.w3.org/2000/svg" data-v-78d18411="" width="15" height="15" fill="none" viewBox="0 0 24 24" class="inbox-icon"><path d="M22.002 12C22.002 6.477 17.524 2 12 2 6.476 1.999 2 6.477 2 12.001c0 5.186 3.947 9.45 9.001 9.952V20.11c-.778-.612-1.478-1.905-1.939-3.61h1.94V15H8.737a18.969 18.969 0 0 1-.135-5h6.794c.068.64.105 1.31.105 2h1.5c0-.684-.033-1.353-.095-2h3.358c.154.64.237 1.31.237 2h1.5ZM4.786 16.5h2.722l.102.396c.317 1.17.748 2.195 1.27 3.015a8.532 8.532 0 0 1-4.094-3.41ZM3.736 10h3.358a20.847 20.847 0 0 0-.095 2c0 1.043.075 2.051.217 3H4.043a8.483 8.483 0 0 1-.544-3c0-.682.08-1.347.232-1.983L3.736 10Zm5.122-5.902.023-.008C8.16 5.222 7.611 6.748 7.298 8.5H4.25c.905-2 2.56-3.587 4.608-4.402Zm3.026-.594L12 3.5l.126.006c1.262.126 2.48 2.125 3.045 4.995H8.83c.568-2.878 1.79-4.88 3.055-4.996Zm3.343.76-.107-.174.291.121a8.533 8.533 0 0 1 4.339 4.29h-3.048c-.298-1.665-.806-3.125-1.475-4.237Z M12 19a1 1 0 0 0 1 1h3v2h-.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 0-1H19v-2h3a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v5Z" fill="currentColor"/></svg>
                 <span *ngIf="conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.project_name}}</span>
                 <span *ngIf="!conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.projectId}}</span>
               </div>
             </div>
 
-            <app-user-typing 
-              [idConversation]=conversationAvatar.uid 
-              [idCurrentUser]=idLoggedUser 
-              [isDirect]=isDirect
-              [translationMap]=translationsMap 
-              [color]=fontColor 
-              [membersConversation]=membersConversation>
-            </app-user-typing>
-
           </div>
         </div>
         

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.scss

@@ -5,7 +5,7 @@ ion-header {
     border-color: var(--light-gray);
     border-bottom-width: thin;
     ion-toolbar{
-        height: 60px;
+        height: --header-height;
         .flex-container{
             display: flex;
         }

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.ts

@@ -1,3 +1,4 @@
+import { TYPE_GROUP } from './../../../../chat21-core/utils/constants';
 import {
   Component,
   OnInit,
@@ -40,16 +41,15 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   openInfoConversation = true
   
   isDirect = false
-  isTyping = false
   borderColor = '#ffffff'
   fontColor = '#949494'
-  membersConversation = ['SYSTEM']
   platformName: string
   conv_closed: boolean = false;
   IS_ON_IOS_MOBILE_DEVICE: boolean
   private logger: LoggerService = LoggerInstance.getInstance()
 
   TYPE_SUPPORT_GROUP = TYPE_SUPPORT_GROUP
+  TYPE_GROUP = TYPE_GROUP
 
   constructor(
     public imageRepoService: ImageRepoService,
@@ -100,8 +100,6 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     this.getPlatformName()
     if ( this.conversationAvatar && this.conversationAvatar.channelType === TYPE_DIRECT ) {
       this.isDirect = true
-    } else if (this.idLoggedUser) {
-      this.membersConversation.push(this.idLoggedUser)
     }
   }
 

package/src/app/components/ddp-header/ddp-header.component.html

@@ -1,4 +1,4 @@
-<ion-toolbar style="height:60px" [ngClass]="{'bottom-border-on-mobile':IS_ON_MOBILE_DEVICE === true }">
+<ion-toolbar [ngClass]="{'bottom-border-on-mobile':IS_ON_MOBILE_DEVICE === true }">
 
   <ion-buttons *ngIf="IS_ON_MOBILE_DEVICE === true || supportMode === false" slot="start" style="height:60px">
     <ion-button ion-button icon-only fill="clear" (click)="onOpenProfileInfo($event)">

package/src/app/components/ddp-header/ddp-header.component.scss

@@ -1,3 +1,7 @@
+ion-toolbar {
+    height: --header-height;
+}
+
 ion-title img {
     height: 30px;
 }

package/src/app/components/project-item/project-item.component.html

@@ -100,7 +100,7 @@ c0.9-1.1,1.2-2.3,1.2-3.7V4h4.9v6.1c0,1.3,0.5,2.7,1.2,3.7H8.3z" />
 
 
 <ng-template #conversationsInQueueOnProjectName>
-  <span *ngIf="unservedRequestCount > 0">
+  <span>
     ({{ unservedRequestCount }})
     {{translationMap?.get('UnassignedConversations') }}
   </span>

package/src/app/pages/conversation-detail/conversation-detail.page.html

@@ -124,7 +124,10 @@
                   [baseLocation]="window?.location?.origin"
                   [areVisibleCAR]="areVisibleCAR" 
                   [supportMode]= "supportMode"
-                  [isMobile]="isMobile" 
+                  [isMobile]="isMobile"
+                  [isTypings]="isTypings"
+                  [idUserTypingNow]="idUserTypingNow"
+                  [nameUserTypingNow]="nameUserTypingNow" 
                   [translationMap]="translationsContentMap"
                   [stylesMap]="styleMap"
                   (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"

package/src/app/pages/conversation-detail/conversation-detail.page.ts

@@ -115,15 +115,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   public openInfoConversation = false
   public isMobile = false
   public isLessThan991px = false // nk added
-  public isTyping = false
-  public nameUserTypingNow: string
 
   public heightMessageTextArea = ''
   public translationsMap: Map<string, string> = new Map()
   public translationsHeaderMap: Map<string, string> = new Map() 
   public translationsContentMap: Map<string, string> = new Map()
   public conversationAvatar: any
-  public membersConversation: any
   public member: UserModel
   public urlConversationSupportGroup: any
   public isFileSelected: boolean
@@ -169,6 +166,15 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   public disableTextarea: boolean;
   appsidebarIsWide: boolean;
 
+  // ========== begin:: typying =======
+  public isTypings = false;
+  public isDirect = false;
+  public idUserTypingNow: string;
+  public nameUserTypingNow: string;
+  private setTimeoutWritingMessages;
+  membersConversation = ['SYSTEM'];
+  // ========== end:: typying =======
+
   /**
    * Constructor
    * @param route
@@ -237,21 +243,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   // -----------------------------------------------------------
   ngOnInit() {
     this.logger.log('[CONVS-DETAIL] > ngOnInit - window.location: ', window.location);
-    // this.logger.log('[CONVS-DETAIL] > ngOnInit - fileUploadAccept: ', this.appConfigProvider.getConfig().fileUploadAccept);
-    // const accept_files = this.appConfigProvider.getConfig().fileUploadAccept;
-    // this.logger.log('[CONVS-DETAIL] > ngOnInit - fileUploadAccept typeof accept_files ', typeof accept_files);
-    // const accept_files_array = accept_files.split(',')
-    // this.logger.log('[CONVS-DETAIL] > ngOnInit - fileUploadAccept accept_files_array ', accept_files_array);
-    // this.logger.log('[CONVS-DETAIL] > ngOnInit - fileUploadAccept accept_files_array typeof: ', typeof accept_files_array);
-
-    // accept_files_array.forEach(accept_file => {
-    //   this.logger.log('[CONVS-DETAIL] > ngOnInit - fileUploadAccept accept_file ', accept_file);
-    //   const accept_file_segment = accept_file.split('/')
-    //   this.logger.log('[CONVS-DETAIL] > ngOnInit - fileUploadAccept accept_file_segment ', accept_file_segment);
-    //   if (accept_file_segment[1] === '*') {
-
-    //   }
-    // });
+
     this.getConversations();
     this.watchToConnectionStatus();
     this.getOSCODE();
@@ -479,6 +471,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.loggedUser = this.tiledeskAuthService.getCurrentUser()
     this.logger.log('[CONVS-DETAIL] - initialize -> loggedUser: ', this.loggedUser)
     this.translations()
+    this.setStyleMap()
     // this.conversationSelected = localStorage.getItem('conversationSelected');
     this.showButtonToBottom = false
     this.showMessageWelcome = false
@@ -531,6 +524,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.addEventsKeyboard()
     this.startConversation()
     this.updateConversationBadge() // AGGIORNO STATO DELLA CONVERSAZIONE A 'LETTA' (is_new = false)
+  
+    this.initializeTyping();
   }
 
   _getProjectIdByConversationWith(conversationWith: string) {
@@ -589,7 +584,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       'LABEL_TO',
       'LABEL_LAST_ACCESS',
       'ARRAY_DAYS',
-      'LABEL_IS_WRITING',
+      
       'LABEL_INFO_ADVANCED',
       'ID_CONVERSATION',
       'UPLOAD_FILE_ERROR',
@@ -629,7 +624,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
     const keysContentDetail = [
       'LABEL_OPEN_INFO_CONVERSATION',
-      'LABEL_CLOSE_GROUP'
+      'LABEL_CLOSE_GROUP',
+      'LABEL_IS_WRITING',
     ]
 
     this.translationsMap = this.customTranslateService.translateLanguage(keys)
@@ -662,6 +658,13 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     return this.customTranslateService.translateLanguage(keys)
   }
 
+  private setStyleMap(){
+      this.styleMap.set('themeColor', 'var(--basic-gray)')
+                    .set('bubbleReceivedBackground','var(--bck-msg-received)')
+                    .set('bubbleReceivedTextColor', 'var(--col-msg-received)')
+                    .set('bubbleSentBackground', 'var(--bck-msg-sent)')
+                    .set('bubbleSentTextColor', 'var(--col-msg-sent)')
+  }
   // -------------------------------------------------------------------------------------
   // * retrieving the handler from chatManager
   // * if it DOESN'T EXIST I create a handler and connect and store it in the chatmanager
@@ -1000,6 +1003,22 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.subscriptions.push(subscribe)
     }
 
+    subscriptionKey = 'conversationTyping';
+    subscription = this.subscriptions.find(item => item.key === subscriptionKey);
+    if (!subscription) {
+      subscription =  this.typingService.BSIsTyping.pipe(takeUntil(this.unsubscribe$)).subscribe((data: any) => {
+        this.logger.debug('[CONVS-DETAIL] ***** BSIsTyping *****', data);
+        if (data) {
+          const isTypingUid = data.uid; //support-group-...
+          if (this.conversationWith === isTypingUid) {
+            that.subscribeTypings(data);
+          }
+        }
+      });
+      const subscribe = {key: subscriptionKey, value: subscription };
+      this.subscriptions.push(subscribe);
+    }
+
     // subscriptionKey = 'onGroupChange';
     // subscription = this.subscriptions.find(item => item.key === subscriptionKey);
     // if (!subscription) {
@@ -1684,6 +1703,63 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       return isAcceptFile
     }
   }
+
+
+  initializeTyping() {
+    this.logger.debug('[CONVS-DETAIL] membersconversation', this.membersConversation)
+    this.membersConversation.push(this.loggedUser.uid)
+    //this.setSubscriptions();
+    this.typingService.isTyping(this.conversationWith, this.loggedUser.uid, this.isDirect);
+    
+  }
+
+  /** */
+  subscribeTypings(data: any) {
+    const that = this;
+    try {
+      const key = data.uidUserTypingNow;
+      const waitTime = data.waitTime
+      this.nameUserTypingNow = null;
+      this.idUserTypingNow = null;
+
+      if (data.nameUserTypingNow) {
+        this.nameUserTypingNow = data.nameUserTypingNow;
+      }
+      if (data.uidUserTypingNow){
+        this.idUserTypingNow = data.uidUserTypingNow
+      }
+      this.logger.debug('[CONV-COMP] subscribeTypings data:', data);
+      const userTyping = this.membersConversation.includes(key);
+      if ( !userTyping && key) {
+        this.isTypings = true;
+        setTimeout(function () {
+          that.scrollBottom(0)
+        }, 0);
+        // clearTimeout(this.setTimeoutWritingMessages);
+        this.setTimeoutWritingMessages = setTimeout(() => {
+            that.isTypings = false;
+        }, waitTime);
+        // this.initiTimeout(waitTime)
+      }
+    } catch (error) {
+      this.logger.error('[CONV-COMP] error: ', error);
+    }
+
+  }
+
+  initiTimeout(waitTime){
+    const that = this;
+    this.setTimeoutWritingMessages = setTimeout(() => {
+      that.isTypings = false;
+    }, waitTime);
+  }
+
+  resetTimeout(){
+    this.isTypings = false
+    this.setTimeoutWritingMessages = null;
+    clearTimeout(this.setTimeoutWritingMessages)
+  }
+
   // -------------------------------------------------------------
   // DRAG FILE
   // -------------------------------------------------------------

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

@@ -12,11 +12,11 @@ import 'firebase/database';
 import { TypingService } from '../abstract/typing.service';
 import { CustomLogger } from '../logger/customLogger';
 import { LoggerInstance } from '../logger/loggerInstance';
+import { TIME_TYPING_MESSAGE } from 'src/chat21-core/utils/constants';
 
 
 export class TypingModel {
  
-
   constructor(
       public uid: string,
       public timestamp: any,
@@ -35,14 +35,11 @@ export class FirebaseTypingService extends TypingService {
   BSIsTyping: BehaviorSubject<any> = new BehaviorSubject<any>(null);
   BSSetTyping: BehaviorSubject<any> = new BehaviorSubject<any>(null);
 
-  // public params
-  // public tenant: string;
-  private tenant: string;
-
-  // private params
   private urlNodeTypings: string;
   private setTimeoutWritingMessages: any;
+  private tenant: string;
   private logger: LoggerService = LoggerInstance.getInstance();
+  private ref: firebase.database.Query;
 
   constructor() {
     super();
@@ -64,10 +61,11 @@ export class FirebaseTypingService extends TypingService {
       urlTyping = this.urlNodeTypings + idCurrentUser + '/' + idConversation;
     }
     this.logger.debug('[FIREBASETypingSERVICE] urlTyping: ', urlTyping);
-    const ref = firebase.database().ref(urlTyping);
-    ref.on('child_changed', (childSnapshot) => {
+    this.ref = firebase.database().ref(urlTyping);
+    this.ref.on('child_changed', (childSnapshot) => {
       const precence: TypingModel = childSnapshot.val();
-      this.BSIsTyping.next({uid: idConversation, uidUserTypingNow: precence.uid, nameUserTypingNow: precence.name});
+      this.logger.debug('[FIREBASETypingSERVICE] child_changed: ', precence);
+      this.BSIsTyping.next({uid: idConversation, uidUserTypingNow: precence.uid, nameUserTypingNow: precence.name, waitTime: TIME_TYPING_MESSAGE});
     });
   }
 

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

@@ -43,8 +43,12 @@ export const CHANNEL_TYPE_GROUP = 'group';
 // TYPES MESSAGES
 export const TYPE_MSG_TEXT = 'text';
 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 MIN_WIDTH_IMAGES = 130;
+export const TIME_TYPING_MESSAGE = 2000;
 export const TYPE_DIRECT = 'direct';
 export const TYPE_GROUP = 'group';
 export const SYSTEM = 'system';

package/src/chat21-core/utils/user-typing/user-typing.component.html

@@ -1,6 +1,9 @@
-<div class="tile-typing-now" [class.active]="isTyping">
-  <span *ngIf="nameUserTypingNow">
-    {{nameUserTypingNow}}
-  </span>
-  {{ translationMap?.get('LABEL_IS_WRITING') }}
+<div class="tile-typing-now" *ngIf="typingLocation === 'header'">
+  <span *ngIf="nameUserTypingNow">{{nameUserTypingNow}} </span>
+  {{ translationMap?.get('LABEL_WRITING') }}
+</div>
+<div class="spinner" *ngIf="typingLocation === 'content'">
+  <div class="bounce1"></div>
+  <div class="bounce2"></div>
+  <div class="bounce3"></div>
 </div>

package/src/chat21-core/utils/user-typing/user-typing.component.scss

@@ -1,10 +1,24 @@
+:root {
+    --themeColor: rgb(240, 242, 247);
+    --foregroundColor: black;
+}
+
+
 .tile-typing-now {
-    font-size: 12px;
-    background-color: #fff;
-    display: none;
-    &.active {
-        display: block;
-    }
+    position: absolute;
+    left: 40px;
+    right: 40px;
+    bottom: 3px;
+    width: auto;
+    text-align: center;
+    margin: 0px;
+    padding: 0px;
+    font-size: 1.1em;
+    color: var(--foregroundColor);
+    //display: none;
+    // &.active {
+    //     display: block;
+    // }
 }
 
 /* BEGIN LOADING */
@@ -14,49 +28,105 @@
     left: 0;
     top: 0;
     margin: 0;
-    &.active {
-        display: inline-block;
-        width: 30px;
-    }
+    // &.active {
+    //     display: inline-block;
+    //     width: 30px;
+    // }
 }
 #tile-spinner > div {
     width: 6px;
     height: 6px;
     background-color: var(--basic-blue);
 }
+// .spinner {
+//     margin: 100px auto 0;
+//     width: 70px;
+//     text-align: center;
+// }
+// .spinner > div {
+//     width: 18px;
+//     height: 18px;
+//     background-color: #333;
+//     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 {
+//     -webkit-animation-delay: -0.32s;
+//     animation-delay: -0.32s;
+// }
+// .spinner .bounce2 {
+//     -webkit-animation-delay: -0.16s;
+//     animation-delay: -0.16s;
+// }
+// @-webkit-keyframes sk-bouncedelay {
+//     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.0);
+//         transform: scale(1.0);
+//     }
+// }
+/* END LOADING */
+
+
+/* ******BOUNCE SPINNER START****** */
 .spinner {
-    margin: 100px auto 0;
+    margin: 15px 10px; //remove it if activate avatar image 
     width: 70px;
-    text-align: center;
+    // text-align: center;
+    min-height: 20px;
+    display: block;
 }
+
 .spinner > div {
-    width: 18px;
-    height: 18px;
+    width: 9px;
+    height: 9px;
     background-color: #333;
+
     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 {
     -webkit-animation-delay: -0.32s;
     animation-delay: -0.32s;
+    background-color: var(--themeColor)
 }
+
 .spinner .bounce2 {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
+    background-color: var(--themeColor);
+    opacity: 0.4
 }
+
+.spinner .bounce3 {
+    background-color: var(--themeColor);
+    opacity: 0.6
+}
+
+
 @-webkit-keyframes sk-bouncedelay {
     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);
+        -webkit-transform: scale(0);
+        transform: scale(0);
     } 40% { 
         -webkit-transform: scale(1.0);
         transform: scale(1.0);
     }
 }
-/* END LOADING */
+/* ******BOUNCE SPINNER END****** */

package/src/chat21-core/utils/user-typing/user-typing.component.ts

@@ -1,113 +1,31 @@
-import { Component, OnInit, OnDestroy, Input } from '@angular/core';
-
-// services
-import { TypingService } from '../../providers/abstract/typing.service';
-
-// Logger
-import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { Component, OnInit, OnDestroy, Input, ElementRef } from '@angular/core';
 
 @Component({
-  selector: 'app-user-typing',
+  selector: 'user-typing',
   templateUrl: './user-typing.component.html',
   styleUrls: ['./user-typing.component.scss'],
 })
 export class UserTypingComponent implements OnInit, OnDestroy {
 
-  @Input() idConversation: string;
-  @Input() idCurrentUser: string;
-  @Input() isDirect: boolean;
+ // @Input() idConversation: string;
+  // @Input() idCurrentUser: string;
+  // @Input() isDirect: boolean;
+  @Input() typingLocation: string = 'content'
   @Input() translationMap: Map<string, string>;
-  @Input() color: string;
-  @Input() membersConversation: [string];
-
-  public status = '';
-  public isTyping = false;
-  public nameUserTypingNow: string;
-
-  private setTimeoutWritingMessages: any;
-  private subscriptions = [];
-
-  private logger: LoggerService = LoggerInstance.getInstance();
+  @Input() themeColor: string;
+  @Input() idUserTypingNow: string;
+  @Input() nameUserTypingNow: string;
+  // @Input() membersConversation: [string];
 
-  constructor(
-    public typingService: TypingService
-  ) { }
+  constructor(private elementRef: ElementRef) { }
 
   /** */
   ngOnInit() {
-    this.logger.log('[USER-TYPING-COMPONENT] - ngOnInit');
-    this.initialize();
+    this.elementRef.nativeElement.style.setProperty('--themeColor', this.themeColor);
   }
 
   /** */
   ngOnDestroy() {
-    this.logger.log('UserTypingComponent - ngOnDestroy');
-    // this.unsubescribeAll();
-  }
-
-  /** */
-  initialize() {
-    this.status = ''; // this.translationMap.get('LABEL_AVAILABLE');
-    this.logger.log('this.translationMap', this.translationMap);
-    this.logger.log('this.status', this.status);
-    this.setSubscriptions();
-    this.typingService.isTyping(this.idConversation, this.idCurrentUser, this.isDirect);
-  }
-
-  /** */
-  private setSubscriptions() {
-    const that = this;
-    const conversationSelected = this.subscriptions.find(item => item.key === this.idConversation);
-    if (!conversationSelected) {
-      const subscribeBSIsTyping =  this.typingService.BSIsTyping.subscribe((data: any) => {
-        this.logger.log('***** BSIsTyping *****', data);
-        if (data) {
-          const isTypingUid = data.uid;
-          if (this.idConversation === isTypingUid) {
-            that.subscribeTypings(data);
-          }
-        }
-      });
-      const subscribe = {key: this.idConversation, value: subscribeBSIsTyping };
-      this.subscriptions.push(subscribe);
-    }
-  }
-
-  /** */
-  subscribeTypings(data: any) {
-    const that = this;
-    try {
-      const key = data.uidUserTypingNow;
-      this.nameUserTypingNow = null;
-      if (data.nameUserTypingNow) {
-        this.nameUserTypingNow = data.nameUserTypingNow;
-      }
-      this.logger.log('subscribeTypings data:', data);
-      const userTyping = this.membersConversation.includes(key);
-      if ( !userTyping ) {
-        this.isTyping = true;
-        this.logger.log('child_changed key', key);
-        this.logger.log('child_changed name', this.nameUserTypingNow);
-        clearTimeout(this.setTimeoutWritingMessages);
-        this.setTimeoutWritingMessages = setTimeout(() => {
-            that.isTyping = false;
-        }, 2000);
-      }
-    } catch (error) {
-      this.logger.log('error: ', error);
-    }
-  }
-
-
-  /** */
-  private unsubescribeAll() {
-    this.logger.log('UserTypingComponent unsubescribeAll: ', this.subscriptions);
-    this.subscriptions.forEach((subscription: any) => {
-      this.logger.log('unsubescribe: ', subscription);
-      subscription.unsubescribe();
-    });
-    this.subscriptions = [];
   }
 
 

package/src/variables.scss

@@ -23,11 +23,17 @@
     --basic-yellow: #FFC627;
     --basic-red: #EB1E23;
 
-    --bck-msg-sent: #62a8ea;
+    --bck-msg-sent: #2a6ac1;
     --col-msg-sent:#ffffff;
+
+    --bck-msg-received: #f0f2f7;
+    --col-msg-received: #06132b;
+
     --light-white: #f7f7f7;
     --black: #1a1a1a;
     --gray: #aaaaaa;
 
+    --header-height: 60px;
+
     
   }