Adds title for conversation card

app/javascript/dashboard/assets/scss/_foundation-custom.scss

@@ -67,3 +67,8 @@ code {
 .margin-right-small {
   margin-right: var(--space-small);
 }
+
+input[type="checkbox"],
+input[type="radio"] {
+  accent-color: var(--w-500);
+}

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -249,7 +249,7 @@ $button-background-hover: scale-color($button-background, $lightness: -15%);
 $button-color: $white;
 $button-color-alt: $white;
 $button-radius: var(--border-radius-normal);
-$button-sizes: (tiny: var(--font-size-micro),
+$button-sizes: (tiny: var(--font-size-mini),
   small: var(--font-size-mini),
   default: var(--font-size-small),
   large: var(--font-size-medium));

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -155,12 +155,20 @@ $default-button-height: 4.0rem;
   // Sizes
   &.tiny {
     height: var(--space-medium);
+
+    .icon+.button__content {
+      padding-left: var(--space-micro);
+    }
   }
 
   &.small {
     height: var(--space-large);
     padding-bottom: var(--space-smaller);
     padding-top: var(--space-smaller);
+
+    .icon+.button__content {
+      padding-left: var(--space-smaller);
+    }
   }
 
   &.large {
@@ -190,6 +198,10 @@ $default-button-height: 4.0rem;
     height: auto;
     margin: 0;
     padding: 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
 }

app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss

@@ -1,11 +1,12 @@
 @keyframes left-shift-animation {
+
   0%,
   100% {
     transform: translateX(0);
   }
 
   50% {
-    transform: translateX(1px);
+    transform: translateX(-1px);
   }
 }
 
@@ -13,70 +14,24 @@
   @include flex;
   @include flex-shrink;
   border-bottom: 1px solid transparent;
-  border-left: $space-micro solid transparent;
   border-top: 1px solid transparent;
   cursor: pointer;
-  padding: 0 0 0 $space-normal;
   position: relative;
 
   &.active {
-    animation: left-shift-animation 0.25s $swift-ease-out-function;
+    animation: left-shift-animation 0.25s ease-in-out;
-    background: $color-background;
+    box-shadow: var(--shadow-small);
-    border-bottom-color: $color-border-light;
-    border-left-color: $color-woot;
-    border-top-color: $color-border-light;
 
-    .conversation--details {
+    +.conversation::after {
-      border-top-color: transparent;
-    }
-
-    + .conversation .conversation--details {
       border-top-color: transparent;
     }
   }
 
-  &:first-child {
+  &:first-child::after {
-    .conversation--details {
+    border-top-color: transparent;
-      border-top-color: transparent;
-    }
-  }
-
-  &:last-child {
-    .conversation--details {
-      border-bottom-color: $color-border-light;
-    }
-  }
-
-  .conversation--details {
-    @include border-light-bottom;
-    @include border-light-top;
-    border-bottom-color: transparent;
-    margin: 0 0 0 $space-one;
-    padding: $space-slab 0;
-  }
-
-  .conversation--user {
-    font-size: $font-size-small;
-    margin-bottom: 0;
-    text-transform: capitalize;
-
-    .label {
-      left: $space-micro;
-      max-width: $space-jumbo;
-      overflow: hidden;
-      position: relative;
-      text-overflow: ellipsis;
-      top: $space-micro;
-      white-space: nowrap;
-    }
   }
 
   .conversation--message {
-    color: $color-body;
-    font-size: $font-size-small;
-    font-weight: $font-weight-normal;
-    height: $space-medium;
-    line-height: $space-medium;
     margin: 0;
     max-width: 96%;
     overflow: hidden;
@@ -119,24 +74,11 @@
     }
   }
 
-  &.unread-chat {
-    .unread {
-      display: inline-block;
-    }
-
-    .conversation--message {
-      font-weight: $font-weight-bold;
-    }
-
-    .conversation--user {
-      font-weight: $font-weight-bold;
-    }
-  }
 
   &.compact {
     padding-left: 0;
 
-    .conversation--details {
+    .message {
       border-radius: var(--border-radius-small);
       margin-left: 0;
       padding-left: var(--space-two);

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -93,7 +93,7 @@
 
     .page-title {
       margin-bottom: $zero;
-      margin-left: $space-normal;
+      margin-left: var(--space-small);
     }
 
     .status--filter {

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -34,6 +34,7 @@
 // Tab chat type
 .tab--chat-type {
   @include flex;
+  margin-left: var(--space-minus-small);
 
   .tabs-title {
     a {
@@ -47,7 +48,7 @@
 
 .tabs-title {
   flex-shrink: 0;
-  margin: $zero $space-slab;
+  margin: $zero $space-small;
 
   .badge {
     background: $color-background;

app/javascript/dashboard/components/ChatList.vue

@@ -117,7 +117,7 @@
         :folders-id="foldersId"
         :chat="chat"
         :conversation-type="conversationType"
-        :show-assignee="showAssigneeInConversationCard"
+        show-assignee
         :selected="isConversationSelected(chat.id)"
         @select-conversation="selectConversation"
         @de-select-conversation="deSelectConversation"
@@ -303,12 +303,6 @@ export default {
         };
       });
     },
-    showAssigneeInConversationCard() {
-      return (
-        this.hasAppliedFiltersOrActiveFolders ||
-        this.activeAssigneeTab === wootConstants.ASSIGNEE_TYPE.ALL
-      );
-    },
     inbox() {
       return this.$store.getters['inboxes/getInbox'](this.activeInbox);
     },
@@ -796,12 +790,7 @@ export default {
   flex-shrink: 0;
   width: 34rem;
   overflow: hidden;
-  @include breakpoint(large up) {
+
-    width: 36rem;
-  }
-  @include breakpoint(xlarge up) {
-    width: 35rem;
-  }
   @include breakpoint(xxlarge up) {
     width: 38rem;
   }

app/javascript/dashboard/components/ui/Label.vue

@@ -4,7 +4,7 @@
       <fluent-icon :icon="icon" size="12" class="label--icon" />
     </span>
     <span
-      v-if="variant === 'smooth'"
+      v-if="variant === 'smooth' && title && !icon"
       :style="{ background: color }"
       class="label-color-dot"
     />
@@ -117,14 +117,17 @@ export default {
   height: var(--space-medium);
 
   &.small {
-    font-size: var(--font-size-micro);
+    font-size: var(--font-size-mini);
     padding: var(--space-micro) var(--space-smaller);
     line-height: 1.2;
-    letter-spacing: 0.15px;
+    height: var(--space-two);
   }
 
   .label--icon {
     cursor: pointer;
+  }
+
+  .label-color-dot {
     margin-right: var(--space-smaller);
   }
 
@@ -143,10 +146,10 @@ export default {
   /* Color Schemes */
   &.primary {
     background: var(--w-100);
-    color: var(--w-900);
+    color: var(--w-800);
     border: 1px solid var(--w-200);
     a {
-      color: var(--w-900);
+      color: var(--w-800);
     }
     .label-color-dot {
       background: var(--w-600);
@@ -154,10 +157,10 @@ export default {
   }
   &.secondary {
     background: var(--s-100);
-    color: var(--s-900);
+    color: var(--s-800);
     border: 1px solid var(--s-200);
     a {
-      color: var(--s-900);
+      color: var(--s-800);
     }
     .label-color-dot {
       background: var(--s-600);
@@ -165,10 +168,10 @@ export default {
   }
   &.success {
     background: var(--g-100);
-    color: var(--g-900);
+    color: var(--g-800);
     border: 1px solid var(--g-200);
     a {
-      color: var(--g-900);
+      color: var(--g-800);
     }
     .label-color-dot {
       background: var(--g-600);
@@ -176,10 +179,10 @@ export default {
   }
   &.alert {
     background: var(--r-100);
-    color: var(--r-900);
+    color: var(--r-800);
     border: 1px solid var(--r-200);
     a {
-      color: var(--r-900);
+      color: var(--r-800);
     }
     .label-color-dot {
       background: var(--r-600);
@@ -187,20 +190,20 @@ export default {
   }
   &.warning {
     background: var(--y-100);
-    color: var(--y-900);
+    color: var(--y-800);
     border: 1px solid var(--y-200);
     a {
-      color: var(--y-900);
+      color: var(--y-800);
     }
     .label-color-dot {
-      background: var(--y-900);
+      background: var(--y-800);
     }
   }
 
   &.smooth {
     background: transparent;
-    border: 1px solid var(--s-75);
+    border: 1px solid var(--s-100);
-    color: var(--s-800);
+    color: var(--s-700);
   }
 }
 
@@ -221,7 +224,8 @@ export default {
 }
 
 .label-action--button {
-  margin-bottom: var(--space-minus-micro);
+  display: flex;
+  margin-right: var(--space-smaller);
 }
 
 .label-color-dot {
@@ -230,5 +234,13 @@ export default {
   height: var(--space-one);
   border-radius: var(--border-radius-small);
   margin-right: var(--space-smaller);
+  box-shadow: var(--shadow-small);
+}
+.label.small .label-color-dot {
+  width: var(--space-small);
+  height: var(--space-small);
+  border-radius: var(--border-radius-small);
+  margin-right: var(--space-micro);
+  box-shadow: var(--shadow-small);
 }
 </style>

app/javascript/dashboard/components/widgets/InboxName.vue

@@ -1,8 +1,16 @@
 <template>
-  <div class="inbox--name">
+  <woot-button
-    <fluent-icon class="inbox--icon" :icon="computedInboxClass" size="12" />
+    :title="$t('CONVERSATION.CARD.GOTO_INBOX')"
+    class="inbox--icon"
+    variant="link"
+    size="tiny"
+    color-scheme="secondary"
+    :icon="computedInboxClass"
+    class-names="inbox"
+    @click="onClick"
+  >
     {{ inbox.name }}
-  </div>
+  </woot-button>
 </template>
 <script>
 import { getInboxClassByType } from 'dashboard/helper/inbox';
@@ -21,20 +29,19 @@ export default {
       return classByType;
     },
   },
+  methods: {
+    onClick(e) {
+      e.stopPropagation();
+      this.$router.push({
+        name: 'inbox_dashboard',
+        params: { inbox_id: this.inbox.id },
+      });
+    },
+  },
 };
 </script>
-<style scoped>
+<style lang="scss" scoped>
-.inbox--name {
+.inbox.button.clear.secondary {
-  display: inline-flex;
+  color: var(--s-600);
-  padding: var(--space-micro) 0;
-  line-height: var(--space-slab);
-  font-weight: var(--font-weight-medium);
-  background: none;
-  color: var(--s-500);
-  font-size: var(--font-size-mini);
-}
-
-.inbox--icon {
-  margin-right: var(--space-micro);
 }
 </style>

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -1,5 +1,7 @@
 <template>
   <div
+    ref="conversationCard"
+    :title="$t('CONVERSATION.CARD.RIGHT_CLICK_TOOLTIP')"
     class="conversation"
     :class="{
       active: isActiveChat,
@@ -16,7 +18,7 @@
       <input
         :value="selected"
         :checked="selected"
-        class="checkbox"
+        class="checkbox select-conversation"
         type="checkbox"
         @change="onSelectConversation($event.target.checked)"
       />
@@ -24,74 +26,134 @@
     <thumbnail
       v-if="bulkActionCheck"
       :src="currentContact.thumbnail"
-      :badge="inboxBadge"
+      class="sender-thumbnail"
-      class="columns"
       :username="currentContact.name"
       :status="currentContact.availability_status"
-      size="40px"
+      has-border
+      size="24px"
     />
-    <div class="conversation--details columns">
+
-      <div class="conversation--metadata">
+    <div class="message">
-        <inbox-name v-if="showInboxName" :inbox="inbox" />
+      <div class="header">
-        <span
+        <div class="conversation-meta">
-          v-if="showAssignee && assignee.name"
+          <inbox-name v-if="showInboxName" :inbox="inbox" />
-          class="label assignee-label text-truncate"
+          <woot-button
-        >
+            :title="$t('CONVERSATION.CARD.COPY_LINK')"
-          <fluent-icon icon="person" size="12" />
+            class="conversation__id"
-          {{ assignee.name }}
+            variant="link"
-        </span>
+            size="tiny"
+            color-scheme="secondary"
+            icon="number-symbol"
+            class-names="copy-icon"
+            @click="onCopyId"
+          >
+            {{ chat.id }}
+          </woot-button>
+        </div>
+        <woot-label
+          v-if="showAssignee"
+          icon="headset"
+          small
+          :title="assigneeName"
+          class="assignee-label"
+        />
       </div>
-      <h4 class="conversation--user">
+      <div class="user-info">
-        {{ currentContact.name }}
+        <h4 class="text-block-title conversation--user">
-      </h4>
+          {{ currentContact.name }}
-      <p v-if="lastMessageInChat" class="conversation--message">
+        </h4>
-        <fluent-icon
+        <img
-          v-if="isMessagePrivate"
+          v-if="badgeSrc"
-          size="16"
+          v-tooltip.right="$t(`CONVERSATION.VIA_TOOLTIP.${badgeTooltipKey}`)"
-          class="message--attachment-icon last-message-icon"
+          class="source-badge"
-          icon="lock-closed"
+          :style="badgeStyle"
+          :src="`/integrations/channels/badges/${badgeSrc}.png`"
+          alt="Badge"
         />
-        <fluent-icon
+      </div>
-          v-else-if="messageByAgent"
+
-          size="16"
+      <div class="content">
-          class="message--attachment-icon last-message-icon"
+        <span v-if="unreadCount" class="unread badge">
-          icon="arrow-reply"
+          {{ unreadCount > 9 ? '9+' : unreadCount }}
-        />
-        <fluent-icon
-          v-else-if="isMessageAnActivity"
-          size="16"
-          class="message--attachment-icon last-message-icon"
-          icon="info"
-        />
-        <span v-if="lastMessageInChat.content">
-          {{ parsedLastMessage }}
         </span>
-        <span v-else-if="lastMessageInChat.attachments">
+        <p v-if="lastMessageInChat" class="conversation--message">
           <fluent-icon
-            v-if="attachmentIcon"
+            v-if="isMessagePrivate"
-            size="16"
+            size="12"
-            class="message--attachment-icon"
+            class="message--attachment-icon last-message-icon"
-            :icon="attachmentIcon"
+            icon="lock-closed"
           />
-          {{ this.$t(`${attachmentMessageContent}`) }}
+          <fluent-icon
-        </span>
+            v-else-if="messageByAgent"
-        <span v-else>
+            size="12"
-          {{ $t('CHAT_LIST.NO_CONTENT') }}
+            class="message--attachment-icon last-message-icon"
-        </span>
+            icon="arrow-reply"
-      </p>
+          />
-      <p v-else class="conversation--message">
+          <fluent-icon
-        <fluent-icon size="16" class="message--attachment-icon" icon="info" />
+            v-else-if="isMessageAnActivity"
-        <span>
+            size="12"
-          {{ this.$t(`CHAT_LIST.NO_MESSAGES`) }}
+            class="message--attachment-icon last-message-icon"
-        </span>
+            icon="info"
-      </p>
+          />
-      <div class="conversation--meta">
+          <span v-if="lastMessageInChat.content">
-        <span class="timestamp">
+            {{ parsedLastMessage }}
-          <time-ago :timestamp="chat.timestamp" />
+          </span>
-        </span>
+          <span v-else-if="lastMessageInChat.attachments">
-        <span class="unread">{{ unreadCount > 9 ? '9+' : unreadCount }}</span>
+            <fluent-icon
+              v-if="attachmentIcon"
+              size="12"
+              class="message--attachment-icon"
+              :icon="attachmentIcon"
+            />
+            {{ this.$t(`${attachmentMessageContent}`) }}
+          </span>
+          <span v-else>
+            {{ $t('CHAT_LIST.NO_CONTENT') }}
+          </span>
+        </p>
+        <p v-else class="conversation--message">
+          <fluent-icon size="12" class="message--attachment-icon" icon="info" />
+          <span>
+            {{ this.$t(`CHAT_LIST.NO_MESSAGES`) }}
+          </span>
+        </p>
+        <div class="meta">
+          <span class="timestamp">
+            <time-ago :timestamp="chat.timestamp" />
+          </span>
+        </div>
+      </div>
+      <div v-if="activeLabels.length" class="footer">
+        <div class="overflow-wrap">
+          <div class="labels-wrap" :class="{ expand: showAllLabels }">
+            <woot-label
+              v-for="label in activeLabels"
+              :key="label.id"
+              :title="label.title"
+              :description="label.description"
+              :color="label.color"
+              variant="smooth"
+              small
+            />
+            <woot-button
+              v-if="showExpandLabelButton"
+              :title="
+                showAllLabels
+                  ? $t('CONVERSATION.CARD.HIDE_LABELS')
+                  : $t('CONVERSATION.CARD.SHOW_LABELS')
+              "
+              class="remaining-labels"
+              :color-scheme="isActiveChat ? 'primary' : 'secondary'"
+              :variant="isActiveChat ? '' : 'hollow'"
+              :icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
+              size="tiny"
+              @click="onShowLabels"
+            />
+          </div>
+        </div>
       </div>
     </div>
+
     <woot-context-menu
       v-if="showContextMenu"
       ref="menu"
@@ -115,12 +177,15 @@
 <script>
 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 (
+      return !this.hideInboxName && this.inboxesList.length > 1;
-        !this.hideInboxName &&
-        this.isInboxNameVisible &&
-        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 {
 </script>
 <style lang="scss" scoped>
 .conversation {
-  align-items: center;
+  display: flex;
+  position: relative;
+  border-radius: var(--border-radius-small);
+  margin: var(--space-smaller);
+  padding: var(--space-small);
+  cursor: pointer;
+  position: relative;
+  box-sizing: content-box;
+
+  &::after {
+    content: '';
+    right: 0;
+    top: -3.5px;
+    width: calc(100% - 40px);
+    position: absolute;
+    border-top: 1px solid var(--s-50);
+  }
 
   &:hover {
-    background: var(--color-background-light);
+    background: var(--s-25);
+    &::after {
+      border-top-color: transparent;
+    }
+  }
+
+  &.active::after {
+    border-top-color: transparent;
+  }
+
+  &.compact {
+    padding-left: 0;
+    margin: var(--space-smaller);
+    .message {
+      margin-left: 0;
+      padding-left: var(--space-small);
+    }
   }
 }
-
+.message {
-.conversation-selected {
+  width: 100%;
-  background: var(--color-background-light);
+  min-width: 0;
+  margin-left: var(--space-small);
 }
-
+.meta {
-.has-inbox-name {
-  &::v-deep .user-thumbnail-box {
-    margin-top: var(--space-normal);
-    align-items: flex-start;
-  }
-  .conversation--meta {
-    margin-top: var(--space-normal);
-  }
-}
-
-.conversation--details {
-  .conversation--user {
-    padding-top: var(--space-micro);
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    width: 60%;
-  }
-}
-
-.last-message-icon {
-  color: var(--s-600);
-}
-
-.conversation--metadata {
   display: flex;
-  justify-content: space-between;
+  flex-grow: 1;
-  padding-right: var(--space-normal);
+  flex-shrink: 0;
-
+  align-items: center;
-  .label {
+  justify-content: flex-end;
-    background: none;
+  padding-left: var(--space-medium);
+  .timestamp {
     color: var(--s-500);
     font-size: var(--font-size-mini);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-normal);
-    line-height: var(--space-slab);
+    line-height: var(--font-size-medium);
-    padding: var(--space-micro) 0 var(--space-micro) 0;
   }
+}
+.header {
+  display: flex;
+  justify-content: space-between;
 
-  .assignee-label {
+  height: var(--space-normal);
-    display: inline-flex;
+  margin-bottom: var(--space-micro);
-    max-width: 50%;
+  box-sizing: content-box;
+}
+.content {
+  display: flex;
+  align-items: center;
+  height: var(--space-medium);
+
+  .badge {
+    color: var(--white);
+    margin-right: var(--space-smaller);
   }
 }
 
-.message--attachment-icon {
+.message--with-icon {
-  margin-top: var(--space-minus-micro);
+  display: inline-flex;
-  vertical-align: middle;
+  align-items: center;
 }
+
+.footer {
+  display: flex;
+  align-items: center;
+  margin-top: var(--space-smaller);
+
+  .hidden {
+    display: none;
+  }
+
+  .remaining-labels {
+    height: var(--space-two);
+    position: sticky;
+    flex-shrink: 0;
+    right: 0;
+    margin-bottom: var(--space-smaller);
+    margin-right: var(--space-medium);
+  }
+}
+
+.labels-wrap {
+  display: flex;
+  align-items: center;
+  height: var(--space-medium);
+  overflow: hidden;
+  min-width: 0;
+  flex-shrink: 1;
+  &.expand {
+    height: auto;
+    overflow: visible;
+    flex-flow: row wrap;
+    .hidden {
+      display: inline-flex;
+    }
+
+    .label {
+      margin-bottom: var(--space-smaller);
+    }
+  }
+}
+
 .checkbox-wrapper {
-  height: 40px;
-  width: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 100%;
+  flex: 1 0 auto;
+  height: var(--space-medium);
+  width: var(--space-medium);
+  border-radius: var(--space-medium);
   margin-top: var(--space-normal);
   cursor: pointer;
+
   &:hover {
-    background-color: var(--w-100);
+    background-color: var(--w-75);
+    .select-conversation {
+      margin: var(--space-zero);
+      cursor: pointer;
+    }
+  }
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  height: var(--space-two);
+  margin-top: var(--space-micro);
+}
+
+.conversation--user {
+  margin-bottom: 0;
+  text-transform: capitalize;
+  /* color: var(--s-800); */
+}
+
+.conversation-meta {
+  display: flex;
+}
+.conversation__id {
+  margin-left: var(--space-smaller);
+}
+
+.message--attachment-icon {
+  flex-shrink: 0;
+  position: relative;
+  top: 1px;
+  color: var(--s-600);
+}
+
+.sender-thumbnail {
+  margin-top: var(--space-normal);
+}
+
+.select-conversation {
+  margin: var(--space-zero);
+  cursor: pointer;
+}
+
+.assignee-label {
+  color: var(--s-600);
+  margin: 0;
+  border-color: var(--s-25);
+}
+
+.badge {
+  min-width: 1.4rem;
+  height: 1.4rem;
+  display: flex;
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--space-medium);
+  font-weight: var(--font-weight-bold);
+}
+
+.source-badge {
+  border: 1px solid var(--s-50);
+  margin-left: var(--space-smaller);
+  filter: grayscale(100%);
+  opacity: 0.7;
+
+  &:hover {
+    filter: grayscale(0);
+    opacity: 1;
+  }
+}
+
+.overflow-wrap {
+  display: flex;
+  width: 100%;
+}
+
+.copy-icon.button.clear.secondary {
+  color: var(--s-600);
+}
+
+.conversation.unread-chat,
+.conversation.active {
+  background: var(--w-25);
+
+  .conversation--user {
+    font-weight: var(--font-weight-bold);
+  }
+  .conversation--message {
+    font-weight: var(--font-weight-medium);
+  }
+}
+.conversation.active {
+  background: var(--w-500);
+
+  .conversation--user {
+    color: var(--white);
+  }
+  .conversation-meta {
+    color: var(--w-25);
+  }
+  .conversation__id {
+    color: var(--w-25);
   }
 
-  input[type='checkbox'] {
+  .button.secondary.inbox,
-    margin: var(--space-zero);
+  .button.conversation__id,
-    cursor: pointer;
+  .time-ago,
+  .message--attachment-icon,
+  .last-message-icon {
+    color: var(--w-75);
+  }
+  .conversation--message {
+    color: var(--w-25);
+  }
+
+  .labels-wrap .label {
+    background: var(--w-600);
+    color: var(--w-75);
+    border-color: var(--w-600);
+    .label-color-dot {
+      border: 1px solid var(--w-100);
+    }
+  }
+
+  .assignee-label {
+    background: var(--w-600);
+    color: var(--w-75);
+    border-color: var(--w-600);
+  }
+
+  .source-badge {
+    border-color: var(--w-200);
+  }
+
+  .select-conversation {
+    accent-color: var(--w-700);
   }
 }
 </style>

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -21,7 +21,7 @@
           />
         </h3>
         <div class="conversation--header--actions">
-          <inbox-name :inbox="inbox" class="margin-right-small" />
+          <inbox-name :inbox="inbox" class="inbox-name" />
           <span
             v-if="isSnoozed"
             class="snoozed--display-text margin-right-small"
@@ -208,4 +208,8 @@ export default {
 .hmac-warning__icon {
   color: var(--y-600);
 }
+
+.button.inbox-name {
+  margin-right: var(--space-small);
+}
 </style>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue

@@ -186,16 +186,17 @@ export default {
 <style scoped lang="scss">
 .bulk-action__container {
   border-bottom: 1px solid var(--s-100);
-  padding: var(--space-normal) var(--space-one);
+  padding: var(--space-normal) var(--space-small);
   position: relative;
 }
 
 .bulk-action__panel {
   cursor: pointer;
+  padding-left: var(--space-normal);
 
   span {
     font-size: var(--font-size-mini);
-    margin-left: var(--space-smaller);
+    padding-left: var(--space-small);
   }
 
   input[type='checkbox'] {

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -153,6 +153,25 @@
       "COPY": "Copy",
       "DELETE": "Delete",
       "CREATE_A_CANNED_RESPONSE": "Add to canned responses"
+    },
+    "CARD": {
+      "COPY_LINK": "Copy link",
+      "GOTO_INBOX": "Goto inbox",
+      "SHOW_LABELS": "Show labels",
+      "HIDE_LABELS": "Hide labels",
+      "AGENT_TOOLTIP": "Right click to change agent",
+      "RIGHT_CLICK_TOOLTIP": "Right click for more options"
+    },
+    "VIA_TOOLTIP": {
+      "INSTAGRAM_DM": "Via instagram DM",
+      "FB_DM": "Via facebook DM",
+      "TWITTER_TWEET": "Via tweet",
+      "TWITTER_DM": "Via twitter DM",
+      "WHATSAPP": "Via WhatsApp",
+      "SMS": "Via SMS",
+      "LINE": "Via Line",
+      "TELEGRAM": "Via telegram",
+      "WEB_WIDGET": "Via live chat"
     }
   },
   "EMAIL_TRANSCRIPT": {

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -153,14 +153,15 @@ export default {
 <style lang="scss" scoped>
 .search-wrap {
   position: relative;
+  margin-top: var(--space-smaller);
 }
 
 .search {
   display: flex;
   padding: 0;
   border-bottom: 1px solid transparent;
-  padding: var(--space-one) var(--space-normal) var(--space-smaller)
+  padding: var(--space-small);
-    var(--space-normal);
+  height: 4rem;
 
   &:hover {
     .search--icon {

app/javascript/shared/assets/stylesheets/colors.scss

@@ -86,8 +86,8 @@
   // Common color aliases
   --color-woot: var(--w-500);
 
-  --color-heading: #1f2d3d;
+  --color-heading: var(--s-900);
-  --color-body: #3c4858;
+  --color-body: var(--s-700);
 
   --color-border: var(--s-75);
   --color-border-light: var(--s-50);

app/javascript/shared/components/FluentIcon/dashboard-icons.json

@@ -86,6 +86,7 @@
   "globe-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999ZM14.939 16.5H9.06c.652 2.414 1.786 4.002 2.939 4.002s2.287-1.588 2.939-4.002Zm-7.43 0H4.785a8.532 8.532 0 0 0 4.094 3.411c-.522-.82-.953-1.846-1.27-3.015l-.102-.395Zm11.705 0h-2.722c-.324 1.335-.792 2.5-1.373 3.411a8.528 8.528 0 0 0 3.91-3.127l.185-.283ZM7.094 10H3.735l-.005.017a8.525 8.525 0 0 0-.233 1.984c0 1.056.193 2.067.545 3h3.173a20.847 20.847 0 0 1-.123-5Zm8.303 0H8.603a18.966 18.966 0 0 0 .135 5h6.524a18.974 18.974 0 0 0 .135-5Zm4.868 0h-3.358c.062.647.095 1.317.095 2a20.3 20.3 0 0 1-.218 3h3.173a8.482 8.482 0 0 0 .544-3c0-.689-.082-1.36-.236-2ZM8.88 4.09l-.023.008A8.531 8.531 0 0 0 4.25 8.5h3.048c.314-1.752.86-3.278 1.583-4.41ZM12 3.499l-.116.005C10.62 3.62 9.396 5.622 8.83 8.5h6.342c-.566-2.87-1.783-4.869-3.045-4.995L12 3.5Zm3.12.59.107.175c.669 1.112 1.177 2.572 1.475 4.237h3.048a8.533 8.533 0 0 0-4.339-4.29l-.291-.121Z",
   "globe-desktop-outline": "M22.002 12C22.002 6.477 17.524 2 12 2 6.476 1.999 2 6.477 2 12.001c0 5.186 3.947 9.45 9.001 9.952V20.11c-.778-.612-1.478-1.905-1.939-3.61h1.94V15H8.737a18.969 18.969 0 0 1-.135-5h6.794c.068.64.105 1.31.105 2h1.5c0-.684-.033-1.353-.095-2h3.358c.154.64.237 1.31.237 2h1.5ZM4.786 16.5h2.722l.102.396c.317 1.17.748 2.195 1.27 3.015a8.532 8.532 0 0 1-4.094-3.41ZM3.736 10h3.358a20.847 20.847 0 0 0-.095 2c0 1.043.075 2.051.217 3H4.043a8.483 8.483 0 0 1-.544-3c0-.682.08-1.347.232-1.983L3.736 10Zm5.122-5.902.023-.008C8.16 5.222 7.611 6.748 7.298 8.5H4.25c.905-2 2.56-3.587 4.608-4.402Zm3.026-.594L12 3.5l.126.006c1.262.126 2.48 2.125 3.045 4.995H8.83c.568-2.878 1.79-4.88 3.055-4.996Zm3.343.76-.107-.174.291.121a8.533 8.533 0 0 1 4.339 4.29h-3.048c-.298-1.665-.806-3.125-1.475-4.237Z M12 19a1 1 0 0 0 1 1h3v2h-.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 0-1H19v-2h3a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v5Z",
   "headphones-sound-wave-outline": "M3.5 12a8.5 8.5 0 0 1 17 0v2h-2.25a.75.75 0 0 0-.75.75v6.5c0 .414.336.75.75.75H19a3 3 0 0 0 3-3v-7c0-5.523-4.477-10-10-10S2 6.477 2 12v7a3 3 0 0 0 3 3h.75a.75.75 0 0 0 .75-.75v-6.5a.75.75 0 0 0-.75-.75H3.5v-2Zm17 3.5V19a1.5 1.5 0 0 1-1.5 1.5v-5h1.5ZM3.5 19v-3.5H5v5A1.5 1.5 0 0 1 3.5 19Zm9.25-7.25a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-10.5Zm-4 2.25a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5a.75.75 0 0 1 .75-.75Zm7.25.75a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0v-4.5Z",
+  "headset-outline": "M12 18.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm5.5-8.5V9a5.5 5.5 0 1 0-11 0v1H9a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H6.5v.25a2.25 2.25 0 0 0 2.096 2.245l.154.005h1.128a2.251 2.251 0 1 1 0 1.5H8.75a3.75 3.75 0 0 1-3.745-3.55L5 16.25V9a7 7 0 0 1 14 0v5a2 2 0 0 1-1.85 1.995L17 16h-2a1 1 0 0 1-.993-.883L14 15v-4a1 1 0 0 1 .883-.993L15 10h2.5Zm-9 1.5h-2v3h2v-3Zm9 0h-2v3H17a.5.5 0 0 0 .492-.41L17.5 14v-2.5Z",
   "image-outline": "M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h11.5Zm.58 16.401-5.805-5.686a.75.75 0 0 0-.966-.071l-.084.07-5.807 5.687c.182.064.378.099.582.099h11.5c.203 0 .399-.035.58-.099l-5.805-5.686L18.33 19.4ZM17.75 4.5H6.25A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .208.036.408.103.594l5.823-5.701a2.25 2.25 0 0 1 3.02-.116l.128.116 5.822 5.702c.067-.186.104-.386.104-.595V6.25a1.75 1.75 0 0 0-1.75-1.75Zm-2.498 2a2.252 2.252 0 1 1 0 4.504 2.252 2.252 0 0 1 0-4.504Zm0 1.5a.752.752 0 1 0 0 1.504.752.752 0 0 0 0-1.504Z",
   "info-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm0 1.5a8.502 8.502 0 1 0 0 17.003A8.502 8.502 0 0 0 12 3.5Zm-.004 7a.75.75 0 0 1 .744.648l.007.102.003 5.502a.75.75 0 0 1-1.493.102l-.007-.101-.003-5.502a.75.75 0 0 1 .75-.75ZM12 7.003a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997Z",
   "keyboard-outline": "M19.745 5a2.25 2.25 0 0 1 2.25 2.25v9.505a2.25 2.25 0 0 1-2.25 2.25H4.25A2.25 2.25 0 0 1 2 16.755V7.25A2.25 2.25 0 0 1 4.25 5h15.495Zm0 1.5H4.25a.75.75 0 0 0-.75.75v9.505c0 .414.336.75.75.75h15.495a.75.75 0 0 0 .75-.75V7.25a.75.75 0 0 0-.75-.75Zm-12.995 8h10.5a.75.75 0 0 1 .102 1.493L17.25 16H6.75a.75.75 0 0 1-.102-1.493l.102-.007h10.5-10.5ZM16.5 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm-5.995 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm-3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm6 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM6 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm2.995 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z",
@@ -110,7 +111,7 @@
   "microphone-pause-outline": "M14,19H18V5H14M6,19H10V5H6V19Z",
   "microphone-play-outline": "M8,5.14V19.14L19,12.14L8,5.14Z",
   "navigation-outline": "M3 17h18a1 1 0 0 1 .117 1.993L21 19H3a1 1 0 0 1-.117-1.993L3 17h18H3Zm0-6l18-.002a1 1 0 0 1 .117 1.993l-.117.007L3 13a1 1 0 0 1-.117-1.993L3 11l18-.002L3 11Zm0-6h18a1 1 0 0 1 .117 1.993L21 7H3a1 1 0 0 1-.117-1.993L3 5h18H3Z",
-  "number-symbol-outline": "M10.987 2.89a.75.75 0 1 0-1.474-.28L8.494 7.999 3.75 8a.75.75 0 1 0 0 1.5l4.46-.002-.946 5-4.514.002a.75.75 0 0 0 0 1.5l4.23-.002-.967 5.116a.75.75 0 1 0 1.474.278l1.02-5.395 5.474-.002-.968 5.119a.75.75 0 1 0 1.474.278l1.021-5.398 4.742-.002a.75.75 0 1 0 0-1.5l-4.458.002.946-5 4.512-.002a.75.75 0 1 0 0-1.5l-4.229.002.966-5.104a.75.75 0 0 0-1.474-.28l-1.018 5.385-5.474.002.966-5.107Zm-1.25 6.608 5.474-.003-.946 5-5.474.002.946-5Z",
+  "number-symbol-outline": "M10.985 3.165a1 1 0 0 0-1.973-.33l-.86 5.163L3.998 8a1 1 0 1 0 .002 2l3.817-.002-.667 4L3 14a1 1 0 1 0 0 2l3.817-.002-.807 4.838a1 1 0 1 0 1.973.329l.862-5.167 4.975-.003-.806 4.84a1 1 0 1 0 1.972.33l.862-5.17L20 15.992a1 1 0 0 0 0-2l-3.819.001.667-4.001L21 9.99a1 1 0 0 0 0-2l-3.818.002.804-4.827a1 1 0 1 0-1.972-.33l-.86 5.159-4.975.003.806-4.832Zm-1.14 6.832 4.976-.003-.667 4.001-4.976.002.667-4Z",
   "open-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .966.783 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75v-4a.75.75 0 0 1 1.5 0v4A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h4a.75.75 0 0 1 0 1.5h-4ZM13 3.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0V5.56l-5.22 5.22a.75.75 0 0 1-1.06-1.06l5.22-5.22h-4.69a.75.75 0 0 1-.75-.75Z",
   "panel-sidebar-outline": "M4.75 4A2.75 2.75 0 0 0 2 6.75v10.5A2.75 2.75 0 0 0 4.75 20h14.5A2.75 2.75 0 0 0 22 17.25V6.75A2.75 2.75 0 0 0 19.25 4H4.75ZM9 18.5v-13h10.25c.69 0 1.25.56 1.25 1.25v10.5c0 .69-.56 1.25-1.25 1.25H9ZM5.5 3.5h4M5.5 5.5h4M5.5 7.5h4M5.5 9.5h4",
   "panel-contract-outline": "M14.193 14.751a.75.75 0 0 0 1.059.056l2.5-2.25a.75.75 0 0 0 0-1.114l-2.5-2.25a.75.75 0 0 0-1.004 1.115l1.048.942H11.75a.75.75 0 1 0 0 1.5h3.546l-1.048.942a.75.75 0 0 0-.055 1.06ZM2 6.75A2.75 2.75 0 0 1 4.75 4h14.5A2.75 2.75 0 0 1 22 6.75v10.5A2.75 2.75 0 0 1 19.25 20H4.75A2.75 2.75 0 0 1 2 17.25V6.75ZM9 5.5v13h10.25c.69 0 1.25-.56 1.25-1.25V6.75c0-.69-.56-1.25-1.25-1.25H9Z",