fix: Resolve bot name if sender value is empty (#2283)
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
parent
10f3d321de
commit
1290e32150
2 changed files with 24 additions and 12 deletions
|
@ -6,7 +6,7 @@
|
||||||
:src="avatarUrl"
|
:src="avatarUrl"
|
||||||
size="20px"
|
size="20px"
|
||||||
:username="agentName"
|
:username="agentName"
|
||||||
:status="sender.availability_status"
|
:status="availabilityStatus"
|
||||||
/>
|
/>
|
||||||
<span class="agent--name">{{ agentName }}</span>
|
<span class="agent--name">{{ agentName }}</span>
|
||||||
<span class="company--name"> {{ companyName }}</span>
|
<span class="company--name"> {{ companyName }}</span>
|
||||||
|
@ -46,34 +46,45 @@ export default {
|
||||||
}`;
|
}`;
|
||||||
},
|
},
|
||||||
avatarUrl() {
|
avatarUrl() {
|
||||||
const { avatar_url: avatarUrl } = this.sender;
|
|
||||||
// eslint-disable-next-line
|
// eslint-disable-next-line
|
||||||
const BotImage = require('dashboard/assets/images/chatwoot_bot.png');
|
const BotImage = require('dashboard/assets/images/chatwoot_bot.png');
|
||||||
const displayImage = this.useInboxAvatarForBot
|
const displayImage = this.useInboxAvatarForBot
|
||||||
? this.inboxAvatarUrl
|
? this.inboxAvatarUrl
|
||||||
: BotImage;
|
: BotImage;
|
||||||
return !isEmptyObject(this.sender) ? avatarUrl : displayImage;
|
if (this.isSenderExist(this.sender)) {
|
||||||
|
const { avatar_url: avatarUrl } = this.sender;
|
||||||
|
return avatarUrl;
|
||||||
|
}
|
||||||
|
return displayImage;
|
||||||
},
|
},
|
||||||
agentName() {
|
agentName() {
|
||||||
const { available_name: availableName, name } = this.sender;
|
if (this.isSenderExist(this.sender)) {
|
||||||
if (!isEmptyObject(this.sender)) {
|
const { available_name: availableName, name } = this.sender;
|
||||||
return availableName || name;
|
return availableName || name;
|
||||||
}
|
}
|
||||||
return this.$t('UNREAD_VIEW.BOT');
|
return this.$t('UNREAD_VIEW.BOT');
|
||||||
},
|
},
|
||||||
|
availabilityStatus() {
|
||||||
|
if (this.isSenderExist(this.sender)) {
|
||||||
|
const { availability_status: availabilityStatus } = this.sender;
|
||||||
|
return availabilityStatus;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isSenderExist(sender) {
|
||||||
|
return sender && !isEmptyObject(sender);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
<style lang="scss">
|
|
||||||
@import '~widget/assets/scss/variables.scss';
|
@import '~widget/assets/scss/variables.scss';
|
||||||
.chat-bubble {
|
.chat-bubble {
|
||||||
max-width: 85%;
|
max-width: 85%;
|
||||||
padding: $space-normal;
|
padding: $space-normal;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '~widget/assets/scss/variables.scss';
|
|
||||||
.row--agent-block {
|
.row--agent-block {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -81,7 +92,7 @@ export default {
|
||||||
padding-bottom: $space-small;
|
padding-bottom: $space-small;
|
||||||
font-size: $font-size-small;
|
font-size: $font-size-small;
|
||||||
.agent--name {
|
.agent--name {
|
||||||
font-weight: $font-weight-bold;
|
font-weight: $font-weight-medium;
|
||||||
margin-left: $space-smaller;
|
margin-left: $space-smaller;
|
||||||
}
|
}
|
||||||
.company--name {
|
.company--name {
|
||||||
|
|
|
@ -21,7 +21,8 @@
|
||||||
"UNREAD_VIEW": {
|
"UNREAD_VIEW": {
|
||||||
"VIEW_MESSAGES_BUTTON": "See new messages",
|
"VIEW_MESSAGES_BUTTON": "See new messages",
|
||||||
"CLOSE_MESSAGES_BUTTON": "Close",
|
"CLOSE_MESSAGES_BUTTON": "Close",
|
||||||
"COMPANY_FROM": "from"
|
"COMPANY_FROM": "from",
|
||||||
|
"BOT": "Bot"
|
||||||
},
|
},
|
||||||
"BUBBLE": {
|
"BUBBLE": {
|
||||||
"LABEL": "Chat with us"
|
"LABEL": "Chat with us"
|
||||||
|
|
Loading…
Reference in a new issue