node-red-contrib-chatbot/nodes/chatbot-listen.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-listen',{
    category: 'RedBot Parsers',
    color: '#FFCC66',
    defaults: {
      name: {
        value: ''
      },
      showdebug: {
        value: false
      },
      rules: {
        value: [],
        validate: function(sentences) {
          var valid = true;
          return valid;
        }
      },
      outputs: {
        value: 1
      }
    },
    inputs: 1,
    outputs: 1,
    icon: 'chatbot-listen.png',
    paletteLabel: 'Listen',
    label: function() {
      return this.name || 'chatbot-listen';
    },
    oneditsave: function() {
      var domRules = $('#node-input-sentences-container').editableList('items');
      var node = this;
      var idx;
      // init
      node.rules = [];
      // move rules
      for(idx = 0; idx < domRules.length; idx++) {
        var selector = domRules[idx].find('input');
        node.rules.push(selector.val());
      }
      this.outputs = node.rules.length;
    },
    outputLabels: function(index) {
      return this.rules[index];
    },
    oneditprepare: function() {
      function resizeRule(rule) {
      }

      $('#node-input-sentences-container')
        .css('min-height','300px').css('min-width', '450px')
        .editableList({
          addButton: 'Add rule',
          addItem: function(container, i, sentence) {
            var value = typeof sentence == 'object' ? '' : sentence;
            var row = $('<div/>').appendTo(container);
            var selector = $('<input/>', {
                style: 'width:100%',
                class: 'node-input-rule-property-name',
                type: 'text',
                value: value
              })
              .appendTo(row);

            row.find('input').tagsInput({
              defaultText: 'add a token',
              width: '97%',
              height: '51px',
              placeholderColor: '#999999',
              onChange: function() {
                // seems ridicolous to me that there isn't a method to get the current value
                var words = $('.tag', row).map(function() {
                  return $.trim($('span', this).text());
                });
                selector.attr('value', words.get().join(','));
              }
            });
          },
          resizeItem: resizeRule,
          removable: true,
          sortable: true
        });


      var rules = this.rules || [];
      // populate the control
      var idx;
      for (idx = 0; idx < rules.length; idx++) {
        var rule = rules[idx];
        $("#node-input-sentences-container").editableList('addItem', rule);
      }

    }
  });
</script>

<style>
  div.tagsinput {
    border:1px solid #CCC;
    background: #FFF;
    padding:5px;
    width:300px;
    height:100px;
    overflow-y: auto;
  }
  div.tagsinput span.tag {
    border: 1px solid #a5d24a;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    display: block;
    float: left;
    padding: 0px 5px;
    text-decoration:none;
    background: #cde69c;
    color: #638421;
    margin-right: 5px;
    margin-bottom:5px;
    font-family: helvetica;
    font-size:13px;
  }
  div.tagsinput span.tag a {
    font-weight: bold;
    color: #82ad2b; text-decoration: none;
    font-size: 11px;
  }
  div.tagsinput input {
    width:80px;
    margin:0px;
    font-family: helvetica;
    font-size: 13px;
    border:1px solid transparent;
    padding: 0px 5px;
    background: transparent;
    color: #000;
    outline:0px;
    margin-right:5px;
    margin-bottom:5px;
  }
  div.tagsinput div {
    display:block;
    float: left;
  }
  .tags_clear {
    clear: both;
    width: 100%;
    height: 0px;
  }
  .not_valid {
    background: #FBD8DB !important;
    color: #90111A !important;
  }
</style>

<script type="text/javascript">
  /*

   jQuery Tags Input Plugin 1.3.3

   Copyright (c) 2011 XOXCO, Inc

   Documentation for this plugin lives here:
   http://xoxco.com/clickable/jquery-tags-input

   Licensed under the MIT license:
   http://www.opensource.org/licenses/mit-license.php

   ben@xoxco.com

   */

  (function($) {

    var delimiter = new Array();
    var tags_callbacks = new Array();
    $.fn.doAutosize = function(o){
      var minWidth = $(this).data('minwidth'),
          maxWidth = $(this).data('maxwidth'),
          val = '',
          input = $(this),
          testSubject = $('#'+$(this).data('tester_id'));

      if (val === (val = input.val())) {return;}

      // Enter new content into testSubject
      var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');
      testSubject.html(escaped);
      // Calculate new width + whether to change
      var testerWidth = testSubject.width(),
          newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
          currentWidth = input.width(),
          isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
            || (newWidth > minWidth && newWidth < maxWidth);

      // Animate width
      if (isValidWidthChange) {
        input.width(newWidth);
      }


    };
    $.fn.resetAutosize = function(options){
      // alert(JSON.stringify(options));
      var minWidth =  $(this).data('minwidth') || options.minInputWidth || $(this).width(),
          maxWidth = $(this).data('maxwidth') || options.maxInputWidth || ($(this).closest('.tagsinput').width() - options.inputPadding),
          val = '',
          input = $(this),
          testSubject = $('<tester/>').css({
            position: 'absolute',
            top: -9999,
            left: -9999,
            width: 'auto',
            fontSize: input.css('fontSize'),
            fontFamily: input.css('fontFamily'),
            fontWeight: input.css('fontWeight'),
            letterSpacing: input.css('letterSpacing'),
            whiteSpace: 'nowrap'
          }),
          testerId = $(this).attr('id')+'_autosize_tester';
      if(! $('#'+testerId).length > 0){
        testSubject.attr('id', testerId);
        testSubject.appendTo('body');
      }

      input.data('minwidth', minWidth);
      input.data('maxwidth', maxWidth);
      input.data('tester_id', testerId);
      input.css('width', minWidth);
    };

    $.fn.addTag = function(value,options) {
      options = jQuery.extend({focus:false,callback:true},options);
      this.each(function() {
        var id = $(this).attr('id');

        var tagslist = $(this).val().split(delimiter[id]);
        if (tagslist[0] == '') {
          tagslist = new Array();
        }

        value = jQuery.trim(value);

        if (options.unique) {
          var skipTag = $(this).tagExist(value);
          if(skipTag == true) {
            //Marks fake input as not_valid to let styling it
            $('#'+id+'_tag').addClass('not_valid');
          }
        } else {
          var skipTag = false;
        }

        if (value !='' && skipTag != true) {
          $('<span>').addClass('tag').append(
            $('<span>').text(value).append('&nbsp;&nbsp;'),
            $('<a>', {
              href  : '#',
              title : 'Removing tag',
              text  : 'x'
            }).click(function () {
              return $('#' + id).removeTag(escape(value));
            })
          ).insertBefore('#' + id + '_addTag');

          tagslist.push(value);

          $('#'+id+'_tag').val('');
          if (options.focus) {
            $('#'+id+'_tag').focus();
          } else {
            $('#'+id+'_tag').blur();
          }

          $.fn.tagsInput.updateTagsField(this,tagslist);

          if (options.callback && tags_callbacks[id] && tags_callbacks[id]['onAddTag']) {
            var f = tags_callbacks[id]['onAddTag'];
            f.call(this, value);
          }
          if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
          {
            var i = tagslist.length;
            var f = tags_callbacks[id]['onChange'];
            f.call(this, $(this), tagslist[i-1]);
          }
        }

      });

      return false;
    };

    $.fn.removeTag = function(value) {
      value = unescape(value);
      this.each(function() {
        var id = $(this).attr('id');

        var old = $(this).val().split(delimiter[id]);

        $('#'+id+'_tagsinput .tag').remove();
        str = '';
        for (i=0; i< old.length; i++) {
          if (old[i]!=value) {
            str = str + delimiter[id] +old[i];
          }
        }

        $.fn.tagsInput.importTags(this,str);

        if (tags_callbacks[id] && tags_callbacks[id]['onRemoveTag']) {
          var f = tags_callbacks[id]['onRemoveTag'];
          f.call(this, value);
        }
      });

      return false;
    };

    $.fn.tagExist = function(val) {
      var id = $(this).attr('id');
      var tagslist = $(this).val().split(delimiter[id]);
      return (jQuery.inArray(val, tagslist) >= 0); //true when tag exists, false when not
    };

    // clear all existing tags and import new ones from a string
    $.fn.importTags = function(str) {
      var id = $(this).attr('id');
      $('#'+id+'_tagsinput .tag').remove();
      $.fn.tagsInput.importTags(this,str);
    };

    $.fn.tagsInput = function(options) {
      var settings = jQuery.extend({
        interactive:true,
        defaultText:'add a tag',
        minChars:0,
        width:'300px',
        height:'100px',
        autocomplete: {selectFirst: false },
        hide:true,
        delimiter: ',',
        unique:true,
        removeWithBackspace:true,
        placeholderColor:'#666666',
        autosize: true,
        comfortZone: 20,
        inputPadding: 6*2
      },options);

      var uniqueIdCounter = 0;

      this.each(function() {
        // If we have already initialized the field, do not do it again
        if (typeof $(this).attr('data-tagsinput-init') !== 'undefined') {
          return;
        }

        // Mark the field as having been initialized
        $(this).attr('data-tagsinput-init', true);

        if (settings.hide) {
          $(this).hide();
        }
        var id = $(this).attr('id');
        if (!id || delimiter[$(this).attr('id')]) {
          id = $(this).attr('id', 'tags' + new Date().getTime() + (uniqueIdCounter++)).attr('id');
        }

        var data = jQuery.extend({
          pid:id,
          real_input: '#'+id,
          holder: '#'+id+'_tagsinput',
          input_wrapper: '#'+id+'_addTag',
          fake_input: '#'+id+'_tag'
        },settings);

        delimiter[id] = data.delimiter;

        if (settings.onAddTag || settings.onRemoveTag || settings.onChange) {
          tags_callbacks[id] = new Array();
          tags_callbacks[id]['onAddTag'] = settings.onAddTag;
          tags_callbacks[id]['onRemoveTag'] = settings.onRemoveTag;
          tags_callbacks[id]['onChange'] = settings.onChange;
        }

        var markup = '<div id="'+id+'_tagsinput" class="tagsinput"><div id="'+id+'_addTag">';

        if (settings.interactive) {
          markup = markup + '<input id="'+id+'_tag" value="" data-default="'+settings.defaultText+'" />';
        }

        markup = markup + '</div><div class="tags_clear"></div></div>';

        $(markup).insertAfter(this);

        $(data.holder).css('width',settings.width);
        $(data.holder).css('min-height',settings.height);
        $(data.holder).css('height',settings.height);

        if ($(data.real_input).val()!='') {
          $.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val());
        }
        if (settings.interactive) {
          $(data.fake_input).val($(data.fake_input).attr('data-default'));
          $(data.fake_input).css('color',settings.placeholderColor);
          $(data.fake_input).resetAutosize(settings);

          $(data.holder).bind('click',data,function(event) {
            $(event.data.fake_input).focus();
          });

          $(data.fake_input).bind('focus',data,function(event) {
            if ($(event.data.fake_input).val()==$(event.data.fake_input).attr('data-default')) {
              $(event.data.fake_input).val('');
            }
            $(event.data.fake_input).css('color','#000000');
          });

          if (settings.autocomplete_url != undefined) {
            autocomplete_options = {source: settings.autocomplete_url};
            for (attrname in settings.autocomplete) {
              autocomplete_options[attrname] = settings.autocomplete[attrname];
            }

            if (jQuery.Autocompleter !== undefined) {
              $(data.fake_input).autocomplete(settings.autocomplete_url, settings.autocomplete);
              $(data.fake_input).bind('result',data,function(event,data,formatted) {
                if (data) {
                  $('#'+id).addTag(data[0] + "",{focus:true,unique:(settings.unique)});
                }
              });
            } else if (jQuery.ui.autocomplete !== undefined) {
              $(data.fake_input).autocomplete(autocomplete_options);
              $(data.fake_input).bind('autocompleteselect',data,function(event,ui) {
                $(event.data.real_input).addTag(ui.item.value,{focus:true,unique:(settings.unique)});
                return false;
              });
            }


          } else {
            // if a user tabs out of the field, create a new tag
            // this is only available if autocomplete is not used.
            $(data.fake_input).bind('blur',data,function(event) {
              var d = $(this).attr('data-default');
              if ($(event.data.fake_input).val()!='' && $(event.data.fake_input).val()!=d) {
                if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) )
                  $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
              } else {
                $(event.data.fake_input).val($(event.data.fake_input).attr('data-default'));
                $(event.data.fake_input).css('color',settings.placeholderColor);
              }
              return false;
            });

          }
          // if user types a default delimiter like comma,semicolon and then create a new tag
          $(data.fake_input).bind('keypress',data,function(event) {
            if (_checkDelimiter(event)) {
              event.preventDefault();
              if( (event.data.minChars <= $(event.data.fake_input).val().length) && (!event.data.maxChars || (event.data.maxChars >= $(event.data.fake_input).val().length)) )
                $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
              $(event.data.fake_input).resetAutosize(settings);
              return false;
            } else if (event.data.autosize) {
              $(event.data.fake_input).doAutosize(settings);

            }
          });
          //Delete last tag on backspace
          data.removeWithBackspace && $(data.fake_input).bind('keydown', function(event)
          {
            if(event.keyCode == 8 && $(this).val() == '')
            {
              event.preventDefault();
              var last_tag = $(this).closest('.tagsinput').find('.tag:last').text();
              var id = $(this).attr('id').replace(/_tag$/, '');
              last_tag = last_tag.replace(/[\s]+x$/, '');
              $('#' + id).removeTag(escape(last_tag));
              $(this).trigger('focus');
            }
          });
          $(data.fake_input).blur();

          //Removes the not_valid class when user changes the value of the fake input
          if(data.unique) {
            $(data.fake_input).keydown(function(event){
              if(event.keyCode == 8 || String.fromCharCode(event.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,/]+/)) {
                $(this).removeClass('not_valid');
              }
            });
          }
        } // if settings.interactive
      });

      return this;

    };

    $.fn.tagsInput.updateTagsField = function(obj,tagslist) {
      var id = $(obj).attr('id');
      $(obj).val(tagslist.join(delimiter[id]));
    };

    $.fn.tagsInput.importTags = function(obj,val) {
      $(obj).val('');
      var id = $(obj).attr('id');
      var tags = val.split(delimiter[id]);
      for (i=0; i<tags.length; i++) {
        $(obj).addTag(tags[i],{focus:false,callback:false});
      }
      if(tags_callbacks[id] && tags_callbacks[id]['onChange'])
      {
        var f = tags_callbacks[id]['onChange'];
        f.call(obj, obj, tags[i]);
      }
    };

    /**
     * check delimiter Array
     * @param event
     * @returns {boolean}
     * @private
     */
    var _checkDelimiter = function(event){
      var found = false;
      if (event.which == 13) {
        return true;
      }

      if (typeof event.data.delimiter === 'string') {
        if (event.which == event.data.delimiter.charCodeAt(0)) {
          found = true;
        }
      } else {
        $.each(event.data.delimiter, function(index, delimiter) {
          if (event.which == delimiter.charCodeAt(0)) {
            found = true;
          }
        });
      }

      return found;
    }
  })(jQuery);
</script>


<script type="text/x-red" data-template-name="chatbot-listen">
  <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" style="margin-bottom:0;">
    <label style="width:100%;"><span>Rules</span></label>
  </div>
  <div class="form-row node-input-sentences-container-row">
    <ol id="node-input-sentences-container"></ol>
    <div style="max-width: 460px;font-size: 12px;color: #999999;line-height: 14px;display:block;">
    Available types are: <em>word (catches everything), noun, verb, adjective, conjunction, adverb, symbol, date, determiner, person,
  number, email, url, currency</em>.<br>
    Use square brackets to match a keyword of a particular type, for example: <code>check[verb]</code> only matches the
    a keyword "check" which is a verb in the sentence.<br>
    Use types to extract some kind of data from the sentence, for example: <code>[email]->useremail</code> will match a
    valid email in the sentence and store it in the chat context variable "useremail".
    </div>
  </div>
  <div class="form-row">
    <label for="node-input-answer">Debug</label>
    <input type="checkbox" value="true" id="node-input-showdebug">
    <span style="max-width: 460px;font-size: 12px;color: #999999;line-height: 14px;display:block;">
    Dump the analysis of the sentences in the console (terms, nouns, verbs, etc).</span>
  </div>
</script>

<script type="text/x-red" data-help-name="chatbot-listen"><p>Simple keyword based language interpreter. If the inbound message matches the keywords then it&#39;s redirected to the related output </p>
<p>All the keywords for a row must match the input message in order to have the message go through the related output. Smaller keywords requires an exact match, longer ones match with <em>Levehnstein</em> algorithm (so for example the keyword <em>&quot;building&quot;</em> also matches <em>&quot;boilding&quot;</em>).</p>
<p>If a rule is matched, the following rules are skipped and not evaluated. A rule with just a <code>*</code> matches everything and it&#39;s generally used as a catch-all at the end if every other rules are not matched. The node will not try to parse command-like sentences (for example <code>/my_command</code>)</p>
<p>Given these two set of tokens
:ke</p>
<pre><code>1 - |send| |curriculum| |vitae|
2 - |send| |cv|
</code></pre><p>then the inbound messages:</p>
<pre><code>&quot;can you send your curriculum vitae&quot;
// MATCH
&quot;can you send your curriculum vita&quot;
// MATCH, takes into account small typos
&quot;please send your cv&quot;
// MATCH
&quot;please send your curriculum&quot;
// DOESN&#39;T MATCH
</code></pre><p>Listen node is also capable of a basic simple language processing of the sentence (only available for English) and for a more specific match is possible to specify also the type for a keyword</p>
<pre><code>1 - |send[verb]| |curriculum[noun]| |vitae|
2 - |send[verb]| |cv|
</code></pre><p>Available types are: <em>word</em> (catches everything), <em>noun</em>, <em>verb</em>, <em>adjective</em>, <em>conjunction</em>, <em>adverb</em>, <em>symbol</em>, <em>date</em>, <em>determiner</em>, <em>person</em>, <em>number</em>, <em>email</em>, <em>url</em>, <em>currency</em>.</p>
<p>Keyword types are particularly useful to search for patterns in the user&#39;s input and store them in the chat context, for example to match a sentence like <em>&quot;send you curriculum vitae to Peter at <a href="mailto:peter.something@gmail.com">peter.something@gmail.com</a>&quot;</em></p>
<pre><code>1 - |send[verb]| |curriculum| |to| |[person]-&gt;name| |at| |[email]-&gt;toemail|
</code></pre><p>then the inbound messages:</p>
<pre><code>&quot;can you send your curriculum vitae to John at my-email@email.com&quot;
// MATCH
&quot;can you send your curriculum vitae to John at my-emailATemail.com&quot;
// DOESN&#39;T MATCH, not a valid email
&quot;can you send your curriculum vitae to someone at my-email@email.com&quot;
// DOESN&#39;T MATCH, someone is not a valid name
</code></pre><p>and in any <code>Function node</code> connected to the related output</p>
<pre><code>var chat = msg.chat();
chat.get(&#39;name&#39;); // -&gt; John
chat.get(&#39;toemail&#39;); // -&gt; peter.something@gmail.com
</code></pre><p>or in a message node connected to the related output</p>
<pre><code>Hi {{name}}, I&#39;ll send the curriculum vitae to {{toemail}}
</code></pre><p>The generic syntax of a token is <code>text-to-match[type]-&gt;variable</code>:</p>
<ul>
<li><em>text-to-match</em>: the text to match</li>
<li><em>type</em>: the type of token (verb, number, url, etc.)</li>
<li><em>variable</em>: the variable name to store the value into</li>
</ul>
<p>Available types:</p>
<ul>
<li><em>word</em>: matches everything</li>
<li><em>adjective</em>, <em>conjunction</em>, <em>adverb</em>, <em>preposition</em>, <em>determiner</em>: match the keyword using Levenshtein distance
(the keyword <em>&quot;home&quot;</em> will match <em>&quot;hime&quot;</em> but will not match <em>&quot;hole&quot;</em>)</li>
<li><em>symbol</em>: Match a symbol like: &eur;, %, &#36;, £ and #</li>
<li><em>number</em>: match a number: float, integer or written in plain english (e.g. <em>&quot;forty two&quot;</em>)</li>
<li><em>currency</em>: match a currency (e.g. &quot;dollars&quot;, &quot;&#36;&quot;, &quot;euros&quot;, &quot;&eur;&quot;)</li>
<li><em>email</em>: match a valid email</li>
<li><em>url</em>: match a valid URL address</li>
<li><em>verb</em>: match a verb, if the keyword is specified it could match the exact word of the infinitive form
(for example the keyword <em>&quot;tell[verb]&quot;</em> will match the sentence <em>&quot;I can <strong>tell</strong>&quot;</em> but also
<em>&quot;I <strong>told</strong> you the truth&quot;</em>)</li>
<li><em>person</em>: Matches a person name (e.g. <strong>&quot;Jack Frost&quot;</strong>)</li>
<li><em>date</em>: Matches a date (e.g. <em>&quot;10th January&quot;</em> or <em>&quot;10/1/1972&quot;</em>) and convert it to a date object. If the year or month are not specified, the current year or month will be used</li>
</ul>
<p>Enable <em>debug</em> to see in terminal console how the sentence is analyzed and tokenized.</p>
</script>