node-red-contrib-chatbot/nodes/chatbot-telegram-menu.html

REDBot a Chat bot for a full featured chat bot for Telegram, Facebook Messenger and Slack. Almost no coding skills required

<script type="text/javascript">
  $.RedBot.registerType('chatbot-telegram-menu', {
    category: $.RedBot.config.name,
    color: '#FFCC66',
    defaults: {
      bot: {
        value: "",
        type: 'chatbot-telegram-node',
        required: false
      },
      items: {
        value: [],
        validate: function(items) {
          var valid = true;
          var idx;
          for(idx = 0; idx < items.length; idx++) {
            if (!$.RedBot.validate.telegram.command(items[idx])) {
              valid = false;
            }
          }
          return valid;
        }
      }
    },
    inputs: 1,
    outputs: 0,
    paletteLabel: 'Telegram Menu',
    icon: 'telegram.svg',
    label: 'Telegram Menu',
    oneditsave: function() {
      var items = $("#node-input-items-container").editableList('items');
      var node = this;
      node.items = [];
      var idx;
      for(idx = 0; idx < items.length; idx++) {
        var container = $(items[idx]);
        node.items.push({
          command: $('input[name=command]', container).val(),
          description: $('input[name=description]', container).val(),
        });
      }
    },
    oneditprepare: function() {
      $('#node-input-items-container').css('min-height','300px').css('min-width','450px').editableList({
        addButton: 'Add command',
        addItem: function(container, i, item) {
          var main = $('<div/>').appendTo(container)
            .append('<input class="node-input-rule-type" type="text" name="command" style="width:30%" placeholder="/command"/>')
            .append('<input class="node-input-rule-type" type="text" name="description" style="width:60%;margin-left:10px;" placeholder="Description"/>')
          $('input[name=command]', container).val(item.command);
          $('input[name=description]', container).val(item.description);
        },
        removable: true,
        sortable: true
      });
      if (this.items != null) {
        this.items.forEach(function(item) {
          $('#node-input-items-container').editableList('addItem', item);
        });
      }
    },
    oneditresize: function() {
      var dialogForm = $('#dialog-form');
      var rowBot = $('.form-row-bot', dialogForm);
      var rowLabel = $('.form-row-label', dialogForm);
      var height = dialogForm.height() - rowLabel.height() - rowBot.height() - 30;
      $('#node-input-items-container').editableList('height', height);
    }
  });
</script>

<script type="text/x-red" data-template-name="chatbot-telegram-menu">
  <div class="form-row form-row-bot">
    <label for="node-input-bot" style="display:block;width:100%;">Telegram Bot</label>
    <input type="text" id="node-input-bot" placeholder="Bot">
  </div>
  <div class="form-row form-row-label form-row-buttons" style="margin-bottom:0;">
    <label><span>Commands</span></label>
  </div>
  <div class="form-row form-row-items node-input-rule-container-row">
    <ol id="node-input-items-container"></ol>
  </div>
</script>

<script type="text/x-red" data-help-name="chatbot-telegram-menu"><p>This node allows to create a persistent shortcuts menu in a Telegram bot. It’s only possible to specify commands (i.e. <code>/my_command</code>) along with a simple description.</p>
<p>There’s no need to connect this node with a <code>Telegram Receiver node</code> or a <code>Telegram Sender node</code>, its generally connect to a Node-RED <code>Inject node</code> which is configured to fire when the flow starts.</p>
<p>It’s possible to create the Telegram menu programmatically in an upstream <code>Function node</code></p>
<pre><code class="language-javascript">return {
    ...msg,
  commands: [
        {
            command: &#39;/command1&#39;,
            description: &#39;Command 1&#39;
        },
        {
            command: &#39;/command2&#39;,
            description: &#39;Command 2&#39;
        }
    ]
};
</code></pre>
<p>Available params</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td>commands</td>
<td>[command]</td>
<td>The list of available commands</td>
</tr>
</tbody></table>
<p>The <code>command</code> entity</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td>command</td>
<td>string</td>
<td>Telegram command (i.e. <code>/my-command</code>), always start with a <code>/</code>. Required</td>
</tr>
<tr>
<td>description</td>
<td>string</td>
<td>Description of the command. Required.</td>
</tr>
</tbody></table>
</script>