Hey Awesome peeps i was designing a chat in one of my projects using enlink theme and i can send the message and fetch the user list but its not fetching the conversations.
here is the part that i fetch the conversation in chat component.html
<div class="container-fluid p-h-0">
<div class="chat chat-app row">
<div class="chat-list">
<div class="chat-user-tool">
<i nz-icon nzType="search" theme="outline" class="search-icon p-r-10 font-size-20"></i>
<input placeholder="Search...">
</div>
<div class="chat-user-list">
<nz-list [nzDataSource]="chatList" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
<ng-template #item let-item let-index="index">
<a (click)="selectChat(item.userName)" [username]="item.userName">
<nz-list-item class="p-h-25" [ngClass]="{'active': index == chatId}">
<div class="media align-items-center">
<div>
<nz-avatar class="shadow" nzIcon="user" [nzSrc]="item.photos[0]?.url"></nz-avatar>
</div>
<div class="p-l-15">
<h5 class="m-b-0" *ngIf="(accountService.currentUser$ | async)">
{{item.userName}}
<nz-badge *ngIf="(presence.onlineUsers$ | async).includes(item.userName)" nzStatus="success"></nz-badge>
</h5>
<ng-container *ngFor="let item of item.msg; let last = last">
<p *ngIf="last" class="msg-overflow m-b-0 text-muted font-size-13">
{{item.text}}
</p>
</ng-container>
</div>
</div>
</nz-list-item>
</a>
</ng-template>
</nz-list>
</div>
</div>
<div class="chat-content" [ngClass]="{'open': isContentOpen}">
<div class="conversation">
<div class="conversation-wrapper">
<div class="conversation-header justify-content-between">
<ng-container *ngFor="let item of chatList" >
<div class="media align-items-center" *ngIf="chatId == item.userName">
<a [routerLink]="" (click)="closeChatContent()" class="m-r-20 d-md-none d-block text-dark font-size-18 m-t-5" >
<i nz-icon nzType="left-circle" theme="outline"></i>
</a>
<div>
<nz-avatar class="shadow" nzIcon="user" [nzSrc]="item.photos[0]?.url"></nz-avatar>
</div>
<div class="p-l-15">
<h6 class="m-b-0">{{item.userName}}</h6>
<p class="m-b-0 text-muted font-size-13" *ngIf="(presence.onlineUsers$ | async).includes(item.userName)">
<nz-badge nzStatus="success"></nz-badge>
<span>Online</span>
</p>
<p class="m-b-0 text-muted font-size-13" *ngIf="!(presence.onlineUsers$ | async).includes(item.userName)">
<nz-badge nzStatus="default"></nz-badge>
<span>Offline</span>
</p>
</div>
</div>
</ng-container>
<div>
<a class="text-dark font-size-18" [nzDropdownMenu]="chatSetting" nz-dropdown [nzTrigger]="'click'" nzPlacement="bottomRight">
<i nz-icon nzType="setting" theme="outline"></i>
</a>
<nz-dropdown-menu #chatSetting="nzDropdownMenu">
<ul nz-menu>
<li nz-menu-item>1st menu item</li>
<li nz-menu-item>2nd menu item</li>
<li nz-menu-item>3rd menu item</li>
</ul>
</nz-dropdown-menu>
</div>
</div>
<div class="conversation-body" #scrollBottom *ngIf="messages.length > 0" >
<ng-container *ngFor="let item of messages">
<div *ngIf="chatId == item.recipientUserName">
<div class="msg" [ngClass]="{'msg-recipient': item.recipientUserName, 'msg-sent': item.senderUserName}" >
<div class="bubble" *ngIf="item.content.length > 1" [ngClass]="{'m-l-50': item.senderUserName.length == 0}">
<div class="bubble-wrapper" [ngClass]="{'p-5': item.senderUserName == 'image'}">
<span *ngIf="item.content">{{item.content}}</span>
<img *ngIf="item.senderUserName == 'image'" [src]="item.content" [alt]="item.content">
<div *ngIf="item.senderUserName == 'file'" class="d-flex align-items-center msg-file">
<i class="font-size-25" nz-icon nzType="file" theme="outline"></i>
<span class="m-l-10 font-weight-semibold text-link pointer">
<u>{{item.content}}</u>
</span>
</div>
</div>
</div>
<div class="font-weight-semibold font-size-12" *ngIf="item.dateRead.length > 1">
{{item.dateRead | date}}
</div>
</div>
</div>
</ng-container>
</div>
<div class="conversation-footer">
<form #messageForm="ngForm" (ngSubmit)="sendMessage()" autocomplete="off">
<input
name="messageContent"
required
[(ngModel)]="messageContent"
class="chat-input" type="text"
placeholder="Type a message..." (keydown.enter)="sendMessage();$event.preventDefault()">
<ul class="list-inline d-flex align-items-center m-b-0">
<li class="list-inline-item">
<a class="text-gray font-size-20" nz-tooltip nzTooltipTitle="Emoji">
<i nz-icon nzType="smile" theme="outline"></i>
</a>
</li>
<li class="list-inline-item">
<a class="text-gray font-size-20" nz-tooltip nzTooltipTitle="Attachment">
<i nz-icon nzType="paper-clip" theme="outline"></i>
</a>
</li>
<li class="list-inline-item">
<button class="d-none d-md-block" nz-button nzType="primary" type="submit">
<span class="m-r-10">Send</span>
<p *ngFor="let item of messages">{{item.content}}</p>
<i class="far fa-paper-plane"></i>
</button>
<!-- <a class="text-gray font-size-20 d-md-none d-block" (click)="sendMsg()" nz-tooltip nzTooltipTitle="Attachment">
<i nz-icon nzType="paper-clip" theme="outline"></i>
</a> -->
</li>
</ul>
</form>
</div>
</div>
</div>
</div>
</div>
and here is the chat.component.ts file i used a template for the html as i said the sending message fetching the users works fine it is the fetching the conversations i am having a problem wit.
import { Component, AfterViewChecked, ElementRef, ViewChild, OnInit, Input, OnDestroy } from '@angular/core'
import { NgForm } from '@angular/forms';
import { take } from 'rxjs/operators';
import { Message } from 'src/app/shared/interfaces/message';
import { Staff } from 'src/app/shared/interfaces/staff';
import { StaffParams } from 'src/app/shared/interfaces/staff-params';
import { User } from 'src/app/shared/interfaces/user.type';
import { AuthenticationService } from 'src/app/shared/services/authentication.service';
import { MessageService } from 'src/app/shared/services/message.service';
import { PresenceService } from 'src/app/shared/services/presence.service';
import { StaffService } from 'src/app/shared/services/staff.service';
import { Chat } from '../../shared/interfaces/chat.type';
import { AppsService } from '../../shared/services/apps.service';
@Component({
templateUrl: './chat.component.html'
})
export class ChatComponent implements OnInit, AfterViewChecked, OnDestroy {
messageForm!: NgForm;
username!: string;
// messages: Message[] = [];
messages: Message[] = [];
@ViewChild('scrollBot
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
