adapted chatmessage to display statuses

src/components/chat_message/chat_message.js

@@ -49,15 +49,15 @@ const ChatMessage = {
       })
     },
     author() {
-      return this.$store.getters.findUser(
-        this.chatItem.data.account_id
-      )
+      const accountId = this.message.account_id || this.message.user.id
+
+      return this.$store.getters.findUser(accountId)
     },
     isCurrentUser() {
-      return this.message.account_id === this.currentUser.id
+      return this.author.id === this.currentUser.id
     },
     message() {
-      return this.chatItem.data
+      return this.isMessage ? this.chatItem.data : null
     },
     isMessage() {
       return this.chatItem.type === 'message'
@@ -66,7 +66,7 @@ const ChatMessage = {
       return {
         summary: '',
         emojis: this.message.emojis,
-        raw_html: this.message.content || '',
+        raw_html: this.message.content || this.message.raw_html || '',
         text: this.message.content || '',
         attachments: this.message.attachments,
       }

src/components/chat_message/chat_message.vue

@@ -93,7 +93,7 @@
     v-else
     class="chat-message-date-separator"
   >
-    <ChatMessageDate :date="chatItem.date" />
+    <ChatMessageDate :date="chatItem.date" :show-time="chatItem.isTime" />
   </div>
 </template>
 

src/components/chat_message_date/chat_message_date.vue

@@ -7,10 +7,15 @@
 <script>
 import localeService from 'src/services/locale/locale.service.js'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 export default {
   name: 'Timeago',
-  props: ['date'],
+  props: ['date', 'showTime'],
   computed: {
+    time12hFormat() {
+      return useMergedConfigStore().mergedConfig.absoluteTimeFormat12h === '12h'
+    },
     displayDate() {
       const today = new Date()
       today.setHours(0, 0, 0, 0)
@@ -18,10 +23,17 @@ export default {
       if (this.date.getTime() === today.getTime()) {
         return this.$t('display_date.today')
       } else {
-        return this.date.toLocaleDateString(
-          localeService.internalToBrowserLocale(this.$i18n.locale),
-          { day: 'numeric', month: 'long' },
-        )
+        if (this.showTime) {
+          return this.date.toLocaleTimeString(
+            localeService.internalToBrowserLocale(this.$i18n.locale),
+            { hour12: this.time12hFormat, hour: 'numeric', minute: 'numeric' }
+          )
+        } else {
+          return this.date.toLocaleDateString(
+            localeService.internalToBrowserLocale(this.$i18n.locale),
+            { day: 'numeric', month: 'long' },
+          )
+        }
       }
     },
   },

src/components/chat_message_list/chat_message_list.js

@@ -10,6 +10,7 @@ const ChatMessageList = {
   },
   props: {
     messages: Array,
+    headerDate: Boolean,
   },
   data() {
     return {
@@ -26,8 +27,23 @@ const ChatMessageList = {
         const newerMessage = messages[index + 1]
         const newerItem = acc[acc.length - 1]
 
-        const diff = message.created_at - (olderMessage?.created_at || 0)
-        const MAX_DIFF = 1000 * 60 // 5 minutes
+        const diff = olderMessage ? message.created_at - olderMessage.created_at : null
+
+        const MAX_DIFF = 1000 * 60 * 5 // 5 minutes
+
+        const dateDiffs = (() => {
+          if (olderMessage) {
+            const newerDate = new Date(message.created_at)
+            const olderDate = new Date(olderMessage.created_at)
+
+            newerDate.setHours(0, 0, 0, 0)
+            olderDate.setHours(0, 0, 0, 0)
+
+            return newerDate.toISOString() !== olderDate.toISOString()
+          } else {
+            return true
+          }
+        })()
 
         const chatItem = {
           type: 'message',
@@ -54,10 +70,12 @@ const ChatMessageList = {
           }
         }
 
-        if (diff > MAX_DIFF || !olderMessage) {
+        if (diff > MAX_DIFF || (!olderMessage && this.headerDate)) {
           return [...acc, chatItem, {
             type: 'date',
             date,
+            isDate: dateDiffs,
+            isTime: diff > MAX_DIFF && !dateDiffs,
             id: date.getTime().toString(),
           }]
         } else {

src/components/chat_view/chat_view.vue

@@ -25,7 +25,10 @@
             />
           </div>
         </div>
-        <ChatMessageList :messages="chatMessages" />
+        <ChatMessageList
+          header-date
+          :messages="chatMessages"
+        />
         <div
           ref="footer"
           class="panel-body footer"

src/components/conversation/conversation.js

@@ -5,6 +5,7 @@ import { mapState } from 'vuex'
 import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
 import QuickViewSettings from 'src/components/quick_view_settings/quick_view_settings.vue'
 import ThreadTree from 'src/components/thread_tree/thread_tree.vue'
+import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
 
 import { useInterfaceStore } from 'src/stores/interface'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
@@ -127,15 +128,18 @@ const conversation = {
     displayStyle() {
       return this.mergedConfig.conversationDisplay
     },
-    isTreeView() {
-      return !this.isLinearView
-    },
     treeViewIsSimple() {
       return !this.mergedConfig.conversationTreeAdvanced
     },
+    isTreeView() {
+      return this.displayStyle === 'tree'
+    },
     isLinearView() {
       return this.displayStyle === 'linear'
     },
+    isChatView() {
+      return this.displayStyle === 'chat'
+    },
     shouldFadeAncestors() {
       return this.mergedConfig.conversationTreeFadeAncestors
     },
@@ -404,6 +408,7 @@ const conversation = {
     ThreadTree,
     QuickFilterSettings,
     QuickViewSettings,
+    ChatMessageList,
   },
   watch: {
     statusId(newVal, oldVal) {

src/components/conversation/conversation.vue

@@ -196,6 +196,14 @@
           />
         </article>
       </div>
+      <div
+        v-if="isChatView"
+        class="thread-body"
+      >
+        <ChatMessageList
+          :messages="conversation"
+        />
+      </div>
     </div>
   </div>
   <div

src/components/quick_view_settings/quick_view_settings.js

@@ -13,9 +13,10 @@ import {
   faFolderTree,
   faList,
   faWrench,
+  faMessage,
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(faList, faFolderTree, faBars, faWrench)
+library.add(faList, faFolderTree, faBars, faWrench, faMessage)
 
 const QuickViewSettings = {
   props: {

src/components/quick_view_settings/quick_view_settings.vue

@@ -57,6 +57,24 @@
               /> {{ $t('settings.conversation_display_linear_quick') }}
             </button>
           </div>
+          <div class="menu-item dropdown-item -icon-double">
+            <button
+              class="main-button"
+              :aria-checked="conversationDisplay === 'chat'"
+              role="menuitemradio"
+              @click="conversationDisplay = 'chat'"
+            >
+              <span
+                class="input menu-checkbox -radio"
+                :class="{ 'menu-checkbox-checked': conversationDisplay === 'chat' }"
+                :aria-hidden="true"
+              /><FAIcon
+                icon="message"
+                :aria-hidden="true"
+                fixed-width
+              /> {{ $t('settings.conversation_display_chat_quick') }}
+            </button>
+          </div>
         </div>
         <div
           role="separator"