From 9a05ff524758b051c05568e01869a2884a4c7310 Mon Sep 17 00:00:00 2001
From: "Cayo P. R. Oliveira" <cayo@fazer.ai>
Date: Thu, 19 Mar 2026 22:35:04 -0300
Subject: [PATCH] feat: find scheduled message (#237)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(scheduled-messages): scroll to sent message from sidebar

- Expose message_id in JBuilder serialization and push_event_data
- Add HIGHLIGHT_MESSAGE bus event for in-page message highlighting
- Add 'Go to message' button on sent scheduled messages in sidebar
- Enhance onScrollToMessage to fetch messages around target when not in DOM
- Extend Message.vue highlight to work with bus events (not just route query)
- Add i18n keys for EN and pt-BR

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* refactor(scheduled-messages): make sent card clickable instead of button

Replace the 'Go to message' button with a clickable card. The entire
sent scheduled message card now has cursor-pointer, hover highlight,
and a tooltip — clicking anywhere on it scrolls to the message.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix(scheduled-messages): address PR review feedback

- Use camelCase value for HIGHLIGHT_MESSAGE bus event ('highlightMessage')
- Show toast alert when message not found after fetch or on fetch error
- Use the MESSAGE_NOT_FOUND i18n key that was previously unused

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix(scheduled-messages): use messageId query param for find message

Replace direct bus event emission with route navigation using
?messageId= query param, reusing the same proven mechanism used by
search results and copy-message-link.

Changes:
- ScheduledMessageItem: router.replace with ?messageId= instead of
  emitting SCROLL_TO_MESSAGE directly
- ConversationView: handle ?messageId= on same-conversation (was
  previously skipped), fetch messages around target and scroll
- MessagesView: clean up ?messageId= from URL after scroll/error

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix(scheduled-messages): add toast feedback for find message

Show a persistent "Searching for message..." toast while fetching,
auto-dismissed on success. Show "Message not found" error toast if
the message cannot be located.

Uses usePendingAlert for the loading state in both ConversationView
(initial fetch) and MessagesView (fallback fetch).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* fix: prevent scroll overshoot when navigating to message

Remove the immediate fetchPreviousMessages() call after
scrollIntoView({ behavior: smooth }). The fetch was prepending
messages above the target while the smooth scroll animation was
still running, shifting the DOM and causing the scroll to stop
short of the target message. The scroll event handler will
naturally trigger message loading when the user scrolls up later.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* chore(scheduled-messages): remove redundant clearMessageIdFromRoute calls

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../components/ScheduledMessageItem.vue       | 29 +++++++++-
 .../components-next/message/Message.vue       | 20 ++++++-
 .../widgets/conversation/MessagesView.vue     | 33 ++++++++++-
 .../i18n/locale/en/conversation.json          |  5 +-
 .../i18n/locale/pt_BR/conversation.json       |  5 +-
 .../conversation/ConversationView.vue         | 55 +++++++++++++++----
 app/javascript/shared/constants/busEvents.js  |  1 +
 app/models/scheduled_message.rb               |  1 +
 .../models/_scheduled_message.json.jbuilder   |  1 +
 9 files changed, 133 insertions(+), 17 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ScheduledMessageItem.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ScheduledMessageItem.vue
index 7cb071ba0..2d1df490a 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ScheduledMessageItem.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ScheduledMessageItem.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
 import { useToggle } from '@vueuse/core';
 import { fromUnixTime } from 'date-fns';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
@@ -38,6 +39,8 @@ const [isExpanded, toggleExpanded] = useToggle();
 const showToggle = ref(false);
 const { t, locale } = useI18n();
 const { formatMessage } = useMessageFormatter();
+const route = useRoute();
+const router = useRouter();
 
 const statusConfig = {
   draft: {
@@ -150,6 +153,21 @@ const checkOverflow = () => {
 const onEdit = () => emit('edit', props.scheduledMessage);
 const onDelete = () => emit('delete', props.scheduledMessage);
 
+const canScrollToMessage = computed(
+  () =>
+    props.scheduledMessage?.status === 'sent' &&
+    Boolean(props.scheduledMessage?.message_id)
+);
+
+const scrollToMessage = () => {
+  if (!canScrollToMessage.value) return;
+  const messageId = props.scheduledMessage.message_id;
+  router.replace({
+    ...route,
+    query: { ...route.query, messageId },
+  });
+};
+
 onMounted(() => {
   checkOverflow();
 });
@@ -161,7 +179,16 @@ watch(previewContent, () => {
 
 <template>
   <div
-    class="flex flex-col gap-3 border-b border-n-strong py-3 group/scheduled"
+    class="flex flex-col gap-3 border-b border-n-strong py-3 group/scheduled rounded-md transition-colors"
+    :class="{
+      'cursor-pointer hover:bg-n-alpha-1': canScrollToMessage,
+    }"
+    :title="
+      canScrollToMessage
+        ? t('SCHEDULED_MESSAGES.ITEM.GO_TO_MESSAGE')
+        : undefined
+    "
+    @click="scrollToMessage"
   >
     <div class="flex items-center gap-3">
       <Avatar
diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index fe0346451..e51e52745 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed, ref, toRefs } from 'vue';
+import { onMounted, onUnmounted, computed, ref, toRefs } from 'vue';
 import { useTimeoutFn } from '@vueuse/core';
 import { provideMessageContext } from './provider.js';
 import { useTrack } from 'dashboard/composables';
@@ -579,7 +579,23 @@ const setupHighlightTimer = () => {
   }, HIGHLIGHT_TIMER);
 };
 
-onMounted(setupHighlightTimer);
+const HIGHLIGHT_DURATION = 1000;
+const onHighlightMessage = ({ messageId } = {}) => {
+  if (Number(messageId) !== Number(props.id)) return;
+  showBackgroundHighlight.value = true;
+  useTimeoutFn(() => {
+    showBackgroundHighlight.value = false;
+  }, HIGHLIGHT_DURATION);
+};
+
+onMounted(() => {
+  setupHighlightTimer();
+  emitter.on(BUS_EVENTS.HIGHLIGHT_MESSAGE, onHighlightMessage);
+});
+
+onUnmounted(() => {
+  emitter.off(BUS_EVENTS.HIGHLIGHT_MESSAGE, onHighlightMessage);
+});
 
 provideMessageContext({
   ...toRefs(props),
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 4d6d851d8..1951c9dad 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -5,7 +5,7 @@ import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { useLabelSuggestions } from 'dashboard/composables/useLabelSuggestions';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 import { useAdmin } from 'dashboard/composables/useAdmin';
-import { useAlert } from 'dashboard/composables';
+import { useAlert, usePendingAlert } from 'dashboard/composables';
 
 // components
 import ReplyBox from './ReplyBox.vue';
@@ -425,13 +425,42 @@ export default {
         if (messageElement) {
           this.isProgrammaticScroll = true;
           messageElement.scrollIntoView({ behavior: 'smooth' });
-          this.fetchPreviousMessages();
+          if (messageId) {
+            emitter.emit(BUS_EVENTS.HIGHLIGHT_MESSAGE, { messageId });
+          }
+        } else if (messageId) {
+          this.fetchAndScrollToMessage(messageId);
         } else {
           this.scrollToBottom();
         }
       });
       this.makeMessagesRead();
     },
+    async fetchAndScrollToMessage(messageId) {
+      const dismissSearch = usePendingAlert(
+        this.$t('SCHEDULED_MESSAGES.ITEM.SEARCHING_MESSAGE')
+      );
+      try {
+        await this.$store.dispatch('fetchPreviousMessages', {
+          conversationId: this.currentChat.id,
+          after: messageId,
+        });
+        this.$nextTick(() => {
+          dismissSearch();
+          const messageElement = document.getElementById('message' + messageId);
+          if (messageElement) {
+            this.isProgrammaticScroll = true;
+            messageElement.scrollIntoView({ behavior: 'smooth' });
+            emitter.emit(BUS_EVENTS.HIGHLIGHT_MESSAGE, { messageId });
+          } else {
+            useAlert(this.$t('SCHEDULED_MESSAGES.ITEM.MESSAGE_NOT_FOUND'));
+          }
+        });
+      } catch {
+        dismissSearch();
+        useAlert(this.$t('SCHEDULED_MESSAGES.ITEM.MESSAGE_NOT_FOUND'));
+      }
+    },
     addScrollListener() {
       this.conversationPanel = this.$el.querySelector('.conversation-panel');
       this.setScrollParams();
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 9183a096a..e7f35d90f 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -435,7 +435,10 @@
       "ATTACHMENT_LABEL": "Attachment: {filename}",
       "EMPTY_PREVIEW": "No content",
       "EXPAND": "Expand",
-      "COLLAPSE": "Collapse"
+      "COLLAPSE": "Collapse",
+      "GO_TO_MESSAGE": "Go to message",
+      "SEARCHING_MESSAGE": "Searching for message...",
+      "MESSAGE_NOT_FOUND": "The linked message was not found. It may have been deleted."
     },
     "MODAL": {
       "TITLE_NEW": "Schedule a message",
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json b/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
index f1fcce9f1..a12ff0264 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
@@ -424,7 +424,10 @@
       "ATTACHMENT_LABEL": "Anexo: {filename}",
       "EMPTY_PREVIEW": "Sem conteúdo",
       "EXPAND": "Expandir",
-      "COLLAPSE": "Recolher"
+      "COLLAPSE": "Recolher",
+      "GO_TO_MESSAGE": "Ir para a mensagem",
+      "SEARCHING_MESSAGE": "Buscando mensagem...",
+      "MESSAGE_NOT_FOUND": "A mensagem vinculada não foi encontrada. Ela pode ter sido excluída."
     },
     "MODAL": {
       "TITLE_NEW": "Agendar mensagem",
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index a1534a772..8140a9453 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAccount } from 'dashboard/composables/useAccount';
+import { usePendingAlert } from 'dashboard/composables';
 import ChatList from '../../../components/ChatList.vue';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox.vue';
 import wootConstants from 'dashboard/constants/globals';
@@ -165,25 +166,59 @@ export default {
         const selectedConversation = this.findConversation();
         // If conversation doesn't exist or selected conversation is same as the active
         // conversation, don't set active conversation.
-        if (
-          !selectedConversation ||
-          selectedConversation.id === this.currentChat.id
-        ) {
+        if (!selectedConversation) {
           return;
         }
+
         const { messageId } = this.$route.query;
-        this.$store
-          .dispatch('setActiveChat', {
+
+        // Same conversation but new messageId — fetch around that message
+        if (selectedConversation.id === this.currentChat.id) {
+          if (messageId) {
+            this.scrollToMessageById(messageId);
+          }
+          return;
+        }
+
+        if (messageId) {
+          const dismissSearch = usePendingAlert(
+            this.$t('SCHEDULED_MESSAGES.ITEM.SEARCHING_MESSAGE')
+          );
+          this.$store
+            .dispatch('setActiveChat', {
+              data: selectedConversation,
+              after: messageId,
+            })
+            .then(() => {
+              dismissSearch();
+              emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE, { messageId });
+            });
+        } else {
+          this.$store.dispatch('setActiveChat', {
             data: selectedConversation,
-            after: messageId,
-          })
-          .then(() => {
-            emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE, { messageId });
           });
+        }
       } else {
         this.$store.dispatch('clearSelectedState');
       }
     },
+    async scrollToMessageById(messageId) {
+      const dismissSearch = usePendingAlert(
+        this.$t('SCHEDULED_MESSAGES.ITEM.SEARCHING_MESSAGE')
+      );
+      this.$store.commit('CLEAR_ALL_MESSAGES_LOADED', this.currentChat.id);
+      try {
+        await this.$store.dispatch('fetchPreviousMessages', {
+          conversationId: this.currentChat.id,
+          after: messageId,
+          before: this.currentChat.messages?.[0]?.id,
+        });
+      } catch {
+        // ignore fetch error — scroll handler will show alert if message not found
+      }
+      dismissSearch();
+      emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE, { messageId });
+    },
     onSearch() {
       this.showSearchModal = true;
     },
diff --git a/app/javascript/shared/constants/busEvents.js b/app/javascript/shared/constants/busEvents.js
index 21ead3817..85ee48c10 100644
--- a/app/javascript/shared/constants/busEvents.js
+++ b/app/javascript/shared/constants/busEvents.js
@@ -3,6 +3,7 @@ export const BUS_EVENTS = {
   START_NEW_CONVERSATION: 'START_NEW_CONVERSATION',
   FOCUS_CUSTOM_ATTRIBUTE: 'FOCUS_CUSTOM_ATTRIBUTE',
   SCROLL_TO_MESSAGE: 'SCROLL_TO_MESSAGE',
+  HIGHLIGHT_MESSAGE: 'highlightMessage',
   MESSAGE_SENT: 'MESSAGE_SENT',
   ON_MESSAGE_LIST_SCROLL: 'ON_MESSAGE_LIST_SCROLL',
   WEBSOCKET_DISCONNECT: 'WEBSOCKET_DISCONNECT',
diff --git a/app/models/scheduled_message.rb b/app/models/scheduled_message.rb
index b6de61c7b..1e9a6c559 100644
--- a/app/models/scheduled_message.rb
+++ b/app/models/scheduled_message.rb
@@ -77,6 +77,7 @@ class ScheduledMessage < ApplicationRecord
       template_params: template_params,
       author_id: author_id,
       author_type: author_type,
+      message_id: message_id,
       created_at: created_at.to_i,
       updated_at: updated_at.to_i
     }
diff --git a/app/views/api/v1/models/_scheduled_message.json.jbuilder b/app/views/api/v1/models/_scheduled_message.json.jbuilder
index 49480bfd4..693c4fbfc 100644
--- a/app/views/api/v1/models/_scheduled_message.json.jbuilder
+++ b/app/views/api/v1/models/_scheduled_message.json.jbuilder
@@ -8,6 +8,7 @@ json.scheduled_at scheduled_message.scheduled_at&.to_i
 json.template_params scheduled_message.template_params
 json.author_id scheduled_message.author_id
 json.author_type scheduled_message.author_type
+json.message_id scheduled_message.message_id
 json.created_at scheduled_message.created_at.to_i
 json.updated_at scheduled_message.updated_at.to_i