Group messages from same author (#1093)

* group close by messages together

* add date as a title to grouped messages

* add grouped messages story

Author: teemukaaria

CHANGELOG.md

@@ -21,6 +21,8 @@ Please document your changes in this format:
 ```
 
 ## [Unreleased]
+### Added
+- Group messages from same author @teemukaaria
 
 ## [8.1.2] - 2019-11-05
 ### Fixed

src/__snapshots__/storyshots.spec.js.snap

@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/vue'
 import ChatConversation from './ChatConversation'
 import * as factories from '>/enrichedFactories'
 import { statusMocks, storybookDefaults as defaults } from '>/helpers'
+import { messagesMock } from '>/mockdata'
 
 const conversation = factories.makeConversation()
 const thread = factories.makeThread()
@@ -59,3 +60,18 @@ storiesOf('ChatConversation', module)
       }),
     }),
   }))
+  .add('message groups', () => defaults({
+    render: h => {
+      const timeDiff = new Date() - messagesMock[messagesMock.length - 1].createdAt.getTime()
+      return h(ChatConversation, {
+        props: defaultProps({
+          conversation: {
+            ...conversation,
+            messages: messagesMock.map(
+              message => ({ ...message, createdAt: new Date(message.createdAt.getTime() + timeDiff) }),
+            ),
+          },
+        }),
+      })
+    },
+  }))

src/messages/components/ChatConversation.story.js

@@ -13,7 +13,7 @@
         class="bg-white"
       >
         <ConversationMessage
-          v-for="message in conversation.messages"
+          v-for="message in groupedMessages"
           :key="message.id"
           :message="message"
           slim
@@ -61,6 +61,7 @@
 import ConversationMessage from '@/messages/components/ConversationMessage'
 import ConversationCompose from '@/messages/components/ConversationCompose'
 import KSpinner from '@/utils/components/KSpinner'
+import groupedMessagesMixin from '@/utils/mixins/groupedMessagesMixin'
 import {
   scroll,
   dom,
@@ -93,6 +94,7 @@ export default {
     QScrollObserver,
     QInfiniteScroll,
   },
+  mixins: [groupedMessagesMixin(['conversation', 'messages'])],
   props: {
     conversation: { type: Object, default: null },
     away: { type: Boolean, required: true },

src/messages/components/ChatConversation.vue

@@ -1,7 +1,7 @@
 <template>
   <QItem
     v-if="!editMode"
-    :class="{ isUnread: message.isUnread, slim }"
+    :class="{ isUnread: message.isUnread, slim, continuation: !!message.continuation }"
     class="conversation-message relative-position"
   >
     <QBtnGroup
@@ -45,6 +45,7 @@
     </QItemSection>
     <QItemSection>
       <QItemLabel
+        v-if="!message.continuation"
         class="no-wrap k-message-meta"
       >
         <RouterLink :to="{ name: 'user', params: { userId: message.author.id } }">
@@ -62,7 +63,10 @@
           :title="$t('WALL.RECEIVED_VIA_EMAIL')"
         />
       </QItemLabel>
-      <div class="content">
+      <div
+        class="content"
+        :title="slim && tooltipDate"
+      >
         <Markdown :source="message.content" />
       </div>
       <QItemLabel
@@ -181,6 +185,9 @@ export default {
     showReplies () {
       return this.message.threadMeta && !this.slim
     },
+    tooltipDate () {
+      return this.$d(this.message.createdAt, 'long')
+    },
   },
   methods: {
     toggleReaction (name) {
@@ -212,6 +219,10 @@ export default {
 .isUnread
   background linear-gradient(to right, $lightGreen, $lighterGreen)
 
+.continuation
+  padding-top 0
+  min-height auto
+
 body.mobile .conversation-message
   .k-message-meta
     font-size 80%

src/messages/components/ConversationMessage.vue

@@ -0,0 +1,40 @@
+import differenceInSeconds from 'date-fns/differenceInSeconds'
+import dateFnsHelper from '@/utils/dateFnsHelper'
+
+// time difference in seconds of any two messages to be included into the same group
+const MESSAGE_GROUP_DISTANCE = 60
+// time difference in seconds of subsequent messages to be included into the same group
+const SUBSEQUENT_MESSAGE_DISTANCE = 30
+
+export default function groupedMessagesMixin (path) {
+  return ({
+    computed: {
+      groupedMessages () {
+        const messages = path.reduce((acc, key) => acc[key], this)
+        let groupHeading = { timestamp: '', createdAt: 0 }
+        let prevMessage = { createdAt: 0, author: { id: -1 } }
+        for (const message of messages) {
+          const timestamp = dateFnsHelper.formatDistanceToNow(message.createdAt)
+          // group messages together if their author is the same and:
+          // 1. their "... ago" label is the same
+          // 2. the difference to last group heading is small enough
+          //    (prevents messages from jumping from one group to another)
+          // 3. two subsequent messages are close enough
+          if (message.author.id === prevMessage.author.id &&
+          (timestamp === groupHeading.timestamp ||
+            differenceInSeconds(message.createdAt, groupHeading.createdAt) < MESSAGE_GROUP_DISTANCE ||
+            differenceInSeconds(message.createdAt, prevMessage.createdAt) < SUBSEQUENT_MESSAGE_DISTANCE
+          )) {
+            message.continuation = true
+          }
+          else {
+            message.continuation = false
+            groupHeading = { timestamp, createdAt: message.createdAt }
+          }
+          prevMessage = message
+        }
+        return messages
+      },
+    },
+  })
+}