From 2b9ada259e05e86cc2ceca14c3b5ff589c5cfe8e Mon Sep 17 00:00:00 2001
From: Rodribm10 <rodrigobm10@me.com>
Date: Thu, 23 Apr 2026 18:03:26 -0300
Subject: [PATCH] feat(dashboard): aggressive alert on conversation reopening
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Banner persistente + som em loop + OS notification + title flash
+ vibração mobile quando conversa transiciona pra 'open' vindo de
pending/snoozed/resolved. Exige interação pra dismissar — atendente
não perde evento de reabertura.

- AggressiveConversationBanner.vue: banner full-width no topo,
  dismissable, mostra nome do contato + inbox + status anterior
- aggressiveAlert.js: manager do som (loop infinito), title flash
  (intervalo 1s), Notification API (requireInteraction: true),
  navigator.vibrate (padrão 500-200-500-200-500)
- actionCable.onStatusChange: detecta transição pra 'open' e dispara
  trigger via BUS_EVENTS (só se status anterior ≠ open, pra não
  alertar conversa nova criada já em open)
- i18n pt_BR + en: chaves de notificação (title/body/dismiss)
- busEvents: AGGRESSIVE_ALERT_TRIGGER + AGGRESSIVE_ALERT_DISMISS

Camada 1 da feature. Camada 2 (escalation SMS/WhatsApp se não
dismissar em X segundos) fica pra outro PR.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/javascript/dashboard/App.vue              |   3 +
 .../app/AggressiveConversationBanner.vue      | 249 ++++++++++++++++++
 .../dashboard/helper/actionCable.js           |  28 ++
 .../dashboard/helper/aggressiveAlert.js       | 159 +++++++++++
 .../i18n/locale/en/aggressiveBanner.json      |  13 +
 .../dashboard/i18n/locale/en/index.js         |   2 +
 .../i18n/locale/pt_BR/aggressiveBanner.json   |  13 +
 .../dashboard/i18n/locale/pt_BR/index.js      |   2 +
 app/javascript/shared/constants/busEvents.js  |   2 +
 9 files changed, 471 insertions(+)
 create mode 100644 app/javascript/dashboard/components/app/AggressiveConversationBanner.vue
 create mode 100644 app/javascript/dashboard/helper/aggressiveAlert.js
 create mode 100644 app/javascript/dashboard/i18n/locale/en/aggressiveBanner.json
 create mode 100644 app/javascript/dashboard/i18n/locale/pt_BR/aggressiveBanner.json

diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index 61d7631e7..967fa667d 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -5,6 +5,7 @@ import NetworkNotification from './components/NetworkNotification.vue';
 import UpdateBanner from './components/app/UpdateBanner.vue';
 import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import PendingEmailVerificationBanner from './components/app/PendingEmailVerificationBanner.vue';
+import AggressiveConversationBanner from './components/app/AggressiveConversationBanner.vue';
 import vueActionCable from './helper/actionCable';
 import { useRouter } from 'vue-router';
 import { useStore } from 'dashboard/composables/store';
@@ -30,6 +31,7 @@ export default {
     PaymentPendingBanner,
     WootSnackbarBox,
     PendingEmailVerificationBanner,
+    AggressiveConversationBanner,
   },
   setup() {
     const router = useRouter();
@@ -134,6 +136,7 @@ export default {
     class="flex flex-col w-full h-screen min-h-0 bg-n-background"
     :dir="isRTL ? 'rtl' : 'ltr'"
   >
+    <AggressiveConversationBanner />
     <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
     <template v-if="currentAccountId">
       <PendingEmailVerificationBanner v-if="hideOnOnboardingView" />
diff --git a/app/javascript/dashboard/components/app/AggressiveConversationBanner.vue b/app/javascript/dashboard/components/app/AggressiveConversationBanner.vue
new file mode 100644
index 000000000..76dd19469
--- /dev/null
+++ b/app/javascript/dashboard/components/app/AggressiveConversationBanner.vue
@@ -0,0 +1,249 @@
+<script>
+import { mapGetters } from 'vuex';
+import { emitter } from 'shared/helpers/mitt';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import aggressiveAlert from 'dashboard/helper/aggressiveAlert';
+
+export default {
+  name: 'AggressiveConversationBanner',
+  data() {
+    return {
+      alerts: [],
+    };
+  },
+  computed: {
+    ...mapGetters({ currentAccountId: 'getCurrentAccountId' }),
+    hasAlerts() {
+      return this.alerts.length > 0;
+    },
+    bannerLabel() {
+      if (this.alerts.length === 1) {
+        return this.$t(
+          'AGGRESSIVE_CONVERSATION_BANNER.SINGLE',
+          'Conversa aguardando resposta!'
+        );
+      }
+      return this.$t(
+        'AGGRESSIVE_CONVERSATION_BANNER.MULTIPLE',
+        { count: this.alerts.length },
+        `${this.alerts.length} conversas aguardando resposta!`
+      );
+    },
+  },
+  mounted() {
+    emitter.on(BUS_EVENTS.AGGRESSIVE_ALERT_TRIGGER, this.handleTrigger);
+    emitter.on(BUS_EVENTS.AGGRESSIVE_ALERT_DISMISS, this.handleDismiss);
+    // Rehidrata se alertas foram disparados antes do componente montar
+    this.alerts = aggressiveAlert.getActiveConversations();
+  },
+  beforeUnmount() {
+    emitter.off(BUS_EVENTS.AGGRESSIVE_ALERT_TRIGGER, this.handleTrigger);
+    emitter.off(BUS_EVENTS.AGGRESSIVE_ALERT_DISMISS, this.handleDismiss);
+  },
+  methods: {
+    handleTrigger() {
+      this.alerts = aggressiveAlert.getActiveConversations();
+    },
+    handleDismiss() {
+      this.alerts = aggressiveAlert.getActiveConversations();
+    },
+    openConversation(alert) {
+      aggressiveAlert.dismiss(alert.id);
+      if (!this.currentAccountId) return;
+      this.$router.push({
+        name: 'inbox_conversation',
+        params: { accountId: this.currentAccountId, conversationId: alert.id },
+      });
+    },
+    dismissOne(alert) {
+      aggressiveAlert.dismiss(alert.id);
+    },
+    dismissAll() {
+      aggressiveAlert.dismissAll();
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    v-if="hasAlerts"
+    class="aggressive-banner"
+    role="alert"
+    aria-live="assertive"
+  >
+    <div class="aggressive-banner__main">
+      <span class="aggressive-banner__icon">{{
+        $t('AGGRESSIVE_CONVERSATION_BANNER.ALERT_ICON', '🚨')
+      }}</span>
+      <span class="aggressive-banner__title">{{ bannerLabel }}</span>
+      <button
+        type="button"
+        class="aggressive-banner__dismiss-all"
+        @click="dismissAll"
+      >
+        {{
+          $t('AGGRESSIVE_CONVERSATION_BANNER.DISMISS_ALL', 'Dispensar todas')
+        }}
+      </button>
+    </div>
+    <ul class="aggressive-banner__list">
+      <li
+        v-for="alert in alerts"
+        :key="alert.id"
+        class="aggressive-banner__item"
+      >
+        <button
+          type="button"
+          class="aggressive-banner__open"
+          @click="openConversation(alert)"
+        >
+          <span class="aggressive-banner__contact">{{
+            alert.contactName || '—'
+          }}</span>
+          <span v-if="alert.inboxName" class="aggressive-banner__inbox">
+            · {{ alert.inboxName }}
+          </span>
+          <span v-if="alert.previousStatus" class="aggressive-banner__previous">
+            ·
+            {{
+              $t(
+                `AGGRESSIVE_CONVERSATION_BANNER.FROM_${alert.previousStatus.toUpperCase()}`,
+                alert.previousStatus
+              )
+            }}
+          </span>
+        </button>
+        <button
+          type="button"
+          class="aggressive-banner__close"
+          :aria-label="
+            $t('AGGRESSIVE_CONVERSATION_BANNER.DISMISS_ONE', 'Dispensar')
+          "
+          @click="dismissOne(alert)"
+        >
+          {{ $t('AGGRESSIVE_CONVERSATION_BANNER.CLOSE_ICON', '×') }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@keyframes aggressive-pulse {
+  0%,
+  100% {
+    background-color: #b91c1c;
+  }
+  50% {
+    background-color: #ef4444;
+  }
+}
+
+.aggressive-banner {
+  position: sticky;
+  top: 0;
+  z-index: 9999;
+  width: 100%;
+  background-color: #b91c1c;
+  color: #ffffff;
+  padding: 12px 16px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  animation: aggressive-pulse 1.2s ease-in-out infinite;
+  font-weight: 600;
+}
+
+.aggressive-banner__main {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.aggressive-banner__icon {
+  font-size: 24px;
+  line-height: 1;
+}
+
+.aggressive-banner__title {
+  font-size: 16px;
+  flex: 1;
+}
+
+.aggressive-banner__dismiss-all {
+  background: rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  border-radius: 4px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background 0.15s ease;
+}
+
+.aggressive-banner__dismiss-all:hover {
+  background: rgba(255, 255, 255, 0.35);
+}
+
+.aggressive-banner__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.aggressive-banner__item {
+  display: flex;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.aggressive-banner__open {
+  background: transparent;
+  color: #ffffff;
+  border: none;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.aggressive-banner__open:hover {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.aggressive-banner__contact {
+  font-weight: 700;
+}
+
+.aggressive-banner__inbox,
+.aggressive-banner__previous {
+  opacity: 0.85;
+  font-weight: 400;
+}
+
+.aggressive-banner__close {
+  background: transparent;
+  color: #ffffff;
+  border: none;
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 6px 10px;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  font-weight: 700;
+}
+
+.aggressive-banner__close:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+</style>
diff --git a/app/javascript/dashboard/helper/actionCable.js b/app/javascript/dashboard/helper/actionCable.js
index 78177d563..6713603a8 100644
--- a/app/javascript/dashboard/helper/actionCable.js
+++ b/app/javascript/dashboard/helper/actionCable.js
@@ -1,6 +1,7 @@
 import AuthAPI from '../api/auth';
 import BaseActionCableConnector from '../../shared/helpers/BaseActionCableConnector';
 import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotificationHelper';
+import aggressiveAlert from './aggressiveAlert';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { emitter } from 'shared/helpers/mitt';
 import { useImpersonation } from 'dashboard/composables/useImpersonation';
@@ -113,10 +114,37 @@ class ActionCableConnector extends BaseActionCableConnector {
   onReload = () => window.location.reload();
 
   onStatusChange = data => {
+    this.maybeTriggerAggressiveAlert(data);
     this.app.$store.dispatch('updateConversation', data);
     this.fetchConversationStats();
   };
 
+  // Dispara banner + som + push do SO quando conversa transiciona para 'open'
+  // vindo de outro status (pending/snoozed/resolved). Se já está open, ignora.
+  maybeTriggerAggressiveAlert = data => {
+    if (!data || data.status !== 'open') return;
+    const store = this.app.$store;
+    const existing = store.getters.getConversationById(data.id);
+    const previousStatus = existing ? existing.status : null;
+    // Só alerta se a conversa já existia no store com outro status.
+    // (Conversa nova em 'open' vai por onConversationCreated; não é reabertura.)
+    if (!previousStatus || previousStatus === 'open') return;
+
+    const contactName =
+      data.meta && data.meta.sender ? data.meta.sender.name : '';
+    const inbox = store.getters['inboxes/getInbox']
+      ? store.getters['inboxes/getInbox'](data.inbox_id)
+      : null;
+    const inboxName = inbox && inbox.name ? inbox.name : '';
+
+    aggressiveAlert.trigger({
+      conversationId: data.id,
+      contactName,
+      inboxName,
+      previousStatus,
+    });
+  };
+
   onConversationUpdated = data => {
     this.app.$store.dispatch('updateConversation', data);
     this.fetchConversationStats();
diff --git a/app/javascript/dashboard/helper/aggressiveAlert.js b/app/javascript/dashboard/helper/aggressiveAlert.js
new file mode 100644
index 000000000..77bf2e21f
--- /dev/null
+++ b/app/javascript/dashboard/helper/aggressiveAlert.js
@@ -0,0 +1,159 @@
+import { emitter } from 'shared/helpers/mitt';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+
+const ALERT_AUDIO_PATH = '/audio/dashboard/bell.mp3';
+const VIBRATION_PATTERN = [500, 200, 500, 200, 500];
+const TITLE_FLASH_INTERVAL_MS = 1000;
+const NOTIFICATION_TAG = 'chatwoot-aggressive-alert';
+
+const showOSNotification = (title, body) => {
+  if (typeof window === 'undefined' || !('Notification' in window)) return;
+  if (Notification.permission !== 'granted') return;
+  try {
+    // eslint-disable-next-line no-new
+    new Notification(title, {
+      body,
+      tag: NOTIFICATION_TAG,
+      requireInteraction: true,
+      renotify: true,
+    });
+  } catch (e) {
+    // Safari iOS lança TypeError no construtor; banner visual + som cobrem.
+  }
+};
+
+const vibrateDevice = () => {
+  if (
+    typeof navigator !== 'undefined' &&
+    typeof navigator.vibrate === 'function'
+  ) {
+    navigator.vibrate(VIBRATION_PATTERN);
+  }
+};
+
+class AggressiveAlertManager {
+  constructor() {
+    this.audio = null;
+    this.titleInterval = null;
+    this.originalTitle = typeof document !== 'undefined' ? document.title : '';
+    this.activeConversations = new Map();
+  }
+
+  ensureAudio() {
+    if (this.audio) return;
+    this.audio = new Audio(ALERT_AUDIO_PATH);
+    this.audio.loop = true;
+  }
+
+  playSound() {
+    this.ensureAudio();
+    const playPromise = this.audio.play();
+    if (playPromise && typeof playPromise.catch === 'function') {
+      playPromise.catch(() => {
+        // Autoplay bloqueado pelo browser — banner visual permanece.
+      });
+    }
+  }
+
+  stopSound() {
+    if (!this.audio) return;
+    this.audio.pause();
+    this.audio.currentTime = 0;
+  }
+
+  updateTitleTick(toggle) {
+    const count = this.activeConversations.size;
+    if (count === 0) {
+      document.title = this.originalTitle;
+      return;
+    }
+    document.title = toggle
+      ? `🚨 (${count}) CONVERSA ABERTA`
+      : this.originalTitle;
+  }
+
+  startTitleFlash() {
+    if (this.titleInterval) return;
+    let toggle = false;
+    this.updateTitleTick(true);
+    this.titleInterval = setInterval(() => {
+      toggle = !toggle;
+      this.updateTitleTick(toggle);
+    }, TITLE_FLASH_INTERVAL_MS);
+  }
+
+  stopTitleFlash() {
+    if (this.titleInterval) {
+      clearInterval(this.titleInterval);
+      this.titleInterval = null;
+    }
+    document.title = this.originalTitle;
+  }
+
+  trigger({ conversationId, contactName, inboxName, previousStatus }) {
+    if (!conversationId) return;
+    if (this.activeConversations.has(conversationId)) return;
+
+    this.activeConversations.set(conversationId, {
+      contactName: contactName || '—',
+      inboxName: inboxName || '',
+      previousStatus: previousStatus || '',
+      triggeredAt: Date.now(),
+    });
+
+    this.playSound();
+    showOSNotification(
+      '🚨 Conversa aberta aguardando resposta',
+      `${contactName || 'Cliente'} — ${inboxName || ''}`.trim()
+    );
+    vibrateDevice();
+    this.startTitleFlash();
+
+    emitter.emit(BUS_EVENTS.AGGRESSIVE_ALERT_TRIGGER, {
+      conversationId,
+      contactName,
+      inboxName,
+      previousStatus,
+      total: this.activeConversations.size,
+    });
+  }
+
+  dismiss(conversationId) {
+    if (!this.activeConversations.has(conversationId)) return;
+    this.activeConversations.delete(conversationId);
+
+    if (this.activeConversations.size === 0) {
+      this.stopSound();
+      this.stopTitleFlash();
+    } else {
+      this.updateTitleTick(true);
+    }
+
+    emitter.emit(BUS_EVENTS.AGGRESSIVE_ALERT_DISMISS, {
+      conversationId,
+      total: this.activeConversations.size,
+    });
+  }
+
+  dismissAll() {
+    if (this.activeConversations.size === 0) return;
+    this.activeConversations.clear();
+    this.stopSound();
+    this.stopTitleFlash();
+    emitter.emit(BUS_EVENTS.AGGRESSIVE_ALERT_DISMISS, {
+      conversationId: null,
+      total: 0,
+    });
+  }
+
+  getActiveConversations() {
+    return Array.from(this.activeConversations.entries()).map(([id, data]) => ({
+      id,
+      ...data,
+    }));
+  }
+}
+
+const aggressiveAlert = new AggressiveAlertManager();
+
+export default aggressiveAlert;
diff --git a/app/javascript/dashboard/i18n/locale/en/aggressiveBanner.json b/app/javascript/dashboard/i18n/locale/en/aggressiveBanner.json
new file mode 100644
index 000000000..d24c4f990
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/en/aggressiveBanner.json
@@ -0,0 +1,13 @@
+{
+  "AGGRESSIVE_CONVERSATION_BANNER": {
+    "SINGLE": "Conversation waiting for a response!",
+    "MULTIPLE": "{count} conversations waiting for a response!",
+    "DISMISS_ALL": "Dismiss all",
+    "DISMISS_ONE": "Dismiss",
+    "CLOSE_ICON": "×",
+    "ALERT_ICON": "🚨",
+    "FROM_PENDING": "from pending",
+    "FROM_SNOOZED": "reopened (snoozed)",
+    "FROM_RESOLVED": "reopened (resolved)"
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/en/index.js b/app/javascript/dashboard/i18n/locale/en/index.js
index 93009fc6c..cd37eb56b 100644
--- a/app/javascript/dashboard/i18n/locale/en/index.js
+++ b/app/javascript/dashboard/i18n/locale/en/index.js
@@ -1,4 +1,5 @@
 import advancedFilters from './advancedFilters.json';
+import aggressiveBanner from './aggressiveBanner.json';
 import agentBots from './agentBots.json';
 import agentMgmt from './agentMgmt.json';
 import attributesMgmt from './attributesMgmt.json';
@@ -44,6 +45,7 @@ import yearInReview from './yearInReview.json';
 
 export default {
   ...advancedFilters,
+  ...aggressiveBanner,
   ...agentBots,
   ...agentMgmt,
   ...attributesMgmt,
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/aggressiveBanner.json b/app/javascript/dashboard/i18n/locale/pt_BR/aggressiveBanner.json
new file mode 100644
index 000000000..69bee2174
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/aggressiveBanner.json
@@ -0,0 +1,13 @@
+{
+  "AGGRESSIVE_CONVERSATION_BANNER": {
+    "SINGLE": "Conversa aguardando resposta!",
+    "MULTIPLE": "{count} conversas aguardando resposta!",
+    "DISMISS_ALL": "Dispensar todas",
+    "DISMISS_ONE": "Dispensar",
+    "CLOSE_ICON": "×",
+    "ALERT_ICON": "🚨",
+    "FROM_PENDING": "saiu de pendente",
+    "FROM_SNOOZED": "reaberta (estava adiada)",
+    "FROM_RESOLVED": "reaberta (estava resolvida)"
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/index.js b/app/javascript/dashboard/i18n/locale/pt_BR/index.js
index 5fe57020b..c1598af85 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/index.js
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/index.js
@@ -1,4 +1,5 @@
 import advancedFilters from './advancedFilters.json';
+import aggressiveBanner from './aggressiveBanner.json';
 import agentBots from './agentBots.json';
 import agentMgmt from './agentMgmt.json';
 import attributesMgmt from './attributesMgmt.json';
@@ -40,6 +41,7 @@ import whatsappTemplates from './whatsappTemplates.json';
 
 export default {
   ...advancedFilters,
+  ...aggressiveBanner,
   ...agentBots,
   ...agentMgmt,
   ...attributesMgmt,
diff --git a/app/javascript/shared/constants/busEvents.js b/app/javascript/shared/constants/busEvents.js
index ef8f24155..6b1bb21d7 100644
--- a/app/javascript/shared/constants/busEvents.js
+++ b/app/javascript/shared/constants/busEvents.js
@@ -13,4 +13,6 @@ export const BUS_EVENTS = {
   NEW_CONVERSATION_MODAL: 'newConversationModal',
   INSERT_INTO_RICH_EDITOR: 'insertIntoRichEditor',
   INSERT_INTO_NORMAL_EDITOR: 'insertIntoNormalEditor',
+  AGGRESSIVE_ALERT_TRIGGER: 'AGGRESSIVE_ALERT_TRIGGER',
+  AGGRESSIVE_ALERT_DISMISS: 'AGGRESSIVE_ALERT_DISMISS',
 };