Lazy Loading and LoadOnDemand with ChatUI
Vlad,
Sorry for the delayed response,
As mentioned earlier the bufferMessageCount only specifies the number of extra messages to preload when loading older messages in the ChatUI based on the user needs.
However, we suspect your requirement might be kind of lazy loading fetching the messages dynamically and adding in the chat. However, we have prepared a sample which meets your requirements, by adding the container scroll event to load messages dynamically when it hits the scroll top. The following are handled in the shared sample.
- Using the chat UI component created event bound the scroll event.
- Helper function where the new messages are to be loaded when the scroll hits the top.
- Loading the dynamic messages using the messages property in the chat UI component.
App.component.ts
|
public onCreated(): void { var wrapperElement = this.chatUIComponent.element.getElementsByClassName('e-message-wrapper')[0]; wrapperElement.addEventListener('scroll', () => { if (wrapperElement.scrollTop === 0) { this.onScrollTopHit(); } }); } |
App.component.ts
|
private onScrollTopHit(): void { const newMessages: MessageModel[] = []; const existingCount = this.chatMessages?.length ?? 0;
for (let i = 1; i <= 10; i++) { const isEven = i % 2 === 0; newMessages.push({ text: isEven ? `Scroll Top new Message ${i + existingCount} from Michale` : `Scroll Top new Message ${i + existingCount} from Albert`, author: isEven ? this.michaleUserModel : this.currentUserModel }); } this.chatMessages = [...newMessages, ...(this.chatMessages ?? [])]; this.chatUIComponent.messages = this.chatMessages; this.chatUIComponent.dataBind(); …. } |
Output:
Demo: Link
Can you please check the shared demo and let us know if it meets your requirements ?
Regards,
Indrajith
