Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Teams 2.1 Images Updates #1214

Merged
merged 7 commits into from
Apr 30, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
26 changes: 15 additions & 11 deletions samples/app-complete-sample/nodejs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -148,27 +148,31 @@ This directory holds all of the TypeScript files, which run the entire applicati

## Running the sample

![](images/app-complete-sample1.png)
![](images/1.Install.png)

![](images/app-complete-sample2.png)
![](images/2.Welcome.png)

![](images/app-complete-sample3.png)
![](images/3.Commands.png)

![](images/app-complete-sample4.png)
![](images/4.Hello.png)

![](images/app-complete-sample5.png)
![](images/5.MultiDialog.png)

![](images/app-complete-sample6.png)
![](images/6.Roaster.png)

![](images/app-complete-sample7.png)
![](images/7.Names.png)

![](images/app-complete-sample11.png)
![](images/8.LastDialog.png)

![](images/app-complete-sample8.png)
![](images/9.OneToOne.png)

![](images/app-complete-sample9.png)
![](images/10.SetupTextMessage.png)

![](images/app-complete-sample10.png)
![](images/12.BotInfo.png)

![](images/13.ConfigTabTeams.png)

![](images/14.TeamsTab.png)

## Outlook on the web

Expand Down
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Pawank-MSFT marked this conversation as resolved.
Show resolved Hide resolved
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"applicationUrl": "http://localhost:5000"
"applicationUrl": "http://localhost:3978"
}
}
}
6 changes: 5 additions & 1 deletion samples/app-hello-world/csharp/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,9 +121,13 @@ Please find below demo manifest which is deployed on Microsoft Azure and you can

![InstallApp](Microsoft.Teams.Samples.HelloWorld.Web/Images/Install.png)

**Welcome Bot:**

![Hello Bot](Microsoft.Teams.Samples.HelloWorld.Web/Images/Bot.png)

**Welcome UI:**

![HelloTab](Microsoft.Teams.Samples.HelloWorld.Web/Images/HelloTab.png)
![HelloTab](Microsoft.Teams.Samples.HelloWorld.Web/Images/Tab.png)

## Outlook on the web

Expand Down
Binary file modified samples/app-hello-world/nodejs/Images/AppHelloWorldGif.gif
Binary file added samples/app-hello-world/nodejs/Images/Bot.png
Binary file removed samples/app-hello-world/nodejs/Images/HelloWorld.png
Diff not rendered.
Binary file modified samples/app-hello-world/nodejs/Images/Install.png
Binary file added samples/app-hello-world/nodejs/Images/Tab.png
10 changes: 7 additions & 3 deletions samples/app-hello-world/nodejs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -122,11 +122,15 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual

**Install App:**

![InstallApp](Images/Install.png)
![InstallApp](Images/Install.png.png)

**Welcome UI:**
**Hello World Bot:**

![HelloWorld](Images/HelloWorld.png)
![HelloWorld](Images/Bot.png)

**Hello Wrold Tab:**

![HelloWorld](Images/Tab.png)

## Outlook on the web

Expand Down
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
12 changes: 6 additions & 6 deletions samples/app-link-unfurling-in-share-to-teams/csharp/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -102,17 +102,17 @@ Please find below demo manifest which is deployed on Microsoft Azure and you can

## Running the sample

![tab](LinkUnfurlingInShareToTeams/Images/tabpage.png)
![tab](LinkUnfurlingInShareToTeams/Images/1.Install.png)

![Link unfurling STT](LinkUnfurlingInShareToTeams/Images/linkunfurlscreen.png)
![Link unfurling STT](LinkUnfurlingInShareToTeams/Images/2.Tab.png)

![Link unfurling success](LinkUnfurlingInShareToTeams/Images/successcard.png)
![Share To Teams](LinkUnfurlingInShareToTeams/Images/3.ShareToTeams.png)

![Link unfurling card](LinkUnfurlingInShareToTeams/Images/channelcard.png)
![Shared](LinkUnfurlingInShareToTeams/Images/4.SharedSuccess.png)

![tab-web](LinkUnfurlingInShareToTeams/Images/tabpageweb.png)
![In Teams](LinkUnfurlingInShareToTeams/Images/5.InTeams.png)

![Link unfurling STT web](LinkUnfurlingInShareToTeams/Images/linkunfurlingweb.png)
![View Via Card](LinkUnfurlingInShareToTeams/Images/6.ViewViaCard.png)

## Deploy the bot to Azure

Expand Down
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
14 changes: 8 additions & 6 deletions samples/app-link-unfurling-in-share-to-teams/nodejs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -105,17 +105,19 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual

## Running the sample

![tab](Images/tabpage.png)
![tab](Images/1.Install.png)

![Link unfurling STT](Images/linkunfurlscreen.png)
![Continue Devtunnel](Images/2.Continue.png)

![Link unfurling success](Images/successcard.png)
![Tab](Images/3.Tab.png)

![Link unfurling card](Images/channelcard.png)
![Share To Teams](Images/4.ShareToTeams.png)

![tab-web](Images/tabpageweb.png)
![Link Shared](Images/5.Shared.png)

![Link unfurling STT web](Images/linkunfurlingweb.png)
![Link unfurling STT Teams](Images/6.InTeams.png)

![View Via Card](Images/7.ViewViaCard.png)

## Deploy the bot to Azure

Expand Down
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
24 changes: 11 additions & 13 deletions samples/bot-adaptive-card-actions/csharp/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,27 +109,27 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual

## Running the sample

![App Setup](AdaptiveCardActions/Images/1.AddApp.png)
![App Setup](AdaptiveCardActions/Images/1.Install.png)

![Welcome](AdaptiveCardActions/Images/2.Welcome.png)
![Welcome](AdaptiveCardActions/Images/2.WelcomeMessage.png)

![Runnning Sample](AdaptiveCardActions/Images/3.AdaptiveCard_Actions.png)
![Runnning Sample](AdaptiveCardActions/Images/9.SuggestedActions.png)

![Runnning Sample](AdaptiveCardActions/Images/4.ActionSubmit.png)
![Runnning Sample](AdaptiveCardActions/Images/3.Red.png)

![Runnning Sample](AdaptiveCardActions/Images/5.ActionShowCard.png)
![Runnning Sample](AdaptiveCardActions/Images/4.Yellow.png)

![Runnning Sample](AdaptiveCardActions/Images/6.Togglevisible.png)
![Runnning Sample](AdaptiveCardActions/Images/5.Blue.png)

![Runnning Sample](AdaptiveCardActions/Images/7.ToggleVisibleOnClick.png)
![Runnning Sample](AdaptiveCardActions/Images/6.CardActions.png)

![Runnning Sample](AdaptiveCardActions/Images/8.SuggestedActions.png)
![Runnning Sample](AdaptiveCardActions/Images/7.ActionSubmit.png)

![Runnning Sample](AdaptiveCardActions/Images/9.RedColor.png)
![Runnning Sample](AdaptiveCardActions/Images/8.ActionShowCard.png)

![Runnning Sample](AdaptiveCardActions/Images/10.BlueColor.png)
![Runnning Sample](AdaptiveCardActions/Images/10.ToggleVisibiliyCard.png)

![Runnning Sample](AdaptiveCardActions/Images/11.YellowColor.png)
![Runnning Sample](AdaptiveCardActions/Images/11.VisibleOnClick.png)

## Deploy the bot to Azure

Expand All @@ -141,6 +141,4 @@ To learn more about deploying a bot to Azure, see [Deploy your bot to Azure](htt
- [Send suggested actions](https://learn.microsoft.com/microsoftteams/platform/bots/how-to/conversations/conversation-messages?tabs=dotnet#send-suggested-actions)




<img src="https://pnptelemetry.azurewebsites.net/microsoft-teams-samples/samples/bot-adaptive-card-actions-csharp" />
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
23 changes: 11 additions & 12 deletions samples/bot-adaptive-card-actions/nodejs/Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -117,31 +117,30 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual

**Install App:**

![InstallApp](Images/1.AddApp.png)
![InstallApp](Images/1.Install.png)

**Welcome UI:**

![Initial message](Images/2.Welcome.png)
![Initial message](Images/2.WelcomeMessage.png)

![Running Sample](Images/3.AdaptiveCard_Actions.png)
![Running Sample](Images/9.SuggestedActions.png)

![Running Sample](Images/4.ActionSubmit.png)
![Running Sample](Images/3.Red.png)

![Running Sample](Images/5.ActionShowCard.png)
![Running Sample](Images/4.Yellow.png)

![Running Sample](Images/5.ActionSubmitted.png)
![Running Sample](Images/5.Blue.png)

![Running Sample](Images/6.Togglevisible.png)
![Running Sample](Images/6.CardActions.png)

![Running Sample](Images/7.ToggleVisibleOnClick.png)
![Running Sample](Images/7.ActionSubmit.png)

![Running Sample](Images/8.SuggestedActions.png)
![Running Sample](Images/8.ActionShowCard.png)

![Running Sample](Images/9.RedColor.png)
![Running Sample](Images/10.ToggleVisibiliyCard.png)

![Running Sample](Images/10.BlueColor.png)
![Running Sample](Images/11.VisibleOnClick.png)

![Running Sample](Images/11.YellowColor.png)

## Deploy the bot to Azure

Expand Down
Binary file removed samples/bot-file-upload/csharp/Images/add-App.png
Diff not rendered.
Diff not rendered.
Diff not rendered.
Binary file modified samples/bot-file-upload/csharp/Images/bot-file-upload.gif
Diff not rendered.
Binary file removed samples/bot-file-upload/csharp/Images/file-Card.png
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
15 changes: 7 additions & 8 deletions samples/bot-file-upload/csharp/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -112,20 +112,19 @@ the Teams service needs to call into the bot.
> Note this `manifest.json` specified that the bot will be installed in "personal" scope which is why you immediately entered a one on one chat conversation with the bot. Please refer to Teams documentation for more details.

1. Adding the bot:
![add-App ](Images/add-App.png)
![add-App ](Images/1.Install.png)

1. Sending a message to the bot will cause it to respond with a card that will prompt you to upload a file. The file that's being uploaded is the `teams-logo.png` in the `Files` directory in this sample. The `Accept` and `Decline` events illustrated in this sample are specific to Teams. You can message the bot again to receive another prompt.
![file-Card ](Images/file-Card.png)
![file-Card-Uploaded ](Images/file-Card-Uploaded.png)
![file-Card ](Images/2.FileUploadCard.png)
![file-Card-Uploaded and attach file](Images/3.AttachFile.png)

1. You can send a file to the bot as an attachment in the message compose section in Teams. This will be delivered to the bot as a Message Activity and the code in this sample fetches and saves the file.
![attachment-File-Upload ](Images/attachment-File-Upload.png)
![attachment-File-Uploaded ](Images/attachment-File-Uploaded.png)
![attachment-File-Upload ](Images/3.AttachFile.png)
![attachment-File-Uploaded ](Images/4.FileReceived.png)

1. You can also send an inline image in the message compose section. This will be present in the attachments of the Activity and requires the Bot's access token to fetch the image.
![inline-Image ](Images/inline-Image.png)
![inline-Image-Send ](Images/inline-Image-Send.png)
![inline-Image-Uploaded ](Images/inline-Image-Uploaded.png)
![inline-Image ](Images/5.InLineImageOption.png)
![inline-Image-Uploaded ](Images/6.InLineImageUploaded.png)

## Deploy the bot to Azure

Expand Down
Binary file modified samples/bot-file-upload/nodejs/Images/FileUpload.gif
Binary file removed samples/bot-file-upload/nodejs/Images/add-App.png
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Binary file removed samples/bot-file-upload/nodejs/Images/file-Card.png
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
14 changes: 6 additions & 8 deletions samples/bot-file-upload/nodejs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -118,20 +118,18 @@ In Azure portal, create a [Azure Bot resource](https://docs.microsoft.com/azure/
> Note this `manifest.json` specified that the bot will be installed in "personal" scope which is why you immediately entered a one on one chat conversation with the bot. Please refer to Teams documentation for more details.

1. Adding the bot:
![add-App ](Images/add-App.png)
![add-App ](Images/1.Install.png)

1. Sending a message to the bot will cause it to respond with a card that will prompt you to upload a file. The file that's being uploaded is the `teams-logo.png` in the `Files` directory in this sample. The `Accept` and `Decline` events illustrated in this sample are specific to Teams. You can message the bot again to receive another prompt.
![file-Card ](Images/file-Card.png)
![file-Card-Uploaded ](Images/file-Card-Uploaded.png)
![file-Card ](Images/2.FileUploadCard.png)
![file-Card-Uploaded And Attach File ](Images/3.AttachFile.png)

1. You can send a file to the bot as an attachment in the message compose section in Teams. This will be delivered to the bot as a Message Activity and the code in this sample fetches and saves the file.
![attachment-File-Upload ](Images/attachment-File-Upload.png)
![attachment-File-Uploaded ](Images/attachment-File-Uploaded.png)
![attachment-File-Upload ](Images/4.FileReceived.png)

1. You can also send an inline image in the message compose section. This will be present in the attachments of the Activity and requires the Bot's access token to fetch the image.
![inline-Image ](Images/inline-Image.png)
![inline-Image-Send ](Images/inline-Image-Send.png)
![inline-Image-Uploaded ](Images/inline-Image-Uploaded.png)
![inline-Image ](Images/5.InLineImageOption.png)
![inline-Image-Send ](Images/6.InLineImageUploaded.png)


## Deploy the bot to Azure
Expand Down
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
8 changes: 4 additions & 4 deletions samples/bot-initiate-thread-in-channel/csharp/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,14 +96,14 @@ the Teams service needs to call into the bot.
You can interact with this bot by sending it a message. The bot will respond by creating a new thread in the channel and replying to that new thread.

**Adding the bot to a team's channel :**
![add-App ](Images/add-App.png)
![Add-App](Images/1.Install.png)

![add-App-To-Teams-Channel ](Images/add-App-To-Teams-Channel.png)
![Add-App-To-Teams-Channel](Images/2.SelectTeams.png)

![added-App ](Images/added-App.png)
![Mentioned Bot](Images/3.MentionInTeams.png)

**Mention the bot in a team's channel using "@" with any message like: '@yourbotname Hello' :**
![mentionedBot-NewThread ](Images/mentionedBot-NewThread.png)
![Response In Thread](Images/4.FirstResponseInThread.png)

## Deploy the bot to Azure

Expand Down
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
8 changes: 4 additions & 4 deletions samples/bot-initiate-thread-in-channel/nodejs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,14 +121,14 @@ In Azure portal, create a [Azure Bot resource](https://docs.microsoft.com/azure/
You can interact with this bot by sending it a message. The bot will respond by creating a new thread in the channel and replying to that new thread.

**Adding the bot to a team's channel :**
![add-App ](Images/add-App.png)
![Add-App ](Images/1.Install.png)

![add-App-To-Teams-Channel ](Images/add-App-To-Teams-Channel.png)
![Add-App-To-Teams-Channel ](Images/2.SelectTeams.png)

![added-App ](Images/added-App.png)
![Mention Bot In Teams ](Images/3.MentionInTeams.png)

**Mention the bot in a team's channel using "@" with any message like: '@yourbotname Hello' :**
![mentionedBot-NewThread ](Images/mentionedBot-NewThread.png)
![First Response To New Thread ](Images/4.FirstResponseInThread.png)


## Deploy the bot to Azure
Expand Down
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
12 changes: 6 additions & 6 deletions samples/bot-message-reaction/csharp/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,21 +96,21 @@ Message the bot and it will respond with an 'Echo: [your message]'. Add a messa

- **Personal Scope Interactions:**

![personalScope-AddApp ](Images/personalScope-AddApp.png)
![personalScope-AddApp ](Images/1.Install.png)

![personalScope-Interaction ](Images/personalScope-Interaction.png)
![personalScope-Interaction ](Images/2.PersonalChat.png)

- **Group Chat Scope Interactions:**

![groupChat-AddApp ](Images/groupChat-AddApp.png)
![groupChat-AddApp ](Images/5.AddToGC.png)

![groupChat-Interaction ](Images/groupChat-Interaction.png)
![groupChat-Interaction ](Images/6.GroupChat.png)

- **Team Scope Interactions:**

![teamScope-AddApp ](Images/teamScope-AddApp.png)
![teamScope-AddApp ](Images/3.AddToTeams.png)

![teamScope-Interaction ](Images/teamScope-Interaction.png)
![teamScope-Interaction ](Images/4.TeamsChat.png)


## Deploy the bot to Azure
Expand Down
Binary file modified samples/bot-message-reaction/nodejs/Images/MessageReactions.gif
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
16 changes: 9 additions & 7 deletions samples/bot-message-reaction/nodejs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -113,23 +113,25 @@ In Azure portal, create a [Azure Bot resource](https://docs.microsoft.com/azure/

Message the bot and it will respond with an 'Echo: [your message]'. Add a message reaction to the bots response, and the bot will reply accordingly.

- **Personal Scope Interactions:**
- **App Installation:**

![App Installation ](Images/1.Install.png)

![personalScope-AddApp ](Images/personalScope-AddApp.png)
- **Personal Scope Interactions:**

![personalScope-Interaction ](Images/personalScope-Interaction.png)
![personalScope-AddApp ](Images/2.PersonalChat.png)

- **Group Chat Scope Interactions:**

![groupChat-AddApp ](Images/groupChat-AddApp.png)
![groupChat-AddApp ](Images/5.AddToGC.png)

![groupChat-Interaction ](Images/groupChat-Interaction.png)
![groupChat-Interaction ](Images/6.GroupChat.png)

- **Team Scope Interactions:**

![teamScope-AddApp ](Images/teamScope-AddApp.png)
![teamScope-AddApp ](Images/3.AddToTeams.png)

![teamScope-Interaction ](Images/teamScope-Interaction.png)
![teamScope-Interaction ](Images/4.TeamsChat.png)

## Deploy the bot to Azure

Expand Down