Closed MeerZaheen closed 6 months ago
bobpskier
commented
4 years ago Yes, this should work. Are you using a CustomPayload defined in Lex Console or using the earlier technique of supplying html or markdown in a Session attribute named appContext? The information at https://github.com/aws-samples/aws-lex-web-ui/blob/master/lex-web-ui/README.md#markdown-and-html-support is relevant.
MeerZaheen
commented
4 years ago Yes, this should work. Are you using a CustomPayload defined in Lex Console or using the earlier technique of supplying html or markdown in a Session attribute named appContext? The information at https://github.com/aws-samples/aws-lex-web-ui/blob/master/lex-web-ui/README.md#markdown-and-html-support is relevant.
I'm using custom payload defined in my lambda. The lambda queries the results from dynamoDB and outputs the result in html which is then displayed in the web ui as HTML (allowsuperdangeroudHTMLinmessage" activated.
bobpskier
commented
4 years ago Here are some things to validate.
First is to verify how your lambda is returning content. The following is an example nodejs based lambda handler that returns a custom payload that renders either markdown or html.
let lexResponseMarkdown = {
sessionAttributes: {
ExampleHandler: "true"
},
dialogAction: {
type: "Close",
fulfillmentState: "Fulfilled",
message: {
contentType: "CustomPayload",
content: "# Markdown Payload Header \n ## Markdown Payload H2 \n *This is bold*"
},
}
}
let lexResponseHtml = {
sessionAttributes: {
ExampleHandler: "true"
},
dialogAction: {
type: "Close",
fulfillmentState: "Fulfilled",
message: {
contentType: "CustomPayload",
content: "<h1> HTML Payload Header </h1> </h2> HTML Payload H2 </h2> <p> <strong>This is bold from HTML strong</strong> </p>"
},
}
}
let errorMessage = {
sessionAttributes: {
ExampleHandler: "true"
},
dialogAction: {
type: "Close",
fulfillmentState: "Fulfilled",
message: {
contentType: "CustomPayload",
content: "Sorry, I could not process your message"
},
}
}
exports.lambdaHandler = async (event, context) => {
console.log("event: " + JSON.stringify(event,null,2));
if (event.currentIntent.name === 'MarkdownAsCustomResourceFromLambda') {
console.log("returning:" + JSON.stringify(lexResponseMarkdown));
return lexResponseMarkdown;
} else if (event.currentIntent.name === 'HTMLAsCustomResourceFromLambda') {
console.log("returning:" + JSON.stringify(lexResponseHtml));
return lexResponseHtml;
} else {
return errorMessage;
}
};Next is to validate that the config object being served up to the browser client has the correct setting. Are you passing a config object via the html page that has this configuration or are you specifying the configuration setting in the lex-web-ui-loader-config.json file which served from the web server? If using a server based approach, you can validate the setting using the debug/network console and observe the results of the network request for lex-web-ui-loader-config.json file.
Can you send me a link to an example lex-web-ui that is failing along with sample input to the bot to use?
The following link demonstrates the behavior working as intended.
https://lex-web-ui-md-test-codebuilddeploy-1-webappbucket-6wm6m6awpgwi.s3.amazonaws.com/parent.html
Provide the input "show me how lambda generates markdown" or "show me how lambda generates html". These will supply a CustomPayload using the lambda above using either html or markdown.
I'll leave this sample running for a bit.
MeerZaheen
commented
4 years ago Will try this today
MeerZaheen
commented
4 years ago 
index.jade:
doctype html html head meta(charset='utf-8') meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui') title "" // empty favicon to avoid 404 link(href='data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=', rel='icon', type='image/x-icon') body // babel-polyfill needed for IE11 script(src='https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js', crossorigin='anonymous', integrity='sha256-WRc/eG3R84AverJv0zmqxAmdwQxstUpqkiE+avJ3WSo=') // Loader script. Creates a global variable named ChatbotUiLoader. // LexWebUi loader script(src='./lex-web-ui-loader.js') script. // loader options control how the loader obtains the config and // dependencies. It can be optionally passed as an argument to the // FullPageLoader constructor to override the defaults // var loaderOptions = { // shouldLoadConfigFromMobileHubFile: false, // configUrl: './chatbot-ui-loader-config-2.json' // }; // instantiate the loader var lexWebUiLoader = new ChatBotUiLoader.FullPageLoader(); // this config is used to pass run-time configuration to the chatbot UI // as an argument to the load() function. The config passed through // load() is merged with the config from other sources and overrides // their values // var chatbotUiconfig = { // cognito: { // poolId: '' // }, // lex: { // initialText: '', // botName: '' // }, // ui: { // toolbarTitle: '', // toolbarLogo: '' // }, // }; // You can pass the config as a parameter. // The loader can also get its config dynamically // from a JSON file or from the Mobile Hub config script lexWebUiLoader.load() // returns a promise that is resolved once the chatbot UI is loaded .then(function () { console.log('chatbot UI loaded'); }) .catch(function (error) { console.error('chatbot UI failed to load', error); });
lex-web-ui-loader-config.json
LAMBDA output += "
| " + item.NAME.S + " | "; } else { output += "\n" + item.NAME.S + " | "; } //output += "
jeremywilhelm
I'm using method #3: "Use the pre-built libraries from the dist directory of this repo"
does this support HTML and markdown?
I tried to have ""AllowSuperDangerousHTMLInMessage": true," in my lex-web-ui-loader.json file.
it does not work.