Feature: Support file type messages on widget and dashboard (#659)

- Adds support for file upload

Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>
Co-authored-by: Sojan <sojan@pepalo.com>
This commit is contained in:
Nithin David Thomas 2020-04-02 12:28:38 +05:30 committed by GitHub
parent 0afa5c297f
commit 7fcd2d0e85
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 338 additions and 69 deletions

View file

@ -1,4 +1,5 @@
class Messages::Outgoing::NormalBuilder
include ::FileTypeHelper
attr_reader :message
def initialize(user, conversation, params)
@ -13,7 +14,10 @@ class Messages::Outgoing::NormalBuilder
def perform
@message = @conversation.messages.build(message_params)
if @attachment
@message.attachment = Attachment.new(account_id: message.account_id)
@message.attachment = Attachment.new(
account_id: message.account_id,
file_type: file_type(@attachment[:file]&.content_type)
)
@message.attachment.file.attach(@attachment[:file])
end
@message.save

View file

@ -10,12 +10,8 @@ class Api::V1::Widget::MessagesController < Api::V1::Widget::BaseController
def create
@message = conversation.messages.new(message_params)
build_attachment
@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
def update
@ -28,6 +24,16 @@ class Api::V1::Widget::MessagesController < Api::V1::Widget::BaseController
private
def build_attachment
return if params[:message][:attachment].blank?
@message.attachment = Attachment.new(
account_id: @message.account_id,
file_type: helpers.file_type(params[:message][:attachment][:file]&.content_type)
)
@message.attachment.file.attach(params[:message][:attachment][:file])
end
def set_conversation
@conversation = ::Conversation.create!(conversation_params) if conversation.nil?
end

View file

@ -0,0 +1,14 @@
module FileTypeHelper
def file_type(content_type)
return :image if [
'image/jpeg',
'image/png',
'image/svg+xml',
'image/gif',
'image/tiff',
'image/bmp'
].include?(content_type)
:file
end
end

View file

@ -20,10 +20,9 @@ class MessageApi extends ApiClient {
});
}
sendAttachment([conversationId, { file, file_type }]) {
sendAttachment([conversationId, { file }]) {
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`,

View file

@ -7,18 +7,11 @@
:url="data.attachment.data_url"
:readable-time="readableTime"
/>
<bubble-audio
v-if="data.attachment && data.attachment.file_type === 'audio'"
<bubble-file
v-if="data.attachment && data.attachment.file_type !== 'image'"
:url="data.attachment.data_url"
:readable-time="readableTime"
/>
<bubble-map
v-if="data.attachment && data.attachment.file_type === 'location'"
:lat="data.attachment.coordinates_lat"
:lng="data.attachment.coordinates_long"
:label="data.attachment.fallback_title"
:readable-time="readableTime"
/>
<bubble-text
v-if="data.content"
:message="message"
@ -33,25 +26,25 @@
/>
</p>
</div>
<!-- <img v-if="showSenderData" src="https://chatwoot-staging.s3-us-west-2.amazonaws.com/uploads/avatar/contact/3415/thumb_10418362_10201264050880840_6087258728802054624_n.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAI3KBM2ES3VRHQHPQ%2F20170422%2Fus-west-2%2Fs3%2Faws4_request&amp;X-Amz-Date=20170422T075421Z&amp;X-Amz-Expires=604800&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=8d5ff60e41415515f59ff682b9a4e4c0574d9d9aabfeff1dc5a51087a9b49e03" class="sender--thumbnail"> -->
<!-- <img
src="https://randomuser.me/api/portraits/women/94.jpg"
class="sender--thumbnail"
/> -->
</li>
</template>
<script>
/* eslint-disable no-named-as-default */
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
import getEmojiSVG from '../emoji/utils';
import timeMixin from '../../../mixins/time';
import BubbleText from './bubble/Text';
import BubbleImage from './bubble/Image';
import BubbleMap from './bubble/Map';
import BubbleAudio from './bubble/Audio';
import BubbleFile from './bubble/File';
export default {
components: {
BubbleText,
BubbleImage,
BubbleMap,
BubbleAudio,
BubbleFile,
},
mixins: [timeMixin, messageFormatterMixin],
props: {

View file

@ -24,8 +24,8 @@
@blur="onBlur()"
/>
<file-upload
v-if="!showFileUpload"
accept="image/*"
v-if="showFileUpload"
:size="4096 * 4096"
@input-file="onFileUpload"
>
<i
@ -105,7 +105,6 @@ export default {
message: '',
isPrivate: false,
showEmojiPicker: false,
showFileUpload: false,
showCannedResponsesList: false,
isUploading: {
audio: false,
@ -142,6 +141,9 @@ export default {
}
return 10000;
},
showFileUpload() {
return this.channelType === 'Channel::WebWidget';
},
replyButtonLabel() {
if (this.isPrivate) {
return this.$t('CONVERSATION.REPLYBOX.CREATE');
@ -295,13 +297,7 @@ export default {
onFileUpload(file) {
this.isUploading.image = true;
this.$store
.dispatch('sendAttachment', [
this.currentChat.id,
{
file_type: file.type,
file: file.file,
},
])
.dispatch('sendAttachment', [this.currentChat.id, { file: file.file }])
.then(() => {
this.isUploading.image = false;
this.$emit('scrollToMessage');

View file

@ -0,0 +1,71 @@
<template>
<div class="file message-text__wrap" @click="openLink">
<div class="icon-wrap">
<i class="ion-document-text"></i>
</div>
<div class="meta">
<h5 class="text-block-title">
{{ decodeURI(fileName) }}
</h5>
<a
class="download clear button small"
rel="noreferrer noopener nofollow"
target="_blank"
:href="url"
>
{{ $t('CONVERSATION.DOWNLOAD') }}
</a>
</div>
<span class="time">{{ readableTime }}</span>
</div>
</template>
<script>
export default {
props: ['url', 'readableTime'],
computed: {
fileName() {
const filename = this.url.substring(this.url.lastIndexOf('/') + 1);
return filename;
},
},
methods: {
openLink() {
const win = window.open(this.url, '_blank');
win.focus();
},
},
};
</script>
<style lang="scss" scoped>
@import '~dashboard/assets/scss/variables';
.file {
display: flex;
flex-direction: row;
padding: $space-normal;
cursor: pointer;
.icon-wrap {
font-size: $font-size-giga;
color: $color-woot;
line-height: 1;
margin-left: $space-smaller;
margin-right: $space-slab;
}
.text-block-title {
margin: 0;
}
.button {
padding: 0;
margin: 0;
}
.meta {
padding-right: $space-two;
}
}
</style>

View file

@ -11,6 +11,10 @@ export default {
BUTTON_TEXT: 'Copy',
COPY_SUCCESSFUL: 'Code copied to clipboard successfully',
},
FILE_BUBBLE: {
DOWNLOAD: 'Download',
UPLOADING: 'Uploading...',
},
},
CONFIRM_EMAIL: 'Verifying...',
SETTINGS: {

View file

@ -9,6 +9,7 @@
"CLICK_HERE": "Click here",
"LOADING_INBOXES": "Loading inboxes",
"LOADING_CONVERSATIONS": "Loading Conversations",
"DOWNLOAD": "Download",
"HEADER": {
"RESOLVE_ACTION": "Resolve",
"REOPEN_ACTION": "Reopen",

View file

@ -1,12 +1,20 @@
import Vue from 'vue';
import Vuelidate from 'vuelidate';
import VueI18n from 'vue-i18n';
import store from '../widget/store';
import App from '../widget/App.vue';
import router from '../widget/router';
import ActionCableConnector from '../widget/helpers/actionCable';
import i18n from '../widget/i18n';
Vue.use(VueI18n);
Vue.use(Vuelidate);
Vue.config.lang = 'en';
Object.keys(i18n).forEach(lang => {
Vue.locale(lang, i18n[lang]);
});
Vue.config.productionTip = false;
window.onload = () => {
window.WOOT_WIDGET = new Vue({

View file

@ -15,7 +15,8 @@ class MessageFormatter {
const urlRegex = /(https?:\/\/[^\s]+)/g;
return this.message.replace(
urlRegex,
url => `<a href="${url}" target="_blank">${url}</a>`
url =>
`<a rel="noreferrer noopener nofollow" href="${url}" target="_blank">${url}</a>`
);
}

View file

@ -6,7 +6,7 @@ describe('#MessageFormatter', () => {
const message =
'Chatwoot is an opensource tool\nSee more at https://www.chatwoot.com';
expect(new MessageFormatter(message).formattedMessage).toEqual(
'Chatwoot is an opensource tool<br>See more at <a href="https://www.chatwoot.com" target="_blank">https://www.chatwoot.com</a>'
'Chatwoot is an opensource tool<br>See more at <a rel="noreferrer noopener nofollow" href="https://www.chatwoot.com" target="_blank">https://www.chatwoot.com</a>'
);
});
});

View file

@ -17,8 +17,13 @@
:message-type="messageType"
:message="message.content"
/>
<div v-if="hasImage" class="chat-bubble has-attachment agent">
<div v-if="hasAttachment" class="chat-bubble has-attachment agent">
<file-bubble
v-if="message.attachment && message.attachment.file_type !== 'image'"
:url="message.attachment.data_url"
/>
<image-bubble
v-else
:url="message.attachment.data_url"
:thumb="message.attachment.thumb_url"
:readable-time="readableTime"
@ -35,6 +40,7 @@
import AgentMessageBubble from 'widget/components/AgentMessageBubble';
import timeMixin from 'dashboard/mixins/time';
import ImageBubble from 'widget/components/ImageBubble';
import FileBubble from 'widget/components/FileBubble';
import Thumbnail from 'dashboard/components/widgets/Thumbnail';
import { MESSAGE_TYPE } from 'widget/helpers/constants';
@ -44,6 +50,7 @@ export default {
AgentMessageBubble,
Thumbnail,
ImageBubble,
FileBubble,
},
mixins: [timeMixin],
props: {
@ -53,10 +60,8 @@ export default {
},
},
computed: {
hasImage() {
const { attachment = {} } = this.message;
const { file_type: fileType } = attachment;
return fileType === 'image';
hasAttachment() {
return !!this.message.attachment;
},
showTextBubble() {
const { message } = this;

View file

@ -1,5 +1,5 @@
<template>
<file-upload accept="image/*" @input-file="onFileUpload">
<file-upload :size="4096 * 2048" @input-file="onFileUpload">
<span class="attachment-button ">
<i v-if="!isUploading.image"></i>
<spinner v-if="isUploading" size="small" />
@ -23,12 +23,15 @@ export default {
return { isUploading: false };
},
methods: {
getFileType(fileType) {
return fileType.includes('image') ? 'image' : 'file';
},
async onFileUpload(file) {
this.isUploading = true;
try {
const thumbUrl = window.URL.createObjectURL(file.file);
await this.onAttach({
file_type: file.type,
fileType: this.getFileType(file.type),
file: file.file,
thumbUrl,
});

View file

@ -1,6 +1,6 @@
<template>
<div class="chat-message--input">
<chat-attchment-button :on-attach="onSendAttachment" />
<chat-attachment-button :on-attach="onSendAttachment" />
<ChatInputArea v-model="userInput" :placeholder="placeholder" />
<ChatSendButton
:on-click="handleButtonClick"
@ -13,13 +13,13 @@
<script>
import { mapGetters } from 'vuex';
import ChatSendButton from 'widget/components/ChatSendButton.vue';
import ChatAttchmentButton from 'widget/components/ChatAttachment.vue';
import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
import ChatInputArea from 'widget/components/ChatInputArea.vue';
export default {
name: 'ChatInputWrap',
components: {
ChatAttchmentButton,
ChatAttachmentButton,
ChatSendButton,
ChatInputArea,
},
@ -44,6 +44,13 @@ export default {
userInput: '',
};
},
computed: {
...mapGetters({
widgetColor: 'appConfig/getWidgetColor',
}),
},
destroyed() {
document.removeEventListener('keypress', this.handleEnterKeyPress);
},
@ -51,11 +58,6 @@ export default {
document.addEventListener('keypress', this.handleEnterKeyPress);
},
computed: {
...mapGetters({
widgetColor: 'appConfig/getWidgetColor',
}),
},
methods: {
handleButtonClick() {
if (this.userInput && this.userInput.trim()) {

View file

@ -0,0 +1,93 @@
<template>
<div class="file message-text__wrap" @click="openLink">
<div class="icon-wrap">
<i class="ion-document-text"></i>
</div>
<div class="meta">
<div class="title">
{{ title }}
</div>
<div class="link-wrap">
<a
class="download"
rel="noreferrer noopener nofollow"
target="_blank"
:href="url"
>
{{ $t('COMPONENTS.FILE_BUBBLE.DOWNLOAD') }}
</a>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
url: {
type: String,
default: '',
},
isInProgress: {
type: Boolean,
default: false,
},
},
computed: {
title() {
return this.isInProgress
? this.$t('COMPONENTS.FILE_BUBBLE.UPLOADING')
: decodeURI(this.fileName);
},
fileName() {
const filename = this.url.substring(this.url.lastIndexOf('/') + 1);
return filename;
},
},
methods: {
openLink() {
const win = window.open(this.url, '_blank');
win.focus();
},
},
};
</script>
<style lang="scss" scoped>
@import '~widget/assets/scss/variables.scss';
.file {
display: flex;
flex-direction: row;
padding: $space-one $space-slab;
cursor: pointer;
.icon-wrap {
font-size: $font-size-bigger;
color: $color-woot;
line-height: 1;
margin-left: $space-smaller;
margin-right: $space-small;
}
.title {
font-weight: $font-weight-medium;
font-size: $font-size-small;
margin: 0;
}
.download {
padding: 0;
margin: 0;
font-size: $font-size-small;
text-decoration: none;
}
.link-wrap {
line-height: 1;
}
.meta {
padding-right: $space-smaller;
}
}
</style>

View file

@ -1,5 +1,10 @@
<template>
<a :href="url" target="_blank" class="image">
<a
:href="url"
target="_blank"
rel="noreferrer noopener nofollow"
class="image"
>
<div class="wrap">
<img :src="thumb" alt="Picture message" />
<span class="time">{{ readableTime }}</span>

View file

@ -6,8 +6,14 @@
:message="message.content"
:status="message.status"
/>
<div v-if="hasImage" class="chat-bubble has-attachment user">
<div v-if="hasAttachment" class="chat-bubble has-attachment user">
<file-bubble
v-if="message.attachment && message.attachment.file_type !== 'image'"
:url="message.attachment.data_url"
:is-in-progress="isInProgress"
/>
<image-bubble
v-else
:url="message.attachment.data_url"
:thumb="message.attachment.thumb_url"
:readable-time="readableTime"
@ -20,6 +26,7 @@
<script>
import UserMessageBubble from 'widget/components/UserMessageBubble';
import ImageBubble from 'widget/components/ImageBubble';
import FileBubble from 'widget/components/FileBubble';
import timeMixin from 'dashboard/mixins/time';
export default {
@ -27,6 +34,7 @@ export default {
components: {
UserMessageBubble,
ImageBubble,
FileBubble,
},
mixins: [timeMixin],
props: {
@ -40,11 +48,8 @@ export default {
const { status = '' } = this.message;
return status === 'in_progress';
},
hasImage() {
const { attachment = {} } = this.message;
const { file_type: fileType } = attachment;
return fileType === 'image';
hasAttachment() {
return !!this.message.attachment;
},
showTextBubble() {
const { message } = this;
@ -94,5 +99,14 @@ export default {
padding: 0;
overflow: hidden;
}
.user.has-attachment {
.icon-wrap {
color: $color-white;
}
.download {
opacity: 0.8;
}
}
}
</style>

View file

@ -45,7 +45,6 @@ export default {
display: inline-block;
font-size: $font-size-default;
line-height: 1.5;
max-width: 80%;
padding: $space-small $space-normal;
text-align: left;

View file

@ -0,0 +1,8 @@
export default {
COMPONENTS: {
FILE_BUBBLE: {
DOWNLOAD: 'Download',
UPLOADING: 'Uploading...',
},
},
};

View file

@ -0,0 +1,5 @@
import en from './en';
export default {
en,
};

View file

@ -88,15 +88,16 @@ export const actions = {
},
sendAttachment: async ({ commit }, params) => {
const { attachment } = params;
const { thumbUrl } = attachment;
const attachmentBlob = {
const {
attachment: { thumbUrl, fileType },
} = params;
const attachment = {
thumb_url: thumbUrl,
data_url: thumbUrl,
file_type: 'image',
file_type: fileType,
status: 'in_progress',
};
const tempMessage = createTemporaryMessage({ attachment: attachmentBlob });
const tempMessage = createTemporaryMessage({ attachment });
commit('pushMessageToConversation', tempMessage);
try {
const { data } = await sendAttachmentAPI(params);
@ -158,8 +159,16 @@ export const mutations = {
if (messageInConversation) {
Vue.delete(messagesInbox, tempId);
const newMessage = { ...messageInConversation };
Vue.set(messagesInbox, id, { ...newMessage, id, status });
const { attachment } = messageInConversation;
if (attachment.file_type === 'file') {
attachment.data_url = message.attachment.data_url;
}
Vue.set(messagesInbox, id, {
...messageInConversation,
attachment,
id,
status,
});
}
},

View file

@ -49,7 +49,7 @@ describe('#actions', () => {
getUuid.mockImplementationOnce(() => '1111');
const spy = jest.spyOn(global, 'Date').mockImplementation(() => mockDate);
const thumbUrl = '';
const attachment = { thumbUrl };
const attachment = { thumbUrl, fileType: 'file' };
actions.sendAttachment({ commit }, { attachment });
spy.mockRestore();
@ -62,7 +62,7 @@ describe('#actions', () => {
attachment: {
thumb_url: '',
data_url: '',
file_type: 'image',
file_type: 'file',
status: 'in_progress',
},
});

View file

@ -102,6 +102,10 @@ describe('#mutations', () => {
id: 'rand_id_123',
message_type: 0,
status: 'in_progress',
attachment: {
file: '',
file_type: 'image',
},
},
},
};
@ -109,11 +113,24 @@ describe('#mutations', () => {
id: '1',
content: '',
status: 'sent',
attachment: {
file: '',
file_type: 'image',
},
};
mutations.setMessageStatus(state, { message, tempId: 'rand_id_123' });
expect(state.conversations).toEqual({
1: { id: '1', content: '', message_type: 0, status: 'sent' },
1: {
id: '1',
content: '',
message_type: 0,
status: 'sent',
attachment: {
file: '',
file_type: 'image',
},
},
});
});
});

View file

@ -0,0 +1,10 @@
json.id @message.id
json.content @message.content
json.inbox_id @message.inbox_id
json.conversation_id @message.conversation.display_id
json.message_type @message.message_type_before_type_cast
json.created_at @message.created_at.to_i
json.private @message.private
json.source_id @message.source_id
json.attachment @message.attachment.push_event_data if @message.attachment
json.sender @message.user.push_event_data if @message.user

View file

@ -5,7 +5,7 @@ json.array! @messages do |message|
json.content_type message.content_type
json.content_attributes message.content_attributes
json.created_at message.created_at.to_i
json.conversation_id message. conversation_id
json.conversation_id message.conversation.display_id
json.attachment message.attachment.push_event_data if message.attachment
json.sender message.user.push_event_data if message.user
end

View file

@ -41,6 +41,7 @@ RSpec.describe 'Conversation Messages API', type: :request do
expect(response).to have_http_status(:success)
expect(conversation.messages.last.attachment.file.present?).to eq(true)
expect(conversation.messages.last.attachment.file_type).to eq('image')
end
end

View file

@ -57,6 +57,7 @@ RSpec.describe '/api/v1/widget/messages', type: :request do
expect(json_response['content']).to eq(message_params[:content])
expect(conversation.messages.last.attachment.file.present?).to eq(true)
expect(conversation.messages.last.attachment.file_type).to eq('image')
end
end
end