How does conversation view of bot wizard work in the SUSI.AI Botbuilder?

 

Earlier, we could view the skills in code view only in SUSI.AI. Code views shows user queries along with bot responses in a simple form. Different types of responses are coded in different ways and there’s a proper documentation for it here. While this works for a developer, it’s not user friendly. The main purpose of a chatbot web plugin is that user should be able to customise it. User should be able to add skills. Hence we need a conversation view to better show the skills of SUSI.

Fetching data from code view and its storage form:

Skill data from code view is fetched and then stored in the following form:

{
   userQueries: [],
   botResponses: [],
}

This is stored in an object called conversationData.
userQueries stores an array of all the user queries. Similarly, botResponses stores the answers to these queries.
For the query at index 0 of the array in userQueries, the response is at index 0 of botResponses. For the query at index 1 of the array in userQueries, the response is at index 1 of botResponses. The queries and responses are stored in this way.

For example:
If the query is: “Hi|Hello” and the response is “Hi. I am SUSI.|Hello!”
Then the object conversationData will look like this:

{
   userQueries: [[‘Hi’, ‘Hello’]],
   botResponses: [[‘Hi. I am SUSI’, ‘Hello!’]],
}

You can see that index 0 of userQueries holds the queries and botResponses holds its responses.
An example of data from code view getting stored in object conversationData.

::name <Skill_name>
::author <author_name>
::author_url <author_url>
::description <description>
::dynamic_content <Yes/No>
::developer_privacy_policy <link>
::image <image_url>
::terms_of_use <link>

Hi|Hello
Hi. I’m a chatbot.

I need help.|Can you help me?
Sure! I’ll help you. What do you want help with?

How do I track my order?|I need to track my order.
Please tell me the order id.

This will be stored in conversationData in the following way:

{
   userQueries: [
      [‘Hi’, ‘Hello’],
      [‘I need help.’, ‘Can you help me?’],
      [‘How do I track my order?’, ‘I need to track my order.’]
   ],
   botResponses: [
      [Hi. I’m a chatbot.],
      [‘Sure! I’ll help you. What do you want help with?’],
      [‘Please tell me the order id.’]
   ],
}

Rendering data in conversation view:

The data collected in conversationData object is passed to conversation view JS file as props. Now this data can be rendered by injecting HTML elements using jQuery but that is not a right approach. So, we use an array to render it. We pass the HTML elements into the array using the push() method.

This will be more clear from the following code snippets.

This is the code for adding user query:

for (let query of user_query) {
   if (query !== ‘’) {
      conversation.push(
            <div className=”user-text-box”>{query}</div>,
      );
   }
}

This is the code for adding bot response:

for (let response of bot_response) {
   if (response !== ‘’) {
      conversation.push(
            <div className=”bot-text-box”>{response}</div>,
      );
   }
}

References: