add button to cancel messages being sent

meshchat.py

@@ -1536,6 +1536,30 @@ class ReticulumMeshChat:
                     "message": "Sending Failed: {}".format(str(e)),
                 }, status=503)
 
+        # cancel sending lxmf message
+        @routes.post("/api/v1/lxmf-messages/{hash}/cancel")
+        async def index(request):
+
+            # get path params
+            hash = request.match_info.get("hash", None)
+
+            # convert hash to bytes
+            hash_as_bytes = bytes.fromhex(hash)
+
+            # cancel outbound message by lxmf message hash
+            self.message_router.cancel_outbound(hash_as_bytes)
+
+            # get lxmf message from database
+            lxmf_message = None
+            db_lxmf_message = database.LxmfMessage.get_or_none(database.LxmfMessage.hash == hash)
+            if db_lxmf_message is not None:
+                lxmf_message = self.convert_db_lxmf_message_to_dict(db_lxmf_message)
+
+            return web.json_response({
+                "message": "ok",
+                "lxmf_message": lxmf_message,
+            })
+
         # delete lxmf message
         @routes.delete("/api/v1/lxmf-messages/{hash}")
         async def index(request):

src/frontend/components/messages/ConversationViewer.vue

@@ -175,6 +175,7 @@
                                     <span v-if="chatItem.lxmf_message.state === 'sent' && chatItem.lxmf_message.method === 'propagated'">to propagation node</span>
                                     <span v-if="chatItem.lxmf_message.state === 'sending'">{{ chatItem.lxmf_message.progress.toFixed(0) }}%</span>
                                 </span>
+                                <a v-if="chatItem.lxmf_message.state === 'outbound' || chatItem.lxmf_message.state === 'sending' || chatItem.lxmf_message.state === 'sent'" @click="cancelSendingMessage(chatItem)" class="ml-1 cursor-pointer underline text-blue-500">cancel?</a>
                                 <a v-if="chatItem.lxmf_message.state === 'failed'" @click="retrySendingMessage(chatItem)" class="ml-1 cursor-pointer underline text-blue-500">retry?</a>
                             </div>
 
@@ -1115,6 +1116,38 @@ export default {
                 this.isSendingMessage = false;
             }
 
+        },
+        async cancelSendingMessage(chatItem) {
+
+            // get lxmf message hash else do nothing
+            const lxmfMessageHash = chatItem.lxmf_message.hash;
+            if(!lxmfMessageHash){
+                return;
+            }
+
+            try {
+
+                // cancel sending lxmf message
+                const response = await window.axios.post(`/api/v1/lxmf-messages/${lxmfMessageHash}/cancel`);
+
+                // get lxmf message from response
+                const lxmfMessage = response.data.lxmf_message;
+                if(!lxmfMessage){
+                    return;
+                }
+
+                // update lxmf message in ui
+                this.onLxmfMessageUpdated(lxmfMessage);
+
+            } catch(e) {
+
+                // show error
+                const message = e.response?.data?.message ?? "failed to cancel message";
+                DialogUtils.alert(message);
+                console.log(e);
+
+            }
+
         },
         async retrySendingMessage(chatItem) {