Send an image attachment in Microsoft Azure Chatbot

Question

I have a created a Chat bot using Microsoft Azure bot service and LUIS. With my bot which was trained on LUIS, I'm able to receive text messages. I have connected the bot to Skype channel.

I don't know how to return a image attachment as an answer to a message.

I heard some of the Microsoft bot framework can send image as an attachment and I'm not sure about Azure bot service.

Sample code:

var recognizer = new builder.LuisRecognizer(LuisModelUrl);

var intents = new builder.IntentDialog({ recognizers: [recognizer] })
    .matches('**Greetings**', (session, args) => {session.send('**Hi! Welcome**');});

bot.dialog('/', intents); 

My Case:

I want to attach the below URL image with 'Hi! Welcome' message when it matches with my Intent 'Greetings'.

ContentURL:"https://img.clipartfest.com/13e01fd74f423c39c4af7dcc8a7b8455_animated-welcome-sign-animated-welcome-clip-art-images_1300-899.jpeg",

ContentType = "image/jpeg"

I don't know how & and where to add the above content URL in my code to send attachment to the message.

Can someone help me with it?

Answer 1

RAS is right, although his code has errors in it. You need to define the reply message inside the function you pass in the matches method, or else you'll get a ReferenceError, since session is not defined. Also, use text() instead of setText(), which is depreciated.

var recognizer = new builder.LuisRecognizer(LuisModelUrl);

var intents = new builder.IntentDialog({ recognizers: [recognizer] })
    .matches('**Greetings**', (session, args) => {
        var reply = new builder.Message(session)
            .text("Hello!")
            .addAttachment({contentType: "image/jpeg", contentUrl: "https://img.clipartfest.com/13e01fd74f423c39c4af7dcc8a7b8455_animated-welcome-sign-animated-welcome-clip-art-images_1300-899.jpeg"});
    });

bot.dialog('/', intents); 

Another way to add images is with Hero Cards or Thumbnail Cards. You can see example usages of these in the Bot Framework Samples github.

Answer 2

Thanks RAS and mgbennet.

It works with below code:

.matches('Greetings', (session, args) => {
            var reply = new builder.Message(); 
            reply.setText(session, "![Greetings](http://aka.ms/Fo983c)");
            session.send(reply);
  })

Answer 3

What about using something like this?

var reply = 
    new builder.Message()
        .setText(session, text)
        .addAttachment({ fallbackText: "Hello!", contentType: 'image/jpeg', contentUrl: picture });
session.send(reply);

Using your example it will be something like this:

var recognizer = new builder.LuisRecognizer(LuisModelUrl);

var reply = 
new builder.Message()
    .setText(session, "Hello!")
    .addAttachment({ fallbackText: text, contentType: 'image/jpeg', contentUrl: "https://img.clipartfest.com/13e01fd74f423c39c4af7dcc8a7b8455_animated-welcome-sign-animated-welcome-clip-art-images_1300-899.jpeg"});  

var intents = new builder.IntentDialog({ recognizers: [recognizer] })
.matches('Greetings', (session, args) => {session.send(reply);});