How to respond with Image in Amazon-Lex

Question

I am getting Error while displaying image as a response. I am getting this error :

An error has occurred: Invalid Lambda Response: Received invalid response from Lambda: Unrecognized field "responseCard" (class IntentResponse), not marked as ignorable at [Source: {"sessionAttributes":{},"dialogAction":{"type":"Close","fulfillmentState":"Fulfilled","message":{"contentType":"PlainText","content":"

function close(sessionAttributes, fulfillmentState, message) {
    return {
        sessionAttributes,
        dialogAction: {
            type: 'Close',
            fulfillmentState,
            message,
        },
        responseCard: {
            version: '2',
            contentType: "application/vnd.amazonaws.card.generic",
            genericAttachments: [
                  {
                     imageUrl:"URL of the image to be shown",
                  }
               ] 
        }
    };
}

exports.handler = (event, context, callback) => {
    console.log( "EVENT= "+JSON.stringify(event) );

    const intentName = event.currentIntent.name;
    var sessionAttributes = event.sessionAttributes;

    var responseMsg = "";

    if (intentName == "greetings") {
        var message = {
            'contentType': 'PlainText', 
            'content': 'Hi! How can I help you?'
        }

        responseMsg = close( sessionAttributes, 'Fulfilled', message );
    }
    else {
        console.log( "ERROR unhandled intent named= "+intentName );
        responseMsg = close( sessionAttributes, 'Fulfilled', {"contentType":"PlainText", "content":"Sorry, I can't help with that yet."});
    }

    console.log( "RESPONSE= "+JSON.stringify(responseMsg) );
    callback(null,responseMsg);
}

How should i display image on the chat box? What mistake i am doing here?

Answer 1

For Lex V2 you need to use an ImageResponseCard.

Example Response Format which sends both a link (CustomPayload) and an image (ImageResponseCard):

{
    "sessionState": {
        "dialogAction": {
            "slotToElicit": "select_number_0",
            "type": "ElicitSlot"
        },
        "intent": {
            "slots": {
                "select_number_0": null,
            },
            "confirmationState": "None",
            "name": "TestIntent",
            "state": "InProgress"
        }
    },
    "messages": [
        {
            "contentType": "CustomPayload",
            "content": "[Cute Kitten 13.jpg](https://1.bp.blogspot.com/-ld1w-xCN0nA/UDB2HIY55WI/AAAAAAAAPdA/ho23L6J3TBA/s1600/Cute+Kitten+13.jpg)"
        },
        {
            "contentType": "ImageResponseCard",
            "imageResponseCard": {
                "title": "Uploaded file",
                "imageUrl": "https://1.bp.blogspot.com/-ld1w-xCN0nA/UDB2HIY55WI/AAAAAAAAPdA/ho23L6J3TBA/s1600/Cute+Kitten+13.jpg"
            }
        }
    ]
}

Note: For the example link to work, your client will need to be capable of processing markdown.

Answer 2

The responseCard needs to be inside dialogAction.

Try:

function close(sessionAttributes, fulfillmentState, message) {
    return {
        sessionAttributes,
        "dialogAction": {
            "type": "Close",
            fulfillmentState,
            message,
            "responseCard": {
                "version": "2",
                "contentType": "application/vnd.amazonaws.card.generic",
                "genericAttachments": [
                      {
                         "imageUrl":"http://...",
                      }
                ] 
            }
        }
    };
}

I also added quotation marks to the keys that are not variables just to be safe.

---

More Information on Response Cards:

ResponseCard format: contentType, genericAttachments, version
GenericAttachments format: attachmentLinkUrl, buttons, imageUrl, subtitle, title
Buttons format: text, value
None are required, but here is an example of all responseCard properties:

"responseCard": {
  "version": integer-value,                                     //change to integer
  "contentType": "application/vnd.amazonaws.card.generic",      //don't change
  "genericAttachments": [
      {
         "title":"card-title",                                  //change to any string         
         "subTitle":"card-sub-title",                           //change to any string 
         "imageUrl":"http://...",                               //change to full url 
         "attachmentLinkUrl":"http://...",                      //change to full url 
         "buttons":[ 
             {
                "text":"button-text",                           //change to any string 
                "value":"Value sent to server on button click"  //change to any string
             }
          ]
       } 
   ] 
}