105
Views
9
Comments
Solved
[OutSystems.AI Chatbot] OutSystems.ai Chatbot with QnAMaker links and follow-up prompts
Question
Forge component by Félix Barros
14
Published on 26 May 2020

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

Staff
Rank: #10847
Solution

Hi there!

We have listed to your request and now it's officially supported out-of-the-box!

Check the new update ;)

Thank you!

Staff
Rank: #60

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

Staff
Rank: #60

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.


Rank: #1564

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 

Staff
Rank: #60

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

Good job!

Bruno Martinho


Rank: #1564

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

Staff
Rank: #10847
Solution

Hi there!

We have listed to your request and now it's officially supported out-of-the-box!

Check the new update ;)

Thank you!