Feature: Send attachments to widget user (#621)

2025-11-02 03:57:52 +00:00 · 2020-03-22 15:54:36 +05:30
parent fe70843fae
commit f7e5f1fabf
16 changed files with 317 additions and 92 deletions
--- a/app/builders/messages/outgoing/normal_builder.rb
+++ b/app/builders/messages/outgoing/normal_builder.rb
@@ -7,10 +7,17 @@ class Messages::Outgoing::NormalBuilder
    @conversation = conversation
    @user = user
    @fb_id = params[:fb_id]
+    @attachment = params[:attachment]
  end

  def perform
-    @message = @conversation.messages.create!(message_params)
+    @message = @conversation.messages.build(message_params)
+    if @attachment
+      @message.attachment = Attachment.new(account_id: message.account_id)
+      @message.attachment.file.attach(@attachment[:file])
+    end
+    @message.save
+    @message
  end

  private
--- a/app/controllers/api/v1/widget/messages_controller.rb
+++ b/app/controllers/api/v1/widget/messages_controller.rb
@@ -11,6 +11,10 @@ class Api::V1::Widget::MessagesController < Api::V1::Widget::BaseController
  def create
    @message = conversation.messages.new(message_params)
    @message.save!
+    if params[:message][:attachment].present?
+      @message.attachment = Attachment.new(account_id: @message.account_id)
+      @message.attachment.file.attach(params[:message][:attachment][:file])
+    end
    render json: @message
  end

--- a/app/javascript/dashboard/api/inbox/message.js
+++ b/app/javascript/dashboard/api/inbox/message.js
@@ -19,6 +19,17 @@ class MessageApi extends ApiClient {
      params: { before },
    });
  }
+
+  sendAttachment([conversationId, { file, file_type }]) {
+    const formData = new FormData();
+    formData.append('attachment[file]', file);
+    formData.append('attachment[file_type]', file_type);
+    return axios({
+      method: 'post',
+      url: `${this.url}/${conversationId}/messages`,
+      data: formData,
+    });
+  }
 }

 export default new MessageApi();
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -31,26 +31,36 @@
  }

  .image {
-    @include flex;
-    align-items: flex-end;
-    justify-content: center;
-    text-align: center;
-
-    img {
-      @include padding($space-small);
-      max-height: 30rem;
-      max-width: 20rem;
-    }
+    cursor: pointer;
+    position: relative;

    .time {
-      margin-left: -$space-large;
+      bottom: $space-smaller;
+      color: $color-white;
+      position: absolute;
+      right: $space-small;
      white-space: nowrap;
    }

+    .modal-container {
+      text-align: center;
+    }
+
    .modal-image {
-      max-height: 80%;
      max-width: 80%;
    }
+
+    &::before {
+      $color-black: #000;
+      background-image: linear-gradient(-180deg, transparent 3%, $color-black 70%);
+      bottom: 0;
+      content: '';
+      height: 20%;
+      left: 0;
+      opacity: .8;
+      position: absolute;
+      width: 100%;
+    }
  }

  .map {
--- a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
@@ -47,7 +47,7 @@
      }
    }

-    >.icon {
+    .icon {
      color: $medium-gray;
      cursor: pointer;
      font-size: $font-size-medium;
@@ -58,6 +58,16 @@
      }
    }

+    .file-uploads>label {
+      cursor: pointer;
+    }
+
+    .attachment {
+      cursor: pointer;
+      margin-right: $space-one;
+      padding: 0 $space-small;
+    }
+
    >textarea {
      @include ghost-input();
      @include margin(0);
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -1,10 +1,7 @@
 <template>
  <li v-if="data.attachment || data.content" :class="alignBubble">
    <div :class="wrapClass">
-      <p
-        v-tooltip.top-start="sentByMessage"
-        :class="{ bubble: isBubble, 'is-private': isPrivate }"
-      >
+      <p v-tooltip.top-start="sentByMessage" :class="bubbleClass">
        <bubble-image
          v-if="data.attachment && data.attachment.file_type === 'image'"
          :url="data.attachment.data_url"
@@ -81,6 +78,11 @@ export default {
    isBubble() {
      return [0, 1, 3].includes(this.data.message_type);
    },
+    hasImageAttachment() {
+      const { attachment = {} } = this.data;
+      const { file_type: fileType } = attachment;
+      return fileType === 'image';
+    },
    isPrivate() {
      return this.data.private;
    },
@@ -102,9 +104,30 @@ export default {
        'activity-wrap': !this.isBubble,
      };
    },
+    bubbleClass() {
+      return {
+        bubble: this.isBubble,
+        'is-private': this.isPrivate,
+        'is-image': this.hasImageAttachment,
+      };
+    },
  },
  methods: {
    getEmojiSVG,
  },
 };
 </script>
+<style lang="scss" scoped>
+@import '~dashboard/assets/scss/variables.scss';
+.wrap {
+  .is-image {
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .image {
+    max-width: 32rem;
+    padding: 0;
+  }
+}
+</style>
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -23,6 +23,17 @@
        @click="onClick()"
        @blur="onBlur()"
      />
+      <file-upload
+        v-if="!showFileUpload"
+        accept="image/*"
+        @input-file="onFileUpload"
+      >
+        <i
+          v-if="!isUploading.image"
+          class="icon ion-android-attach attachment"
+        />
+        <woot-spinner v-if="isUploading.image" />
+      </file-upload>
      <i
        class="icon ion-happy-outline"
        :class="{ active: showEmojiPicker }"
@@ -77,6 +88,7 @@
 import { mapGetters } from 'vuex';
 import emojione from 'emojione';
 import { mixin as clickaway } from 'vue-clickaway';
+import FileUpload from 'vue-upload-component';

 import EmojiInput from '../emoji/EmojiInput';
 import CannedResponse from './CannedResponse';
@@ -85,6 +97,7 @@ export default {
  components: {
    EmojiInput,
    CannedResponse,
+    FileUpload,
  },
  mixins: [clickaway],
  data() {
@@ -92,7 +105,13 @@ export default {
      message: '',
      isPrivate: false,
      showEmojiPicker: false,
+      showFileUpload: false,
      showCannedResponsesList: false,
+      isUploading: {
+        audio: false,
+        video: false,
+        image: false,
+      },
    };
  },
  computed: {
@@ -180,21 +199,21 @@ export default {
    isEscape(e) {
      return e.keyCode === 27; // ESCAPE
    },
-    sendMessage() {
+    async sendMessage() {
      const isMessageEmpty = !this.message.replace(/\n/g, '').length;
-      if (isMessageEmpty) {
-        return;
-      }
+      if (isMessageEmpty) return;
+
      if (!this.showCannedResponsesList) {
-        this.$store
-          .dispatch('sendMessage', {
+        try {
+          await this.$store.dispatch('sendMessage', {
            conversationId: this.currentChat.id,
            message: this.message,
            private: this.isPrivate,
-          })
-          .then(() => {
-            this.$emit('scrollToMessage');
          });
+          this.$emit('scrollToMessage');
+        } catch (error) {
+          // Error
+        }
        this.clearMessage();
        this.hideEmojiPicker();
      }
@@ -272,6 +291,26 @@ export default {
        : 'CONVERSATION.FOOTER.MSG_INPUT';
      return placeHolder;
    },
+
+    onFileUpload(file) {
+      this.isUploading.image = true;
+      this.$store
+        .dispatch('sendAttachment', [
+          this.currentChat.id,
+          {
+            file_type: file.type,
+            file: file.file,
+          },
+        ])
+        .then(() => {
+          this.isUploading.image = false;
+          this.$emit('scrollToMessage');
+        })
+        .catch(() => {
+          this.isUploading.image = false;
+          this.$emit('scrollToMessage');
+        });
+    },
  },
 };
 </script>
--- a/app/javascript/dashboard/store/modules/conversations/actions.js
+++ b/app/javascript/dashboard/store/modules/conversations/actions.js
@@ -189,6 +189,15 @@ const actions = {
  setActiveInbox({ commit }, inboxId) {
    commit(types.default.SET_ACTIVE_INBOX, inboxId);
  },
+
+  sendAttachment: async ({ commit }, data) => {
+    try {
+      const response = MessageApi.sendAttachment(data);
+      commit(types.default.SEND_MESSAGE, response.data);
+    } catch (error) {
+      // Handle error
+    }
+  },
 };

 export default actions;
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/app/javascript/widget/components/AgentMessage.vue
@@ -2,7 +2,7 @@
  <div class="agent-message">
    <div class="avatar-wrap">
      <thumbnail
-        v-if="showAvatar"
+        v-if="message.showAvatar"
        :src="avatarUrl"
        size="24px"
        :username="agentName"
@@ -10,13 +10,21 @@
    </div>
    <div class="message-wrap">
      <AgentMessageBubble
+        v-if="showTextBubble"
        :content-type="contentType"
        :message-content-attributes="messageContentAttributes"
-        :message-id="messageId"
+        :message-id="message.id"
        :message-type="messageType"
-        :message="message"
+        :message="message.content"
      />
-      <p v-if="showAvatar" class="agent-name">
+      <div v-else class="chat-bubble has-attachment agent">
+        <image-bubble
+          v-if="message.attachment && message.attachment.file_type === 'image'"
+          :url="message.attachment.data_url"
+          :readable-time="readableTime"
+        />
+      </div>
+      <p v-if="message.showAvatar" class="agent-name">
        {{ agentName }}
      </p>
    </div>
@@ -24,43 +32,70 @@
 </template>

 <script>
-import AgentMessageBubble from 'widget/components/AgentMessageBubble.vue';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import AgentMessageBubble from 'widget/components/AgentMessageBubble';
+import timeMixin from 'dashboard/mixins/time';
+import ImageBubble from 'widget/components/ImageBubble';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail';
+import { MESSAGE_TYPE } from 'widget/helpers/constants';

 export default {
  name: 'AgentMessage',
  components: {
    AgentMessageBubble,
    Thumbnail,
+    ImageBubble,
  },
+  mixins: [timeMixin],
  props: {
-    message: String,
-    avatarUrl: String,
-    agentName: String,
-    showAvatar: Boolean,
-    contentType: {
-      type: String,
-      default: '',
-    },
-    messageContentAttributes: {
+    message: {
      type: Object,
      default: () => {},
    },
-    messageType: {
-      type: Number,
-      default: 1,
+  },
+  computed: {
+    showTextBubble() {
+      const { message } = this;
+      return !!message.content && !message.attachment;
    },
-    messageId: {
-      type: Number,
-      default: 0,
+    readableTime() {
+      const { created_at: createdAt = '' } = this.message;
+      return this.messageStamp(createdAt);
+    },
+    messageType() {
+      const { message_type: type = 1 } = this.message;
+      return type;
+    },
+    contentType() {
+      const { content_type: type = '' } = this.message;
+      return type;
+    },
+    messageContentAttributes() {
+      const { content_attributes: attribute = {} } = this.message;
+      return attribute;
+    },
+    agentName() {
+      if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
+        return 'Bot';
+      }
+
+      return this.message.sender ? this.message.sender.name : '';
+    },
+    avatarUrl() {
+      if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
+        // eslint-disable-next-line
+        return require('dashboard/assets/images/chatwoot_bot.png');
+      }
+
+      return this.message.sender ? this.message.sender.avatar_url : '';
    },
  },
 };
 </script>

 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss">
+<style lang="scss" scoped>
@import '~widget/assets/scss/variables.scss';
+
 .conversation-wrap {
  .agent-message {
    align-items: flex-end;
@@ -70,18 +105,6 @@ export default {
    margin: 0 0 $space-micro $space-small;
    max-width: 88%;

-    & + .agent-message {
-      margin-bottom: $space-micro;
-
-      .chat-bubble {
-        border-top-left-radius: $space-smaller;
-      }
-    }
-
-    & + .user-message {
-      margin-top: $space-normal;
-    }
-
    .avatar-wrap {
      height: $space-medium;
      width: $space-medium;
@@ -107,5 +130,29 @@ export default {
    margin: $space-small 0;
    padding-left: $space-micro;
  }
+
+  .has-attachment {
+    padding: 0;
+    overflow: hidden;
+  }
+}
+</style>
+<style lang="scss">
+@import '~widget/assets/scss/variables.scss';
+
+.conversation-wrap {
+  .agent-message {
+    + .agent-message {
+      margin-bottom: $space-micro;
+
+      .chat-bubble {
+        border-top-left-radius: $space-smaller;
+      }
+    }
+
+    + .user-message {
+      margin-top: $space-normal;
+    }
+  }
 }
 </style>
--- a/app/javascript/widget/components/ChatMessage.vue
+++ b/app/javascript/widget/components/ChatMessage.vue
@@ -4,17 +4,7 @@
    :message="message.content"
    :status="message.status"
  />
-  <AgentMessage
-    v-else
-    :agent-name="agentName"
-    :avatar-url="avatarUrl"
-    :content-type="message.content_type"
-    :message-content-attributes="message.content_attributes"
-    :message-id="message.id"
-    :message-type="message.message_type"
-    :message="message.content"
-    :show-avatar="message.showAvatar"
-  />
+  <AgentMessage v-else :message="message" />
 </template>

 <script>
@@ -28,28 +18,15 @@ export default {
    UserMessage,
  },
  props: {
-    message: Object,
-    showAvatar: Boolean,
+    message: {
+      type: Object,
+      default: () => {},
+    },
  },
  computed: {
    isUserMessage() {
      return this.message.message_type === MESSAGE_TYPE.INCOMING;
    },
-    agentName() {
-      if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
-        return 'Bot';
-      }
-
-      return this.message.sender ? this.message.sender.name : '';
-    },
-    avatarUrl() {
-      if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
-        // eslint-disable-next-line
-        return require('dashboard/assets/images/chatwoot_bot.png');
-      }
-
-      return this.message.sender ? this.message.sender.avatar_url : '';
-    },
  },
 };
 </script>
--- a/app/javascript/widget/components/ImageBubble.vue
+++ b/app/javascript/widget/components/ImageBubble.vue
@@ -0,0 +1,50 @@
+<template>
+  <a :href="url" target="_blank" class="image message-text__wrap">
+    <img :src="url" alt="Picture message" />
+    <span class="time">{{ readableTime }}</span>
+  </a>
+</template>
+
+<script>
+export default {
+  props: ['url', 'readableTime'],
+};
+</script>
+<style lang="scss" scoped>
+@import '~widget/assets/scss/variables.scss';
+
+.image {
+  max-width: 100%;
+  position: relative;
+  display: block;
+
+  img {
+    width: 100%;
+  }
+
+  .time {
+    font-size: $font-size-small;
+    bottom: $space-smaller;
+    color: $color-white;
+    position: absolute;
+    right: $space-small;
+    white-space: nowrap;
+  }
+
+  &::before {
+    $color-black: #000;
+    background-image: linear-gradient(
+      -180deg,
+      transparent 3%,
+      $color-black 70%
+    );
+    bottom: 0;
+    content: '';
+    height: 20%;
+    left: 0;
+    opacity: 0.8;
+    position: absolute;
+    width: 100%;
+  }
+}
+</style>
--- a/app/models/attachment.rb
+++ b/app/models/attachment.rb
@@ -15,8 +15,6 @@
 #  message_id       :integer          not null
 #

-require 'uri'
-require 'open-uri'
 class Attachment < ApplicationRecord
  include Rails.application.routes.url_helpers
  belongs_to :account
@@ -38,7 +36,7 @@ class Attachment < ApplicationRecord
    {
      extension: extension,
      data_url: file_url,
-      thumb_url: file.try(:thumb).try(:url) # will exist only for images
+      thumb_url: thumb_url
    }
  end

@@ -70,4 +68,12 @@ class Attachment < ApplicationRecord
  def file_url
    file.attached? ? url_for(file) : ''
  end
+
+  def thumb_url
+    if file.attached? && file.representable?
+      url_for(file.representation(resize: '250x250'))
+    else
+      ''
+    end
+  end
 end
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
    "vue-router": "~2.2.0",
    "vue-select": "~2.0.0",
    "vue-template-compiler": "^2.6.10",
+    "vue-upload-component": "^2.8.20",
    "vuelidate": "~0.7.5",
    "vuex": "~2.1.1",
    "vuex-router-sync": "~4.1.2"
--- a/spec/controllers/api/v1/accounts/conversations/messages_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/conversations/messages_controller_spec.rb
@@ -30,6 +30,18 @@ RSpec.describe 'Conversation Messages API', type: :request do
        expect(conversation.messages.count).to eq(1)
        expect(conversation.messages.first.content).to eq(params[:message])
      end
+
+      it 'creates a new outgoing message with attachment' do
+        file = fixture_file_upload(Rails.root.join('spec/assets/avatar.png'), 'image/png')
+        params = { message: 'test-message', attachment: { file: file } }
+
+        post api_v1_account_conversation_messages_url(account_id: account.id, conversation_id: conversation.display_id),
+             params: params,
+             headers: agent.create_new_auth_token
+
+        expect(response).to have_http_status(:success)
+        expect(conversation.messages.last.attachment.file.present?).to eq(true)
+      end
    end

    context 'when it is an authenticated agent bot' do
--- a/spec/controllers/api/v1/widget/messages_controller_spec.rb
+++ b/spec/controllers/api/v1/widget/messages_controller_spec.rb
@@ -44,6 +44,20 @@ RSpec.describe '/api/v1/widget/messages', type: :request do
        json_response = JSON.parse(response.body)
        expect(json_response['content']).to eq(message_params[:content])
      end
+
+      it 'creates attachment message in conversation' do
+        file = fixture_file_upload(Rails.root.join('spec/assets/avatar.png'), 'image/png')
+        message_params = { content: 'hello world', timestamp: Time.current, attachment: { file: file } }
+        post api_v1_widget_messages_url,
+             params: { website_token: web_widget.website_token, message: message_params },
+             headers: { 'X-Auth-Token' => token }
+
+        expect(response).to have_http_status(:success)
+        json_response = JSON.parse(response.body)
+        expect(json_response['content']).to eq(message_params[:content])
+
+        expect(conversation.messages.last.attachment.file.present?).to eq(true)
+      end
    end
  end

--- a/yarn.lock
+++ b/yarn.lock
@@ -10630,6 +10630,11 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
  integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==

+vue-upload-component@^2.8.20:
+  version "2.8.20"
+  resolved "https://registry.yarnpkg.com/vue-upload-component/-/vue-upload-component-2.8.20.tgz#60824d3f20f3216dca90d8c86a5c980851b04ea0"
+  integrity sha512-zrnJvULu4rnZe36Ib2/AZrI/h/mmNbUJZ+acZD652PyumzbvjCOQeYHe00sGifTdYjzzS66CwhTT+ubZ2D0Aow==
+
 vue@^2.5.8, vue@^2.6.0:
  version "2.6.11"
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"