node-red-contrib-tekosbot/nodes/chatbot-message.html

Tekos bot based on matrix

<script type="text/javascript">


  RED.nodes.registerType('chatbot-message', {
    category: 'Dialogue',
    color: '#ffd7b0',
    defaults: {
      name: {
        value: ''
      },
      message: {
        value: ['']
      },
      // answer: {
      //   value: false
      // },
      // track: {
      //   value: false 
      // }
    },
    inputs: 1,
    outputs: 1,
    paletteLabel: 'Text',
    icon: 'chatbot-message.png',
    align: 'left',
    label: function() {
      return this.name || 'Text';
    },
    oneditsave: function() {
      var messages = $("#node-input-message-container").editableList('items');
      var node = this;
      node.message = [];

      var idx;
      for(idx = 0; idx < messages.length; idx++) {
        node.message.push({
          message: messages[idx].find('textarea').val()
        });
      }
    },

    oneditprepare: function() {
      $('#node-input-message-container')
        .css('min-height','300px')
        .css('min-width','450px')
        .editableList({
          addButton: 'Add message version',
          addItem: function (container, i, item) {
            var row = $('<div/>').appendTo(container);
            var content = '';
            if (typeof item == 'string') {
              content = item;
            } else if ( item.message != null) {
              content = item.message;
            }
            $('<textarea placeholder="Message">' + content + '</textarea>')
              .css({
                width: '93%',
                height: '100px'
              })
              .appendTo(row);
          },
          removable: true,
          sortable: true
        });

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

<script type="text/x-red" data-template-name="chatbot-message">
<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 node-input-rule-container-row">
  <ol id="node-input-message-container"></ol>
  <div style="max-width: 460px;font-size: 12px;color: #999999;line-height: 14px;clear:both;margin-top:5px;">
    <p>Supports handlebars-like variables for chat context like {{firstName}}, {{lastName}}, etc. and emoticons (:smile:, etc.).</p>
    <p>In case of multiple version of the content, one will be randomly chosen.</p>
  </div>
</div>
<!-- <div class="form-row">
  <label for="node-input-answer"><i class="icon-share-alt"></i> Answer</label>
  <input type="checkbox" value="true" id="node-input-answer">
  <span style="max-width: 460px;font-size: 12px;color: #999999;line-height: 14px;">Quote the previous message <i>[Telegram]</i></span>
</div> -->
</script>
<script type="text/x-red" data-help-name="chatbot-message">
  <h3>Node Text</h3> 
    <h5>Definitions</h5> 
    <p>You can display Text message in any messaging services (eg: hanna, facebook, slack…)</p>
    <h4>Pre conditions</h4>
    <p>To display the text into hanna bot, you need to follow the following steps</p>
    <ul>
        <li>1. Setting up tekos bot</li>
        <li>2. Link <b class="underline">tekos in</b> node before the text node</li>
        <li>3. Link <b class="underline">tekos out</b> node after the text node</li>
    </ul>
    <p>In order to display the text 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 > text > facebook out)</p>
    <p>Texts can be displayed in handlebar syntax, to do so, you can access the variable under <b>msg.payload</b> with the following format:</p>
    <pre><code>Hi {{firstName}}, your check is {{total}} euros.</code></pre>
    <h4>Channels</h4>
    <p><img src="https://img.shields.io/badge/Platform-Hanna-blue.svg?colorB=009f9d" alt="Tekos">
    <p><img src="https://img.shields.io/badge/platform-Slack-green.svg" alt="Slack">
    <p><img src="https://img.shields.io/badge/platform-Facebook-blue.svg" alt="Facebook">

     
</script>

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