-
import { mapGetters } from 'vuex';
import { MESSAGE_TYPE } from 'widget/helpers/constants';
+import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
+
import Thumbnail from '../Thumbnail';
import conversationMixin from '../../../mixins/conversations';
import timeMixin from '../../../mixins/time';
import router from '../../../routes';
-import { frontendURL, conversationUrl } from '../../../helper/URLHelper';
import InboxName from '../InboxName';
import inboxMixin from 'shared/mixins/inboxMixin';
import ConversationContextMenu from './contextMenu/Index.vue';
@@ -145,11 +210,12 @@ export default {
},
mixins: [
- inboxMixin,
- timeMixin,
- conversationMixin,
- messageFormatterMixin,
alertMixin,
+ conversationMixin,
+ conversationLabelMixin,
+ inboxMixin,
+ messageFormatterMixin,
+ timeMixin,
],
props: {
activeLabel: {
@@ -193,6 +259,8 @@ export default {
return {
hovered: false,
showContextMenu: false,
+ showAllLabels: false,
+ showExpandLabelButton: false,
contextMenu: {
x: null,
y: null,
@@ -207,9 +275,15 @@ export default {
currentUser: 'getCurrentUser',
accountId: 'getCurrentAccountId',
}),
+
+ conversationId() {
+ return this.chat.id;
+ },
+
bulkActionCheck() {
return !this.hideThumbnail && !this.hovered && !this.selected;
},
+
chatMetadata() {
return this.chat.meta || {};
},
@@ -250,10 +324,6 @@ export default {
return this.unreadCount > 0;
},
- isInboxNameVisible() {
- return !this.activeInbox;
- },
-
lastMessageInChat() {
return this.lastMessage(this.chat);
},
@@ -289,18 +359,116 @@ export default {
},
showInboxName() {
- return (
- !this.hideInboxName &&
- this.isInboxNameVisible &&
- this.inboxesList.length > 1
- );
+ return !this.hideInboxName && this.inboxesList.length > 1;
},
inboxName() {
const stateInbox = this.inbox;
return stateInbox.name || '';
},
+ assigneeName() {
+ return (
+ this.assignee.name || this.$t('AGENT_MGMT.MULTI_SELECTOR.PLACEHOLDER')
+ );
+ },
+ getConversationUrl() {
+ const path = conversationUrl({
+ accountId: this.accountId,
+ id: this.chat.id,
+ });
+ return frontendURL(path);
+ },
+ badgeTooltipKey() {
+ return {
+ instagram_direct_message: 'INSTAGRAM_DM',
+ facebook: 'FB_DM',
+ 'twitter-tweet': 'TWITTER_TWEET',
+ 'twitter-dm': 'TWITTER_DM',
+ whatsapp: 'WHATSAPP',
+ sms: 'SMS',
+ 'Channel::Line': 'LINE',
+ 'Channel::Telegram': 'TELEGRAM',
+ 'Channel::WebWidget': 'WEB_WIDGET',
+ }[this.inboxBadge];
+ },
+ badgeSrc() {
+ return {
+ instagram_direct_message: 'instagram-dm',
+ facebook: 'messenger',
+ 'twitter-tweet': 'twitter-tweet',
+ 'twitter-dm': 'twitter-dm',
+ whatsapp: 'whatsapp',
+ sms: 'sms',
+ 'Channel::Line': 'line',
+ 'Channel::Telegram': 'telegram',
+ 'Channel::WebWidget': '',
+ }[this.inboxBadge];
+ },
+ badgeStyle() {
+ const size = 10;
+ const badgeSize = `${size + 2}px`;
+ const borderRadius = `${size / 2}px`;
+ return { width: badgeSize, height: badgeSize, borderRadius };
+ },
+ remainingLabel() {
+ const { label } = this.chat;
+ const { name } = this.activeLabel;
+ return label.filter(l => l.name !== name);
+ },
+ },
+ watch: {
+ activeLabels() {
+ this.collapseLabels();
+ },
+ },
+ mounted() {
+ this.collapseLabels();
},
methods: {
+ collapseLabels() {
+ const footer = this.$refs.conversationCard.querySelector('.footer');
+ const labels = this.$refs.conversationCard.querySelectorAll('.label');
+ const labelsWrap = this.$refs.conversationCard.querySelector(
+ '.labels-wrap'
+ );
+
+ // If labels are not rendered yet or has no labels, return
+ if (!footer || !labelsWrap || this.activeLabels.length === 0) {
+ return;
+ }
+
+ const labelsWrapWidth = footer.scrollWidth;
+ let currentIndex = 0;
+ let labelsWidth = 0;
+
+ // Remove hidden class from all labels as we are going to calculate the overflow
+ Array.from(labels).forEach(label => {
+ label.classList.remove('hidden');
+ });
+ this.showExpandLabelButton =
+ footer.offsetWidth - 24 < labelsWrap.scrollWidth;
+
+ // If labels are not overflowing, return
+ if (!this.showExpandLabelButton) return;
+
+ // Find from which index labels are overflowing
+ do {
+ if (labelsWidth + 80 < labelsWrapWidth) {
+ labelsWidth += Array.from(labels)[currentIndex].offsetWidth + 8;
+ currentIndex += 1;
+ } else {
+ break;
+ }
+ } while (currentIndex < labels.length);
+
+ // Hide labels from currentIndex
+ Array.from(labels).forEach((label, index) => {
+ if (index >= currentIndex) {
+ label.classList.add('hidden');
+ } else {
+ label.classList.remove('hidden');
+ }
+ });
+ },
cardClick(chat) {
const { activeInbox } = this;
const path = conversationUrl({
@@ -317,6 +485,12 @@ export default {
}
router.push({ path: frontendURL(path) });
},
+ async onCopyId(e) {
+ e.stopPropagation();
+ const url = window.chatwootConfig.hostURL + this.getConversationUrl;
+ await copyTextToClipboard(url);
+ this.showAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
+ },
onCardHover() {
this.hovered = !this.hideThumbnail;
},
@@ -349,6 +523,10 @@ export default {
snoozedUntil
);
},
+ onShowLabels(e) {
+ e.stopPropagation();
+ this.showAllLabels = !this.showAllLabels;
+ },
async onAssignAgent(agent) {
this.$emit('assign-agent', agent, [this.chat.id]);
this.closeContextMenu();
@@ -370,81 +548,277 @@ export default {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 5abf0eb5c..1d70ffac1 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -21,7 +21,7 @@
/>
+
+
+
+
+
- - {{ currentContact.name }} -
-
-
+ {{ currentContact.name }}
+
+
-
-
-
- {{ parsedLastMessage }}
+
+
+ {{ unreadCount > 9 ? '9+' : unreadCount }}
-
+
-
- {{ $t('CHAT_LIST.NO_CONTENT') }}
-
-
-
-
+
+
-