LexResponse output does not understand HTML data

Question

I'm having a problem trying to get my AWS Lambda function to successfully output a series of HTML links when its running a SQL Query.

private string GetEventSearchResults(ILambdaContext context, List<Event> events, string CustomerNumber)
    {
        var result = string.Empty;
        var link = string.Empty;

        if (events.Count > 0)
        {
            result = $"Events for {CustomerNumber}:";
            foreach (var evt in events)
            {
                link = "http://localhost/event/" + $"{evt.ID}";
                result += $"<br><a href=\"{link}\">Event: {evt.ID} - Status: {evt.Status}</a>";                                    
            }
        }
        else
        {
            result = "No Data found matching your query";
        }           

        return result;
    }     

When this method is called by my Lambda function as a LexResponse,

replyMessage = GetEventSearchResults(context, eventList, query.CustomerNumber);

return Close(
                sessionAttributes,
                "Fulfilled",
                new LexResponse.LexMessage
                {
                    ContentType = "PlainText",
                    Content = replyMessage
                }
                );

This response is then rendered in my HTML page by a Javascript function. Relevant portion of the Javascript that renders the response:

function showResponse(lexResponse) {

        var conversationDiv = document.getElementById('conversation');
        var responsePara = document.createElement("P");
        responsePara.className = 'lexResponse';
        if (lexResponse.message) {              
            responsePara.appendChild(document.createTextNode(lexResponse.message));
            responsePara.appendChild(document.createElement('br'));
        }
        if (lexResponse.dialogState === 'ReadyForFulfillment') {
            responsePara.appendChild(document.createTextNode(
                'Ready for fulfillment'));
            // TODO:  show slot values
        } 
        conversationDiv.appendChild(responsePara);
        conversationDiv.scrollTop = conversationDiv.scrollHeight;
    }

However, the output shown by the Lex bot is as shown below:

Lex Bot Output

Can anyone please help me understand what exactly is going on? Is the content type of the Lex Response responsible for this? (there's only plaintext and SSML available for Lex Response so I can't change that)

Also, if possible, can anyone please explain how to fix this if at all possible? Thanks!

Answer 1

Your code is correct and output is also correct.
However the console window is not able to render the HTML part of your result.

The client on which you will deploy the chatbot, is responsible for rendering the output. For example, if you respond with a ResponseCard, console or website will not be able to render it correctly but it will be displayed correctly on Facebook and Slack. So, if you integrate your chatbot on some website it will show the links in your output correctly as you desired.

You can try to integrate your chatbot with Slack or Facebook first, to see the rendering of output.

Hope it helps.

Answer 2

After further trial and error, I managed to get a solution that works for me.

function showResponse(lexResponse) {

        var conversationDiv = document.getElementById('conversation');
        var responsePara = document.createElement("P");
        responsePara.className = 'lexResponse';
        if (lexResponse.message) {
            var message = lexResponse.message.replace(/"/g, '\'');
            responsePara.innerHTML = message;               
            responsePara.appendChild(document.createElement('br'));
        }           
        conversationDiv.appendChild(responsePara);
        conversationDiv.scrollTop = conversationDiv.scrollHeight;
    }

By making the LexResponse an Inner HTML, it fixed the markup of the text and thus the link can be seen everytime.