feat: Vite + vue 3 💚 (#10047)

Fixes https://github.com/chatwoot/chatwoot/issues/8436
Fixes https://github.com/chatwoot/chatwoot/issues/9767
Fixes https://github.com/chatwoot/chatwoot/issues/10156
Fixes https://github.com/chatwoot/chatwoot/issues/6031
Fixes https://github.com/chatwoot/chatwoot/issues/5696
Fixes https://github.com/chatwoot/chatwoot/issues/9250
Fixes https://github.com/chatwoot/chatwoot/issues/9762

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/widget/store/modules/agent.js

@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import { getAvailableAgents } from 'widget/api/agent';
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 
@@ -36,14 +35,14 @@ export const actions = {
 
 export const mutations = {
   setAgents($state, data) {
-    Vue.set($state, 'records', data);
+    $state.records = data;
   },
   updatePresence: MutationHelpers.updatePresence,
   setError($state, value) {
-    Vue.set($state.uiFlags, 'isError', value);
+    $state.uiFlags.isError = value;
   },
   setHasFetched($state, value) {
-    Vue.set($state.uiFlags, 'hasFetched', value);
+    $state.uiFlags.hasFetched = value;
   },
 };
 

app/javascript/widget/store/modules/articles.js

@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import { getMostReadArticles } from 'widget/api/article';
 
 const state = {
@@ -37,13 +36,13 @@ export const actions = {
 
 export const mutations = {
   setArticles($state, data) {
-    Vue.set($state, 'records', data);
+    $state.records = data;
   },
   setError($state, value) {
-    Vue.set($state.uiFlags, 'isError', value);
+    $state.uiFlags.isError = value;
   },
   setIsFetching($state, value) {
-    Vue.set($state.uiFlags, 'isFetching', value);
+    $state.uiFlags.isFetching = value;
   },
 };
 

app/javascript/widget/store/modules/campaign.js

@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import { getCampaigns, triggerCampaign } from 'widget/api/campaign';
 import campaignTimer from 'widget/helpers/campaignTimer';
 import {
@@ -127,19 +126,19 @@ export const actions = {
 
 export const mutations = {
   setCampaigns($state, data) {
-    Vue.set($state, 'records', data);
+    $state.records = data;
   },
   setActiveCampaign($state, data) {
-    Vue.set($state, 'activeCampaign', data);
+    $state.activeCampaign = data;
   },
   setError($state, value) {
-    Vue.set($state.uiFlags, 'isError', value);
+    $state.uiFlags.isError = value;
   },
   setHasFetched($state, value) {
-    Vue.set($state.uiFlags, 'hasFetched', value);
+    $state.uiFlags.hasFetched = value;
   },
   setCampaignExecuted($state, data) {
-    Vue.set($state, 'campaignHasExecuted', data);
+    $state.campaignHasExecuted = data;
   },
 };
 

app/javascript/widget/store/modules/conversation/actions.js

@@ -43,7 +43,8 @@ export const actions = {
     try {
       const { data } = await sendMessageAPI(content, replyTo);
 
-      commit('deleteMessage', message.id);
+      // [VITE] Don't delete this manually, since `pushMessageToConversation` does the replacement for us anyway
+      // commit('deleteMessage', message.id);
       commit('pushMessageToConversation', { ...data, status: 'sent' });
     } catch (error) {
       commit('pushMessageToConversation', { ...message, status: 'failed' });

app/javascript/widget/store/modules/conversation/mutations.js

@@ -1,10 +1,9 @@
-import Vue from 'vue';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import { findUndeliveredMessage } from './helpers';
 
 export const mutations = {
   clearConversations($state) {
-    Vue.set($state, 'conversations', {});
+    $state.conversations = {};
   },
   pushMessageToConversation($state, message) {
     const { id, status, message_type: type } = message;
@@ -14,7 +13,7 @@ export const mutations = {
     const isTemporaryMessage = status === 'in_progress';
 
     if (!isMessageIncoming || isTemporaryMessage) {
-      Vue.set(messagesInbox, id, message);
+      messagesInbox[id] = message;
       return;
     }
 
@@ -23,10 +22,13 @@ export const mutations = {
       message
     );
     if (!messageInConversation) {
-      Vue.set(messagesInbox, id, message);
+      messagesInbox[id] = message;
     } else {
-      Vue.delete(messagesInbox, messageInConversation.id);
-      Vue.set(messagesInbox, id, message);
+      // [VITE] instead of leaving undefined behind, we remove it completely
+      // remove the temporary message and replace it with the new message
+      // messagesInbox[messageInConversation.id] = undefined;
+      delete messagesInbox[messageInConversation.id];
+      messagesInbox[id] = message;
     }
   },
 
@@ -37,8 +39,11 @@ export const mutations = {
     const messageInConversation = messagesInbox[tempId];
 
     if (messageInConversation) {
-      Vue.delete(messagesInbox, tempId);
-      Vue.set(messagesInbox, id, { ...message });
+      // [VITE] instead of leaving undefined behind, we remove it completely
+      // remove the temporary message and replace it with the new message
+      // messagesInbox[tempId] = undefined;
+      delete messagesInbox[tempId];
+      messagesInbox[id] = { ...message };
     }
   },
 
@@ -59,11 +64,13 @@ export const mutations = {
       return;
     }
 
-    payload.map(message => Vue.set($state.conversations, message.id, message));
+    payload.forEach(message => {
+      $state.conversations[message.id] = message;
+    });
   },
 
   setMissingMessagesInConversation($state, payload) {
-    Vue.set($state, 'conversation', payload);
+    $state.conversation = payload;
   },
 
   updateMessage($state, { id, content_attributes }) {
@@ -81,14 +88,14 @@ export const mutations = {
     if (!message) return;
 
     const newMeta = message.meta ? { ...message.meta, ...meta } : { ...meta };
-    Vue.set(message, 'meta', {
-      ...newMeta,
-    });
+    message.meta = { ...newMeta };
   },
 
   deleteMessage($state, id) {
-    const messagesInbox = $state.conversations;
-    Vue.delete(messagesInbox, id);
+    delete $state.conversations[id];
+    // [VITE] In Vue 3 proxy objects, we can't delete properties by setting them to undefined
+    // Instead, we have to use the delete operator
+    // $state.conversations[id] = undefined;
   },
 
   toggleAgentTypingStatus($state, { status }) {