replyToId not part of token response of oauthprompt

[HesselWellema]

Github issues should be used for bugs and feature requests. Use Stack Overflow for general "how-to" questions.

Versions

   "botbuilder": "^4.21.0",
   "botbuilder-dialogs": "^4.21.0",

Describe the bug

I implemented this sample in my NodeJS bot. The authentication works is expected. To optimize the userexperience I would like to replace the login button with something else or delete it. Just to show the user he was succesful in his task and make sure he or she does not click the button again (resulting in a confusing error message)

TO be able to do that, I need a replyToId and update or delete the card. For instance like this:

await context.deleteActivity(context.activity.replyToId);

or

const finalCard = CardFactory.adaptiveCard(FinalCard);
finalCard.id = context.activity.replyToId;
const finalMsg = MessageFactory.attachment(finalCard);
finalMsg.id = context.activity.replyToId;
await context.updateActivity(finalMsg);

To Reproduce

Install the sample I mentioned
After if (tokenResponse) {In maindialog.js add
console.log(JSON.stringify(stepContext.context.activity));
You will notice that there is not repyToId field under activity

Expected behavior

A replyToActivity value to use

[ramfattah]

@HesselWellema,

Which channel are you using?

"A2092" mentions to allow bots to leave out replyToId for messages if the channel (ex: WebChat or DirectLine) doesn't use it.

botbuilder-js/libraries/botbuilder-core/src/turnContext.ts

Lines 125 to 134 in 8a30768

	function getAppropriateReplyToId(source: Partial<Activity>): string | undefined {
	if (
	source.type !== ActivityTypes.ConversationUpdate ||
	(source.channelId !== Channels.Directline && source.channelId !== Channels.Webchat)
	) {
	return source.id;
	}
	return undefined;
	}

[HesselWellema]

Using Directline.

[ramfattah]

I think this is by design.

In DirectLine/WebChat, message updates/deletions aren't supported. This is a channel-specific limitation.
microsoft/BotFramework-WebChat#3639 (comment)

This functionality is more common in other platforms like Microsoft Teams.

If you decide to try in Teams channel, just a heads that Adaptive Cards also do not include a replyToId in the activity.
#3159 (comment)

[HesselWellema]

I see what you mean. Thanks for taking time. I will post on SO and ask for alternative ways to get what I need. Will probably have to solve it in the web-chat code. @stevkan always has good ideas in matters like these

[stevkan]

@HesselWellema - Checked SO and didn't see a post from you (that I noticed) so thought I'd just respond to you here since the conversation is already going and I have a potential answer.

So, it looks like, from your comment above, that the client you are using is Web Chat. That is actually to your benefit in this situation. The OAuth prompt that is rendered in Web Chat uses (or is transformed into) an adaptive card. Because of this, you can use the method demonstrated in the 05.custom-components/l.disable-adaptive-cards sample of the BotFramework-WebChat repo to disable previously clicked on adaptive cards!

You'll notice that there isn't a readme.md file like in the other samples (there really should be), but the code is pretty self-explanatory. To be clear, out-of-the-box this code will disable all previously rendered and clicked on adaptive cards. If you don't mind the digital elbow grease, you could probably further isolate the OAuth prompt. But I'll leave that up to you.

Another option, albeit a less practical one, is you could update the text of the card. This could be done in conjunction with the first option or by itself. This wouldn't be relying on updateActivity or deleteActivity but instead monitoring for the OAuth prompt's containing activity as it is received by Web Chat. When the activity is received, but not fully rendered yet, we do a quick update to the adaptive card's button's text. This method does work and is sometimes necessary, but it's not perfectly clean and it also relies on making changes directly in the UI which isn't a best practice. Additionally, as the underlying code of Web Chat is subject to change in future releases, it could pose a breaking change in your deployment if some relied upon class, etc., in the rendered HTML should change.

Again, this is doable, but the first option is the better option. I implemented this for testing purposes a couple years ago in an instance of Web Chat I still use and I think I had to update the path to the button's text once when an update changed some of the parent element's class names. It's also worth noting that if the page hosting Web Chat is refreshed or reloaded and you are persisting the conversation, the updated text will be lost as it was in response to an activity previously received.

If this second option is of interest, let me know and I can demonstrate how to do this. It's also entirely possible I already demonstrated this on SO in response to someone's posted question, so you may want to check there, first.

[HesselWellema]

Tx for reachting out @stevkan. Appreciate it.
Actually I did find this sample and made a first attempt today to implement it. Was just trying to figure out a way to get these:

Components: {
AdaptiveCardContent,
AnimationCardContent,
AudioCardContent,
HeroCardContent,
OAuthCardContent,
ReceiptCardContent,
SignInCardContent,
ThumbnailCardContent,
VideoCardContent
},
In my react web-chat project. Not sure how to import or require them. The other parts seam pretty straightforward

[stevkan]

@HesselWellema - Let take a peek at my test react web chat project and I'll get back to you shortly.

[stevkan]

@HesselWellema - You should be able to import Components like below. From there, deconstruct the Components object to access the individual component objects:

import ReactWebChat, { Components } from 'botframework-webchat';
const { AdaptiveCardContent, AnimationCardContent, etc., etc.} from Components;

Hope of help!

[HesselWellema]

tx. I ended up doint it like this:
import ReactWebChat, { Components, createDirectLine } from 'botframework-webchat';
const OAuthCardContent = Components.OAuthCardContent;

I can now do with the oAuth card whatever I want. Great.

However: After authentication, webchat gives a console warning: queueIncomingActivitySaga.js:73 botframework-webchat: Timed out while waiting for activity "4ff2fa83-0b93-4d24-8bc1-4553aeff9a53" which activity "DHbNq7XfNhmAlnAaT5n2wj-eu|0000003" is replying to.
The warning is allways on the first activity send from the bot to the webchat after authentication succeeds.
I will try and reproduce with a minimal set of samples (to eliminate the option that it relates to my own code) and create a bugreport.

[HesselWellema]

Cycling back to you @rampaged. According to the webchat team, they need the replytoId for the oAuthcard implemtation. As a result of the missing id, there is a wait for approx 4 seconds and an error in the console. This problem is reproducable with sample bot. It this something you guys can address?

[stevkan]

@HesselWellema - Were you ever able to get this working for you? In repro'ing, I am not encountering the queueIncomingActivitySaga issue you are experiencing. To be clear, I have OAuth setup and am using the method I described above for disabling adaptive card buttons on cards that previously rendered. Are you in a position to share your code or a minimum reproducible version so that I may compare your implementation against mine?

[HesselWellema]

@stevkan , tx for cycling back. I spent a lot of time trying to solve this and eventually moved away from authentication via the oAuth prompt. Decided to implement authentication outside the webchat. In hindsight, a better approach for this usecase.