Unable to Debug Teams Message Extension (API-Based Search Commands)

[Leowilson17]

Describe the bug
I'm experiencing an issue while trying to debug a Teams message extension that leverages API-based search commands. The extension does not provide the expected output, and I am unable to trace or debug the problem effectively in Visual Studio Code (VS Code) or in Microsoft Teams

I used the below

1. Node version - 18.17.0
2. Teams Toolkit version - v5.8.2
3. Visual studio code - v1.94.0

Expected behavior
I should be able to debug the message extension in Visual Studio Code, stepping through the code and inspecting variables.
The extension should return the correct output from the API and display the search results as expected in Teams.

Screenshots

VS Code Extension Information (please complete the following information):

• OS: Windows_NT
• v1.94.0

Additional context

Unable to debug the extension properly in Visual Studio Code. Breakpoints do not trigger or allow me to inspect the flow.
The Teams message extension fails to display the expected results in Teams.
No meaningful error messages or logs are provided to help trace the issue.

[huimiu]

Hi @Leowilson17, thanks for reaching out. It seems related to the issue of API spec definition in the API-based message extension template. I've fixed this. Could you please wait for the next TTK release and give it a try again?

For now, you can update the appPackage/apiSpecificationFile/repair.json to look like this and see if it allows you to continue testing and debugging?

openapi: 3.0.0
info:
  title: Repair Service
  description: A simple service to manage repairs
  version: 1.0.0
servers:
  - url: ${{OPENAPI_SERVER_URL}}/api
    description: The repair api server
paths:
  /repair:
    get:
      operationId: repair
      summary: Search for repairs
      description: Search for repairs info with its details and image
      parameters:
        - name: assignedTo
          in: query
          description: Filter repairs by who they're assigned to
          schema:
            type: string
          required: false
      responses:
        '200':
          description: A list of repairs
          content:
            application/json:
              schema:
                type: object
                properties:
                  results:
                    type: array
                    items:
                      type: object
                      properties:
                        id:
                          type: string
                          description: The unique identifier of the repair
                        title:
                          type: string
                          description: The short summary of the repair
                        description:
                          type: string
                          description: The detailed description of the repair
                        assignedTo:
                          type: string
                          description: The user who is responsible for the repair
                        date:
                          type: string
                          format: date-time
                          description: The date and time when the repair is scheduled or completed
                        image:
                          type: string
                          format: uri
                          description: The URL of the image of the item to be repaired or the repair process

[Leowilson17]

Hi @huimiu I used the code you shared, and it worked fine for the first few hours, but I'm now facing the same issue again.

[huimiu]

@Leowilson17 let me take a look and get back to you

[huimiu]

Hi @Leowilson17, could you please update the appPackage/reponseTemplates/repair.json file to see if the issue still exists?

{
  "version": "devPreview",
  "$schema": "https://developer.microsoft.com/json-schemas/teams/vDevPreview/MicrosoftTeams.ResponseRenderingTemplate.schema.json",
  "jsonPath": "results",
  "responseLayout": "list",
  "responseCardTemplate": {
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.5",
    "body": [
      {
        "type": "Container",
        "$data": "${$root}",
        "items": [
          {
            "type": "ColumnSet",
            "columns": [
              {
                "type": "Column",
                "width": "stretch",
                "items": [
                  {
                    "type": "TextBlock",
                    "text": "Title: ${if(title, title, 'N/A')}",
                    "wrap": true
                  },
                  {
                    "type": "TextBlock",
                    "text": "Description: ${if(description, description, 'N/A')}",
                    "wrap": true
                  },
                  {
                    "type": "TextBlock",
                    "text": "Assigned To: ${if(assignedTo, assignedTo, 'N/A')}",
                    "wrap": true
                  }
                ]
              },
              {
                "type": "Column",
                "width": "auto",
                "items": [
                  {
                    "type": "Image",
                    "url": "${if(image, image, '')}",
                    "size": "Medium"
                  }
                ]
              }
            ]
          },
          {
            "type": "FactSet",
            "facts": [
              {
                "title": "Repair ID:",
                "value": "${if(id, id, 'N/A')}"
              },
              {
                "title": "Date:",
                "value": "${if(date, date, 'N/A')}"
              }
            ]
          }
        ]
      }
    ]
  },
  "previewCardTemplate": {
    "title": "${if(title, title, 'N/A')}",
    "subtitle": "${if(description, description, 'N/A')}",
    "image": {
      "url": "${if(image, image, '')}",
      "alt": "${if(title, title, 'N/A')}"
    }
  }
}