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:
parent
0afa5c297f
commit
7fcd2d0e85
28 changed files with 338 additions and 69 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
14
app/helpers/file_type_helper.rb
Normal file
14
app/helpers/file_type_helper.rb
Normal 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
|
|
@ -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`,
|
||||
|
|
|
@ -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&X-Amz-Credential=AKIAI3KBM2ES3VRHQHPQ%2F20170422%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20170422T075421Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&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: {
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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>
|
|
@ -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: {
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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>`
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
|
|
|
@ -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()) {
|
||||
|
|
93
app/javascript/widget/components/FileBubble.vue
Normal file
93
app/javascript/widget/components/FileBubble.vue
Normal 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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
8
app/javascript/widget/i18n/en.js
Normal file
8
app/javascript/widget/i18n/en.js
Normal file
|
@ -0,0 +1,8 @@
|
|||
export default {
|
||||
COMPONENTS: {
|
||||
FILE_BUBBLE: {
|
||||
DOWNLOAD: 'Download',
|
||||
UPLOADING: 'Uploading...',
|
||||
},
|
||||
},
|
||||
};
|
5
app/javascript/widget/i18n/index.js
Normal file
5
app/javascript/widget/i18n/index.js
Normal file
|
@ -0,0 +1,5 @@
|
|||
import en from './en';
|
||||
|
||||
export default {
|
||||
en,
|
||||
};
|
|
@ -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,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
});
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
10
app/views/api/v1/widget/messages/create.json.jbuilder
Normal file
10
app/views/api/v1/widget/messages/create.json.jbuilder
Normal 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
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue