Bot typing enhancement

4 posts, 0 answers
  1. Oscar
    Oscar avatar
    185 posts
    Member since:
    Oct 2010

    Posted 23 May Link to this post

    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!

  2. Oscar
    Oscar avatar
    185 posts
    Member since:
    Oct 2010

    Posted 23 May in reply to Oscar Link to this post

    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(...

  3. Oscar
    Oscar avatar
    185 posts
    Member since:
    Oct 2010

    Posted 23 May Link to this post

    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();
    }
  4. Bozhidar
    Admin
    Bozhidar avatar
    1176 posts

    Posted 25 May Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top