Display dynamic reply in bubble chat from external API

[User0123456789]

I'm trying to display a dynamic message/reply message from external API, but I'm getting an error like this Uncaught TypeError: Cannot read property 'current' of undefined in askAgain function, but in alert it's working.

How to fix this? Also how to append a p html tag outside the bubble chat?

Thank you.

var original = false;
function askAgain(convState, ready, message) {
	convState.current.next = convState.newState({
		type: 'text',
		questions: [message],
		callback: ['clientConcern']
	});
	convState.current.next.next = convState.newState({
		type: 'text',
		questions: [message],
		text: $('input[type=text]#chatConcern').val()
	});

	setTimeout(ready, Math.random() * 500 + 100);
	convState.current.next = false;
}


function clientConcern(convState){
	$.ajax({
		url: 'http://example/api',
		type: "POST",
		dataType: "json",
		contentType: 'application/json; charset=utf-8',
		data: JSON.stringify({
			"nickname": $('input[type=text]#custName').val(),
			"subject": $('select[name="custType"]').val()
		}),
		success: function (data){
			loadInterval = setInterval(receivedMsg, 1000);

		// load messages uniquely
		var messageInterval = setInterval(function(){
			for (const item of messageArray){
				if (!showedMap.has(item.index)){
					askAgain(item.text);
					showedMap.set(item.index, true);
				}
			}
		}, 100);
						
		sendMsg();
	},
		error: function (data){
			alert(data);
		}
	});
}
        
function sendMsg(){
	jQuery.ajax({
		url: 'http://example/api/chat_id',
		type: "POST",
		dataType: "json",
		contentType: 'application/json; charset=utf-8',
		data: JSON.stringify({
			operationName : "SendMessage",
			alias : ALIAS,
			secureKey : SECURE_KEY,
			text: $('input[type=text]#chatConcern').val()
		}),
		success: function (data){
			console.log(data);
		}
	});
}

function receivedMsg(convState){
	jQuery.ajax({
		method: "POST",
		url: "http://example/api/chat_id/messages",
		cache: false,
		contentType: "application/json; charset=utf-8",
		dataType: "json",
		data: JSON.stringify({
			"alias" : ALIAS,
			"secureKey" : SECURE_KEY,
			"userId" : USER_ID
		}),
	}).done(function(data){
		if (data.chatEnded){
			clearInterval(loadInterval);
			original = convState.current;
			convState.current.next = convState.newState({
				type: 'text',
				questions: [message],
				noAnswer: true
			});
			convState.current.next.next = convState.newState({
				type: 'text',
				questions: ['Chat ended.'],
				noAnswer: true,
				callback: ['askAgain']
			});
		} else {
			var len = data.messages.length;
			for (i = 0; i < len; i++){
				var messages = data.messages[i];

				if (messages.type === "Message" && 
				(messages.from.type === "Agent" || messages.from.type === "External")){
					if (!messageMap.has(messages.index)){
						messageMap.set(messages.index, true);
						messageArray.push(messages);
					}
				}
			}
		}	
	});
}

jQuery(function($){
	var convForm = $('#chat').convform();
	console.log(convForm);
});
```

[eduardotkoller]

I couldn't take a deep look at the code because I'm on my phone, but it seems you are calling the askAgain function with the value from the answer, and it needs to be called with a convState instance.

…

On Fri, Apr 26, 2019, 03:33 MNL ***@***.***> wrote: I'm trying to display a dynamic message/reply message from external API, but I'm getting an error like this Uncaught TypeError: Cannot read property 'current' of undefined in askAgain function, but in alert it's working. How to fix this? Also how to append a p html tag outside the bubble chat? Thank you. var original = false; function askAgain(convState, ready, message) { convState.current.next = convState.newState({ type: 'text', questions: [message], callback: ['clientConcern'] }); convState.current.next.next = convState.newState({ type: 'text', questions: [message], text: $('input[type=text]#chatConcern').val() }); setTimeout(ready, Math.random() * 500 + 100); convState.current.next = false; } function clientConcern(convState){ $.ajax({ url: 'http://example/api', type: "POST", dataType: "json", contentType: 'application/json; charset=utf-8', data: JSON.stringify({ "nickname": $('input[type=text]#custName').val(), "subject": $('select[name="custType"]').val() }), success: function (data){ loadInterval = setInterval(receivedMsg, 1000); // load messages uniquely var messageInterval = setInterval(function(){ for (const item of messageArray){ if (!showedMap.has(item.index)){ askAgain(item.text); showedMap.set(item.index, true); } } }, 100); sendMsg(); }, error: function (data){ alert(data); } }); } function sendMsg(){ jQuery.ajax({ url: 'http://example/api/chat_id', type: "POST", dataType: "json", contentType: 'application/json; charset=utf-8', data: JSON.stringify({ operationName : "SendMessage", alias : ALIAS, secureKey : SECURE_KEY, text: $('input[type=text]#chatConcern').val() }), success: function (data){ console.log(data); } }); } function receivedMsg(convState){ jQuery.ajax({ method: "POST", url: "http://example/api/chat_id/messages", cache: false, contentType: "application/json; charset=utf-8", dataType: "json", data: JSON.stringify({ "alias" : ALIAS, "secureKey" : SECURE_KEY, "userId" : USER_ID }), }).done(function(data){ if (data.chatEnded){ clearInterval(loadInterval); original = convState.current; convState.current.next = convState.newState({ type: 'text', questions: [message], noAnswer: true }); convState.current.next.next = convState.newState({ type: 'text', questions: ['Chat ended.'], noAnswer: true, callback: ['askAgain'] }); } else { var len = data.messages.length; for (i = 0; i < len; i++){ var messages = data.messages[i]; if (messages.type === "Message" && (messages.from.type === "Agent" || messages.from.type === "External")){ if (!messageMap.has(messages.index)){ messageMap.set(messages.index, true); messageArray.push(messages); } } } } }); } jQuery(function($){ var convForm = $('#chat').convform(); console.log(convForm); }); ``` — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#52>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEM6DZ2Q3K6NOOPXDD4ZIZLPSKO2XANCNFSM4HIS3XKQ> .

[User0123456789]

Hello @eduardotkoller , I already did but I'm getting an error when using convState with this error Uncaught TypeError: Cannot read property 'current' of undefined in askAgain function. The `message` variable inside askAgain is use to get the reply message from API. ```` function askAgain(convState, ready, message) { convState.current.next = convState.newState({ type: 'text', questions: [message], callback: ['clientConcern'] }); convState.current.next.next = convState.newState({ type: 'text', questions: [message], text: $('input[type=text]#chatConcern').val() }); setTimeout(ready, Math.random() * 500 + 100); convState.current.next = false; } ```` Sat, 27 Apr 2019, 01:15 Eduardo Thomas Koller, <notifications@github.com> wrote:

…

I couldn't take a deep look at the code because I'm on my phone, but it seems you are calling the askAgain function with the value from the answer, and it needs to be called with a convState instance. On Fri, Apr 26, 2019, 03:33 MNL ***@***.***> wrote: > I'm trying to display a dynamic message/reply message from external API, > but I'm getting an error like this Uncaught TypeError: Cannot read > property 'current' of undefined in askAgain function, but in alert it's > working. > > How to fix this? Also how to append a p html tag outside the bubble chat? > > Thank you. > > var original = false; > function askAgain(convState, ready, message) { > convState.current.next = convState.newState({ > type: 'text', > questions: [message], > callback: ['clientConcern'] > }); > convState.current.next.next = convState.newState({ > type: 'text', > questions: [message], > text: $('input[type=text]#chatConcern').val() > }); > > setTimeout(ready, Math.random() * 500 + 100); > convState.current.next = false; > } > > > function clientConcern(convState){ > $.ajax({ > url: 'http://example/api', > type: "POST", > dataType: "json", > contentType: 'application/json; charset=utf-8', > data: JSON.stringify({ > "nickname": $('input[type=text]#custName').val(), > "subject": $('select[name="custType"]').val() > }), > success: function (data){ > loadInterval = setInterval(receivedMsg, 1000); > > // load messages uniquely > var messageInterval = setInterval(function(){ > for (const item of messageArray){ > if (!showedMap.has(item.index)){ > askAgain(item.text); > showedMap.set(item.index, true); > } > } > }, 100); > > sendMsg(); > }, > error: function (data){ > alert(data); > } > }); > } > > function sendMsg(){ > jQuery.ajax({ > url: 'http://example/api/chat_id', > type: "POST", > dataType: "json", > contentType: 'application/json; charset=utf-8', > data: JSON.stringify({ > operationName : "SendMessage", > alias : ALIAS, > secureKey : SECURE_KEY, > text: $('input[type=text]#chatConcern').val() > }), > success: function (data){ > console.log(data); > } > }); > } > > function receivedMsg(convState){ > jQuery.ajax({ > method: "POST", > url: "http://example/api/chat_id/messages", > cache: false, > contentType: "application/json; charset=utf-8", > dataType: "json", > data: JSON.stringify({ > "alias" : ALIAS, > "secureKey" : SECURE_KEY, > "userId" : USER_ID > }), > }).done(function(data){ > if (data.chatEnded){ > clearInterval(loadInterval); > original = convState.current; > convState.current.next = convState.newState({ > type: 'text', > questions: [message], > noAnswer: true > }); > convState.current.next.next = convState.newState({ > type: 'text', > questions: ['Chat ended.'], > noAnswer: true, > callback: ['askAgain'] > }); > } else { > var len = data.messages.length; > for (i = 0; i < len; i++){ > var messages = data.messages[i]; > > if (messages.type === "Message" && > (messages.from.type === "Agent" || messages.from.type === "External")){ > if (!messageMap.has(messages.index)){ > messageMap.set(messages.index, true); > messageArray.push(messages); > } > } > } > } > }); > } > > jQuery(function($){ > var convForm = $('#chat').convform(); > console.log(convForm); > }); > ``` > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > <#52>, or mute the thread > < https://github.com/notifications/unsubscribe-auth/AEM6DZ2Q3K6NOOPXDD4ZIZLPSKO2XANCNFSM4HIS3XKQ > > . > — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#52 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACKC2EBHEZ5XAGV54D2NVYLPSM2DLANCNFSM4HIS3XKQ> .

[User0123456789]

Or there's a way that I can get the response from an external API and display it dynamically to bubble chat? I tried to use append to display the response from API, but it's not working. I mean the response didn't display.

[turbocpt]

Did you manage to find a solution to this issue?

[eduardotkoller]

To anyone reading this, see if issue #62 can help.