fix: update sample screenshots to new Teams UI

bot-sso/README.md

@@ -17,7 +17,7 @@ A bot, chatbot, or conversational bot is an app that responds to simple commands
 
 This is a sample chatbot application demonstrating Single Sign-on using `botbuilder` and Teams Framework that can respond to a `show` message.
 
-![Bot SSO Overview](images/bot-sso.gif)
+![Bot SSO Overview](assets/sampleDemo.gif)
 
 ## This sample illustrates
 - Use Teams Toolkit to create a Teams bot app.
@@ -68,6 +68,7 @@ This is a sample chatbot application demonstrating Single Sign-on using `botbuil
 |---|---|---|
 |Apr 19, 2022| IvanJobs | update to support Teams Toolkit v4.0.0|
 |Dec 7, 2022| yukun-dong | update to support Teams Toolkit v5.0.0|
+|Feb 22, 2024| yukun-dong | update card to adaptive card|
 
 ## Feedback
 We really appreciate your feedback! If you encounter any issue or error, please report issues to us following the [Supporting Guide](https://github.com/OfficeDev/TeamsFx-Samples/blob/dev/SUPPORT.md). Meanwhile you can make [recording](https://aka.ms/teamsfx-record) of your journey with our product, they really make the product better. Thank you!

bot-sso/commands/showUserProfile.ts

@@ -49,10 +49,25 @@ export class ShowUserProfile implements SSOCommand {
 
       const buffer = Buffer.from(photoBinary);
       const imageUri = "data:image/png;base64," + buffer.toString("base64");
-      const card = CardFactory.thumbnailCard(
-        "User Picture",
-        CardFactory.images([imageUri])
-      );
+      const card = CardFactory.adaptiveCard({
+        type: "AdaptiveCard",
+        body: [
+          {
+            type: "TextBlock",
+            text: "User Picture",
+            weight: "Bolder",
+            size: "Medium"
+          },
+          {
+            type: "Image",
+            url: imageUri,
+            size: "Large",
+            horizontalAlignment: "Left"
+          }
+        ],
+        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
+        version: "1.4"
+      });
       await context.sendActivity({ attachments: [card] });
     } else {
       await context.sendActivity(

developer-assist-dashboard/README.md

@@ -17,7 +17,7 @@ Microsoft Teams supports the ability to run web-based UI inside "custom tabs" th
 
 Developer Assist Dashboard shows you how to build a tab with Azure DevOps work items, GitHub issues and Planner tasks to accelerate developer team collaboration and productivity. Developer Assist Dashboard is capable of working on Microsoft Teams, Outlook Web and Microsoft 365 app.
 
-<https://user-images.githubusercontent.com/36196437/223398461-e3f5a521-6439-407c-a458-584c769f730b.mp4>
+<https://github.com/OfficeDev/TeamsFx-Samples/assets/107838226/413bd07d-e49a-4820-b9d7-370b9217efa2>
 
 > Note: This sample will only provision [single tenant](https://learn.microsoft.com/azure/active-directory/develop/single-and-multi-tenant-apps#who-can-sign-in-to-your-app) Azure Active Directory app. For multi-tenant support, please refer to this [wiki](https://aka.ms/teamsfx-multi-tenant).
 

hello-world-tab-docker/.dockerignore

@@ -0,0 +1,12 @@
+appPackage
+assets
+build
+env
+infra
+node_modules
+.gitignore
+aad.manifest.json
+*.md
+compose*.yaml
+Dockerfile
+teamsapp*.yml

hello-world-tab-docker/.gitignore

@@ -0,0 +1,18 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# TeamsFx files
+env/.env.*.user
+env/.env.local
+.DS_Store
+build
+appPackage/build
+.deployment
+.localConfigs
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# Dev tool directories
+/devTools/

hello-world-tab-docker/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "TeamsDevApp.ms-teams-vscode-extension"
+  ]
+}

hello-world-tab-docker/.vscode/launch.json

@@ -0,0 +1,72 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Launch Remote in Teams (Edge)",
+      "type": "msedge",
+      "request": "launch",
+      "url": "https://teams.microsoft.com/l/app/${{TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
+      "presentation": {
+        "group": "group 1: Teams",
+        "order": 3
+      },
+      "internalConsoleOptions": "neverOpen"
+    },
+    {
+      "name": "Launch Remote in Teams (Chrome)",
+      "type": "chrome",
+      "request": "launch",
+      "url": "https://teams.microsoft.com/l/app/${{TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
+      "presentation": {
+        "group": "group 1: Teams",
+        "order": 3
+      },
+      "internalConsoleOptions": "neverOpen"
+    },
+    {
+      "name": "Attach to Frontend in Teams (Edge)",
+      "type": "msedge",
+      "request": "launch",
+      "url": "https://teams.microsoft.com/l/app/${{local:TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
+      "presentation": {
+        "group": "all",
+        "hidden": true
+      },
+      "postDebugTask": "Stop Teams App in Docker",
+      "internalConsoleOptions": "neverOpen"
+    },
+    {
+      "name": "Attach to Frontend in Teams (Chrome)",
+      "type": "chrome",
+      "request": "launch",
+      "url": "https://teams.microsoft.com/l/app/${{local:TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
+      "presentation": {
+        "group": "all",
+        "hidden": true
+      },
+      "internalConsoleOptions": "neverOpen"
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Debug in Teams (Edge)",
+      "configurations": ["Attach to Frontend in Teams (Edge)"],
+      "preLaunchTask": "Start Teams App in Docker",
+      "presentation": {
+        "group": "group 1: Teams",
+        "order": 1
+      },
+      "stopAll": true
+    },
+    {
+      "name": "Debug in Teams (Chrome)",
+      "configurations": ["Attach to Frontend in Teams (Chrome)"],
+      "preLaunchTask": "Start Teams App in Docker",
+      "presentation": {
+        "group": "group 1: Teams",
+        "order": 2
+      },
+      "stopAll": true
+    }
+  ]
+}

hello-world-tab-docker/.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+    "debug.onTaskErrors": "abort",
+    "json.schemas": [
+        {
+            "fileMatch": [
+                "/aad.*.json"
+            ],
+            "schema": {}
+        }
+    ],
+    "azureFunctions.stopFuncTaskPostDebug": false,
+    "azureFunctions.showProjectWarning": false,
+    "csharp.suppressDotnetRestoreNotification": true
+}

hello-world-tab-docker/.vscode/tasks.json

@@ -0,0 +1,60 @@
+// This file is automatically generated by Teams Toolkit.
+// The teamsfx tasks defined in this file require Teams Toolkit version >= 5.0.0.
+// See https://aka.ms/teamsfx-tasks for details on how to customize each task.
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Validate Docker prerequisites",
+      "type": "teamsfx",
+      "command": "debug-check-prerequisites",
+      "args": {
+        "prerequisites": [
+          "m365Account", // Sign-in prompt for Microsoft 365 account, then validate if the account enables the sideloading permission.
+          "portOccupancy" // Validate available ports to ensure those debug ones are not occupied.
+        ],
+        "portOccupancy": [
+          53000, // tab service port
+          7071, // backend service port
+          9229 // backend inspector port for Node.js debugger
+        ]
+      }
+    },
+    {
+      "label": "Start Teams App in Docker",
+      "dependsOn": [
+        "Validate Docker prerequisites",
+        "Provision",
+        "docker-compose-up"
+      ],
+      "dependsOrder": "sequence"
+    },
+    {
+      // Create the debug resources.
+      // See https://aka.ms/teamsfx-tasks/provision to know the details and how to customize the args.
+      "label": "Provision",
+      "type": "teamsfx",
+      "command": "provision",
+      "args": {
+        "env": "local"
+      }
+    },
+    {
+      "label": "Stop Teams App in Docker",
+      "type": "shell",
+      "command": "docker compose -f ${workspaceFolder}/compose-debug.yml down",
+      "isBackground": true
+    },
+    {
+      "type": "shell",
+      "label": "docker-compose-up",
+      "command": "docker compose -f ${workspaceFolder}/compose-debug.yml up -d",
+      "isBackground": true,
+      "options": {
+        "env": {
+          "HOME": "${userHome}"
+        }
+      }
+    }
+  ]
+}

hello-world-tab-docker/Dockerfile

@@ -0,0 +1,14 @@
+FROM node:18.18.0 AS development
+
+WORKDIR /app
+COPY package*.json /app/
+RUN npm install
+COPY . /app/
+
+CMD ["npm", "start"]
+
+FROM development AS build
+RUN npm run build
+
+FROM nginx:1.21.3-alpine AS production
+COPY --from=build /app/build /usr/share/nginx/html

hello-world-tab-docker/README.md

@@ -0,0 +1,83 @@
+---
+page_type: sample
+languages:
+- typescript
+products:
+- office-teams
+- office
+name: Tab App with Azure Backend
+urlFragment: officedev-teamsfx-samples-tab-hello-world-tab-with-backend
+description: A Hello World app of Microsoft Teams Tab app which has a backend service.
+extensions:
+  createdDate: "2021-11-30"
+---
+# Getting Started with Hello World Tab with Backend Sample (Azure)
+
+Microsoft Teams supports the ability to run web-based UI inside "custom tabs" that users can install either for just themselves (personal tabs) or within a team or group chat context.
+
+Hello World Tab with Backend shows you how to build a tab app with an Azure Function as backend, how to get user login information with SSO and how to call Azure Function from frontend tab.
+
+![Hello World Tab](assets/sampleDemo.gif)
+
+> Note: This sample will only provision [single tenant](https://learn.microsoft.com/azure/active-directory/develop/single-and-multi-tenant-apps#who-can-sign-in-to-your-app) Azure Active Directory app. For multi-tenant support, please refer to this [wiki](https://aka.ms/teamsfx-multi-tenant).
+
+## This sample illustrates
+
+- How to use Teams Toolkit to create a Teams tab app.
+- How to use TeamsFx SDK to call Azure Functions.
+- How to use TeamsFx SDK in Azure Function to call Graph to get user info.
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/), supported versions: 16, 18
+- A Microsoft 365 account. If you do not have Microsoft 365 account, apply one from [Microsoft 365 developer program](https://developer.microsoft.com/en-us/microsoft-365/dev-program)
+- [Teams Toolkit Visual Studio Code Extension](https://aka.ms/teams-toolkit) version 5.0.0 and higher or [TeamsFx CLI](https://aka.ms/teamsfx-cli)
+
+# Note
+- This sample has adopted [On-Behalf-Of Flow](https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-on-behalf-of-flow) to implement SSO.
+
+- This sample uses Azure Function as middle-tier service, and make authenticated requests to call Graph from Azure Function.
+
+- Due to system webview limitations, users in the tenant with conditional access policies applied cannot consent permissions when conduct an OAuth flow within the Teams mobile clients, it would show error: "xxx requires you to secure this device...".
+
+## Minimal path to awesome
+
+### Run the app locally
+
+- From VS Code:
+    1. hit `F5` to start debugging. Alternatively open the `Run and Debug Activity` Panel and select `Debug in Teams (Edge)` or `Debug in Teams (Chrome)`.
+
+- From TeamsFx CLI:
+    1. Run command: `teamsapp provision --env local` .
+    1. Run command: `teamsapp deploy --env local` .
+    1. Run command: `teamsapp preview --env local` .
+
+### Deploy the app to Azure
+
+- From VS Code:
+    1. Sign into Azure by clicking the `Sign in to Azure` under the `ACCOUNTS` section from sidebar.
+    1. Click `Provision` from `LIFECYCLE` section or open the command palette and select: `Teams: Provision`.
+    1. Click `Deploy` or open the command palette and select: `Teams: Deploy`.
+
+- From TeamsFx CLI:
+    1. Run command: `teamsapp auth login azure`.
+    1. Run command: `teamsapp provision --env dev`.
+    1. Run command: `teamsapp deploy --env dev`.
+
+### Preview the app in Teams
+
+- From VS Code:
+    1. Open the `Run and Debug Activity` Panel. Select `Launch Remote (Edge)` or `Launch Remote (Chrome)` from the launch configuration drop-down.
+
+- From TeamsFx CLI:
+    1. Run command: `teamsapp preview --env dev`.
+
+## Version History
+
+|Date| Author| Comments|
+|---|---|---|
+|May 18, 2022| hund030 | update to support Teams Toolkit v4.0.0|
+|Dec 8, 2022| hund030 | update to support Teams Toolkit v5.0.0|
+
+## Feedback
+We really appreciate your feedback! If you encounter any issue or error, please report issues to us following the [Supporting Guide](https://github.com/OfficeDev/TeamsFx-Samples/blob/dev/SUPPORT.md). Meanwhile you can make [recording](https://aka.ms/teamsfx-record) of your journey with our product, they really make the product better. Thank you!