node-red-contrib-tekosbot/nodes/chatbot-quick-replies.html

Tekos bot based on matrix

<script type="text/javascript">
$.ajax({url: '/appParams', 
        async: true,
        method: 'GET',
        success: (res) => {

}})

  RED.nodes.registerType('chatbot-quick-replies', {
    category: 'Dialogue',
    color: '#ffd7b0',
    defaults: {
      name: {
        value: ''
      },
      message: {
        value: ''
      },
      buttons: {
        value: [],
        validate: function(buttons) {
          var valid = true;
          var idx;
          for(idx = 0; idx < buttons.length; idx++) {
            if (!$.RedBot.validate.button(buttons[idx])) {
              valid = false;
            }
          }
          return valid;
        }
      }
    },
    inputs: 1,
    outputs: 1,
    paletteLabel: 'Quick Replies',
    icon: 'chatbot-quick-replies.png',
    align: 'left',
    label: function() {
      return this.name || 'Quick Replies';
    },
    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-width','450px')
        .editableList({
          addButton: 'Add button',
          addItem: function(container, i, item) {
            $(container).RB_mountButtonDialog({
              types: ['postback', 'url'],
              badges: false
            });
            $(container).RB_setButtonData(item, {
              badges: false
            });
          },
          removable: true,
          sortable: true
        });

      if (this.buttons != null) {
        this.buttons.forEach(function(button) {
          $('#node-input-buttons-container').editableList('addItem', button);
        });
      }
    },
    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 height = dialogForm.height() - rowName.height() - rowLabel.height() - rowMessage.height() - 30;
      $('#node-input-buttons-container').editableList('height', height);
    }
  });
</script>

<script type="text/x-red" data-template-name="chatbot-quick-replies">
<div class="form-row form-row-name">
  <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 form-row-message">
  <label for="node-input-message"><i class="icon-envelope"></i> Message</label>
  <textarea id="node-input-message" placeholder="Message" style="width:93%;height:50px;"></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 form-row-label" 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-quick-replies">
<h3>Node Quick Replies</h3> 
    <h6>Definitions</h6> 
    <p>Node provide a way to present buttons to the user in response to a message.</p>
    <p>Here two types of buttons are available :</p>
    <ul>
        <li><u>Postback</u> : When a quick reply is tapped, the message is sent in the conversation with developer-defined metadata in the callback.</li>
        <li><u>URL</u> : Open a URL inside the client.</li>
    </ul>
    <p>The message section can display texts like Text node in handlebar-like format, where the attributes are passed under msg.payload, like the following:</p>
    <pre><code>Hi {{firstName}}, please pick an option</code></pre>
    <h6>Pre conditions</h6>
    <p>To display the buttons into hanna bot, you need to follow the following steps</p>
    <ul>
        <li>1. Setting up hanna bot</li>
        <li>2. Link <b class="underline">hanna in</b> node before the quick-replies node</li>
        <li>3. Link <b class="underline">hanna out</b> node after the quick-replies node</li>
    </ul>
    <p>In order to display the quick-replies in any other messaging service, you need to link the node “in” and “out” before and after the text node respectively (<b>eg:</b> facebook in > quick-replies > facebook out)</p>
    <h6>Post conditions</h6>
    <p>When the user clicks on Url type button, he will be redirected to the link in a new tab.</p>
    <p>When the user clicks on a postback button type, hanna in node will receive the message with the button value specified in this node. To be able to perform actions after clicking on a postback button, we recommend using switch node to check the text value coming from hanna in.</p>
    <h6>Channels</h6>
    <p><img src="https://img.shields.io/badge/Platform-Hanna-blue.svg?colorB=009f9d" alt="Hanna">
     
</script>

<style type="text/css">
.underline{
    text-decoration: underline;
}
</style>