How to send rich text with image using Microsoft Bot Framework

Question

Recently we are building a application which send message through Microsoft BotFramework API

We are using the API as below

https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#send-to-conversation

The following API allow us to send text or attachments by passing activities as parameters.

https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#activity-object

Everything works well, and on our client side, text and attachments can be received normally as below.

However, recently we have to send rich text which contains text and image info. For example, admin user want to send text and pasted image together to client user. So we are considering sending text with markdown style with image info like this

text:aaaaa![test](https://ichef.bbci.co.uk/news/976/cpsprodpb/C448/production/_117684205_lotus.jpg "test")

however, client user can only get the info as below. On our client side who use Microsoft Teams App, the image info could not be parsed normally, although image src is a public link.

I know by using attachment image can be send successfully, but what we need is to send a rich text which has ordered text and image as below

Could someone tell me how to find a solution?

Answer 1

Finally I found the sollution https://github.com/microsoft/AdaptiveCards/issues/4121

Answer 2

And yes, If you are looking to get image from your QnA, then follow the below code

Inside your QnAMaker portal ,

Your Answer. [Image](https://URLTotheimage.com/Images/image.png)

This should give image within your answer.

Answer 3

This is possible using Language Generation file in your project and using Adaptive cards. You can find samples here https://adaptivecards.io/samples/

You can design your own adaptive card in your designer https://adaptivecards.io/designer/

and create a json file which you will have to place inside your project Template folder. (or respective folder directory that you have registered)

Once you are done creating and placing the files, follow the code to call the adaptive card

await dc.Context.SendActivityAsync(ActivityFactory.FromObject(_templates.Evaluate("yourlgintent"))).ConfigureAwait(false);

in your filename.lg file

# yourlgintent
[Activity 
      Attachments = ${ActivityAttachment(json(fromFile('yourfilename.json')), 'adaptiveCard')}
]

OR

You can directly call it in a method

# yourlgintent
[Activity 
      Attachments = ${ActivityAttachment(json(yourlgintentJson()), 'adaptiveCard')}
]

#yourlgintentJson
    - ```
    {
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "type": "AdaptiveCard",
        "version": "1.3",
        "body": [
            {
                "type": "Container",
                "items": [
                    {
                        "type": "TextBlock",
                        "wrap": true,
                        "text": "As your virtual assistant, I love answering your questions. Having said that, I am learning continuously to expand my knowledge.",
                        "height": "stretch"
                    }
                ],
                "spacing": "Large"
            }
        ]
    }

Answer 4

I have tested the given markdown syntax in MS Team and it's rendering the correct output. Here through QnA maker I have verified & tested the flow instead of the API that you have given. The issue is not related to Teams APP and look like the markdown has one extra text in the url probably that creating the problem while posting attachment in the MS Teams through request body.

Your Markdown Syntax

Remove the extra "test" content from url.

text:aaaaa

Markdown Syntax

text:aaaaa![test](https://ichef.bbci.co.uk/news/976/cpsprodpb/C448/production/_117684205_lotus.jpg)

Output

Note: QnA maker will automatically remove this kind of extra content from the url during the build & test process.