Chore: Contact Sidebar, conversation cleanup (#908)

- Update sidebar design
- Move every contact data to contacts module
- Revert go to next conversation feature
- Fix issues with new conversation in action cable
- Escape HTML content
- Broadcast event when conversation.contact changes.

Co-authored-by: Sojan <sojan@pepalo.com>

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -6,15 +6,15 @@
   >
     <Thumbnail
       v-if="!hideThumbnail"
-      :src="chat.meta.sender.thumbnail"
-      :badge="chat.meta.sender.channel"
+      :src="currentContact.thumbnail"
+      :badge="currentContact.channel"
       class="columns"
-      :username="chat.meta.sender.name"
+      :username="currentContact.name"
       size="40px"
     />
     <div class="conversation--details columns">
       <h4 class="conversation--user">
-        {{ chat.meta.sender.name }}
+        {{ currentContact.name }}
         <span
           v-if="!hideInboxName && isInboxNameVisible"
           v-tooltip.bottom="inboxName(chat.inbox_id)"
@@ -25,12 +25,13 @@
       </h4>
       <p
         class="conversation--message"
-        v-html="extractMessageText(lastMessage(chat))"
-      ></p>
-
+        v-html="extractMessageText(lastMessageInChat)"
+      />
       <div class="conversation--meta">
         <span class="timestamp">
-          {{ dynamicTime(lastMessage(chat).created_at) }}
+          {{
+            lastMessageInChat ? dynamicTime(lastMessageInChat.created_at) : ''
+          }}
         </span>
         <span class="unread">{{ getUnreadCount }}</span>
       </div>
@@ -78,6 +79,12 @@ export default {
       accountId: 'getCurrentAccountId',
     }),
 
+    currentContact() {
+      return this.$store.getters['contacts/getContact'](
+        this.chat.meta.sender.id
+      );
+    },
+
     isActiveChat() {
       return this.currentChat.id === this.chat.id;
     },
@@ -93,6 +100,10 @@ export default {
     isInboxNameVisible() {
       return !this.activeInbox;
     },
+
+    lastMessageInChat() {
+      return this.lastMessage(this.chat);
+    },
   },
 
   methods: {
@@ -102,6 +113,10 @@ export default {
       router.push({ path: frontendURL(path) });
     },
     extractMessageText(chatItem) {
+      if (!chatItem) {
+        return '';
+      }
+
       const { content, attachments } = chatItem;
 
       if (content) {

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -2,14 +2,14 @@
   <div class="conv-header">
     <div class="user">
       <Thumbnail
-        :src="chat.meta.sender.thumbnail"
+        :src="currentContact.thumbnail"
         size="40px"
-        :badge="chat.meta.sender.channel"
-        :username="chat.meta.sender.name"
+        :badge="currentContact.channel"
+        :username="currentContact.name"
       />
       <div class="user--profile__meta">
         <h3 v-if="!isContactPanelOpen" class="user--name text-truncate">
-          {{ chat.meta.sender.name }}
+          {{ currentContact.name }}
         </h3>
         <button
           class="user--profile__button clear button small"
@@ -79,6 +79,13 @@ export default {
       agents: 'agents/getVerifiedAgents',
       currentChat: 'getSelectedChat',
     }),
+
+    currentContact() {
+      return this.$store.getters['contacts/getContact'](
+        this.chat.meta.sender.id
+      );
+    },
+
     agentList() {
       return [
         {