I am using the Bot framework to create a chat bot. And I want to create message card (Hero or Thumbnail).
If you look at the skype bot api doc, there is a way to encode image bytes directly as the content url. https://docs.botframework.com/en-us/skype/chat/
"type": "message/image",
"attachments": [
{
"contentUrl": "<base64 encoded image>",
"thumbnailUrl": "<base64 encoded thumbnail>", // optional
"filename": "bear.jpg" // optional
}
]
This works fine for showing an image only. But I want the image to be part of a card.
The card is
{
"type":"message/card.carousel",
"attachments":[
{
"contentType":"application/vnd.microsoft.card.hero",
"content":{
"images":[
{
"image":"https://foo.com/path/image.jpg",
}
I have tried to set the image url property to the encoded bytes, but the client can't show it. What's the best way to achieve this?
You've got the basic idea. Use this instead:
"attachments": [
{
"contentType": "application/vnd.microsoft.card.hero",
"content": {
"title": "Title",
"subtitle": "SubTitle",
"text": "Text",
"images": [
{
"url": "image/jpeg;base64,{YOUR IMAGE}",
"alt": "Alt Image Description"
}
]
}
}
],
Related
On Microsoft Teams, we have a bot that sends AdaptiveCard message activities to users through the Microsoft Bot Framework REST API. Sometimes, the AdaptiveCard contains an Action.OpenUrl. With regular links such as https://google.com it works as expected, but since about one month, URL parameters with a mailto url such as mailto:recipient#domain.com no longer work: the message is sent, the button appears but clicking it does not do anything.
Sample request:
POST https://smba.trafficmanager.net/emea/v3/conversations/<conversation_id>/activities
Body:
"recipient": {
"id": "29:1uuzUvFTkcseXZ1Q2wOva1inGkpH1SqbHwqdXjG8MhUa8mkFsdUnvrgn4FnPbX8CwBl_GwDHSQGIlRSPKczwUFg"
},
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"url": "mailto:antoine.chopin#heyaxel.com",
"title": "TEST"
}
]
}
],
"actions": []
}
}
]
}
Currently openSafeUrlMT does not allow mailto urls. we already have a backlog feature request on this. Concern team is working on this.
We are consuming Knowledge graph search API and we use image content from api output in our application. We used to get Below response with image image content highlighted below
https://kgsearch.googleapis.com/v1/entities:search?query=taylor+swift&key=API_KEY&limit=1&indent=True
{
"#context": {
"#vocab": "http://schema.org/",
"goog": "http://schema.googleapis.com/",
"resultScore": "goog:resultScore",
"detailedDescription": "goog:detailedDescription",
"EntitySearchResult": "goog:EntitySearchResult",
"kg": "http://g.co/kg"
},
"#type": "ItemList",
"itemListElement": [
{
"#type": "EntitySearchResult",
"result": {
"#id": "kg:/m/0dl567",
"name": "Taylor Swift",
"#type": [
"Thing",
"Person"
],
"description": "Singer-songwriter",
"image": {
"contentUrl": "https://t1.gstatic.com/images?q=tbn:ANd9GcQmVDAhjhWnN2OWys2ZMO3PGAhupp5tN2LwF_BJmiHgi19hf8Ku",
"url": "https://en.wikipedia.org/wiki/Taylor_Swift",
"license": "http://creativecommons.org/licenses/by-sa/2.0"
},
"detailedDescription": {
"articleBody": "Taylor Alison Swift is an American singer-songwriter and actress. Raised in Wyomissing, Pennsylvania, she moved to Nashville, Tennessee, at the age of 14 to pursue a career in country music. ",
"url": "http://en.wikipedia.org/wiki/Taylor_Swift",
"license": "https://en.wikipedia.org/wiki/Wikipedia:Text_of_Creative_Commons_Attribution-ShareAlike_3.0_Unported_License"
},
"url": "http://taylorswift.com/"
},
"resultScore": 4850
}
]
}
Suddenly the image content with imageURl/URL/License is not appearing on the response. Is this data retired from api output? I sthere any api or any field in the same api output that fetus the image URL data?
Really hoping someone can help out on this.
I'm trying to achieve - a no-code chat bot using QnAMaker.ai and Azure Bot Services with AdaptiveCards to serve rich content.
I have a knowledgebase set up and published, I have a bot in Azure set up to serve that content and it seems to work okay at the first stage.
Now I'm trying to add AdaptiveCards without opening and editing the solution in VSCode - I really want to keep all this contained in a no-code solution.
I Googled how to add custom cards/content and found this post by LiveTiles - excellent - I thought, I can just add minified JSON and it will render what I want - lovely stuff!
However; despite there being a live output render on the LiveTiles site, when I take that JSON I cannot get it to render through either Web Chat or the Bot Framework Emulator.
I've tried...
Copy/pasting the raw JSON into a QnAPair
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Image",
"url": "",
"size": "stretch",
"selectAction": {
"type": "Action.OpenUrl",
"title": "Test",
"url": "https://www.livetiles.nyc/"
}
},
{
"type": "TextBlock",
"text": "This is an adaptive card - if this renders it means it's worked!",
"wrap": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Let's get started!",
"url": "Let's get started!"
}
]
}
}
Copy/pasting minified JSON into a QnAPair
{"contentType":"application/vnd.microsoft.card.adaptive","content":{"type":"AdaptiveCard","version":"1.0","body":[{"type":"Image","url":"","size":"stretch","selectAction":{"type":"Action.OpenUrl","title":"Test","url":"https://www.livetiles.nyc/"}},{"type":"TextBlock","text":"This is an adaptive card - if this renders it means it's worked!","wrap":true}],"actions":[{"type":"Action.Submit","title":"Let's get started!","url":"Let's get started!"}]}}
Making a Source Excel File (which includes the JSON) and adding that to the knowledge base
All my attempts end up with the bot spitting the actual JSON at me when I ask it. Not the lovely rendered card I wanted.
Renders on the LiveTiles site:
Doesn't render on the Emulator
Or on the Web Chat
In QnAMaker.ai Test Function
Really hoping someone can offer some insight or advice to this.
Please try below json it works for me ,
{
//"contentType": "application/vnd.microsoft.card.adaptive",
//"content": {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Image",
"url": "",
"size": "stretch",
"selectAction": {
"type": "Action.OpenUrl",
"title": "Test",
"url": "https://www.livetiles.nyc/"
}
},
{
"type": "TextBlock",
"text": "This is an adaptive card - if this renders it means it's worked!",
"wrap": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Let's get started!",
"url": "Let's get started!"
}
]
//}
}
I have added a screenshot below please check
code for send card as an attachment :
var cardAttachment = Common.CreateAdaptiveCardAttachment();
await turnContext.SendActivityAsync(MessageFactory.Attachment(cardAttachment), cancellationToken);
{
"attachments": [
{
"type": "divider",
"color": "#36A64F"
},
{
"type": "image",
"title": {
"type": "plain_text",
"text": "image1",
"emoji": true
},
"title": "XXXXXX",
"image_url": "https://s3.amazonaws.com/report.png",
"alt_text": "image1",
"color": "#36A64F"
}
]
}
I am using s3 bucket to publish an image, and once the image is published, that image will be removed from s3 bucket, the image appears broken in slack once the url becomes invalid
This is not an error, but works as designed.
When you provide an image link, Slack does not copy the image, but only references it (it will cache it for a while though). Just like a normal HTML page.
If you want to preserve the image you need to copy it yourself / upload it to a persistent storage.
Here is another answer that explains how to upload an image to Slack: Can I upload an image as attachment with Slack API?
Consider there is a action card response from the MS bot & it looks as follows in skype:
When this similar response comes in the REST APIs i.e using Direct Line APIs. The following is the relevant part of JSON response.
{
"id": "1t90Ym3PEry|000000000000000014",
"conversationId": "1t90Ym3PEry",
"created": "2016-12-06T09:34:55.6280699Z",
"from": "rich3cards",
"images": [
"https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Seattlenighttimequeenanne.jpg/320px-Seattlenighttimequeenanne.jpg"
],
"attachments": [],
"eTag": "W/\"datetime'2016-12-06T09%3A34%3A54.94083Z'\""
},
{
"id": "1t90Ym3PEry|000000000000000014",
"conversationId": "1t90Ym3PEry",
"created": "2016-12-06T09:34:55.6280699Z",
"from": "rich3cards",
"text": "Hero Card\n\nSpace Needle\n\nThe <b>Space Needle</b> is an observation tower in Seattle, Washington, a landmark of the Pacific Northwest, and an icon of Seattle.\n\n(Current Weather) action?weather=Seattle, WA",
"images": [],
"attachments": [],
"eTag": "W/\"datetime'2016-12-06T09%3A34%3A54.94083Z'\""
}
Now, the question is about how do we parse this json to get the button data [(Current Weather) action?weather=Seattle, WA"] out of the text attribute? Is the only way is patter match ?
Has anyone faced or know solution, please put some light here too ;)
Update: If its different channel like skype/webchat/etc.. the JSON response looks very proper to consume, following is the sample JSON.
{
"type": "message",
"id": "5AdoK89rtSc|000000000000000018",
"timestamp": "2016-12-06T09:53:20.4777291Z",
"channelId": "webchat",
"from": {
"id": "rich3cards",
"name": "RichCards"
},
"conversation": {
"id": "5AdoK89rtSc"
},
"attachments": [
{
"contentType": "application/vnd.microsoft.card.hero",
"content": {
"title": "Hero Card",
"subtitle": "Space Needle",
"text": "The <b>Space Needle</b> is an observation tower in Seattle, Washington, a landmark of the Pacific Northwest, and an icon of Seattle.",
"images": [
{
"url": "https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Seattlenighttimequeenanne.jpg/320px-Seattlenighttimequeenanne.jpg"
}
],
"buttons": [
{
"type": "postBack",
"value": "action?weather=Seattle, WA",
"title": "Current Weather"
}
]
}
}
]
As mentioned in the comments, you are using DirectLine v1.1. Unfortunately, v1.1 doesn't support attachments/cards and so there isn't a good way to understand/parse the card.
You might want to consider moving to DirectLine v3 which has full support for attachments.
Alternatively, if you want to support Cards, you might have to do something custom as shown in the DirectLine sample. There, the bot is sending the hero card through the ChannelData field and the client is parsing that accordingly. However, you might have to add the logic to detect who is talking to the bot so you send the cards as ChannelData only if the caller is DirectLine and not one of the other clients (such as skype)