UNPKG

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
<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: &#39;test&#39;, my_textarea_field: &#39;sadasda&#39;, my_select_field: &#39;one&#39; } </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: &#39;My form&#39;, submitLabel: &#39;OK&#39;, elements: [ { type: &#39;text&#39;, name: &#39;my_text&#39;, label: &#39;My Text&#39; }, { type: &#39;select&#39;, name: &#39;my_combo&#39;, label: &#39;My Combo&#39;, options: [ { value: &#39;option_1&#39;, label: &#39;Option 1&#39; }, { value: &#39;option_2&#39;, label: &#39;Option 2&#39; } ] } ] } </code></pre> </script>