Update package.json

* fix: change the individual buttons limti to 3, still 5 on total

* docs: Change buttons example to include clipboard

example.js

@@ -32,6 +32,12 @@ client.on('ready', () => {
 client.on('message', async msg => {
     console.log('MESSAGE RECEIVED', msg);
 
+    if (msg.selectedButtonId == 'test') {
+        return msg.reply('You clicked the button!');
+    } else if (msg.selectedRowId == 'test') {
+        return msg.reply('You clicked that section');
+    }
+
     if (msg.body === '!ping reply') {
         // Send a new message as a reply to the current one
         msg.reply('pong');
@@ -189,14 +195,30 @@ client.on('message', async msg => {
             client.interface.openChatWindowAt(quotedMsg.id._serialized);
         }
     } else if (msg.body === '!buttons') {
-        let button = new Buttons('Button body',[{body:'bt1'},{body:'bt2'},{body:'bt3'}],'title','footer');
+        let button = new Buttons(
+            'Button body\n\nWant to test buttons some more? Check out https://github.com/wwebjs/buttons-test',
+            [
+                { body: 'Some text' },
+                { body: 'Try clicking me (id:test)', id: 'test'},
+            ],
+            'title',
+            'footer'
+        );
         client.sendMessage(msg.from, button);
     } else if (msg.body === '!list') {
-        let sections = [{title:'sectionTitle',rows:[{title:'ListItem1', description: 'desc'},{title:'ListItem2'}]}];
-        let list = new List('List body','btnText',sections,'Title','footer');
-        client.sendMessage(msg.from, list);
+        let sections = [
+            {
+                title: 'Secton title',
+                rows: [
+                    {title:'ListItem1', description: 'desc'},
+                    {title: 'Try clicking me (id: test)', id: 'test'}
+                ]
+            }
+        ];
+        let list = new List('List body', 'btnText', sections, 'Custom title', 'custom footer, google.com');
+        await client.sendMessage(msg.from, list);
     } else if (msg.body === '!reaction') {
-        msg.react('👍');
+        await msg.react('👍');
     }
 });
 

index.d.ts

@@ -1,6 +1,8 @@
 
 import { EventEmitter } from 'events'
 import { RequestInit } from 'node-fetch'
+import { ButtonSpec, FormattedButtonSpec } from './src/structures/Buttons'
+import { FormattedSectionSpec, SectionSpec } from './src/structures/List'
 import * as puppeteer from 'puppeteer'
 
 declare namespace WAWebJS {
@@ -1336,21 +1338,21 @@ declare namespace WAWebJS {
     export class List {
         body: string
         buttonText: string
-        sections: Array<any>
+        sections: Array<FormattedSectionSpec>
         title?: string | null
         footer?: string | null
         
-        constructor(body: string, buttonText: string, sections: Array<any>, title?: string | null, footer?: string | null)
+        constructor(body: string, buttonText: string, sections: Array<SectionSpec>, title?: string | null, footer?: string | null)
     }
     
     /** Message type Buttons */
     export class Buttons {
         body: string | MessageMedia
-        buttons: Array<{ buttonId: string; buttonText: {displayText: string}; type: number }>
+        buttons: FormattedButtonSpec
         title?: string | null
         footer?: string | null
         
-        constructor(body: string, buttons: Array<{ id?: string; body: string }>, title?: string | null, footer?: string | null)
+        constructor(body: string, buttons: Array<ButtonSpec>, title?: string | null, footer?: string | null)
     }
 
     /** Message type Reaction */

package.json

@@ -1,7 +1,7 @@
 {
   "name": "whatsapp-web.js",
   "version": "1.19.4",
-  "description": "Library for interacting with the WhatsApp Web API ",
+  "description": "Library for interacting with the WhatsApp Web API - Buttons Templates and others added.",
   "main": "./index.js",
   "typings": "./index.d.ts",
   "scripts": {

src/Client.js

@@ -693,7 +693,7 @@ class Client extends EventEmitter {
             }
 
             const msg = await window.WWebJS.sendMessage(chat, message, options, sendSeen);
-            return msg.serialize();
+            return JSON.parse(JSON.stringify(msg));
         }, chatId, content, internalOptions, sendSeen);
 
         return new Message(this, newMessage);

src/structures/Buttons.js

@@ -1,20 +1,23 @@
 'use strict';
 
 const MessageMedia = require('./MessageMedia');
-const Util = require('../util/Util');
 
 /**
  * Button spec used in Buttons constructor
  * @typedef {Object} ButtonSpec
- * @property {string=} id - Custom ID to set on the button. A random one will be generated if one is not passed.
  * @property {string} body - The text to show on the button.
+ * @property {string=} id - Custom ID to set on the button. A random one will be generated if one is not passed.
+ * @property {string=} url - Custom URL to set on the button. Optional and will change the type of the button
+ * @property {string=} number - Custom URL to set on the button. Optional and will change the type of the button
  */
 
 /**
  * @typedef {Object} FormattedButtonSpec
- * @property {string} buttonId
- * @property {number} type
- * @property {Object} buttonText
+ * @property {number} index
+ * @property {{displayText: string, url: string}=} urlButton
+ * @property {{displayText: string, phoneNumber: string}=} callButton
+ * @property {{displayText: string, id: string}=} quickReplyButton
+ * @property {{regularButtons: {text: string, id: string}}=} regularButtons
  */
 
 /**
@@ -26,8 +29,9 @@ class Buttons {
      * @param {ButtonSpec[]} buttons - See {@link ButtonSpec}
      * @param {string?} title
      * @param {string?} footer
+     * @param {boolean?} templateOverride
      */
-    constructor(body, buttons, title, footer) {
+    constructor(body, buttons, title, footer, templateOverride = false) {
         /**
          * Message body
          * @type {string|MessageMedia}
@@ -59,24 +63,58 @@ class Buttons {
          */
         this.buttons = this._format(buttons);
         if(!this.buttons.length){ throw '[BT01] No buttons';}
-                
+
+        /**
+         * Override buttons with templates
+         * @type {boolean}
+         */
+        this.useTemplateButtons = templateOverride;
     }
 
     /**
      * Creates button array from simple array
      * @param {ButtonSpec[]} buttons
      * @returns {FormattedButtonSpec[]}
-     * @example 
-     * Input: [{id:'customId',body:'button1'},{body:'button2'},{body:'button3'},{body:'button4'}]
-     * Returns: [{ buttonId:'customId',buttonText:{'displayText':'button1'},type: 1 },{buttonId:'n3XKsL',buttonText:{'displayText':'button2'},type:1},{buttonId:'NDJk0a',buttonText:{'displayText':'button3'},type:1}]
      */
     _format(buttons){
-        buttons = buttons.slice(0,3); // phone users can only see 3 buttons, so lets limit this
-        return buttons.map((btn) => {
-            return {'buttonId':btn.id ? String(btn.id) : Util.generateHash(6),'buttonText':{'displayText':btn.body},'type':1};
+        // Limit the buttons (max 3 of regular and 3 of special buttons) 5 buttons total at the same time
+        const templateButtons = buttons.filter(button => button.url || button.number);
+        const regularButtons = buttons.filter(button => !button.url && !button.number);
+        buttons = regularButtons.concat(templateButtons);
+
+        return buttons.map((button, index) => {
+            if (button.url && button.number && button.id) throw 'Only pick one of the following (url/number/id)';
+            if (button.number) {
+                console.log('[WARNING] THIS FEATURE (CALL BUTTONS) IS UNSTABLE AND IS NOT TESTED OR EXPECTED TO WORK ON ALL PLATFORMS. Help test this feature with us on https://github.com/wwebjs/buttons-test');
+                return {
+                    index,
+                    callButton: {
+                        displayText: button.body, 
+                        phoneNumber: button.number || ''
+                    }
+                };
+            } else if (button.url) {
+                console.log('[WARNING] THIS FEATURE (URL BUTTONS) IS UNSTABLE AND IS NOT TESTED OR EXPECTED TO WORK ON ALL PLATFORMS. Help test this feature with us on https://github.com/wwebjs/buttons-test');
+                return {
+                    index,
+                    urlButton: {
+                        displayText: button.body, 
+                        url: button.url || ''
+                    }
+                };
+            } else {
+                return {
+                    index,
+                    quickReplyButton: {
+                        displayText: button.body, 
+                        id: button.id || `${index}`
+                    }
+                };
+            }
+
         });
     }
     
 }
 
-module.exports = Buttons;
+module.exports = Buttons;

src/structures/List.js

@@ -2,16 +2,38 @@
 
 const Util = require('../util/Util');
 
+/**
+ * Section spec used in List constructor
+ * @typedef {Object} SectionSpec
+ * @property {string=} title - The title of the section, can be empty on the first section only.
+ * @property {RowSpec[]} rows - The rows of the section.
+ */
+
+/**
+ * Row spec used in List constructor
+ * @typedef {Object} RowSpec
+ * @property {string} title - The text to show on the row.
+ * @property {string=} id - Custom ID to set on the row. A random one will be generated if one is not passed.
+ * @property {string=} description - Custom description for the row, will appear after clicked in the list response message (appended)
+ */
+
+/**
+ * Formatted section spec
+ * @typedef {Object} FormattedSectionSpec
+ * @property {string} title
+ * @property {{rowId: string; title: string; description: string}[]} rows
+ */
+
 /**
  * Message type List
  */
 class List {
     /**
-     * @param {string} body
-     * @param {string} buttonText
-     * @param {Array<any>} sections
-     * @param {string?} title
-     * @param {string?} footer
+     * @param {string} body - A text body, no media.
+     * @param {string} buttonText - The text to put on the click to open button.
+     * @param {Array<SectionSpec>} sections - The sections of the list
+     * @param {string?} title - Custom boldfaced title property
+     * @param {string?} footer - Custom footer added in a small font to the end of the message
      */
     constructor(body, buttonText, sections, title, footer) {
         /**
@@ -49,23 +71,28 @@ class List {
     
     /**
      * Creates section array from simple array
-     * @param {Array<any>} sections
-     * @returns {Array<any>}
-     * @example
-     * Input: [{title:'sectionTitle',rows:[{id:'customId', title:'ListItem2', description: 'desc'},{title:'ListItem2'}]}}]
-     * Returns: [{'title':'sectionTitle','rows':[{'rowId':'customId','title':'ListItem1','description':'desc'},{'rowId':'oGSRoD','title':'ListItem2','description':''}]}]
+     * @param {Array<SectionSpec>} sections
+     * @returns {Array<FormattedSectionSpec>}
      */
-    _format(sections){
-        if(!sections.length){throw '[LT02] List without sections';}
-        if(sections.length > 1 && sections.filter(s => typeof s.title == 'undefined').length > 1){throw '[LT05] You can\'t have more than one empty title.';}
-        return sections.map( (section) =>{
-            if(!section.rows.length){throw '[LT03] Section without rows';}
+    _format(sections) {
+        if(!sections.length) {
+            throw '[LT02] List without sections';
+        }
+        if(sections.length > 1 && sections.filter(section => (typeof section.title == 'undefined' )|| section.title == '' ).length > 1) {
+            throw '[LT05] You can\'t have more than one empty title.';
+        }
+        return sections.map((section, index) => {
+            if(!section.rows.length) {
+                throw '[LT03] Section without rows';
+            }
             return {
                 title: section.title ? section.title : undefined,
-                rows: section.rows.map( (row) => {
-                    if(!row.title){throw '[LT04] Row without title';}
+                rows: section.rows.map((row, rowIndex) => {
+                    if (!row.title) {
+                        throw `[LT04] Row without title at section index ${index} and row index ${rowIndex}`;
+                    }
                     return {
-                        rowId: row.id ? row.id : Util.generateHash(6),
+                        rowId: row.id ? row.id : Util.generateHash(8),
                         title: row.title,
                         description: row.description ? row.description : ''
                     };

src/util/Injected.js

@@ -58,7 +58,7 @@ exports.ExposeStore = (moduleRaidStr) => {
         ...window.mR.findModule('toWebpSticker')[0],
         ...window.mR.findModule('addWebpMetadata')[0]
     };
-  
+
     window.Store.GroupUtils = {
         ...window.mR.findModule('createGroup')[0],
         ...window.mR.findModule('setGroupDescription')[0],
@@ -74,6 +74,251 @@ exports.ExposeStore = (moduleRaidStr) => {
         };
     }
 
+    // The following was implemented and inspired from wppconnect/wa-js at 
+    // https://github.com/wppconnect-team/wa-js/tree/main/src/chat/functions/prepareMessageButtons.ts
+
+    // Find proxy modules
+    window.findProxyModel = (name) => {
+        const baseName = name.replace(/Model$/, '');
+
+        const names = [baseName];
+
+        // ChatModel => "chat"
+        names.push(baseName.replace(/^(\w)/, (l) => l.toLowerCase()));
+
+        // CartItemModel => "cart-item"
+        // ProductListModel => "product_list"
+        const parts = baseName.split(/(?=[A-Z])/);
+
+        names.push(parts.join('-').toLowerCase());
+        names.push(parts.join('_').toLowerCase());
+
+        const results = window.mR.findModule((m) =>
+            names.includes(
+                m.default?.prototype?.proxyName ||
+                m[name]?.prototype?.proxyName ||
+                m[baseName]?.prototype?.proxyName
+            )
+        )[0];
+
+        return results.default || results[name] || results[baseName];
+    };
+
+    // Function to modify functions.
+    // This function simply just runs the callback you provide with the original code in the first argument and all the arguments passed to that function.
+    window.injectToFunction = (selector, callback) => {
+        const oldFunct = window.mR.findModule(selector.name)[selector.index][selector.property];
+        window.mR.findModule(selector.name)[selector.index][selector.property] = (...args) => callback(oldFunct, args);
+    };
+
+    // Find Template models
+    window.Store.TemplateButtonModel = window.findProxyModel('TemplateButtonModel');
+    window.Store.TemplateButtonCollection = window.mR.findModule('TemplateButtonCollection')[0].TemplateButtonCollection;
+    
+    // Find quick reply models
+    window.Store.ReplyButtonModel = window.findProxyModel('ReplyButtonModel');
+    window.Store.ButtonCollection = window.mR.findModule('ButtonCollection')[0].ButtonCollection;
+
+    // Modify functions 
+    window.injectToFunction({
+        index: 0,
+        name: 'createMsgProtobuf',
+        property: 'createMsgProtobuf'
+    }, (func, args) => {
+        const [message] = args;
+        const proto = func(...args);
+        if (message.hydratedButtons) {
+            const hydratedTemplate = {
+                hydratedButtons: message.hydratedButtons,
+            };
+
+            if (message.footer) {
+                hydratedTemplate.hydratedFooterText = message.footer;
+            }
+
+            if (message.caption) {
+                hydratedTemplate.hydratedContentText = message.caption;
+            }
+
+            if (message.title) {
+                hydratedTemplate.hydratedTitleText = message.title;
+            }
+
+            if (proto.conversation) {
+                hydratedTemplate.hydratedContentText = proto.conversation;
+                delete proto.conversation;
+            } else if (proto.extendedTextMessage?.text) {
+                hydratedTemplate.hydratedContentText = proto.extendedTextMessage.text;
+                delete proto.extendedTextMessage;
+            } else {
+                // Search media part in message
+                let found;
+                const mediaPart = [
+                    'documentMessage',
+                    'imageMessage',
+                    'locationMessage',
+                    'videoMessage',
+                ];
+                for (const part of mediaPart) {
+                    if (part in proto) {
+                        found = part;
+                        break;
+                    }
+                }
+
+                if (!found) {
+                    return proto;
+                }
+
+                // Media message doesn't allow title
+                hydratedTemplate[found] = proto[found];
+
+                // Copy title to caption if not setted
+                if (
+                    hydratedTemplate.hydratedTitleText &&
+                    !hydratedTemplate.hydratedContentText
+                ) {
+                    hydratedTemplate.hydratedContentText =
+                        hydratedTemplate.hydratedTitleText;
+                }
+
+                // Remove title for media messages
+                delete hydratedTemplate.hydratedTitleText;
+
+                if (found === 'locationMessage') {
+                    if (
+                        !hydratedTemplate.hydratedContentText &&
+                        (message[found].name || message[found].address)
+                    ) {
+                        hydratedTemplate.hydratedContentText =
+                            message[found].name && message[found].address
+                                ? `${message[found].name}\n${message[found].address}`
+                                : message[found].name || message[found].address || '';
+                    }
+                }
+
+                // Ensure a content text;
+                hydratedTemplate.hydratedContentText =
+                    hydratedTemplate.hydratedContentText || ' ';
+
+                delete proto[found];
+            }
+
+            proto.templateMessage = {
+                hydratedTemplate,
+            };
+        }
+
+        return proto;
+    });
+
+    setTimeout(() => {
+        window.injectToFunction({
+            index: 0,
+            name: 'createMsgProtobuf',
+            property: 'createMsgProtobuf'
+        }, (func, args) => {
+            const proto = func(...args);
+            if (proto.templateMessage) {
+                proto.viewOnceMessage = {
+                    message: {
+                        templateMessage: proto.templateMessage,
+                    },
+                };
+                delete proto.templateMessage;
+            }
+            if (proto.buttonsMessage) {
+                proto.viewOnceMessage = {
+                    message: {
+                        buttonsMessage: proto.buttonsMessage,
+                    },
+                };
+                delete proto.buttonsMessage;
+            }
+            if (proto.listMessage) {
+                proto.viewOnceMessage = {
+                    message: {
+                        listMessage: proto.listMessage,
+                    },
+                };
+                delete proto.listMessage;
+            }
+            return proto;
+        });
+    }, 100);
+
+    window.injectToFunction({
+        index: 0,
+        name: 'typeAttributeFromProtobuf',
+        property: 'typeAttributeFromProtobuf'
+    }, (func, args) => {
+        const [proto] = args;
+
+        if (proto.ephemeralMessage) {
+            const { message } = proto.ephemeralMessage;
+            return message ? func(message) : 'text';
+        }
+        if (proto.deviceSentMessage) {
+            const { message } = proto.deviceSentMessage;
+            return message ? func(message) : 'text';
+        }
+        if (proto.viewOnceMessage) {
+            const { message } = proto.viewOnceMessage;
+            return message ? func(message) : 'text';
+        }
+        
+        if (proto.templateMessage?.hydratedTemplate) {
+            const keys = Object.keys(proto.templateMessage?.hydratedTemplate);
+            const messagePart = [
+                'documentMessage',
+                'imageMessage',
+                'locationMessage',
+                'videoMessage',
+            ];
+            if (messagePart.some((part) => keys.includes(part))) {
+                return 'media';
+            }
+            return 'text';
+        }
+        
+        if (
+            proto.buttonsMessage?.headerType === 1 ||
+            proto.buttonsMessage?.headerType === 2
+        ) {
+            return 'text';
+        }
+
+        if (proto.listMessage) {
+            return 'text';
+        }
+
+        return func(...args);
+    });
+
+    window.injectToFunction({
+        index: 0,
+        name: 'mediaTypeFromProtobuf',
+        property: 'mediaTypeFromProtobuf'
+    }, (func, args) => {
+        const [proto] = args;
+        if (proto.templateMessage?.hydratedTemplate) {
+            return func(proto.templateMessage.hydratedTemplate);
+        }
+        return func(...args);
+    });
+    
+    window.injectToFunction({
+        index: 0,
+        name: 'encodeMaybeMediaType',
+        property: 'encodeMaybeMediaType',
+    }, (func, args) => {
+        const [type] = args;
+        if (type === 'button') {
+            return window.mR.findModule('DROP_ATTR')[0].DROP_ATTR;
+        }
+        return func(...args);
+    });
+
     // TODO remove these once everybody has been updated to WWebJS with legacy sessions removed
     const _linkPreview = window.mR.findModule('queryLinkPreview');
     if (_linkPreview && _linkPreview[0] && _linkPreview[0].default) {
@@ -106,6 +351,71 @@ exports.LoadUtils = () => {
 
     };
 
+    window.WWebJS.prepareMessageButtons = (buttonsOptions) => {
+        const returnObject = {};
+        if (!buttonsOptions.buttons) {
+            return returnObject;
+        }
+        
+        returnObject.title = buttonsOptions.title;
+        returnObject.footer = buttonsOptions.footer;
+    
+        if (buttonsOptions.useTemplateButtons) {
+            returnObject.isFromTemplate = true;
+            returnObject.hydratedButtons = buttonsOptions.buttons;
+            returnObject.buttons = new window.Store.TemplateButtonCollection();
+
+            returnObject.buttons.add(
+                returnObject.hydratedButtons.map((button, index) => {
+                    const i = `${null != button.index ? button.index : index}`;
+                      
+                    if (button.urlButton) {
+                        return new window.Store.TemplateButtonModel({
+                            id: i,
+                            displayText: button.urlButton?.displayText,
+                            url: button.urlButton?.url,
+                            subtype: 'url',
+                        });
+                    }
+            
+                    if (button.callButton) {
+                        return new window.Store.TemplateButtonModel({
+                            id: i,
+                            displayText: button.callButton.displayText,
+                            phoneNumber: button.callButton.phoneNumber,
+                            subtype: 'call',
+                        });
+                    }
+            
+                    return new window.Store.TemplateButtonModel({
+                        id: i,
+                        displayText: button.quickReplyButton?.displayText,
+                        selectionId: button.quickReplyButton?.id,
+                        subtype: 'quick_reply',
+                    });
+                })
+            );
+        }
+        else {
+            returnObject.isDynamicReplyButtonsMsg = true;
+
+            returnObject.dynamicReplyButtons = buttonsOptions.buttons.map((button, index) => ({
+                buttonId: button.quickReplyButton.id.toString() || `${index}`,
+                buttonText: {displayText: button.quickReplyButton?.displayText},
+                type: 1,
+            }));
+
+            // For UI only
+            returnObject.replyButtons = new window.Store.ButtonCollection();
+            returnObject.replyButtons.add(returnObject.dynamicReplyButtons.map((button) => new window.Store.ReplyButtonModel({
+                id: button.buttonId,
+                displayText: button.buttonText?.displayText || undefined,
+            })));
+
+        }
+        return returnObject;
+    };
+
     window.WWebJS.sendMessage = async (chat, content, options = {}) => {
         let attOptions = {};
         if (options.attachment) {
@@ -189,7 +499,7 @@ exports.LoadUtils = () => {
             delete options.linkPreview;
 
             // Not supported yet by WhatsApp Web on MD
-            if(!window.Store.MDBackend) {
+            if (!window.Store.MDBackend) {
                 const link = window.Store.Validators.findLink(content);
                 if (link) {
                     const preview = await window.Store.Wap.queryLinkPreview(link.url);
@@ -199,9 +509,9 @@ exports.LoadUtils = () => {
                 }
             }
         }
-        
+
         let buttonOptions = {};
-        if(options.buttons){
+        if (options.buttons) {
             let caption;
             if (options.buttons.type === 'chat') {
                 content = options.buttons.body;
@@ -209,24 +519,17 @@ exports.LoadUtils = () => {
             } else {
                 caption = options.caption ? options.caption : ' '; //Caption can't be empty
             }
+
+            buttonOptions = window.WWebJS.prepareMessageButtons(options.buttons);
             buttonOptions = {
-                productHeaderImageRejected: false,
-                isFromTemplate: false,
-                isDynamicReplyButtonsMsg: true,
-                title: options.buttons.title ? options.buttons.title : undefined,
-                footer: options.buttons.footer ? options.buttons.footer : undefined,
-                dynamicReplyButtons: options.buttons.buttons,
-                replyButtons: options.buttons.buttons,
+                ...buttonOptions,
                 caption: caption
             };
             delete options.buttons;
         }
 
         let listOptions = {};
-        if(options.list){
-            if(window.Store.Conn.platform === 'smba' || window.Store.Conn.platform === 'smbi'){
-                throw '[LT01] Whatsapp business can\'t send this yet';
-            }
+        if (options.list) {
             listOptions = {
                 type: 'list',
                 footer: options.list.footer,