The typing animation is working?

[joaquin03]

Hi!
I saw there is a Typing file with the 3 dots, and the css is there.

I wonder if i can pretend that the bot is typing, i try with $bot->typesAndWaits(2), but only waits for 2 seconds, the animation is not display

I don't now if im doing something wrong or is not working for this case.

Thanks!

[emresaracoglu]

botman/botman#939 - same problem

[lakinmohapatra]

Any updates ?

[emresaracoglu]

@lakinmohapatra No.

[alokpaidalwar]

any update?

[rohankhudedev]

I wrote jquery to do this.

Use this in chat.blade.php

setInterval(function () {
        // check if last message is by visitor. If yes, show indicator
        if($( "ol.chat li:last-child" ).attr('class') ==='visitor')
        {
            $( "ol.chat" ).append('<li class="indicator"><div class="loading-dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div></li>');
        }
        else
        {
            // if last message is by bot and indicator is shown, then remove indicator from conversation
            if($( "ol.chat li:last-child" ).attr('class') ==='indicator' && $("ol.chat li:nth-last-child(2)").attr('class') ==='chatbot')
                $("ol.chat li .loading-dots").parent().remove();
        }
    }, 10);

Logic behind this code I thought as

• Whatever user types in, expects respond from bot after that, right? So every message user types we have to show indicator after that.
• class .visitor is used for message which user types in and class .chatbot is used for bot messages which is already in-built.
• So every interval I will check that, from whom last message has been triggered. If it is visitor, then show type indicator till bot responds.
• Once bot replies, now last message is of bot, so remove type indicator from conversation.

Hope it helps you.

[ranrinc]

@rohankhudedev is there a guide on how to implement your code? Thanks

[danlopez00]

This will be coming in an upcoming release

[kevinp1005]

Is it working now?

[rohankhudedev]

I havent checked that it is available in latest release. If not working, you can try the jquery code which i have given above.

[codeplough]

I wrote jquery to do this.

Use this in chat.blade.php

setInterval(function () {
        // check if last message is by visitor. If yes, show indicator
        if($( "ol.chat li:last-child" ).attr('class') ==='visitor')
        {
            $( "ol.chat" ).append('<li class="indicator"><div class="loading-dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div></li>');
        }
        else
        {
            // if last message is by bot and indicator is shown, then remove indicator from conversation
            if($( "ol.chat li:last-child" ).attr('class') ==='indicator' && $("ol.chat li:nth-last-child(2)").attr('class') ==='chatbot')
                $("ol.chat li .loading-dots").parent().remove();
        }
    }, 10);

Logic behind this code I thought as

• Whatever user types in, expects respond from bot after that, right? So every message user types we have to show indicator after that.
• class .visitor is used for message which user types in and class .chatbot is used for bot messages which is already in-built.
• So every interval I will check that, from whom last message has been triggered. If it is visitor, then show type indicator till bot responds.
• Once bot replies, now last message is of bot, so remove type indicator from conversation.

Hope it helps you.

Here is a version without needing jquery

setInterval(function () {
    var msg = document.querySelector('ol.chat li:last-child');
    if(msg) {
        if(msg.className  === 'visitor') {

            var node_li = document.createElement('li');
            node_li.className = 'indicator';

            var node_div = document.createElement('div');
            node_div.className = 'loading-dots';

            var node_span1 = document.createElement('span');
            var node_span2 = document.createElement('span');
            var node_span3 = document.createElement('span');
            node_span1.className = 'dot';
            node_span2.className = 'dot';
            node_span3.className = 'dot';

            node_div.appendChild(node_span1);
            node_div.appendChild(node_span2);
            node_div.appendChild(node_span3);
            node_li.appendChild(node_div);

            document.querySelector('ol.chat').appendChild(node_li);

        } else {
            var isbot = document.querySelector('ol.chat li:nth-last-child(2)');
            if(msg.className  === 'indicator' && isbot.className === 'chatbot') {
                document.querySelector('ol.chat li .loading-dots').parentNode.remove();
            }

        }

    }
}, 10);

[mathus1]

Thanks for the code
I added a chunk of code that work for buttons as well. When a button is clicked, the typing animation pops out.

  setInterval(function () {
      // when button is clicked, change class to visitor
      $( ".btn" ).click(function(){
        $( "ol.chat li.chatbot:last-child" ).has( "div div.btn" ).removeClass("chatbot").addClass("visitor");
      });

        // check if last message is by visitor. If yes, show indicator
        if($( "ol.chat li:last-child" ).attr('class') ==='visitor')
        {
            $( "ol.chat" ).append('<li class="indicator"><div class="loading-dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div></li>');
        }

        else
        {
            // if last message is by bot and indicator is shown, then remove indicator from conversation
            if($( "ol.chat li:last-child" ).attr('class') ==='indicator' && $("ol.chat li:nth-last-child(2)").attr('class') ==='chatbot'){
                $("ol.chat li .loading-dots").parent().remove();
              }

        }
    }, 10); ```

[rvi2021]

Thanks for the code
I added a chunk of code that work for buttons as well. When a button is clicked, the typing animation pops out.

  setInterval(function () {
      // when button is clicked, change class to visitor
      $( ".btn" ).click(function(){
        $( "ol.chat li.chatbot:last-child" ).has( "div div.btn" ).removeClass("chatbot").addClass("visitor");
      });

        // check if last message is by visitor. If yes, show indicator
        if($( "ol.chat li:last-child" ).attr('class') ==='visitor')
        {
            $( "ol.chat" ).append('<li class="indicator"><div class="loading-dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div></li>');
        }

        else
        {
            // if last message is by bot and indicator is shown, then remove indicator from conversation
            if($( "ol.chat li:last-child" ).attr('class') ==='indicator' && $("ol.chat li:nth-last-child(2)").attr('class') ==='chatbot'){
                $("ol.chat li .loading-dots").parent().remove();
              }

        }
    }, 10); ```

This code does not seem to work for me for buttons. I do not get any typing indicator when the user clicks a button. Any thoughts on how this could be implemented.

[mathus1]

This code does not seem to work for me for buttons. I do not get any typing indicator when the user clicks a button. Any thoughts on how this could be implemented.

It worked well for me

I'm using the 2.0 version

[nfsecurity]

I made a little modification to this script in order to set automatic scroll-down in the message area just after the dot animation (the original script fails to do that if the animation is located at the bottom of the message area). I did this change in my chat.html (framePoint) instead of chat.blade.php:

<!doctype html> 
<html>     
    <head>         
        <title>BotMan Widget</title>         
        <meta charset="UTF-8">
        <script type="text/javascript" src="jquery.min.js"></script>         
        <link rel="stylesheet" type="text/css" href="chat.css"> 
        <script>

            setInterval(function () 
            {        
                if($( "ol.chat li:last-child" ).attr('class') ==='visitor')
                {
                    $( "ol.chat" ).append('<li class="indicator"><div class="loading-dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div></li>');
                    $("#messageArea").scrollTop($(document).height());
                }
                else
                {              
                    if($( "ol.chat li:last-child" ).attr('class') ==='indicator' && $("ol.chat li:nth-last-child(2)").attr('class') ==='chatbot') $("ol.chat li .loading-dots").parent().remove();
                }
            }, 10);
        
        </script>
    </head>     
    <body>         
        <script id="botmanWidget" src='chat.js'></script>     
    </body> 
</html>

Hope that helps someone!

[alvaro-gamboa-osanasalud]

Hi!!
I found the solution, maybe

use BotMan\BotMan\BotMan;
use BotMan\BotMan\Interfaces\Middleware\Received;
use BotMan\BotMan\Messages\Incoming\IncomingMessage;

class CustomReceivedMiddleware implements Received
{
/**
* Handle an incoming message.
*
* @param IncomingMessage $message
* @param callable $next
* @param BotMan $bot
*
* @return mixed
*/
public function received(IncomingMessage $message, $next, BotMan $bot)
{
$bot->typesAndWaits(1);// HEREEEEEE
return $next($message);
}
}

[Sidvp]

This code does not seem to work for me for buttons. I do not get any typing indicator when the user clicks a button. Any thoughts on how this could be implemented.

It worked well for me

I'm using the 2.0 version

Hi..

Could u pls share the entire project folder??

It would be great help..

Thanks

Siddhi

[EranGrin]

I created a new package that solves this and several other issues
https://www.npmjs.com/package/botman-extended-web-widget