| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | Teams Conversation Ai Overview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/Teams conversational AI/teams-conversation-ai-overview.md | Since Teams AI library uses OpenAI's GPT model, localization is available. When Large language model (LLM) is an advanced language model that utilizes latent variables to generate coherent and diverse natural language text and style. -Although Teams AI library is built to use Open AIΓÇÖs GPT model, you have the flexibility to swap with any LLM of your choice without changing the bot logic. +Although, Teams AI library is built to use Open AIΓÇÖs GPT model, you have the flexibility to swap with any LLM of your choice without changing the bot logic. This means you can choose to keep your app's content outside the public domain and confined to your preferred LLM model. ## Responsible AI |
| platform | Tabs Link Unfurling | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/tabs-link-unfurling.md | Title: Tabs link unfurling and Stage View -description: Learn about Stage View, a full screen UI component invoked to surface your web content. Link unfurling is used to turn URLs into a tab using Adaptive Cards. +description: Learn about Stage View and Collaborative Stage View, a full screen UI component invoked to surface your web content. Link unfurling is used to turn URLs into a tab using Adaptive Cards. ms.localizationpriority: high ms.localizationpriority: high # Tabs link unfurling and Stage View -Stage View is a new user interface (UI) component. It allows you to render the content that is opened in full screen in Teams and pinned as a tab. +Stage View is a user interface (UI) component that allows you to render content in a full screen within Teams or as a new window. +> [!NOTE] +> This article is based on Microsoft Teams JavaScript client library version 2.0.x. If you are using an earlier version, see [TeamsJS](how-to/using-teams-client-library.md) for guidance on the differences between the latest TeamsJS and earlier versions. ++<!--It allows users to maintain their context within their new window experience while continuing group chat conversation. <br> Developers have to enable Tab link Unfurling for their app to get Stage View update for free. Users are still able to pin the app content as a tab. It's a new entry point to pinning app content but it will not change the existing functionality of tabs or pinning. + ## Stage View -Stage View is a full screen UI component that you can invoke to surface your web content. The existing link unfurling service is updated so that it's used to turn URLs into a tab using an Adaptive Card and Chat Services. When a user sends a URL in a chat or channel, the URL is unfurled to an Adaptive Card. The user can select **View** in the card, and pin the content as a tab directly from Stage View. +Stage View is a full screen UI component that can be used to render your app content, providing users with a focused experience to engage with your app. Stage View can be invoked from either an Adaptive Card or a deep link, in both chats and channels. -## Advantage of Stage View +* When users invoke Stage View from Adaptive cards, Stage View opens in a new Teams window along with the originating chat or channel thread in the side panel. This new app canvas is called the [Collaborative Stage View](#collaborative-stage-view). The Collaborative Stage View allows users to multi-task and collaborate with each other. -Stage View helps provide a more seamless experience of viewing content in Teams. Users can open and view the content provided by your app without leaving the context, and they can pin the content to the chat or channel for future quick access leading to a higher user engagement with your app. +* The Collaborative Stage View surfaces the originating chat or thread from where it was invoked and helps the users to engage with content and conversation side-by-side. -## Stage View vs. Task module +The following image is an example of the Collaborative Stage View: -|Stage View|Task module| ++### Stage View vs. Task module ++| Stage View | Task module| |:--|:--|-|Stage View is useful when you have rich content to display to the users, such as a page, a dashboard, a file, and so on. It provides rich features that help to render your content in the full-screen canvas.|[Task module](../task-modules-and-cards/task-modules/task-modules-tabs.md) is especially useful to display messages that require user attention, or collect information required to move to the next step.| - -## Invoke Stage View +| Stage View is useful to display rich content to the users, such as a page, a dashboard, or a file. It provides rich features that help to render your content in the new pop-up window and the full-screen canvas. <br><br> After your app content opens in Stage View, users can choose to pin the content as a tab. <br><br> For more collaborative capabilities, opening your content in Collaborative Stage View (through an Adaptive Card) allows users to engage with content and conversation side-by-side, while enabling multi-window scenarios.| [Task module](../task-modules-and-cards/task-modules/task-modules-tabs.md) is especially useful to display messages that need users' attention, or collect information required to move to the next step.| -You can invoke Stage View in the following ways: +### Invoke Stage View through deep link -* [Invoke Stage View from Adaptive Card](#invoke-stage-view-from-adaptive-card) -* [Invoke Stage View through deep link](#invoke-stage-view-through-deep-link) +To invoke the Stage View through deep link from your tab, you must wrap the deep link URL in the `app.openLink(url)` API. Stage View from a deep link always defaults to the modal experience (and not a Teams window). While the Stage View deep link can be passed through an `OpenURL` action in the card, the Stage View deep link is intended for the tab canvas. For Stage View from Adaptive Cards, it's recommended to follow the JSON [Adaptive Card example](#example). -## Invoke Stage View from Adaptive Card +The following image is an example of Stage view when it's invoked from a deep link: -When the user enters a URL on the Teams desktop client, the bot is invoked and returns an [Adaptive Card](../task-modules-and-cards/cards/cards-actions.md) with the option to open the URL in a stage. After a stage is launched and the `tabInfo` is provided, you can add the ability to pin the stage as a tab. -The following images display a stage opened from an Adaptive Card: +#### Syntax +Following is the deep link syntax for Stage View: +`https://teams.microsoft.com/l/stage/{appId}/0?context={"contentUrl":"contentUrl","websiteUrl":"websiteUrl","name":"Contoso"}` -### Example +#### Examples -Following is the code to open a stage from an Adaptive Card: +Following are the deep link examples to invoke Stage View: -```json -{ - type: "Action.Submit", - Title: "View", - data: { - msteams: { - type: "invoke", - value: { - type: "tab/tabInfoAction", - tabInfo: { - contentUrl: contentUrl, - websiteUrl: websiteUrl, - name: "Tasks", - entityId: "entityId" - } - } - } - } -} -``` +<br> ++<details> +<summary><b>Example 1</b></summary> +URL with threadId ++Unencoded URL: ++`https://teams.microsoft.com/l/stage/be411542-2bd5-46fb-8deb-a3d5f85156f6/0?context={"contentUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191","websiteUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191?standalone=true","title":"Quotes: Miscellaneous","threadId":"19:9UryYW9rjwnq-vwmBcexGjN1zQSNX0Y4oEAgtUC7WI81@thread.tacv2"}` ++Encoded URL: ++`https://teams.microsoft.com/l/stage/be411542-2bd5-46fb-8deb-a3d5f85156f6/0?context=%7B%22contentUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%22%2C%22websiteUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%3Fstandalone%3Dtrue%22%2C%22title%22%3A%22Quotes%3A%20Miscellaneous%22%2C%22threadId%22%3A%2219:9UryYW9rjwnq-vwmBcexGjN1zQSNX0Y4oEAgtUC7WI81@thread.tacv2%22%7D` ++</details> ++<br> -The `invoke` request type must be `composeExtension/queryLink`. +<details> +<summary><b>Example 2</b></summary> +URL without threadId ++Unencoded URL: ++`https://teams.microsoft.com/l/stage/43f56af0-8615-49e6-9635-7bea3b5802c2/0?context={"contentUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191","websiteUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191?standalone=true","title":"Quotes: Miscellaneous"}` ++Encoded URL: ++`https://teams.microsoft.com/l/stage/43f56af0-8615-49e6-9635-7bea3b5802c2/0?context=%7B%22contentUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%22%2C%22websiteUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%3Fstandalone%3Dtrue%22%2C%22title%22%3A%22Quotes%3A%20Miscellaneous%22%7D` ++</details> ++<br> > [!NOTE] >-> * `invoke` workflow is similar to the current `appLinking` workflow. -> * To maintain consistency, it is recommended to name `Action.Submit` as `View`. -> * `websiteUrl` is a required property to be passed in the `TabInfo` object. --Following is the process to invoke Stage View: +> * All deep links must be encoded before pasting the URL.The unencoded URLs aren't supported. +> * The `name` property is optional in a deep link. If not included, the app name replaces it. +> * The deep link can also be passed through an `OpenURL` action. +> * When you launch a Stage View from a certain context, ensure that your app works in that context. For example, if the Stage View is launched from a personal app, you must ensure your app has a personal scope. -* When the user selects **View**, the bot receives an `invoke` request. The request type is `composeExtension/queryLink`. -* `invoke` response from bot contains an Adaptive Card with type `tab/tabInfoAction` in it. -* The bot responds with a `200` code. +## Collaborative Stage View > [!NOTE] >-> On Teams mobile clients, invoking Stage View for apps distributed through the [Teams store](~/concepts/deploy-and-publish/apps-publish-overview.md) and not having a mobile-optimized experience opens the default web browser of the device. The browser opens the URL specified in the `websiteUrl` parameter of the `TabInfo` object. +> * Collaborative Stage View is available only in [public developer preview](/microsoftteams/platform/resources/dev-preview/developer-preview-intro). +> * Collaborative Stage View isn't supported in Teams web and mobile clients. -## Invoke Stage View through deep link +Collaborative Stage View is an enhancement to Stage View that allows users to engage with your app content in a new Teams window. When a user opens Collaborative Stage View from an Adaptive Card, the app content pops-out in a new Teams window instead of the default Stage View modal. -To invoke the Stage View through deep link from your tab, you must wrap the deep link URL in the `app.openLink(url)` API. The deep link can also be passed through an `OpenURL` action in the card. +In the new Teams window, the Collaborative Stage View also opens a chat in the side panel. The chat brings the conversation from the group chat or channel thread where the users' Adaptive Card is originally shared. Users can continue to collaborate directly within the new window. -### Syntax +The following image is an example of Collaborative Stage View: -Following is the deep link syntax: -`<https://teams.microsoft.com/l/stage/{appId}/0?context>={"contentUrl":"contentUrl","websiteUrl":"websiteUrl","name":"Contoso"}` +### Advantages of Collaborative Stage View -### Examples +Collaborative Stage View helps unlock multi-tasking scenarios with your app content in Teams. Users can open and view your app content inside a new Teams window, while having meaningful conversation and collaboration from the same window. The ability to engage with content while also having a conversation on the content leads to higher user engagement for your app. -When a user enters a URL, it's unfurled into an Adaptive Card. +|Feature |Notes |Desktop |Web |Mobile| +| |:-- |:-- |:- |:-- | +|Collaborative Stage View| Invoke from Adaptive Card action. |Chat or Channel: Opens Teams pop-out window with chat pane.| Opens Stage View modal. |Opens Stage View modal.| +|Stage View |Invoke from Deep link. Only recommended when calling from your tab app, and not an Adaptive Card. |Opens Stage View modal.| Opens Stage View modal.| Opens Stage View modal.| -Following are the deep link examples to invoke Stage View: +### Invoke Collaborative Stage View from Adaptive Card -**Example 1: URL with threadId** +When the user enters an app content URL in a chat, the bot is invoked and returns an Adaptive Card with the option to open the URL. Depending on the context and the usersΓÇÖ client, the URL opens in the appropriate Stage View UI. When the Collaborative Stage View is invoked from an Adaptive Card in a chat or channel (and not from a deep link), a new window opens. -Unencoded URL: +The following image is an example of a Collaborative Stage View from an Adaptive Card: -`<https://teams.microsoft.com/l/stage/be411542-2bd5-46fb-8deb-a3d5f85156f6/0?context>={"contentUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191","websiteUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191?standalone=true","title":"Quotes: Miscellaneous","threadId":"19:9UryYW9rjwnq-vwmBcexGjN1zQSNX0Y4oEAgtUC7WI81@thread.tacv2"}` -Encoded URL: -`<https://teams.microsoft.com/l/stage/be411542-2bd5-46fb-8deb-a3d5f85156f6/0?context=%7B%22contentUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%22%2C%22websiteUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%3Fstandalone%3Dtrue%22%2C%22title%22%3A%22Quotes%3A%20Miscellaneous%22%2C%22threadId%22%3A%2219:9UryYW9rjwnq-vwmBcexGjN1zQSNX0Y4oEAgtUC7WI81@thread.tacv2%22%7D>` +#### Example -**Example 2: URL with no threadId** +The following is a JSON code example to create a Collaborative Stage View button in an Adaptive Card: -Unencoded URL: +```json +{ + "type": "Action.Submit", + "name": "Open", + "data": { + "msteams": { + "type": "invoke", + "value": { + "type": "tab/tabInfoAction", + "tabInfo": { + "contentUrl": "contentUrl", + "websiteUrl": "websiteUrl", + "name": "Sales Report", + "entityId": "entityId" + } + } + } + } +} -`<https://teams.microsoft.com/l/stage/43f56af0-8615-49e6-9635-7bea3b5802c2/0?context>={"contentUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191","websiteUrl":"https://teams-alb.wakelet.com/teams/collection/e4173826-5dae-4de0-b77d-bfabafd6f191?standalone=true","title":"Quotes: Miscellaneous"}` +``` -Encoded +Following is the process to invoke Collaborative Stage View: -`<https://teams.microsoft.com/l/stage/43f56af0-8615-49e6-9635-7bea3b5802c2/0?context=%7B%22contentUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%22%2C%22websiteUrl%22%3A%22https%3A%2F%2Fteams-alb.wakelet.com%2Fteams%2Fcollection%2Fe4173826-5dae-4de0-b77d-bfabafd6f191%3Fstandalone%3Dtrue%22%2C%22title%22%3A%22Quotes%3A%20Miscellaneous%22%7D>` +* When the user shares a URL in a Teams chat, the bot receives an `composeExtension/queryLink` invoke request. The bot returns an Adaptive Card with the type `tab/tabInfoAction`. +* When the user selects the action button on the Adaptive Card, Collaborative Stage View opens based on the content in the Adaptive Card. > [!NOTE]-> All deep links must be encoded before pasting the URL. We don't support unencoded URLs. >-> * The `name` is optional in deep link. If not included, the app name replaces it. -> * The deep link can also be passed through an `OpenURL` action. -> * When you launch a Stage from a certain context, ensure that your app works in that context. For example, if your Stage View is launched from a personal app, you must ensure your app has a personal scope. +> * Passing a Stage View deep link into an Adaptive Card doesn't open the Collaborative Stage View. A Stage View deep link always opens the Stage View Modal. +> * Ensure that the URL of the content is within the list of `validDomains` in your app manifest. +> * The invoke request type must be a `composeExtension/queryLink`. +> * `invoke` workflow is similar to the `appLinking` workflow. +> * To maintain consistency, it is recommended to name `Action.Submit` as `Open`. +> * `websiteUrl` is a required property to be passed in the `TabInfo` object. +> * If you don't have an optimized mobile experience for Teams mobile client, the Stage View for apps distributed through the [Teams store](../concepts/deploy-and-publish/apps-publish-overview.md) opens in a default web browser. The browser opens the URL specified in the `websiteUrl` parameter of the `TabInfo` object. -## Tab information property +#### Query parameters | Property name | Type | Number of characters | Description | |:--|:|:|:--|-| `entityId` | String | 64 | This property is a unique identifier for the entity that the tab displays. This is a required field.| -| `name` | String | 128 | This property is the display name of the tab in the channel interface. This is an optional field.| -| `contentUrl` | String | 2048 | This property is the https:// URL that points to the entity UI to be displayed in the Teams canvas. This is a required field.| -| `websiteUrl?` | String | 2048 | This property is the https:// URL to point at, if a user selects to view in a browser. This is a required field.| -| `removeUrl?` | String | 2048 | This property is the https:// URL that points to the UI to be displayed when the user deletes the tab. This is an optional field.| +| `entityId` | String | 64 | This property is a unique identifier for the entity that the tab displays and it's a required field.| +| `name` | String | 128 | This property is the display name of the tab in the channel interface and it's an optional field.| +| `contentUrl` | String | 2048 | This property is the `https://` URL that points to the entity UI to be displayed in the Teams canvas and it's a required field.| +| `websiteUrl?` | String | 2048 | This property is the `https://` URL to point at, if a user selects to view in a browser and it's a required field.| +| `removeUrl?` | String | 2048 | This property is the `https://` URL that points to the UI to be displayed when the user deletes the tab and it's an optional field.| ## Code sample Encoded * [composeExtensions](../resources/schem#composeextensions) * [Build tabs with Adaptive Cards](how-to/build-adaptive-card-tabs.md) * [Create deep links](../concepts/build-and-test/deep-links.md)+* [Cards](../task-modules-and-cards/what-are-cards.md) |
| platform | Whats New | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/whats-new.md | Teams platform features that are available to all app developers. **2023 June** +* ***June 14, 2023***: [Collaborative Stage View](tabs/tabs-link-unfurling.md#collaborative-stage-view). + * ***June 14, 2023***: [Added validation guidelines for Teams app powered by Artificial Intelligence (AI)](concepts/deploy-and-publish/appsource/prepare/teams-store-validation-guidelines.md#apps-powered-by-ai). * ***June 02, 2023***: [Real-time meeting events are supported in channel meetings](apps-in-teams-meetings/meeting-apps-apis.md#get-real-time-teams-meeting-events-api). Discover Microsoft Teams platform features that are in developer preview. You ca Developer preview is a public program that provides early access to unreleased Teams platform features. -**2023 January** +**2023 June** -* ***January 31, 2023***: [Introduced Targeted in-meeting notification for apps in Teams.](apps-in-teams-meetings/in-meeting-notification-for-meeting.md#targeted-in-meeting-notification) -* ***January 30, 2023***: [Enable app caching to improve subsequent launch time of the apps to the meeting side panel.](apps-in-teams-meetings/build-tabs-for-meeting.md#app-caching) +***June 19, 2023***: [Introduced Collaborative Stage View](tabs/tabs-link-unfurling.md#collaborative-stage-view). :::column-end::: :::row-end::: | **Date** | **Update** | **Find here** | | -- | | |+|01/31/2023| Introduced Targeted in-meeting notification for apps in Teams.|Build apps for Teams meetings and calls > Enable and configure apps for meetings > Build in-meeting notification for Teams meeting > Build tabs for meeting > [Targeted in-meeting notification](apps-in-teams-meetings/in-meeting-notification-for-meeting.md#targeted-in-meeting-notification)| +|01/30/2023| Enable app caching to improve subsequent launch time of the apps to the meeting side panel.|Build apps for Teams meetings and calls > Enable and configure apps for meetings > [App caching](apps-in-teams-meetings/build-tabs-for-meeting.md#app-caching) | |05/12/2022| Introduced share in meeting to share any document or third-party app to the meeting stage.|Build apps for Teams meetings and calls > Enable and configure apps for meetings > [Share in meeting](concepts/build-and-test/share-in-meeting.md) | |10/11/2022| Enable bots to receive all chat messages without being @mentioned.|Build bots > Bot conversations > Message in bot conversations > [Receive all conversation messages with RSC](bots/how-to/conversations/channel-messages-with-rsc.md) | |10/11/2022|Generate a deep link to share content to stage in meetings.|Build apps for Teams meetings and calls > Enable and configure apps for meetings > Share in meeting > [Generate a deep link to share content to stage in meetings.](concepts/build-and-test/share-in-meeting.md) | |