feat: Add support for attachments(image and video) in LINE channel (#8425)

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -144,6 +144,7 @@ import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import {
   ALLOWED_FILE_TYPES,
   ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP,
+  ALLOWED_FILE_TYPES_FOR_LINE,
 } from 'shared/constants/messages';
 import VideoCallButton from '../VideoCallButton.vue';
 import AIAssistanceButton from '../AIAssistanceButton.vue';
@@ -270,6 +271,9 @@ export default {
       return this.showFileUpload || this.isNote;
     },
     showAudioRecorderButton() {
+      if (this.isALineChannel) {
+        return false;
+      }
       // Disable audio recorder for safari browser as recording is not supported
       const isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(
         navigator.userAgent
@@ -291,6 +295,9 @@ export default {
       if (this.isATwilioWhatsAppChannel) {
         return ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP;
       }
+      if (this.isALineChannel) {
+        return ALLOWED_FILE_TYPES_FOR_LINE;
+      }
       return ALLOWED_FILE_TYPES;
     },
     enableDragAndDrop() {

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

@@ -392,7 +392,8 @@ export default {
         this.isAPIInbox ||
         this.isAnEmailChannel ||
         this.isASmsInbox ||
-        this.isATelegramChannel
+        this.isATelegramChannel ||
+        this.isALineChannel
       );
     },
     replyButtonLabel() {

app/javascript/shared/constants/messages.js

@@ -55,6 +55,8 @@ export const ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP =
   'audio/mpeg, audio/opus, audio/ogg, audio/amr,' +
   'video/mp4,' +
   'application/pdf,';
+// https://developers.line.biz/en/reference/messaging-api/#image-message, https://developers.line.biz/en/reference/messaging-api/#video-message
+export const ALLOWED_FILE_TYPES_FOR_LINE = 'image/png, image/jpeg,video/mp4';
 
 export const CSAT_RATINGS = [
   {

app/services/line/send_on_line_service.rb

@@ -6,7 +6,8 @@ class Line::SendOnLineService < Base::SendOnChannelService
   end
 
   def perform_reply
-    response = channel.client.push_message(message.conversation.contact_inbox.source_id, [{ type: 'text', text: message.content }])
+    response = channel.client.push_message(message.conversation.contact_inbox.source_id, build_payload)
+
     return if response.blank?
 
     parsed_json = JSON.parse(response.body)
@@ -20,6 +21,37 @@ class Line::SendOnLineService < Base::SendOnChannelService
     end
   end
 
+  def build_payload
+    if message.content && message.attachments.any?
+      [text_message, *attachments]
+    elsif message.content.nil? && message.attachments.any?
+      attachments
+    else
+      text_message
+    end
+  end
+
+  def attachments
+    message.attachments.map do |attachment|
+      # Support only image and video for now, https://developers.line.biz/en/reference/messaging-api/#image-message
+      next unless attachment.file_type == 'image' || attachment.file_type == 'video'
+
+      {
+        type: attachment.file_type,
+        originalContentUrl: attachment.download_url,
+        previewImageUrl: attachment.download_url
+      }
+    end
+  end
+
+  # https://developers.line.biz/en/reference/messaging-api/#text-message
+  def text_message
+    {
+      type: 'text',
+      text: message.content
+    }
+  end
+
   # https://developers.line.biz/en/reference/messaging-api/#error-responses
   def external_error(error)
     # Message containing information about the error. See https://developers.line.biz/en/reference/messaging-api/#error-messages