Chatbot Response in Array Format
You can now render the chat bubbles in the order you wanted.
Previously we used to send the payload response to the chatbot as an object and hence we are unable to render the response in the expected order. Now, we can send the payload in an array format to the chatbot, and the chatbot will recognize the array structure and render the response in that order.
Enable Chatbot Array response
To enable this feature:
You should set the
enableArrayResponse
property totrue
under Bot Out Parser in the Bot Provider V2 node.You should use the new directive structure. ie; use
msg.payload.rawMultiagent
property
Directive structure
In the existing directive structure, we will push 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.
Existing
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
}
});
return msg;
Directive structure for Multi Array response
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
}
}]});
return msg;
You can still use the old directive structure and push the code to msg.payload.orbita.directive
but they will not be rendered in a custom order.