<!--
- @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>
-
- @author Marco Ambrosini <marcoambrosini@icloud.com>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<docs>
This component is a wrapper for the list of messages. It's main purpose it to
get the messagesList array and loop through the list to generate the messages.
</docs>
<template>
<!-- size and remain refer to the amount and initial height of the items that
are outside of the viewport -->
<div ref="scroller"
class="scroller messages-list__scroller"
:class="{'scroller--chatScrolledToBottom': isChatScrolledToBottom}"
@scroll="debounceHandleScroll">
<div v-if="displayMessagesLoader"
class="scroller__loading"
disabled>
<div class="icon-loading" />
</div>
<MessagesGroup v-for="(item, index) of messagesGroupedByAuthor"
:key="item[0].id"
:style="{ height: item.height + 'px' }"
v-bind="item"
:token="token"
:messages="item"
:next-message-id="(messagesGroupedByAuthor[index + 1] && messagesGroupedByAuthor[index + 1][0].id) || 0"
:previous-message-id="(index > 0 && messagesGroupedByAuthor[index - 1][messagesGroupedByAuthor[index - 1].length - 1].id) || 0" />
<template v-if="showLoadingAnimation">
<LoadingPlaceholder type="messages"
:count="15" />
</template>
<NcEmptyContent v-else-if="showEmptyContent"
:title="t('spreed', 'No messages')"
:description="t('spreed', 'All messages have expired or have been deleted.')">
<template #icon>
<Message :size="64" />
</template>
</NcEmptyContent>
</div>
</template>
<script>
import debounce from 'debounce'
import uniqueId from 'lodash/uniqueId.js'
import { computed } from 'vue'
import Message from 'vue-material-design-icons/Message.vue'
import Axios from '@nextcloud/axios'
import { getCapabilities } from '@nextcloud/capabilities'
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
import moment from '@nextcloud/moment'
import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
import LoadingPlaceholder from '../LoadingPlaceholder.vue'
import MessagesGroup from './Mes