[JS] fix: CardGazer sample

js/packages/teams-ai/src/prompts/PromptManager.ts

@@ -335,17 +335,17 @@ export class PromptManager implements PromptFunctions {
                 );
             }
 
+            if (template.config.augmentation && template.config.augmentation.augmentation_type === 'tools') {
+                const includeHistory: boolean = template.config.completion.include_history;
+                const historyVariable = includeHistory ? `conversation.${name}_history` : 'temp.${name}_history';
+                sections.push(new ActionOutputMessage(historyVariable));
+            }
             // Include user input
             if (template.config.completion.include_images) {
                 sections.push(new UserInputMessage(this.options.max_input_tokens));
             } else if (template.config.completion.include_input) {
                 sections.push(new UserMessage('{{$temp.input}}', this.options.max_input_tokens));
             }
-            if (template.config.augmentation && template.config.augmentation.augmentation_type === 'tools') {
-                const includeHistory: boolean = template.config.completion.include_history;
-                const historyVariable = includeHistory ? `conversation.${name}_history` : 'temp.${name}_history';
-                sections.push(new ActionOutputMessage(historyVariable));
-            }
 
             // Create prompt
             template.prompt = new Prompt(sections);

js/packages/teams-ai/src/prompts/UserInputMessage.ts

@@ -81,7 +81,9 @@ export class UserInputMessage extends PromptSectionBase {
         const images = inputFiles.filter((f) => f.contentType.startsWith('image/'));
         for (const image of images) {
             // Check for budget to add image
-            // TODO: This accounts for low detail images but not high detail images.
+            // This accounts for low detail images but not high detail images.
+            // https://platform.openai.com/docs/guides/vision
+            // low res mode defaults to a 512x512px image which is budgeted at 85 tokens.
             // Additional work is needed to account for high detail images.
             if (budget < 85) {
                 break;
@@ -99,7 +101,11 @@ export class UserInputMessage extends PromptSectionBase {
             budget -= 85;
         }
 
+        const output = [];
+        if (message.content!.length > 0) {
+            output.push(message);
+        }
         // Return output
-        return { output: [message], length, tooLong: false };
+        return { output, length, tooLong: false };
     }
 }

js/samples/03.ai-concepts/c.actionMapping-lightBot/src/prompts/tools/config.json

@@ -3,7 +3,7 @@
     "description": "A bot that can turn the lights on and off",
     "type": "completion",
     "completion": {
-        "model": "o1-preview",
+        "model": "gpt-4o",
         "completion_type": "chat",
         "include_history": true,
         "include_input": true,
@@ -14,6 +14,6 @@
         "stop_sequences": []
     },
     "augmentation": {
-        "augmentation_type": "monologue"
+        "augmentation_type": "tools"
     }
 }

js/samples/04.ai-apps/c.vision-cardGazer/README.md

@@ -18,7 +18,7 @@ _Table of contents_
 
 ## Interacting with the bot
 
-You can interact with this bot by sending it a message with an image or a doodle. Be sure to add a message like "Turn this image into an Adaptive Card". As an example, you can use the image included in the `./assets` folder. Large resolution images will not work due to the limitations of the AI model.
+You can interact with this bot by sending it a message with an image or a doodle. Be sure to add a message like "Turn this image into an Adaptive Card". As an example, you can use the image included in the `./assets` folder. Large resolution images will not work due to the limitations of the AI model. Since the TeamsAttachmentDownloader is only using low resolution images, your image will be converted to 512px by 512px and budgeted at 85 tokens.
 
 ## Setting up the sample
 

js/samples/04.ai-apps/c.vision-cardGazer/src/index.ts

@@ -87,11 +87,11 @@ if (!process.env.OPENAI_KEY && !process.env.AZURE_OPENAI_KEY) {
 const model = new OpenAIModel({
     // OpenAI Support
     apiKey: process.env.OPENAI_KEY!,
-    defaultModel: 'gpt-4-vision-preview',
+    defaultModel: 'gpt-4o-mini',
 
     // Azure OpenAI Support
     azureApiKey: process.env.AZURE_OPENAI_KEY!,
-    azureDefaultDeployment: 'gpt-4-vision-preview',
+    azureDefaultDeployment: 'gpt-4o-mini',
     azureEndpoint: process.env.AZURE_OPENAI_ENDPOINT!,
     azureApiVersion: '2023-03-15-preview',
 
@@ -132,16 +132,29 @@ interface SendCardParams {
     card: any;
 }
 
-app.ai.action<SendCardParams>('SendCard', async (context, state, params) => {
+app.ai.action<SendCardParams>('SendAdaptiveCard', async (context, state, params) => {
     const attachment = CardFactory.adaptiveCard(params.card);
     await context.sendActivity(MessageFactory.attachment(attachment));
     return 'card sent';
 });
 
-app.ai.action<SendCardParams>('ShowCardJSON', async (context, state, params) => {
-    const json = JSON.stringify(params.card, null, 2);
-    await context.sendActivity(`<pre>${json}</pre>`);
-    return 'card displayed';
+app.ai.action<SendCardParams>('DisplayJSON', async (context, state, params) => {
+    const adaptiveCardJson = {
+        type: 'AdaptiveCard',
+        version: '1.6',
+        body: [
+            {
+                type: 'CodeBlock',
+                language: 'Json',
+                codeSnippet: JSON.stringify(params.card, null, 2)
+            }
+        ]
+    };
+
+    // Create the attachment
+    const attachment = CardFactory.adaptiveCard(adaptiveCardJson);
+    await context.sendActivity(MessageFactory.attachment(attachment));
+    return `json sent`;
 });
 
 // Listen for incoming server requests.

js/samples/04.ai-apps/c.vision-cardGazer/src/prompts/chat/actions.json

@@ -1,34 +1,32 @@
 [
     {
-        "name": "SendCard",
+        "name": "SendAdaptiveCard",
         "description": "Sends an adaptive card to the user",
         "parameters": {
             "type": "object",
             "properties": {
                 "card": {
+                    "$ref": "https://adaptivecards.io/schemas/adaptive-card.json#",
                     "type": "object",
                     "description": "The adaptive card to send"
                 }
             },
-            "required": [
-                "card"
-            ]
+            "required": ["card"]
         }
     },
     {
-        "name": "ShowCardJSON",
+        "name": "DisplayJSON",
         "description": "Shows the user the JSON for an adaptive card",
         "parameters": {
             "type": "object",
             "properties": {
                 "card": {
+                    "$ref": "https://adaptivecards.io/schemas/adaptive-card.json#",
                     "type": "object",
-                    "description": "The adaptive card JSON to show"
+                    "description": "The adaptive card JSON as raw text"
                 }
             },
-            "required": [
-                "card"
-            ]
+            "required": ["card"]
         }
     }
-]
+]

js/samples/04.ai-apps/c.vision-cardGazer/src/prompts/chat/config.json

@@ -3,7 +3,7 @@
     "description": "Vision Bot",
     "type": "completion",
     "completion": {
-        "model": "gpt-4-vision-preview",
+        "model": "gpt-4o-mini",
         "completion_type": "chat",
         "include_history": true,
         "include_input": true,

js/samples/04.ai-apps/c.vision-cardGazer/src/prompts/chat/skprompt.txt

@@ -1,4 +1,4 @@
 You are a friendly assistant for Microsoft Teams with vision support.
 You are an expert on converting doodles and images to Adaptive Cards for Microsoft Teams.
-When shown an image try to convert it to an Adaptive Card and send it using SendCard.
-For Adaptive Cards with Image placeholders use ShowCardJSON instead.
+When shown an image try to convert it to an Adaptive Card and send it using SendAdaptiveCard.
+When the user asks for JSON, use DisplayJSON to show the JSON of the Adaptive Card.

js/samples/04.ai-apps/c.vision-cardGazer/teamsapp.yml

@@ -113,3 +113,4 @@ publish:
     - uses: teamsApp/update
       with:
           appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+projectId: 18c89ad5-9038-4751-aee1-0a5143804bc3

js/samples/05.authentication/b.oauth-bot/README.md

@@ -2,7 +2,7 @@
 
 This sample shows how to incorporate a basic conversational SSO flow into a Microsoft Teams application using [Bot Framework](https://dev.botframework.com) and the Teams AI SDK.
 
-This sample requires creating an OAuth Connection in Azure Bot Service, which provides a token store to store the token after sign-in.
+This sample requires creating an OAuth Connection in Azure Bot Service, which provides a token store to store the token after sign-in. You may need to enable SSO for your app. See [Enable SSO for your app](https://learn.microsoft.com/en-us/microsoftteams/platform/bots/how-to/authentication/bot-sso-overview) for more information.
 
 Note that this bot will only work in tenants where the following graph scopes are permitted:
 

js/samples/05.authentication/b.oauth-bot/teamsapp.yml

@@ -52,7 +52,7 @@ provision:
       # Relative path to this file. Environment variables in manifest will
       # be replaced before apply to Microsoft Entra app
       manifestPath: ./aad.manifest.json
-      outputFilePath : ./build/aad.manifest.${{TEAMSFX_ENV}}.json
+      outputFilePath: ./build/aad.manifest.${{TEAMSFX_ENV}}.json
 
   - uses: arm/deploy # Deploy given ARM templates parallelly.
     env:
@@ -152,3 +152,4 @@ publish:
   - uses: teamsApp/update
     with:
       appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+projectId: eba915f6-9d83-48b4-a07e-87e86cdda5d8