@theotherwillembotha/node-red-whatsapp 0.0.55 → 0.3.0

package/build/Nodes.html

@@ -7,173 +7,418 @@
     You have been warned.
     
 -->
-
 <!-- WhatsappAccountConfigNode -->
+        
+    <style>
+        .theotherwillembotha-compact-table li {
+            padding-top: 4px;
+            padding-bottom: 4px;
+        }
+    </style>
+
+
+    <script type="text/javascript">
+    // a simple client for interfaceing with the WhatsappService on the backend. Note: this needs to be moved to its own file.
+    let waService = {
+        unlinkAccount : function(nodeID, localConnectionId){
+            return new Promise((resolve, fail) => {
+
+            let request = JSON.stringify({
+                nodeID: nodeID,
+                localConnectionId: localConnectionId
+            });
+
+            $.ajax({
+                url: "whatsapp/unlinkaccount",
+                    type: "POST",
+                    data: request,
+                    contentType: "application/json; charset=utf-8",
+                    success: (response) => {
+                        resolve(response);
+                    },
+                    error: (jqXHR, textStatus, errorThrown) => {
+                        fail(errorThrown);
+                    }
+                });
+            });
+        },
+
+        getConnectionDetails:function(nodeID, localConnectionId){
+            return new Promise((resolve, fail) => {
+                let request = JSON.stringify({
+                    nodeID: nodeID,
+                    localConnectionId: localConnectionId
+                });
+
+                $.ajax({
+                    url: "whatsapp/connectiondetails",
+                    type: "POST",
+                    data: request,
+                    contentType: "application/json; charset=utf-8",
+                    success: (response) => {
+                        resolve(response);
+                    },
+                    error: (jqXHR, textStatus, errorThrown) => {
+                        fail(errorThrown);
+                    }
+                });
+            });
+        },
+
+        createGroup:function(nodeID, localConnectionId, name){
+            console.log("create group! " + name);
+
+            return new Promise((resolve, fail) => {
+                let request = JSON.stringify({
+                    nodeID: nodeID,
+                    localConnectionId: localConnectionId,
+                    groupName: name
+                });
+
+                $.ajax({
+                    url: "whatsapp/creategroup",
+                    type: "POST",
+                    data: request,
+                    contentType: "application/json; charset=utf-8",
+                    success: (response) => {
+                        resolve(response);
+                    },
+                    error: (jqXHR, textStatus, errorThrown) => {
+                        fail(errorThrown);
+                    }
+                });
+            });
+        },
+
+        getGroups:function(nodeID, localConnectionId){
+            return new Promise((resolve, fail) => {
+                let request = JSON.stringify({
+                    nodeID: nodeID,
+                    localConnectionId: localConnectionId
+                });
+
+                $.ajax({
+                    url: "whatsapp/getgroups",
+                    type: "POST",
+                    data: request,
+                    contentType: "application/json; charset=utf-8",
+                    success: (response) => {
+                        resolve(response);
+                    },
+                    error: (jqXHR, textStatus, errorThrown) => {
+                        fail(errorThrown);
+                    }
+                });
+            });
+        },
+
+        addUserToGroup:function(nodeID, localConnectionId, userId, groupId, role){
+            return new Promise((resolve, fail) => {
+                let request = JSON.stringify({
+                    nodeID: nodeID,
+                    localConnectionId: localConnectionId,
+                    userId: userId,
+                    groupId: groupId,
+                    role:role
+                });
+
+                $.ajax({
+                    url: "whatsapp/groupadduser",
+                    type: "POST",
+                    data: request,
+                    contentType: "application/json; charset=utf-8",
+                    success: (response) => {
+                        resolve(response);
+                    },
+                    error: (jqXHR, textStatus, errorThrown) => {
+                        fail(errorThrown);
+                    }
+                });
+            });
+        },
+
+        updateUserInGroup:function(nodeID, localConnectionId, userId, groupId, role){
+            console.log("update user in group.");
+            return new Promise((resolve, fail) => {
+                let request = JSON.stringify({
+                    nodeID: nodeID,
+                    localConnectionId: localConnectionId,
+                    userId: userId,
+                    groupId: groupId,
+                    role:role
+                });
+
+                $.ajax({
+                    url: "whatsapp/groupupdateuser",
+                    type: "POST",
+                    data: request,
+                    contentType: "application/json; charset=utf-8",
+                    success: (response) => {
+                        resolve(response);
+                    },
+                    error: (jqXHR, textStatus, errorThrown) => {
+                        fail(errorThrown);
+                    }
+                });
+            });
+
+        },
+
+        removeUserFromGroup:function(nodeID, localConnectionId, userId, groupId){
+            console.log("removeUserFromGroup", nodeID, localConnectionId, userId, groupId);
+            return new Promise((resolve, fail) => {
+                let request = JSON.stringify({
+                    nodeID: nodeID,
+                    localConnectionId: localConnectionId,
+                    userId: userId,
+                    groupId: groupId
+                });
+
+                $.ajax({
+                    url: "whatsapp/groupremoveuser",
+                    type: "POST",
+                    data: request,
+                    contentType: "application/json; charset=utf-8",
+                    success: (response) => {
+                        resolve(response);
+                    },
+                    error: (jqXHR, textStatus, errorThrown) => {
+                        fail(errorThrown);
+                    }
+                });
+            });
+        },
+
+        getAccounts: function() {
+            return new Promise((resolve, fail) => {
+                $.ajax({
+                    url: "whatsapp/accounts",
+                    type: "GET",
+                    success: (response) => { resolve(response); },
+                    error: (jqXHR, textStatus, errorThrown) => { fail(errorThrown); }
+                });
+            });
+        },
+    }
+    </script>
+
+        
+<!-- WhatsappGroupConfigNode -->
+        
+    <style>
+
+    </style>
+
+        
+<!-- WhatsappSendMessageNode -->
+        
+    <style>
+        .wa-send-action-fields .form-row { margin-bottom: 3px; }
+    </style>
+    <script>
+    var WA_SEND_TYPES = {
+        text: {
+            label: "Text",
+            icon:  "fa-font",
+            fields: [
+                { key: "value", label: "Text",      types: ["msg", "flow", "global", "str"] }
+            ]
+        },
+        image: {
+            label: "Image",
+            icon:  "fa-image",
+            fields: [
+                { key: "value", label: "Image",     types: ["msg", "flow", "global"] }
+            ]
+        },
+        video: {
+            label: "Video",
+            icon:  "fa-video-camera",
+            fields: [
+                { key: "value", label: "Video",     types: ["msg", "flow", "global"] }
+            ]
+        },
+        document: {
+            label: "Document",
+            icon:  "fa-file",
+            fields: [
+                { key: "value",            label: "File",      types: ["msg", "flow", "global"] },
+                { key: "documentName",     label: "Name",      types: ["msg", "flow", "global", "str"] },
+                { key: "documentMimetype", label: "Mime Type", types: ["msg", "flow", "global", "str"] }
+            ]
+        }
+    };
+    </script>
+
+        
+<!-- logger -->
+        
 <style>
-    .theotherwillembotha-compact-table li {
-      padding-top: 4px;
-      padding-bottom: 4px;
+  .editorgroupborder {
+      border-width:1px;
+      border-style:solid;
+      border-color:lightgray;
+      padding: 3px;
+      margin-top: 2px;
+      margin-bottom: 2px;
+  }
+
+  .editorsectionheading {
+      font-weight: 600;
+      margin-bottom:1px !important; 
+      margin-top:6px !important; 
+  }
+
+  .nomargin {
+      margin-bottom:1px !important; 
+      margin-top:1px !important; 
+  }
+
+  .slidecontainer {
+    width: 100%;
+  }
+
+  .slider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 25px;
+    background: #d3d3d3;
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: .2s;
+    transition: opacity .2s;
+  }
+  
+  .slider:hover {
+    opacity: 1;
+  }
+  
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 25px;
+    height: 25px;
+    background: #04AA6D;
+    cursor: pointer;
+  }
+  
+  .slider::-moz-range-thumb {
+    width: 25px;
+    height: 25px;
+    background: #04AA6D;
+    cursor: pointer;
+  }
+
+    .towb_editorlabel {
+        width: 120px !important;
+    }
+    input.towb_editorfield, select.towb_editorfield, textarea.towb_editorfield {
+        width: 70% !important;
+    }
+    input.towb_editorfield_short, select.towb_editorfield_short {
+        width: 30% !important;
     }
 
 </style>
+
 <script type="text/javascript">
-    // a simple client for interfaceing with the WhatsappService on the backend. Note: this needs to be moved to its own file.
-    let waService = {
-      unlinkAccount: function(nodeID, localConnectionId) {
-        return new Promise((resolve, fail) => {
-          let request = JSON.stringify({
-            nodeID: nodeID,
-            localConnectionId: localConnectionId
-          });
-          $.ajax({
-            url: "whatsapp/unlinkaccount",
-            type: "POST",
-            data: request,
-            contentType: "application/json; charset=utf-8",
-            success: (response) => {
-              resolve(response);
-            },
-            error: (jqXHR, textStatus, errorThrown) => {
-              fail(errorThrown);
-            }
-          });
-        });
-      },
-      getConnectionDetails: function(nodeID, localConnectionId) {
-        return new Promise((resolve, fail) => {
-          let request = JSON.stringify({
-            nodeID: nodeID,
-            localConnectionId: localConnectionId
-          });
-          $.ajax({
-            url: "whatsapp/connectiondetails",
-            type: "POST",
-            data: request,
-            contentType: "application/json; charset=utf-8",
-            success: (response) => {
-              resolve(response);
-            },
-            error: (jqXHR, textStatus, errorThrown) => {
-              fail(errorThrown);
-            }
-          });
-        });
-      },
-      createGroup: function(nodeID, localConnectionId, name) {
-        console.log("create group! " + name);
-        return new Promise((resolve, fail) => {
-          let request = JSON.stringify({
-            nodeID: nodeID,
-            localConnectionId: localConnectionId,
-            groupName: name
-          });
-          $.ajax({
-            url: "whatsapp/creategroup",
-            type: "POST",
-            data: request,
-            contentType: "application/json; charset=utf-8",
-            success: (response) => {
-              resolve(response);
-            },
-            error: (jqXHR, textStatus, errorThrown) => {
-              fail(errorThrown);
-            }
-          });
-        });
-      },
-      getGroups: function(nodeID, localConnectionId) {
-        return new Promise((resolve, fail) => {
-          let request = JSON.stringify({
-            nodeID: nodeID,
-            localConnectionId: localConnectionId
-          });
-          $.ajax({
-            url: "whatsapp/getgroups",
-            type: "POST",
-            data: request,
-            contentType: "application/json; charset=utf-8",
-            success: (response) => {
-              resolve(response);
-            },
-            error: (jqXHR, textStatus, errorThrown) => {
-              fail(errorThrown);
-            }
-          });
-        });
-      },
-      addUserToGroup: function(nodeID, localConnectionId, userId, groupId, role) {
-        return new Promise((resolve, fail) => {
-          let request = JSON.stringify({
-            nodeID: nodeID,
-            localConnectionId: localConnectionId,
-            userId: userId,
-            groupId: groupId,
-            role: role
-          });
-          $.ajax({
-            url: "whatsapp/groupadduser",
-            type: "POST",
-            data: request,
-            contentType: "application/json; charset=utf-8",
-            success: (response) => {
-              resolve(response);
+
+    // CSS
+    dropdownStyles = `
+    .loggertype-dropdown {
+        position: absolute;
+        background: white;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+        max-height: 150px;
+        overflow-y: auto;
+        z-index: 1000;
+        min-width: 150px;
+    }
+    .loggertype-dropdown .dropdown-item {
+        padding: 6px 12px;
+        cursor: pointer;
+    }
+    .loggertype-dropdown .dropdown-item:hover {
+        background: #f0f0f0;
+    }
+    `;
+    $('<style>').text(dropdownStyles).appendTo('head');
+
+</script>
+
+
+
+        
+<!-- WhatsappDynamicSendMessageNode -->
+        
+    <style>
+        .wa-dynamic-send-action-fields .form-row { margin-bottom: 3px; }
+    </style>
+    <script>
+    // WA_SEND_TYPES is defined by WhatsappSendMessageNode.html (included in the same page).
+    // Guard against load-order variation with a var declaration — var re-declarations are safe.
+    if (typeof WA_SEND_TYPES === "undefined") {
+        var WA_SEND_TYPES = {
+            text: {
+                label: "Text",
+                icon:  "fa-font",
+                fields: [
+                    { key: "value", label: "Text",      types: ["msg", "flow", "global", "str"] }
+                ]
             },
-            error: (jqXHR, textStatus, errorThrown) => {
-              fail(errorThrown);
-            }
-          });
-        });
-      },
-      updateUserInGroup: function(nodeID, localConnectionId, userId, groupId, role) {
-        console.log("update user in group.");
-        return new Promise((resolve, fail) => {
-          let request = JSON.stringify({
-            nodeID: nodeID,
-            localConnectionId: localConnectionId,
-            userId: userId,
-            groupId: groupId,
-            role: role
-          });
-          $.ajax({
-            url: "whatsapp/groupupdateuser",
-            type: "POST",
-            data: request,
-            contentType: "application/json; charset=utf-8",
-            success: (response) => {
-              resolve(response);
+            image: {
+                label: "Image",
+                icon:  "fa-image",
+                fields: [
+                    { key: "value", label: "Image",     types: ["msg", "flow", "global"] }
+                ]
             },
-            error: (jqXHR, textStatus, errorThrown) => {
-              fail(errorThrown);
-            }
-          });
-        });
-      },
-      removeUserFromGroup: function(nodeID, localConnectionId, userId, groupId) {
-        console.log("removeUserFromGroup", nodeID, localConnectionId, userId, groupId);
-        return new Promise((resolve, fail) => {
-          let request = JSON.stringify({
-            nodeID: nodeID,
-            localConnectionId: localConnectionId,
-            userId: userId,
-            groupId: groupId
-          });
-          $.ajax({
-            url: "whatsapp/groupremoveuser",
-            type: "POST",
-            data: request,
-            contentType: "application/json; charset=utf-8",
-            success: (response) => {
-              resolve(response);
+            video: {
+                label: "Video",
+                icon:  "fa-video-camera",
+                fields: [
+                    { key: "value", label: "Video",     types: ["msg", "flow", "global"] }
+                ]
             },
-            error: (jqXHR, textStatus, errorThrown) => {
-              fail(errorThrown);
+            document: {
+                label: "Document",
+                icon:  "fa-file",
+                fields: [
+                    { key: "value",            label: "File",      types: ["msg", "flow", "global"] },
+                    { key: "documentName",     label: "Name",      types: ["msg", "flow", "global", "str"] },
+                    { key: "documentMimetype", label: "Mime Type", types: ["msg", "flow", "global", "str"] }
+                ]
             }
-          });
-        });
-      },
+        };
     }
+    </script>
 
-</script>
+        
+<!-- WhatsappReceiveMessageNode -->
+        
+    <style>
+    </style>
+    <script>
+    const WA_ACCEPT_FIELDS = [
+        { id: "Text",         icon: "fa-font",         label: "Text",          defaultEnabled: true  },
+        { id: "ExtendedText", icon: "fa-align-left",   label: "Extended Text", defaultEnabled: true  },
+        { id: "Image",        icon: "fa-image",        label: "Image",         defaultEnabled: true  },
+        { id: "Video",        icon: "fa-video-camera", label: "Video",         defaultEnabled: true  },
+        { id: "Album",        icon: "fa-th-large",     label: "Album",         defaultEnabled: true  },
+        { id: "Document",     icon: "fa-file",         label: "Document",      defaultEnabled: false },
+        { id: "Contact",      icon: "fa-address-card", label: "Contact",       defaultEnabled: false },
+        { id: "Template",     icon: "fa-th-list",      label: "Template",      defaultEnabled: false },
+        { id: "Location",     icon: "fa-map-marker",   label: "Location",      defaultEnabled: false },
+        { id: "Event",         icon: "fa-calendar",         label: "Event",          defaultEnabled: false },
+        { id: "EventResponse", icon: "fa-calendar-check-o", label: "Event Response", defaultEnabled: false },
+        { id: "Sticker",       icon: "fa-sticky-note-o",    label: "Sticker",        defaultEnabled: false },
+    ];
+    </script>
+
+        
 <script type="text/javascript">
     RED.nodes.registerType('WhatsappAccountConfigNode', {
       category: 'config',
@@ -199,8 +444,9 @@
         {
           let node = this;
           let $btn = $("#wa-account-link-btn");
+          let isLinked = document.getElementById("node-config-input-accountLinked").checked;
           // if the account is already linked, show the Unlink state
-          if (document.getElementById("node-config-input-accountLinked").checked) {
+          if (isLinked) {
             $btn.html('<i class="fa fa-unlink"></i> Unlink Account');
           }
           // if we don't have a local connectionId for this node, generate one.
@@ -208,10 +454,44 @@
             $("#node-config-input-localConnectionId").val(crypto.randomUUID());
           }
           let localConnectionId = $("#node-config-input-localConnectionId").val();
-          $btn.on("click", () => {
+          // --- Claim Account section ---
+          // Only offer claiming if this node is not already linked.
+          if (!isLinked) {
+            waService.getAccounts().then(function(accounts) {
+              let unclaimed = accounts.filter(function(a) {
+                return !a.claimed;
+              });
+              if (unclaimed.length === 0) return;
+              let $claimSelect = $("#wa-claim-select");
+              $claimSelect.empty();
+              unclaimed.forEach(function(account) {
+                let label = account.name && account.phoneNumber ? account.name + " (+" + account.phoneNumber + ")" : account.name || account.phoneNumber || account.key;
+                if (!account.connected) label += " \u26a0 disconnected";
+                $('<option>').val(account.key).text(label).appendTo($claimSelect);
+              });
+              $("#wa-claim-section").show();
+              $("#wa-or-separator").show();
+            }).catch(function() {
+              /* backend not ready — ignore */ });
+          }
+          $("#wa-claim-btn").on("click", function() {
+            let claimedKey = $("#wa-claim-select").val();
+            if (!claimedKey) return;
+            // adopt the claimed account's localConnectionId and mark as linked
+            $("#node-config-input-localConnectionId").val(claimedKey);
+            $("#node-config-input-accountLinked").prop("checked", true);
+            $("#wa-claim-section").hide();
+            $("#wa-or-separator").hide();
+            $btn.html('<i class="fa fa-unlink"></i> Unlink Account');
+            $("#wa-account-qrcode").html("<p>\u2714 Account claimed. Deploy to activate.</p>");
+          });
+          // --- Link Account button ---
+          $btn.on("click", function() {
             $btn.prop("disabled", true);
+            // re-read localConnectionId in case it was overridden by a claim
+            localConnectionId = $("#node-config-input-localConnectionId").val();
             if (document.getElementById("node-config-input-accountLinked").checked) {
-              waService.unlinkAccount(node.id, localConnectionId).then(response => {
+              waService.unlinkAccount(node.id, localConnectionId).then(function(response) {
                 $btn.prop("disabled", false);
                 $btn.html('<i class="fa fa-link"></i> Link Account');
                 document.getElementById("node-config-input-accountLinked").checked = false;
@@ -283,6 +563,21 @@
             <input type="checkbox" id="node-config-input-accountLinked">
         </div>
 
+        <div class="form-row" id="wa-claim-section" style="display:none">
+            <label><i class="fa fa-mobile"></i> Claim</label>
+            <div style="width:70%; display:inline-flex; align-items:center;">
+                <select id="wa-claim-select" style="flex-grow:1; min-width:0;"></select>
+                <button type="button" id="wa-claim-btn" class="red-ui-button" style="margin-left:8px; flex-shrink:0;">
+                    <i class="fa fa-check"></i> Claim
+                </button>
+            </div>
+        </div>
+
+        <div class="form-row" id="wa-or-separator" style="display:none">
+            <label></label>
+            <span style="color:#aaa; font-style:italic;">— or link a new account —</span>
+        </div>
+
         <div class="form-row">
             <label></label>
             <button type="button" id="wa-account-link-btn" class="red-ui-button">
@@ -318,9 +613,7 @@ To unlink the device, open the editor and click **Unlink Account**, then remove
 
 Credentials are persisted to `/data/whatsapp/<localConnectionId>/` if the `/data` directory exists (standard Node-RED Docker image), otherwise to `./whatsapp/<localConnectionId>/` relative to the Node-RED working directory.
 </script>
-<!-- WhatsappGroupConfigNode -->
-<style>
-</style>
+
 <script type="text/javascript">
     RED.nodes.registerType('WhatsappGroupConfigNode', {
       category: 'config',
@@ -591,8 +884,9 @@ Credentials are persisted to `/data/whatsapp/<localConnectionId>/` if the `/data
               options: []
             }]
           });
-          // set initial button state
+          // set initial button state and load groups for the already-selected account
           setCreateButtonEnabled(accountConfigInput.val());
+          updateGroupList(accountConfigInput.val());
           // show inline create section
           $("#wa-group-new-btn").on("click", () => {
             $("#wa-group-new-row").hide();
@@ -705,8 +999,6 @@ Credentials are persisted to `/data/whatsapp/<localConnectionId>/` if the `/data
             </div>
         </div>
 
-
-
     </div>
 </script>
 
@@ -725,119 +1017,7 @@ References a WhatsApp group within a linked account. Used as the target for Send
 
 Click **Create New Group** to create a new WhatsApp group from within Node-RED. The new group will appear in the group dropdown once created.
 </script>
-<!-- WhatsappSendMessageNode -->
-<style>
-</style>
-<script>
-    const WA_SEND_FIELDS = [{
-      id: "text",
-      icon: "fa-font",
-      label: "Send Text",
-      types: ["msg", "flow", "global", "str"]
-    }, {
-      id: "image",
-      icon: "fa-image",
-      label: "Send Image",
-      types: ["msg", "flow", "global"]
-    }, ];
-
-</script>
-<!-- logger -->
-<style>
-    .editorgroupborder {
-      border-width: 1px;
-      border-style: solid;
-      border-color: lightgray;
-      padding: 3px;
-      margin-top: 2px;
-      margin-bottom: 2px;
-    }
-
-    .editorsectionheading {
-      font-weight: 600;
-      margin-bottom: 1px !important;
-      margin-top: 6px !important;
-    }
-
-    .nomargin {
-      margin-bottom: 1px !important;
-      margin-top: 1px !important;
-    }
-
-    .slidecontainer {
-      width: 100%;
-    }
-
-    .slider {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 100%;
-      height: 25px;
-      background: #d3d3d3;
-      outline: none;
-      opacity: 0.7;
-      -webkit-transition: .2s;
-      transition: opacity .2s;
-    }
-
-    .slider:hover {
-      opacity: 1;
-    }
-
-    .slider::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 25px;
-      height: 25px;
-      background: #04AA6D;
-      cursor: pointer;
-    }
-
-    .slider::-moz-range-thumb {
-      width: 25px;
-      height: 25px;
-      background: #04AA6D;
-      cursor: pointer;
-    }
-
-    .towb_editorlabel {
-      width: 120px !important;
-    }
-
-    .towb_editorfield {
-      width: 70% !important;
-    }
-
-    .towb_editorfield_short {
-      width: 30% !important;
-    }
-
-</style>
-<script type="text/javascript">
-    // CSS
-    dropdownStyles = `
-    .loggertype-dropdown {
-        position: absolute;
-        background: white;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-        max-height: 150px;
-        overflow-y: auto;
-        z-index: 1000;
-        min-width: 150px;
-    }
-    .loggertype-dropdown .dropdown-item {
-        padding: 6px 12px;
-        cursor: pointer;
-    }
-    .loggertype-dropdown .dropdown-item:hover {
-        background: #f0f0f0;
-    }
-    `;
-    $('<style>').text(dropdownStyles).appendTo('head');
 
-</script>
 <script type="text/javascript">
     RED.nodes.registerType('WhatsappSendMessageNode', {
       category: 'whatsapp',
@@ -865,10 +1045,8 @@ Click **Create New Group** to create a new WhatsApp group from within Node-RED.
           required: false,
           validate: function(value) {
             try {
-              var payloads = JSON.parse(value || "[]");
-              return payloads.every(function(p) {
-                return !p.enabled || (p.value !== undefined && p.value !== "");
-              });
+              JSON.parse(value || "[]");
+              return true;
             } catch (e) {
               return false;
             }
@@ -894,59 +1072,91 @@ Click **Create New Group** to create a new WhatsApp group from within Node-RED.
           required: true
         },
         metricsReference: {
-          type: 'MetricsConfigNode',
-          required: false
+          required: false,
+          value: '',
+          type: 'DelegatedConfigReferenceNode'
         },
       },
       oneditprepare: function() {
         // **** WhatsappSendMessageNode **** //
         {
           let node = this;
-          let payloads = [];
+          let actionList = $("#wa-send-actions-list");
+          actionList.editableList({
+            sortable: true,
+            removable: true,
+            height: "auto",
+            scrollOnAdd: true,
+            addButton: "Add Message",
+            addItem: function(container, i, action) {
+              action = action || {};
+              let type = action.type || "text";
+              container.css({
+                padding: "6px 4px"
+              });
+              // ── Type row ──────────────────────────────────────────────────────
+              let typeRow = $('<div style="display:flex; align-items:center; gap:8px; margin-bottom:5px;">');
+              let iconEl = $('<i style="width:14px; text-align:center; flex-shrink:0;">').addClass("fa " + (WA_SEND_TYPES[type] ? WA_SEND_TYPES[type].icon : "fa-comment"));
+              let typeSelect = $('<select class="wa-send-action-type" style="flex:0 0 auto;">');
+              Object.keys(WA_SEND_TYPES).forEach(function(key) {
+                typeSelect.append($("<option>").val(key).text(WA_SEND_TYPES[key].label));
+              });
+              typeSelect.val(type);
+              typeRow.append(iconEl).append(typeSelect);
+              container.append(typeRow);
+              // ── Fields container ──────────────────────────────────────────────
+              let fieldsContainer = $('<div class="wa-send-action-fields">');
+              container.append(fieldsContainer);
+              let renderFields = function(selectedType) {
+                fieldsContainer.empty();
+                let typeDef = WA_SEND_TYPES[selectedType];
+                if (!typeDef) return;
+                iconEl.removeClass().addClass("fa " + typeDef.icon);
+                typeDef.fields.forEach(function(field) {
+                  let fieldRow = $('<div class="form-row nomargin" style="display:flex; align-items:center; gap:6px;">');
+                  fieldRow.append($('<label style="width:70px; margin:0; font-size:0.85em; flex-shrink:0;">').text(field.label));
+                  let input = $('<input type="text">').addClass("wa-send-field-" + field.key);
+                  fieldRow.append(input);
+                  fieldsContainer.append(fieldRow);
+                  input.typedInput({
+                    types: field.types
+                  }).typedInput("type", action[field.key + "Type"] || field.types[0]).typedInput("value", action[field.key] || "");
+                  fieldRow.find(".red-ui-typedInput-container").css({
+                    flex: "1",
+                    "min-width": "0",
+                    width: ""
+                  });
+                });
+              };
+              renderFields(type);
+              typeSelect.on("change", function() {
+                // Reset saved values when the type changes so stale data isn't carried over.
+                action = {
+                  type: $(this).val()
+                };
+                renderFields($(this).val());
+              });
+            }
+          });
+          let actions = [];
           try {
-            payloads = JSON.parse(node.payloads || "[]");
+            actions = JSON.parse(node.payloads || "[]");
           } catch (e) {}
-          WA_SEND_FIELDS.forEach(function(field) {
-            let saved = payloads.find(function(p) {
-              return p.id === field.id;
-            }) || {
-              enabled: false,
-              type: field.types[0],
-              value: ""
-            };
-            let row = $('<div class="form-row nomargin">' + '<label style="width:120px;"><i class="fa ' + field.icon + '"></i> ' + field.label + '</label>' + '<div id="wa-send-row-' + field.id + '" style="display:inline-flex; align-items:center; gap:6px; vertical-align:middle; width:calc(100% - 128px);">' + '<input type="checkbox" id="wa-send-enabled-' + field.id + '" style="width:auto; margin:0; flex-shrink:0;">' + '<input type="text" id="wa-send-value-' + field.id + '">' + '</div>' + '</div>');
-            $("#wa-send-payload-rows").append(row);
-            $("#wa-send-value-" + field.id).typedInput({
-              types: field.types
-            }).typedInput("type", saved.type).typedInput("value", saved.value);
-            // typedInput inserts its container as a sibling of the (now hidden) input, making it
-            // a direct flex child — apply flex:1 so it expands to fill the remaining row width.
-            $("#wa-send-row-" + field.id + " .red-ui-typedInput-container").css({
-              "flex": "1",
-              "min-width": "0",
-              "width": ""
-            });
-            $("#wa-send-enabled-" + field.id).prop("checked", saved.enabled);
-            // live validation: highlight the typedInput when checkbox is checked but value is empty.
-            var checkFieldValid = function() {
-              var enabled = $("#wa-send-enabled-" + field.id).prop("checked");
-              var value = $("#wa-send-value-" + field.id).typedInput("value");
-              var invalid = enabled && (!value || value === "");
-              $("#wa-send-row-" + field.id + " .red-ui-typedInput-container").toggleClass("input-error", invalid);
-            };
-            $("#wa-send-enabled-" + field.id).on("change", checkFieldValid);
-            $("#wa-send-value-" + field.id).on("change", checkFieldValid);
-            checkFieldValid();
-          });
+          if (actions.length > 0) {
+            actionList.editableList("addItems", actions);
+          }
         }
         // **** logger **** //
         {
           let node = this;
+          let templateConfig = {};
           // controls.
           let logEnabled = $("#node-input-logEnabled");
           let logTemplateEnabled = $("#node-input-logTemplateOverrideEnabled");
           let logTemplateEnabledSection = $("#section_logTemplateOverrideEnabled");
           let logEnabledSection = $("#section_logEnabled");
+          let loggerSection = $("#section_loggerconfig");
+          loggerSection.hide();
           // functions.
           let getLoggerTypes = async function() {
             let types = [];
@@ -1070,43 +1280,756 @@ Click **Create New Group** to create a new WhatsApp group from within Node-RED.
               loggerEditButton.removeClass("disabled")
             }
           });
-          // lastly, make sure that we set the correct value on the logger selector.
-          updateLoggerSelectorList().then(() => {
-            loggerSelector.val(node.logger);
-            loggerSelector.trigger('change');
+          // Show the logger section only if at least one logger type is registered.
+          // If nodered_logging (or any other logger provider) is not installed, the section stays hidden.
+          getLoggerTypes().then(loggerTypes => {
+            if (loggerTypes.length === 0) return;
+            loggerSection.show();
+            updateLoggerSelectorList().then(() => {
+              loggerSelector.val(node.logger);
+              loggerSelector.trigger('change');
+            });
+          });
+        }
+        // **** metrics **** //
+        {
+          let node = this;
+          let templateConfig = {};
+          let metricsEnabled = $("#node-input-metricsEnabled");
+          let metricsSection = $("#section_metricsconfig");
+          let metricsContainer = metricsEnabled.closest(".editorgroupborder");
+          let metricsEnabledSection = metricsContainer.find("#section_metricsEnabled");
+          metricsSection.hide();
+          let getMetricsProviderTypes = async function() {
+            let types = [];
+            await $.ajax({
+              url: "nodetypeservice/find?tag=MetricsProvider",
+              type: "GET",
+              contentType: "application/json; charset=utf-8",
+              success: (response) => {
+                types = response;
+              },
+              error: (jqXHR, textStatus, errorThrown) => {
+                console.log(jqXHR, textStatus, errorThrown);
+              },
+            });
+            return types;
+          };
+          let getMetricsProviders = async () => {
+            let providers = [];
+            let providerTypes = (await getMetricsProviderTypes()).map(t => t.id);
+            RED.nodes.eachConfig(cfg => {
+              if (providerTypes.includes(cfg.type)) {
+                providers.push({
+                  id: cfg.id,
+                  name: cfg.label(),
+                  type: cfg.type
+                });
+              }
+            });
+            return providers;
+          };
+          let updateMetricsSelectorList = async () => {
+            metricsSelector.empty();
+            (await getMetricsProviders()).forEach(provider => {
+              $('<option value="' + provider.id + '">' + provider.name + '</option>').appendTo(metricsSelector);
+            });
+            $('<option value="_ADD_">none</option>').appendTo(metricsSelector);
+          };
+          metricsEnabled.on('change', function() {
+            if (metricsEnabled.prop("checked")) {
+              metricsEnabledSection.show();
+            } else {
+              metricsEnabledSection.hide();
+            }
+          });
+          let metricsSelector = metricsContainer.find("#metrics-selector");
+          let metricsEditButton = metricsContainer.find("#metrics-edit-btn");
+          let metricsAddButton = metricsContainer.find("#metrics-add-btn");
+          metricsEditButton.on('click', async function(event) {
+            event.stopPropagation();
+            if (metricsEditButton.hasClass("disabled")) return;
+            let selectedProvider = (await getMetricsProviders()).find(p => p.id === metricsSelector.val());
+            if (selectedProvider) {
+              RED.editor.editConfig("#metrics-selector", selectedProvider.type, selectedProvider.id);
+            }
+          });
+          metricsAddButton.on('click', function(event) {
+            event.stopPropagation();
+            let $btn = $(event.currentTarget);
+            let btnOffset = $btn.offset();
+            let btnH = $btn.outerHeight();
+            let btnW = $btn.outerWidth();
+            $('.metricstype-dropdown').remove();
+            getMetricsProviderTypes().then(providerTypes => {
+              let $dropdown = $('<div class="metricstype-dropdown red-ui-editor"></div>').css({
+                position: 'absolute',
+                zIndex: 1000
+              });
+              providerTypes.forEach(providerType => {
+                $('<div class="dropdown-item"></div>').text(providerType.name).data('value', providerType.id).css({
+                  padding: '4px 8px',
+                  cursor: 'pointer'
+                }).appendTo($dropdown);
+              });
+              $('body').append($dropdown);
+              $dropdown.css({
+                top: btnOffset.top + btnH,
+                left: Math.max(0, btnOffset.left + btnW - $dropdown.outerWidth())
+              });
+              $(document).on('mousedown.metricsdropdown', function(e) {
+                if (!$(e.target).closest('.metricstype-dropdown').length) {
+                  $dropdown.remove();
+                  $(document).off('mousedown.metricsdropdown');
+                }
+              });
+              $dropdown.on('click', '.dropdown-item', function(e) {
+                e.stopPropagation();
+                const selectedValue = $(this).data('value');
+                $dropdown.remove();
+                RED.editor.editConfig("#metrics-selector", selectedValue, "_ADD_");
+              });
+            });
+          });
+          metricsSelector.on("focus", updateMetricsSelectorList);
+          metricsSelector.on('change', function() {
+            if ("_ADD_" === metricsSelector.val()) {
+              metricsEditButton.addClass("disabled");
+            } else {
+              metricsEditButton.removeClass("disabled");
+            }
+          });
+          // Show the metrics section only if at least one metrics provider type is registered.
+          // If nodered_prometheus (or any other provider) is not installed, the section stays hidden.
+          getMetricsProviderTypes().then(providerTypes => {
+            if (providerTypes.length === 0) return;
+            metricsSection.show();
+            updateMetricsSelectorList().then(() => {
+              metricsSelector.val(node.metricsReference);
+              metricsSelector.trigger('change');
+            });
+          });
+        }
+      },
+      oneditsave: function() {
+        // **** WhatsappSendMessageNode **** //
+        {
+          let actions = [];
+          $("#wa-send-actions-list").editableList("items").each(function() {
+            let container = $(this);
+            let type = container.find(".wa-send-action-type").val();
+            let typeDef = WA_SEND_TYPES[type];
+            if (!typeDef) return;
+            let action = {
+              type: type
+            };
+            typeDef.fields.forEach(function(field) {
+              let input = container.find(".wa-send-field-" + field.key);
+              if (input.length) {
+                action[field.key] = input.typedInput("value");
+                action[field.key + "Type"] = input.typedInput("type");
+              }
+            });
+            actions.push(action);
+          });
+          $("#node-input-payloads").val(JSON.stringify(actions));
+        }
+        // **** logger **** //
+        {
+          let node = this;
+          let templateConfig = {};
+          node = this;
+          var selectedLogger = $("#logger-selector").val();
+          node.logger = (selectedLogger && selectedLogger !== "_ADD_") ? selectedLogger : '';
+          node.logTemplateOverride = node.logTemplateOverrideEditor.getValue();
+          node.logTemplateOverrideEditor.destroy();
+          delete node.logTemplateOverrideEditor;
+        }
+        // **** metrics **** //
+        {
+          let node = this;
+          let templateConfig = {};
+          node = this;
+          var selectedProvider = $("#metrics-selector").val();
+          node.metricsReference = (selectedProvider && selectedProvider !== "_ADD_") ? selectedProvider : '';
+        }
+      },
+      oneditcancel: function() {},
+      oneditdelete: function() {},
+    });
+
+</script>
+
+
+<script type="text/html" data-template-name='WhatsappSendMessageNode'>
+    <div id='section_WhatsappSendMessageNode'>
+        <div class="form-row">
+            <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+            <input type="text" id="node-input-name" />
+        </div>
+
+        <div class="form-row nomargin">
+            <label for="node-input-groupConfig" style="width:120px;"><i class="fa fa-users"></i> Group</label>
+            <input type="text" id="node-input-groupConfig" placeholder="config">
+        </div>
+
+        <div class="form-row editorsectionheading">
+            <i class="w-16 fa fa-paper-plane"></i> <span>Messages</span>
+        </div>
+
+        <div class="editorgroupborder">
+            <ol id="wa-send-actions-list"></ol>
+        </div>
+
+        <input type="hidden" id="node-input-payloads">
+
+
+    </div>
+
+    <div id='section_logger'>
+        <div id="section_loggerconfig">
+            <div class="form-row editorsectionheading">
+                <i class="w-16 fa fa-eye"></i> <span>Logging</span>
+            </div>
+            <div class="editorgroupborder">
+                <div class="form-row nomargin logEnableCheck">
+                    <input type="checkbox" id="node-input-logEnabled" placeholder="logEnabled" value="false" style="margin:8px 0 10px 102px; width:20px;">
+                    <label style="width:auto" for="node-input-logEnabled"><span>Enable Logging</span></label>
+                </div>
+
+                <div id="section_logEnabled">
+                    <div class="form-row nomargin">
+                        <label for="logger-selector">Logger</label>
+                        <div style="width: 70%; display: inline-flex;">
+                            <select id="logger-selector" style="flex-grow: 1;" class="">
+                                <option value="_ADD_">none</option>
+                            </select>
+                            <a id="logger-edit-btn" class="red-ui-button disabled" style="margin-left: 10px;">
+                                <i class="fa fa-pencil"></i>
+                            </a>
+                            <a id="logger-add-btn" class="red-ui-button" style="margin-left: 10px;">
+                                <i class="fa fa-plus"></i>
+                            </a>
+                        </div>
+                    </div>
+
+                    <div class="form-row nomargin">
+                        <input type="checkbox" id="node-input-logTemplateOverrideEnabled" placeholder="" value="false" style="margin:8px 0 10px 102px; width:20px;">
+                        <label style="width:auto" for="node-input-logTemplateOverrideEnabled"><span>Override Template</span></label>
+                    </div>
+
+                    <div id="section_logTemplateOverrideEnabled">
+                        <div class="form-row">
+                            <label class="towb_editorlabel" for="node-input-logTemplateOverrideEditor"><i class="fa fa-code"></i> Template</label>
+                            <div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-logTemplateOverrideEditor"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <div id='section_metrics'>
+        <div id="section_metricsconfig">
+            <div class="form-row editorsectionheading">
+                <i class="w-16 fa fa-eye"></i> <span>Metrics</span>
+            </div>
+            <div class="editorgroupborder">
+                <div class="form-row nomargin metricsEnableCheck">
+                    <input type="checkbox" id="node-input-metricsEnabled" value="false" style="margin:8px 0 10px 102px; width:20px;" />
+                    <label style="width:auto" for="node-input-metricsEnabled"><span>Enable Metrics</span></label>
+                </div>
+
+                <div id="section_metricsEnabled">
+                    <div class="form-row nomargin">
+                        <label class="towb_editorlabel" for="metrics-selector">Metric Provider</label>
+                        <div style="width: 70%; display: inline-flex;">
+                            <select id="metrics-selector" style="flex-grow: 1; min-width: 0;">
+                                <option value="_ADD_">none</option>
+                            </select>
+                            <a id="metrics-edit-btn" class="red-ui-button disabled" style="margin-left: 10px; flex-shrink: 0;">
+                                <i class="fa fa-pencil"></i>
+                            </a>
+                            <a id="metrics-add-btn" class="red-ui-button" style="margin-left: 10px; flex-shrink: 0;">
+                                <i class="fa fa-plus"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</script>
+
+<script type="text/markdown" data-help-name='WhatsappSendMessageNode'>
+> **Early development** — this package is still maturing. Some features may be incomplete and diagnostic log output is intentionally verbose for now.
+
+Sends one or more messages to a WhatsApp group when triggered.
+
+### Properties
+
+: *name*     (string) : Display label for this node.
+: *group*    (config) : The WhatsApp Group config node to send to.
+
+### Messages
+
+Each row in the **Messages** list is sent as a separate WhatsApp message, in order, when the node is triggered. Rows can be reordered by dragging and removed with the delete button.
+
+Select the message type from the dropdown, then fill in the value fields:
+
+- **Text** — a single text value (`msg`, `flow`, `global`, `str` with Handlebars support for `str`)
+- **Image** — a Buffer containing the image data (`msg`, `flow`, `global`)
+- **Video** — a Buffer containing the video data (`msg`, `flow`, `global`)
+- **Document** — three fields: the file Buffer, an optional filename, and an optional MIME type (defaults to `application/octet-stream`)
+
+### Inputs
+
+: *msg* : Trigger message. `msg`-type field values are resolved against this message.
+
+### Logging
+: *enable logging* (boolean)        : if checked, then the node will produce logging output to the specified logger.
+: *logger* (logconfig)              : the endppoint that the node will log events to.
+: *override template* (logconfig)   : if checked, a custom logging template can be provided for the log message.
+: *logger template* (mustache)      : a template in mustache format to generate a message for logging purposes (see LoggerConfig node for more information)
+
+### Metrics
+: *enable metrics* (boolean) : if checked, then the node will produce metrics output to the specified metrics provider.
+: *metric provider* (metricsconfig) : the metrics backend that this node will report to.
+</script>
+
+<script type="text/javascript">
+    RED.nodes.registerType('WhatsappDynamicSendMessageNode', {
+      category: 'whatsapp',
+      icon: 'whatsapp.png',
+      color: '#E6FFDA',
+      label: function() {
+        return this.name
+      },
+      paletteLabel: 'WhatsApp Dynamic Send',
+      inputs: 1,
+      inputLabels: (i) => 'message',
+      outputs: 0,
+      outputLabels: (i) => [][i],
+      defaults: {
+        name: {
+          value: 'Dynamic Send WhatsApp Message',
+          required: true
+        },
+        accountConfig: {
+          type: 'WhatsappAccountConfigNode',
+          required: true
+        },
+        recipient: {
+          value: 'payload.sender.id'
+        },
+        recipientType: {
+          value: 'msg'
+        },
+        payloads: {
+          value: '[]',
+          required: false,
+          validate: function(value) {
+            try {
+              JSON.parse(value || "[]");
+              return true;
+            } catch (e) {
+              return false;
+            }
+          }
+        },
+        logEnabled: {
+          value: false,
+          required: true
+        },
+        logger: {
+          required: false,
+          value: '',
+          type: 'DelegatedConfigReferenceNode'
+        },
+        logTemplateOverrideEnabled: {
+          value: false
+        },
+        logTemplateOverride: {
+          value: 'message:{{msg}}'
+        },
+        metricsEnabled: {
+          value: false,
+          required: true
+        },
+        metricsReference: {
+          required: false,
+          value: '',
+          type: 'DelegatedConfigReferenceNode'
+        },
+      },
+      oneditprepare: function() {
+        // **** WhatsappDynamicSendMessageNode **** //
+        {
+          let node = this;
+          // ── Recipient typed input ─────────────────────────────────────────────────
+          $("#node-input-recipient").typedInput({
+            types: ["msg", "flow", "global", "str"],
+            typeField: "#node-input-recipientType"
+          });
+          // ── Messages editableList ─────────────────────────────────────────────────
+          let actionList = $("#wa-dynamic-send-actions-list");
+          actionList.editableList({
+            sortable: true,
+            removable: true,
+            height: "auto",
+            scrollOnAdd: true,
+            addButton: "Add Message",
+            addItem: function(container, i, action) {
+              action = action || {};
+              let type = action.type || "text";
+              container.css({
+                padding: "6px 4px"
+              });
+              // Type row
+              let typeRow = $('<div style="display:flex; align-items:center; gap:8px; margin-bottom:5px;">');
+              let iconEl = $('<i style="width:14px; text-align:center; flex-shrink:0;">').addClass("fa " + (WA_SEND_TYPES[type] ? WA_SEND_TYPES[type].icon : "fa-comment"));
+              let typeSelect = $('<select class="wa-dynamic-send-action-type" style="flex:0 0 auto;">');
+              Object.keys(WA_SEND_TYPES).forEach(function(key) {
+                typeSelect.append($("<option>").val(key).text(WA_SEND_TYPES[key].label));
+              });
+              typeSelect.val(type);
+              typeRow.append(iconEl).append(typeSelect);
+              container.append(typeRow);
+              // Fields container
+              let fieldsContainer = $('<div class="wa-dynamic-send-action-fields">');
+              container.append(fieldsContainer);
+              let renderFields = function(selectedType) {
+                fieldsContainer.empty();
+                let typeDef = WA_SEND_TYPES[selectedType];
+                if (!typeDef) return;
+                iconEl.removeClass().addClass("fa " + typeDef.icon);
+                typeDef.fields.forEach(function(field) {
+                  let fieldRow = $('<div class="form-row nomargin" style="display:flex; align-items:center; gap:6px;">');
+                  fieldRow.append($('<label style="width:70px; margin:0; font-size:0.85em; flex-shrink:0;">').text(field.label));
+                  let input = $('<input type="text">').addClass("wa-dynamic-send-field-" + field.key);
+                  fieldRow.append(input);
+                  fieldsContainer.append(fieldRow);
+                  input.typedInput({
+                    types: field.types
+                  }).typedInput("type", action[field.key + "Type"] || field.types[0]).typedInput("value", action[field.key] || "");
+                  fieldRow.find(".red-ui-typedInput-container").css({
+                    flex: "1",
+                    "min-width": "0",
+                    width: ""
+                  });
+                });
+              };
+              renderFields(type);
+              typeSelect.on("change", function() {
+                action = {
+                  type: $(this).val()
+                };
+                renderFields($(this).val());
+              });
+            }
+          });
+          let actions = [];
+          try {
+            actions = JSON.parse(node.payloads || "[]");
+          } catch (e) {}
+          if (actions.length > 0) {
+            actionList.editableList("addItems", actions);
+          }
+        }
+        // **** logger **** //
+        {
+          let node = this;
+          let templateConfig = {};
+          // controls.
+          let logEnabled = $("#node-input-logEnabled");
+          let logTemplateEnabled = $("#node-input-logTemplateOverrideEnabled");
+          let logTemplateEnabledSection = $("#section_logTemplateOverrideEnabled");
+          let logEnabledSection = $("#section_logEnabled");
+          let loggerSection = $("#section_loggerconfig");
+          loggerSection.hide();
+          // functions.
+          let getLoggerTypes = async function() {
+            let types = [];
+            await $.ajax({
+              url: "nodetypeservice/find?tag=LoggerType",
+              type: "GET",
+              contentType: "application/json; charset=utf-8",
+              data: JSON.stringify({
+                id: node.id
+              }),
+              success: (response) => {
+                types = response;
+              },
+              error: (jqXHR, textStatus, errorThrown) => {
+                console.log(jqXHR, textStatus, errorThrown);
+              },
+            });
+            return types;
+          }
+          let getLoggers = async () => {
+            let loggers = [];
+            // get the list of types again.
+            let loggerTypes = (await getLoggerTypes()).map(type => type.id);
+            // add all of the known loggers.
+            RED.nodes.eachConfig(cfg => {
+              if (loggerTypes.includes(cfg.type)) {
+                loggers.push({
+                  id: cfg.id,
+                  name: cfg.label(),
+                  type: cfg.type
+                });
+              }
+            });
+            return loggers;
+          };
+          let updateLoggerSelectorList = async () => {
+            loggerSelector.empty();
+            (await getLoggers()).forEach(logger => {
+              $('<option value="' + logger.id + '">' + logger.name + '</option>').appendTo(loggerSelector);
+            });
+            $('<option value="_ADD_">none</option>').appendTo(loggerSelector);
+          }
+          logEnabled.on('change', function() {
+            if (logEnabled.prop("checked")) {
+              logEnabledSection.show();
+              node._def.defaults.logger.required = true;
+            } else {
+              logEnabledSection.hide()
+              node._def.defaults.logger.required = false;
+            }
+          });
+          logTemplateEnabled.on('change', function() {
+            if (logTemplateEnabled.prop("checked")) {
+              logTemplateEnabledSection.show();
+              node._def.defaults.logTemplateOverride.required = true;
+            } else {
+              logTemplateEnabledSection.hide()
+              node._def.defaults.logTemplateOverride.required = false;
+            }
+          });
+          node.logTemplateOverrideEditor = RED.editor.createEditor({
+            id: 'node-input-logTemplateOverrideEditor',
+            mode: 'ace/mode/handlebars',
+            value: node.logTemplateOverride
+          });
+          let loggerSelector = $("#logger-selector");
+          let loggerEditButton = $("#logger-edit-btn");
+          let loggerAddButton = $("#logger-add-btn");
+          loggerEditButton.on('click', async function(event) {
+            event.stopPropagation();
+            if (loggerEditButton.hasClass("disabled")) {
+              return;
+            }
+            // figure out what type of logger this is.
+            let selectedLogger = (await getLoggers()).find(logger => logger.id === loggerSelector.val());
+            RED.editor.editConfig("#logger-selector", selectedLogger.type, selectedLogger.id);
+          });
+          loggerAddButton.on('click', function(event) {
+            event.stopPropagation();
+            let $btn = $(event.target);
+            // Remove any existing dropdown
+            $('.loggertype-dropdown').remove();
+            getLoggerTypes().then(loggerTypes => {
+              let $dropdown = $('<div class="loggertype-dropdown red-ui-editor"></div>');
+              loggerTypes.forEach(loggerType => {
+                $('<div class="dropdown-item"></div>').text(loggerType.name).data('value', loggerType.id).css({
+                  padding: '4px 8px',
+                  cursor: 'pointer'
+                }).appendTo($dropdown);
+              });
+              // Append first so outerWidth() is measurable, then position so the
+              // right edge of the dropdown aligns with the right edge of the button.
+              $('body').append($dropdown);
+              $dropdown.css({
+                top: $btn.offset().top + $btn.outerHeight(),
+                left: $btn.offset().left + $btn.outerWidth() - $dropdown.outerWidth()
+              });
+              $(document).on('mousedown.dropdown', function(e) {
+                if (!$(e.target).closest('.loggertype-dropdown').length) {
+                  $dropdown.remove();
+                  $(document).off('mousedown.dropdown'); // Clean up the listener
+                }
+              });
+              // Handle item selection
+              $dropdown.on('click', '.dropdown-item', function(e) {
+                e.stopPropagation();
+                const selectedValue = $(this).data('value');
+                const selectedText = $(this).text();
+                // Do whatever you need with the selection
+                console.log('Selected:', selectedValue, selectedText);
+                $dropdown.remove();
+                RED.editor.editConfig("#logger-selector", selectedValue, "_ADD_");
+              });
+            })
+          });
+          loggerSelector.on("focus", updateLoggerSelectorList);
+          loggerSelector.on('change', function(event) {
+            if ("_ADD_" === loggerSelector.val()) {
+              loggerEditButton.addClass("disabled")
+            } else {
+              loggerEditButton.removeClass("disabled")
+            }
+          });
+          // Show the logger section only if at least one logger type is registered.
+          // If nodered_logging (or any other logger provider) is not installed, the section stays hidden.
+          getLoggerTypes().then(loggerTypes => {
+            if (loggerTypes.length === 0) return;
+            loggerSection.show();
+            updateLoggerSelectorList().then(() => {
+              loggerSelector.val(node.logger);
+              loggerSelector.trigger('change');
+            });
           });
         }
         // **** metrics **** //
         {
           let node = this;
+          let templateConfig = {};
           let metricsEnabled = $("#node-input-metricsEnabled");
-          let metricsEnabledSection = $("#section_metricsEnabled");
+          let metricsSection = $("#section_metricsconfig");
+          let metricsContainer = metricsEnabled.closest(".editorgroupborder");
+          let metricsEnabledSection = metricsContainer.find("#section_metricsEnabled");
+          metricsSection.hide();
+          let getMetricsProviderTypes = async function() {
+            let types = [];
+            await $.ajax({
+              url: "nodetypeservice/find?tag=MetricsProvider",
+              type: "GET",
+              contentType: "application/json; charset=utf-8",
+              success: (response) => {
+                types = response;
+              },
+              error: (jqXHR, textStatus, errorThrown) => {
+                console.log(jqXHR, textStatus, errorThrown);
+              },
+            });
+            return types;
+          };
+          let getMetricsProviders = async () => {
+            let providers = [];
+            let providerTypes = (await getMetricsProviderTypes()).map(t => t.id);
+            RED.nodes.eachConfig(cfg => {
+              if (providerTypes.includes(cfg.type)) {
+                providers.push({
+                  id: cfg.id,
+                  name: cfg.label(),
+                  type: cfg.type
+                });
+              }
+            });
+            return providers;
+          };
+          let updateMetricsSelectorList = async () => {
+            metricsSelector.empty();
+            (await getMetricsProviders()).forEach(provider => {
+              $('<option value="' + provider.id + '">' + provider.name + '</option>').appendTo(metricsSelector);
+            });
+            $('<option value="_ADD_">none</option>').appendTo(metricsSelector);
+          };
           metricsEnabled.on('change', function() {
             if (metricsEnabled.prop("checked")) {
               metricsEnabledSection.show();
-              node._def.defaults.metricsReference.required = true;
             } else {
-              metricsEnabledSection.hide()
-              node._def.defaults.metricsReference.required = false;
+              metricsEnabledSection.hide();
+            }
+          });
+          let metricsSelector = metricsContainer.find("#metrics-selector");
+          let metricsEditButton = metricsContainer.find("#metrics-edit-btn");
+          let metricsAddButton = metricsContainer.find("#metrics-add-btn");
+          metricsEditButton.on('click', async function(event) {
+            event.stopPropagation();
+            if (metricsEditButton.hasClass("disabled")) return;
+            let selectedProvider = (await getMetricsProviders()).find(p => p.id === metricsSelector.val());
+            if (selectedProvider) {
+              RED.editor.editConfig("#metrics-selector", selectedProvider.type, selectedProvider.id);
+            }
+          });
+          metricsAddButton.on('click', function(event) {
+            event.stopPropagation();
+            let $btn = $(event.currentTarget);
+            let btnOffset = $btn.offset();
+            let btnH = $btn.outerHeight();
+            let btnW = $btn.outerWidth();
+            $('.metricstype-dropdown').remove();
+            getMetricsProviderTypes().then(providerTypes => {
+              let $dropdown = $('<div class="metricstype-dropdown red-ui-editor"></div>').css({
+                position: 'absolute',
+                zIndex: 1000
+              });
+              providerTypes.forEach(providerType => {
+                $('<div class="dropdown-item"></div>').text(providerType.name).data('value', providerType.id).css({
+                  padding: '4px 8px',
+                  cursor: 'pointer'
+                }).appendTo($dropdown);
+              });
+              $('body').append($dropdown);
+              $dropdown.css({
+                top: btnOffset.top + btnH,
+                left: Math.max(0, btnOffset.left + btnW - $dropdown.outerWidth())
+              });
+              $(document).on('mousedown.metricsdropdown', function(e) {
+                if (!$(e.target).closest('.metricstype-dropdown').length) {
+                  $dropdown.remove();
+                  $(document).off('mousedown.metricsdropdown');
+                }
+              });
+              $dropdown.on('click', '.dropdown-item', function(e) {
+                e.stopPropagation();
+                const selectedValue = $(this).data('value');
+                $dropdown.remove();
+                RED.editor.editConfig("#metrics-selector", selectedValue, "_ADD_");
+              });
+            });
+          });
+          metricsSelector.on("focus", updateMetricsSelectorList);
+          metricsSelector.on('change', function() {
+            if ("_ADD_" === metricsSelector.val()) {
+              metricsEditButton.addClass("disabled");
+            } else {
+              metricsEditButton.removeClass("disabled");
             }
           });
+          // Show the metrics section only if at least one metrics provider type is registered.
+          // If nodered_prometheus (or any other provider) is not installed, the section stays hidden.
+          getMetricsProviderTypes().then(providerTypes => {
+            if (providerTypes.length === 0) return;
+            metricsSection.show();
+            updateMetricsSelectorList().then(() => {
+              metricsSelector.val(node.metricsReference);
+              metricsSelector.trigger('change');
+            });
+          });
         }
       },
       oneditsave: function() {
-        // **** WhatsappSendMessageNode **** //
+        // **** WhatsappDynamicSendMessageNode **** //
         {
-          let payloads = WA_SEND_FIELDS.map(function(field) {
-            return {
-              id: field.id,
-              enabled: $("#wa-send-enabled-" + field.id).prop("checked"),
-              type: $("#wa-send-value-" + field.id).typedInput("type"),
-              value: $("#wa-send-value-" + field.id).typedInput("value"),
+          let actions = [];
+          $("#wa-dynamic-send-actions-list").editableList("items").each(function() {
+            let container = $(this);
+            let type = container.find(".wa-dynamic-send-action-type").val();
+            let typeDef = WA_SEND_TYPES[type];
+            if (!typeDef) return;
+            let action = {
+              type: type
             };
+            typeDef.fields.forEach(function(field) {
+              let input = container.find(".wa-dynamic-send-field-" + field.key);
+              if (input.length) {
+                action[field.key] = input.typedInput("value");
+                action[field.key + "Type"] = input.typedInput("type");
+              }
+            });
+            actions.push(action);
           });
-          $("#node-input-payloads").val(JSON.stringify(payloads));
+          $("#node-input-payloads").val(JSON.stringify(actions));
         }
         // **** logger **** //
         {
+          let node = this;
+          let templateConfig = {};
           node = this;
           var selectedLogger = $("#logger-selector").val();
           node.logger = (selectedLogger && selectedLogger !== "_ADD_") ? selectedLogger : '';
@@ -1115,7 +2038,13 @@ Click **Create New Group** to create a new WhatsApp group from within Node-RED.
           delete node.logTemplateOverrideEditor;
         }
         // **** metrics **** //
-        {}
+        {
+          let node = this;
+          let templateConfig = {};
+          node = this;
+          var selectedProvider = $("#metrics-selector").val();
+          node.metricsReference = (selectedProvider && selectedProvider !== "_ADD_") ? selectedProvider : '';
+        }
       },
       oneditcancel: function() {},
       oneditdelete: function() {},
@@ -1124,23 +2053,36 @@ Click **Create New Group** to create a new WhatsApp group from within Node-RED.
 </script>
 
 
-<script type="text/html" data-template-name='WhatsappSendMessageNode'>
-    <div id='section_WhatsappSendMessageNode'>
+<script type="text/html" data-template-name='WhatsappDynamicSendMessageNode'>
+    <div id='section_WhatsappDynamicSendMessageNode'>
         <div class="form-row">
             <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
             <input type="text" id="node-input-name" />
         </div>
 
-        <div class="form-row nomargin">
-            <label for="node-input-groupConfig" style="width:120px;"><i class="fa fa-users"></i> Group</label>
-            <input type="text" id="node-input-groupConfig" placeholder="config">
+        <div class="form-row editorsectionheading">
+            <i class="w-16 fa fa-envelope"></i> <span>WhatsApp Account</span>
+        </div>
+
+        <div class="editorgroupborder">
+            <div class="form-row nomargin">
+                <label for="node-input-accountConfig" style="width:120px;"><i class="fa fa-user"></i> Account</label>
+                <input type="text" id="node-input-accountConfig" placeholder="config">
+            </div>
+
+            <div class="form-row nomargin">
+                <label for="node-input-recipient" style="width:120px;"><i class="fa fa-paper-plane"></i> Recipient</label>
+                <input type="text" id="node-input-recipient" placeholder="payload.sender.id">
+                <input type="hidden" id="node-input-recipientType">
+            </div>
         </div>
 
         <div class="form-row editorsectionheading">
-            <i class="w-16 fa fa-paper-plane"></i> <span>Send</span>
+            <i class="w-16 fa fa-paper-plane"></i> <span>Messages</span>
         </div>
 
-        <div class="editorgroupborder" id="wa-send-payload-rows">
+        <div class="editorgroupborder">
+            <ol id="wa-dynamic-send-actions-list"></ol>
         </div>
 
         <input type="hidden" id="node-input-payloads">
@@ -1205,8 +2147,18 @@ Click **Create New Group** to create a new WhatsApp group from within Node-RED.
 
                 <div id="section_metricsEnabled">
                     <div class="form-row nomargin">
-                        <label class="towb_editorlabel" for="node-input-metricsReference">Metric Collector</label>
-                        <input id="node-input-metricsReference" placeholder="metrics" />
+                        <label class="towb_editorlabel" for="metrics-selector">Metric Provider</label>
+                        <div style="width: 70%; display: inline-flex;">
+                            <select id="metrics-selector" style="flex-grow: 1; min-width: 0;">
+                                <option value="_ADD_">none</option>
+                            </select>
+                            <a id="metrics-edit-btn" class="red-ui-button disabled" style="margin-left: 10px; flex-shrink: 0;">
+                                <i class="fa fa-pencil"></i>
+                            </a>
+                            <a id="metrics-add-btn" class="red-ui-button" style="margin-left: 10px; flex-shrink: 0;">
+                                <i class="fa fa-plus"></i>
+                            </a>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -1215,26 +2167,28 @@ Click **Create New Group** to create a new WhatsApp group from within Node-RED.
     </div>
 </script>
 
-<script type="text/markdown" data-help-name='WhatsappSendMessageNode'>
+<script type="text/markdown" data-help-name='WhatsappDynamicSendMessageNode'>
 > **Early development** — this package is still maturing. Some features may be incomplete and diagnostic log output is intentionally verbose for now.
 
-Sends a message to a WhatsApp group.
+Sends one or more WhatsApp messages directly to a recipient resolved at runtime — for example, replying privately to the sender of a group message.
 
 ### Properties
 
-: *name*        (string) : Display label for this node.
-: *group*       (config) : The WhatsApp Group config node to send to.
+: *name*      (string) : Display label for this node.
+: *account*   (config) : The WhatsApp Account config node to send from.
+: *recipient* (typed)  : The target JID resolved from the incoming message, flow, global context, or a static string. Defaults to `msg.payload.sender.id` — the JID of whoever sent the triggering message.
 
-### Send fields
+### LID addressing
 
-Each field has a checkbox to enable it and a typed value. Supported value types depend on the field:
+If the recipient JID ends with `@lid` (newer WhatsApp clients), the node automatically resolves it to the corresponding phone-number JID via the contact store before sending.
 
-- **Send Text** — `msg`, `flow`, `global`, `str`
-- **Send Image** — `msg`, `flow`, `global`
+### Messages
+
+Each row in the **Messages** list is sent as a separate WhatsApp message, in order. Supports Text, Image, Video, and Document (with optional filename and MIME type).
 
 ### Inputs
 
-: *msg* : Trigger message. Field values are resolved against this message (for `msg` type) or from context.
+: *msg* : Trigger message. `msg`-type field values and the recipient are resolved against this message.
 
 ### Logging
 : *enable logging* (boolean)        : if checked, then the node will produce logging output to the specified logger.
@@ -1244,166 +2198,9 @@ Each field has a checkbox to enable it and a typed value. Supported value types
 
 ### Metrics
 : *enable metrics* (boolean) : if checked, then the node will produce metrics output to the specified metrics provider.
-: *metric collector* (metricconfig) : the collection point or grouping where this particular metric will be attached.
-</script>
-<!-- WhatsappReceiveMessageNode -->
-<style>
-</style>
-<script>
-    const WA_ACCEPT_FIELDS = [{
-      id: "Text",
-      icon: "fa-font",
-      label: "Text",
-      defaultEnabled: true
-    }, {
-      id: "ExtendedText",
-      icon: "fa-align-left",
-      label: "Extended Text",
-      defaultEnabled: true
-    }, {
-      id: "Image",
-      icon: "fa-image",
-      label: "Image",
-      defaultEnabled: true
-    }, {
-      id: "Video",
-      icon: "fa-video-camera",
-      label: "Video",
-      defaultEnabled: true
-    }, {
-      id: "Album",
-      icon: "fa-th-large",
-      label: "Album",
-      defaultEnabled: true
-    }, {
-      id: "Document",
-      icon: "fa-file",
-      label: "Document",
-      defaultEnabled: false
-    }, {
-      id: "Contact",
-      icon: "fa-address-card",
-      label: "Contact",
-      defaultEnabled: false
-    }, {
-      id: "Template",
-      icon: "fa-th-list",
-      label: "Template",
-      defaultEnabled: false
-    }, {
-      id: "Interactive",
-      icon: "fa-hand-o-up",
-      label: "Interactive",
-      defaultEnabled: false
-    }, {
-      id: "Location",
-      icon: "fa-map-marker",
-      label: "Location",
-      defaultEnabled: false
-    }, {
-      id: "LiveLocation",
-      icon: "fa-location-arrow",
-      label: "Live Location",
-      defaultEnabled: false
-    }, ];
-
+: *metric provider* (metricsconfig) : the metrics backend that this node will report to.
 </script>
-<!-- logger -->
-<style>
-    .editorgroupborder {
-      border-width: 1px;
-      border-style: solid;
-      border-color: lightgray;
-      padding: 3px;
-      margin-top: 2px;
-      margin-bottom: 2px;
-    }
-
-    .editorsectionheading {
-      font-weight: 600;
-      margin-bottom: 1px !important;
-      margin-top: 6px !important;
-    }
-
-    .nomargin {
-      margin-bottom: 1px !important;
-      margin-top: 1px !important;
-    }
-
-    .slidecontainer {
-      width: 100%;
-    }
-
-    .slider {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 100%;
-      height: 25px;
-      background: #d3d3d3;
-      outline: none;
-      opacity: 0.7;
-      -webkit-transition: .2s;
-      transition: opacity .2s;
-    }
-
-    .slider:hover {
-      opacity: 1;
-    }
-
-    .slider::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 25px;
-      height: 25px;
-      background: #04AA6D;
-      cursor: pointer;
-    }
-
-    .slider::-moz-range-thumb {
-      width: 25px;
-      height: 25px;
-      background: #04AA6D;
-      cursor: pointer;
-    }
-
-    .towb_editorlabel {
-      width: 120px !important;
-    }
-
-    .towb_editorfield {
-      width: 70% !important;
-    }
 
-    .towb_editorfield_short {
-      width: 30% !important;
-    }
-
-</style>
-<script type="text/javascript">
-    // CSS
-    dropdownStyles = `
-    .loggertype-dropdown {
-        position: absolute;
-        background: white;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-        max-height: 150px;
-        overflow-y: auto;
-        z-index: 1000;
-        min-width: 150px;
-    }
-    .loggertype-dropdown .dropdown-item {
-        padding: 6px 12px;
-        cursor: pointer;
-    }
-    .loggertype-dropdown .dropdown-item:hover {
-        background: #f0f0f0;
-    }
-    `;
-    $('<style>').text(dropdownStyles).appendTo('head');
-
-</script>
 <script type="text/javascript">
     RED.nodes.registerType('WhatsappReceiveMessageNode', {
       category: 'whatsapp',
@@ -1458,8 +2255,9 @@ Each field has a checkbox to enable it and a typed value. Supported value types
           required: true
         },
         metricsReference: {
-          type: 'MetricsConfigNode',
-          required: false
+          required: false,
+          value: '',
+          type: 'DelegatedConfigReferenceNode'
         },
       },
       oneditprepare: function() {
@@ -1490,11 +2288,14 @@ Each field has a checkbox to enable it and a typed value. Supported value types
         // **** logger **** //
         {
           let node = this;
+          let templateConfig = {};
           // controls.
           let logEnabled = $("#node-input-logEnabled");
           let logTemplateEnabled = $("#node-input-logTemplateOverrideEnabled");
           let logTemplateEnabledSection = $("#section_logTemplateOverrideEnabled");
           let logEnabledSection = $("#section_logEnabled");
+          let loggerSection = $("#section_loggerconfig");
+          loggerSection.hide();
           // functions.
           let getLoggerTypes = async function() {
             let types = [];
@@ -1618,26 +2419,135 @@ Each field has a checkbox to enable it and a typed value. Supported value types
               loggerEditButton.removeClass("disabled")
             }
           });
-          // lastly, make sure that we set the correct value on the logger selector.
-          updateLoggerSelectorList().then(() => {
-            loggerSelector.val(node.logger);
-            loggerSelector.trigger('change');
+          // Show the logger section only if at least one logger type is registered.
+          // If nodered_logging (or any other logger provider) is not installed, the section stays hidden.
+          getLoggerTypes().then(loggerTypes => {
+            if (loggerTypes.length === 0) return;
+            loggerSection.show();
+            updateLoggerSelectorList().then(() => {
+              loggerSelector.val(node.logger);
+              loggerSelector.trigger('change');
+            });
           });
         }
         // **** metrics **** //
         {
           let node = this;
+          let templateConfig = {};
           let metricsEnabled = $("#node-input-metricsEnabled");
-          let metricsEnabledSection = $("#section_metricsEnabled");
+          let metricsSection = $("#section_metricsconfig");
+          let metricsContainer = metricsEnabled.closest(".editorgroupborder");
+          let metricsEnabledSection = metricsContainer.find("#section_metricsEnabled");
+          metricsSection.hide();
+          let getMetricsProviderTypes = async function() {
+            let types = [];
+            await $.ajax({
+              url: "nodetypeservice/find?tag=MetricsProvider",
+              type: "GET",
+              contentType: "application/json; charset=utf-8",
+              success: (response) => {
+                types = response;
+              },
+              error: (jqXHR, textStatus, errorThrown) => {
+                console.log(jqXHR, textStatus, errorThrown);
+              },
+            });
+            return types;
+          };
+          let getMetricsProviders = async () => {
+            let providers = [];
+            let providerTypes = (await getMetricsProviderTypes()).map(t => t.id);
+            RED.nodes.eachConfig(cfg => {
+              if (providerTypes.includes(cfg.type)) {
+                providers.push({
+                  id: cfg.id,
+                  name: cfg.label(),
+                  type: cfg.type
+                });
+              }
+            });
+            return providers;
+          };
+          let updateMetricsSelectorList = async () => {
+            metricsSelector.empty();
+            (await getMetricsProviders()).forEach(provider => {
+              $('<option value="' + provider.id + '">' + provider.name + '</option>').appendTo(metricsSelector);
+            });
+            $('<option value="_ADD_">none</option>').appendTo(metricsSelector);
+          };
           metricsEnabled.on('change', function() {
             if (metricsEnabled.prop("checked")) {
               metricsEnabledSection.show();
-              node._def.defaults.metricsReference.required = true;
             } else {
-              metricsEnabledSection.hide()
-              node._def.defaults.metricsReference.required = false;
+              metricsEnabledSection.hide();
+            }
+          });
+          let metricsSelector = metricsContainer.find("#metrics-selector");
+          let metricsEditButton = metricsContainer.find("#metrics-edit-btn");
+          let metricsAddButton = metricsContainer.find("#metrics-add-btn");
+          metricsEditButton.on('click', async function(event) {
+            event.stopPropagation();
+            if (metricsEditButton.hasClass("disabled")) return;
+            let selectedProvider = (await getMetricsProviders()).find(p => p.id === metricsSelector.val());
+            if (selectedProvider) {
+              RED.editor.editConfig("#metrics-selector", selectedProvider.type, selectedProvider.id);
+            }
+          });
+          metricsAddButton.on('click', function(event) {
+            event.stopPropagation();
+            let $btn = $(event.currentTarget);
+            let btnOffset = $btn.offset();
+            let btnH = $btn.outerHeight();
+            let btnW = $btn.outerWidth();
+            $('.metricstype-dropdown').remove();
+            getMetricsProviderTypes().then(providerTypes => {
+              let $dropdown = $('<div class="metricstype-dropdown red-ui-editor"></div>').css({
+                position: 'absolute',
+                zIndex: 1000
+              });
+              providerTypes.forEach(providerType => {
+                $('<div class="dropdown-item"></div>').text(providerType.name).data('value', providerType.id).css({
+                  padding: '4px 8px',
+                  cursor: 'pointer'
+                }).appendTo($dropdown);
+              });
+              $('body').append($dropdown);
+              $dropdown.css({
+                top: btnOffset.top + btnH,
+                left: Math.max(0, btnOffset.left + btnW - $dropdown.outerWidth())
+              });
+              $(document).on('mousedown.metricsdropdown', function(e) {
+                if (!$(e.target).closest('.metricstype-dropdown').length) {
+                  $dropdown.remove();
+                  $(document).off('mousedown.metricsdropdown');
+                }
+              });
+              $dropdown.on('click', '.dropdown-item', function(e) {
+                e.stopPropagation();
+                const selectedValue = $(this).data('value');
+                $dropdown.remove();
+                RED.editor.editConfig("#metrics-selector", selectedValue, "_ADD_");
+              });
+            });
+          });
+          metricsSelector.on("focus", updateMetricsSelectorList);
+          metricsSelector.on('change', function() {
+            if ("_ADD_" === metricsSelector.val()) {
+              metricsEditButton.addClass("disabled");
+            } else {
+              metricsEditButton.removeClass("disabled");
             }
           });
+          // Show the metrics section only if at least one metrics provider type is registered.
+          // If nodered_prometheus (or any other provider) is not installed, the section stays hidden.
+          getMetricsProviderTypes().then(providerTypes => {
+            if (providerTypes.length === 0) return;
+            metricsSection.show();
+            updateMetricsSelectorList().then(() => {
+              metricsSelector.val(node.metricsReference);
+              metricsSelector.trigger('change');
+            });
+          });
         }
       },
       oneditsave: function() {
@@ -1653,6 +2563,8 @@ Each field has a checkbox to enable it and a typed value. Supported value types
         }
         // **** logger **** //
         {
+          let node = this;
+          let templateConfig = {};
           node = this;
           var selectedLogger = $("#logger-selector").val();
           node.logger = (selectedLogger && selectedLogger !== "_ADD_") ? selectedLogger : '';
@@ -1661,7 +2573,13 @@ Each field has a checkbox to enable it and a typed value. Supported value types
           delete node.logTemplateOverrideEditor;
         }
         // **** metrics **** //
-        {}
+        {
+          let node = this;
+          let templateConfig = {};
+          node = this;
+          var selectedProvider = $("#metrics-selector").val();
+          node.metricsReference = (selectedProvider && selectedProvider !== "_ADD_") ? selectedProvider : '';
+        }
       },
       oneditcancel: function() {},
       oneditdelete: function() {},
@@ -1770,8 +2688,18 @@ Each field has a checkbox to enable it and a typed value. Supported value types
 
                 <div id="section_metricsEnabled">
                     <div class="form-row nomargin">
-                        <label class="towb_editorlabel" for="node-input-metricsReference">Metric Collector</label>
-                        <input id="node-input-metricsReference" placeholder="metrics" />
+                        <label class="towb_editorlabel" for="metrics-selector">Metric Provider</label>
+                        <div style="width: 70%; display: inline-flex;">
+                            <select id="metrics-selector" style="flex-grow: 1; min-width: 0;">
+                                <option value="_ADD_">none</option>
+                            </select>
+                            <a id="metrics-edit-btn" class="red-ui-button disabled" style="margin-left: 10px; flex-shrink: 0;">
+                                <i class="fa fa-pencil"></i>
+                            </a>
+                            <a id="metrics-add-btn" class="red-ui-button" style="margin-left: 10px; flex-shrink: 0;">
+                                <i class="fa fa-plus"></i>
+                            </a>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -1808,7 +2736,6 @@ Each message type can be individually enabled or disabled. By default Text, Exte
 
 ### Metrics
 : *enable metrics* (boolean) : if checked, then the node will produce metrics output to the specified metrics provider.
-: *metric collector* (metricconfig) : the collection point or grouping where this particular metric will be attached.
+: *metric provider* (metricsconfig) : the metrics backend that this node will report to.
 </script>
-