API.AI Richtext handling

[Maniae]

Implementation of Richtext in the plugin for api.ai. From: https://api.ai/docs/reference/agent/query

• Add your payload in the api.ai console:

• api.ai will generate a richtext of the following format: (See the link below)

• The richtext is printed inside the conversation, outside the message wrapper for quick replies:

• Clicking on a button will send it to the bot:

• Images are also supported, card are not:

If using webhook, you should send to the plugin a response of the following format:

    {
      "speech": "",
      "messages": [
        {
          "type": 0,
          "speech": "Here it is:"
        },
        {
          "type": 4,
          "payload": {
            "type": 3,
            "imageUrl": "https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png"
          }
        }
      ]
    }

You can actually use it to send richtext from another platform than api.ai, but it follows api.ai standards.

Btw the code used to send the message when clicking on a button is a little hacky (change the input value and perform a click()) because I didn't want to change the scope of the already implemented functions.

[krilor]

Wow Tom, great work!

This looks super sweet. I've been wanting to add rich text support. Thank you so much for improving the plugin.

I've just had the time go glance at the code, but it looks just about merge ready :+1: I'll have some time to check it out this weekend. I'll update you then :)

[krilor]

Hi again. I pulled you changes down to my local machine. When trying to use the plugin, my local server responds with 503 Bad gateway on admin-ajax.php.

Did you have any such errors? I'll try to investigate some more tomorrow.

[krilor]

I set up a separate local docker instance to try the changes. And with that, I had no trouble :)

So, I merged your the changes!

BTW: I had to move the css changes into the scss file for them not to get lost. All css changes should be added to the scss files.

Thanks again!

[lucianosilvi]

Hi, what would be the right JSONPath to get all the "answers" from the response (plain text and rich responses)? The default $.result.fulfillment.messages[*].speech only extracts the 'speeches' as expected. But I don't guess a path that matches all the posible responses types. Thanks!

[Maniae]

Hi, when you choose the api.ai integration type in the plugin settings, the right JSONPath is automatically used, and the JSONPath field in the integration tab should be ignored. The used JSONPath is $.result.fulfillment.messages[?(@["platform"] == null)]