@theotherwillembotha/node-red-whatsapp 0.0.55

package/build/Nodes.html

@@ -0,0 +1,1814 @@
+
+<!--
+
+    This file was automatically generated using the NODERED Core utility.
+    Any modifications to his file will be overwritten the next time the code is regenerated.
+        
+    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);
+            }
+          });
+        });
+      },
+    }
+
+</script>
+<script type="text/javascript">
+    RED.nodes.registerType('WhatsappAccountConfigNode', {
+      category: 'config',
+      label: function() {
+        return this.name
+      },
+      paletteLabel: 'WhatsApp Account',
+      defaults: {
+        name: {
+          value: 'WhatsApp Account',
+          required: true
+        },
+        accountLinked: {
+          value: false,
+          required: true
+        },
+        localConnectionId: {
+          required: true
+        },
+      },
+      oneditprepare: function() {
+        // **** WhatsappAccountConfigNode **** //
+        {
+          let node = this;
+          let $btn = $("#wa-account-link-btn");
+          // if the account is already linked, show the Unlink state
+          if (document.getElementById("node-config-input-accountLinked").checked) {
+            $btn.html('<i class="fa fa-unlink"></i> Unlink Account');
+          }
+          // if we don't have a local connectionId for this node, generate one.
+          if ($("#node-config-input-localConnectionId").val() === "") {
+            $("#node-config-input-localConnectionId").val(crypto.randomUUID());
+          }
+          let localConnectionId = $("#node-config-input-localConnectionId").val();
+          $btn.on("click", () => {
+            $btn.prop("disabled", true);
+            if (document.getElementById("node-config-input-accountLinked").checked) {
+              waService.unlinkAccount(node.id, localConnectionId).then(response => {
+                $btn.prop("disabled", false);
+                $btn.html('<i class="fa fa-link"></i> Link Account');
+                document.getElementById("node-config-input-accountLinked").checked = false;
+                $("#wa-account-qrcode").html("<p>Account unlinked. Remember to remove this device from WhatsApp on your phone.</p>");
+              });
+              return;
+            }
+            // register an event handler for QR codes and connection state updates.
+            let eventHandler = function(topic, payload) {
+              if (payload.type === "qrcode") {
+                let qrcode = "<p>Open WhatsApp on your phone, select <strong>Linked Devices</strong> and scan the QR code below.</p><br>" + payload.qrcode;
+                $("#wa-account-qrcode").html(qrcode);
+                return;
+              }
+              if (payload.type === "account_linked") {
+                $("#wa-account-qrcode").html("<p>\u2714 Account linked successfully.</p>");
+                RED.comms.unsubscribe("notification/whatsapp/" + localConnectionId, eventHandler);
+                $btn.prop("disabled", false);
+                $btn.html('<i class="fa fa-unlink"></i> Unlink Account');
+                document.getElementById("node-config-input-accountLinked").checked = true;
+                return;
+              }
+              if (payload.type === "account_link_timeout") {
+                $("#wa-account-qrcode").html("<p>\u2718 Link timed out. Click <em>Link Account</em> to try again.</p>");
+                $btn.prop("disabled", false);
+                RED.comms.unsubscribe("notification/whatsapp/" + localConnectionId, eventHandler);
+                return;
+              }
+              console.log("unhandled payload type in WhatsappConnectionConfig " + payload.type);
+            };
+            RED.comms.subscribe("notification/whatsapp/" + localConnectionId, eventHandler);
+            $.ajax({
+              url: "whatsapp/linkaccount",
+              type: "POST",
+              data: JSON.stringify({
+                nodeID: node.id,
+                localConnectionId: localConnectionId
+              }),
+              contentType: "application/json; charset=utf-8",
+              error: (jqXHR) => {
+                console.log("linkaccount error", jqXHR);
+              }
+            });
+          });
+        }
+      },
+      oneditsave: function() {
+        // **** WhatsappAccountConfigNode **** //
+        {
+          let node = this;
+        }
+      },
+      oneditcancel: function() {},
+      oneditdelete: function() {},
+    });
+
+</script>
+
+
+<script type="text/html" data-template-name='WhatsappAccountConfigNode'>
+    <div id='section_WhatsappAccountConfigNode'>
+        <div class="form-row">
+            <label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
+            <input type="text" id="node-config-input-name" />
+        </div>
+
+        <div style="display:none">
+            <input type="text" id="node-config-input-localConnectionId">
+            <input type="checkbox" id="node-config-input-accountLinked">
+        </div>
+
+        <div class="form-row">
+            <label></label>
+            <button type="button" id="wa-account-link-btn" class="red-ui-button">
+                <i class="fa fa-link"></i> Link Account
+            </button>
+        </div>
+
+        <div class="form-row">
+            <label></label>
+            <div id="wa-account-qrcode" style="max-width: 450px;"></div>
+        </div>
+
+
+    </div>
+</script>
+
+<script type="text/markdown" data-help-name='WhatsappAccountConfigNode'>
+> **Early development** — this package is still maturing. Some features may be incomplete and diagnostic log output is intentionally verbose for now.
+
+Manages a WhatsApp Web session. Handles QR-code pairing and persists session credentials so the connection survives Node-RED restarts.
+
+### Properties
+
+: *name* (string) : Display label for this config node.
+
+### Linking an account
+
+Open the node editor and click **Link Account**. A QR code is displayed — scan it using WhatsApp on your phone (Linked Devices). Once scanned, the session is saved and reconnected automatically on each restart.
+
+To unlink the device, open the editor and click **Unlink Account**, then remove the linked device from WhatsApp on your phone.
+
+### Session storage
+
+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',
+      label: function() {
+        return this.name
+      },
+      paletteLabel: 'WhatsApp Group',
+      defaults: {
+        name: {
+          value: 'WhatsApp Group',
+          required: true
+        },
+        accountConfig: {
+          type: 'WhatsappAccountConfigNode',
+          required: true
+        },
+        groupId: {
+          value: '',
+          required: true
+        },
+      },
+      oneditprepare: function() {
+        // **** WhatsappGroupConfigNode **** //
+        {
+          let node = this;
+          let groupList = [];
+          let onGroupChanged = () => {
+            let selectedId = groupSelectionControl.typedInput("value");
+            let selectedGroup = groupList.find(g => g.id === selectedId);
+            if (selectedGroup) {
+              let accountNode;
+              RED.nodes.eachConfig(cfg => {
+                if (cfg.id === accountConfigInput.val()) accountNode = cfg;
+              });
+              let accountName = accountNode ? accountNode.name : "";
+              $("#node-config-input-name").val(accountName ? accountName + " - " + selectedGroup.subject : selectedGroup.subject);
+            }
+          };
+          let onGroupMembersLoad = () => {
+            let selectedId = groupSelectionControl.typedInput("value");
+            updateMemberList(selectedId);
+          };
+          let updateGroupList = (accountNodeId) => {
+            // map controls.
+            let groupSelectionControl = $("#node-config-input-groupId");
+            let newGroupButton = document.getElementById("wa-group-new-btn");
+            // get the localConnectionId.
+            let localConnectionId;
+            RED.nodes.eachConfig(cfg => {
+              if (cfg.id === accountNodeId) {
+                localConnectionId = cfg.localConnectionId;
+              }
+            });
+            // if we couldnt find a localConnectionId, it means that the connection does not exist or was not set.
+            if (!localConnectionId) {
+              newGroupButton.disabled = true;
+              groupList = [];
+              groupSelectionControl.typedInput('types', [{
+                value: "group",
+                options: []
+              }]);
+            }
+            if (localConnectionId) {
+              newGroupButton.disabled = false;
+              // issue request to backend to get the list of groups
+              waService.getGroups(node.id, localConnectionId).then(groupListResponse => {
+                groupList = groupListResponse;
+                // rebuild the list of groups...
+                let groups = groupList.map(groupMeta => {
+                  return {
+                    value: groupMeta.id,
+                    label: groupMeta.subject
+                  }
+                });
+                // detach change handlers before restoring saved value so the name field is not overwritten on open
+                groupSelectionControl.off("change", onGroupChanged);
+                groupSelectionControl.off("change", onGroupMembersLoad);
+                groupSelectionControl.typedInput('types', [{
+                  value: "group",
+                  options: groups
+                }]);
+                groupSelectionControl.typedInput('value', node.groupId);
+                groupSelectionControl.on("change", onGroupChanged);
+                groupSelectionControl.on("change", onGroupMembersLoad);
+                onGroupMembersLoad();
+              }).catch(error => {
+                console.log(`Error gettting groups: ${name}`, error);
+              })
+            }
+          };
+          let updateMemberList = (selectedGroupId) => {
+            let selectedGroup = groupList.find(g => g.id === selectedGroupId);
+            if (!selectedGroup) {
+              //console.log("no group selected");
+              return;
+            }
+            console.log("updating member list", selectedGroup);
+            let members = selectedGroup.participants ? selectedGroup.participants : [];
+            // determine if the linked account can manage roles (must be Admin or SuperAdmin in this group)
+            let me = members.find(m => m.isMe);
+            let canManage = me && (me.role === "Admin" || me.role === "SuperAdmin");
+            let groupMemberList = $("#node-input-groupMembers-container");
+            groupMemberList.editableList({
+              sortable: false,
+              removable: true,
+              height: 'auto',
+              scrollOnAdd: true,
+              addButton: 'Add Member',
+              header: $('<div>').append($.parseHTML(`
+                <div style='width:130px; margin-left:8px; display:inline-block;'>Number</div>
+                <div style='width:140px; display:inline-block;'>Name</div>
+                <div style='width:100px; display:inline-block;'>Role</div>
+                `)),
+              addItem: function(container, i, _member) {
+                let member = _member;
+                console.log("ADD MEMBER: ", member);
+                let saveMember = (number, role) => {
+                  // get the localConnectionId from the selected account config.
+                  let localConnectionId;
+                  RED.nodes.eachConfig(cfg => {
+                    if (cfg.id === accountConfigInput.val()) {
+                      localConnectionId = cfg.localConnectionId;
+                    }
+                  });
+                  if (!localConnectionId) return;
+                  // format the phone number as a WhatsApp JID: strip leading + and append @s.whatsapp.net
+                  let userId = number.replace(/^\+/, "") + "@s.whatsapp.net";
+                  let groupId = groupSelectionControl.typedInput("value");
+                  saveButton.prop("disabled", true);
+                  waService.addUserToGroup(node.id, localConnectionId, userId, groupId, role).then(() => {
+                    idField.val(userId);
+                    member.id = userId;
+                    phoneNumberField.prop("disabled", true);
+                    saveButton.hide();
+                  }).catch(err => {
+                    console.log("Error adding member to group:", err);
+                  }).finally(() => {
+                    saveButton.prop("disabled", false);
+                  });
+                }
+                let onRoleChanged = (role) => {
+                  if (!member.id) return; // new unsaved member — role is submitted with the save button
+                  let localConnectionId;
+                  RED.nodes.eachConfig(cfg => {
+                    if (cfg.id === accountConfigInput.val()) {
+                      localConnectionId = cfg.localConnectionId;
+                    }
+                  });
+                  if (!localConnectionId) return;
+                  let groupId = groupSelectionControl.typedInput("value");
+                  roleField.prop("disabled", true);
+                  waService.updateUserInGroup(node.id, localConnectionId, member.id, groupId, role).catch(err => {
+                    console.log("Error updating member role:", err);
+                  }).finally(() => {
+                    roleField.prop("disabled", false);
+                  });
+                };
+                let row = $('<div/>', {
+                  class: 'form-row',
+                  style: 'display: flex; margin-bottom: 0;'
+                }).appendTo(container);
+                // Add the id column
+                let idField = $('<input/>', {
+                  type: 'text',
+                  name: i,
+                  required: true,
+                  style: 'display:none;',
+                  class: 'node-input-member-id-value'
+                }).appendTo(row);
+                idField.val(member.id);
+                // Add the Number column
+                let phoneNumberField = $('<input/>', {
+                  type: 'text',
+                  name: i,
+                  required: true,
+                  disabled: (member.id),
+                  style: 'margin-left: 5px; margin-bottom: 0; width:130px',
+                  class: 'node-input-member-phonenumber-value'
+                }).appendTo(row);
+                if (member.id) {
+                  phoneNumberField.val(member.id.substring(0, member.id.indexOf("@")));
+                }
+                // Add the Name column (read-only)
+                let nameField = $('<span/>', {
+                  style: 'margin-left: 5px; margin-bottom: 0; width:140px; display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:34px;',
+                  class: 'node-input-member-name-value'
+                }).appendTo(row);
+                nameField.text(member.name ?? "");
+                let isSuperAdmin = member.role === "SuperAdmin";
+                let roleField = $('<select />', {
+                  name: i,
+                  required: false,
+                  disabled: isSuperAdmin || !canManage,
+                  style: 'margin-left: 5px; margin-bottom: 0; width:100px',
+                  class: 'node-input-member-role-value'
+                });
+                // SuperAdmin is a fixed role — show it only for the current SuperAdmin, not as an assignable option
+                if (isSuperAdmin) {
+                  roleField.append($("<option>").attr('value', "SuperAdmin").text("Super Admin"));
+                } else {
+                  Object.entries({
+                    Admin: "Admin",
+                    Member: "Member"
+                  }).forEach(([key, value]) => {
+                    roleField.append($("<option>").attr('value', key).text(value));
+                  });
+                }
+                roleField.val(member.role);
+                roleField.on("change", () => onRoleChanged(roleField.val()));
+                roleField.appendTo(row);
+                // column for the save button.
+                let saveButtonHolder = $(`<span id="middlePlaceholder" style="display: inline-block; width: 18px;"></span>`).appendTo(row)
+                let saveButton = $(`<a 
+                    href="#" 
+                    class="red-ui-editableList-item-approve red-ui-button red-ui-button-small"
+                    style="margin-left: 5px; margin-bottom: 0;margin-top: 8px;">
+                        <i class="fa fa-save"></i>
+                    </a>`).appendTo(saveButtonHolder);
+                // if there is no member.id, show the save button because its a new member.
+                if (member.id) {
+                  saveButton.hide();
+                } else {
+                  saveButton.show();
+                }
+                saveButton.on("click", () => {
+                  saveMember(phoneNumberField.val(), roleField.val())
+                })
+              },
+              removeItem: function(member) {
+                if (member.id) {
+                  console.log("member removed", member);
+                  // get the localConnectionId from the selected account config.
+                  let localConnectionId;
+                  RED.nodes.eachConfig(cfg => {
+                    if (cfg.id === accountConfigInput.val()) {
+                      localConnectionId = cfg.localConnectionId;
+                    }
+                  });
+                  // get the groupId
+                  let groupId = groupSelectionControl.typedInput("value");
+                  // remove the user from the group.
+                  waService.removeUserFromGroup(node.id, localConnectionId, member.id, groupId);
+                } else {
+                  console.log("member id was not available when trying to remove member");
+                }
+              }
+            });
+            groupMemberList.empty();
+            groupMemberList.editableList('addItems', members);
+          }
+          let setCreateButtonEnabled = (accountNodeId) => {
+            let hasAccount = accountNodeId && accountNodeId !== "_ADD_";
+            $("#wa-group-new-btn").prop("disabled", !hasAccount);
+          };
+          // when the accountConfig changes, update the group list and button state.
+          let accountConfigInput = $("#node-config-input-accountConfig");
+          accountConfigInput.on("change", () => {
+            updateGroupList(accountConfigInput.val());
+            setCreateButtonEnabled(accountConfigInput.val());
+          });
+          // when the group changes, update the name field and member list separately
+          let groupSelectionControl = $("#node-config-input-groupId");
+          groupSelectionControl.on("change", onGroupChanged);
+          groupSelectionControl.on("change", onGroupMembersLoad);
+          groupSelectionControl.typedInput({
+            types: [{
+              value: "group",
+              options: []
+            }]
+          });
+          // set initial button state
+          setCreateButtonEnabled(accountConfigInput.val());
+          // show inline create section
+          $("#wa-group-new-btn").on("click", () => {
+            $("#wa-group-new-row").hide();
+            $("#wa-group-create-section").show();
+            $("#wa-new-group-name").val("").focus();
+          });
+          // cancel
+          $("#wa-group-create-cancel-btn").on("click", () => {
+            $("#wa-group-create-section").hide();
+            $("#wa-group-new-row").show();
+            $("#wa-new-group-name").val("");
+          });
+          // create
+          $("#wa-group-create-confirm-btn").on("click", () => {
+            let groupName = $("#wa-new-group-name").val().trim();
+            if (!groupName) return;
+            let localConnectionId;
+            RED.nodes.eachConfig(cfg => {
+              if (cfg.id === accountConfigInput.val()) localConnectionId = cfg.localConnectionId;
+            });
+            if (!localConnectionId) return;
+            let $btn = $("#wa-group-create-confirm-btn");
+            $btn.prop("disabled", true);
+            waService.createGroup(node.id, localConnectionId, groupName).then(newGroup => {
+              return waService.getGroups(node.id, localConnectionId).then(groupListResponse => {
+                groupList = groupListResponse;
+                let groups = groupList.map(g => ({
+                  value: g.id,
+                  label: g.subject
+                }));
+                groupSelectionControl.typedInput("types", [{
+                  value: "group",
+                  options: groups
+                }]);
+                groupSelectionControl.typedInput("value", newGroup.id);
+                $("#wa-group-create-section").hide();
+                $("#wa-group-new-row").show();
+                $("#wa-new-group-name").val("");
+              });
+            }).catch(err => {
+              console.log("Error creating group:", err);
+            }).finally(() => {
+              $btn.prop("disabled", false);
+            });
+          });
+        }
+      },
+      oneditsave: function() {
+        // **** WhatsappGroupConfigNode **** //
+        {
+          let node = this;
+        }
+      },
+      oneditcancel: function() {},
+      oneditdelete: function() {},
+    });
+
+</script>
+
+
+<script type="text/html" data-template-name='WhatsappGroupConfigNode'>
+    <div id='section_WhatsappGroupConfigNode'>
+        <div class="form-row">
+            <label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
+            <input type="text" id="node-config-input-name" />
+        </div>
+
+        <div class="editorgroupborder">
+
+            <div class="form-row nomargin">
+                <label for="node-config-input-accountConfig"><i class="fa fa-user"></i> Account</label>
+                <input type="text" id="node-config-input-accountConfig" placeholder="config">
+            </div>
+
+            <div class="form-row">
+                <label for="node-config-input-groupId"><i class="fa fa-users"></i> Group</label>
+                <input type="text" id="node-config-input-groupId">
+            </div>
+
+            <div class="form-row" id="wa-group-new-row">
+                <label></label>
+                <button type="button" id="wa-group-new-btn" class="red-ui-button" disabled>
+                    <i class="fa fa-plus"></i> Create New Group
+                </button>
+            </div>
+
+            <div id="wa-group-create-section" style="display:none;">
+                <div class="form-row nomargin">
+                    <label style="width:120px;"><i class="fa fa-tag"></i> Group Name</label>
+                    <input type="text" id="wa-new-group-name" style="width:calc(100% - 200px);">
+                </div>
+                <div class="form-row">
+                    <label></label>
+                    <button type="button" id="wa-group-create-confirm-btn" class="red-ui-button">
+                        <i class="fa fa-check"></i> Create
+                    </button>
+                    <button type="button" id="wa-group-create-cancel-btn" class="red-ui-button" style="margin-left:4px;">
+                        <i class="fa fa-times"></i> Cancel
+                    </button>
+                </div>
+            </div>
+
+            <div class="form-row" style="font-weight: 600;">
+                <i class="w-16 fa fa-eye"></i> <span>Group Members</span>
+            </div>
+            <div class="form-row">
+                <span>
+                    <ol id="node-input-groupMembers-container"></ol>
+                </span>
+            </div>
+        </div>
+
+
+
+    </div>
+</script>
+
+<script type="text/markdown" data-help-name='WhatsappGroupConfigNode'>
+> **Early development** — this package is still maturing. Some features may be incomplete and diagnostic log output is intentionally verbose for now.
+
+References a WhatsApp group within a linked account. Used as the target for Send Message nodes and the source for Receive Message nodes.
+
+### Properties
+
+: *name*    (string) : Display label for this config node.
+: *account* (config) : The WhatsApp Account config node that owns this group.
+: *group*   (select) : The WhatsApp group to use. The dropdown is populated from the groups available on the selected account.
+
+### Creating a new group
+
+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',
+      icon: 'whatsapp.png',
+      color: '#E6FFDA',
+      label: function() {
+        return this.name
+      },
+      paletteLabel: 'WhatsApp Send Message',
+      inputs: 1,
+      inputLabels: (i) => 'message',
+      outputs: 0,
+      outputLabels: (i) => [][i],
+      defaults: {
+        name: {
+          value: 'Send WhatsApp Message',
+          required: true
+        },
+        groupConfig: {
+          type: 'WhatsappGroupConfigNode',
+          required: true
+        },
+        payloads: {
+          value: '[]',
+          required: false,
+          validate: function(value) {
+            try {
+              var payloads = JSON.parse(value || "[]");
+              return payloads.every(function(p) {
+                return !p.enabled || (p.value !== undefined && p.value !== "");
+              });
+            } 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: {
+          type: 'MetricsConfigNode',
+          required: false
+        },
+      },
+      oneditprepare: function() {
+        // **** WhatsappSendMessageNode **** //
+        {
+          let node = this;
+          let payloads = [];
+          try {
+            payloads = 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();
+          });
+        }
+        // **** logger **** //
+        {
+          let node = this;
+          // controls.
+          let logEnabled = $("#node-input-logEnabled");
+          let logTemplateEnabled = $("#node-input-logTemplateOverrideEnabled");
+          let logTemplateEnabledSection = $("#section_logTemplateOverrideEnabled");
+          let logEnabledSection = $("#section_logEnabled");
+          // 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")
+            }
+          });
+          // lastly, make sure that we set the correct value on the logger selector.
+          updateLoggerSelectorList().then(() => {
+            loggerSelector.val(node.logger);
+            loggerSelector.trigger('change');
+          });
+        }
+        // **** metrics **** //
+        {
+          let node = this;
+          let metricsEnabled = $("#node-input-metricsEnabled");
+          let metricsEnabledSection = $("#section_metricsEnabled");
+          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;
+            }
+          });
+        }
+      },
+      oneditsave: function() {
+        // **** WhatsappSendMessageNode **** //
+        {
+          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"),
+            };
+          });
+          $("#node-input-payloads").val(JSON.stringify(payloads));
+        }
+        // **** logger **** //
+        {
+          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 **** //
+        {}
+      },
+      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>Send</span>
+        </div>
+
+        <div class="editorgroupborder" id="wa-send-payload-rows">
+        </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="node-input-metricsReference">Metric Collector</label>
+                        <input id="node-input-metricsReference" placeholder="metrics" />
+                    </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 a message to a WhatsApp group.
+
+### Properties
+
+: *name*        (string) : Display label for this node.
+: *group*       (config) : The WhatsApp Group config node to send to.
+
+### Send fields
+
+Each field has a checkbox to enable it and a typed value. Supported value types depend on the field:
+
+- **Send Text** — `msg`, `flow`, `global`, `str`
+- **Send Image** — `msg`, `flow`, `global`
+
+### Inputs
+
+: *msg* : Trigger message. Field values are resolved against this message (for `msg` type) or from context.
+
+### 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 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
+    }, ];
+
+</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',
+      icon: 'whatsapp.png',
+      color: '#E6FFDA',
+      label: function() {
+        return this.name || "WhatsappReceiveMessage";
+      },
+      paletteLabel: 'WhatsApp Receive Message',
+      inputs: 0,
+      inputLabels: (i) => 'undefined',
+      outputs: 1,
+      outputLabels: (i) => ['message'][i],
+      defaults: {
+        name: {
+          value: 'Receive Whatsapp Message',
+          required: true
+        },
+        groupConfig: {
+          type: 'WhatsappGroupConfigNode',
+          required: true
+        },
+        eventOutputKey: {
+          value: 'payload'
+        },
+        eventOutputType: {
+          value: 'msg'
+        },
+        acceptOwnMessages: {
+          value: false
+        },
+        accepts: {
+          value: '[]'
+        },
+        logEnabled: {
+          value: false,
+          required: true
+        },
+        logger: {
+          required: false,
+          value: '',
+          type: 'DelegatedConfigReferenceNode'
+        },
+        logTemplateOverrideEnabled: {
+          value: false
+        },
+        logTemplateOverride: {
+          value: 'message:{{msg}}'
+        },
+        metricsEnabled: {
+          value: false,
+          required: true
+        },
+        metricsReference: {
+          type: 'MetricsConfigNode',
+          required: false
+        },
+      },
+      oneditprepare: function() {
+        // **** WhatsappReceiveMessageNode **** //
+        {
+          let node = this;
+          $("#node-input-eventOutputKey").typedInput({
+            types: ["msg", "flow", "global"],
+            typeField: "#node-input-eventOutputType"
+          });
+          let accepts = [];
+          try {
+            accepts = JSON.parse(node.accepts || "[]");
+          } catch (e) {}
+          let grid = $('<div style="display:grid; grid-template-columns:1fr 1fr; gap:4px 8px; padding:4px 0;"></div>');
+          $("#wa-accept-rows").append(grid);
+          WA_ACCEPT_FIELDS.forEach(function(field) {
+            let saved = accepts.find(function(a) {
+              return a.id === field.id;
+            }) || {
+              enabled: field.defaultEnabled
+            };
+            let cell = $('<div style="display:flex; align-items:center; gap:6px;">' + '<input type="checkbox" id="wa-accept-' + field.id + '" style="width:auto; margin:0; flex-shrink:0;">' + '<label for="wa-accept-' + field.id + '" style="margin:0; width:auto;"><i class="fa ' + field.icon + '"></i> ' + field.label + '</label>' + '</div>');
+            grid.append(cell);
+            $("#wa-accept-" + field.id).prop("checked", saved.enabled);
+          });
+        }
+        // **** logger **** //
+        {
+          let node = this;
+          // controls.
+          let logEnabled = $("#node-input-logEnabled");
+          let logTemplateEnabled = $("#node-input-logTemplateOverrideEnabled");
+          let logTemplateEnabledSection = $("#section_logTemplateOverrideEnabled");
+          let logEnabledSection = $("#section_logEnabled");
+          // 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")
+            }
+          });
+          // lastly, make sure that we set the correct value on the logger selector.
+          updateLoggerSelectorList().then(() => {
+            loggerSelector.val(node.logger);
+            loggerSelector.trigger('change');
+          });
+        }
+        // **** metrics **** //
+        {
+          let node = this;
+          let metricsEnabled = $("#node-input-metricsEnabled");
+          let metricsEnabledSection = $("#section_metricsEnabled");
+          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;
+            }
+          });
+        }
+      },
+      oneditsave: function() {
+        // **** WhatsappReceiveMessageNode **** //
+        {
+          let accepts = WA_ACCEPT_FIELDS.map(function(field) {
+            return {
+              id: field.id,
+              enabled: $("#wa-accept-" + field.id).prop("checked"),
+            };
+          });
+          $("#node-input-accepts").val(JSON.stringify(accepts));
+        }
+        // **** logger **** //
+        {
+          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 **** //
+        {}
+      },
+      oneditcancel: function() {},
+      oneditdelete: function() {},
+    });
+
+</script>
+
+
+<script type="text/html" data-template-name='WhatsappReceiveMessageNode'>
+    <div id='section_WhatsappReceiveMessageNode'>
+        <div class="form-row">
+            <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+            <input type="text" id="node-input-name" placeholder="Name">
+        </div>
+
+        <div class="form-row editorsectionheading">
+            <i class="w-16 fa fa-envelope"></i> <span>WhatsApp Message</span>
+        </div>
+
+        <div class="editorgroupborder">
+
+            <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 nomargin">
+                <label for="node-input-acceptOwnMessages" style="width:120px;"><i class="fa fa-reply"></i> Own Messages</label>
+                <input type="checkbox" id="node-input-acceptOwnMessages" style="width:auto; margin:0; vertical-align:middle;">
+            </div>
+
+            <div class="form-row nomargin">
+                <label for="node-input-eventOutputKey" style="width:120px;"><i class="fa fa-arrow-right"></i> Output Path</label>
+                <input type="text" id="node-input-eventOutputKey" placeholder="payload">
+                <input type="hidden" id="node-input-eventOutputType">
+            </div>
+
+        </div>
+
+        <div class="form-row editorsectionheading">
+            <i class="w-16 fa fa-filter"></i> <span>Accept</span>
+        </div>
+
+        <div class="editorgroupborder" id="wa-accept-rows">
+        </div>
+
+        <input type="hidden" id="node-input-accepts">
+
+
+    </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="node-input-metricsReference">Metric Collector</label>
+                        <input id="node-input-metricsReference" placeholder="metrics" />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</script>
+
+<script type="text/markdown" data-help-name='WhatsappReceiveMessageNode'>
+> **Early development** — this package is still maturing. Some features may be incomplete and diagnostic log output is intentionally verbose for now.
+
+Receives messages from a WhatsApp group and outputs them as Node-RED messages.
+
+### Properties
+
+: *name*         (string) : Display label for this node.
+: *group*        (config) : The WhatsApp Group config node to receive from.
+: *own messages* (bool)   : Whether to forward messages sent by this account.
+: *output path*  (typed)  : Where in the output `msg` to place the WhatsApp message, or which context variable to write to.
+
+### Accept filters
+
+Each message type can be individually enabled or disabled. By default Text, Extended Text, Image, Video, and Album messages are accepted.
+
+### Outputs
+
+: *msg* : Output message. The WhatsApp message is placed at the configured output path.
+
+### 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 collector* (metricconfig) : the collection point or grouping where this particular metric will be attached.
+</script>
+
+