Giter Site home page Giter Site logo

Comments (12)

stevkan avatar stevkan commented on June 12, 2024 2

@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.

disableOAuthPromptACButton

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.

from botbuilder-js.

HesselWellema avatar HesselWellema commented on June 12, 2024 1

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

from botbuilder-js.

stevkan avatar stevkan commented on June 12, 2024 1

@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!

from botbuilder-js.

HesselWellema avatar HesselWellema commented on June 12, 2024 1

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.

from botbuilder-js.

InfinytRam avatar InfinytRam commented on June 12, 2024

@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.

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;
}

from botbuilder-js.

HesselWellema avatar HesselWellema commented on June 12, 2024

Using Directline.

from botbuilder-js.

InfinytRam avatar InfinytRam commented on June 12, 2024

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)

from botbuilder-js.

HesselWellema avatar HesselWellema commented on June 12, 2024

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

from botbuilder-js.

stevkan avatar stevkan commented on June 12, 2024

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

from botbuilder-js.

HesselWellema avatar HesselWellema commented on June 12, 2024

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?

from botbuilder-js.

stevkan avatar stevkan commented on June 12, 2024

@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?

from botbuilder-js.

HesselWellema avatar HesselWellema commented on June 12, 2024

@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.

from botbuilder-js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.