@chat21/chat21-ionic 3.4.15 → 3.4.16-rc1

package/CHANGELOG.md

@@ -1,14 +1,15 @@
-# **CHAT21 IONIC - Changelog**
+# ** CHAT21 IONIC - Changelog**
 
 ### **Authors**: 
 *Gabriele Panico* <br>
-*Dario De Pascalis* <br>
-*Giovanni Troisi* <br>
-*Nicola Lanzilotto* <br>
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
 
+# 3.4.16-rc1
+- **added**: moved copilot from bubble-message to external rigth side
+- **bug-fixed**: internal note note visible for message-sent section (rigth side)
+
 # 3.4.15 in PROD
 
 # 3.4.14 in PROD

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.4.15",
+    "version": "3.4.16-rc1",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/app.component.ts

@@ -1242,9 +1242,9 @@ export class AppComponent implements OnInit {
   }
 
   goToDashboardLogin(){
-    let DASHBOARD_URL = this.appConfigProvider.getConfig().dashboardUrl + '#/login'
-    const myWindow = window.open(DASHBOARD_URL, '_self');
-    myWindow.focus();
+    // let DASHBOARD_URL = this.appConfigProvider.getConfig().dashboardUrl + '#/login'
+    // const myWindow = window.open(DASHBOARD_URL, '_self');
+    // myWindow.focus();
   }
 
 

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

@@ -110,9 +110,10 @@
 
         <!--backgroundColor non viene ancora usato -->
         <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.no-background]="(isImage(message) || isFrame(message)) && message?.text && message?.text.trim() === '' "  
           [class.emoticon]="isEmojii(message?.text)"
+          [class.has-metadata]="(isImage(message) || isFrame(message))"
+          [class.privateMsg]="(message?.attributes && message?.attributes?.subtype === 'private')"
           [ngStyle]="{'background': stylesMap.get('bubbleSentBackground'), 'color': stylesMap.get('bubbleSentTextColor')}"
           [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}"
           [message]="message" 
@@ -154,9 +155,10 @@
       <div class="bubble-container">
         <!--backgroundColor non viene ancora usato -->
         <chat-bubble-message class="messages msg_receive" id="message_msg_receive"
-          [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
           [class.no-background]="(isImage(message) || isFrame(message)) && message?.text && message?.text.trim() === '' "  
           [class.emoticon]="isEmojii(message?.text)"
+          [class.has-metadata]="(isImage(message) || isFrame(message))"
+          [class.privateMsg]="(message?.attributes && message?.attributes?.subtype === 'private')"
           [ngStyle]="{'background': stylesMap?.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor')}"
           [isSameSender]="isSameSender(message?.sender, i)"
           [message]="message" 
@@ -164,7 +166,6 @@
           [fontSize]="stylesMap?.get('fontSize')"
           [fontFamily]="stylesMap?.get('fontFamily')"
           [stylesMap]="stylesMap"
-          [isCopilotEnabled]="isCopilotEnabled"
           (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
           (onAfterMessageRender)="onAfterMessageRenderFN($event)" 
           (onElementRendered)="onElementRenderedFN($event)"
@@ -180,6 +181,13 @@
         </ion-button>
       </ng-container>
 
+      <ng-container *ngIf="isCopilotEnabled">
+        <ion-button shape="round" size="small" class="btn-info-msg btn-copilot" ion-button fill="clear"
+          (click)="onClickOptionsCopilot(message, i)">
+          <ion-icon id="copilot" src="assets/images/icons/copilot.svg"></ion-icon>
+        </ion-button>
+      </ng-container>
+
       <div class="message-date-hover" *ngIf="isChannelTypeGroup(channelType)"> {{message.timestamp | date:'HH:mm' }} </div>
     </div>
     

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

@@ -287,6 +287,7 @@ ion-item {
     
 
     &:hover .message-date-hover, 
+    &:hover .btn-copilot,
     &:hover .btn-add-msg,
     &:hover .btn-options-msg,
     &:hover .options-container{
@@ -349,6 +350,11 @@ ion-item {
     }
 
 
+    .btn-copilot {
+        display: none;
+    }
+
+
 }
 
 .sourcePage-container{
@@ -408,6 +414,17 @@ ion-item {
     display: block;
     height: 25px;
     width: 25px;
+
+    &:hover{
+        cursor: pointer;
+        ion-icon#copilot{
+            
+                transition: transform 1s ease-in-out;   
+                transform: rotate(180deg);
+                color: #ac87eb;
+            
+        }
+    }
 }
 
  /* LOADING */

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

@@ -18,6 +18,7 @@ import { AppConfigProvider } from 'src/app/services/app-config';
 import { ModalController, PopoverController, ToastController } from '@ionic/angular';
 import { CreateCannedResponsePage } from 'src/app/modals/create-canned-response/create-canned-response.page';
 import { EventsService } from 'src/app/services/events-service';
+import { CopilotPopoverComponent } from 'src/app/components/copilot-popover/copilot-popover.component';
 
 @Component({
   selector: 'ion-conversation-detail',
@@ -166,9 +167,6 @@ export class IonConversationDetailComponent extends ConversationContentComponent
       }
     }else if(event.option === 'jsonInfo'){
       this.presentJsonMessageModal(event.data.message)
-    } else if(event.option === 'copilot_question'){
-      this.eventService.publish('copilot:new_question', {text: event.data.text})
-
     }
   }
 
@@ -185,6 +183,11 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     }
   }
 
+  onClickOptionsCopilot(message: MessageModel, index: number){
+    this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onClickOptionsCopilot', message);
+    this.presentCopilotPopover(message)
+  }
+
   onElementRenderedFN(event) {
     this.logger.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - onElementRenderedFN:::ionic', event)
     this.onElementRendered.emit(event)
@@ -262,4 +265,27 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     });
     toast.present();
   }
+
+  async presentCopilotPopover(message: MessageModel,) {
+      const attributes = {
+        message: message,
+        conversationWith: message.recipient
+      }
+      const popover = await this.popoverController.create({
+        component: CopilotPopoverComponent,
+        cssClass: 'copilot-popover',
+        componentProps: attributes,
+        translucent: true,
+        keyboardClose: true,
+        showBackdrop: false,
+      });
+      popover.onDidDismiss().then((dataReturned: any) => {
+        this.logger.log('[BUBBLE-MESSAGE] presentCopilotPopover dismissed. Returned value::', dataReturned.data)
+        if(dataReturned.data){
+          this.eventService.publish('copilot:new_question', {text: dataReturned.data.text})
+        }
+      })
+  
+      return await popover.present();
+    }
 }

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

@@ -11,7 +11,6 @@
   </div> -->
   <chat-options
     [message]="message"
-    [isCopilotEnabled]="isCopilotEnabled"
     [logLevel]="logger.getLoggerConfig().logLevel"
     (onOptionsDataReturned)="onOptionsDataReturnedFN($event)">
   </chat-options>

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

@@ -26,7 +26,6 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   @Input() fontFamily: string;
   @Input() stylesMap: Map<string, string>;
   @Input() supportMode: boolean;
-  @Input() isCopilotEnabled: boolean = false;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();

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

@@ -2,7 +2,4 @@
   <div class="options-logo" (click)="onClickOptionsMessage($event)" >
     <ion-icon name="chevron-down"></ion-icon>
   </div>
-  <div *ngIf="isCopilotEnabled" class="options-logo" (click)="onClickOptionsCopilot($event)">
-    <ion-icon id="copilot" src="assets/images/icons/copilot.svg"></ion-icon>
-  </div>
 </div>

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

@@ -14,7 +14,6 @@ import { CopilotPopoverComponent } from 'src/app/components/copilot-popover/copi
 export class OptionsComponent implements OnInit {
 
   @Input() message: MessageModel;
-  @Input() isCopilotEnabled: boolean = false;
   @Input() logLevel: number;
   @Output() onOptionsDataReturned = new EventEmitter<{option: string, data: any}>();
 
@@ -28,13 +27,6 @@ export class OptionsComponent implements OnInit {
       this.logger.log('[BUBBLE-MESSAGE] - onClickOptionsMessage', this.message);
       this.presentPopover(event)
   }
-
-  onClickOptionsCopilot(event){
-    this.logger.log('[BUBBLE-MESSAGE] - onClickOptionsCopilot', this.message);
-    this.presentCopilotPopover(event)
-  }
-
-  
   
   async presentPopover(ev: any) {
     const attributes = {
@@ -61,29 +53,4 @@ export class OptionsComponent implements OnInit {
     return await popover.present();
   }
 
-  async presentCopilotPopover(ev: any) {
-    const attributes = {
-      message: this.message,
-      logLevel: this.logLevel,
-      conversationWith: this.message.recipient
-    }
-    const popover = await this.popoverController.create({
-      component: CopilotPopoverComponent,
-      cssClass: 'copilot-popover',
-      componentProps: attributes,
-      event: ev,
-      translucent: true,
-      keyboardClose: true,
-      showBackdrop: false,
-    });
-    popover.onDidDismiss().then((dataReturned: any) => {
-      this.logger.log('[BUBBLE-MESSAGE] presentCopilotPopover dismissed. Returned value::', dataReturned.data)
-      if(dataReturned.data){
-        this.onOptionsDataReturned.emit({option: 'copilot_question', data: {text: dataReturned.data.text}})
-      }
-    })
-
-    return await popover.present();
-  }
-
 }

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

@@ -7,78 +7,82 @@
     </ion-buttons>
 
     <ion-title>
-
-      <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" [ngClass]="{'mobile': isMobile}">
-        <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
-        <div class="avatar-container" [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
-          <app-avatar-profile 
-            [itemAvatar]=conversationAvatar>
-          </app-avatar-profile>
-        </div>
-        <div class="info-container">
-
-          <!-- [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' ? '82px' : ''82px''  }" -->
-          <!-- (click)="onOpenCloseInfoConversation()" -->
-          <div class="tile-info-with" 
-            [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
-            <span class="tile-username truncate">{{ conversationAvatar.conversation_with_fullname}} </span>
-            <!-- <span class="tile-username">{{ conversation_with_fullname }} </span> -->
-          </div>
-
-          <div class="subtitle-info">
-            <div class="conversation_project">
-              <!-- DIRECT CONV -->
-              <div *ngIf="isDirect">
-                <app-user-presence 
-                  [idUser]="conversationAvatar.conversation_with"
-                  [isMobile]="isMobile"
-                  [translationMap]="translationsMap">
-                </app-user-presence>
-                <!-- <svg xmlns="http://www.w3.org/2000/svg" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
-                <span  class="truncate">{{translationsMap.get('DIRECT_CHAT')}}</span> -->
+      <ion-grid class="ion-no-padding ion-no-margin">
+        <ion-row>
+          <ion-col>
+            <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" [ngClass]="{'mobile': isMobile}">
+              <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
+              <div class="avatar-container" [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
+                <app-avatar-profile 
+                  [itemAvatar]=conversationAvatar>
+                </app-avatar-profile>
               </div>
-              <!-- GROUP CONV -->
-              <div *ngIf="conversationUid?.startsWith(CHANNEL_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 class="info-container">
+      
+                <!-- [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' ? '82px' : ''82px''  }" -->
+                <!-- (click)="onOpenCloseInfoConversation()" -->
+                <div class="tile-info-with" 
+                  [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
+                  <span class="tile-username truncate">{{ conversationAvatar.conversation_with_fullname}} </span>
+                  <!-- <span class="tile-username">{{ conversation_with_fullname }} </span> -->
+                </div>
+      
+                <div class="subtitle-info">
+                  <div class="conversation_project">
+                    <!-- DIRECT CONV -->
+                    <div *ngIf="isDirect">
+                      <app-user-presence 
+                        [idUser]="conversationAvatar.conversation_with"
+                        [isMobile]="isMobile"
+                        [translationMap]="translationsMap">
+                      </app-user-presence>
+                      <!-- <svg xmlns="http://www.w3.org/2000/svg" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+                      <span  class="truncate">{{translationsMap.get('DIRECT_CHAT')}}</span> -->
+                    </div>
+                    <!-- GROUP CONV -->
+                    <div *ngIf="conversationUid?.startsWith(CHANNEL_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?.startsWith(CHANNEL_TYPE.SUPPORT_GROUP) && !IS_ON_MOBILE_DEVICE">
+                      <img class="channel-icon" src="assets/images/channel_icons/chat21.svg" *ngIf="( (conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.CHAT21) ||  !conversationAvatar?.request_channel) " >
+                      <img class="channel-icon" src="assets/images/channel_icons/email-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.EMAIL" >
+                      <img class="channel-icon" src="assets/images/channel_icons/form-logo_v2.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.FORM" >
+                      <img class="channel-icon" src="assets/images/channel_icons/messenger-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.MESSENGER" >
+                      <img class="channel-icon" src="assets/images/channel_icons/whatsapp-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.WHATSAPP" >
+                      <img class="channel-icon" src="assets/images/channel_icons/telegram-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.TELEGRAM" >
+                      <img class="channel-icon" src="assets/images/channel_icons/voice.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel.startsWith(CHANNEL_TYPE.VOICE)" >
+                      <span *ngIf="conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.project_name}}</span>
+                      <span *ngIf="!conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.projectId}}</span>
+                    </div>
+                  </div>
+      
+                </div>
               </div>
-              <!-- SUPPORT-GROUP CONV -->
-              <div  *ngIf="conversationUid?.startsWith(CHANNEL_TYPE.SUPPORT_GROUP) && !IS_ON_MOBILE_DEVICE">
-                <img class="channel-icon" src="assets/images/channel_icons/chat21.svg" *ngIf="( (conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.CHAT21) ||  !conversationAvatar?.request_channel) " >
-                <img class="channel-icon" src="assets/images/channel_icons/email-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.EMAIL" >
-                <img class="channel-icon" src="assets/images/channel_icons/form-logo_v2.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.FORM" >
-                <img class="channel-icon" src="assets/images/channel_icons/messenger-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.MESSENGER" >
-                <img class="channel-icon" src="assets/images/channel_icons/whatsapp-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.WHATSAPP" >
-                <img class="channel-icon" src="assets/images/channel_icons/telegram-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.TELEGRAM" >
-                <img class="channel-icon" src="assets/images/channel_icons/voice.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel.startsWith(CHANNEL_TYPE.VOICE)" >
-                <span *ngIf="conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.project_name}}</span>
-                <span *ngIf="!conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.projectId}}</span>
+              <!-- COPILOT-OPTION -->
+              <div *ngIf="isCopilotEnabled" class="copilot-container" id="copilot" tooltip="{{translationsMap?.get('COPILOT.SOLVE_WITH_AI')}}" placement="top">
+                <ion-button id="copilot" fill="clear" (click)="onOpenSection('copilot')">
+                  <ion-icon class="channel-icon" src="assets/images/icons/copilot.svg"></ion-icon>
+                  {{translationsMap?.get('COPILOT.SOLVE_WITH_AI')}}
+                </ion-button>
               </div>
-            </div>
-
-          </div>
-        </div>
-        <!-- COPILOT-OPTION -->
-        <div *ngIf="isCopilotEnabled" class="copilot-container" id="copilot" tooltip="{{translationsMap?.get('COPILOT.SOLVE_WITH_AI')}}" placement="top">
-          <ion-button id="copilot" fill="clear" (click)="onOpenSection('copilot')">
-            <ion-icon class="channel-icon" src="assets/images/icons/copilot.svg"></ion-icon>
-            {{translationsMap?.get('COPILOT.SOLVE_WITH_AI')}}
-          </ion-button>
-        </div>
-        
-        <!-- <div>
-          <ion-button class="live" ion-button color="danger">
-            <span class="live-icon"></span>
-            <span class="live-text">{{translationsMap.get('LIVE')}}</span>
-            <span class="live-content">source page</span>
-          </ion-button>
-        </div> -->
-        
-
-      </div>
-
-      
+              
+              <!-- <div>
+                <ion-button class="live" ion-button color="danger">
+                  <span class="live-icon"></span>
+                  <span class="live-text">{{translationsMap.get('LIVE')}}</span>
+                  <span class="live-content">source page</span>
+                </ion-button>
+              </div> -->
+              
       
+            </div>
+          </ion-col>
+          <ion-col>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
 
       <!-- <div *ngIf="conversationWithFullname" class="tile-info-with" (click)="onOpenCloseInfoConversation()">        
         <span class="tile-username">{{ conversationWithFullname }} </span>

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

@@ -33,10 +33,15 @@ ion-header {
     ion-title {
         text-align: left;
         padding-inline: unset;
-        margin: 0px 10px;
-        // height: 40px;
+        padding: 0 var(--padding-conversation-detail);
+        height: var(--header-height);
         width: 100%;
     }
+    ion-grid{
+        ion-col:first-child{
+            min-width: calc(100% - 320px);
+        }
+    }
     ion-avatar {
         position: relative;
         display: inline-block;

package/src/app/components/copilot-popover/copilot-popover.component.scss

@@ -94,6 +94,9 @@
                 margin-right: 4px;
                 margin-left: 4px;
             }
+            &:hover{
+                opacity: 0.8;
+            }
         }
     }
 

package/src/app/shared/shared.module.ts

@@ -1,56 +1,27 @@
 import { TooltipDirective } from './../directives/tooltip.directive';
-import { OptionsComponent } from './../chatlib/conversation-detail/message/options/options.component';
-import { HeaderConversationsListUnassigned } from './../components/conversations-list/header-conversations-list-unassigned/header-conversations-list-unassigned.component';
 import { NavbarComponent } from './../components/navbar/navbar.component';
 import { FormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { NetworkOfflineComponent } from './../components/network-offline/network-offline.component';
-import { ContactsDirectoryComponent } from './../components/contacts-directory/contacts-directory.component';
-import { HtmlComponent } from './../chatlib/conversation-detail/message/html/html.component';
 
-import { TextComponent } from '../chatlib/conversation-detail/message/text/text.component';
-import { ReturnReceiptComponent } from '../chatlib/conversation-detail/message/return-receipt/return-receipt.component';
-import { InfoMessageComponent } from '../chatlib/conversation-detail/message/info-message/info-message.component';
-import { ImageComponent } from '../chatlib/conversation-detail/message/image/image.component';
-import { FrameComponent } from '../chatlib/conversation-detail/message/frame/frame.component';
-import { ActionButtonComponent } from '../chatlib/conversation-detail/message/buttons/action-button/action-button.component';
-import { LinkButtonComponent } from '../chatlib/conversation-detail/message/buttons/link-button/link-button.component';
-import { TextButtonComponent } from '../chatlib/conversation-detail/message/buttons/text-button/text-button.component';
-import { BubbleMessageComponent } from '../chatlib/conversation-detail/message/bubble-message/bubble-message.component';
-import { ConversationContentComponent } from '../chatlib/conversation-detail/conversation-content/conversation-content.component';
-import { IonListConversationsComponent } from '../chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component';
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 
 import { AvatarProfileComponent } from 'src/app/components/utils/avatar-profile/avatar-profile.component';
-import { HeaderConversationsList } from 'src/app/components/conversations-list/header-conversations-list/header-conversations-list.component';
-import { HeaderConversationsListArchived } from 'src/app/components/conversations-list/header-conversations-list-archived/header-conversations-list-archived.component';
 
 import { UserPresenceComponent } from 'src/app/components/utils/user-presence/user-presence.component';
-import { UserTypingComponent } from 'src/chat21-core/utils/user-typing/user-typing.component';
-import { ListConversationsComponent } from '../chatlib/list-conversations-component/list-conversations/list-conversations.component';
 import { MomentModule } from 'ngx-moment';
-import { AvatarComponent } from 'src/app/chatlib/conversation-detail/message/avatar/avatar.component';
 import { MarkedPipe } from 'src/app/directives/marked.pipe';
 import { AutofocusDirective } from 'src/app/directives/autofocus.directive';
 import { HtmlEntitiesEncodePipe } from 'src/app/directives/html-entities-encode.pipe';
-import { IonConversationDetailComponent } from 'src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component';
-import { InfoContentComponent } from 'src/app/components/conversation-info/info-content/info-content.component';
-import { InfoSupportGroupComponent } from 'src/app/components/conversation-info/info-support-group/info-support-group.component';
-import { InfoDirectComponent } from 'src/app/components/conversation-info/info-direct/info-direct.component';
-import { AdvancedInfoAccordionComponent } from 'src/app/components/conversation-info/advanced-info-accordion/advanced-info-accordion.component';
-import { InfoGroupComponent } from 'src/app/components/conversation-info/info-group/info-group.component';
-import { MessageAttachmentComponent } from 'src/app/chatlib/conversation-detail/message/message-attachment/message-attachment.component';
 import { ImageViewerComponent } from 'src/app/components/image-viewer/image-viewer.component';
 import { SidebarComponent } from 'src/app/components/sidebar/sidebar.component';
 import { SidebarUserDetailsComponent } from 'src/app/components/sidebar-user-details/sidebar-user-details.component';
-import { ProjectItemComponent } from 'src/app/components/project-item/project-item.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { SafeHtmlPipe } from '../directives/safe-html.pipe';
-import { AudioComponent } from '../chatlib/conversation-detail/message/audio/audio.component';
 
 // import { MessageTextAreaComponent } from '../components/conversation-detail/message-text-area/message-text-area.component'; // MessageTextAreaComponent is part of the declarations ConversationDetailPageModule