node-red-contrib-chatbot/nodes/chatbot-nlp-intent.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-nlpjs-intent',{
    category: $.RedBot.config.name + ' Parsers',
    color: '#FFCC66',
    defaults: {
      intent: {
        value: '',
        validate: function(intent) {
          return $.RedBot.validate.notEmpty(intent);
        }
      },
      language: {
        value: 'en',
        required: true
      },
      utterances: {
        value: [],
        validate: function(utterances) {
          return $.RedBot.validate.utterances(utterances);
        }
      },
      outputs: {
        value: 1
      }
    },
    inputs: 1,
    outputs: 1,
    icon: 'chatbot-listen-lexicon.png',
    paletteLabel: 'NLP.js Intent',
    label: function() {
      return 'NLP.js Intent' + (this.intent != null && this.intent !== '' ? ' (' + this.intent + ')' : '');
    },
    oneditsave: function() {
      var domRules = $('#node-input-values-container').editableList('items');
      var node = this;
      var idx;
      // init
      node.utterances = [];
      // store terms, all lowercase
      for(idx = 0; idx < domRules.length; idx++) {
        var selector = domRules[idx].find('input');
        node.utterances.push(selector.val().toLowerCase());
      }
    },
    oneditprepare: function() {
      $('#node-input-name')
        .blur(function() {
          var intent = $(this).val();
          intent = intent.replace(/ /g, '');
          $(this).val(intent);
        });
      $('#node-input-values-container')
        .css('min-width', '450px')
        .editableList({
          addButton: 'Add utterance',
          addItem: function(container, i, entity) {
            var value = typeof entity == 'object' ? '' : entity;
            var row = $('<div/>').appendTo(container);
            $('<input/>', {
                style: 'width:100%',
                class: 'node-input-rule-property-name',
                type: 'text',
                value: value
              }).appendTo(row);
          },
          removable: true,
          sortable: true
        });
      var utterances = this.utterances || [];
      // populate the control
      var idx;
      for (idx = 0; idx < utterances.length; idx++) {
        $("#node-input-values-container").editableList('addItem', utterances[idx]);
      }
    },
    oneditresize: function() {
      var dialogForm = $('#dialog-form');
      var rowName = $('.form-row-name', dialogForm);
      var rowLabel = $('.form-row-label', dialogForm);
      var rowLanguage = $('.form-row-language', dialogForm);
      var height = dialogForm.height() - rowName.height() - rowLabel.height() - rowLanguage.height() - 20;
      $('#node-input-values-container').editableList('height', height);
    }
  });
</script>


<script type="text/x-red" data-template-name="chatbot-nlpjs-intent">
<div class="form-row form-row-name">
  <label for="node-input-intent"><i class="icon-tag"></i> Intent</label>
  <input type="text" id="node-input-intent" placeholder="Intent">
</div>
<div class="form-row form-row-language">
  <label for="node-input-language">Language</label>
  <select id="node-input-language" placeholder="Language to match">
    <option value="ar">Arabic</option>
    <option value="bn">Bengali</option>
    <option value="ca">Catalan</option>
    <option value="cs">Czech</option>
    <option value="da">Danish</option>
    <option value="de">German</option>
    <option value="el">Greek</option>
    <option value="en">English</option>
    <option value="es">Spanish</option>
    <option value="eu">Basque</option>
    <option value="fa">Persian</option>
    <option value="fi">Finnish</option>
    <option value="fr">French</option>
    <option value="ga">Irish</option>
    <option value="gl">Galician</option>
    <option value="hi">Hindi</option>
    <option value="hu">Hungarian</option>
    <option value="hy">Armenian</option>
    <option value="it">Italian</option>
    <option value="ja">Japanese</option>
    <option value="nl">Dutch</option>
    <option value="no">Norwegian</option>
    <option value="pt">Portuguese</option>
    <option value="ro">Romanian</option>
    <option value="ru">Russian</option>
    <option value="sl">Slovenian</option>
    <option value="sv">Swedish</option>
    <option value="ta">Tamil</option>
    <option value="th">Thai</option>
    <option value="tl">Tagalog</option>
    <option value="tr">Turkish</option>
    <option value="uk">Ukrainian</option>
    <option value="zh">Chinese</option>
  </select>
</div>
<div class="form-row form-row-label" style="margin-bottom:0;">
  <label style="width:100%;"><i class="fa fa-list"></i> <span>Utterances</span></label>
</div>
<div class="form-row node-input-values-container-row">
  <ol id="node-input-values-container"></ol>
</div>
</script>

<script type="text/x-red" data-help-name="chatbot-nlpjs-intent"><p>An <em>intent</em> is a string representation of the abstract meaning of the user sentence, it requires an arbitrary name (that will be likely used in a <a href="https://www.notion.so/4113636f565d4ff4af08bc61a644206b">Rules node</a>  to control the chatbot flow) and one or more utterances (a set of all different way of expressing the same actions).</p>
<p>The <code>NLP.js Intent node</code> looks like</p>
<p><img src="https://raw.githubusercontent.com/guidone/node-red-contrib-chatbot/master/docs/images/nlp-intent.png" alt=""></p>
<p>The intent can also be defined in a upstream node:</p>
<pre><code class="language-javascript">{  
    payload: {    
        intent: &#39;switch.of&#39;,    
        language: &#39;en&#39;,    
        utterances: [      
            &#39;switch of lights&#39;,      
            &#39;switch off lights in %room%&#39;,      
            &#39;turn off lights in %room%&#39;    
        ]  
    }
}
</code></pre>
<p>Available parameters for the <code>msg.payload</code></p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td>utterances</td>
<td>array of string</td>
<td>The list of entities</td>
</tr>
<tr>
<td>intent</td>
<td>string</td>
<td>The intent name</td>
</tr>
<tr>
<td>language</td>
<td>string</td>
<td>The ISO code for language (<em>en</em>, <em>it</em>, …)</td>
</tr>
</tbody></table>
</script>