refactor: copilot plugin templates optimization

templates/csharp/copilot-plugin-from-scratch/GettingStarted.md

@@ -10,11 +10,12 @@
 > - A [Microsoft 365 account for development](https://docs.microsoft.com/microsoftteams/platform/toolkit/accounts).
 > - Join Microsoft 365 Copilot Plugin development [early access program](https://aka.ms/plugins-dev-waitlist).
 
-1. Right-click your project and select `Teams Toolkit > Prepare Teams App Dependencies`.
-2. If prompted, sign in with a Microsoft 365 account for the Teams organization you want to install the app to.
-3. Press F5, or select the `Debug > Start Debugging` menu in Visual Studio
-4. When Teams launches in the browser, click the `Apps` icon from Teams client left rail to open Teams app store and search for `Copilot`.
-5. Open the `Copilot` app and send a prompt to trigger your plugin.
+1. In the debug dropdown menu, select `Dev Tunnels > Create a Tunnel` (set authentication type to Public) or select an existing public dev tunnel.
+2. Right-click your project and select `Teams Toolkit > Prepare Teams App Dependencies`.
+3. If prompted, sign in with a Microsoft 365 account for the Teams organization you want to install the app to.
+4. Press F5, or select the `Debug > Start Debugging` menu in Visual Studio
+5. When Teams launches in the browser, click the `Apps` icon from Teams client left rail to open Teams app store and search for `Copilot`.
+6. Open the `Copilot` app and send a prompt to trigger your plugin.
 
 ## Learn more
 

templates/csharp/copilot-plugin-from-scratch/Repair.cs.tpl

@@ -20,18 +20,8 @@ namespace {{SafeProjectName}}
             // Get the query parameters from the request.
             string assignedTo = req.Query["assignedTo"];
 
-            // Create the repair records.
-            var repairRecords = new RepairModel[]
-            {
-                new RepairModel {
-                    Id = 1,
-                    Title = "Oil change",
-                    Description = "Need to drain the old engine oil and replace it with fresh oil to keep the engine lubricated and running smoothly.",
-                    AssignedTo = "Karin Blair",
-                    Date = "2023-05-23",
-                    Image = "https://www.howmuchisit.org/wp-content/uploads/2011/01/oil-change.jpg"
-                }
-            };
+            // Get the repair records.
+            var repairRecords = RepairData.GetRepairs();
 
             // Filter the repair records by the assignedTo query parameter.
             var repairs = repairRecords.Where(r =>
@@ -40,7 +30,7 @@ namespace {{SafeProjectName}}
                 var parts = r.AssignedTo.Split(' ');
 
                 // Check if the assignedTo query parameter matches the repair record's assignedTo value, or the repair record's firstName or lastName.
-                return r.assignedTo.Equals(assignedTo?.Trim(), StringComparison.InvariantCultureIgnoreCase) ||
+                return r.AssignedTo.Equals(assignedTo?.Trim(), StringComparison.InvariantCultureIgnoreCase) ||
                        parts[0].Equals(assignedTo?.Trim(), StringComparison.InvariantCultureIgnoreCase) ||
                        parts[1].Equals(assignedTo?.Trim(), StringComparison.InvariantCultureIgnoreCase);
             });

templates/csharp/copilot-plugin-from-scratch/RepairData.cs.tpl

@@ -0,0 +1,62 @@
+using {{SafeProjectName}}.Models;
+
+namespace {{SafeProjectName}}
+{
+    public class RepairData
+    {
+        public static List<RepairModel> GetRepairs()
+        {
+            return new List<RepairModel>
+            {
+                new() {
+                    Id = 1,
+                    Title = "Oil change",
+                    Description = "Need to drain the old engine oil and replace it with fresh oil to keep the engine lubricated and running smoothly.",
+                    AssignedTo = "Karin Blair",
+                    Date = "2023-05-23",
+                    Image = "https://www.howmuchisit.org/wp-content/uploads/2011/01/oil-change.jpg"
+                },
+                new() {
+                    Id = 2,
+                    Title = "Brake repairs",
+                    Description = "Conduct brake repairs, including replacing worn brake pads, resurfacing or replacing brake rotors, and repairing or replacing other components of the brake system.",
+                    AssignedTo = "Issac Fielder",
+                    Date = "2023-05-24",
+                    Image = "https://upload.wikimedia.org/wikipedia/commons/7/71/Disk_brake_dsc03680.jpg"
+                },
+                new() {
+                    Id = 3,
+                    Title = "Tire service",
+                    Description = "Rotate and replace tires, moving them from one position to another on the vehicle to ensure even wear and removing worn tires and installing new ones.",
+                    AssignedTo = "Karin Blair",
+                    Date = "2023-05-24",
+                    Image = "https://th.bing.com/th/id/OIP.N64J4jmqmnbQc5dHvTm-QAHaE8?pid=ImgDet&rs=1"
+                },
+                new() {
+                    Id = 4,
+                    Title = "Battery replacement",
+                    Description = "Remove the old battery and install a new one to ensure that the vehicle start reliably and the electrical systems function properly.",
+                    AssignedTo = "Ashley McCarthy",
+                    Date ="2023-05-25",
+                    Image = "https://i.stack.imgur.com/4ftuj.jpg"
+                },
+                new() {
+                    Id = 5,
+                    Title = "Engine tune-up",
+                    Description = "This can include a variety of services such as replacing spark plugs, air filters, and fuel filters to keep the engine running smoothly and efficiently.",
+                    AssignedTo = "Karin Blair",
+                    Date = "2023-05-28",
+                    Image = "https://th.bing.com/th/id/R.e4c01dd9f232947e6a92beb0a36294a5?rik=P076LRx7J6Xnrg&riu=http%3a%2f%2fupload.wikimedia.org%2fwikipedia%2fcommons%2ff%2ff3%2f1990_300zx_engine.jpg&ehk=f8KyT78eO3b%2fBiXzh6BZr7ze7f56TWgPST%2bY%2f%2bHqhXQ%3d&risl=&pid=ImgRaw&r=0"
+                },
+                new() {
+                    Id = 6,
+                    Title = "Suspension and steering repairs",
+                    Description = "This can include repairing or replacing components of the suspension and steering systems to ensure that the vehicle handles and rides smoothly.",
+                    AssignedTo = "Daisy Phillips",
+                    Date = "2023-05-29",
+                    Image = "https://i.stack.imgur.com/4v5OI.jpg"
+                }
+            };
+        }
+    }
+}

templates/csharp/copilot-plugin-from-scratch/appPackage/manifest.json.tpl

@@ -26,7 +26,7 @@
     "composeExtensions": [
         {
             "composeExtensionType": "apiBased",
-            "apiSpecificationFile": "apiSpecFiles/repair.yml",
+            "apiSpecificationFile": "apiSpecificationFiles/repair.yml",
             "commands": [
                 {
                     "id": "repair",
@@ -36,7 +36,7 @@
                         "compose",
                         "commandBox"
                     ],
-                    "apiResponseRenderingTemplateFile": "adaptiveCards/repair.json",
+                    "apiResponseRenderingTemplateFile": "responseTemplates/repair.json",
                     "parameters": [
                         {
                             "name": "assignedTo",

templates/js/copilot-plugin-from-scratch/README.md

@@ -37,12 +37,12 @@ The plugin allows Copilot to interact directly with third-party data, apps, and
 
 The following files can be customized and demonstrate an example implementation to get you started.
 
-| File                                   | Contents                                                                     |
-| -------------------------------------- | ---------------------------------------------------------------------------- |
-| `repair/function.json`                 | A configuration file that defines the function’s trigger and other settings. |
-| `src/index.js`                         | The main file of a function in Azure Functions.                              |
-| `appPackage/adaptiveCards/repair.json` | A generated Adaptive Card that is sent to Teams.                             |
-| `appPackage/apiSpecFiles/repair.yml`   | A file that describes the structure and behavior of the repair API.          |
+| File                                          | Contents                                                                     |
+| --------------------------------------------- | ---------------------------------------------------------------------------- |
+| `repair/function.json`                        | A configuration file that defines the function’s trigger and other settings. |
+| `src/index.js`                                | The main file of a function in Azure Functions.                              |
+| `appPackage/apiSpecificationFiles/repair.yml` | A file that describes the structure and behavior of the repair API.          |
+| `appPackage/responseTemplates/repair.json`    | A generated Adaptive Card that used to render API response.                  |
 
 The following are Teams Toolkit specific project files. You can [visit a complete guide on Github](https://github.com/OfficeDev/TeamsFx/wiki/Teams-Toolkit-Visual-Studio-Code-v5-Guide#overview) to understand how Teams Toolkit works.
 

templates/js/copilot-plugin-from-scratch/appPackage/manifest.json.tpl

@@ -26,7 +26,7 @@
     "composeExtensions": [
         {
             "composeExtensionType": "apiBased",
-            "apiSpecificationFile": "apiSpecFiles/repair.yml",
+            "apiSpecificationFile": "apiSpecificationFiles/repair.yml",
             "commands": [
                 {
                     "id": "repair",
@@ -36,7 +36,7 @@
                         "compose",
                         "commandBox"
                     ],
-                    "apiResponseRenderingTemplateFile": "adaptiveCards/repair.json",
+                    "apiResponseRenderingTemplateFile": "responseTemplates/repair.json",
                     "parameters": [
                         {
                             "name": "assignedTo",

templates/js/copilot-plugin-from-scratch/repair/index.js

@@ -1,6 +1,6 @@
 /* This code sample provides a starter kit to implement server side logic for your Teams App in TypeScript,
- * refer to https://docs.microsoft.com/en-us/azure/azure-functions/functions-reference for complete Azure Functions
- * developer guide.
+ * refer to https://docs.microsoft.com/en-us/azure/azure-functions/functions-reference for
+ * complete Azure Functions developer guide.
  */
 
 /**
@@ -22,28 +22,18 @@ module.exports = async function (context, req) {
   // Get the assignedTo query parameter.
   const assignedTo = req.query.assignedTo;
 
-  // Define the repair records.
-  const repairRecords = [
-    {
-      id: 1,
-      title: "Oil change",
-      description:
-        "Need to drain the old engine oil and replace it with fresh oil to keep the engine lubricated and running smoothly.",
-      assignedTo: "Karin Blair",
-      date: "2023-05-23",
-      image: "https://www.howmuchisit.org/wp-content/uploads/2011/01/oil-change.jpg",
-    },
-  ];
-
-  // If the assignedTo query parameter is not provided, return the response.
+  // If the assignedTo query parameter is not provided, return all repair records.
   if (!assignedTo) {
     return res;
   }
 
-  // Filter the repair information by the assignedTo query parameter.
+  // Get the repair records from the data.json file.
+  const repairRecords = require("../repairsData.json");
+
+  // Filter the repair records by the assignedTo query parameter.
   const repairs = repairRecords.filter((item) => {
-    const fullName = item.assignedTo.toLowerCase();
     const query = assignedTo.trim().toLowerCase();
+    const fullName = item.assignedTo.toLowerCase();
     const [firstName, lastName] = fullName.split(" ");
     return fullName === query || firstName === query || lastName === query;
   });

templates/js/copilot-plugin-from-scratch/repairsData.json

@@ -0,0 +1,50 @@
+[
+  {
+      "id": 1,
+      "title": "Oil change",
+      "description": "Need to drain the old engine oil and replace it with fresh oil to keep the engine lubricated and running smoothly.",
+      "assignedTo": "Karin Blair",
+      "date": "2023-05-23",
+      "image": "https://www.howmuchisit.org/wp-content/uploads/2011/01/oil-change.jpg"
+  },
+  {
+      "id": 2,
+      "title": "Brake repairs",
+      "description": "Conduct brake repairs, including replacing worn brake pads, resurfacing or replacing brake rotors, and repairing or replacing other components of the brake system.",
+      "assignedTo": "Issac Fielder",
+      "date": "2023-05-24",
+      "image": "https://upload.wikimedia.org/wikipedia/commons/7/71/Disk_brake_dsc03680.jpg"
+  },
+  {
+      "id": 3,
+      "title": "Tire service",
+      "description": "Rotate and replace tires, moving them from one position to another on the vehicle to ensure even wear and removing worn tires and installing new ones.",
+      "assignedTo": "Karin Blair",
+      "date": "2023-05-24",
+      "image": "https://th.bing.com/th/id/OIP.N64J4jmqmnbQc5dHvTm-QAHaE8?pid=ImgDet&rs=1"
+  },
+  {
+      "id": 4,
+      "title": "Battery replacement",
+      "description": "Remove the old battery and install a new one to ensure that the vehicle start reliably and the electrical systems function properly.",
+      "assignedTo": "Ashley McCarthy",
+      "date": "2023-05-25",
+      "image": "https://i.stack.imgur.com/4ftuj.jpg"
+  },
+  {
+      "id": 5,
+      "title": "Engine tune-up",
+      "description": "This can include a variety of services such as replacing spark plugs, air filters, and fuel filters to keep the engine running smoothly and efficiently.",
+      "assignedTo": "Karin Blair",
+      "date": "2023-05-28",
+      "image": "https://th.bing.com/th/id/R.e4c01dd9f232947e6a92beb0a36294a5?rik=P076LRx7J6Xnrg&riu=http%3a%2f%2fupload.wikimedia.org%2fwikipedia%2fcommons%2ff%2ff3%2f1990_300zx_engine.jpg&ehk=f8KyT78eO3b%2fBiXzh6BZr7ze7f56TWgPST%2bY%2f%2bHqhXQ%3d&risl=&pid=ImgRaw&r=0"
+  },
+  {
+      "id": 6,
+      "title": "Suspension and steering repairs",
+      "description": "This can include repairing or replacing components of the suspension and steering systems to ensure that the vehicle handles and rides smoothly.",
+      "assignedTo": "Daisy Phillips",
+      "date": "2023-05-29",
+      "image": "https://i.stack.imgur.com/4v5OI.jpg"
+  }
+]

templates/js/message-extension-copilot/.vscode/launch.json

@@ -23,6 +23,28 @@
             },
             "internalConsoleOptions": "neverOpen"
         },
+        {
+            "name": "Launch Remote in Outlook (Edge)",
+            "type": "msedge",
+            "request": "launch",
+            "url": "https://outlook.office.com/mail?${account-hint}",
+            "presentation": {
+                "group": "group 2: Outlook",
+                "order": 3
+            },
+            "internalConsoleOptions": "neverOpen"
+        },
+        {
+            "name": "Launch Remote in Outlook (Chrome)",
+            "type": "chrome",
+            "request": "launch",
+            "url": "https://outlook.office.com/mail?${account-hint}",
+            "presentation": {
+                "group": "group 2: Outlook",
+                "order": 3
+            },
+            "internalConsoleOptions": "neverOpen"
+        },
         {
             "name": "Launch Remote in Copilot (Edge)",
             "type": "msedge",
@@ -73,6 +95,34 @@
             },
             "internalConsoleOptions": "neverOpen"
         },
+        {
+            "name": "Launch App in Outlook (Edge)",
+            "type": "msedge",
+            "request": "launch",
+            "url": "https://outlook.office.com/mail?${account-hint}",
+            "cascadeTerminateToConfigurations": [
+                "Attach to Local Service"
+            ],
+            "presentation": {
+                "group": "all",
+                "hidden": true
+            },
+            "internalConsoleOptions": "neverOpen"
+        },
+        {
+            "name": "Launch App in Outlook (Chrome)",
+            "type": "chrome",
+            "request": "launch",
+            "url": "https://outlook.office.com/mail?${account-hint}",
+            "cascadeTerminateToConfigurations": [
+                "Attach to Local Service"
+            ],
+            "presentation": {
+                "group": "all",
+                "hidden": true
+            },
+            "internalConsoleOptions": "neverOpen"
+        },
         {
             "name": "Launch App in Copilot (Edge)",
             "type": "msedge",
@@ -141,6 +191,32 @@
             },
             "stopAll": true
         },
+        {
+            "name": "Debug in Outlook (Edge)",
+            "configurations": [
+                "Launch App in Outlook (Edge)",
+                "Attach to Local Service"
+            ],
+            "preLaunchTask": "Start Teams App Locally",
+            "presentation": {
+                "group": "group 2: Outlook",
+                "order": 1
+            },
+            "stopAll": true
+        },
+        {
+            "name": "Debug in Outlook (Chrome)",
+            "configurations": [
+                "Launch App in Outlook (Chrome)",
+                "Attach to Local Service"
+            ],
+            "preLaunchTask": "Start Teams App Locally",
+            "presentation": {
+                "group": "group 2: Outlook",
+                "order": 2
+            },
+            "stopAll": true
+        },
         {
             "name": "Debug in Copilot (Edge)",
             "configurations": [

templates/ts/copilot-plugin-from-scratch/README.md

@@ -37,12 +37,12 @@ The plugin allows Copilot to interact directly with third-party data, apps, and
 
 The following files can be customized and demonstrate an example implementation to get you started.
 
-| File                                   | Contents                                                                     |
-| -------------------------------------- | ---------------------------------------------------------------------------- |
-| `repair/function.json`                 | A configuration file that defines the function’s trigger and other settings. |
-| `src/index.ts`                         | The main file of a function in Azure Functions.                              |
-| `appPackage/adaptiveCards/repair.json` | A generated Adaptive Card that is sent to Teams.                             |
-| `appPackage/apiSpecFiles/repair.yml`   | A file that describes the structure and behavior of the repair API.          |
+| File                                          | Contents                                                                     |
+| --------------------------------------------- | ---------------------------------------------------------------------------- |
+| `repair/function.json`                        | A configuration file that defines the function’s trigger and other settings. |
+| `src/index.ts`                                | The main file of a function in Azure Functions.                              |
+| `appPackage/apiSpecificationFiles/repair.yml` | A file that describes the structure and behavior of the repair API.          |
+| `appPackage/responseTemplates/repair.json`    | A generated Adaptive Card that used to render API response.                  |
 
 The following are Teams Toolkit specific project files. You can [visit a complete guide on Github](https://github.com/OfficeDev/TeamsFx/wiki/Teams-Toolkit-Visual-Studio-Code-v5-Guide#overview) to understand how Teams Toolkit works.
 

templates/ts/copilot-plugin-from-scratch/appPackage/manifest.json.tpl

@@ -26,7 +26,7 @@
     "composeExtensions": [
         {
             "composeExtensionType": "apiBased",
-            "apiSpecificationFile": "apiSpecFiles/repair.yml",
+            "apiSpecificationFile": "apiSpecificationFiles/repair.yml",
             "commands": [
                 {
                     "id": "repair",
@@ -36,7 +36,7 @@
                         "compose",
                         "commandBox"
                     ],
-                    "apiResponseRenderingTemplateFile": "adaptiveCards/repair.json",
+                    "apiResponseRenderingTemplateFile": "responseTemplates/repair.json",
                     "parameters": [
                         {
                             "name": "assignedTo",