search

eduardotkoller / convForm

A jQuery plugin that transforms a form into an interactive chat.
https://eduardotkoller.github.io/convForm
MIT License
182 stars 108 forks source link

Display dynamic reply in bubble chat from external API #52

Closed User0123456789 closed 4 years ago

User0123456789 commented 5 years ago

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 commented 5 years ago

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 notifications@github.com 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
<https://github.com/eduardotkoller/convForm/issues/52>, or mute the thread
<https://github.com/notifications/unsubscribe-auth/AEM6DZ2Q3K6NOOPXDD4ZIZLPSKO2XANCNFSM4HIS3XKQ>
.
User0123456789 commented 5 years ago

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 notifications@github.com 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
<https://github.com/eduardotkoller/convForm/issues/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 https://github.com/eduardotkoller/convForm/issues/52#issuecomment-487132846, or mute the thread https://github.com/notifications/unsubscribe-auth/ACKC2EBHEZ5XAGV54D2NVYLPSM2DLANCNFSM4HIS3XKQ .

User0123456789 commented 5 years ago

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 commented 4 years ago

Did you manage to find a solution to this issue?

eduardotkoller commented 4 years ago

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