From f78df91dd2edaf580ed3ebc79dfae96eff26fdaa Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@thoughtwoot.com>
Date: Tue, 2 Jun 2020 22:59:02 +0530
Subject: [PATCH] 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>
---
 .../assets/scss/plugins/_multiselect.scss     |  3 -
 .../widgets/conversation/ConversationCard.vue | 31 +++++--
 .../conversation/ConversationHeader.vue       | 15 +++-
 .../dashboard/helper/actionCable.js           | 12 +++
 .../conversation/ContactConversations.vue     |  9 ++-
 .../conversation/ContactDetailsItem.vue       |  2 +-
 .../dashboard/conversation/ContactPanel.vue   | 69 +++++++++++-----
 .../conversation/ConversationLabels.vue       | 81 ++++++++++---------
 .../dashboard/store/modules/contacts.js       | 28 ++++---
 .../store/modules/conversations/actions.js    | 28 +++++--
 .../store/modules/conversations/getters.js    | 11 +--
 .../store/modules/conversations/index.js      | 10 +++
 .../modules/specs/contacts/getters.spec.js    |  6 +-
 .../modules/specs/contacts/mutations.spec.js  | 30 ++++---
 .../specs/conversations/actions.spec.js       | 10 ++-
 .../dashboard/store/mutation-types.js         |  1 +
 .../shared/helpers/HTMLSanitizer.js           |  8 ++
 .../shared/helpers/MessageFormatter.js        |  4 +-
 app/listeners/action_cable_listener.rb        |  7 ++
 app/models/contact.rb                         |  8 +-
 app/models/conversation.rb                    |  3 +-
 lib/events/types.rb                           |  1 +
 22 files changed, 252 insertions(+), 125 deletions(-)
 create mode 100644 app/javascript/shared/helpers/HTMLSanitizer.js

diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
index 6d522dc9b..480e31c61 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -91,7 +91,6 @@
 }
 
 .sidebar-labels-wrap {
-
   &.has-edited,
   &:hover {
     .multiselect {
@@ -108,8 +107,6 @@
   }
 
   .multiselect {
-    margin-top: $space-small;
-
     >.multiselect__select {
       visibility: hidden;
     }
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index aa9af83b2..a2a914bb2 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/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) {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 29215362f..8be30ff68 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/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 [
         {
diff --git a/app/javascript/dashboard/helper/actionCable.js b/app/javascript/dashboard/helper/actionCable.js
index 515674433..b4401750a 100644
--- a/app/javascript/dashboard/helper/actionCable.js
+++ b/app/javascript/dashboard/helper/actionCable.js
@@ -16,6 +16,7 @@ class ActionCableConnector extends BaseActionCableConnector {
       'assignee.changed': this.onAssigneeChanged,
       'conversation.typing_on': this.onTypingOn,
       'conversation.typing_off': this.onTypingOff,
+      'conversation.contact_changed': this.onConversationContactChange,
     };
   }
 
@@ -27,6 +28,17 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.app.$store.dispatch('updateMessage', data);
   };
 
+  onConversationContactChange = payload => {
+    const { meta = {}, id: conversationId } = payload;
+    const { sender } = meta || {};
+    if (conversationId) {
+      this.app.$store.dispatch('updateConversationContact', {
+        conversationId,
+        ...sender,
+      });
+    }
+  };
+
   onAssigneeChanged = payload => {
     const { meta = {}, id } = payload;
     const { assignee } = meta || {};
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
index 9b406cc6d..3b0318fcf 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="contact-conversation--panel">
-    <contact-details-item :title="$t('CONTACT_PANEL.CONVERSATIONS.TITLE')" />
+    <contact-details-item
+      :title="$t('CONTACT_PANEL.CONVERSATIONS.TITLE')"
+      icon="ion-chatboxes"
+    />
     <div v-if="!uiFlags.isFetching">
       <p v-if="!previousConversations.length" class="no-results">
         {{ $t('CONTACT_PANEL.CONVERSATIONS.NO_RECORDS_FOUND') }}
@@ -75,13 +78,11 @@ export default {
 @import '~dashboard/assets/scss/mixins';
 
 .contact-conversation--panel {
-  padding: $space-normal $space-normal $space-normal $space-medium;
-  padding-top: 0;
+  padding: $space-normal;
 }
 
 .no-results {
   margin: 0;
   color: $color-gray;
-  padding: 0 $space-small;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
index b61154e4b..41068876f 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
@@ -25,7 +25,7 @@ export default {
 @import '~dashboard/assets/scss/mixins';
 
 .conv-details--item {
-  padding-bottom: $space-medium;
+  padding-bottom: $space-normal;
 
   &:last-child {
     padding-bottom: 0;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index 24ce51d2c..d653eb1cf 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -7,7 +7,7 @@
       <div class="contact--info">
         <thumbnail
           :src="contact.thumbnail"
-          size="56px"
+          size="64px"
           :badge="contact.channel"
           :username="contact.name"
           :status="contact.availability_status"
@@ -57,14 +57,17 @@
       >
         {{ contact.additional_attributes.description }}
       </div>
+      <div class="contact--actions">
+        <button
+          v-if="!currentChat.muted"
+          class="button small clear contact--mute small-6"
+          @click="mute"
+        >
+          {{ $t('CONTACT_PANEL.MUTE_CONTACT') }}
+        </button>
+      </div>
     </div>
-    <conversation-labels :conversation-id="conversationId" />
-    <contact-conversations
-      v-if="contact.id"
-      :contact-id="contact.id"
-      :conversation-id="conversationId"
-    />
-    <div v-if="browser" class="conversation--details">
+    <div v-if="browser.browser_name" class="conversation--details">
       <contact-details-item
         v-if="browser.browser_name"
         :title="$t('CONTACT_PANEL.BROWSER')"
@@ -90,9 +93,12 @@
         icon="ion-clock"
       />
     </div>
-    <a v-show="!currentChat.muted" class="contact--mute" @click="mute">
-      {{ $t('CONTACT_PANEL.MUTE_CONTACT') }}
-    </a>
+    <conversation-labels :conversation-id="conversationId" />
+    <contact-conversations
+      v-if="contact.id"
+      :contact-id="contact.id"
+      :conversation-id="conversationId"
+    />
   </div>
 </template>
 
@@ -153,16 +159,16 @@ export default {
       return `${platformName || ''} ${platformVersion || ''}`;
     },
     contactId() {
-      return this.currentConversationMetaData.contact?.id;
+      return this.currentChat.meta?.sender?.id;
     },
     contact() {
       return this.$store.getters['contacts/getContact'](this.contactId);
     },
   },
   watch: {
-    contactId(newContactId, prevContactId) {
-      if (newContactId && newContactId !== prevContactId) {
-        this.$store.dispatch('contacts/show', { id: newContactId });
+    conversationId(newConversationId, prevConversationId) {
+      if (newConversationId && newConversationId !== prevConversationId) {
+        this.$store.dispatch('contacts/show', { id: this.contactId });
       }
     },
   },
@@ -186,11 +192,13 @@ export default {
 
 .contact--panel {
   @include border-normal-left;
+
+  background: white;
   font-size: $font-size-small;
   overflow-y: auto;
-  background: white;
   overflow: auto;
   position: relative;
+  padding: $space-normal;
 }
 
 .close-button {
@@ -200,23 +208,29 @@ export default {
   font-size: $font-size-default;
   color: $color-heading;
 }
+
 .contact--profile {
-  padding: $space-medium $space-normal 0 $space-medium;
   align-items: center;
+  padding: $space-medium 0 $space-one;
+
   .user-thumbnail-box {
     margin-right: $space-normal;
   }
 }
 
 .contact--details {
+  margin-top: $space-small;
+
   p {
     margin-bottom: 0;
   }
 }
 
 .contact--info {
-  display: flex;
   align-items: center;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
 }
 
 .contact--name {
@@ -230,10 +244,13 @@ export default {
 .contact--email {
   @include text-ellipsis;
 
-  color: $color-body;
+  color: $color-gray;
   display: block;
   line-height: $space-medium;
-  text-decoration: underline;
+
+  &:hover {
+    color: $color-woot;
+  }
 }
 
 .contact--bio {
@@ -241,7 +258,8 @@ export default {
 }
 
 .conversation--details {
-  padding: $space-two $space-normal $space-two $space-medium;
+  border-top: 1px solid $color-border-light;
+  padding: $space-large $space-normal;
 }
 
 .conversation--labels {
@@ -259,9 +277,18 @@ export default {
   }
 }
 
+.contact-conversation--panel {
+  border-top: 1px solid $color-border-light;
+}
+
 .contact--mute {
   color: $alert-color;
   display: block;
   text-align: center;
 }
+
+.contact--actions {
+  display: flex;
+  justify-content: center;
+}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationLabels.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationLabels.vue
index 9bc10e8e8..728815a0e 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationLabels.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationLabels.vue
@@ -3,40 +3,44 @@
     class="contact-conversation--panel sidebar-labels-wrap"
     :class="hasEditedClass"
   >
-    <div v-if="!conversationUiFlags.isFetching" class="wrap">
-      <div class="contact-conversation--list">
-        <label class="select-tags">
-          {{ $t('CONTACT_PANEL.LABELS.TITLE') }}
-          <multiselect
-            v-model="selectedLabels"
-            :options="savedLabels"
-            :tag-placeholder="$t('CONTACT_PANEL.LABELS.TAG_PLACEHOLDER')"
-            :placeholder="$t('CONTACT_PANEL.LABELS.PLACEHOLDER')"
-            :multiple="true"
-            :taggable="true"
-            hide-selected
-            :show-labels="false"
-            @tag="addLabel"
-          />
-        </label>
-        <div class="row align-middle align-justify">
-          <span v-if="labelUiFlags.isError" class="error">{{
-            $t('CONTACT_PANEL.LABELS.UPDATE_ERROR')
-          }}</span>
-          <button
-            v-if="hasEdited"
-            type="button"
-            class="button nice tiny"
-            @click="onUpdateLabels"
-          >
-            <spinner v-if="labelUiFlags.isUpdating" size="tiny" />
-            {{
-              labelUiFlags.isUpdating
-                ? 'saving...'
-                : $t('CONTACT_PANEL.LABELS.UPDATE_BUTTON')
-            }}
-          </button>
-        </div>
+    <div
+      v-if="!conversationUiFlags.isFetching"
+      class="contact-conversation--list"
+    >
+      <label class="select-tags">
+        <contact-details-item
+          :title="$t('CONTACT_PANEL.LABELS.TITLE')"
+          icon="ion-pricetags"
+        />
+        <multiselect
+          v-model="selectedLabels"
+          :options="savedLabels"
+          :tag-placeholder="$t('CONTACT_PANEL.LABELS.TAG_PLACEHOLDER')"
+          :placeholder="$t('CONTACT_PANEL.LABELS.PLACEHOLDER')"
+          :multiple="true"
+          :taggable="true"
+          hide-selected
+          :show-labels="false"
+          @tag="addLabel"
+        />
+      </label>
+      <div class="row align-middle align-justify">
+        <span v-if="labelUiFlags.isError" class="error">{{
+          $t('CONTACT_PANEL.LABELS.UPDATE_ERROR')
+        }}</span>
+        <button
+          v-if="hasEdited"
+          type="button"
+          class="button nice tiny"
+          @click="onUpdateLabels"
+        >
+          <spinner v-if="labelUiFlags.isUpdating" size="tiny" />
+          {{
+            labelUiFlags.isUpdating
+              ? 'saving...'
+              : $t('CONTACT_PANEL.LABELS.UPDATE_BUTTON')
+          }}
+        </button>
       </div>
     </div>
     <spinner v-else></spinner>
@@ -45,10 +49,12 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import ContactDetailsItem from './ContactDetailsItem';
 import Spinner from 'shared/components/Spinner';
 
 export default {
   components: {
+    ContactDetailsItem,
     Spinner,
   },
   props: {
@@ -124,7 +130,7 @@ export default {
 @import '~dashboard/assets/scss/mixins';
 
 .contact-conversation--panel {
-  padding: $space-normal $space-normal $space-normal $space-medium;
+  padding: $space-normal;
 }
 
 .conversation--label {
@@ -133,12 +139,8 @@ export default {
   font-size: $font-size-small;
   padding: $space-smaller;
 }
-.wrap {
-  margin-top: $space-slab;
-}
 
 .select-tags {
-  margin-top: $space-small;
   .multiselect {
     &:hover {
       cursor: pointer;
@@ -156,6 +158,7 @@ export default {
 .no-results-wrap {
   padding: 0 $space-small;
 }
+
 .no-results {
   margin: $space-normal 0 0 0;
   color: $color-gray;
diff --git a/app/javascript/dashboard/store/modules/contacts.js b/app/javascript/dashboard/store/modules/contacts.js
index 75acb7086..01323d7d1 100644
--- a/app/javascript/dashboard/store/modules/contacts.js
+++ b/app/javascript/dashboard/store/modules/contacts.js
@@ -1,10 +1,10 @@
 /* eslint no-param-reassign: 0 */
-import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import * as types from '../mutation-types';
 import ContactAPI from '../../api/contacts';
+import Vue from 'vue';
 
 const state = {
-  records: [],
+  records: {},
   uiFlags: {
     isFetching: false,
     isFetchingItem: false,
@@ -14,16 +14,14 @@ const state = {
 
 export const getters = {
   getContacts($state) {
-    return $state.records;
+    return Object.values($state.records);
   },
   getUIFlags($state) {
     return $state.uiFlags;
   },
   getContact: $state => id => {
-    const [contact = {}] = $state.records.filter(
-      record => record.id === Number(id)
-    );
-    return contact;
+    const contact = $state.records[id];
+    return contact || {};
   },
 };
 
@@ -71,9 +69,19 @@ export const mutations = {
     };
   },
 
-  [types.default.SET_CONTACTS]: MutationHelpers.set,
-  [types.default.SET_CONTACT_ITEM]: MutationHelpers.setSingleRecord,
-  [types.default.EDIT_CONTACT]: MutationHelpers.update,
+  [types.default.SET_CONTACTS]: ($state, data) => {
+    data.forEach(contact => {
+      Vue.set($state.records, contact.id, contact);
+    });
+  },
+
+  [types.default.SET_CONTACT_ITEM]: ($state, data) => {
+    Vue.set($state.records, data.id, data);
+  },
+
+  [types.default.EDIT_CONTACT]: ($state, data) => {
+    Vue.set($state.records, data.id, data);
+  },
 };
 
 export default {
diff --git a/app/javascript/dashboard/store/modules/conversations/actions.js b/app/javascript/dashboard/store/modules/conversations/actions.js
index 683e2a0f7..826c92f35 100644
--- a/app/javascript/dashboard/store/modules/conversations/actions.js
+++ b/app/javascript/dashboard/store/modules/conversations/actions.js
@@ -1,6 +1,5 @@
 import Vue from 'vue';
 import * as types from '../../mutation-types';
-
 import ConversationApi from '../../../api/inbox/conversation';
 import MessageApi from '../../../api/inbox/message';
 import FBChannel from '../../../api/channel/fbChannel';
@@ -11,6 +10,10 @@ const actions = {
     try {
       const response = await ConversationApi.show(conversationId);
       commit(types.default.ADD_CONVERSATION, response.data);
+      commit(
+        `contacts/${types.default.SET_CONTACT_ITEM}`,
+        response.data.meta.sender
+      );
     } catch (error) {
       // Ignore error
     }
@@ -25,6 +28,10 @@ const actions = {
       commit(types.default.SET_ALL_CONVERSATION, chatList);
       commit(types.default.SET_CONV_TAB_META, metaData);
       commit(types.default.CLEAR_LIST_LOADING_STATUS);
+      commit(
+        `contacts/${types.default.SET_CONTACTS}`,
+        chatList.map(chat => chat.meta.sender)
+      );
       dispatch(
         'conversationPage/setCurrentPage',
         {
@@ -120,19 +127,13 @@ const actions = {
     }
   },
 
-  toggleStatus: async ({ commit, dispatch, getters }, data) => {
+  toggleStatus: async ({ commit }, data) => {
     try {
-      const nextChat = getters.getNextChatConversation;
       const response = await ConversationApi.toggleStatus(data);
       commit(
         types.default.RESOLVE_CONVERSATION,
         response.data.payload.current_status
       );
-      if (nextChat) {
-        dispatch('setActiveChat', nextChat);
-      } else {
-        dispatch('clearSelectedState');
-      }
     } catch (error) {
       // Handle error
     }
@@ -159,6 +160,10 @@ const actions = {
     const { currentInbox } = state;
     if (!currentInbox || Number(currentInbox) === conversation.inbox_id) {
       commit(types.default.ADD_CONVERSATION, conversation);
+      commit(
+        `contacts/${types.default.SET_CONTACT_ITEM}`,
+        conversation.meta.sender
+      );
     }
   },
 
@@ -203,6 +208,13 @@ const actions = {
     commit(types.default.UPDATE_ASSIGNEE, data);
   },
 
+  updateConversationContact({ commit }, data) {
+    if (data.id) {
+      commit(`contacts/${types.default.SET_CONTACT_ITEM}`, data);
+    }
+    commit(types.default.UPDATE_CONVERSATION_CONTACT, data);
+  },
+
   setActiveInbox({ commit }, inboxId) {
     commit(types.default.SET_ACTIVE_INBOX, inboxId);
   },
diff --git a/app/javascript/dashboard/store/modules/conversations/getters.js b/app/javascript/dashboard/store/modules/conversations/getters.js
index 0df2b4036..311342941 100644
--- a/app/javascript/dashboard/store/modules/conversations/getters.js
+++ b/app/javascript/dashboard/store/modules/conversations/getters.js
@@ -8,9 +8,10 @@ export const getSelectedChatConversation = ({
 
 // getters
 const getters = {
-  getAllConversations: ({ allConversations }) => allConversations.sort(
-    (a, b) => b.messages.last().created_at - a.messages.last().created_at
-  ),
+  getAllConversations: ({ allConversations }) =>
+    allConversations.sort(
+      (a, b) => b.messages.last()?.created_at - a.messages.last()?.created_at
+    ),
   getSelectedChat: ({ selectedChat }) => selectedChat,
   getMineChats(_state) {
     const currentUserID = authAPI.getCurrentUser().id;
@@ -52,12 +53,12 @@ const getters = {
   getChatStatusFilter: ({ chatStatusFilter }) => chatStatusFilter,
   getSelectedInbox: ({ currentInbox }) => currentInbox,
   getConvTabStats: ({ convTabStats }) => convTabStats,
-  getNextChatConversation: (_state) => {
+  getNextChatConversation: _state => {
     const { selectedChat } = _state;
     const conversations = getters.getAllStatusChats(_state);
     if (conversations.length <= 1) {
       return null;
-    };
+    }
     const currentIndex = conversations.findIndex(
       conversation => conversation.id === selectedChat.id
     );
diff --git a/app/javascript/dashboard/store/modules/conversations/index.js b/app/javascript/dashboard/store/modules/conversations/index.js
index d016a55ef..71c226c40 100644
--- a/app/javascript/dashboard/store/modules/conversations/index.js
+++ b/app/javascript/dashboard/store/modules/conversations/index.js
@@ -203,6 +203,16 @@ const mutations = {
     chat.meta.assignee = payload.assignee;
   },
 
+  [types.default.UPDATE_CONVERSATION_CONTACT](
+    _state,
+    { conversationId, ...payload }
+  ) {
+    const [chat] = _state.allConversations.filter(c => c.id === conversationId);
+    if (chat) {
+      Vue.set(chat.meta, 'sender', payload);
+    }
+  },
+
   [types.default.SET_ACTIVE_INBOX](_state, inboxId) {
     _state.currentInbox = inboxId;
   },
diff --git a/app/javascript/dashboard/store/modules/specs/contacts/getters.spec.js b/app/javascript/dashboard/store/modules/specs/contacts/getters.spec.js
index d265c8410..a35fee9b1 100644
--- a/app/javascript/dashboard/store/modules/specs/contacts/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/contacts/getters.spec.js
@@ -4,14 +4,14 @@ import contactList from './fixtures';
 describe('#getters', () => {
   it('getContacts', () => {
     const state = {
-      records: contactList,
+      records: { 1: contactList[0] },
     };
-    expect(getters.getContacts(state)).toEqual(contactList);
+    expect(getters.getContacts(state)).toEqual([contactList[0]]);
   });
 
   it('getContact', () => {
     const state = {
-      records: contactList,
+      records: { 2: contactList[1] },
     };
     expect(getters.getContact(state)(2)).toEqual(contactList[1]);
   });
diff --git a/app/javascript/dashboard/store/modules/specs/contacts/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/contacts/mutations.spec.js
index 72ca4f0b7..9c076bba3 100644
--- a/app/javascript/dashboard/store/modules/specs/contacts/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/contacts/mutations.spec.js
@@ -4,50 +4,54 @@ import { mutations } from '../../contacts';
 describe('#mutations', () => {
   describe('#SET_CONTACTS', () => {
     it('set contact records', () => {
-      const state = { records: [] };
+      const state = { records: {} };
       mutations[types.default.SET_CONTACTS](state, [
         { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
       ]);
-      expect(state.records).toEqual([
-        {
+      expect(state.records).toEqual({
+        1: {
           id: 1,
           name: 'contact1',
           email: 'contact1@chatwoot.com',
         },
-      ]);
+      });
     });
   });
 
   describe('#SET_CONTACT_ITEM', () => {
     it('push contact data to the store', () => {
       const state = {
-        records: [{ id: 1, name: 'contact1', email: 'contact1@chatwoot.com' }],
+        records: {
+          1: { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
+        },
       };
       mutations[types.default.SET_CONTACT_ITEM](state, {
         id: 2,
         name: 'contact2',
         email: 'contact2@chatwoot.com',
       });
-      expect(state.records).toEqual([
-        { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
-        { id: 2, name: 'contact2', email: 'contact2@chatwoot.com' },
-      ]);
+      expect(state.records).toEqual({
+        1: { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
+        2: { id: 2, name: 'contact2', email: 'contact2@chatwoot.com' },
+      });
     });
   });
 
   describe('#EDIT_CONTACT', () => {
     it('update contact', () => {
       const state = {
-        records: [{ id: 1, name: 'contact1', email: 'contact1@chatwoot.com' }],
+        records: {
+          1: { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
+        },
       };
       mutations[types.default.EDIT_CONTACT](state, {
         id: 1,
         name: 'contact2',
         email: 'contact2@chatwoot.com',
       });
-      expect(state.records).toEqual([
-        { id: 1, name: 'contact2', email: 'contact2@chatwoot.com' },
-      ]);
+      expect(state.records).toEqual({
+        1: { id: 1, name: 'contact2', email: 'contact2@chatwoot.com' },
+      });
     });
   });
 });
diff --git a/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js b/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js
index 7898822aa..5c14a9e27 100644
--- a/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js
@@ -9,10 +9,16 @@ jest.mock('axios');
 describe('#actions', () => {
   describe('#getConversation', () => {
     it('sends correct actions if API is success', async () => {
-      axios.get.mockResolvedValue({ data: { id: 1, meta: {} } });
+      axios.get.mockResolvedValue({
+        data: { id: 1, meta: { sender: { id: 1, name: 'Contact 1' } } },
+      });
       await actions.getConversation({ commit }, 1);
       expect(commit.mock.calls).toEqual([
-        [types.default.ADD_CONVERSATION, { id: 1, meta: {} }],
+        [
+          types.default.ADD_CONVERSATION,
+          { id: 1, meta: { sender: { id: 1, name: 'Contact 1' } } },
+        ],
+        ['contacts/SET_CONTACT_ITEM', { id: 1, name: 'Contact 1' }],
       ]);
     });
     it('sends correct actions if API is error', async () => {
diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js
index f9d7ea4ec..5357415b2 100755
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -15,6 +15,7 @@ export default {
   CLEAR_ALL_MESSAGES_LOADED: 'CLEAR_ALL_MESSAGES_LOADED',
   CHANGE_CHAT_STATUS_FILTER: 'CHANGE_CHAT_STATUS_FILTER',
   UPDATE_ASSIGNEE: 'UPDATE_ASSIGNEE',
+  UPDATE_CONVERSATION_CONTACT: 'UPDATE_CONVERSATION_CONTACT',
 
   // Active chat
   CURRENT_CHAT_WINDOW: 'CURRENT_CHAT_WINDOW',
diff --git a/app/javascript/shared/helpers/HTMLSanitizer.js b/app/javascript/shared/helpers/HTMLSanitizer.js
new file mode 100644
index 000000000..b119b3681
--- /dev/null
+++ b/app/javascript/shared/helpers/HTMLSanitizer.js
@@ -0,0 +1,8 @@
+export const escapeHtml = (unsafe = '') => {
+  return unsafe
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+};
diff --git a/app/javascript/shared/helpers/MessageFormatter.js b/app/javascript/shared/helpers/MessageFormatter.js
index 475c8b905..a5dc591e8 100644
--- a/app/javascript/shared/helpers/MessageFormatter.js
+++ b/app/javascript/shared/helpers/MessageFormatter.js
@@ -1,6 +1,8 @@
+import { escapeHtml } from './HTMLSanitizer';
+
 class MessageFormatter {
   constructor(message) {
-    this.message = message || '';
+    this.message = escapeHtml(message) || '';
   }
 
   formatMessage() {
diff --git a/app/listeners/action_cable_listener.rb b/app/listeners/action_cable_listener.rb
index 950e74caf..1baccfc78 100644
--- a/app/listeners/action_cable_listener.rb
+++ b/app/listeners/action_cable_listener.rb
@@ -90,6 +90,13 @@ class ActionCableListener < BaseListener
     broadcast(account, tokens, ASSIGNEE_CHANGED, conversation.push_event_data)
   end
 
+  def conversation_contact_changed(event)
+    conversation, account = extract_conversation_and_account(event)
+    tokens = user_tokens(account, conversation.inbox.members)
+
+    broadcast(account, tokens, CONVERSATION_CONTACT_CHANGED, conversation.push_event_data)
+  end
+
   def contact_created(event)
     contact, account = extract_contact_and_account(event)
     tokens = user_tokens(account, account.agents)
diff --git a/app/models/contact.rb b/app/models/contact.rb
index 31c757b68..00783f5bc 100644
--- a/app/models/contact.rb
+++ b/app/models/contact.rb
@@ -47,11 +47,15 @@ class Contact < ApplicationRecord
 
   def push_event_data
     {
+      additional_attributes: additional_attributes,
+      email: email,
       id: id,
+      identifier: identifier,
       name: name,
+      phone_number: phone_number,
+      pubsub_token: pubsub_token,
       thumbnail: avatar_url,
-      type: 'contact',
-      pubsub_token: pubsub_token
+      type: 'contact'
     }
   end
 
diff --git a/app/models/conversation.rb b/app/models/conversation.rb
index 59e9a853f..07a9e9fc2 100644
--- a/app/models/conversation.rb
+++ b/app/models/conversation.rb
@@ -162,7 +162,8 @@ class Conversation < ApplicationRecord
       CONVERSATION_RESOLVED => -> { saved_change_to_status? && resolved? },
       CONVERSATION_READ => -> { saved_change_to_user_last_seen_at? },
       CONVERSATION_LOCK_TOGGLE => -> { saved_change_to_locked? },
-      ASSIGNEE_CHANGED => -> { saved_change_to_assignee_id? }
+      ASSIGNEE_CHANGED => -> { saved_change_to_assignee_id? },
+      CONVERSATION_CONTACT_CHANGED => -> { saved_change_to_contact_id? }
     }.each do |event, condition|
       condition.call && dispatcher_dispatch(event)
     end
diff --git a/lib/events/types.rb b/lib/events/types.rb
index beb20f9d0..a4ef24b7f 100644
--- a/lib/events/types.rb
+++ b/lib/events/types.rb
@@ -14,6 +14,7 @@ module Events::Types
   CONVERSATION_OPENED = 'conversation.opened'
   CONVERSATION_RESOLVED = 'conversation.resolved'
   CONVERSATION_LOCK_TOGGLE = 'conversation.lock_toggle'
+  CONVERSATION_CONTACT_CHANGED = 'conversation.contact_changed'
   ASSIGNEE_CHANGED = 'assignee.changed'
   CONVERSATION_TYPING_ON = 'conversation.typing_on'
   CONVERSATION_TYPING_OFF = 'conversation.typing_off'