Markdown in the Lex console

[longhornrumble]

Hi,

I've read posts and the readme file on markdown. While it's clear that you use JSON in Lambda to pass your markdown payload, it's not clear if you use JSON in the code editor of the console when you're created a custom payload response.

When I add JSON to the code editor, it renders in the Lex Web UI as a string of code. When I put straight markdown in the code editor, it renders as markdown.

Anyone use the custom payload code editor in the Lex Console? Do you simply put your markdown in it without it being wrapped in JSON?

Lastly, using the code editor is weird. I can't figure out how to create spaces to leave an empty row (say I have text on lines 1 and 3 in the editor but want line 2 to be blank). It's super simple in markdown but it refuses to render an empty line in the UI. Any ideas?

Finally, the code editor will not render and inline link. I use link to render an inline link and the Lex Web UI will not display the message at all. Take the inline code out and the message renders. Any ideas?

Thanks

[atjohns]

Yeah you just put the Markdown directly in there no wrapping. Lex side looks like this:

Web UI should do this:

Apologies on your last question, but I'm not sure what code editor you talking about.

[longhornrumble]

@atjohns

After more diagnosing with developer tools, I've learned that straight links are fine (http://whatever.com), but inline links (like what you've shared) are blocked with 400 errors.

The URL being queried is related to Lex not Cloudfront (it's not CORS).

When the inline code is dropped in, it throws this specific error.

Any ideas?

[longhornrumble]

I have a Lex support tidbit regarding inline links in markdown being confused as session attributes by Lex and throwing 404 errors. I also have an update concerning spacing issues that Vuetify is causing by overriding the default HTML header margins. This causes the markdown line spacing to go haywire.

Note from Lex support:

Thank you for sharing your findings! I was also able to obtain more information on both the space formatting and the links error. I would like to share my findings and recommendations.

Issue found: Library from Web UI overriding HTML margins

I reached out to our internal teams for QNA bot and Lex Web UI. One of the internal engineers was able to take a look at the formatting differences in spacing. He found that the library being used by the Web UI solution was overriding the default HTML header margins and setting them to 0. The library being used is Vuetify. (1) The team is currently looking into exactly which part is overriding the expected formatting.

Recommendation: Editing the.css file (details and instructions)

In the meantime, the Web UI engineer has recommended to change the CSS style in the solution manually. (2) This can be performed by editing the “custom-chatbot-style.css” file in the S3 bucket made for the WebApp. We were able to edit the format to correct the spacing with the following “custom-chatbot-style.css” file:
+++++++++++++++++++++++++++++++++++++++++
button.min-button {border-radius: 60px;}

.message-button {display: none;}

.message-text :is(h1, h2, h3, h4, h5, h6, p) {
margin-block-start: 1em !important;
margin-block-end: 1em !important;
}
+++++++++++++++++++++++++++++++++++++++++

This was able to adjust the spacing for headers and regular text/paragraphs. Other CSS elements can also be added for spacing adjustment. Here are the steps to navigate to the “custom-chatbot-style.css” file and to implement the spacing changes:

1. Navigate to the Lex Web UI stack in CloudFormation
2. Select the resources tab and follow the link for the “WebAppBucket”
3. From the S3 link, find the file “custom-chatbot-style.css” and download it
4. Make the necessary CSS style changes to the file
5. Reupload it to the same bucket location with the same name
   It may take some time for CloudFront edge caches to update with the CSS changes.

Invalidating CloudFormation files for immediate update

To implement the changes immediately, the distribution can be invalidated (3) to have CloudFront fetch the new version of the file. Here are the steps to invalidate a CloudFront Distribution:

1. Navigate to the CloudFront Distributions menu (4)
2. Select the distribution of the target Web UI solution
3. Select the “Invalidations” tab
4. Select “Create invalidation” and configure the invalidation
   **Additional note - I was able to use “/*” for the invalidation which targets all files in the distribution, but specific target paths can be chosen for invalidation
5. Test the Lex Web UI solution to verify changes

CloudFormation file invalidation can be used to implement the CSS update faster than having the edge cache update. The first 1,000 invalidations are free, but additional invalidations will be charged. Each invalidation counts for each individual path found in the invalidation. This would also include all paths found using the “/*” wildcard. I have included documentation with sections about the invalidation process and pricing details. (3)

[atjohns]

Oh that was you asking about the margins? =)

Glad I could help.