[OutSystems.AI Chatbot] OutSystems.ai Chatbot with QnAMaker links and follow-up prompts

Forge Component
(14)
Published on 26 May by Rui Parente
14 votes
Published on 26 May by Rui Parente

Hello,

I've got a problem with the Outsystems.ai Chatbot. First of all, I'm using OS ServiceCenter 11.6.16 and the tradional web-app is built on my personal cloud (version 11). The bot is a Azure bot built with QnAMaker. At first, the bot seems to work fine, but when I use links or follow-up prompts, the problem occurs. This is what the QnA-tester shows:

And this is the result from OutSystems.AI chatbot:

How can I fix this?

Thank you in advance.

Kind regards,

Tom

Hello,

We aren't currently supporting the follow up prompts.

Are you testing the feature or do you need to implement it in a project?

Thanks,

Bruno

Hello,

Thank you for you reply!

It is for a project. Do you know when follow-up prompts are supported? And what about links, is this also not supported? Do you know if there are workarounds to fix my problem?

Regards,

Tom




Bruno Martinho wrote:

Hello,

We aren't currently supporting the follow up prompts.

Are you testing the feature or do you need to implement it in a project?

Thanks,

Bruno



Hello Tom,

I'm talking to the development team management to answer you question about when it will be available.

Let me check if there is any workaround to be applied in the meanwhile.


Hallo Bruno,

Happy new year and thank you for the fast replies.

When I was trying to do something with the answers from my QnaBot, I noticed that I recieved an 'activity' (type = message) with an attachment (with contentType vnd.microsoft.card.hero). This attachment has text and buttons. Since there are already buttons in the Bot-block, I used these buttons. I also used the actions already present in the JS.

I replaced to following code:

SyntaxEditor Code Snippet

                // If the activity received has attachments, these are added to the UI.
                // Otherwise the attachments node is removed from the template clone.
                if (hasAttachments) {
                  var attachments = activity.attachments
                  attachments.forEach(function (element) {
                    var attachmentNode = newAttachmentNode(element)
                    cloneBotTemplate.lastChild.appendChild(attachmentNode)
                  })
                  chatBody.scrollTop = messageList.scrollHeight

with:

SyntaxEditor Code Snippet

                  // If the activity received has attachments, these are added to the UI.
                  // Otherwise the attachments node is removed from the template clone.
                  if (hasAttachments) {
                    var textNode = botMessageNode.firstChild
                    textNode.innerText = activity.attachments[0].content.text
                    
                    // Create a clickable actions based on the Follow-Up Promps.
                    var actions = activity.attachments[0].content.buttons
                      var actionNode = botMessageNode.lastChild
                      actions.forEach(function (element) {
                        var actionClone = actionNode.cloneNode(true)
                        actionClone.style.display = 'block'
                        actionClone.innerText = element.title
                        actionClone.setAttribute('action-data', element.value)
                        
                        // Creates link-attributes for given acionClone.innerText values.
                        if (actionClone.innerText == '<YourFollowUpButtonText>'){
                        actionClone.setAttribute('onclick', 'return !window.open("YourLink", "_blank");')}

                        
                        botMessageNode.appendChild(actionClone)
                        

                      })
                    
                  }

Since I am new to JS, this may not be the most beautiful implementation, but i tworks. The follow-up prompts are visible and, depending on the innerText values I set and how the JS handles these values, I can navigate to other webpages. If you have any suggestions or questions, please contact me.

Tom 

That was exactly what I was thinking about, to change that JS to deal with that and use the buttons!

Good job!

Bruno Martinho


Tom Jaspers wrote:

Hallo Bruno,

Happy new year and thank you for the fast replies.

When I was trying to do something with the answers from my QnaBot, I noticed that I recieved an 'activity' (type = message) with an attachment (with contentType vnd.microsoft.card.hero). This attachment has text and buttons. Since there are already buttons in the Bot-block, I used these buttons. I also used the actions already present in the JS.

I replaced to following code:

SyntaxEditor Code Snippet

                // If the activity received has attachments, these are added to the UI.
                // Otherwise the attachments node is removed from the template clone.
                if (hasAttachments) {
                  var attachments = activity.attachments
                  attachments.forEach(function (element) {
                    var attachmentNode = newAttachmentNode(element)
                    cloneBotTemplate.lastChild.appendChild(attachmentNode)
                  })
                  chatBody.scrollTop = messageList.scrollHeight

with:

SyntaxEditor Code Snippet

                  // If the activity received has attachments, these are added to the UI.
                  // Otherwise the attachments node is removed from the template clone.
                  if (hasAttachments) {
                    var textNode = botMessageNode.firstChild
                    textNode.innerText = activity.attachments[0].content.text
                    
                    // Create a clickable actions based on the Follow-Up Promps.
                    var actions = activity.attachments[0].content.buttons
                      var actionNode = botMessageNode.lastChild
                      actions.forEach(function (element) {
                        var actionClone = actionNode.cloneNode(true)
                        actionClone.style.display = 'block'
                        actionClone.innerText = element.title
                        actionClone.setAttribute('action-data', element.value)
                        
                        // Creates link-attributes for given acionClone.innerText values.
                        if (actionClone.innerText == '<YourFollowUpButtonText>'){
                        actionClone.setAttribute('onclick', 'return !window.open("YourLink", "_blank");')}

                        
                        botMessageNode.appendChild(actionClone)
                        

                      })
                    
                  }

Since I am new to JS, this may not be the most beautiful implementation, but i tworks. The follow-up prompts are visible and, depending on the innerText values I set and how the JS handles these values, I can navigate to other webpages. If you have any suggestions or questions, please contact me.

Tom 


Hi Tom ,

Even i want to use the follow up prompt but the above approach I am not understanding how to implement it in outsystems as I am new to it . Please can you provide steps of implementation of Follow up prompt using above code and how you achieved it.

Hello Dhanya,

First of all, this is for the web-version, not the react version. Are you using the web version? If you do, I implemented the code above in the JavaScript section of the Chatbot component. To put it simply, when a message with buttons is being sent, the QnA-bot actually sends an activity with an attachment (a hero card containing text and buttons, https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-howto-add-media-attachments?view=azure-bot-service-4.0&tabs=csharp). You can see it when you use the inspector of your browser and debug. Since I wanted buttons, and these buttons already exist in Chatbot AI (.. = suggested-actions), I replaced the 'attachment'-code with the 'action'-code above, although I deleted this part:

// Creates link-attributes for given acionClone.innerText values.
                        if (actionClone.innerText == '<YourFollowUpButtonText>'){
                        actionClone.setAttribute('onclick', 'return !window.open("YourLink", "_blank");')}.


So this is what I used:

SyntaxEditor Code Snippet

                    // Create a clickable actions based on the Follow-Up Promps.
                    var actions = activity.attachments[0].content.buttons 
                      var actionNode = botMessageNode.lastChild
                      actions.forEach(function (element) {
                        var actionClone = actionNode.cloneNode(true)
                        actionClone.style.display = 'block'                        
             
                        actionClone.innerText = element.title                        

                        actionClone.setAttribute('action-data', element.title)
                      
                        botMessageNode.appendChild(actionClone)                  
                      })

Since january I changed a lot of things in my chatbot, both in the c# code of the QnA-bot and the code in OutSystems, so my current implementation isn't usefull for you.


Regards,

Tom