Merge remote-tracking branch 'origin/main' into v-pritka/meetings-eve…

…nt-update

README.md

@@ -41,7 +41,7 @@ The [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDev
 |8|Tab SSO               | Microsoft Teams sample app for tabs Azure AD SSO                                      |[View][tab-sso#cs] | [View][tab-sso#ts] ![toolkit-icon](assets/toolkit-icon.png) 
 |9|Config Tab Authentication               | Microsoft Teams sample app for config tabs Azure AD authentication | [View][tab-channel-group=config-csharp]                      | | |[View](/samples/tab-channel-group-config-page-auth/csharp/demo-manifest/tab-channel-group-config-page-auth.zip)
 |10|Deep Link consuming Subentity ID      | Microsoft Teams sample app for demonstrating deeplink from Bot chat to Tab consuming Subentity ID | [View][tab-deeplink#csharp]                       | | [View][tab-deeplink#nodejs] ![toolkit-icon](assets/toolkit-icon.png) |
-|11|Integrate graph toolkit component in teams tab      | Microsoft Teams tab sample app for demonstrating graph toolkit component |[View][tab-graph-toolkit#csharp]|[View][tab-graph-toolkit#js]|
+|11|Integrate graph toolkit component in teams tab      | Microsoft Teams tab sample app for demonstrating graph toolkit component |[View][tab-graph-toolkit#csharp]|[View][tab-graph-toolkit#js] ![toolkit-icon](assets/toolkit-icon.png)|
 |12|Device permissions      | Microsoft Teams tab sample app for demonstrating device permissions |                      | [View][tab-device-permissions#js] ![toolkit-icon](assets/toolkit-icon.png) ||[View](/samples/tab-device-permissions/nodejs/demo-manifest/tab-device-permissions.zip)|
 |13|Build tabs with Adaptive Cards | Microsoft Teams tab sample code which demonstrates how to [Build tabs with Adaptive Cards](https://docs.microsoft.com/microsoftteams/platform/tabs/how-to/build-adaptive-card-tabs) | [View][tab-adaptive-cards#csharp]|| [View][tab-adaptive-cards#js] ![toolkit-icon](assets/toolkit-icon.png) |[View](/samples/tab-adaptive-cards/csharp/demo-manifest/tab-adaptive-card.zip)|
 |14|Tab in stage view   | Microsoft Teams tab sample app for demonstrating tab in stage view |[View][tab-stage-view#csharp] |          | [View][tab-stage-view#js] ![toolkit-icon](assets/toolkit-icon.png) |[View](/samples/tab-stage-view/csharp/demo-manifest/tab-stage-view.zip)|
@@ -170,7 +170,7 @@ The [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDev
 |7|Region Selection App | This app contains a bot and Tab which is helpful to set the region |[View][region-selection-app#cs]     ||[View](/samples/app-region-selection/csharp/demo-manifest/app-region-selection.zip)
 |8|App Localization | Microsoft Teams app localization using Bot and Tab |[View][app-localization#cs]  |[View][app-localization#js] ![toolkit-icon](assets/toolkit-icon.png) |[View](/samples/app-localization/csharp/demo-manifest/app-localization.zip)
 |9|Details Tab in Meetings | Microsoft Teams meeting extensibility sample for iteracting with Details Tab in-meeting |[View][meetings-details-tab#cs]  |[View][meetings-details-tab#js] ![toolkit-icon](assets/toolkit-icon.png) |[View](/samples/meetings-details-tab/csharp/demo-manifest/meetings-details-tab.zip)
-|10|App SSO | Microsoft Teams app SSO for Tab, Bot, ME - search, action, linkunfurl |[View][app-sso#cs] |[View][app-sso#js]|[View](/samples/app-sso/csharp/demo-manifest/App-SSO.zip)
+|10|App SSO | Microsoft Teams app SSO for Tab, Bot, ME - search, action, linkunfurl |[View][app-sso#cs] |[View][app-sso#js] ![toolkit-icon](assets/toolkit-icon.png) |[View](/samples/app-sso/csharp/demo-manifest/App-SSO.zip)
 |11|Meetings Stage View | Enable and configure your apps for Teams meetings to use in stage view |[View][meetings-stage-view#cs] |[View][meetings-stage-view#js] ![toolkit-icon](assets/toolkit-icon.png) |[View](/samples/meetings-stage-view/csharp/demo-manifest/Meeting-stage-view.zip)
 |12|Meeting Events | Get real time meeting events  |[View][meetings-events#cs] | [View][meetings-events#js] ![toolkit-icon](assets/toolkit-icon.png) |[View](/samples/meetings-events/csharp/demo-manifest/Meetings-Events.zip)
 |13|Meeting Recruitment App | Sample app showing meeting app experience for interview scenario.|[View][meeting-recruitment-app#cs] |[View][meeting-recruitment-app#js] ![toolkit-icon](assets/toolkit-icon.png)|[View](/samples/meeting-recruitment-app/csharp/demo-manifest/Meeting-Recruitment-App.zip)
@@ -199,6 +199,7 @@ The [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDev
 |36|meetings-audio-state|This is an sample tab (side panel) application which shows how to mute/unmute Teams meeting audio using toggle Incoming Client Audio API.||[View][meetings-audio-state#nodejs] ![toolkit-icon](assets/toolkit-icon.png)|
 |37|meetings-context-app|This sample shows the contents of meeting tab context object in a meeting tab and using bot's meeting API, meeting participant details and meeting details are sent to user.|[View][meetings-context-app#csharp]|[View][meetings-context-app#nodejs] ![toolkit-icon](assets/toolkit-icon.png)|
 
+
 ## Application templates
 
 |    | App Name       | Description                                                                      | Code   |

samples/app-cache-meetings/nodejs/Readme.md

@@ -20,6 +20,9 @@ This sample feature shows how to improve the subsequent loading time of an App t
 
 **Interaction with App**
 ![App-Cache](Images/AppCacheSample.gif)  
+
+**Change of App theme when Teams theme changes to (light,dark and contrast)**.
+![App-Cache-ChangeTheme](Images/AppCacheThemeChange.gif) 
 
 ## Prerequisites
 
@@ -104,13 +107,26 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
 **AppCache in second tab with Unique Id Loaded :** 
 ![Team Context](Images/3.TabTwo.png)
 
+**Teams Theme Changes To Dark :** 
+![Team Context](Images/T1-dark-Theme.PNG)
+
+**Teams Theme Changes To Light :** 
+![Team Context](Images/T2.light-theme.PNG)
+
+**Teams Theme Changes To Contrast :** 
+![Team Context](Images/T1-contrast-theme.PNG)
+
 > Note open debug panel **Proto Task Manager** ( `Ctrl+Shift+Alt+8` on Windows, `Cmd+Shift+Option+8` on Mac), navigate to App Caching section you should see these apps getting cached/loaded. Non-cacheable apps will not appear in this panel.
 
+**Note** In Teams T1, there is no `light theme`, only we get two themes in meetings (`dark` and `contrast`). By default Teams T1 default theme is `dark`. and where as in Teams T2 we get three themes. Default theme is light and remaining other two themes are `dark` and `contrast`.
+
 
 ## Further reading
 [Upload your app in Teams](https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/deploy-and-publish/apps-upload)
 
 [Manage custom and sideloaded apps in Teams admin center](https://learn.microsoft.com/en-us/microsoftteams/teams-custom-app-policies-and-settings)
 
+[Handle theme change](https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/access-teams-context?tabs=Json-v2%2Cteamsjs-v2%2Cdefault#handle-theme-change)
+
 
 <img src="https://pnptelemetry.azurewebsites.net/microsoft-teams-samples/samples/app-cache-meetings-nodejs" />

samples/app-cache-meetings/nodejs/src/components/app-cache-tab.tsx

@@ -6,19 +6,20 @@
 import { useState } from "react";
 import React from "react";
 import * as microsoftTeams from "@microsoft/teams-js";
+import "../components/index.css";
 
 /// </summary>
 ///  logitem to show the activity log
 /// </summary>
 function logItem(action: string, actionColor: string, message: string) {
-   
+
     return ("<span style='font-weight:bold;color:" +
-    actionColor +
-    "'>" +
-    action +
-    "</span> " +
-    message +
-    "</br>");
+        actionColor +
+        "'>" +
+        action +
+        "</span> " +
+        message +
+        "</br>");
 }
 
 /// </summary>
@@ -44,7 +45,7 @@ const beforeUnloadHandler = (
 /// </summary>
 const loadHandler = (
     setItems: React.Dispatch<React.SetStateAction<string[]>>,
-    data: microsoftTeams.LoadContext) => { 
+    data: microsoftTeams.LoadContext) => {
     setItems((Items) => [...Items, logItem("OnLoad", "blue", "Started for " + data.entityId)]);
 
     // Use the entityId, contentUrl to route to the correct page within your App and then invoke notifySuccess
@@ -54,14 +55,43 @@ const loadHandler = (
 };
 
 const AppCacheTab = () => {
+    let app = microsoftTeams.app;
     const [items, setItems] = useState<string[]>([]);
     const [title, setTitle] = useState("App Caching Sample");
-
+    const [appTheme, setAppTheme] = useState("");
+
     React.useEffect(() => {
-        let app = microsoftTeams.app;
         app.initialize().then(app.getContext).then((context: any) => {
             app.notifySuccess();
 
+            // Get default theme from app context and set app-theme
+            let defaultTheme = context.app.theme;
+
+            switch (defaultTheme) {
+                case 'dark':
+                    setAppTheme("theme-dark");
+                    break;
+                default:
+                    setAppTheme('theme-light');
+            }
+
+            // Handle app theme when 'Teams' theme changes
+            microsoftTeams.app.registerOnThemeChangeHandler(function (theme) {
+                switch (theme) {
+                    case 'dark':
+                        setAppTheme('theme-dark');
+                        break;
+                    case 'default':
+                        setAppTheme('theme-light');
+                        break;
+                    case 'contrast':
+                        setAppTheme('theme-contrast');
+                        break;
+                    default:
+                        return setAppTheme('theme-dark');
+                }
+            });
+
             // Check if the framecontext is set to sidepanel
             if (context.page.frameContext === "sidePanel") {
                 const loadContext = logItem("Success", "green", "Loaded Teams context");
@@ -72,7 +102,7 @@ const AppCacheTab = () => {
 
                 microsoftTeams.teamsCore.registerBeforeUnloadHandler((readyToUnload: any) => {
                     const result = beforeUnloadHandler(setItems, readyToUnload);
-                   
+
                     return result;
                 });
 
@@ -97,7 +127,7 @@ const AppCacheTab = () => {
     }, []);
 
     return (
-        <div>
+        <div className={appTheme}>
             <h3>{title}</h3>
             {items.map((item) => {
                 return <div dangerouslySetInnerHTML={{ __html: item }} />;

samples/app-cache-meetings/nodejs/src/index.css

@@ -11,3 +11,19 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+/* Styles for App theme depending on 'Teams' theme change */
+.theme-dark{
+  background-color: #242424;
+  color: white;
+}
+
+.theme-light{
+  background-color: white;
+  color: #242424;
+}
+
+.theme-contrast{
+  background-color: black;
+  color: chartreuse;
+}

samples/app-complete-auth/nodejs/.gitignore

@@ -21,3 +21,47 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+#############
+
+# TeamsFx files
+env/.env.*.user
+env/.env.local
+.localConfigs
+appManifest/build
+/build
+
+# dependencies
+node_modules/
+
+# misc
+.env
+.deployment
+.DS_Store
+
+# build
+lib/

samples/app-complete-auth/nodejs/.vscode/extensions.json

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

samples/app-complete-auth/nodejs/.vscode/launch.json

@@ -0,0 +1,73 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch App (Edge)",
+            "type": "msedge",
+            "request": "launch",
+            "url": "https://teams.microsoft.com/l/app/${{local:TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
+            "cascadeTerminateToConfigurations": [
+                "Attach to Local Service"
+            ],
+            "presentation": {
+                "group": "all",
+                "hidden": true
+            },
+            "internalConsoleOptions": "neverOpen"
+        },
+        {
+            "name": "Launch App (Chrome)",
+            "type": "chrome",
+            "request": "launch",
+            "url": "https://teams.microsoft.com/l/app/${{local:TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
+            "cascadeTerminateToConfigurations": [
+                "Attach to Local Service"
+            ],
+            "presentation": {
+                "group": "all",
+                "hidden": true
+            },
+            "internalConsoleOptions": "neverOpen"
+        },
+        {
+            "name": "Attach to Local Service",
+            "type": "node",
+            "request": "attach",
+            "port": 9239,
+            "restart": true,
+            "presentation": {
+                "group": "all",
+                "hidden": true
+            },
+            "internalConsoleOptions": "neverOpen"
+        }
+    ],
+    "compounds": [
+        {
+            "name": "Debug (Edge)",
+            "configurations": [
+                "Launch App (Edge)",
+                "Attach to Local Service"
+            ],
+            "preLaunchTask": "Start Teams App Locally",
+            "presentation": {
+                "group": "all",
+                "order": 1
+            },
+            "stopAll": true
+        },
+        {
+            "name": "Debug (Chrome)",
+            "configurations": [
+                "Launch App (Chrome)",
+                "Attach to Local Service"
+            ],
+            "preLaunchTask": "Start Teams App Locally",
+            "presentation": {
+                "group": "all",
+                "order": 2
+            },
+            "stopAll": true
+        }
+    ]
+}

samples/app-complete-auth/nodejs/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+    "debug.onTaskErrors": "abort",
+    "json.schemas": [
+        {
+            "fileMatch": [
+                "/aad.*.json"
+            ],
+            "schema": {}
+        }
+    ]
+}