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

Question

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.

No. its not what i'm looking for. Btw, what about the solution to the other question? — Thomas Martin
You will get better answers faster if you put effort into asking better questions and especially if you show appreciation for the answers you do get — Kyle Delaney
Ofcourse I do accept answers. But if its not an answer to my question how can i accept that. Anyway leave it. Just wanted to know about the solution that you are building for my other question. Any updates? — Thomas Martin
If you don't explain how it's not an answer to your question then how can people help you further? For example, if Mick's answer doesn't work for you because the typing indicator doesn't appear quickly enough then you could say you're looking for a solution that makes the typing indicator appear faster, but in situations when that's significantly different from the question you originally asked then it's good etiquette to still accept an answer that answers the question as you asked it. This is relevant to your other question because it applies to all questions you expect to get an answer to. — Kyle Delaney

Mick Mick · Accepted Answer · 2020-02-25T12:37:34

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

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

1 Answers