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

app/javascript/widget/router.js

@@ -1,7 +1,8 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 import ViewWithHeader from './components/layouts/ViewWithHeader.vue';
+import store from './store';
 
-export default createRouter({
+const router = createRouter({
   history: createWebHashHistory(),
   routes: [
     {
@@ -42,3 +43,35 @@ export default createRouter({
     },
   ],
 });
+
+/**
+ * Navigation Guards to Handle Route Transitions
+ *
+ * Purpose:
+ * Prevents duplicate form submissions and API calls during route transitions,
+ * especially important in high-latency scenarios.
+ *
+ * Flow:
+ * 1. beforeEach: Sets isUpdatingRoute to true at start of navigation
+ * 2. Component buttons/actions check this flag to prevent duplicate actions
+ * 3. afterEach: Resets the flag once navigation is complete
+ *
+ * Implementation note:
+ * Handling it globally, so that we can use it across all components
+ * to ensure consistent UI behavior during all route transitions.
+ *
+ * @see https://github.com/chatwoot/chatwoot/issues/10736
+ */
+
+router.beforeEach(async (to, from, next) => {
+  // Prevent any user interactions during route transition
+  await store.dispatch('appConfig/setRouteTransitionState', true);
+  next();
+});
+
+router.afterEach(() => {
+  // Re-enable user interactions after navigation is complete
+  store.dispatch('appConfig/setRouteTransitionState', false);
+});
+
+export default router;