The typing animation is working?

joaquin03 commented 5 years ago

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

https://github.com/botman/botman/issues/939 - same problem

lakinmohapatra commented 5 years ago

Any updates ?

emresaracoglu commented 5 years ago

@lakinmohapatra No.

alokpaidalwar commented 5 years ago

any update?

rohankhudedev commented 5 years ago

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.

chrome-capture

ranrinc commented 5 years ago

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

danlopez00 commented 4 years ago

This will be coming in an upcoming release

kevinp1005 commented 4 years ago

Is it working now?

rohankhudedev commented 4 years ago

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

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

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

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

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 gif

I'm using the 2.0 version

nfsecurity commented 1 year ago

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 commented 1 year ago

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 commented 7 months ago

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 commented 2 months ago

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

botman / web-widget

The typing animation is working? #20