refactor: handle missing message content

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -38,7 +38,7 @@
           />
         </blockquote>
         <bubble-reply-to
-          v-if="inReplyTo"
+          v-if="inReplyToMessageId"
           :content="inReplyTo.content"
           @click="navigateToMessage"
         />
@@ -285,17 +285,20 @@ export default {
         ) + botMessageContent
       );
     },
+    inReplyToMessageId() {
+      return this.data.content_attributes?.in_reply_to;
+    },
     inReplyTo() {
-      const replyToMessageId = this.data.content_attributes?.in_reply_to;
+      if (!this.inReplyToMessageId) return null;
 
-      if (!replyToMessageId) return null;
-
-      return this.currentChat?.messages.find(message => {
-        if (message.id === replyToMessageId) {
+      const replyTo = this.currentChat?.messages.find(message => {
+        if (message.id === this.inReplyToMessageId) {
           return true;
         }
         return false;
       });
+
+      return replyTo ?? {};
     },
     contextMenuEnabledOptions() {
       return {
@@ -551,7 +554,7 @@ export default {
     navigateToMessage() {
       this.$nextTick(() => {
         bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE, {
-          messageId: this.inReplyTo?.id,
+          messageId: this.inReplyToMessageId,
         });
       });
     },

app/javascript/dashboard/components/widgets/conversation/bubble/ReplyTo.vue

@@ -5,11 +5,13 @@ import { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';
 const { content } = defineProps({
   content: {
     type: String,
-    required: true,
+    default: '',
   },
 });
 
 const cleanedContent = computed(() => extractTextFromMarkdown(content));
+
+const defaultEmptyMessage = this.$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND');
 </script>
 
 <template>
@@ -17,6 +19,9 @@ const cleanedContent = computed(() => extractTextFromMarkdown(content));
     class="p-2 -mx-2 overflow-hidden rounded-md bg-woot-600 line-clamp-3 min-w-[15rem] mb-2 cursor-pointer"
     @click="$emit('click')"
   >
-    {{ cleanedContent }}
+    <template v-if="content">
+      {{ cleanedContent }}
+    </template>
+    <template v-else> {{ defaultEmptyMessage }} </template>
   </div>
 </template>

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -46,6 +46,7 @@
     "NO_RESPONSE": "No response",
     "RATING_TITLE": "Rating",
     "FEEDBACK_TITLE": "Feedback",
+    "REPLY_MESSAGE_NOT_FOUND": "Not available, click to scroll to the message",
     "CARD": {
       "SHOW_LABELS": "Show labels",
       "HIDE_LABELS": "Hide labels"