feat: Instagram story replies will display the original story link (#6846)

app/builders/messages/instagram/message_builder.rb

@@ -70,17 +70,28 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
     @messaging[:message][:text]
   end
 
+  def story_reply_attributes
+    message[:reply_to][:story] if message[:reply_to].present? && message[:reply_to][:story].present?
+  end
+
   def build_message
     return if @outgoing_echo && already_sent_from_chatwoot?
     return if message_content.blank? && all_unsupported_files?
 
     @message = conversation.messages.create!(message_params)
+    save_story_id
 
     attachments.each do |attachment|
       process_attachment(attachment)
     end
   end
 
+  def save_story_id
+    return if story_reply_attributes.blank?
+
+    @message.save_story_info(story_reply_attributes)
+  end
+
   def build_conversation
     @contact_inbox ||= contact.contact_inboxes.find_by!(source_id: message_source_id)
     Conversation.create!(conversation_params.merge(

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

@@ -22,6 +22,14 @@
           :bcc="emailHeadAttributes.bcc"
           :is-incoming="isIncoming"
         />
+        <blockquote v-if="storyReply" class="story-reply-quote">
+          <span>{{ $t('CONVERSATION.REPLIED_TO_STORY') }}</span>
+          <bubble-image
+            v-if="!hasStoryError"
+            :url="storyUrl"
+            @error="onStoryLoadError"
+          />
+        </blockquote>
         <bubble-text
           v-if="data.content"
           :message="message"
@@ -79,7 +87,7 @@
           :sender="data.sender"
           :story-sender="storySender"
           :external-error="externalError"
-          :story-id="storyId"
+          :story-id="`${storyId}`"
           :is-a-tweet="isATweet"
           :is-a-whatsapp-channel="isAWhatsAppChannel"
           :has-instagram-story="hasInstagramStory"
@@ -192,6 +200,7 @@ export default {
       hasImageError: false,
       contextMenuPosition: {},
       showBackgroundHighlight: false,
+      hasStoryError: false,
     };
   },
   computed: {
@@ -277,6 +286,12 @@ export default {
     storyId() {
       return this.contentAttributes.story_id || null;
     },
+    storyUrl() {
+      return this.contentAttributes.story_url || null;
+    },
+    storyReply() {
+      return this.storyUrl && this.hasInstagramStory;
+    },
     contentType() {
       const {
         data: { content_type: contentType },
@@ -414,10 +429,12 @@ export default {
   watch: {
     data() {
       this.hasImageError = false;
+      this.hasStoryError = false;
     },
   },
   mounted() {
     this.hasImageError = false;
+    this.hasStoryError = false;
     bus.$on(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL, this.closeContextMenu);
     this.setupHighlightTimer();
   },
@@ -432,6 +449,9 @@ export default {
         const { file_type: fileType } = attachments[0];
         return fileType === type && !this.hasImageError;
       }
+      if (this.storyReply) {
+        return true;
+      }
       return false;
     },
     handleContextMenuClick() {
@@ -443,6 +463,9 @@ export default {
     onImageLoadError() {
       this.hasImageError = true;
     },
+    onStoryLoadError() {
+      this.hasStoryError = true;
+    },
     openContextMenu(e) {
       const shouldSkipContextMenu =
         e.target?.classList.contains('skip-context-menu') ||
@@ -672,7 +695,6 @@ li.right {
   blockquote {
     border-left: var(--space-micro) solid var(--s-75);
     color: var(--s-800);
-    padding: var(--space-smaller) var(--space-small);
     margin: var(--space-smaller) 0;
     padding: var(--space-small) var(--space-small) 0 var(--space-normal);
   }
@@ -704,4 +726,11 @@ li.right {
     }
   }
 }
+
+.story-reply-quote {
+  border-left: var(--space-micro) solid var(--s-75);
+  color: var(--s-600);
+  margin: var(--space-small) var(--space-normal) 0;
+  padding: var(--space-small) var(--space-small) 0 var(--space-small);
+}
 </style>

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

@@ -195,7 +195,7 @@ export default {
         return '';
       }
       const { storySender, storyId } = this;
-      return `https://www.instagram.com/stories/${storySender}/${storyId}`;
+      return `https://www.instagram.com/stories/direct/${storySender}_${storyId}`;
     },
     showStatusIndicators() {
       if ((this.isOutgoing || this.isTemplate) && !this.isPrivate) {

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

@@ -37,6 +37,7 @@
     "UNKNOWN_FILE_TYPE": "Unknown File",
     "SAVE_CONTACT": "Save",
     "UPLOADING_ATTACHMENTS": "Uploading attachments...",
+    "REPLIED_TO_STORY": "Replied to your story",
     "SUCCESS_DELETE_MESSAGE": "Message deleted successfully",
     "FAIL_DELETE_MESSSAGE": "Couldn't delete message! Try again",
     "NO_RESPONSE": "No response",

app/models/message.rb

@@ -198,6 +198,17 @@ class Message < ApplicationRecord
     outgoing? && human_response? && not_created_by_automation? && !private?
   end
 
+  def save_story_info(story_info)
+    self.content_attributes = content_attributes.merge(
+      {
+        story_id: story_info['id'],
+        story_sender: inbox.channel.instagram_id,
+        story_url: story_info['url']
+      }
+    )
+    save!
+  end
+
   private
 
   def ensure_content_type