feat: Shows the last activity, created at timestamp in the same row (#6267)

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

@@ -1,7 +1,14 @@
 <template>
-  <span class="time-ago">
-    <span>{{ timeAgo }}</span>
-  </span>
+  <div
+    v-tooltip.top="{
+      content: tooltipText,
+      delay: { show: 1500, hide: 0 },
+      hideOnClick: true,
+    }"
+    class="time-ago"
+  >
+    <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
+  </div>
 </template>
 
 <script>
@@ -19,20 +26,55 @@ export default {
       type: Boolean,
       default: true,
     },
-    timestamp: {
+    lastActivityTimestamp: {
+      type: [String, Date, Number],
+      default: '',
+    },
+    createdAtTimestamp: {
       type: [String, Date, Number],
       default: '',
     },
   },
   data() {
     return {
-      timeAgo: this.dynamicTime(this.timestamp),
+      lastActivityAtTimeAgo: this.dynamicTime(this.lastActivityTimestamp),
+      createdAtTimeAgo: this.dynamicTime(this.createdAtTimestamp),
       timer: null,
     };
   },
+  computed: {
+    lastActivityTime() {
+      return this.shortTimestamp(this.lastActivityAtTimeAgo);
+    },
+    createdAtTime() {
+      return this.shortTimestamp(this.createdAtTimeAgo);
+    },
+    createdAt() {
+      const createdTimeDiff = Date.now() - this.createdAtTimestamp * 1000;
+      const isBeforeAMonth = createdTimeDiff > DAY_IN_MILLI_SECONDS * 30;
+      return !isBeforeAMonth
+        ? `Created ${this.createdAtTimeAgo}`
+        : `Created at: ${this.dateFormat(this.createdAtTimestamp)}`;
+    },
+    lastActivity() {
+      const lastActivityTimeDiff =
+        Date.now() - this.lastActivityTimestamp * 1000;
+      const isNotActive = lastActivityTimeDiff > DAY_IN_MILLI_SECONDS * 30;
+      return !isNotActive
+        ? `Last activity ${this.lastActivityAtTimeAgo}`
+        : `Last activity: ${this.dateFormat(this.lastActivityTimestamp)}`;
+    },
+    tooltipText() {
+      return `${this.createdAt}
+              ${this.lastActivity}`;
+    },
+  },
   watch: {
-    timestamp() {
-      this.timeAgo = this.dynamicTime(this.timestamp);
+    lastActivityTimestamp() {
+      this.lastActivityAtTimeAgo = this.dynamicTime(this.lastActivityTimestamp);
+    },
+    createdAtTimestamp() {
+      this.createdAtTimeAgo = this.dynamicTime(this.createdAtTimestamp);
     },
   },
   mounted() {
@@ -46,12 +88,15 @@ export default {
   methods: {
     createTimer() {
       this.timer = setTimeout(() => {
-        this.timeAgo = this.dynamicTime(this.timestamp);
+        this.lastActivityAtTimeAgo = this.dynamicTime(
+          this.lastActivityTimestamp
+        );
+        this.createdAtTimeAgo = this.dynamicTime(this.createdAtTimestamp);
         this.createTimer();
       }, this.refreshTime());
     },
     refreshTime() {
-      const timeDiff = Date.now() - this.timestamp * 1000;
+      const timeDiff = Date.now() - this.lastActivityTimestamp * 1000;
       if (timeDiff > DAY_IN_MILLI_SECONDS) {
         return DAY_IN_MILLI_SECONDS;
       }
@@ -71,5 +116,9 @@ export default {
   font-weight: var(--font-weight-normal);
   line-height: var(--space-normal);
   margin-left: auto;
+
+  &:hover {
+    color: var(--b-900);
+  }
 }
 </style>

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

@@ -87,7 +87,10 @@
       </p>
       <div class="conversation--meta">
         <span class="timestamp">
-          <time-ago :timestamp="chat.timestamp" />
+          <time-ago
+            :last-activity-timestamp="chat.timestamp"
+            :created-at-timestamp="chat.created_at"
+          />
         </span>
         <span class="unread">{{ unreadCount > 9 ? '9+' : unreadCount }}</span>
       </div>