chore: Migrate PubSub Token to contact inbox (#3434)

At present, the websocket pubsub tokens are present at the contact objects in chatwoot. A better approach would be to have these tokens at the contact_inbox object instead. This helps chatwoot to deliver the websocket events targetted to the specific widget connection, stop contact events from leaking into other chat sessions from the same contact.

Fixes #1682
Fixes #1664

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/assets/scss/_utility-helpers.scss

@@ -2,6 +2,10 @@
   margin-right: var(--space-small);
 }
 
+.margin-right-smaller {
+  margin-right: var(--space-smaller);
+}
+
 .fs-small {
   font-size: var(--font-size-small);
 }
@@ -42,3 +46,7 @@
 .bg-white {
   background-color: var(--white);
 }
+
+.text-y-800 {
+  color: var(--y-800);
+}

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

@@ -10,7 +10,12 @@
       />
       <div class="user--profile__meta">
         <h3 class="user--name text-truncate">
-          {{ currentContact.name }}
+          <span class="margin-right-smaller">{{ currentContact.name }}</span>
+          <i
+            v-if="!isHMACVerified"
+            v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
+            class="ion-android-alert text-y-800 fs-default"
+          />
         </h3>
         <div class="conversation--header--actions">
           <inbox-name :inbox="inbox" class="margin-right-small" />
@@ -73,11 +78,15 @@ export default {
       uiFlags: 'inboxAssignableAgents/getUIFlags',
       currentChat: 'getSelectedChat',
     }),
-
     chatMetadata() {
       return this.chat.meta;
     },
-
+    isHMACVerified() {
+      if (!this.isAWebWidgetInbox) {
+        return true;
+      }
+      return this.chatMetadata.hmac_verified;
+    },
     currentContact() {
       return this.$store.getters['contacts/getContact'](
         this.chat.meta.sender.id

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -1,6 +1,7 @@
 {
   "CONVERSATION": {
     "404": "Please select a conversation from left pane",
+    "UNVERIFIED_SESSION": "The identity of this user is not verified",
     "NO_MESSAGE_1": "Uh oh! Looks like there are no messages from customers in your inbox.",
     "NO_MESSAGE_2": " to send a message to your page!",
     "NO_INBOX_1": "Hola! Looks like you haven't added any inboxes yet.",

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -41,17 +41,17 @@
           </label>
         </div>
       </div>
-      <div class="row" v-if="isAnEmailInbox">
+      <div v-if="isAnEmailInbox" class="row">
         <div class="columns">
-          <label :class="{ error: $v.message.$error }">
+          <label :class="{ error: $v.subject.$error }">
             {{ $t('NEW_CONVERSATION.FORM.SUBJECT.LABEL') }}
             <input
               v-model="subject"
               type="text"
               :placeholder="$t('NEW_CONVERSATION.FORM.SUBJECT.PLACEHOLDER')"
-              @input="$v.message.$touch"
+              @input="$v.subject.$touch"
             />
-            <span v-if="$v.message.$error" class="message">
+            <span v-if="$v.subject.$error" class="message">
               {{ $t('NEW_CONVERSATION.FORM.SUBJECT.ERROR') }}
             </span>
           </label>
@@ -93,7 +93,7 @@ import Thumbnail from 'dashboard/components/widgets/Thumbnail';
 import alertMixin from 'shared/mixins/alertMixin';
 import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
-import { required } from 'vuelidate/lib/validators';
+import { required, requiredIf } from 'vuelidate/lib/validators';
 
 export default {
   components: {
@@ -120,7 +120,7 @@ export default {
   },
   validations: {
     subject: {
-      required,
+      required: requiredIf('isAnEmailInbox'),
     },
     message: {
       required,