123 lines
3.1 KiB
Vue
Executable file
123 lines
3.1 KiB
Vue
Executable file
<template>
|
|
<div class="conversation--container">
|
|
<div class="conversation-wrap" :class="{ 'is-typing': isAgentTyping }">
|
|
<div v-if="isFetchingList" class="message--loader">
|
|
<spinner></spinner>
|
|
</div>
|
|
<div
|
|
v-for="groupedMessage in groupedMessages"
|
|
:key="groupedMessage.date"
|
|
class="messages-wrap"
|
|
>
|
|
<date-separator :date="groupedMessage.date"></date-separator>
|
|
<chat-message
|
|
v-for="message in groupedMessage.messages"
|
|
:key="message.id"
|
|
:message="message"
|
|
/>
|
|
</div>
|
|
<agent-typing-bubble v-if="isAgentTyping" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ChatMessage from 'widget/components/ChatMessage.vue';
|
|
import AgentTypingBubble from 'widget/components/AgentTypingBubble.vue';
|
|
import DateSeparator from 'shared/components/DateSeparator.vue';
|
|
import Spinner from 'shared/components/Spinner.vue';
|
|
import { mapActions, mapGetters } from 'vuex';
|
|
|
|
export default {
|
|
name: 'ConversationWrap',
|
|
components: {
|
|
ChatMessage,
|
|
AgentTypingBubble,
|
|
DateSeparator,
|
|
Spinner,
|
|
},
|
|
props: {
|
|
groupedMessages: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
previousScrollHeight: 0,
|
|
previousConversationSize: 0,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
earliestMessage: 'conversation/getEarliestMessage',
|
|
allMessagesLoaded: 'conversation/getAllMessagesLoaded',
|
|
isFetchingList: 'conversation/getIsFetchingList',
|
|
conversationSize: 'conversation/getConversationSize',
|
|
isAgentTyping: 'conversation/getIsAgentTyping',
|
|
}),
|
|
},
|
|
watch: {
|
|
allMessagesLoaded() {
|
|
this.previousScrollHeight = 0;
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$el.addEventListener('scroll', this.handleScroll);
|
|
this.scrollToBottom();
|
|
},
|
|
updated() {
|
|
if (this.previousConversationSize !== this.conversationSize) {
|
|
this.previousConversationSize = this.conversationSize;
|
|
this.scrollToBottom();
|
|
}
|
|
},
|
|
unmounted() {
|
|
this.$el.removeEventListener('scroll', this.handleScroll);
|
|
},
|
|
methods: {
|
|
...mapActions('conversation', ['fetchOldConversations']),
|
|
scrollToBottom() {
|
|
const container = this.$el;
|
|
container.scrollTop = container.scrollHeight - this.previousScrollHeight;
|
|
this.previousScrollHeight = 0;
|
|
},
|
|
handleScroll() {
|
|
if (
|
|
this.isFetchingList ||
|
|
this.allMessagesLoaded ||
|
|
!this.conversationSize
|
|
) {
|
|
return;
|
|
}
|
|
|
|
if (this.$el.scrollTop < 100) {
|
|
this.fetchOldConversations({ before: this.earliestMessage.id });
|
|
this.previousScrollHeight = this.$el.scrollHeight;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '~widget/assets/scss/variables.scss';
|
|
@import '~widget/assets/scss/mixins.scss';
|
|
|
|
.conversation--container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
color-scheme: light dark;
|
|
}
|
|
|
|
.conversation-wrap {
|
|
flex: 1;
|
|
padding: $space-large $space-small $space-small $space-small;
|
|
}
|
|
|
|
.message--loader {
|
|
text-align: center;
|
|
}
|
|
</style>
|