add timeago

src/css/app.scss

@@ -219,3 +219,11 @@ input {
   width: 0.8em;
   height: 0.8em;
 }
+
+.bull-date {
+    color: $dark-text-color;
+}
+.bull-date::before {
+    content: "● ";
+    margin-left: 5px;
+}

src/pages/Chat.vue

@@ -33,6 +33,7 @@
             <!-- Display the role of the user or the AI -->
             <q-item-label class="text-semibold q-mb-md">
               {{message.role}}
+              <span class="bull-date">{{formatDate(message.timestamp)}}</span>
             </q-item-label>
             <!-- Display any attachments -->
             <q-item-label v-if="message.attachments && message.attachments.length > 0">
@@ -153,7 +154,7 @@
 
 <script setup>
 import 'highlight.js/styles/devibeans.css';
-import { copyToClipboard, useQuasar } from 'quasar';
+import { copyToClipboard, useQuasar, date } from 'quasar';
 import { nextTick, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -548,6 +549,34 @@ async function clearCookies() {
 function openKnowledgeUploader() {
   showKnowledgeUploaderRef.value = true;
 }
+
+function formatDate(d) {
+  if(!d) d = new Date();
+  const currentDate = new Date();
+  const timeDiff = currentDate.getTime()/1000 - d.getTime()/1000;
+
+  let unit = "hour";
+  let txtUnit = "h"
+  if(timeDiff < 60) {
+    unit = "second"
+    txtUnit = "s"
+  } else if(timeDiff < 3600) {
+    unit = "minute"
+    txtUnit = "m"
+  } else if(timeDiff < 86400) {
+    unit = "hour"
+    txtUnit = "h"
+  } else if(timeDiff < 2592000) {
+    unit = "day"
+    txtUnit = "d"
+  } else if(timeDiff > 2592000) {
+    unit = "month"
+    txtUnit = "month"
+  }
+
+  const diff = date.getDateDiff(currentDate, d, unit)
+  return diff + txtUnit;
+}
 </script>
 <style>
 /* Ensure message input expands to fill available space */