Fix Adaptive Card flickering for `updateActivity` in "team" scope

Question

I am using the JS Bot Framework SDK to build a Teams chatbot that responds to user queries in a "streamed" manner. In other words, I send an Adaptive Card using the sendActivity API and then make a streaming call to a 3rd party API which responds to my request in chunks. As chunks arrive, I call the updateActivity API using the initial activity's ID to update the card content.

This is currently working great in the "personal" scope (i.e. DMing the bot), however when I invoke the bot in a teams conversation, each updateActivity call causes the entire Adaptive Card to re-render which creates an undesirable UX due to the constant flickering/flashing.

Is there a way I can solve for the flickering behavior when calling updateActivity for an Adaptive Card in a teams conversation?

Relevant Versions:

• botbuilder: 4.20.0
• @microsoft/adaptivecards-tools: 1.3.2
• Adaptive Card: 1.4
• Microsoft Teams: 1.6.00.22155
• NodeJS: v18.16.0

Answer 1

@Omar Abdelkader - To solve the flickering behavior when calling updateActivity for an Adaptive Card in a Teams conversation, you can make use of the attachments property of the activity object. Instead of updating the entire Adaptive Card, you can update only the specific part of the card that needs to be changed.

Here's an example code snippet that demonstrates how to update a specific part of an Adaptive Card:

using Microsoft.Bot.Builder;
using Microsoft.Bot.Schema;
using Newtonsoft.Json.Linq;

// Create an Adaptive Card instance
var adaptiveCard = new AdaptiveCard();
adaptiveCard.Body.Add(new AdaptiveTextBlock { Text = "Hello, World!" });

// Create an Attachment with the Adaptive Card
var attachment = new Attachment
{
    ContentType = AdaptiveCard.ContentType,
    Content = JObject.FromObject(adaptiveCard),
};

// Create a new Activity with the Attachment
var activity = new Activity
{
    Type = ActivityTypes.Message,
    Attachments = new List<Attachment> { attachment },
};

// Set the Activity ID to the ID of the original message
activity.Id = "<original message ID>";

// Set the Conversation ID and Channel ID
activity.Conversation = new ConversationAccount { Id = "<conversation ID>" };
activity.ChannelId = "<channel ID>";

// Update the specific part of the Adaptive Card
var updatedCard = new AdaptiveCard();
updatedCard.Body.Add(new AdaptiveTextBlock { Text = "Hello, Teams!" });

// Create an Attachment with the updated Adaptive Card
var updatedAttachment = new Attachment
{
    ContentType = AdaptiveCard.ContentType,
    Content = JObject.FromObject(updatedCard),
};

// Create a new Activity with the updated Attachment
var updatedActivity = new Activity
{
    Type = ActivityTypes.MessageUpdate,
    Id = activity.Id,
    Attachments = new List<Attachment> { updatedAttachment },
};

// Send the updated Activity to the conversation
await turnContext.UpdateActivityAsync(updatedActivity);

Ref Doc: https://learn.microsoft.com/en-us/microsoftteams/platform/bots/how-to/update-and-delete-bot-messages?tabs=dotnet#update-cards

Thanks,

Nivedipa

---

If the response is helpful, please click "Accept Answer" and upvote it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.

Answer 2

@Omar Abdelkader - We have tested this in teams both web and desktop verstion 1.6.00.32808. We didnt find any issue regarding flickering.Here is the video reference attaching ( flickeringMed.gif ) .We just run a simple bot conversation sample in nodejs sample. This sample is recently updated kindly go through it