import './message-history'; import tpl_spinner from "templates/spinner.js"; import { CustomElement } from 'shared/components/element.js'; import { api } from '@converse/headless/core'; import { html } from 'lit'; import { markScrolled } from './utils.js'; import './styles/chat-content.scss'; export default class ChatContent extends CustomElement { static get properties () { return { jid: { type: String } } } disconnectedCallback () { super.disconnectedCallback(); this.removeEventListener('scroll', markScrolled); } async initialize () { await this.setModels(); this.listenTo(this.model, 'change:hidden_occupants', () => this.requestUpdate()); this.listenTo(this.model.messages, 'add', () => this.requestUpdate()); this.listenTo(this.model.messages, 'change', () => this.requestUpdate()); this.listenTo(this.model.messages, 'remove', () => this.requestUpdate()); this.listenTo(this.model.messages, 'rendered', () => this.requestUpdate()); this.listenTo(this.model.messages, 'reset', () => this.requestUpdate()); this.listenTo(this.model.notifications, 'change', () => this.requestUpdate()); this.listenTo(this.model.ui, 'change', () => this.requestUpdate()); this.listenTo(this.model.ui, 'change:scrolled', this.scrollDown); if (this.model.occupants) { this.listenTo(this.model.occupants, 'change', () => this.requestUpdate()); } this.addEventListener('scroll', markScrolled); } async setModels () { this.model = await api.chatboxes.get(this.jid); await this.model.initialized; this.requestUpdate(); } render () { if (!this.model) { return ''; } // This element has "flex-direction: reverse", so elements here are // shown in reverse order. return html`