2019-08-14 09:48:44 +00:00
|
|
|
<template>
|
2019-11-17 07:39:10 +00:00
|
|
|
<li v-if="data.attachment || data.content" :class="alignBubble">
|
2019-08-14 09:48:44 +00:00
|
|
|
<div :class="wrapClass">
|
|
|
|
<p
|
|
|
|
v-tooltip.top-start="sentByMessage"
|
2019-11-17 07:39:10 +00:00
|
|
|
:class="{ bubble: isBubble, 'is-private': isPrivate }"
|
2019-08-14 09:48:44 +00:00
|
|
|
>
|
|
|
|
<bubble-image
|
2019-11-17 07:39:10 +00:00
|
|
|
v-if="data.attachment && data.attachment.file_type === 'image'"
|
2019-08-14 09:48:44 +00:00
|
|
|
:url="data.attachment.data_url"
|
|
|
|
:readable-time="readableTime"
|
|
|
|
/>
|
|
|
|
<bubble-audio
|
2019-11-17 07:39:10 +00:00
|
|
|
v-if="data.attachment && data.attachment.file_type === 'audio'"
|
2019-08-14 09:48:44 +00:00
|
|
|
:url="data.attachment.data_url"
|
|
|
|
:readable-time="readableTime"
|
|
|
|
/>
|
|
|
|
<bubble-map
|
2019-11-17 07:39:10 +00:00
|
|
|
v-if="data.attachment && data.attachment.file_type === 'location'"
|
2019-08-14 09:48:44 +00:00
|
|
|
:lat="data.attachment.coordinates_lat"
|
|
|
|
:lng="data.attachment.coordinates_long"
|
|
|
|
:label="data.attachment.fallback_title"
|
|
|
|
:readable-time="readableTime"
|
|
|
|
/>
|
2019-11-17 07:39:10 +00:00
|
|
|
<i v-if="data.message_type === 2" class="icon ion-person"></i>
|
|
|
|
<bubble-text
|
|
|
|
v-if="data.content"
|
|
|
|
:message="message"
|
|
|
|
:readable-time="readableTime"
|
|
|
|
/>
|
|
|
|
<i
|
|
|
|
v-if="isPrivate"
|
|
|
|
v-tooltip.top-start="toolTipMessage"
|
|
|
|
class="icon ion-android-lock"
|
|
|
|
@mouseenter="isHovered = true"
|
|
|
|
@mouseleave="isHovered = false"
|
|
|
|
></i>
|
2019-08-14 09:48:44 +00:00
|
|
|
</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"> -->
|
|
|
|
</li>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
/* eslint-disable no-named-as-default */
|
|
|
|
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';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
BubbleText,
|
|
|
|
BubbleImage,
|
|
|
|
BubbleMap,
|
|
|
|
BubbleAudio,
|
|
|
|
},
|
|
|
|
mixins: [timeMixin],
|
2019-11-17 07:39:10 +00:00
|
|
|
props: {
|
|
|
|
data: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
2019-08-14 09:48:44 +00:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
isHovered: false,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
message() {
|
|
|
|
const linkifiedMessage = this.linkify(this.data.content);
|
|
|
|
return linkifiedMessage.replace(/\n/g, '<br>');
|
|
|
|
},
|
|
|
|
alignBubble() {
|
|
|
|
return this.data.message_type === 1 ? 'right' : 'left';
|
|
|
|
},
|
|
|
|
readableTime() {
|
|
|
|
return this.messageStamp(this.data.created_at);
|
|
|
|
},
|
|
|
|
isBubble() {
|
|
|
|
return this.data.message_type === 1 || this.data.message_type === 0;
|
|
|
|
},
|
|
|
|
isPrivate() {
|
|
|
|
return this.data.private;
|
|
|
|
},
|
|
|
|
toolTipMessage() {
|
2019-11-17 07:39:10 +00:00
|
|
|
return this.data.private
|
|
|
|
? { content: this.$t('CONVERSATION.VISIBLE_TO_AGENTS'), classes: 'top' }
|
|
|
|
: false;
|
2019-08-14 09:48:44 +00:00
|
|
|
},
|
|
|
|
sentByMessage() {
|
2019-11-17 07:39:10 +00:00
|
|
|
return this.data.message_type === 1 &&
|
|
|
|
!this.isHovered &&
|
|
|
|
this.data.sender !== undefined
|
|
|
|
? { content: `Sent by: ${this.data.sender.name}`, classes: 'top' }
|
|
|
|
: false;
|
2019-08-14 09:48:44 +00:00
|
|
|
},
|
|
|
|
wrapClass() {
|
|
|
|
return {
|
|
|
|
wrap: this.isBubble,
|
|
|
|
'activity-wrap': !this.isBubble,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
getEmojiSVG,
|
|
|
|
linkify(text) {
|
|
|
|
if (!text) return text;
|
|
|
|
const urlRegex = /(https?:\/\/[^\s]+)/g;
|
2019-11-17 07:39:10 +00:00
|
|
|
return text.replace(
|
|
|
|
urlRegex,
|
|
|
|
url => `<a href="${url}" target="_blank">${url}</a>`
|
|
|
|
);
|
2019-08-14 09:48:44 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|