feat: find scheduled message (#237)

* 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>
2026-03-19 22:35:04 -03:00 · 2026-03-19 22:35:04 -03:00 · 9a05ff5247
commit 9a05ff5247
parent a996b920e8
9 changed files with 133 additions and 17 deletions
--- 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
--- 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),
--- 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();
--- 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",
--- 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",
--- 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;
    },
--- 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',
--- 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
    }
--- 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