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

214 lines (209 loc) 7.04 kB
<script type="text/javascript"> $.RedBot.registerType('chatbot-quick-replies', { category: $.RedBot.config.name, color: '#FFCC66', defaults: { name: { value: '' }, message: { value: '' }, buttons: { value: [], validate: function(buttons) { var valid = true; var idx; for(idx = 0; idx < buttons.length; idx++) { if (!$.RedBot.validate.button(buttons[idx])) { valid = false; } } return valid; } }, trackMessage: { value: false }, outputs: { value: 1 } }, inputs: 1, outputs: 1, outputLabels: function(index) { if (index === 0) { return 'to sender node'; } else { const button = this.buttons[index - 1]; if (button.type === 'quick-reply') { if (button.label != null && button.label !== '') { return button.label + (button.value != null && button.value !== '' ? ' (' + button.value + ')' : ''); } else if (button.value != null && button.value !== '') { return button.value; } } return 'not used'; } }, paletteLabel: 'Quick Replies', icon: 'chatbot-quick-replies.png', label: function() { return this.name || 'Quick Replies'; }, oneditsave: function() { var buttons = $("#node-input-buttons-container").editableList('items'); var node = this; node.buttons = []; var idx; for(idx = 0; idx < buttons.length; idx++) { node.buttons.push($(buttons[idx]).RB_getButtonData()); } // store outputs if ($('#node-input-trackMessage').is(':checked')) { node.outputs = node.buttons.length + 1; } else { node.outputs = 1; } }, oneditprepare: function() { $('#node-input-buttons-container') .css('min-width','450px') .editableList({ addButton: 'Add quick reply', addItem: function(container, i, item) { $(container).RB_mountButtonDialog({ types: ['quick-reply', 'phone', 'email'], badges: false }); $(container).RB_setButtonData(item, { badges: false }); }, removable: true, sortable: true }); const buttons = this.buttons; $.RedBot.fetchPlatforms() .done(function() { if (buttons != null) { buttons.forEach(function(button) { $('#node-input-buttons-container').editableList('addItem', button); }); } }); }, oneditresize: function() { var dialogForm = $('#dialog-form'); var rowName = $('.form-row-name', dialogForm); var rowMessage = $('.form-row-message', dialogForm); var rowLabel = $('.form-row-label', dialogForm); var rowTrack = $('.form-row-track', dialogForm); var height = dialogForm.height() - rowName.height() - rowLabel.height() - rowMessage.height() - rowTrack.height() - 30; $('#node-input-buttons-container').editableList('height', height); } }); </script> <script type="text/x-red" data-template-name="chatbot-quick-replies"> <div class="form-row form-row-name"> <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-message"> <label for="node-input-message"><i class="icon-envelope"></i> Message</label> <textarea id="node-input-message" placeholder="Message" style="width:93%;height:50px;"></textarea> <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.) </div> </div> <div class="form-row form-row-label" style="margin-bottom:0;"> <label><i class="fa fa-list"></i> <span>Buttons</span></label> </div> <div class="form-row node-input-rule-container-row"> <ol id="node-input-buttons-container"></ol> </div> <div class="form-row form-row-track"> <label for="node-input-trackMessage">Track</label> <input type="checkbox" value="true" id="node-input-trackMessage" style="width:auto"> <span class="redbot-form-hint"> Track answers to these buttons here (will enable an output pin for each button) </span> </div> </script> <script type="text/x-red" data-help-name="chatbot-quick-replies"><p><code>Quick Replies node</code> provide a way to present buttons to the user in response to a message in <strong>Facebook Messenger</strong>.</p> <p>Quick Replies appear prominently above the composer, with the keyboard less prominent. When a quick reply is tapped, the message is sent in the conversation with developer-defined metadata in the callback.</p> <p>After the user taps one, they are dismissed, which prevents the scenario where users could tap on buttons attached to old messages in a conversation.</p> <p>Only three types of buttons can be specified here: </p> <ul> <li><p><strong>quick-reply</strong>: very similar to <code>postback</code> (see <code>Buttons node</code> for more details), has a <em>label</em> and <em>value</em> (which is the text sent back to the chat when the button is pressed). The button can also have an icon with specified by the <em>url</em> field</p> </li> <li><p><strong>email</strong>: allows the user to share his email </p> </li> <li><p><strong>phone</strong>: allows the user to share his phone number</p> </li> </ul> <p>The text message can be passed through the payload by the upstream node:</p> <pre><code class="language-javascript">return { ...msg, message: &#39;Select one&#39;, buttons: [ { type: &#39;quick-reply&#39;, label: &#39;Test 1&#39;, value: &#39;test1&#39; }, { type: &#39;quick-reply&#39;, label: &#39;Test 2&#39;, value: &#39;test2&#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>message</td> <td>string</td> <td>The text above the quick replies</td> </tr> <tr> <td>buttons</td> <td>[buttons]</td> <td>The quick-reply button</td> </tr> </tbody></table> <p>The <code>button</code> object</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 quick reply button: <em>quick-reply</em>, <em>email</em>, <em>phone</em></td> </tr> <tr> <td>label</td> <td>string</td> <td>The label of the button (only for <em>quick-reply</em>)</td> </tr> <tr> <td>value</td> <td>string</td> <td>The value returned when clicked (only for <em>quick-reply</em>)</td> </tr> <tr> <td>image_url</td> <td>string</td> <td>The image for the button (only for <em>quick-reply</em>)</td> </tr> </tbody></table> </script>