KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: Improve scrolling for last message on agent side (#2421)

Browse source 
* Improve chat widget scrolling

* refactor the class names to snake-case

* refactor the scrollTop calculations to a helper

* Add tests for scrollTopCalculationHelper

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
This commit is contained in:
Anubhav Jain 2021-06-18 20:12:43 +05:30 • committed by GitHub
parent 6c49e58ff8
commit e45abebe39
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

21
app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
View file

@ -56,6 +56,7 @@
<message
v-for="message in getReadMessages"
:key="message.id"
class="message--read"
:data="message"
:is-a-tweet="isATweet"
/>
@ -72,6 +73,7 @@
<message
v-for="message in getUnReadMessages"
:key="message.id"
class="message--unread"
:data="message"
:is-a-tweet="isATweet"
/>
@ -106,6 +108,7 @@ import { getTypingUsersText } from '../../../helper/commons';
import { BUS_EVENTS } from 'shared/constants/busEvents';
import { REPLY_POLICY } from 'shared/constants/links';
import inboxMixin from 'shared/mixins/inboxMixin';
import { calculateScrollTop } from './helpers/scrollTopCalculationHelper';
export default {
components: {
@ -259,7 +262,23 @@ export default {
this.conversationPanel.removeEventListener('scroll', this.handleScroll);
},
scrollToBottom() {
this.conversationPanel.scrollTop = this.conversationPanel.scrollHeight;
let relevantMessages = [];
if (this.getUnreadCount > 0) {
// capturing only the unread messages
relevantMessages = this.conversationPanel.querySelectorAll(
'.message--unread'
);
} else {
// capturing last message from the messages list
relevantMessages = Array.from(
this.conversationPanel.querySelectorAll('.message--read')
).slice(-1);
}
this.conversationPanel.scrollTop = calculateScrollTop(
this.conversationPanel.scrollHeight,
this.$el.scrollHeight,
relevantMessages
);
},
onToggleContactPanel() {
this.$emit('contact-panel-toggle');