Below is the React component calling external vanilla aws lex javascript for conversation. Issue is coming with call new LexAudio.conversation(...) what is the best way to import the external js library into react component.
class MyComponent extends Component {
startConversation() {
AWS.config.credentials = new AWS.Credentials('', '', null);
AWS.config.region = 'us-east-1';
var waveform = require('./renderer_1.js');
var waveform = window.Waveform();
var config = {
lexConfig: { botName: 'testbot' }
};
var message = document.getElementById('message');
var LexAudio = require('./aws-lex-audio.js');
var conversation = new LexAudio.conversation(config, function (state) {
message.textContent = state + '...';
if (state === 'Listening') {
waveform.prepCanvas();
}
if (state === 'Sending') {
waveform.clearCanvas();
}
}, function (data) {
console.log('Transcript: ', data.inputTranscript, ", Response: ", data.message);
}, function (error) {
//message.textContent = error;
}, function (timeDomain, bufferLength) {
waveform.visualizeAudioBuffer(timeDomain, bufferLength);
});
conversation.advanceConversation();
}
render() {
return (
<div className='Hello'>`enter code here`
<meta charSet="UTF-8" />
<link rel="stylesheet" href="style.css" />
<div className="audio-control" onClick={this.startConversation}>
<p id="audio-control" className="white-circle">
<img alt="new" src="./lex.png" />
<canvas className="visualizer" />
</p>
<p><span id="message" /></p>
</div>
</div>
);
};
}
export default MyComponent;
Thank you for the help.
Try importing the LexAudio at the top of the page. Most of your imports should go here.
Something like:
import LexAudio from './aws-lex-audio.js';
Instead of:
var LexAudio = require('./aws-lex-audio.js');