node-red-contrib-chatbot
Version:
REDBot a Chat bot for a full featured chat bot for Telegram, Facebook Messenger and Slack. Almost no coding skills required
254 lines (247 loc) • 8.03 kB
HTML
<script type="text/javascript">
$.RedBot.registerType('chatbot-dialog', {
category: $.RedBot.config.name,
color: '#FFCC66',
defaults: {
submitLabel: {
value: ''
},
title: {
value: '',
validate: function(title) {
return $.RedBot.validate.notEmpty(title);
}
},
elements: {
value: [{}],
validate: function(elements) {
var valid = true;
var idx;
for(idx = 0; idx < elements.length; idx++) {
if (!$.RedBot.validate.element(elements[idx])) {
valid = false;
}
}
return valid;
}
}
},
inputs: 1,
outputs: 1,
paletteLabel: 'Dialog',
icon: 'chatbot-dialog.png',
label: function() {
return this.title || 'Dialog';
},
oneditsave: function() {
var elements = $("#node-input-elements-container").editableList('items');
var node = this;
node.elements = [];
var idx;
for(idx = 0; idx < elements.length; idx++) {
node.elements.push($(elements[idx]).RB_getElementData());
}
},
oneditprepare: function() {
$('#node-input-elements-container')
.css('min-width','450px')
.editableList({
addItem: function(container, i, item) {
$(container).RB_mountElementDialog({
badges: false
});
$(container).RB_setElementData(item, {
badges: false
});
},
removable: true,
sortable: true
});
if (this.elements != null) {
this.elements.forEach(function(element) {
$('#node-input-elements-container').editableList('addItem', element);
});
}
},
oneditresize: function() {
var dialogForm = $('#dialog-form');
var rowName = $('.form-row-name', dialogForm);
var rowTitle = $('.form-row-title', dialogForm);
var rowSubtitle = $('.form-row-subtitle', dialogForm);
var rowImageUrl = $('.form-row-imageUrl', dialogForm);
var rowLabel = $('.form-row-label', dialogForm);
var rowCarousel = $('.form-row-carousel', dialogForm);
var height = dialogForm.height() - rowName.height() - rowTitle.height() - rowSubtitle.height()
- rowImageUrl.height() - rowLabel.height() - rowCarousel.height() - 40;
$('#node-input-buttons-container').editableList('height', height);
}
});
</script>
<script type="text/x-red" data-template-name="chatbot-dialog">
<div class="form-row form-row-title">
<label for="node-input-title">Title</label>
<input type="text" id="node-input-title" placeholder="Title">
</div>
<div class="form-row form-row-submitLabel">
<label for="node-input-subtitle">Submit label</label>
<input type="text" id="node-input-submitLabel" placeholder="Submit label">
</div>
<div class="form-row node-input-rule-container-row">
<ol id="node-input-elements-container"></ol>
</div>
</script>
<script type="text/x-red" data-help-name="chatbot-dialog"><p>In <strong>Slack</strong> it’s possible to trigger modal dialogs on the chat client. Dialogs supports three field types: <code>text</code>, <code>textarea</code> and <code>select</code> and can only be initiated by click on a button.</p>
<p>A dialog flow must implement 3 steps</p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/cbecdc27-adf6-42f3-a16f-2d5ec7ace573/example-dialog.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=20230218T124921Z&X-Amz-Expires=3600&X-Amz-Signature=0d72f6ecc8d93aca7f02e77be2dd04b80ab9f18d9460eac9387b6006d45bb101&X-Amz-SignedHeaders=host&x-id=GetObject" alt="Example dialog node"></p>
<ol>
<li><p>Add a <code>Open Dialog</code> button in a <code>Inline button node</code> or <code>Generic Template node</code>. Specify <em>Modal id</em> if there are several dialog forms</p>
</li>
<li><p>When a user clicks on a <code>Open Dialog</code> button, a message type <code>dialog</code> is triggered from the <code>Slack Receiver node</code>, the content of the payload is the <em>Modal id</em> specified in the button. At this point the chat flow should answer with a <code>Dialog node</code> which defines the modal fields. Use the <code>Switch node</code> to redirect incoming messages based on type.</p>
</li>
<li><p>When the user answers to a modal dialog, a message type <code>response</code> is triggered from the <code>Slack Receiver node</code>, and contains the response hash (key is the name of the field, value is the answer). In order to extract the hash from the <code>response</code> message use a <code>Parse node</code> using the <em>Dialog response</em> type. Use the <code>Switch node</code> to redirect the <code>response</code> message to the proper <code>Parse node</code>.</p>
</li>
</ol>
<p>After the parse node the <code>message.payload</code> will contain</p>
<pre><code class="language-javascript">{
my_text_field: 'test',
my_textarea_field: 'sadasda',
my_select_field: 'one'
}
</code></pre>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td>title</td>
<td>string</td>
<td>The title of the modal dialog. Required</td>
</tr>
<tr>
<td>submitLabel</td>
<td>string</td>
<td>The label of the submit button</td>
</tr>
<tr>
<td>messageId</td>
<td>string</td>
<td>The message id to modify, leave blank for a new message</td>
</tr>
<tr>
<td>elements</td>
<td>array of elements</td>
<td>The elements of the modal form. Required</td>
</tr>
</tbody></table>
<p>The <code>element</code> structure</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td>type</td>
<td>string</td>
<td>Type of element: <em>text</em>, <em>textarea</em>, <em>select</em>. Required</td>
</tr>
<tr>
<td>label</td>
<td>string</td>
<td>The label form element. Required</td>
</tr>
<tr>
<td>name</td>
<td>string</td>
<td>The name of the element, also used in hash result. Required</td>
</tr>
<tr>
<td>value</td>
<td>string</td>
<td>The initial value of the element</td>
</tr>
<tr>
<td>placeholder</td>
<td>string</td>
<td>Placeholder text of the form element</td>
</tr>
<tr>
<td>hint</td>
<td>string</td>
<td>Little help below the form element</td>
</tr>
<tr>
<td>optional</td>
<td>boolean</td>
<td>If the form element is optional, if not specified is mandatory</td>
</tr>
<tr>
<td>subtype</td>
<td>string</td>
<td>Sub-type for <em>text</em> and <em>textarea</em> elements: <em>email</em>, <em>number</em>, <em>tel</em>, <em>url</em></td>
</tr>
<tr>
<td>minLength</td>
<td>number</td>
<td>Minimum length for <em>text</em> and <em>textarea</em> elements</td>
</tr>
<tr>
<td>maxLength</td>
<td>number</td>
<td>Maximum length for <em>text</em> and <em>textarea</em> elements</td>
</tr>
<tr>
<td>options</td>
<td>array of option</td>
<td>Options of the combo box for <em>select</em> elements</td>
</tr>
</tbody></table>
<p>The <code>option</code> structure</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td>value</td>
<td>string</td>
<td>The value of the option. Required</td>
</tr>
<tr>
<td>label</td>
<td>string</td>
<td>The label of the option. Required</td>
</tr>
</tbody></table>
<p>For example, in order to programmatically prepare the the modal form in a upstream <code>Function node</code>:</p>
<pre><code class="language-javascript">msg.payload = {
title: 'My form',
submitLabel: 'OK',
elements: [
{
type: 'text',
name: 'my_text',
label: 'My Text'
},
{
type: 'select',
name: 'my_combo',
label: 'My Combo',
options: [
{ value: 'option_1', label: 'Option 1' },
{ value: 'option_2', label: 'Option 2' }
]
}
]
}
</code></pre>
</script>