.html

<ion-header>
  <ion-toolbar>
    <ion-title>Chat</ion-title>
    <ion-buttons slot="secondary">
      <ion-back-button defaultHref="/tabs/home" text="" icon="chevron-back-outline"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="wrapper-inbox ion-padding">
    <div class="box-section">

      <div class="nav-tabs">
        <div class="item" (click)="toggleTab('all')" [title]="tabState == 'all'">
          <div class="inner">All</div>
        </div>
        <div class="item" (click)="toggleTab('unread')" [title]="tabState == 'unread'">
          <div class="inner">Unread <div class="indicator">17</div>
          </div>
        </div>
      </div>
      <div class="tab-content">
        <div class="content" id="all" [hidden]="tabState !== 'all'">
          <div class="box-items" *ngFor="let chat of state?.chats?.chatsSummary">
            <div class="item" routerLink="/global/inbox/chat-room">
              <div class="image" *ngFor="let agent of chat.users">
                <img 
                  *ngIf="chat.lastEvent.authorId === agent.id" 
                  src="{{agent.avatar}}" alt="agent-avatar"
                >
              </div>
              <div class="message">
                <div class="name" *ngFor="let agent of chat.users">
                  <ng-template [ngIf]="chat.lastEvent.authorId === agent.id">
                    <div class="text-name text-ellipsis">{{agent.name}}</div>
                    <div class="indicator">5</div>
                  </ng-template>

                </div>
                <div class="time">{{toReadableTime(chat.lastEvent.createdAt)}}</div>
                <div class="text text-ellipsis">{{chat.lastEvent.text}}</div>
              </div>
              <div class="divider"></div>
            </div>
<!--            <div class="item" routerLink="/global/inbox/chat-room">-->
<!--              <div class="image">-->
<!--                <img src="../../../../assets/images/doctors/doctor-female.png" alt="">-->
<!--              </div>-->
<!--              <div class="message">-->
<!--                <div class="name">-->
<!--                  <div class="text-name text-ellipsis">Dr. Fitriana Almasmidaf binti Harun Al Jufri</div>-->
<!--                  <div class="indicator">2</div>-->
<!--                </div>-->
<!--                <div class="time">18 Oct</div>-->
<!--                <div class="text text-ellipsis">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque libero-->
<!--                  accusamus</div>-->
<!--              </div>-->
<!--              <div class="divider"></div>-->
<!--            </div>-->
          </div>
        </div>
        <div class="content" id="unread" [hidden]="tabState !== 'unread'">
          <div class="box-items">
            <div class="item" routerLink="/global/inbox/chat-room">
              <div class="image">
                <img src="../../../../assets/images/doctors/doctor-female.png" alt="">
              </div>
              <div class="message">
                <div class="name">
                  <div class="text-name text-ellipsis">Dr. Patricia Samantha</div>
                  <div class="indicator">5</div>
                </div>
                <div class="time">2 hours ago</div>
                <div class="text text-ellipsis">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque libero
                  accusamus</div>
              </div>
              <div class="divider"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- if no result -->
      <div class="wrapper-no-result">
        <div class="icon">
          <img src="../../assets/images/inbox/no-inbox.svg" alt="">
        </div>
        <div class="title">No chat available</div>
        <p>Please click on the chat icon to start a new conversation.</p>
      </div>
      <!-- end if no result -->

    </div>
  </div>
</ion-content>

.ts

/* eslint-disable */
import { Component, OnInit } from '@angular/core';
import {CONFIG} from '../../../../services/config.service';
import * as CustomerSDK from '@livechat/customer-sdk';
import * as moment from 'moment';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.page.html',
  styleUrls: ['./chat.page.scss'],
})
export class ChatPage implements OnInit {

  isTab: boolean = true;
  tabState: any = 'all';

  liveChatSDK = null;

  state = {
    chats: null,
    customerId: null,
    customer: null,
  };

  constructor() { }

  async ngOnInit() {
    this.liveChatSDK = CustomerSDK.debug(CustomerSDK.init({
      licenseId: CONFIG.LIVECHAT.licenseId,
      clientId: CONFIG.LIVECHAT.clientId,
    }));

    await this.performLoadCustomerData();
    this.performObserveLiveChatEvents();
  }

  toggleTab(string) {
    this.tabState = string;
  }

  performObserveLiveChatEvents() {
    this.liveChatSDK.on('connected', (payload) => this.onConnected(payload));
    this.liveChatSDK.on('customer_id', (id) => this.state.customerId = id);
  }

  onConnected(payload) {
    console.log(payload)
    this.liveChatSDK
      .updateCustomer({
        name: this.state.customer.fullName || 'customer',
        email: this.state.customer.email || '[email protected]',
        sessionFields: {
          nadiCustomerId: this.state.customer._id || 'NONE',
          phone: this.state.customer.phoneNumber || '+610000000',
          origin: 'NadiMobileApp_MyPharma'
        }
      }).then(() => {}).catch(() => {});

    this.liveChatSDK.listChats().then(async (chats) => {
      this.state.chats = chats;
    });
  }

  async performLoadCustomerData() {
    try {
      const customer = localStorage.getItem('customerData');
      this.state.customer = JSON.parse(customer);
    } catch (err) {
      // this.navController.back();
      return;
    }
  }

  toReadableTime = (date) => moment(date).fromNow();
}