JSFiddle - React, Tailwind, and code Playground
by killMeSak
HTML
<div id="conversation">
conversation
how are you
</div>
JavaScript
//To hide, unhide content/buttons with some jquery animations
$(document).ready(function() {
$(".chat_btn").bind().unbind().click(function(e) {
e.preventDefault();
$('#chatWindow').css('visibility', 'visible');
$('#chatWindow').animate({
opacity: '1'
}, "slow");
$('.chat_btn').css('visibility', 'hidden');
$('.chat_btn').animate({
opacity: '0'
}, "slow");
});
//To hide, unhide content/buttons with some jquery animations
$(".close_btn").bind().unbind().click(function(e) {
e.preventDefault();
$('#chatWindow').css('visibility', 'hidden');
$('#chatWindow').animate({
opacity: '0'
}, "slow");
$('.chat_btn').css('visibility', 'visible');
$('.chat_btn').animate({
opacity: '1'
}, "slow");
});
//when user enters the input and hits enter or clicks on submit.
$(".push_chat").bind().unbind().click(function(e) {
e.preventDefault();
var chatInputText = document.getElementById('chatInput');
if (chatInputText && chatInputText.value && chatInputText.value.trim().length > 0) {
var chatInput = chatInputText.value.trim();
//Initializing the value to some dots to give an feel of "loading..."
chatInputText.value = '...';
// disable for editing while the request is sent and response is being received.
chatInputText.locked = true;
// populating the parameters to be sent to lexruntime. You can optionally add
// sessionAttributes if you would like use the the response in the subsequent requests.
//To load conversation div with request input.
loadRequest(chatInput);
//Posting the params to lexruntime.
lexruntime.postText(params, function(err, data) {
if (err) {
console.log(err, err.stack);
loadError('Error: ' + err.message + ' (see console for details)')
}
if (data) {
// capture the sessionAttributes for the next cycle (just in case)
sessionAttributes...