Hello I was trying to make botkit reply with an image on my callback function but am unsure as to how convo.say() or bot.reply() would handle sending out images. Does anyone have experience making the slackbot replying with images?
Since you're using slack, it should be possible with interactive messages.
Here's an example message object from slack's own documentation of interactive messages (found here: https://api.slack.com/docs/message-buttons)
{
"text": "New comic book alert!",
"attachments": [
{
"title": "The Further Adventures of Slackbot",
"fields": [
{
"title": "Volume",
"value": "1",
"short": true
},
{
"title": "Issue",
"value": "3",
"short": true
}
],
"author_name": "Stanford S. Strickland",
"author_icon": "http://a.slack-edge.com/7f18https://a.slack-edge.com/a8304/img/api/homepage_custom_integrations-2x.png",
"image_url": "http://i.imgur.com/OJkaVOI.jpg?1"
},
{
"title": "Synopsis",
"text": "After #episod pushed exciting changes to a devious new branch back in Issue 1, Slackbot notifies #don about an unexpected deploy..."
},
{
"fallback": "Would you recommend it to customers?",
"title": "Would you recommend it to customers?",
"callback_id": "comic_1234_xyz",
"color": "#3AA3E3",
"attachment_type": "default",
"actions": [
{
"name": "recommend",
"text": "Recommend",
"type": "button",
"value": "recommend"
},
{
"name": "no",
"text": "No",
"type": "button",
"value": "bad"
}
]
}
]
}
You can also create your own custom message from here https://api.slack.com/docs/messages/builder
Related
I am trying to post a message to slack using node.js but I got invalid_blocks_format error. In the slack API reference says that: this error occurs because of invalid JSON or wrong Block KIT syntax. I have checked both and everything seems correct. An example of my payload:
{
"channel": "CHANNELID",
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "*Someone* just replied"
}
},
{
"type": "section",
"fields": [
{
"type": "mrkdwn",
"text": "*Email:*\n<https://example.com/some-url?query-param=value|someone#email.com>"
},
{
"type": "mrkdwn",
"text": "*Campaign:*\n<https://example.com/some-url|Name - Some value>"
},
{
"type": "mrkdwn",
"text": "*Replying To:*\nanotheremail.com"
},
{
"type": "mrkdwn",
"text": "*Assigned To:*\nName Surname"
}
]
},
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": ">Stop\n>\n>On Aug 8, 2022, at 6:40 PM, Sender <sender#email.com> wrote:\n>\n> Hi Someone,\n>\n>My name is Name from A company.\n>\n>Some content\n> \n>Content continues(https://blog.example.com/ulr?query-param=value) Content. \n>Would you like to book a demo?(https://example.com/url) \n>Let me know and I’ll schedule it.\n>\n>\n>Name Surname\n>Customer Success Manager\n>Company Name\n>\n> \n>\n>\n>\n>CONFIDENTIALITY NOTICE: This message, including any attachments, is the property of Company name Ltd., its affiliates and/or subs"
}
},
{
"type": "actions",
"elements": [
{
"type": "button",
"text": {
"type": "plain_text",
"text": "View Recipient"
},
"action_id": "view",
"url": "https://example.com/view?query=asd",
"style": "primary"
},
{
"type": "static_select",
"placeholder": {
"type": "plain_text",
"text": "Set lead status"
},
"action_id": "set-lead-status",
"options": [
{
"text": {
"type": "plain_text",
"text": "Open Lead"
},
"value": "env=prod;recipientID=1234567;leadStatus=Open"
},
{
"text": {
"type": "plain_text",
"text": "Ignore Lead"
},
"value": "env=prod;recipientID=1234567;leadStatus=Ignored"
},
{
"text": {
"type": "plain_text",
"text": "Lost Lead"
},
"value": "env=prod;recipientID=1234567;leadStatus=Lost"
},
{
"text": {
"type": "plain_text",
"text": "Won Lead"
},
"value": "env=prod;recipientID=1234567;leadStatus=Closed"
}
]
},
{
"type": "button",
"text": {
"type": "plain_text",
"text": "Pause Recipient"
},
"action_id": "pause",
"value": "env=prod;recipientID=1234567;"
},
{
"type": "button",
"text": {
"type": "plain_text",
"text": "Unsubscribe"
},
"action_id": "unsubscribe",
"value": "env=prod;recipientID=1234567;",
"style": "danger",
"confirm": {
"title": {
"type": "plain_text",
"text": "Unsubscribe recipient"
},
"text": {
"type": "plain_text",
"text": "Are you sure you want to unsubscribe email#address.com?"
},
"confirm": {
"type": "plain_text",
"text": "Yes"
},
"deny": {
"type": "plain_text",
"text": "Cancel"
}
}
}
]
}
],
"token": "token-value"
}
Also when I try to post this over https://app.slack.com/block-kit-builder, message posted without any problem. What can be the problem and how can I fix it?
Thanks for any help/suggestion.
UPDATE
I figured out the problem but not the solution.
Problem is url's with more than one query parameters. If any text has a link like;
https://example.com/url?param1=value1¶m2=value2
Sources suggested to encode texts but if I do that, slack prints it without decode it. So sent message is not readable. I am still open to suggestions.
Channel should not be inside the block but as a property while using the Slack API.
Exemple using Slack WebClient in node.js:
client.chat.postMessage({
channel: 'channelId',
blocks: 'yourBlock',
});
I was using an old version of slack lib on node and messages contain ampersand (&) caused the problem like links with more than one query parameters. Updating library solved my problem.
I'm trying to migrate some of our reports from slack to Microsoft Teams.
We are currently posting images and csv files to slack from an Azure Function.
Early on I noticed that I cannot post images directly but I can mention their URLs in the card and a preview displays and clicking on it should take me to the actual image.
I started out thinking it would be pretty straightforward. And i went ahead and started with the webhooks option. The only problem is that the it supports only 2 types of cards and i have virtually no control over the image size and other properties. And if I'm to use the Adaptive Card(any other card), then I would have to ditch webhooks and make use of the Graph API, which I've already started.
Then I started noticing that the images disappear, as in they just not get displayed anymore. I believe that this could be an authentication issue between sharepoint/ teams as mentioned in this answer -
Adaptive cards for MS Teams - images displaying in web interface but not desktop application
Teams in browser shows the images but the desktop app doesn't. Also they aren't displaying in my mobile app for teams too.
I have already modified my existing application to send a copy of the image/file (whatever it creates) to a folder inside the sharepoint which is the back end to this channel in teams (used sharepoint API v1)
And I intend to post a thumbnail card with a url to the images/file in Sharepoint.
It would really help if someone could help me with the below :
Anyway to fix the authentication issue between Sharepoint ~ Teams
Alternate options to send an image, if 1. is not feasible.
Please help :)
Edit :
Adding card JSON :
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Sample Heading",
"weight": "bolder",
"size": "medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://upload.wikimedia.org/wikipedia/en/e/ea/FlowersForAlgernon.jpg",
"size": "medium"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Report1",
"text": "Matt Hidinger",
"weight": "bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "Created {{DATE(2020-02-14T06:08:39Z,SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
}
]
}
]
}
Adaptive cards are now supported on Incoming webhook. For sending adaptive cards using Incoming Webhooks, You need to follow the Bot Activity Message Type format: format. where you can add the card json to the content field.
Example:
Post Web-hook URL
Request Body:
{
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Sample Heading",
"weight": "bolder",
"size": "medium"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://upload.wikimedia.org/wikipedia/en/e/ea/FlowersForAlgernon.jpg",
"size": "medium"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Matt Hidinger",
"weight": "bolder",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "none",
"text": "Created {{DATE(2020-02-14T06:08:39Z,SHORT)}}",
"isSubtle": true,
"wrap": true
}
]
}
]
}
]
}
]
}
}
]
}
Result:
I created a bot (nodejs server) for teams - through bot framework.
I'm trying to send adaptive card that I created through: adaptive cards designer
and I get error :
{"code":"BadArgument","message":"ContentType of an attachment is not set"}
The request body :
{
"type": "message",
"from": {
"id": "xxxxxx"
},
"conversation": {
"id": "xxxxxx"
},
"recipient": {
"id": "xxxxx"
},
"replyToId": "xxxxx",
"text": "some text",
"attachments": [
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"text": "some text"
},
{
"type": "Input.Date",
"separator": true
}
]
}
]
}
I would appreciate help
When adding attachments you'll want to set the contentType and content properties of the attachment object.
https://learn.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#attachment-object
{
"type": "message",
"from": {
"id": "xxxxxx"
},
"conversation": {
"id": "xxxxxx"
},
"recipient": {
"id": "xxxxx"
},
"replyToId": "xxxxx",
"text": "some text",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"text": "some text"
},
{
"type": "Input.Date",
"separator": true
}
]
}
}
]
}
As per the comments above, this is a pro-active message, but using the Bot Framework libraries are a much better approach than trying to call the bot endpoints directly (I wondered if, by "REST", you meant the Bot Framework endpoint or the Graph Api, but in either case the Bot Framework is easier to work with for proactive messages).
Please see specifically this sample for how to do this in Node.
Why am I getting an error 'no_text' ?
The Json below is valid and is taken from the slack documentation example.
In bot.postMessage(channel, '', params) if I populate the second parameter (i.e. replacing ' ' with 'some_text) it prints 'some_text' but without the attachment.
bot.postMessage(channel, 'some_text', params) --> works but the attachment doesn't show up.
const element = {
"text": "Would you like to play a game?",
"response_type": "in_channel",
"attachments": [
{
"text": "Choose a game to play",
"fallback": "If you could read this message, you'd be choosing something fun to do right now.",
"color": "#3AA3E3",
"attachment_type": "default",
"callback_id": "game_selection",
"actions": [
{
"name": "games_list",
"text": "Pick a game...",
"type": "select",
"options": [
{
"text": "Hearts",
"value": "hearts"
},
{
"text": "Global Thermonuclear War",
"value": "war"
}
]
}
]
}
]
}
console.log('JSON.stringify(element): '+JSON.stringify(element));
params = {
icon_emoji: ':r2:',
attachments: JSON.stringify(element)
}
bot.postMessage(channel, '', params).always(function (data) {...}
The issue arises from the lack of a text field in the parameters that is passed to bot.PostMessage. Your params should be
params = {
icon_emoji: ':r2:',
text: "Would you like to play a game?",
response_type: "in_channel",
attachments: element
}
and the element now should start from the actual attachment
const element = [
{
"text": "Choose a game to play",
"fallback": "If you could read this message, you'd be choosing something fun to do right now.",
"color": "#3AA3E3",
"attachment_type": "default",
"callback_id": "game_selection",
"actions": [
{
"name": "games_list",
"text": "Pick a game...",
"type": "select",
"options": [
{
"text": "Hearts",
"value": "hearts"
},
{
"text": "Global Thermonuclear War",
"value": "war"
}
]
}
]
}
]
I met the same issue and found the solution.
The problem is that if only attachments field is added into the payload, it will report no_text error. But if text field is added, slack message will only show the text content.
The solution:
When we want to display attachments, we need to add a basic blocks field instead of text field. Something like
{
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "bar"
}
}
],
"attachments": [
{
"color": "#FF0000",
"blocks": [
{
"type": "section",
"text": {
"type": "mrkdwn",
"text": "foo"
}
}
]
}
]
}
If putting the above payload into the Slack build kit, it will be a misleading. That's also why I stuck with the issue.
I would recommend to use chat.postMessage test to debug the payload. It will work like a charm.
Next steps in the waterfall dialog flow are not getting called while using Action.Submit in Adaptive cards of Microsoft bot framework SDK V4 (Only when integrated with Microsoft teams)
This is nodejs code in Microsoft framework SDK v4. The problem exists only when integrated with Microsoft teams.
I have tried this in web chat and chat emulator. Action.Submit is calling the next steps on the waterfall dialog flow.
** Bot Code in NodeJS **
async endConversation(stepContext){
console.log("on endConversation")
await stepContext.context.sendActivity({
attachments: [CardFactory.adaptiveCard(RatingCard)]
});
return await stepContext.prompt(TEXT_PROMPT, { prompt: '' });
}
async feedback(stepContext){
console.log("on feedback == "+stepContext.result)
}
** Adaptive Card json **
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "medium",
"weight": "bolder",
"color": "accent",
"text": "Rate your experience!"
},
{
"type": "TextBlock",
"separator": true,
"text": "Please rate your experience! Your feedback is very appreciated and will help improve your experience in the future. ",
"wrap": true
},
{
"type": "ColumnSet",
"spacing": "Medium",
"columns": [
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "bad"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/e/ed/StarRatingGraphic.jpg",
"size": "auto"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Bad"
}
],
"width": "auto"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "ok"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/e/ed/StarRatingGraphic.jpg",
"size": "auto"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Ok"
}
],
"width": "auto"
},
{
"type": "Column",
"selectAction": {
"type": "Action.Submit",
"data": "good"
},
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://upload.wikimedia.org/wikipedia/commons/e/ed/StarRatingGraphic.jpg",
"size": "auto"
},
{
"type": "TextBlock",
"horizontalAlignment": "Center",
"text": "Good"
}
],
"width": "auto"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
Expected :
async method feedback is the next step on the flow which should be called when the user clicks on a star image in adaptive cards.
Actual :
The next step is not getting called. But its going to onMessage method in ActivityHandler base class.
The Interface Looks like
It looks like Teams isn't handling string submit actions very well. I don't know if this is a new problem or if it always worked that way. Try making your submit action data an object instead of a string:
"selectAction": {
"type": "Action.Submit",
"data": {
"rating": "bad"
}
}
This will generate a textless message, so you'll need to extract the rating from the activity's value property. See this post for instructions on transferring a string from an activity's value property to its text property. See my latest blog post for more information about using Adaptive Cards with the Bot Framework.
EDIT: I've discovered that you can simulate an imBack in Teams using the format in this document:
{
"type": "Action.Submit",
"title": "Click me for imBack",
"data": {
"msteams": {
"type": "imBack",
"value": "Text to reply in chat"
}
}
}