@chat21/chat21-ionic 2.0.13 → 3.0.5-9.2

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

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MSG_STATUS_RETURN_RECEIPT, MSG_STATUS_SENT, MSG_STATUS_SENT_SERVER } from 'src/chat21-core/utils/constants';
+
+@Component({
+  selector: 'chat-return-receipt',
+  templateUrl: './return-receipt.component.html',
+  styleUrls: ['./return-receipt.component.scss']
+})
+export class ReturnReceiptComponent implements OnInit {
+
+  @Input() status: number;
+
+  // ========== begin:: set icon status message
+  MSG_STATUS_SENT = MSG_STATUS_SENT;
+  MSG_STATUS_SENT_SERVER = MSG_STATUS_SENT_SERVER;
+  MSG_STATUS_RETURN_RECEIPT = MSG_STATUS_RETURN_RECEIPT;
+  // ========== end:: icon status message
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,5 @@
+<!-- [ngStyle] = "{ 'width': message.type === 'image' ? media_width +'px' : ''  }" -->
+<p  #messageEl class="message_innerhtml marked"  
+    [innerHTML]="printMessage(text, messageEl, this) | htmlEntiesEncode  | marked"
+    [ngStyle]="{'color': '$'+ color }">
+</p>

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

@@ -0,0 +1,26 @@
+// @import '../../../../sass/variables';
+
+.message_innerhtml {
+    margin: 0px;
+    // padding: 0px 14px;
+    &.marked{
+        padding:8px;
+        margin-block-start: -1em!important;
+        margin-block-end: -1em!important;
+    }
+}
+
+p {
+    font-size: 0.9em;
+    margin: 0;
+    padding: 14px;
+    font-style: normal;
+    letter-spacing: normal;
+    font-stretch: normal;
+    font-variant: normal;
+    // font-weight: 300;
+    font-weight: 400;
+    overflow: hidden;
+}
+
+

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

@@ -0,0 +1,33 @@
+import { HtmlEntitiesEncodePipe } from './../../../../directives/html-entities-encode.pipe';
+import { MarkedPipe } from './../../../../directives/marked.pipe';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextComponent } from './text.component';
+
+describe('TextComponent', () => {
+  let component: TextComponent;
+  let fixture: ComponentFixture<TextComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ 
+        TextComponent,
+        MarkedPipe,
+        HtmlEntitiesEncodePipe
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TextComponent);
+    component = fixture.componentInstance;
+    component.text = 'Msg text'
+    component.color= 'black'
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,56 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, Sanitizer } from '@angular/core';
+import { MAX_WIDTH_IMAGES } from 'src/chat21-core/utils/constants';
+@Component({
+  selector: 'chat-text',
+  templateUrl: './text.component.html',
+  styleUrls: ['./text.component.scss']
+})
+export class TextComponent implements OnInit {
+
+  @Input() text: string;
+  @Input() color: string;
+  @Output() onBeforeMessageRender = new EventEmitter();
+  @Output() onAfterMessageRender = new EventEmitter();
+
+  @Input() message: any;
+
+  public media_width: number;
+  public media_height: number;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+
+  printMessage(text, messageEl, component) {
+    const messageOBJ = { messageEl: messageEl, component: component }
+    this.onBeforeMessageRender.emit(messageOBJ)
+    const messageText = text;
+    this.onAfterMessageRender.emit(messageOBJ)
+    // this.triggerBeforeMessageRender(message, messageEl, component);
+    // const messageText = message.text;
+    // this.triggerAfterMessageRender(message, messageEl, component);
+    return messageText;
+  }
+
+  ngOnChanges() {
+    if (this.message.type === 'image') {
+      // console.log('TextComponent message ', this.message)
+      if (this.message.metadata.width && this.message.metadata.width > MAX_WIDTH_IMAGES) {
+
+        const ratio = (this.message.metadata['width'] / this.message.metadata['height']);
+
+        this.media_width = MAX_WIDTH_IMAGES;
+        this.media_height = MAX_WIDTH_IMAGES / ratio;
+
+        // console.log('TextComponent media_width ', this.media_width, ' media_height' ,  this.media_height)
+      } else {
+        this.media_width = this.message.metadata.width;
+        this.media_height = this.message.metadata.height;
+        // console.log('TextComponent media_width ', this.media_width, ' media_height' ,  this.media_height)
+      }
+    }
+  }
+
+}

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

@@ -0,0 +1,154 @@
+<!-- <div id='c21-app-list-conversations'>
+  <div *ngFor="let conversation of listConversations | slice:0:limit">
+    <button tabindex="1103" class="c21-item-conversation" (click)="openConversationByID(conversation)">
+      <div class="c21-body-conv">
+        <div class="c21-left-conv">
+          <div class="c21-ball" [style.background-color]="conversation?.color">
+            <span class="c21-ball-label" [innerHTML]="conversation?.avatar"></span>
+            <div *ngIf="conversation.image" #avatarImage class="c21-avatar-image" [style.background-image]="'url(' + conversation.image + ')'"></div>
+          </div>
+        </div>
+        <div class="c21-right-conv">
+          <div class="c21-last-time">{{conversation.time_last_message}}</div>
+          <div class="truncate c21-name">{{conversation.sender_fullname }}</div>
+          <div [class.not-read]="conversation.is_new" class="truncate c21-msg" [innerHTML]="conversation.last_message_text"></div>
+        </div>
+        <!- - <div *ngIf="conversation.is_new" [ngStyle] = "{ 'background-color': styleMap.get('themeColor') }" class="c21-divBudge">{{conversation.badge}}</div>
+        <div *ngIf="conversation.archived" class="c21-lablel-close">{{ translationMap.get('CLOSED') }}</div> - ->
+      </div>
+      <div class="clear"></div>
+    </button>
+    
+  </div>
+</div> -->
+
+<!-- -------------------------------------------------------------------------- -->
+<!-- New   <ion-spinner class="spinner-middle" style="margin-left: 19px;"></ion-spinner> -->
+<!-- -------------------------------------------------------------------------- -->
+<!-- <ion-item *ngIf="isOnline === false" button="true" lines="none" class="ion-no-padding waiting-for-connection">
+  <div tabindex="0"></div>
+  <ion-avatar item-start>
+    <div class="sk-fading-circle">
+      <div class="sk-circle1 sk-circle"></div>
+      <div class="sk-circle2 sk-circle"></div>
+      <div class="sk-circle3 sk-circle"></div>
+      <div class="sk-circle4 sk-circle"></div>
+      <div class="sk-circle5 sk-circle"></div>
+      <div class="sk-circle6 sk-circle"></div>
+      <div class="sk-circle7 sk-circle"></div>
+      <div class="sk-circle8 sk-circle"></div>
+      <div class="sk-circle9 sk-circle"></div>
+      <div class="sk-circle10 sk-circle"></div>
+      <div class="sk-circle11 sk-circle"></div>
+      <div class="sk-circle12 sk-circle"></div>
+    </div>
+  </ion-avatar>
+  <ion-label part="message-text" class="waiting-for-network-msg"> Waiting for network</ion-label>
+</ion-item> -->
+
+<!-- <ion-item>
+  <div tabindex="0"></div>
+  <iframe loading="lazy" width="100%" height="70px" style="border: unset;" [src]="PROJECT_FOR_PANEL"></iframe>
+</ion-item>  -->
+<!-- <ion-item button="true" (click)="openUnsevedConversationIframe()">
+  <app-project-item
+  (projectIdEvent)="getLastProjectId($event)"></app-project-item>
+</ion-item> -->
+
+
+<!-- <ion-item-sliding disabled>
+  <ion-item>
+    <ion-label>
+      Sliding Item, Icons Start
+    </ion-label>
+  </ion-item>
+  <ion-item-options>
+    <ion-item-option color="primary">
+      <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+      More
+    </ion-item-option>
+    <ion-item-option color="secondary">
+      <ion-icon slot="start" name="archive"></ion-icon>
+      Archive
+    </ion-item-option>
+  </ion-item-options>
+</ion-item-sliding> -->
+
+
+<ion-item button="true" lines="none" class="ion-no-padding" [class.ion-selected]="conversation?.uid === uidConvSelected"
+  *ngFor="let conversation of listConversations" (click)="openConversationByID(conversation)" detail=false>
+  <div tabindex="0"></div>
+
+  <!-- <div [class.selected]="conversation.uid === uidConvSelected"></div> -->
+  <ion-avatar item-start>
+    <!-- [style.background-color]="conversation.color"  -->
+    <div #avatarPlaceholder class="avatar-placeholder"
+      [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + conversation.color + ')'}"
+      [innerHTML]="conversation.avatar"></div>
+    <div *ngIf="conversation.image" #avatarImage class="avatar-profile"
+      [style.background-image]="'url(' + conversation.image + ')'"></div>
+    <!-- <div *ngIf="getImageAvatar(conversation.sender)" #avatarImage class="avatar-profile" [style.background-image]="'url(' + getImageAvatar(conversation.sender) + ')'"></div> -->
+  </ion-avatar>
+  <ion-label>
+    <div class="conversation_with truncate" [innerHTML]="conversation.conversation_with_fullname"></div>
+    <div class="conversation_message truncate-conv-msg" [ngClass]="{'truncate-on-desktop': !isApp}">
+
+      <!-- -------------------------------------------------------------------------- -->
+      <!-- if conversation type is image display the image icon before the message -->
+      <!-- -------------------------------------------------------------------------- -->
+      <!-- <div *ngIf="conversation.type === 'image'" class="icon-image-before-msg-wpr">
+        <ion-icon name="image-outline" class="icon-image-before-msg"></ion-icon>
+      </div>
+      <p [class.not-read]="conversation.is_new" class="truncate" [ngClass]="{'truncate-on-desktop': !isApp}"
+        [innerHTML]="conversation.last_message_text"></p> -->
+
+      <!-- <div *ngIf="conversation.type === 'image'" class="icon-image-before-msg-wpr"> -->
+      <ion-icon *ngIf="conversation.type === 'image' && conversation.type !== 'file' " name="image-outline"
+        class="icon-image-before-msg"></ion-icon>
+      <ion-icon *ngIf="conversation.type === 'file'  && conversation.type !== 'image'" name="attach-outline"
+        class="icon-attach-before-msg"></ion-icon>
+      <!-- </div> -->
+      <!-- [innerHTML]="conversation.last_message_text" -->
+      <span [class.not-read]="conversation.is_new">
+        {{ conversation.last_message_text }}
+      </span>
+    </div>
+  </ion-label>
+
+  <ion-note *ngIf="!conversation.archived" class="conversation_time">{{conversation.timestamp | amTimeAgo}}</ion-note>
+
+  <ion-buttons slot="end">
+    <ion-button *ngIf="!conversation.archived"
+      [ngClass]="{'hide': !isApp, 'button-on-desktop': !isApp, 'button-on-mobile': isApp  }"
+      id="{{ 'close_conversation_button' + conversation.uid }}" class="close-conversation-button" ion-button clear
+      item-end (click)="closeConversation(conversation);$event.stopPropagation();" padding>
+      <ion-icon slot="icon-only" style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}"
+        color="close-conversation" name="archive-outline" item-end></ion-icon>
+    </ion-button>
+    <!-- <ion-button *ngIf="conversation.archived" class="close-conversation-button" ion-button clear item-end disabled padding>
+      <!- - <ion-icon  style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}" color="close-conversation" name="archive-outline" item-end></ion-icon> - ->
+      <i class="material-icons" id="{{ 'close_button_icon' + conversation.uid }}"  item-end> history </i>
+      <!- - <div item-end *ngIf="conversation.archived">{{ translationMap.get('CLOSED') }}</div> - ->
+    </ion-button> -->
+  </ion-buttons>
+
+  <div item-end *ngIf="conversation?.archived" class="achived-icon-wpr">
+    <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') === currentYear" class="time-in-archived">
+      {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD') : (conversation.timestamp| amDateFormat:'DD MMM')}}
+
+      <!-- {{conversation.timestamp | amDateFormat:'DD MMM'}} -->
+    </span>
+    <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') !== currentYear" class="time-in-archived">
+      {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD YYYY') : (conversation.timestamp| amDateFormat:'DD MMM YYYY') }}
+      <!-- {{conversation.timestamp | amDateFormat:'DD MMM YYYY'}} -->
+    </span>
+    <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i>
+  </div>
+
+  <!-- && !conversation?.archived -->
+  <div item-end class="notification_point"
+    [ngClass]="{'notification_point-on-desktop': !isApp, 'notification_point-on-mobile': isApp }"
+    *ngIf="conversation.is_new">
+  </div>
+
+</ion-item>

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

@@ -0,0 +1,222 @@
+
+:host .conversation_message span ::ng-deep > a {
+    pointer-events: none;
+    img {
+        display: none;
+        // max-width: 36% !important;
+        // vertical-align: bottom;
+    }      
+}
+ion-item {
+    cursor: pointer;
+    height: 70px;
+    --min-height: 70px;
+    position: relative;
+    display: flex;
+    text-decoration: none;
+    // padding-left: 8px;
+    // padding-right: 8px;
+    --padding-start: 0;
+    --inner-padding-end: 0;
+    --background-hover: #000000 !important;
+    .selected {
+        // border-radius: 10px;
+        // padding-left: 8px;
+        // padding-right: 8px;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        // background-color: rgba(0, 0, 0, .05);
+        background-color: rgb(231, 241, 255);
+    }
+    ion-avatar {
+        position: relative;
+        padding: 0;
+        margin: 0 12px 0 8px;
+        height: 50px;
+        width: 50px;
+        min-width: 50px;
+        min-height: 50px;
+        line-height: 50px;
+        .avatar-placeholder {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            text-align: center;
+            font-size: 20px;
+            color: #ffffff;
+            font-weight: 500;
+        }
+        .avatar-profile {
+            position: relative;
+            display: inline-block;
+            width: 100%;
+            height: 100%;
+            background-color: transparent;
+            background-size: cover;
+            background-position: top center;
+            border-radius: 50%;
+            border-color: #c3c3c3;
+            border-style: solid;
+            border-width: 0px;
+        }
+    }
+    ion-label {
+        flex: 1 1 0px;
+        justify-content: center;
+        min-width: 0;
+        padding: 0;
+        font-family: Helvetica, Helvetica, Arial, sans-serif;
+        line-height: 1.28;
+        text-rendering: optimizeLegibility;
+        .conversation_with {
+            color: rgba(0, 0, 0, 1);
+            font-size: 15px;
+            font-weight: 400;
+            line-height: 1.4;
+        }
+        .conversation_message {
+            p {
+                color: rgba(153, 153, 153, 1);
+                font-size: 13px;
+                font-weight: 400;
+                height: 18px;
+                vertical-align: middle;
+                &.not-read {
+                    font-weight: 600;
+                    color: #1876f2;
+                }
+            }
+
+            span {
+                color: rgba(153, 153, 153, 1);
+                font-size: 13px;
+                font-weight: 400;
+                height: 18px;
+                &.not-read {
+                    font-weight: 600;
+                    color: #1876f2;
+                }
+            }
+        }
+    }
+    ion-note {
+        position: absolute;
+        right: 8px;
+        top: 4px;
+        font-size: 10px;
+    }
+    ion-buttons {
+        margin: 0;
+        ion-button {
+            padding: 0;
+            margin: 0;
+            height: 24px;
+            width: 24px;
+            font-size: 10px;
+            --padding-start: 0px;
+            --padding-end: 0px;
+            color: rgba(153, 153, 153, 1);
+            background-color: transparent;
+            border-radius: 50%; // nk
+            &:hover {
+                background-color: rgba(0, 0, 0, 0.05);
+            }
+        }
+    }
+
+    .notification_point {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: rgb(22, 92, 238);
+        position: absolute;
+        right: 6px;
+        bottom: 8px;
+    }
+
+    .notification_point-on-desktop {
+        bottom: 29px !important;
+    }
+    .notification_point-on-mobile {
+        bottom: 29px !important;
+        right: 8px;
+    }
+}
+
+// ion-item {
+//     --background-hover: #000000 !important;
+// }
+
+.hide {
+    display: none;
+}
+
+ion-item:hover {
+    ion-buttons {
+        ion-button {
+            display: block;
+        }
+    }
+}
+
+.button-on-desktop {
+    background-color: #fff !important;
+    margin-right: 21px !important;
+    height: 35px !important;
+    width: 35px !important;
+    border: 1px solid #eee;
+    ion-icon {
+        font-size: 21px !important;
+    }
+}
+
+.button-on-mobile {
+    margin-right: 31px !important; 
+}
+
+.truncate-on-desktop {
+    width: 88% !important
+}
+
+.achived-icon-wpr {
+    position: absolute;
+    right: 3px;
+    top: 4px;
+    font-size: 12px;
+}
+
+.icon-image-before-msg-wpr {
+    float: left;
+    margin-right: 3px;
+}
+.icon-image-before-msg {
+    vertical-align: middle;
+    color: #999999;
+    padding-right: 3px;
+}
+
+.icon-attach-before-msg {
+    transform: rotate(45deg);
+    font-size: 16px;
+    padding-right: 0px;
+    vertical-align: middle;
+    color: #999999;
+}
+
+.ion-selected {
+    --background: rgb(231, 241, 255);
+}
+
+.time-in-archived {
+    color: #666666;
+    font-size: 10px;
+    position: relative;
+    top: -4px;
+}
+
+

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { IonListConversationsComponent } from './ion-list-conversations.component';
+
+describe('ExtListConversationComponent', () => {
+  let component: IonListConversationsComponent;
+  let fixture: ComponentFixture<IonListConversationsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IonListConversationsComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IonListConversationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,113 @@
+import { Component, EventEmitter, Input, IterableDiffers, KeyValueDiffers, OnInit, Output } from '@angular/core';
+import { ConversationModel } from 'src/chat21-core/models/conversation';
+import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
+import { convertMessage } from 'src/chat21-core/utils/utils';
+import { ListConversationsComponent } from '../list-conversations/list-conversations.component';
+import { Platform } from '@ionic/angular';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { TranslateService } from '@ngx-translate/core';
+
+import * as moment from 'moment';
+// import { EventsService } from 'src/app/services/events-service';
+// import { TiledeskService } from '../../../services/tiledesk/tiledesk.service';
+import { NetworkService } from '../../../services/network-service/network.service';
+import { AppConfigProvider } from 'src/app/services/app-config';
+import { DomSanitizer } from '@angular/platform-browser'
+// import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+// import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+
+@Component({
+  selector: 'ion-list-conversations',
+  templateUrl: './ion-list-conversations.component.html',
+  styleUrls: ['./ion-list-conversations.component.scss'],
+})
+export class IonListConversationsComponent extends ListConversationsComponent implements OnInit {
+
+  @Input() uidConvSelected: string;
+  @Output() onCloseConversation = new EventEmitter<ConversationModel>();
+
+  convertMessage = convertMessage;
+  isApp: boolean = false;
+  public logger: LoggerService = LoggerInstance.getInstance();
+  public currentYear: any;
+  public browserLang: string;
+ 
+  public PROJECT_FOR_PANEL: any;
+
+  /**
+   * 
+   * @param iterableDiffers 
+   * @param imageRepoService 
+   * @param platform 
+   */
+  constructor(
+    public iterableDiffers: IterableDiffers,
+    public kvDiffers: KeyValueDiffers,
+    public platform: Platform,
+    private translate: TranslateService,
+    // private events: EventsService,
+    // private tiledeskService: TiledeskService,
+    private networkService: NetworkService,
+    private appConfigProvider: AppConfigProvider,
+    private sanitizer: DomSanitizer,
+  ) {
+    super(iterableDiffers, kvDiffers)
+    this.browserLang = this.translate.getBrowserLang();
+    if (this.browserLang) {
+      if (this.browserLang === 'it') {
+        // this.translate.use('it');
+        moment.locale('it')
+
+      } else {
+        // this.translate.use('en');
+        moment.locale('en')
+      }
+    }
+
+    this.currentYear = moment().format('YYYY');
+    this.logger.log('[ION-LIST-CONVS-COMP] - currentYear ', this.currentYear)
+
+    const DASHBOARD_BASE_URL = this.appConfigProvider.getConfig().dashboardUrl;
+
+    // console.log('[ION-LIST-CONVS-COMP] - DASHBOARD_BASE_URL ', DASHBOARD_BASE_URL)
+    this.PROJECT_FOR_PANEL = this.sanitizer.bypassSecurityTrustResourceUrl(DASHBOARD_BASE_URL + '#/project-for-panel');
+  }
+
+  ngOnInit() {
+    this.isApp = this.platform.is('ios') || this.platform.is('android')
+    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - IS-APP ', this.isApp)
+    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - Platform', this.platform.platforms());
+  }
+
+ 
+
+
+
+  // --------------------------------------------------
+  // subdsribe to event
+  // --------------------------------------------------
+  // subdcribeToWatchToConnectionStatus() {
+  //   this.logger.log('[ION-LIST-CONVS-COMP] subdcribeToWatchToConnectionStatus ');
+  //   // this.events.subscribe('uidConvSelected:changed', this.subscribeChangedConversationSelected);
+  //   this.events.subscribe('internetisonline', (internetisonline) => {
+  //     // user and time are the same arguments passed in `events.publish(user, time)`
+  //     this.logger.log('[ION-LIST-CONVS-COMP] internetisonline ',internetisonline);
+  //     if (internetisonline === true) {
+  //       this.isOnline = true;
+  //     } else {
+  //       this.isOnline = false;
+  //     }
+  //   });
+  // }
+
+
+
+  closeConversation(conversation: ConversationModel) {
+    var conversationId = conversation.uid;
+    this.logger.log('[ION-LIST-CONVS-COMP] - closeConversation - conversationId ', conversationId)
+    this.onCloseConversation.emit(conversation)
+  }
+
+
+}