Bot typing enhancement

[Oscar]

Hello,

First of all thank you for implementing this control!

I'm doing some tests to see how it works, etc. and I'm facing the next issue. I think right now the control is lacking some kind of natural behavior. Maybe not everyone may want this, but I think some of us would like to have the feeling that we're talking somehow to a person instead of a bot.

I've modified your code in the demos for the function renderMessages to give it a more natural feeling:

 

renderMessages: function (messages) {
   var that = this;
   var msg = messages;

   function renderWithDelay() {
      var message = msg[0];
      switch (message.type) {
          case 0:
               that.chat.renderMessage({ type: "text", text: message.speech, timestamp: that._timestamp }, that.userInfo);
               break;
          case 2:
               that.renderSuggestedActions(message.replies.map(function (reply) { return { title: reply, value: reply }; }));
               break;
          default:
      }

      msg.splice(0, 1);
      if (msg.length > 0) {
         var newMessage = msg[0];
         if (message.type == 0) setTimeout(renderWithDelay, newMessage.speech.length * 12);
         else renderWithDelay();
      }
   }

   renderWithDelay();
}

 

However to really achieve this natural feeling when talking to the bot, I think it would be really useful to have an option, that could accept a boolean or JSON object, that would work as follows:

a) If it is a boolean and it is true, on the delay it will show a bubble saying that "Bot name is typing..."

b) If it is a JSON object, would work as if true, and let the user enter the message to appear in the bubble 

 

Thank you!

[Oscar]

There's a typo in the line where it says, within the renderWithDelay function:

if (message.type == 0) setTimeout(...

Should be:

if (newMessage.type == 0) setTimeout(...

[Oscar]

Nevermind, figured out a way to do that while using google's dialogflow.

 

This is what I've done, in case anybody needs it too:

1) Defined a template named bottyping where the first level element has bot-typing as id.

2) Inside the function renderWithDelay, before the switch I did a $("#bot-typing").remove(), and just before the setTimeout for the delayed rendering, I called the renderMessage function of the chat with type bottyping and the needed data.

 

var BOTTYPING_TEMPLATE = kendo.template(
    '<div id="bot-typing" class="k-message k-only">' +
         '<div class="k-bubble">#: botname # is typing...</div>' +
      '</div>');
kendo.chat.registerTemplate("bottyping", BOTTYPING_TEMPLATE);

 

renderMessages: function (messages) {
   var that = this;
   var msg = messages;
   function renderWithDelay() {
      var message = msg[0];
      $("#bot-typing").remove();
      switch (message.type) {
          case 0:
               that.chat.renderMessage({ type: "text", text: message.speech, timestamp: that._timestamp }, that.userInfo);
               break;
          case 2:
               that.renderSuggestedActions(message.replies.map(function (reply) { return { title: reply, value: reply }; }));
               break;
          default:
      }
      msg.splice(0, 1);
      if (msg.length > 0) {
         var newMessage = msg[0];
         if (newMessage.type == 0) {
              that.chat.renderMessage({ type: "bottyping", botname: "MyBot", timestamp: that._timestamp }, that.userInfo);
              setTimeout(renderWithDelay, newMessage.speech.length * 12);
         }
         else
            renderWithDelay();
      }
   }
   renderWithDelay();
}

[Bozhidar]

Hello,

Glad to hear you are enjoying the new Chat widget. I've made some modifications to the sample, in order to fix some issues. Here's a dojo of the revised scenario:
https://dojo.telerik.com/ujavijuv/2

The two major changes are:
- the timeout logic is moved to the onResponse handler, in order to render the Suggested actions and attachments after the last message.
- the built-in typing template is used, for simplicity.

Hope this is helpful.

Regards,
Bozhidar
Progress Telerik