How to perform Send 'Typing indicator in Botframework v4 chat application using React.js?

Viewed 938

I'm building a chat application using botframework v4 with React.js as front-end and .net core as back-end to generate token. I want to implement "Typing.." indicator to my chat using react. Tried using

  window.WebChat.renderWebChat({
  directLine: window.WebChat.createDirectLine({ token }),

  sendTypingIndicator: true,

  }, document.getElementById('webchat'));

as mentioned in https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.custom-components/b.send-typing-indicator but it didn't worked. Looking for a solution for this.

1 Answers

By enabling sendTypingIndicator you are sending typing events from the user to your bot. It looks like you would like to do it the other way around.

By sending an activity of the type ActivityTypes.Typing (typing), you will trigger a typing indicator in the WebChat (or other supported channels). The delay activity is optional, but could be used to make sure the message isn't send instantly.

await turnContext.SendActivitiesAsync(
            new Activity[] {
                new Activity { Type = ActivityTypes.Typing },
                new Activity { Type = "delay", Value= 3000 },
                MessageFactory.Text("Finished typing", "Finished typing"),
            },
            cancellationToken);

Source: send a typing indicator

Related