Adds Messaging streaming

src/views/messages/Message.vue

@@ -13,7 +13,7 @@
         <div class="flex justify-between items-center">
           <div>
             <span class="font-semibold font-sans mr-2">{{ message.createdBy }}</span>
-            <span class="text-sm font-sans text-gray-700">il y a 3 heures</span>
+            <span class="text-sm font-sans text-gray-700">{{ time_ago(message.createdAt) }}</span>
           </div>
           <v-menu>
             <template v-slot:activator="{ props }">
@@ -39,32 +39,36 @@
           {{ message.value }}
         </div>
       </div>
-    </div>   
+    </div>
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    message: {
-      type: Object,
-      required: true
-    }
-  },
-  methods: {
-    editMessage(message) {
-      // Logic for editing the message
-      console.log('Edit message', message);
-    },
-    deleteMessage(message) {
-      // Logic for deleting the message
-      console.log('Delete message', message);
-    },
-    reportMessage(message) {
-      // Logic for reporting the message
-      console.log('Report message', message);
-    }
+<script setup>
+
+import {defineProps} from "vue"
+import {time_ago} from "@/internal_time_ago.js";
+
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true
   }
+});
+
+
+function editMessage(message) {
+  // Logic for editing the message
+  console.log('Edit message', message);
+}
+
+function deleteMessage(message) {
+  // Logic for deleting the message
+  console.log('Delete message', message);
+}
+
+function reportMessage(message) {
+  // Logic for reporting the message
+  console.log('Report message', message);
 }
 </script>