Previously we send payload response to the chatbot as an object and hence we are not rendering the response in the expected order. Now, we can send payload as an Array format to the chatbot, and the chatbot will recognize the array structure and render the response in the order
How to enable Chatbot response as an Array?
To enable this feature, we should set the enableArrayResponse property under bot out parser in the bot provider v2 node.
What changes do we need to modify in the existing directive structure?
The existing directive structure looks like below :
Existing structue :
HTML Directive Example :
if(!msg.payload.orbita) {
msg.payload.orbita = {};
}
if(!msg.payload.orbita.directive) {
msg.payload.orbita.directive = [];
}
msg.payload.orbita.directive.push({
type : "html5",
options :
{
html : `<form><label for="fullname">Name:</label><br> <input type="text" id="fullname" name="fullname" value="John Doe"><br> <label for="age">Age:</label><br> <input type="text" id="age" name="age" value="0"><br> <label for="genders">Choose a Gender:</label><br> <select id="genders" name="genders"> <option value="male">Male</option> <option value="female">Female</option> <option value="nonbinary">Non-binary</option> <option value="prefnottosay">Prefer not to answer</option> </select> <br><br><button style="float:right" onclick="window.parent.myFunction(event)">Submit</button> </form>`,
template : "300x240"
// id: '123',
// renderBubble: false
}
});
In the above code, we are pushing our HTML directive inside the directive object. But Hereafter we need to use the new structure. We need to push the directive in the rawMultiagent property.
NEW STRUCTURE :
HTML Directive Example :
msg.payload.rawMultiagent = msg.payload.rawMultiagent || [];
msg.payload.rawMultiagent.push({ directive : [{
type : "html5",
options :
{
html : `<form><label for="fullname">Name:</label><br> <input type="text" id="fullname" name="fullname" value="John Doe"><br> <label for="age">Age:</label><br> <input type="text" id="age" name="age" value="0"><br> <label for="genders">Choose a Gender:</label><br> <select id="genders" name="genders"> <option value="male">Male</option> <option value="female">Female</option> <option value="nonbinary">Non-binary</option> <option value="prefnottosay">Prefer not to answer</option> </select> <br><br><button style="float:right" onclick="window.parent.myFunction(event)">Submit</button> </form>`,
template : "300x240"
// id: '123',
// renderBubble: false
}
}]});
Backward Support :
In most of the environment, we are using the old directive structure and hence we are supporting the old structure also. We can also push all our directives to msg.payload.orbita.directive.
So, the existing environment won’t break because of these new changes.