node-red-contrib-chatbot/nodes/chatbot-message.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-message', {
    category: $.RedBot.config.name,
    color: '#FFCC66',
    defaults: {
      name: {
        value: ''
      },
      message: {
        value: ['']
      },
      language: {
        value: 'none'
      }
    },
    inputs: 1,
    outputs: 1,
    paletteLabel: 'Text',
    icon: 'chatbot-message.png',
    label: function() {
      return (this.name != null && this.name !== '' ? this.name : 'Text')
        + (this.language != null && this.language !== '' && this.language !== 'none' ? ' (' + this.language + ')': '');
    },
    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]);
      }

      $.RedBot.fetchPlatforms()
        .done(function(platforms) {
          $.RedBot.supportedBy($('.compatibility'), ['telegram', 'slack', 'facebook']);
        });
    }
  });
</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 form-row-language">
  <label for="node-input-language">Language</label>
  <select id="node-input-language" placeholder="Language to match">
    <option value="none">Any language</option>
    <option value="">Match with context language</option>
    <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 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;">
    Supports handlebars-like variables for chat context like {{firstName}}, {{lastName}}, etc. and emoticons (:smile:, etc.).
    In case of multiple version of the content, one will be randomly chosen.
  </div>
</div>
</script>
<script type="text/x-red" data-help-name="chatbot-message"><p>Used to send a plain text message to the chatbot’s user, a handlebars-like syntax can be used to insert values from the chat context, for example:</p>
<pre><code class="language-plain">Hi {{firstName}}, your check is {{total}} euros
</code></pre>
<p>Some chat context keys are automatically populated (like <code>{{firstName}}</code>, <code>{{lastName}}</code>, <code>{{language}}</code>, etc - if the platform provides them) , other keys are system specific and are read-only (like <code>{{userId}}</code>, <code>{{chatId}}</code> and <code>{{transport}}</code>), some other keys depends on the current flow, like <code>{{payload}}</code>, for example if the upstream node sends a payload like</p>
<pre><code class="language-javascript">{  
  total: 42,  
    shipping: {    
        address: &#39;Nowhere street,    
        city: &#39;Milan&#39;  
    }
}
</code></pre>
<p>can be used in the text message in this way</p>
<pre><code class="language-plain">Your order of {{payload.total}} will be shipped to {{payload.shipping.address}}, {{payload.shipping.city}}
</code></pre>
<p>For more information read the <a href="https://www.notion.so/3460c588cf234344974936acd05f8c16">Chat Context</a> .</p>
<p>It’s possible to specify more content versions for the same message, one will we randomly chosen with an even distribution.</p>
<p>If a <em>language</em> is specified in the drop down menu, then the message will be added only if the specified language matches the one in the chat context. Most of the platforms provide the user language, this value is stored in the chat context when the user starts a conversation. In order to support multiple languages in a chatbot, just chain different <code>Message node</code> with different languages, the ones that don’t match the user language will be skipped.</p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/d034c90d-edf2-4d69-ad7f-f7d9457cf424/example-language.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230218%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20230218T124903Z&X-Amz-Expires=3600&X-Amz-Signature=bbf1664c9d0d45a3397e282eb2654a9efc51fd8cb768fd3ad859924e9a72e6ba&X-Amz-SignedHeaders=host&x-id=GetObject" alt="Multi language support"></p>
<p>The text message can be passed through the payload by the upstream node:</p>
<pre><code class="language-javascript">msg.message = &#39;I am a message&#39;;
return msg;
</code></pre>
<p>or for multiple versions of the message</p>
<pre><code class="language-javascript">msg.message = [
  &#39;First version of the message&#39;,
  &#39;Second version of the message&#39;
];
return msg;
</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>message</td>
<td>string / array of [string]</td>
<td>String or array of strings to send. If array, a random one will be chosen</td>
</tr>
<tr>
<td>language</td>
<td>string</td>
<td>Language of the message</td>
</tr>
<tr>
<td>fallback</td>
<td>string</td>
<td>Fallback message to use in case of a message broadcast containing tokens like {{first_name}} or {{last_name}} and the bot doesn’t have privileges to access profile info. <em>Facebook</em></td>
</tr>
</tbody></table>
</script>