Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions msteams-platform/toolkit/configure-bot-capability.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,20 @@ To configure bot as an additional capability, ensure the following prerequisites

The following steps help you to add bot to a tab app:

* [Create bot app using Microsoft 365 Agents Toolkit](#create-bot-app-using-agents-toolkit)
* [Configure bot capability in app manifest](#configure-bot-capability-in-app-manifest)
* [Add bot code to your project](#add-bot-code-to-your-project)
* [Setup local debug environment](#setup-local-debug-environment)
* [Provision the app to Azure](#provision-the-app-to-azure)
- [Add bot capability to Teams app](#add-bot-capability-to-teams-app)
- [Prerequisites](#prerequisites)
- [Add bot to tab app](#add-bot-to-tab-app)
- [Create bot app using Agents Toolkit](#create-bot-app-using-agents-toolkit)
- [Configure bot capability in app manifest](#configure-bot-capability-in-app-manifest)
- [Add bot code to your project](#add-bot-code-to-your-project)
- [Setup local debug environment](#setup-local-debug-environment)
- [Provision the app to Azure](#provision-the-app-to-azure)
- [Add bot to message extension app](#add-bot-to-message-extension-app)
- [Create bot app using Agents Toolkit](#create-bot-app-using-agents-toolkit-1)
- [Update manifest file](#update-manifest-file)
- [Add bot code to project](#add-bot-code-to-project)
- [Next step](#next-step)
- [See also](#see-also)

## Create bot app using Agents Toolkit

Expand Down Expand Up @@ -456,7 +465,7 @@ The following code snippet is an example:

# [Add bot to message extension app](#tab/messageextensionapp)

You can add the bot capability to a message extension app easily as message extensions are built on Bot Framework.
You can add the bot capability to a message extension app easily as message extensions are built on Microsoft 365 Agents SDK.

The following steps help you to add the bot capability to a message extension app:

Expand Down
28 changes: 19 additions & 9 deletions msteams-platform/toolkit/configure-message-extension-capability.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ ms.date: 12/17/2024

A message extension allows users to interact with your web service when composing messages in Microsoft Teams. Users can invoke your web service to assist message composition from the message compose box or from the search bar.

Message extensions are built on the Bot Framework architecture in Teams. For more information, see [build message extensions](../messaging-extensions/what-are-messaging-extensions.md).
Message extensions are built on the Microsoft 365 Agents SDK architecture in Teams. For more information, see [build message extensions](../messaging-extensions/what-are-messaging-extensions.md).

## Prerequisites

Expand All @@ -28,11 +28,21 @@ To configure the message extension capability in your app, ensure the following

To add a message extension to a tab app, follow these steps:

1. [Create message extension app using Agents Toolkit](#create-message-extension-app-using-agents-toolkit)
1. [Configure message extension in app manifest](#configure-message-extension-in-app-manifest)
1. [Add message extension code to your project](#add-message-extension-code-to-your-project)
1. [Setup local debug environment](#setup-local-debug-environment)
1. [Provision your app to Azure](#provision-your-app-to-azure)
- [Add message extension capability to Teams app](#add-message-extension-capability-to-teams-app)
- [Prerequisites](#prerequisites)
- [Add message extension to Teams app](#add-message-extension-to-teams-app)
- [Add message extension to tab app](#add-message-extension-to-tab-app)
- [Create message extension app using Agents Toolkit](#create-message-extension-app-using-agents-toolkit)
- [Configure message extension in app manifest](#configure-message-extension-in-app-manifest)
- [Add message extension code to your project](#add-message-extension-code-to-your-project)
- [Setup local debug environment](#setup-local-debug-environment)
- [Provision your app to Azure](#provision-your-app-to-azure)
- [Add message extension to bot app](#add-message-extension-to-bot-app)
- [Create a message extension using Agents Toolkit](#create-a-message-extension-using-agents-toolkit)
- [Configure message extension in app manifest](#configure-message-extension-in-app-manifest-1)
- [Add message extension code to project](#add-message-extension-code-to-project)
- [Next step](#next-step)
- [See also](#see-also)

### Create message extension app using Agents Toolkit

Expand Down Expand Up @@ -504,13 +514,13 @@ The following code snippet is an example:

# [Add message extension to bot app](#tab/botapp)

You can add the message extension capability to a bot app easily as message extensions are built on Bot Framework.
You can add the message extension capability to a bot app easily as message extensions are built on Microsoft 365 Agents SDK.

To add a message extension to a bot app, follow these steps:

1. [Create a message extension app using Agents Toolkit](#create-a-message-extension-using-agents-toolkit)
1. [Configure message extension in app manifest](#configure-message-extension-in-app-manifest)
1. [Add message extension code to project](#add-message-extension-code-to-project)
2. [Configure message extension in app manifest](#configure-message-extension-in-app-manifest)
3. [Add message extension code to project](#add-message-extension-code-to-project)

### Create a message extension using Agents Toolkit

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ ms.date: 04/25/2024

You can debug bot-based message extension capabilities such as search commands, action commands, and link unfurling using Agents Playground (previously known as Teams App Test Tool) within a simulated environment. Test tool helps you to identify and resolve issues before deploying the extension to a live environment.

Agents Playground enhances the functionality of bot-based message extensions, which are built on top of Bot Framework. When a message extension is activated, Agents Playground sends an invoke request to the app. The app then processes this request and returns an invoke response, which Agents Playground renders and displays.
Agents Playground enhances the functionality of bot-based message extensions, which are built on top of Microsoft 365 Agents SDK. When a message extension is activated, Agents Playground sends an invoke request to the app. The app then processes this request and returns an invoke response, which Agents Playground renders and displays.

> [!NOTE]
> The user experience to trigger message extension in Agents Playground is different from Teams, as the goal of Agents Playground is to test and debug the app logic and make the flow simple.
Expand Down Expand Up @@ -230,7 +230,7 @@ The following table lists the features for each message extension type that aren
<details>
<summary>How can I use `commandId` or `parameters.name` properties for a Search Command in Agents Playground?</summary>

When you use the search box in a search-based message extension in Teams, your app receives an invoke activity that includes two parameters. Sometimes, your app might need to use `activity.value.commandId` or `activity.value.parameters[0].name` to manage different search command behaviors in the activity handler for the `composeExtension/query` invoke activity, such as the `handleTeamsMessagingExtensionQuery` method in the Bot Framework SDK for JavaScript. However, your app doesn't need it because [Teams only supports a single search command](../resources/schema/manifest-schema.md#composeextensionscommands) and you can leave them empty.
When you use the search box in a search-based message extension in Teams, your app receives an invoke activity that includes two parameters. Sometimes, your app might need to use `activity.value.commandId` or `activity.value.parameters[0].name` to manage different search command behaviors in the activity handler for the `composeExtension/query` invoke activity, such as the `handleTeamsMessagingExtensionQuery` method in the Microsoft 365 Agents SDK for JavaScript. However, your app doesn't need it because [Teams only supports a single search command](../resources/schema/manifest-schema.md#composeextensionscommands) and you can leave them empty.

If your app uses these two parameters, you can provide additional inputs by selecting `Specify Command ID or Parameter` and updating the required values. Agents Playground includes these parameters in the invoke activity payload during a search. If you don't specify them, the payload avoids these parameters.

Expand All @@ -245,7 +245,7 @@ In Teams, the parameters are available in the app manifest. Since Agents Playgro
<details>
<summary>How can I use `commandId` property for an Action Command in Agents Playground?</summary>

In Teams, dialogs are triggered from action commands and your app receives a `composeExtension/fetchTask` or `composeExtension/submitAction` invoke activity. This activity includes the `activity.value.commandId` parameter. However, your app uses this parameter to differentiate between commands within the activity handler for these invoke activities, such as the `handleTeamsMessagingExtensionFetchTask` or `handleTeamsMessagingExtensionSubmitAction` methods in the Bot Framework SDK for JavaScript.
In Teams, dialogs are triggered from action commands and your app receives a `composeExtension/fetchTask` or `composeExtension/submitAction` invoke activity. This activity includes the `activity.value.commandId` parameter. However, your app uses this parameter to differentiate between commands within the activity handler for these invoke activities, such as the `handleTeamsMessagingExtensionFetchTask` or `handleTeamsMessagingExtensionSubmitAction` methods in the Microsoft 365 Agents SDK for JavaScript.

To test various action commands, you must enter the `Command ID` in the respective field. If you don't update, the command IDs aren't included in the activity payload.

Expand Down
16 changes: 8 additions & 8 deletions msteams-platform/toolkit/debug-your-agents-playground.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ Ensure you install the following tools for building and deploying your applicati

## Understand Agents Playground

Agents Playground is an npm package that has a CLI command called `teamsapptester`. When you run `teamsapptester start`, it opens a web app on your local machine that emulates the Teams or WebChat client and Bot Framework service. This web app doesn't need any cloud resources as it uses mock data to simulate the contextual information.
Agents Playground is an npm package that has a CLI command called `teamsapptester`. When you run `teamsapptester start`, it opens a web app on your local machine that emulates the Teams or WebChat client and Microsoft 365 Agents SDK service. This web app doesn't need any cloud resources as it uses mock data to simulate the contextual information.

To use an application on Agents Playground, you need to provide:

Expand Down Expand Up @@ -332,7 +332,7 @@ Currently, the accepted channel IDs are: `msteams`, `directline`, `webchat`, and

## Customize Teams context

The configuration file in the project's root folder allows you to customize Teams context information such as chats, teams, and users. It provides mock data for testing Bot Framework APIs or methods from the Agent SDK or Teams AI Library, such as `TeamsInfo.getTeamMembers`.
The configuration file in the project's root folder allows you to customize Teams context information such as chats, teams, and users. It provides mock data for testing Microsoft 365 Agents SDK APIs or methods from the Agent SDK or Teams AI Library, such as `TeamsInfo.getTeamMembers`.

### Default configuration

Expand All @@ -343,7 +343,7 @@ The configuration file in the project's root folder allows you to customize Team
# Visit https://aka.ms/teams-app-test-tool-config-guide for more details on this file.

# This configuration file customizes the Teams context information like chats, teams, and users.
# It contains mock data for testing Bot Framework APIs or Bot Builder SDK methods such as TeamsInfo.getTeamMembers().
# It contains mock data for testing Microsoft 365 Agents SDK APIs or Bot Builder SDK methods such as TeamsInfo.getTeamMembers().
# You can customize this file to change API response if your bot code uses these APIs.
version: "0.1.0"
tenantId: 00000000-0000-0000-0000-0000000000001
Expand Down Expand Up @@ -412,13 +412,13 @@ team:

### Update the configuration file

If your bot code uses Bot Framework APIs, you can modify the configuration file to customize the API responses. For example, consider an Azure DevOps notification bot installed in a team that fetches inactive bugs from Azure DevOps. It identifies the owners of the inactive bugs, retrieves their email addresses, and sends daily notifications to their personal chats.
If your bot code uses Microsoft 365 Agents SDK APIs, you can modify the configuration file to customize the API responses. For example, consider an Azure DevOps notification bot installed in a team that fetches inactive bugs from Azure DevOps. It identifies the owners of the inactive bugs, retrieves their email addresses, and sends daily notifications to their personal chats.

To comprehensively test this bot in Agents Playground, ensure to update the configuration file with the correct email addresses of the inactive bug owners.

1. Go to the `.m365agentsplayground.yml` file in the project's root folder.

1. Go to the `users` section and update the `name`, `userPrincipleName`, and `email` of the required user.
2. Go to the `users` section and update the `name`, `userPrincipleName`, and `email` of the required user.

```yaml
users:
Expand All @@ -431,14 +431,14 @@ To comprehensively test this bot in Agents Playground, ensure to update the conf
email: [email protected]
```

1. Save the file and select **F5** to debug in Agents Playground.
3. Save the file and select **F5** to debug in Agents Playground.

> [!NOTE]
> When you edit the configuration file in Visual Studio Code, Intellisense automatically updates the property names and warns you if you enter invalid values.

It's important to understand that updating the configuration file has three major impacts:

* It affects the responses returned by Bot Framework Connector APIs. For example, `TeamsInfo.getPagedMembers()`.
* It affects the responses returned by Microsoft 365 Agents SDK Connector APIs. For example, `TeamsInfo.getPagedMembers()`.
* It modifies the details in the activity payload. For example, `activity.recipient`.
* It influences the user interface in Agents Playground. For example, group chat names.

Expand All @@ -465,7 +465,7 @@ It's important to understand that updating the configuration file has three majo
| Features | Debug in Agents Playground | [Debug your app locally](debug-local.md) |
| --- | --- | --- |
| Basic sending / receiving messages | Available | Available |
| Bot Framework APIs (TeamsInfo.getPagedMembers()...) |Available (respond with mocked data) | Available |
| Microsoft 365 Agents SDK APIs (TeamsInfo.getPagedMembers()...) |Available (respond with mocked data) | Available |
| Sending Teams events | Available (mock activity) |Available |
| Typing indicator | Not Available | Available |
| Tab, Message extension, Dialogs (referred as task modules in TeamsJS v1.x), Single sign-on (SSO), and non-Adaptive Cards | Not Available | Available |
Expand Down