How do i handle Action.Submit, after user clicks, in code (TeamsToolkit C# Bot) - microsoft-teams

I started with Hello World Bot(ICommandHandler), I modified it
Now I try to process the response from the adaptive card
Already checked it out https://learn.microsoft.com/en-us/microsoftteams/platform/bots/bot-basics?tabs=csharp
I still can't understand - Where I am supposed to catch the submit action?
Adaptive Card

Since you mentioned you used Teams Toolkit C#, I assume you are using Teams Toolkit for Visual Studio.
Current Teams Toolkit and its SDK do not have built-in support for Adaptive Cards action handling. So you need to directly use Bot Framework SDK to write your own ActivityHandler to handle the card actions.
public class TeamsBot : ActivityHandler
{
protected override async Task<InvokeResponse> OnInvokeActivityAsync(ITurnContext<IInvokeActivity> turnContext, CancellationToken cancellationToken)
{
// Handle card action
if (turnContext.Activity.Name == "adaptiveCard/action")
{
// Handle your action response
var cardJson = await File.ReadAllTextAsync("Resources/ActionResponseCard.json", cancellationToken).ConfigureAwait(false);
var response = JObject.Parse(cardJson);
var adaptiveCardResponse = new AdaptiveCardInvokeResponse()
{
StatusCode = 200,
Type = "application/vnd.microsoft.card.adaptive",
Value = response
};
return CreateInvokeResponse(adaptiveCardResponse);
}
return CreateInvokeResponse(null);
}
}
You also need to use Action.Execute instead of Action.Submit which is the newer Universal Actions for Adaptive Cards. It is a unified action model across platforms.
Also see this GitHub issue to learn more.
You can checkout this more complete example in teams samples repo.

Related

Oauth card doesn't return token when sign-in invoke activity is triggered from mobile device

I have implemented an OAuth sign in flow for my teams bot using Microsoft AAD v2 and the OAuthPrompt dialog with the help of this guide.
My dialog definition is as followed:
AddDialog(new OAuthPrompt(
nameof(OAuthPrompt),
new OAuthPromptSettings
{
ConnectionName = configuration["ConnectionName"],
Text = "Please Sign In",
Title = "Sign In",
Timeout = 300000,
EndOnInvalidMessage = true
}));
and I initiate it as the first step of my root dialog
private async Task<DialogTurnResult> LoginPromptAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken)
{
return await stepContext.BeginDialogAsync(nameof(OAuthPrompt), null, cancellationToken);
}
I'm also passing the invoke activity using the OnTeamsSigninVerifyStateAsync function
protected override async Task OnTeamsSigninVerifyStateAsync(ITurnContext<IInvokeActivity> turnContext, CancellationToken cancellationToken)
{
await Dialog.RunAsync(turnContext, ConversationState.CreateProperty<DialogState>(nameof(DialogState)), cancellationToken);
}
It is working fine on the desktop client, but while trying to sign in from my mobile device, the bot receives the response without the token.
The authentication flow is almost similar to the one implemented in this sample
I tried adding 'login.microsoftonline.com' as well as 'token.botframework.com' to validDomains property in the manifest to no avail.
I also added
devicePermissions": [ "openExternal" ]
to the manifest, again to no avail.
I also tried debugging the bot locally and found that the sign in invoke activity from a mobile device results in the following 404 error
UPDATE: I found that the sample (from which I picked up the authentication flow) also fails to login through mobile, I'm unable to figure out whether the problem is something from my side or from the sample code being outdated.
It'd be super helpful if somebody could clone the sample and see if results are the same.

Is it possible to scope a Teams Messaging Extension?

I developed a messaging extension for Teams. I want it to only be available for the teams i specifically install the app to. Is that possible and how? I can't find any info on this, but my use-case does not seem to be far-fetched, so i would expect it to be possible.
use-case: Members of a team use an external system to register cases. I want them to be able to search and reference cases within the teams corresponding project site in the external system. I add a tab to the general channel that refers to the project site, and the messaging extension uses the contentUrl of that tab to query the right case list. I don't want the extension to be available outside the teams channels. By default it seems that the extension is available in every chat input option.
Message extensions do no have a scope defined and they are available once you install it in teams. Currently, it is no possible to restrict to show the message extension in one team
I ended up responding with a card that handles the error:
private MessagingExtensionResponse errorResponse(string title, string errorText)
{
MessagingExtensionResult composeExtensionResult = new MessagingExtensionResult
{
Type = "result",
AttachmentLayout = "list",
Attachments = new List<MessagingExtensionAttachment>(),
};
ThumbnailCard h = new ThumbnailCard()
{
Title = title,
Text = errorText,
};
composeExtensionResult.Attachments.Add(h.ToAttachment().ToMessagingExtensionAttachment());
var messagingExtensionResponse = new MessagingExtensionResponse();
messagingExtensionResponse.ComposeExtension = composeExtensionResult;
return messagingExtensionResponse;
}
Although it would be nice to be able to scope the extension, this way i can catch some more invalid usage. For example:
var currentTeam = new TeamDetails();
IList<ChannelInfo> currentTeamChannels = new List<ChannelInfo>();
try
{
currentTeam = await TeamsInfo.GetTeamDetailsAsync(turnContext, turnContext.Activity.TeamsGetTeamInfo().Id, cancellationToken);
currentTeamChannels = await TeamsInfo.GetTeamChannelsAsync(turnContext, turnContext.Activity.TeamsGetTeamInfo().Id, cancellationToken);
}
catch
{
return errorResponse("Permission error", "This app has no permissions to this team / channel. Please add the app to this team / channel.");
}
Got the suggestion from this question: Is it possible for a teams messaging extension to return a plaintext response instead of a card?

Calling my .NET Core Teams Bot from Angular

I have created a Teams bot in .NET Core from following the sample found here: https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/57.teams-conversation-bot
This is working and is running locally with ngrok. I have a controller with a route of api/messages:
[Route("api/messages")]
[ApiController]
public class BotController : ControllerBase
{
private readonly IBotFrameworkHttpAdapter Adapter;
private readonly IBot Bot;
public BotController(IBotFrameworkHttpAdapter adapter, IBot bot)
{
Adapter = adapter;
Bot = bot;
}
[HttpPost]
public async Task PostAsync()
{
// Delegate the processing of the HTTP POST to the adapter.
// The adapter will invoke the bot.
await Adapter.ProcessAsync(Request, Response, Bot);
}
}
I now want to call a POST to api/messages from my Angular client using TypeScript to send a proactive message to a specific Teams user.
I did figure out how to set the ConversationParameters in TeamsConversationBot.cs to a specific Teams user by doing the following:
var conversationParameters = new ConversationParameters
{
IsGroup = false,
Bot = turnContext.Activity.Recipient,
Members = new[] { new ChannelAccount("[insert unique Teams user guid here]") },
TenantId = turnContext.Activity.Conversation.TenantId,
};
but what I'm struggling with is how to build a JSON request that sends the Teams user guid (and maybe a couple other details) to my api/messages route from TypeScript.
How do I go about doing this? What parameters/body do I need to send? I haven't been able to find samples online that show how to do this.
Update below for added clarification
I am building a web chat app using Angular for our customers. What I'm trying to do is send a proactive message to our internal employees, who are using Microsoft Teams, when a customer performs some action via the chat app (initiates a conversation, sends a message, etc.).
I've built a Teams bot using .NET Core using this sample: https://kutt.it/ZCftjJ. Modifiying that sample, I can hardcode my Teams user ID and the proactive message is showing up successfully in Teams:
var proactiveMessage = MessageFactory.Text($"This is a proactive message.");
var conversationParameters = new ConversationParameters
{
IsGroup = false,
Bot = turnContext.Activity.Recipient,
Members = new[] { new ChannelAccount("insert Teams ID here") },
TenantId = turnContext.Activity.Conversation.TenantId,
};
await ((BotFrameworkAdapter)turnContext.Adapter).CreateConversationAsync(teamsChannelId, serviceUrl, credentials, conversationParameters,
async (t1, c1) =>
{
conversationReference = t1.Activity.GetConversationReference();
await ((BotFrameworkAdapter)turnContext.Adapter).ContinueConversationAsync(_appId, conversationReference,
async (t2, c2) =>
{
await t2.SendActivityAsync(proactiveMessage, c2);
},
cancellationToken);
},
cancellationToken);
What I'm struggling with is:
How to configure my Angular app to notify my bot of a new proactive message I want to send.
How to configure the bot to accept some custom parameters (Teams user ID, message).
It sounds like you've got some progress with pro-active messaging already. Is it working 100%? If not, I've covered the topic a few times here on stack overflow - here's an example that might help: Programmatically sending a message to a bot in Microsoft Teams
However, with regards -trigging- the pro-active message, the truth is you can do it from anywhere/in any way. For instance, I have Azure Functions that run on their own schedules, and pro-active send messages as if they're from the bot, even though the code isn't running inside the bot at all. You haven't fully described where the Angular app fits into the picture (like who's using it for what), but as an example in your scenario, you could create another endpoint inside your bot controller, and do the work inside there directly (e.g. add something like below:)
[HttpPost]
public async Task ProActiveMessage([FromQuery]string conversationId)
{
//retrieve conversation details by id from storage (e.g. database)
//send pro-active message
//respond with something back to the Angular client
}
hope that helps,
Hilton's answer is still good, but the part about proactively messaging them without prior interaction requires too long of a response. So, responding to your latest comments:
Yes, the bot needs to be installed for whatever team the user resides in that you want to proactively message. It won't have permissions to do so, otherwise.
You don't need to override OnMembersAddedAsync; just query the roster (see below).
You don't need a conversation ID to do this. I'd make your API, instead, accept their Teams ID. You can get this by querying the Teams Roster, which you'll need to do in advance and store in a hash table or something...maybe a database if your team size is sufficiently large.
As far as required information, you need enough to build the ConversationParameters:
var conversationParameters = new ConversationParameters
{
IsGroup = false,
Bot = turnContext.Activity.Recipient,
Members = new ChannelAccount[] { teamMember },
TenantId = turnContext.Activity.Conversation.TenantId,
};
...which you then use to CreateConversationAsync:
await ((BotFrameworkAdapter)turnContext.Adapter).CreateConversationAsync(
teamsChannelId,
serviceUrl,
credentials,
conversationParameters,
async (t1, c1) =>
{
conversationReference = t1.Activity.GetConversationReference();
await ((BotFrameworkAdapter)turnContext.Adapter).ContinueConversationAsync(
_appId,
conversationReference,
async (t2, c2) =>
{
await t2.SendActivityAsync(proactiveMessage, c2);
},
cancellationToken);
},
cancellationToken);
Yes, you can modify that sample. It returns a Bad Request because only a particular schema is allowed on /api/messages. You'll need to add your own endpoint. Here's an example of NotifyController, which one of our other samples uses. You can see that it accepts GET requests. You'd just need to modify that our build your own that accepts POST requests.
All of this being said, all of this seems like it may be a bigger task than you're ready for. Nothing wrong with that; that's how we learn. Instead of jumping straight into this, I'd start with:
Get the Proactive Sample working and dig through the code until you really understand how the API part works.
Get the Teams Sample working, then try to make it message individual users.
Then build your bot that messages users without prior interaction.
If you run into trouble feel free to browse my answers. I've answered similar questions to this, a lot. Be aware, however, that we've switched from the Teams Middleware that I mention in some of my answers to something more integrated into the SDK. Our Teams Samples (samples 50-60) show how to do just about everything.

Why does QnAMaker Bot does not work in Azure Web Chat channel but works locally

I was able to convert my EchoBot to interact with QnAMaker as per instructions here on my local development system but when I publish the same using kudu repo (tried using Azure DevOps service Ci/CD pipeline but it does not work [in preview] because after deployment the bot just hangs on portal and never able to test it on web chat.. so gave up and used recommended kudu repo), I do not get the correct answer to my response. For every question I send, it is unable to detect the QnAMaker service. And I am returning error message from the code that says no QnaMaker answer was found.
How do I troubleshoot to identify the cause of this?
My bot file seems to be working fine locally and I am able to get the answer from QnAMaker locally but not after publishing the code to my Web App Bot in Azure.
I feel like Botframework V4 (using .net) is not very straight forward and the instruction on the portal (document) is still kind of evolving or sometime incomprehensible.
Here is the snapshot from my emulator while testing the chat locally:
And here is the snapshot of production endpoint (using the same questions on portal) with my error msg from OnTurnAsync function:
My .bot has all the services defined and local bot is working fine.
This is the code in my ChatBot class:
public async Task OnTurnAsync(ITurnContext turnContext, CancellationToken cancellationToken = default(CancellationToken))
{
// Handle Message activity type, which is the main activity type for shown within a conversational interface
// Message activities may contain text, speech, interactive cards, and binary or unknown attachments.
// see https://aka.ms/about-bot-activity-message to learn more about the message and other activity types
if (turnContext.Activity.Type == ActivityTypes.Message)
{
// Get the conversation state from the turn context.
var state = await _accessors.CounterState.GetAsync(turnContext, () => new CounterState());
// Bump the turn count for this conversation.
state.TurnCount++;
// Set the property using the accessor.
await _accessors.CounterState.SetAsync(turnContext, state);
// Save the new turn count into the conversation state.
await _accessors.ConversationState.SaveChangesAsync(turnContext);
// Echo back to the user whatever they typed.
//var responseMessage = $"Turn {state.TurnCount}: You sent '{turnContext.Activity.Text}'\n";
//await turnContext.SendActivityAsync(responseMessage);
// QnAService
foreach(var qnaService in _qnaServices)
{
var response = await qnaService.GetAnswersAsync(turnContext);
if (response != null && response.Length > 0)
{
await turnContext.SendActivityAsync(
response[0].Answer,
cancellationToken: cancellationToken);
return;
}
}
var msg = "No QnA Maker answers were found. Something went wrong...!!";
await turnContext.SendActivityAsync(msg, cancellationToken: cancellationToken);
}
else
{
await turnContext.SendActivityAsync($"{turnContext.Activity.Type} event detected");
}
}

Bot Framework v3 Dialog returning Cards

I am digging through all the great new stuff in v3 of the bot framework. One of the things that I am trying to do is create a dialog that responds with cards. But I cannot find a sample that shows how to do this.
I've tried to monkey with it on my own but haven't had much luck. In most of their code samples for Dialogs you cast the Activity object you get in your Post to an IMessageActivity class. Then when you respond you do so with just plain text. All the examples with cards have you create an Activity class. However because I've cast it to IMessageActivity I can't use the CreateReply method. And if I can't do that then when I create an Activity I get an error that the 'activityId' cannot be null.
Any advice, thoughts, or insight would be greatly appreciated.
Thanks in advance!
I added this code to my dialog:
protected override async Task MessageReceived(IDialogContext context, IAwaitable<IMessageActivity> item)
{
_message = (Activity)await item;
await base.MessageReceived(context, item);
}
[field: NonSerialized()]
private Activity _message;
[LuisIntent("Ping")]
public async Task Ping(IDialogContext context, LuisResult result)
{
Activity replyToConversation = _message.CreateReply("Should go to conversation, with a carousel");
replyToConversation.Recipient = _message.From;
replyToConversation.Type = "message";
replyToConversation.AttachmentLayout = "carousel";
.
.
.
await context.PostAsync(replyToConversation);
context.Wait(MessageReceived);
}
I got it working in the emulator but not in Skype but I guess my problem is this one Rich Card attachments are not showing on web chat or Skype

Resources