show message info when clicking inbound timestamp or outbound delivery state

meshchat.py

@@ -1074,6 +1074,7 @@ class ReticulumMeshChat:
                     "is_incoming": db_lxmf_message.is_incoming,
                     "state": db_lxmf_message.state,
                     "progress": db_lxmf_message.progress,
+                    "method": db_lxmf_message.method,
                     "delivery_attempts": db_lxmf_message.delivery_attempts,
                     "next_delivery_attempt_at": db_lxmf_message.next_delivery_attempt_at,
                     "title": db_lxmf_message.title,

package-lock.json

@@ -13,6 +13,7 @@
         "click-outside-vue3": "^4.0.1",
         "electron-prompt": "^1.7.0",
         "mitt": "^3.0.1",
+        "moment": "^2.30.1",
         "vis-data": "^7.1.9",
         "vis-network": "^9.1.9",
         "vite": "^5.4.0",
@@ -3668,6 +3669,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

package.json

@@ -97,6 +97,7 @@
     "click-outside-vue3": "^4.0.1",
     "electron-prompt": "^1.7.0",
     "mitt": "^3.0.1",
+    "moment": "^2.30.1",
     "vis-data": "^7.1.9",
     "vis-network": "^9.1.9",
     "vite": "^5.4.0",

src/frontend/components/messages/ConversationViewer.vue

@@ -140,7 +140,7 @@
 
                             <!-- state label -->
                             <div class="my-auto space-x-1">
-                                <span>{{ chatItem.lxmf_message.state }}</span>
+                                <span @click="showSentMessageInfo(chatItem.lxmf_message)" class="cursor-pointer">{{ chatItem.lxmf_message.state }}</span>
                                 <span v-if="chatItem.lxmf_message.state === 'outbound' && chatItem.lxmf_message.delivery_attempts >= 1">(attempt {{ chatItem.lxmf_message.delivery_attempts + 1 }})</span>
                                 <span v-if="chatItem.lxmf_message.state === 'sending'">{{ chatItem.lxmf_message.progress.toFixed(0) }}%</span>
                                 <a v-if="chatItem.lxmf_message.state === 'failed'" @click="retrySendingMessage(chatItem)" class="cursor-pointer underline text-blue-500">retry?</a>
@@ -177,7 +177,7 @@
                         <span v-if="chatItem.is_actions_expanded && chatItem.lxmf_message.quality && chatItem.lxmf_message.rssi && chatItem.lxmf_message.snr">Signal {{ chatItem.lxmf_message.quality }}% • RSSI {{ chatItem.lxmf_message.rssi }} • SNR {{ chatItem.lxmf_message.snr }}</span>
 
                         <!-- received timestamp -->
-                        <span>{{ formatSecondsAgo(chatItem.lxmf_message.timestamp) }}</span>
+                        <span @click="showReceivedMessageInfo(chatItem.lxmf_message)" class="cursor-pointer">{{ formatSecondsAgo(chatItem.lxmf_message.timestamp) }}</span>
 
                     </div>
 
@@ -1175,6 +1175,19 @@ export default {
             this.$emit("reload-conversations");
 
         },
+        showSentMessageInfo: function(lxmfMessage) {
+            DialogUtils.alert([
+                `Created: ${Utils.convertDateTimeToLocalDateTimeString(new Date(lxmfMessage.created_at))}`,
+                `Method: ${lxmfMessage.method ?? "unknown"}`,
+            ].join("\n"));
+        },
+        showReceivedMessageInfo: function(lxmfMessage) {
+            DialogUtils.alert([
+                `Sent: ${Utils.convertUnixMillisToLocalDateTimeString(lxmfMessage.timestamp * 1000)}`,
+                `Received: ${Utils.convertDateTimeToLocalDateTimeString(new Date(lxmfMessage.created_at))}`,
+                `Method: ${lxmfMessage.method ?? "unknown"}`,
+            ].join("\n"));
+        },
     },
     computed: {
         isMobile() {

src/frontend/js/Utils.js

@@ -1,3 +1,5 @@
+import moment from "moment";
+
 class Utils {
 
     static formatBytes(bytes) {
@@ -84,6 +86,14 @@ class Utils {
         return `${paddedMinutes}:${paddedSeconds}`;
     }
 
+    static convertUnixMillisToLocalDateTimeString(unixTimestampInMilliseconds) {
+        return moment(unixTimestampInMilliseconds, "x").local().format('YYYY-MM-DD hh:mm A')
+    }
+
+    static convertDateTimeToLocalDateTimeString(dateTime) {
+        return this.convertUnixMillisToLocalDateTimeString(dateTime.getTime());
+    }
+
     static arrayBufferToBase64(arrayBuffer) {
         var binary = '';
         var bytes = new Uint8Array(arrayBuffer);