lex bot web integration

0

dealing with lex web ui integration; I'm using lex api url = https://runtime-v2-lex.us-east-1.amazonaws.com/bots/botid/botAliases/botaliasid/botLocales/en_US/sessions/Session23_/text this api work fine on postman, I typed a simple python script and it's works fine also. But when I tried to integrate this api with necessery authorizations into a web page using html/js I got this error : caught ReferenceError: AWSRequestsAuth is not defined I even tried to reinstall AWSRequestsAuth with the command below but in vain: pip install aws-requests-auth

** HTML page script : **

<!DOCTYPE html>
<html>
<head>
	<title>Chatbot Example</title>
</head>
<body>
	<h1>Chatbot Example</h1>
	<form>
		<label for="input">Input:</label>
		<input type="text" id="input" name="input">
		<button type="submit">Send</button>
	</form>

	<div id="output"></div>

	<script>
		const form = document.querySelector('form');
		const output = document.querySelector('#output');

		form.addEventListener('submit', (event) => {
			event.preventDefault();
			const input = document.querySelector('#input').value;
			const payload = {text: input};
			const url = 'https://runtime-v2-lex.us-east-1.amazonaws.com/bots/botid/botAliases/botaliasid/botLocales/en_US/sessions/Session23_/text';

			const headers = {
				'Content-Type': 'application/json',
				'X-Amz-Content-Sha256': 'XXXXXXXXXXXX',
				'X-Amz-Date': new Date().toISOString().replace(/[:-]|\.\d{3}/g, ''),
			};

			const auth = new AWSRequestsAuth({
				accessKeyId: 'XXXXXXXXXX',
				secretAccessKey: 'XXXXXXXXXXXXXX',
				host: 'runtime-v2-lex.us-east-1.amazonaws.com',
				region: 'us-east-1',
				service: 'lex',
			});

			fetch(url, {
				method: 'POST',
				headers: headers,
				body: JSON.stringify(payload),
				auth: auth,
			})
			.then(response => response.json())
			.then(data => {
				const messages = data.messages.filter(message => message.contentType === 'PlainText');
				const outputText = messages.map(message => message.content).join('\n');
				output.textContent = outputText;
			})
			.catch(error => {
				console.error(error);
				output.textContent = 'Error: ' + error.message;
			});
		});
	</script>
</body>
</html>

2 Answers
0

Hi,

it could be related that you are missing some script that expose the missing component.

Try to look here: https://github.com/aws-samples/aws-lex-web-ui/blob/master/src/README.md as it could be the aws-lex loader the culprit.

Hope it help ;)

profile picture
EXPERT
answered a year ago
  • thanks for responding; I don't think so because the problem is related to the AWSRequestsAuth library that is not running correctly, although I already install it, this is what I got with pip list command : Package Version


    aws-requests-auth 0.4.3

0

There is an opensource web UI for Lex that you could either use, or perhaps look at the code for inspiration. https://github.com/aws-samples/aws-lex-web-ui

profile pictureAWS
answered a year ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions