fix: check vscode.version to enable teams participant (#11621)

* fix: check vscode.version to enable teams participant

* fix: cd adjustment

* fix: ff for sample gallery

* fix: cd content

---------

Co-authored-by: Yuqi Zhou <yuqzho@microsoft.com>

.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/action-set-json-field@v2.1
         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/action-set-json-field@v2.1
         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/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/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 defaultSystemPrompt = () => {
   );
 };
 
-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/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.