Chatwoot/app/javascript/widget/components/UserMessage.vue
Sony Mathew 818c769bb7
Chore: Message to support multiple attachments (#730)
* Changes for the message to have multiple attachments
* changed the message association to attachments from has_one to has_many
* changed all the references of this association in building and fetching to reflect this change

* Added number of attachments validation to the message model

* Modified the backend responses and endpoints to reflect multiple attachment support (#737)

* Changing the frontend components for multiple attachments
* changed the request structure to reflect the multiple attachment structures
* changed the message bubbles to support multiple attachments
* bugfix: agent side attachment was not showing because of a missing await
* broken message was shown because of the store filtering
* Added documentation for ImageMagick

* spec fixes

* refactored code to reflect more apt namings

* Added updated message listener for the dashboard (#727)
* Added the publishing for message updated event
* Implemented the listener for dashboard

Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>
2020-04-17 21:15:20 +05:30

116 lines
2.6 KiB
Vue
Executable file

<template>
<div class="user-message">
<div class="message-wrap" :class="{ 'in-progress': isInProgress }">
<UserMessageBubble
v-if="showTextBubble"
:message="message.content"
:status="message.status"
/>
<div v-if="hasAttachments" class="chat-bubble has-attachment user">
<div v-for="attachment in message.attachments" :key="attachment.id">
<file-bubble
v-if="attachment.file_type !== 'image'"
:url="attachment.data_url"
:is-in-progress="isInProgress"
/>
<image-bubble
v-else
:url="attachment.data_url"
:thumb="attachment.thumb_url"
:readable-time="readableTime"
/>
</div>
</div>
</div>
</div>
</template>
<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 {
name: 'UserMessage',
components: {
UserMessageBubble,
ImageBubble,
FileBubble,
},
mixins: [timeMixin],
props: {
message: {
type: Object,
default: () => {},
},
},
computed: {
isInProgress() {
const { status = '' } = this.message;
return status === 'in_progress';
},
hasAttachments() {
return !!(
this.message.attachments && this.message.attachments.length > 0
);
},
showTextBubble() {
const { message } = this;
return !!message.content;
},
readableTime() {
const { created_at: createdAt = '' } = this.message;
return this.messageStamp(createdAt);
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
@import '~widget/assets/scss/variables.scss';
.conversation-wrap {
.user-message {
align-items: flex-end;
display: flex;
flex-direction: row;
justify-content: flex-end;
margin: 0 $space-smaller $space-micro auto;
max-width: 85%;
text-align: right;
& + .user-message {
margin-bottom: $space-micro;
.chat-bubble {
border-top-right-radius: $space-smaller;
}
}
& + .agent-message {
margin-top: $space-normal;
margin-bottom: $space-micro;
}
.message-wrap {
margin-right: $space-small;
}
.in-progress {
opacity: 0.6;
}
}
.has-attachment {
padding: 0;
overflow: hidden;
}
.user.has-attachment {
.icon-wrap {
color: $color-white;
}
.download {
opacity: 0.8;
}
}
}
</style>