ShowTypingMiddleware not working in Microsoft Teams

[NWH-SAmin5]

Versions

"botbuilder": "^4.18.0",
node v18.17.1
Microsoft Edge
Windows Server

Issue

Typing indicator is not appearing after adding ShowTypingMiddleware middleware

To Reproduce

Steps to reproduce the behavior:

1. Use Team Toolkit v5* to create Teams Command bot project

2. Inside src/internal/initialize.ts add ShowTypingMiddleware middleware
   commandApp.adapter.use(new ShowTypingMiddleware());

3. F5 / Start Debug (This will launch Microsoft Teams web app in Microsoft Edge browser and load the bot for debug)

4. Type something

5. Typing indicator does not appear

Expected behavior

Typing indicator should appear until bot processes the command and send a response.

Additional context

import { BotBuilderCloudAdapter } from "@microsoft/teamsfx";
import ConversationBot = BotBuilderCloudAdapter.ConversationBot;
import config from "./config";
import { HelpCmd } from "../commands/help/HelpCmd";
import { ShowTypingMiddleware } from "botbuilder";

// Create the command bot and register the command handlers for your app.
// You can also use the commandApp.command.registerCommands to register other commands
// if you don't want to register all of them in the constructor
export const commandApp = new ConversationBot({
  // The bot id and password to create CloudAdapter.
  // See https://aka.ms/about-bot-adapter to learn more about adapters.
  adapterConfig: {
    MicrosoftAppId: config.botId,
    MicrosoftAppPassword: config.botPassword,
    MicrosoftAppType: "MultiTenant",
  },
  // See https://docs.microsoft.com/microsoftteams/platform/toolkit/teamsfx-sdk to learn more about ssoConfig
  ssoConfig: {
    aad: {
      scopes: ["User.Read"],
      initiateLoginEndpoint: `https://${config.botDomain}/auth-start.html`,
      authorityHost: config.authorityHost,
      clientId: config.clientId,
      tenantId: config.tenantId,
      clientSecret: config.clientSecret,
    },
  },
  command: {
    enabled: true,
    commands: [
      new HelpCmd()
    ],
  },
});

commandApp.adapter.use(new ShowTypingMiddleware());

ShowTypingMiddleware class.
BotAdapter class (use)
Teams toolkit doc for customizing adapter at initialization

[InfinytRam]

Thanks @NWH-SAmin5, I'm investigating this issue.

[InfinytRam]

Hi @NWH-SAmin5,

I'm not able to reproduce this issue using minimal Bot Framework JavaScript SDK that's isolated from TeamsFX.

The ShowTypingMiddleware sends a typing indicator at regular intervals until a response is sent. If your bot responds very quickly, the typing indicator might appear only briefly, making it almost invisible.

You could try adding a small delay in your bot's response to see if the "typing..." message appears for a bit longer.

        this.onMessage(async (context, next) => {
            // send a typing activity
            await context.sendActivity({ type: ActivityTypes.Typing });

            // Introduce a delay to make the "typing..." activity more noticable
            await new Promise(resolve => setTimeout(resolve, 2000));

            // your actual message logic here
            var userMessage = context.activity.text;
            const echo = `you said: ${userMessage}`;
            await context.sendActivity(echo);

            await next();
        });

js-typingActivity.mov

[InfinytRam]

Closing as this issue is not reproducible using standalone JS SDK.

@NWH-SAmin5, please open an issue in TeamsFX repository for a more targeted resolution:
https://github.com/OfficeDev/TeamsFx

[NWH-SAmin5]

Currently I am able get the typing indicator same as you have suggested in your sample code.

// send a typing activity
await context.sendActivity({ type: ActivityTypes.Typing });

But intention for implementing ShowTypingMiddleware middleware is to show typing indicator for all the responses. I agree I should try to open this request for TeamsFx. Thank you for looking into this, really appreciate.