Add Delays in Microsoft Teams Bot Messages


How to Add a Delay While Sending a Message in a Microsoft Teams Bot

Building a Microsoft Teams bot can be an exciting way to interact with users in real-time, providing them with messages, prompts, and updates. One common requirement is to delay certain actions, such as sending or updating a message after a certain period. In this post, I'll guide you through how to add a delay in your Microsoft Teams bot using Node.js and the Bot Framework.


Why Add a Delay?

Adding a delay can be useful in many scenarios, such as:

  • Giving users time to read the initial message before sending another update.
  • Automatically hiding sensitive information or links after a short period.
  • Adding a natural flow to the conversation, mimicking a more human-like interaction.


Basic Setup: Microsoft Teams Bot

First, let’s look at the basic structure of a Microsoft Teams bot using the Bot Framework and Node.js.


const { TeamsActivityHandler, CardFactory } = require("botbuilder");

class TeamsBot extends TeamsActivityHandler {

  constructor() {

    super();

    // Triggered when a conversation update happens (e.g., user joins a team)

    this.onConversationUpdate(async (context, next) => {

      const membersAdded = context.activity.membersAdded;

      for (let i = 0; i < membersAdded.length; i++) {

        const member = membersAdded[i];

        if (member.id === context.activity.recipient.id) {

          const conversationId = context.activity.conversation.id;

          // Create the initial adaptive card

          const welcomeCard = CardFactory.adaptiveCard({

            type: "AdaptiveCard",

            body: [

              {

                type: "TextBlock",

                text: "Welcome to the conversation!",

                weight: "Bolder",

                size: "Large",

              },

              {

                type: "TextBlock",

                text: `Conversation ID: ${conversationId}`,

              },

            ],

            $schema: "http://adaptivecards.io/schemas/adaptive-card",

            version: "1.4",

          });

          // Send the initial adaptive card message

          const message = await context.sendActivity({ attachments: [welcomeCard] });

          const activityId = message.id; // Store the message ID for future updates

          // Introduce a delay before updating the message

          await this.delay(5000); // 5-second delay

          await this.updateMessage(context, activityId);

        }

      }

      await next();

    });

  }

  // Function to create a delay

  delay(ms) {

    return new Promise(resolve => setTimeout(resolve, ms));

  }

  // Function to update the message after the delay

  async updateMessage(context, activityId) {

    try {

      const updatedCard = CardFactory.adaptiveCard({

        type: "AdaptiveCard",

        body: [

          {

            type: "TextBlock",

            text: "This message has been updated after a delay!",

            weight: "Bolder",

            size: "Large",

          },

        ],

        $schema: "http://adaptivecards.io/schemas/adaptive-card",

        version: "1.4",

      });

      // Update the activity with the new card

      await context.updateActivity({

        id: activityId,

        type: 'message',

        attachments: [updatedCard],

      });

    } catch (error) {

      console.error("Error updating activity:", error.message);

    }

  }

}

module.exports.TeamsBot = TeamsBot;


Key Steps

  1. Create a Delay Function: We use the setTimeout function wrapped in a Promise to simulate a delay. This allows us to await the delay, ensuring that the rest of the code doesn’t run until the specified time has passed.

    delay(ms) {

      return new Promise(resolve => setTimeout(resolve, ms));

    }

  1. Delay in Action: In the onConversationUpdate event, after sending the initial message, we call this.delay(5000) to introduce a 5-second delay. Only after this delay is the updateMessage function called to modify the original message.

  2. Updating the Message: Once the delay completes, the updateMessage method updates the original message using context.updateActivity, replacing the content with an updated version.


Scenarios Where This is Useful

  • Temporarily Display Sensitive Information: If you're sharing a URL, password, or sensitive data, you might want to display it temporarily and then remove it automatically.

  • Natural Flow in Conversations: Simulating human-like delays makes bot interactions more conversational, improving the user experience.

  • Timed Notifications: You can notify users about updates or changes after a specified period without needing them to manually trigger the update.



Final Thoughts

Adding a delay to a Microsoft Teams bot is not only possible but also opens up a world of possibilities for creating more dynamic and user-friendly interactions. With the setTimeout function wrapped in a Promise, you can precisely control when updates or new messages appear, giving your bot a more human-like touch.

Feel free to experiment with different timings and scenarios where delayed updates might be useful. This approach can make your bot much more engaging and useful in real-world applications!

 

Comments