Feature: Send attachments to widget user (#621)
This commit is contained in:
Nithin David Thomas
committed by
GitHub
GitHub
parent
fe70843fae
commit
f7e5f1fabf
@@ -2,7 +2,7 @@
|
||||
<div class="agent-message">
|
||||
<div class="avatar-wrap">
|
||||
<thumbnail
|
||||
v-if="showAvatar"
|
||||
v-if="message.showAvatar"
|
||||
:src="avatarUrl"
|
||||
size="24px"
|
||||
:username="agentName"
|
||||
@@ -10,13 +10,21 @@
|
||||
</div>
|
||||
<div class="message-wrap">
|
||||
<AgentMessageBubble
|
||||
v-if="showTextBubble"
|
||||
:content-type="contentType"
|
||||
:message-content-attributes="messageContentAttributes"
|
||||
:message-id="messageId"
|
||||
:message-id="message.id"
|
||||
:message-type="messageType"
|
||||
:message="message"
|
||||
:message="message.content"
|
||||
/>
|
||||
<p v-if="showAvatar" class="agent-name">
|
||||
<div v-else class="chat-bubble has-attachment agent">
|
||||
<image-bubble
|
||||
v-if="message.attachment && message.attachment.file_type === 'image'"
|
||||
:url="message.attachment.data_url"
|
||||
:readable-time="readableTime"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="message.showAvatar" class="agent-name">
|
||||
{{ agentName }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -24,43 +32,70 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AgentMessageBubble from 'widget/components/AgentMessageBubble.vue';
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
import AgentMessageBubble from 'widget/components/AgentMessageBubble';
|
||||
import timeMixin from 'dashboard/mixins/time';
|
||||
import ImageBubble from 'widget/components/ImageBubble';
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail';
|
||||
import { MESSAGE_TYPE } from 'widget/helpers/constants';
|
||||
|
||||
export default {
|
||||
name: 'AgentMessage',
|
||||
components: {
|
||||
AgentMessageBubble,
|
||||
Thumbnail,
|
||||
ImageBubble,
|
||||
},
|
||||
mixins: [timeMixin],
|
||||
props: {
|
||||
message: String,
|
||||
avatarUrl: String,
|
||||
agentName: String,
|
||||
showAvatar: Boolean,
|
||||
contentType: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
messageContentAttributes: {
|
||||
message: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
messageType: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
computed: {
|
||||
showTextBubble() {
|
||||
const { message } = this;
|
||||
return !!message.content && !message.attachment;
|
||||
},
|
||||
messageId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
readableTime() {
|
||||
const { created_at: createdAt = '' } = this.message;
|
||||
return this.messageStamp(createdAt);
|
||||
},
|
||||
messageType() {
|
||||
const { message_type: type = 1 } = this.message;
|
||||
return type;
|
||||
},
|
||||
contentType() {
|
||||
const { content_type: type = '' } = this.message;
|
||||
return type;
|
||||
},
|
||||
messageContentAttributes() {
|
||||
const { content_attributes: attribute = {} } = this.message;
|
||||
return attribute;
|
||||
},
|
||||
agentName() {
|
||||
if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
|
||||
return 'Bot';
|
||||
}
|
||||
|
||||
return this.message.sender ? this.message.sender.name : '';
|
||||
},
|
||||
avatarUrl() {
|
||||
if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
|
||||
// eslint-disable-next-line
|
||||
return require('dashboard/assets/images/chatwoot_bot.png');
|
||||
}
|
||||
|
||||
return this.message.sender ? this.message.sender.avatar_url : '';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
.conversation-wrap {
|
||||
.agent-message {
|
||||
align-items: flex-end;
|
||||
@@ -70,18 +105,6 @@ export default {
|
||||
margin: 0 0 $space-micro $space-small;
|
||||
max-width: 88%;
|
||||
|
||||
& + .agent-message {
|
||||
margin-bottom: $space-micro;
|
||||
|
||||
.chat-bubble {
|
||||
border-top-left-radius: $space-smaller;
|
||||
}
|
||||
}
|
||||
|
||||
& + .user-message {
|
||||
margin-top: $space-normal;
|
||||
}
|
||||
|
||||
.avatar-wrap {
|
||||
height: $space-medium;
|
||||
width: $space-medium;
|
||||
@@ -107,5 +130,29 @@ export default {
|
||||
margin: $space-small 0;
|
||||
padding-left: $space-micro;
|
||||
}
|
||||
|
||||
.has-attachment {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
.conversation-wrap {
|
||||
.agent-message {
|
||||
+ .agent-message {
|
||||
margin-bottom: $space-micro;
|
||||
|
||||
.chat-bubble {
|
||||
border-top-left-radius: $space-smaller;
|
||||
}
|
||||
}
|
||||
|
||||
+ .user-message {
|
||||
margin-top: $space-normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,17 +4,7 @@
|
||||
:message="message.content"
|
||||
:status="message.status"
|
||||
/>
|
||||
<AgentMessage
|
||||
v-else
|
||||
:agent-name="agentName"
|
||||
:avatar-url="avatarUrl"
|
||||
:content-type="message.content_type"
|
||||
:message-content-attributes="message.content_attributes"
|
||||
:message-id="message.id"
|
||||
:message-type="message.message_type"
|
||||
:message="message.content"
|
||||
:show-avatar="message.showAvatar"
|
||||
/>
|
||||
<AgentMessage v-else :message="message" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -28,28 +18,15 @@ export default {
|
||||
UserMessage,
|
||||
},
|
||||
props: {
|
||||
message: Object,
|
||||
showAvatar: Boolean,
|
||||
message: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isUserMessage() {
|
||||
return this.message.message_type === MESSAGE_TYPE.INCOMING;
|
||||
},
|
||||
agentName() {
|
||||
if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
|
||||
return 'Bot';
|
||||
}
|
||||
|
||||
return this.message.sender ? this.message.sender.name : '';
|
||||
},
|
||||
avatarUrl() {
|
||||
if (this.message.message_type === MESSAGE_TYPE.TEMPLATE) {
|
||||
// eslint-disable-next-line
|
||||
return require('dashboard/assets/images/chatwoot_bot.png');
|
||||
}
|
||||
|
||||
return this.message.sender ? this.message.sender.avatar_url : '';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
50
app/javascript/widget/components/ImageBubble.vue
Normal file
50
app/javascript/widget/components/ImageBubble.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<a :href="url" target="_blank" class="image message-text__wrap">
|
||||
<img :src="url" alt="Picture message" />
|
||||
<span class="time">{{ readableTime }}</span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['url', 'readableTime'],
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
.image {
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: $font-size-small;
|
||||
bottom: $space-smaller;
|
||||
color: $color-white;
|
||||
position: absolute;
|
||||
right: $space-small;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&::before {
|
||||
$color-black: #000;
|
||||
background-image: linear-gradient(
|
||||
-180deg,
|
||||
transparent 3%,
|
||||
$color-black 70%
|
||||
);
|
||||
bottom: 0;
|
||||
content: '';
|
||||
height: 20%;
|
||||
left: 0;
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user