From 8e2b32920246e6dd5dfa34cdd20fada53479da5d Mon Sep 17 00:00:00 2001 From: Sojan Jose Date: Wed, 24 Jul 2024 12:58:12 -0700 Subject: [PATCH] feat: Render instagram reels in Chatwoot (#9829) - Previously we were ignoring the reels shared over Instagram messages. This PR will render the reels with in Chatwoot. followup : we need to render reels in a better interface so that it is clearly denoted to the user that its an Instagram reel --- .../messages/messenger/message_builder.rb | 2 +- .../widgets/conversation/Message.vue | 4 ++- .../conversation/bubble/ImageAudioVideo.vue | 6 +++- .../conversation/components/GalleryView.vue | 6 +++- app/models/attachment.rb | 2 +- .../instagram/message_builder_spec.rb | 22 ++++++++++++ .../instagram_message_create_event.rb | 36 +++++++++++++++++++ 7 files changed, 73 insertions(+), 5 deletions(-) diff --git a/app/builders/messages/messenger/message_builder.rb b/app/builders/messages/messenger/message_builder.rb index 0739829aa..f01a236c9 100644 --- a/app/builders/messages/messenger/message_builder.rb +++ b/app/builders/messages/messenger/message_builder.rb @@ -27,7 +27,7 @@ class Messages::Messenger::MessageBuilder file_type = attachment['type'].to_sym params = { file_type: file_type, account_id: @message.account_id } - if [:image, :file, :audio, :video, :share, :story_mention].include? file_type + if [:image, :file, :audio, :video, :share, :story_mention, :ig_reel].include? file_type params.merge!(file_type_params(attachment)) elsif file_type == :location params.merge!(location_params(attachment)) diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue index dca0c48fe..b7b578cee 100644 --- a/app/javascript/dashboard/components/widgets/conversation/Message.vue +++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue @@ -501,7 +501,9 @@ export default { }, methods: { isAttachmentImageVideoAudio(fileType) { - return ['image', 'audio', 'video', 'story_mention'].includes(fileType); + return ['image', 'audio', 'video', 'story_mention', 'ig_reel'].includes( + fileType + ); }, hasMediaAttachment(type) { if (this.hasAttachments && this.data.attachments.length > 0) { diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue index 41e207cbf..b98953341 100644 --- a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue +++ b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue @@ -40,6 +40,7 @@ const ALLOWED_FILE_TYPES = { IMAGE: 'image', VIDEO: 'video', AUDIO: 'audio', + IG_REEL: 'ig_reel', }; export default { @@ -66,7 +67,10 @@ export default { return this.attachment.file_type === ALLOWED_FILE_TYPES.IMAGE; }, isVideo() { - return this.attachment.file_type === ALLOWED_FILE_TYPES.VIDEO; + return ( + this.attachment.file_type === ALLOWED_FILE_TYPES.VIDEO || + this.attachment.file_type === ALLOWED_FILE_TYPES.IG_REEL + ); }, isAudio() { return this.attachment.file_type === ALLOWED_FILE_TYPES.AUDIO; diff --git a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue index 8684134ca..abb31f8fc 100644 --- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue +++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue @@ -189,6 +189,7 @@ import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue'; const ALLOWED_FILE_TYPES = { IMAGE: 'image', VIDEO: 'video', + IG_REEL: 'ig_reel', AUDIO: 'audio', }; @@ -242,7 +243,10 @@ export default { return this.activeFileType === ALLOWED_FILE_TYPES.IMAGE; }, isVideo() { - return this.activeFileType === ALLOWED_FILE_TYPES.VIDEO; + return ( + this.activeFileType === ALLOWED_FILE_TYPES.VIDEO || + this.activeFileType === ALLOWED_FILE_TYPES.IG_REEL + ); }, isAudio() { return this.activeFileType === ALLOWED_FILE_TYPES.AUDIO; diff --git a/app/models/attachment.rb b/app/models/attachment.rb index 1fb93c51a..78f77bcf6 100644 --- a/app/models/attachment.rb +++ b/app/models/attachment.rb @@ -39,7 +39,7 @@ class Attachment < ApplicationRecord validate :acceptable_file validates :external_url, length: { maximum: Limits::URL_LENGTH_LIMIT } enum file_type: { :image => 0, :audio => 1, :video => 2, :file => 3, :location => 4, :fallback => 5, :share => 6, :story_mention => 7, - :contact => 8 } + :contact => 8, :ig_reel => 9 } def push_event_data return unless file_type diff --git a/spec/builders/messages/instagram/message_builder_spec.rb b/spec/builders/messages/instagram/message_builder_spec.rb index 3db393dab..19631765a 100644 --- a/spec/builders/messages/instagram/message_builder_spec.rb +++ b/spec/builders/messages/instagram/message_builder_spec.rb @@ -13,6 +13,7 @@ describe Messages::Instagram::MessageBuilder do let!(:instagram_inbox) { create(:inbox, channel: instagram_channel, account: account, greeting_enabled: false) } let!(:dm_params) { build(:instagram_message_create_event).with_indifferent_access } let!(:story_mention_params) { build(:instagram_story_mention_event).with_indifferent_access } + let!(:shared_reel_params) { build(:instagram_shared_reel_event).with_indifferent_access } let!(:instagram_story_reply_event) { build(:instagram_story_reply_event).with_indifferent_access } let!(:instagram_message_reply_event) { build(:instagram_message_reply_event).with_indifferent_access } let(:fb_object) { double } @@ -79,6 +80,27 @@ describe Messages::Instagram::MessageBuilder do expect(instagram_inbox.messages.count).to be 1 end + it 'creates message for shared reel' do + allow(Koala::Facebook::API).to receive(:new).and_return(fb_object) + allow(fb_object).to receive(:get_object).and_return( + { + name: 'Jane', + id: 'Sender-id-1', + account_id: instagram_inbox.account_id, + profile_pic: 'https://chatwoot-assets.local/sample.png' + }.with_indifferent_access + ) + messaging = shared_reel_params[:entry][0]['messaging'][0] + contact_inbox + described_class.new(messaging, instagram_inbox).perform + + message = instagram_channel.inbox.messages.first + expect(message.attachments.first.file_type).to eq('ig_reel') + expect(message.attachments.first.external_url).to eq( + shared_reel_params[:entry][0]['messaging'][0]['message']['attachments'][0]['payload']['url'] + ) + end + it 'creates message with for reply with story id' do allow(Koala::Facebook::API).to receive(:new).and_return(fb_object) allow(fb_object).to receive(:get_object).and_return( diff --git a/spec/factories/instagram/instagram_message_create_event.rb b/spec/factories/instagram/instagram_message_create_event.rb index 00ca91e23..76ecb37dc 100644 --- a/spec/factories/instagram/instagram_message_create_event.rb +++ b/spec/factories/instagram/instagram_message_create_event.rb @@ -204,6 +204,42 @@ FactoryBot.define do initialize_with { attributes } end + factory :instagram_shared_reel_event, class: Hash do + entry do + [ + { + 'id': 'instagram-message-id-1234', + 'time': '2021-09-08T06:34:04+0000', + 'messaging': [ + { + 'sender': { + 'id': 'Sender-id-1' + }, + 'recipient': { + 'id': 'chatwoot-app-user-id-1' + }, + 'timestamp': '2021-09-08T06:34:04+0000', + 'message': { + 'mid': 'message-id-1', + 'attachments': [ + { + 'type': 'ig_reel', + 'payload': { + 'reel_video_id': '1234', + 'title': 'Reel title', + 'url': 'https://www.example.com/test.jpeg' + } + } + ] + } + } + ] + } + ] + end + initialize_with { attributes } + end + factory :instagram_story_mention_event, class: Hash do entry do [