fix: Prevent duplicate chat creation in the web widget during latency (#10745)

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

@@ -5,6 +5,7 @@ import {
   SET_WIDGET_APP_CONFIG,
   SET_WIDGET_COLOR,
   TOGGLE_WIDGET_OPEN,
+  SET_ROUTE_UPDATE_STATE,
 } from '../types';
 
 const state = {
@@ -19,6 +20,7 @@ const state = {
   widgetColor: '',
   widgetStyle: 'standard',
   darkMode: 'light',
+  isUpdatingRoute: false,
 };
 
 export const getters = {
@@ -31,6 +33,7 @@ export const getters = {
   isWidgetStyleFlat: $state => $state.widgetStyle === 'flat',
   darkMode: $state => $state.darkMode,
   getShowUnreadMessagesDialog: $state => $state.showUnreadMessagesDialog,
+  getIsUpdatingRoute: _state => _state.isUpdatingRoute,
 };
 
 export const actions = {
@@ -69,6 +72,13 @@ export const actions = {
   setBubbleVisibility({ commit }, hideMessageBubble) {
     commit(SET_BUBBLE_VISIBILITY, hideMessageBubble);
   },
+  setRouteTransitionState: async ({ commit }, status) => {
+    // Handles the routing state during navigation to different screen
+    // Called before the navigation starts and after navigation completes
+    // Handling this state in app/javascript/widget/router.js
+    // See issue: https://github.com/chatwoot/chatwoot/issues/10736
+    commit(SET_ROUTE_UPDATE_STATE, status);
+  },
 };
 
 export const mutations = {
@@ -96,6 +106,9 @@ export const mutations = {
   [SET_COLOR_SCHEME]($state, darkMode) {
     $state.darkMode = darkMode;
   },
+  [SET_ROUTE_UPDATE_STATE]($state, status) {
+    $state.isUpdatingRoute = status;
+  },
 };
 
 export default {

app/javascript/widget/store/modules/specs/appConfig/actions.spec.js

@@ -31,4 +31,11 @@ describe('#actions', () => {
       expect(commit.mock.calls).toEqual([['SET_COLOR_SCHEME', 'dark']]);
     });
   });
+
+  describe('#setRouteTransitionState', () => {
+    it('creates actions properly', () => {
+      actions.setRouteTransitionState({ commit }, false);
+      expect(commit.mock.calls).toEqual([['SET_ROUTE_UPDATE_STATE', false]]);
+    });
+  });
 });

app/javascript/widget/store/modules/specs/appConfig/getters.spec.js

@@ -19,4 +19,10 @@ describe('#getters', () => {
       expect(getters.getShowUnreadMessagesDialog(state)).toEqual(true);
     });
   });
+  describe('#getIsUpdatingRoute', () => {
+    it('returns correct value', () => {
+      const state = { isUpdatingRoute: true };
+      expect(getters.getIsUpdatingRoute(state)).toEqual(true);
+    });
+  });
 });

app/javascript/widget/store/modules/specs/appConfig/mutations.spec.js

@@ -32,4 +32,12 @@ describe('#mutations', () => {
       expect(state.darkMode).toEqual('dark');
     });
   });
+
+  describe('#SET_ROUTE_UPDATE_STATE', () => {
+    it('sets dark mode properly', () => {
+      const state = { isUpdatingRoute: false };
+      mutations.SET_ROUTE_UPDATE_STATE(state, true);
+      expect(state.isUpdatingRoute).toEqual(true);
+    });
+  });
 });

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

@@ -17,6 +17,7 @@ describe('#actions', () => {
           messages: [{ id: 1, content: 'This is a test message' }],
         },
       });
+
       let windowSpy = vi.spyOn(window, 'window', 'get');
       windowSpy.mockImplementation(() => ({
         WOOT_WIDGET: {