818c769bb7
* 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>
116 lines
2.6 KiB
Vue
Executable file
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>
|