build: preview release 20240517

.github/workflows/cd.yml

@@ -189,11 +189,11 @@ jobs:
           git commit -m "build: replace sideloading placeholders"
 
       - name: disable chat participant environment variable
-        if: ${{ github.event_name == 'workflow_dispatch' && (github.event.inputs.preid != 'alpha') }}
+        if: ${{ github.event_name == 'workflow_dispatch' && (github.event.inputs.preid != 'alpha' && github.event.inputs.preid != 'beta') }}
         run: bash .github/scripts/chat-participant-disabled.sh
 
       - name: disable api proposals in package.json
-        if: ${{ github.event_name == 'workflow_dispatch' && (github.event.inputs.preid != 'alpha') }}
+        if: ${{ github.event_name == 'workflow_dispatch' && (github.event.inputs.preid != 'alpha' && github.event.inputs.preid != 'beta') }}
         uses: jossef/[email protected]
         with:
           file: packages/vscode-extension/package.json
@@ -202,7 +202,7 @@ jobs:
           parse_json: true
 
       - name: disable chat participant in package.json
-        if: ${{ github.event_name == 'workflow_dispatch' && (github.event.inputs.preid != 'alpha') }}
+        if: ${{ github.event_name == 'workflow_dispatch' && (github.event.inputs.preid != 'alpha' && github.event.inputs.preid != 'beta') }}
         uses: jossef/[email protected]
         with:
           file: packages/vscode-extension/package.json

packages/vscode-extension/package.json

@@ -1440,6 +1440,7 @@
         "id": "ms-teams-vscode-extension.teams",
         "name": "teams",
         "description": "%teamstoolkit.chatParticipants.teams.description%",
+        "when": "fx-extension.isChatParticipantEnabled",
         "commands": [
           {
             "name": "create",
@@ -1455,6 +1456,7 @@
         "id": "ms-teams-vscode-extension.office",
         "name": "office",
         "description": "%teamstoolkit.chatParticipants.officeAddIn.description%",
+        "when": "fx-extension.isChatParticipantEnabled",
         "commands": [
           {
             "name": "create",
@@ -1523,6 +1525,7 @@
     "@types/react-dom": "^17.0.2",
     "@types/react-router-dom": "^5.1.7",
     "@types/react-syntax-highlighter": "^15.5.5",
+    "@types/semver": "^7.3.4",
     "@types/sinon": "^9.0.9",
     "@types/string-similarity": "^4.0.2",
     "@types/tmp": "^0.2.0",
@@ -1615,6 +1618,7 @@
     "react-collapsible": "^2.10.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-syntax-highlighter": "^15.5.0",
+    "semver": "^7.5.2",
     "string-similarity": "^4.0.4",
     "tmp": "^0.2.1",
     "validator": "^13.7.0",

packages/vscode-extension/package.nls.json

@@ -468,7 +468,7 @@
   "teamstoolkit.chatParticipants.nextStep.whatsNext": "What should I do next?",
   "teamstoolkit.chatParticipants.create.sample": "Scaffold this sample",
   "teamstoolkit.chatParticipants.create.template": "Create this template",
-  "teamstoolkit.chatParticipants.create.tooGeneric": "Your app description is too generic. To find relevant templates or samples, give specific details of your app's capabilities or technologies.\n\nE.g. Instead of saying 'create a chat bot', you could specify 'create a chat bot that answers FAQs for customer support.'",
+  "teamstoolkit.chatParticipants.create.tooGeneric": "Your app description is too generic. To find relevant templates or samples, give specific details of your app's capabilities or technologies.\n\nE.g. Instead of saying 'create a bot', you could specify 'create a bot template' or 'create a notification bot that sends user the stock updates'.",
   "teamstoolkit.chatParticipants.create.oneMatched": "We've found 1 project that matches your description. Take a look at it below.\n\n",
   "teamstoolkit.chatParticipants.create.multipleMatched": "We've found %d projects that match your description. Take a look at them below.\n",
   "teamstoolkit.chatParticipants.create.noMatched": "I cannot find any matching templates or samples. Refine your app description or explore other templates.",

packages/vscode-extension/src/chat/api/vscode.proposed.languageModels.d.ts

@@ -95,8 +95,11 @@ declare module 'vscode' {
 		 *   console.error(e);
 		 * }
 		 * ```
+		 *
+		 * To cancel the stream, the consumer can {@link CancellationTokenSource.cancel cancel} the token that was used to make the request
+		 * or break from the for-loop.
 		 */
-		stream: AsyncIterable<string>;
+		text: AsyncIterable<string>;
 	}
 
 	/**

packages/vscode-extension/src/chat/commands/create/createCommandHandler.ts

@@ -73,7 +73,7 @@ export default async function createCommandHandler(
     response.markdown(localize("teamstoolkit.chatParticipants.create.oneMatched"));
     const firstMatch = matchedResult[0];
     const describeProjectChatMessages = [
-      describeProjectSystemPrompt,
+      describeProjectSystemPrompt(),
       new LanguageModelChatMessage(
         LanguageModelChatMessageRole.User,
         `The project you are looking for is '${JSON.stringify({
@@ -130,7 +130,7 @@ export default async function createCommandHandler(
       response.markdown(`- ${project.name}: `);
 
       const brieflyDescribeProjectChatMessages = [
-        brieflyDescribeProjectSystemPrompt,
+        brieflyDescribeProjectSystemPrompt(),
         new LanguageModelChatMessage(
           LanguageModelChatMessageRole.User,
           `The project you are looking for is '${JSON.stringify(project)}'.`

packages/vscode-extension/src/chat/commands/create/helper.ts

@@ -45,8 +45,11 @@ export async function matchProject(
   if (!request.prompt.includes("template")) {
     // also search in samples
     matchedProjects.push(...(await matchSamples(request, token, telemetryMetadata)));
+    matchedProjects.sort((a, b) => b.score - a.score);
+  } else {
+    matchedProjects.sort((a, b) => b.score - a.score);
+    matchedProjects.splice(2);
   }
-  matchedProjects.sort((a, b) => b.score - a.score);
   const result: ProjectMetadata[] = [];
   const matchedProjectIds = new Set<string>();
   for (const { id, score } of matchedProjects) {

packages/vscode-extension/src/chat/commands/nextstep/nextstepCommandHandler.ts

@@ -112,7 +112,7 @@ export async function describeStep(
   telemetryMetadata: IChatTelemetryData
 ): Promise<string> {
   const messages = [
-    describeStepSystemPrompt,
+    describeStepSystemPrompt(),
     new LanguageModelChatMessage(
       LanguageModelChatMessageRole.User,
       `The content is '${JSON.stringify({

packages/vscode-extension/src/chat/prompts.ts

@@ -38,22 +38,26 @@
   );
 };
 
-export const describeProjectSystemPrompt = new vscode.LanguageModelChatMessage(
-  vscode.LanguageModelChatMessageRole.System,
-  `You are an advisor for Teams App developers. You need to describe the project based on the name and description field of user's JSON content. You should control the output between 50 and 80 words.`
-);
-export const brieflyDescribeProjectSystemPrompt = new vscode.LanguageModelChatMessage(
-  vscode.LanguageModelChatMessageRole.System,
-  `You are an advisor for Teams App developers. You need to describe the project based on the name and description field of user's JSON content. You should control the output between 30 and 40 words.`
-);
-export const describeScenarioSystemPrompt = new vscode.LanguageModelChatMessage(
-  vscode.LanguageModelChatMessageRole.System,
-  `You are an advisor for Teams App developers. You need to describe the project based on the name and description field of user's JSON content. You should control the output between 50 and 80 words.`
-);
-export const describeStepSystemPrompt = new vscode.LanguageModelChatMessage(
-  vscode.LanguageModelChatMessageRole.System,
-  `You are an advisor for Teams App developers. You need to reorganize the content. You should control the output between 30 and 50 words. Don't split the content into multiple sentences.`
-);
+export const describeProjectSystemPrompt = () =>
+  new vscode.LanguageModelChatMessage(
+    vscode.LanguageModelChatMessageRole.System,
+    `You are an advisor for Teams App developers. You need to describe the project based on the name and description field of user's JSON content. You should control the output between 50 and 80 words.`
+  );
+export const brieflyDescribeProjectSystemPrompt = () =>
+  new vscode.LanguageModelChatMessage(
+    vscode.LanguageModelChatMessageRole.System,
+    `You are an advisor for Teams App developers. You need to describe the project based on the name and description field of user's JSON content. You should control the output between 30 and 40 words.`
+  );
+export const describeScenarioSystemPrompt = () =>
+  new vscode.LanguageModelChatMessage(
+    vscode.LanguageModelChatMessageRole.System,
+    `You are an advisor for Teams App developers. You need to describe the project based on the name and description field of user's JSON content. You should control the output between 50 and 80 words.`
+  );
+export const describeStepSystemPrompt = () =>
+  new vscode.LanguageModelChatMessage(
+    vscode.LanguageModelChatMessageRole.System,
+    `You are an advisor for Teams App developers. You need to reorganize the content. You should control the output between 30 and 50 words. Don't split the content into multiple sentences.`
+  );
 
 export function getTemplateMatchChatMessages(
   projectMetadata: ProjectMetadata[],

packages/vscode-extension/src/chat/utils.ts

@@ -19,8 +19,8 @@ export async function verbatimCopilotInteraction(
   if (!familyMatch) {
     throw new Error("No chat models available for the specified family");
   }
-  const chatRequest = await familyMatch.sendRequest(messages, {}, token);
-  for await (const fragment of chatRequest.stream) {
+  const chatResponse = await familyMatch.sendRequest(messages, {}, token);
+  for await (const fragment of chatResponse.text) {
     response.markdown(fragment);
   }
 }
@@ -36,9 +36,9 @@ export async function getCopilotResponseAsString(
   if (!familyMatch) {
     throw new Error("No chat models available for the specified family");
   }
-  const chatRequest = await familyMatch.sendRequest(messages, {}, token);
+  const chatResponse = await familyMatch.sendRequest(messages, {}, token);
   let response = "";
-  for await (const fragment of chatRequest.stream) {
+  for await (const fragment of chatResponse.text) {
     response += fragment;
   }
   return response;

packages/vscode-extension/src/controls/declarations.d.ts

@@ -14,3 +14,4 @@ declare const mermaid: {
 };
 declare const panelType: string;
 declare const containerType: string;
+declare const shouldShowChat: string;

packages/vscode-extension/src/controls/index.tsx

@@ -38,6 +38,7 @@ function App(props: any) {
   } else if (panelType === PanelType.RestifyServerNotificationBotReadme) {
     initialIndex = 5;
   }
+
   return (
     <MemoryRouter
       initialEntries={[
@@ -50,7 +51,10 @@ function App(props: any) {
       ]}
       initialIndex={initialIndex}
     >
-      <Route path="/sample-gallery" component={SampleGallery} />
+      <Route
+        path="/sample-gallery"
+        render={() => <SampleGallery shouldShowChat={shouldShowChat} />}
+      />
       <Route path="/survey" component={Survey} />
       <Route path="/respond-to-card-actions" component={WorkflowBot} />
       <Route path="/account-help" component={AccountHelp} />

packages/vscode-extension/src/controls/sampleGallery/SampleGallery.tsx

@@ -21,17 +21,20 @@ import SampleCard from "./sampleCard";
 import SampleDetailPage from "./sampleDetailPage";
 import SampleFilter from "./sampleFilter";
 import SampleListItem from "./sampleListItem";
-import { IsChatParticipantEnabled } from "../../chat/consts";
 
-export default class SampleGallery extends React.Component<unknown, SampleGalleryState> {
+interface SampleGalleryProps {
+  shouldShowChat: string;
+}
+
+export default class SampleGallery extends React.Component<SampleGalleryProps, SampleGalleryState> {
   private samples: SampleInfo[] = [];
   private filterOptions: SampleFilterOptionType = {
     capabilities: [],
     languages: [],
     technologies: [],
   };
 
-  constructor(props: unknown) {
+  constructor(props: SampleGalleryProps) {
     super(props);
     this.state = {
       loading: true,
@@ -62,7 +65,7 @@ export default class SampleGallery extends React.Component<unknown, SampleGaller
         </div>
         <div className="title">
           <h1>Samples</h1>
-          {IsChatParticipantEnabled ? (
+          {this.props.shouldShowChat === "true" ? (
             <h3>
               Explore our sample gallery filled with solutions that work seamlessly with Teams
               Toolkit. Need help choosing? Let{" "}

packages/vscode-extension/src/controls/webviewPanel.ts

@@ -4,7 +4,12 @@
 import * as path from "path";
 import * as vscode from "vscode";
 
-import { Correlator, SampleConfig, sampleProvider } from "@microsoft/teamsfx-core";
+import {
+  Correlator,
+  SampleConfig,
+  isChatParticipantEnabled,
+  sampleProvider,
+} from "@microsoft/teamsfx-core";
 
 import * as extensionPackage from "../../package.json";
 import { TreatmentVariableValue } from "../exp/treatmentVariables";
@@ -312,6 +317,8 @@ export class WebviewPanel {
       vscode.Uri.joinPath(globalVariables.context.extensionUri, "out", "resource", "mermaid.min.js")
     );
 
+    const allowChat = isChatParticipantEnabled();
+
     // Use a nonce to to only allow specific scripts to be run
     const nonce = this.getNonce();
     return `<!DOCTYPE html>
@@ -328,6 +335,7 @@ export class WebviewPanel {
             <script>
               const vscode = acquireVsCodeApi();
               const panelType = '${panelType}';
+              const shouldShowChat = '${allowChat ? "true" : "false"}';
             </script>
             <script nonce="${nonce}" type="module" src="${scriptUri.toString()}"></script>
             <script nonce="${nonce}" type="text/javascript" src="${dompurifyUri.toString()}"></script>

packages/vscode-extension/src/extension.ts

@@ -4,6 +4,7 @@
 "use strict";
 
 import * as vscode from "vscode";
+import * as semver from "semver";
 
 import {
   AppPackageFolderName,
@@ -18,6 +19,7 @@ import {
   Correlator,
   VersionState,
   initializePreviewFeatureFlags,
+  isChatParticipantEnabled,
   setRegion,
 } from "@microsoft/teamsfx-core";
 
@@ -105,6 +107,9 @@ import { registerOfficeTaskAndDebugEvents } from "./debug/officeTaskHandler";
 export let VS_CODE_UI: VsCodeUI;
 
 export async function activate(context: vscode.ExtensionContext) {
+  process.env[FeatureFlags.ChatParticipant] = (
+    IsChatParticipantEnabled && semver.gte(vscode.version, "1.90.0-insider")
+  ).toString();
   initializePreviewFeatureFlags();
 
   configMgr.registerConfigChangeCallback();
@@ -123,8 +128,9 @@ export async function activate(context: vscode.ExtensionContext) {
 
   registerInternalCommands(context);
 
-  if (IsChatParticipantEnabled) {
+  if (isChatParticipantEnabled()) {
     registerChatParticipant(context);
+
     registerOfficeChatParticipant(context);
   }
 
@@ -149,11 +155,9 @@ export async function activate(context: vscode.ExtensionContext) {
   await vscode.commands.executeCommand(
     "setContext",
     "fx-extension.isChatParticipantEnabled",
-    IsChatParticipantEnabled
+    isChatParticipantEnabled()
   );
 
-  process.env[FeatureFlags.ChatParticipant] = IsChatParticipantEnabled.toString();
-
   await vscode.commands.executeCommand(
     "setContext",
     "fx-extension.isOfficeAddIn",

packages/vscode-extension/src/officeChat/commands/create/officeCreateCommandHandler.ts

@@ -64,7 +64,7 @@ export default async function officeCreateCommandHandler(
         localize("teamstoolkit.chatParticipants.officeAddIn.create.projectMatched")
       );
       const describeProjectChatMessages = [
-        describeOfficeProjectSystemPrompt,
+        describeOfficeProjectSystemPrompt(),
         new LanguageModelChatMessage(
           LanguageModelChatMessageRole.User,
           `The project you are looking for is '${JSON.stringify(matchedResult)}'.`

packages/vscode-extension/src/officeChat/officePrompts.ts

@@ -70,10 +70,11 @@ export const defaultOfficeSystemPrompt = () => {
   );
 };
 
-export const describeOfficeProjectSystemPrompt = new vscode.LanguageModelChatMessage(
-  vscode.LanguageModelChatMessageRole.System,
-  `You are an advisor for Office Add-in developers. You need to describe the project based on the name and description field of user's JSON content. You should control the output between 50 and 80 words.`
-);
+export const describeOfficeProjectSystemPrompt = () =>
+  new vscode.LanguageModelChatMessage(
+    vscode.LanguageModelChatMessageRole.System,
+    `You are an advisor for Office Add-in developers. You need to describe the project based on the name and description field of user's JSON content. You should control the output between 50 and 80 words.`
+  );
 
 export const excelSystemPrompt = `
 The following content written using Markdown syntax, using "Bold" style to highlight the key information.

packages/vscode-extension/test/chat/commands/create/createCommandHandler.test.ts

@@ -282,7 +282,7 @@ describe("chat create command", () => {
       chai.assert.isTrue(showFileTreeStub.notCalled);
       chai.assert.isTrue(
         response.markdown.calledOnceWith(
-          "Your app description is too generic. To find relevant templates or samples, give specific details of your app's capabilities or technologies.\n\nE.g. Instead of saying 'create a chat bot', you could specify 'create a chat bot that answers FAQs for customer support.'"
+          "Your app description is too generic. To find relevant templates or samples, give specific details of your app's capabilities or technologies.\n\nE.g. Instead of saying 'create a bot', you could specify 'create a bot template' or 'create a notification bot that sends user the stock updates'."
         )
       );
     });