Conversation sidebar: Show last message and conversation created timestamps in the previous converastions accordion, with tooltip for full timestamps.

- Update util getRelativeTime to return shorter relative time strings instead of full date strings.

frontend/src/features/conversation/sidebar/PreviousConversations.vue

@@ -8,7 +8,7 @@
   >
     {{ $t('conversation.sidebar.noPreviousConvo') }}
   </div>
-  <div v-else class="space-y-3">
+  <div v-else class="space-y-1">
     <router-link
       v-for="conversation in conversationStore.current.previous_conversations"
       :key="conversation.uuid"
@@ -30,9 +30,31 @@
             {{ conversation.last_message }}
           </span>
         </div>
-        <span class="text-xs text-muted-foreground" v-if="conversation.last_message_at">
-          {{ format(new Date(conversation.last_message_at), 'h') + ' h' }}
-        </span>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div class="flex gap-1 items-center text-xs text-muted-foreground">
+              <span v-if="conversation.created_at">
+                {{ getRelativeTime(new Date(conversation.created_at)) }}
+              </span>
+              <span>•</span>
+              <span v-if="conversation.last_message_at">
+                {{ getRelativeTime(new Date(conversation.last_message_at)) }}
+              </span>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>
+            <div class="space-y-1 text-xs">
+              <p>
+                {{ $t('globals.terms.createdAt') }}:
+                {{ formatFullTimestamp(new Date(conversation.created_at)) }}
+              </p>
+              <p v-if="conversation.last_message_at">
+                {{ $t('globals.terms.lastMessageAt') }}:
+                {{ formatFullTimestamp(new Date(conversation.last_message_at)) }}
+              </p>
+            </div>
+          </TooltipContent>
+        </Tooltip>
       </div>
     </router-link>
   </div>
@@ -40,7 +62,8 @@
 
 <script setup>
 import { useConversationStore } from '@/stores/conversation'
-import { format } from 'date-fns'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { formatFullTimestamp, getRelativeTime } from '@/utils/datetime'
 
 const conversationStore = useConversationStore()
 </script>

frontend/src/utils/datetime.js

@@ -1,16 +1,17 @@
-import { format, differenceInMinutes, differenceInHours, differenceInDays } from 'date-fns'
+import { format, differenceInMinutes, differenceInHours, differenceInDays, differenceInYears } from 'date-fns'
 
 export function getRelativeTime (timestamp, now = new Date()) {
   try {
     const mins = differenceInMinutes(now, timestamp)
     const hours = differenceInHours(now, timestamp)
     const days = differenceInDays(now, timestamp)
+    const years = differenceInYears(now, timestamp)
 
-    if (mins === 0) return 'Just now'
-    if (mins < 60) return `${mins} mins ago`
-    if (hours < 24) return `${hours} hrs ago`
-    if (days < 7) return `${days} days ago`
-    return format(timestamp, 'MMMM d, yyyy h:mm a')
+    if (mins === 0) return 'now'
+    if (mins < 60) return `${mins}m`
+    if (hours < 24) return `${hours}h`
+    if (days < 365) return `${days}d`
+    return `${years}y`
   } catch (error) {
     console.error('Error parsing time', error, 'timestamp', timestamp)
     return ''

i18n/en.json

@@ -177,6 +177,7 @@
   "globals.terms.usage": "Usage",
   "globals.terms.createdAt": "Created At",
   "globals.terms.updatedAt": "Updated At",
+  "globals.terms.lastMessageAt": "Last message at",
   "globals.terms.pickDate": "Pick a date",
   "globals.terms.time": "Time",
   "globals.terms.listValues": "List values",