node-red-contrib-chatbot/nodes/chatbot-ask.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">
  RED.nodes.registerType('chatbot-ask', {
    category: 'RedBot',
    color: '#FFCC66',
    defaults: {
      name: {
        value: ''
      },
      buttons: {
        value: []
      },
      message: {
        value: ''
      }
    },
    inputs: 1,
    outputs: 1,
    paletteLabel: 'Keyboards',
    icon: 'chatbot-ask.png',
    label: function() {
      return this.name || 'Keyboards';
    },

    oneditsave: function() {
      var buttons = $("#node-input-buttons-container").editableList('items');
      var node = this;
      node.buttons = [];
      var idx;
      for(idx = 0; idx < buttons.length; idx++) {
        node.buttons.push($(buttons[idx]).RB_getButtonData());
      }
    },
    oneditprepare: function() {
      $('#node-input-buttons-container')
        .css('min-height','300px')
        .css('min-width','450px')
        .editableList({
          addButton: 'Add button',
          addItem: function(container, i, item) {
            $(container).RB_mountButtonDialog({
              types: ['keyboardButton', 'newline'],
              platforms: ['telegram'],
              badges: false
            });
            $(container).RB_setButtonData(item);
          },
          removable: true,
          sortable: true
        });

      var buttons = this.buttons;
      var idx;
      for (idx = 0; idx < buttons.length; idx++) {
        $('#node-input-buttons-container').editableList('addItem', buttons[idx]);
      }
    },
    oneditresize: function() {
      /*var dialogForm = $('#dialog-form');
      var rowName = $('.form-row-name', dialogForm);
      var rowMessage = $('.form-row-message', dialogForm);
      var rowLabel = $('.form-row-label', dialogForm);
      var rowHint = $('.form-row-hint', dialogForm);
      var height = dialogForm.height() - rowName.height() - rowMessage.height() - rowLabel.height() - rowHint.height() - 30;
      $('#node-input-buttons-container').editableList('height', height);*/
    }



    /*oneditsave: function() {
      var answers = $("#node-input-answers-container").editableList('items');
      var node = this;
      node.answers = [];

      var idx;
      for(idx = 0; idx < answers.length; idx++) {
        node.answers.push({
          value: answers[idx].find('input').val(),
          label: answers[idx].find('input').val()
        });
      }
    },

    oneditprepare: function() {

      function resizeRule(rule) {}
      $('#node-input-answers-container').css('min-height','300px').css('min-width','450px').editableList({
        addItem: function(container, i, answer) {
          var value = typeof answer == 'object' ? '' : answer;
          var row1 = $('<div/>').appendTo(container);
          $('<input type="text" value="' + (answer.value != null ? answer.value : '') + '"/>', {
            class: 'node-input-rule-type',
            style: 'width:100%px; margin-right:10px;'
            })
            .appendTo(row1);
          resizeRule(container);
        },
        resizeItem: resizeRule,
        removable: true,
        sortable: true
      });

      var answers = this.answers;
      var idx;
      for (idx = 0; idx < answers.length; idx++) {
        var answer = answers[idx];
        $("#node-input-answers-container").editableList('addItem', answer);
      }
    }*/
  });
</script>

<script type="text/x-red" data-template-name="chatbot-ask">
<div class="form-row">
  <label for="node-input-name"><i class="icon-tag"></i> Name</label>
  <input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row">
  <label for="node-input-message"><i class="icon-envelope"></i> Message</label>
  <textarea id="node-input-message" placeholder="Message" style="width:93%;height:100px;"></textarea>
  <div style="max-width: 460px;font-size: 12px;color: #999999;line-height: 14px;clear:both;margin-top:5px;">
    Supports handlebars-like variables for chat context like {{firstName}}, {{lastName}}, etc. and emoticons (:smile:, etc.)
  </div>
</div>
<div class="form-row" style="margin-bottom:0;">
  <label><i class="fa fa-list"></i> <span>Buttons</span></label>
</div>
<div class="form-row node-input-rule-container-row">
  <ol id="node-input-buttons-container"></ol>
</div>
</script>

<script type="text/x-red" data-help-name="chatbot-ask"><p>Show quick alternatives (canned answers) to the users with custom persistent keyboards.</p>
<p>The keyboard automatically closes after the user clicks on a button, the keyboard is still available after use. To completely remove a keyboard use a <code>Keyboard node</code> with an empty buttons set. </p>
<p>The custom keyboards can also be passed through the payload by an upstream node <code>Function node</code>:</p>
<pre><code>msg.payload = {
  message: &#39;The message with the buttons&#39;,
  buttons: [
    {type: &#39;keyboardButton&#39;, label: &#39;label of the button 1&#39;},
    {type: &#39;newline&#39;},
    {type: &#39;keyboardButton&#39;, label: &#39;another button&#39;}
  ]
}
return msg;
</code></pre><p>Available parameters for the <code>msg.payload</code></p>
<dl class="message-properties">


<dt>message<span class="property-type">string</span><dd>The message text above the buttons</dd>
<dt>buttons<span class="property-type">array of [button]</span><dd>The list of inline buttons</dd>

</dl>
<p>The <code>[button]</code> object</p>
<dl class="message-properties">


<dt>type<span class="property-type">string</span><dd>The type of the element, could be: <em>newline</em> (adds a new line of buttons) or <em>keyboardButton</em></dd>
<dt>label<span class="property-type">string</span><dd>Label of the button</dd>

</dl>
<p><img src="https://img.shields.io/badge/platform-Telegram-blue.svg?colorB=7cbaea" alt="Telegram"></p>
</script>