Issue in handling inputs from previous buttons generated by prompts in Slack in Microsoft Bot builder node.js - node.js

In the condition when there are multiple buttons present on the same chat history, the user may click the button from previous messages, therefore I am not able to identify from which dialog/message the input came from.
Example:
As chat bot is being implemented for multiple channels, I am avoiding to use Slack's interactive messages, so my aim is to handle this on bot framework itself.
I tried getting information from session object as well as event_source but couldn't figure it out for a concrete solution.

Use a unique ID in callback_id in your button attachment to distinguish between different sets of buttons, e.g. between prompt #1 and prompt #2. The callback_id will be included in the request that Slack sends to your app once a button is pressed.
Together with the general context information of a request like Slack Team ID, channel ID, user ID your app should be able to react correctly.
Example for button definition (from official documentation):
{
"text": "Would you like to play a game?",
"attachments": [
{
"text": "Choose a game to play",
"fallback": "You are unable to choose a game",
"callback_id": "wopr_game",
"color": "#3AA3E3",
"attachment_type": "default",
"actions": [
{
"name": "game",
"text": "Chess",
"type": "button",
"value": "chess"
},
{
"name": "game",
"text": "Falken's Maze",
"type": "button",
"value": "maze"
},
{
"name": "game",
"text": "Thermonuclear War",
"style": "danger",
"type": "button",
"value": "war",
"confirm": {
"title": "Are you sure?",
"text": "Wouldn't you prefer a good game of chess?",
"ok_text": "Yes",
"dismiss_text": "No"
}
}
]
}
]
}

Related

Unable to invoke Task module in MS Teams botbuilder bot via adaptive card

I have been trying to invoke the task module using adaptive card in Microsoft Teams bot by modifying the echo bot sample from botbuilder framework v1.3 in nodejs. I'm using the TeamsActivityHandler as instructed by the docs. Normal buttons seems to work fine, but the button type with task/fetch doesn't seems to be working as expected. Here is the card json:
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"text": "TaskModule Card",
"wrap": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"title": "Invoke",
"data": {
"msteams": {
"type": "task/fetch"
}
}
}
]
}
]
}
When I click the button, it does not send any data back to the bot's backend to trigger handleTeamsTaskModuleFetch() method. Even the button animation that makes it gray while making call to the backend is not happening here.
Even the same happens with the example provided here github. How to fix this issue?

MS teams adaptive card not sending input text value on submit

I am 500% sure it used to work and all of a sudden this is broken. The card for getting input is no longer passing the value back to nodejs.
The card looks like below:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Note text"
},
{
"type": "Input.Text",
"placeholder": "Type a note",
"isMultiline": true,
"id": "noteIdVal"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Save",
"data": { "action" : "add_note", "objNumber": objId, "objType": objectType }
},
{
"type": "Action.Submit",
"title": "Cancel",
"data" : {"action": "cancel"}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
On the submit action, in my nodejs i am getting the data in the values node which are passed in the data field. However, it is no longer attaching noteIdVal. Did something changed from MS side?
MS Teams Adaptive card required special property with the name msteams to the object in an object submit action’s data property in order to access this functionality.
{
"type": "Action.Submit",
"title": "Click me for messageBack",
"data": {
"msteams": {
"type": "messageBack",
"displayText": "I clicked this button",
"text": "text to bots",
"value": "{\"bfKey\": \"bfVal\", \"conflictKey\": \"from value\"}"
},
"extraData": {}
}
}
The type property is "messageBack" the submit action will behave like a messageBack card action, which is like a combination of imBack and postBack.
Reference :
Microsoft Docs for MS Teams Adaptive Card
So, may be useful to other folks here. I have two showCards and the content of both the show cards has a common text field with same id name "noteIdVal". As ultimately it is a single json and hence was the culprit.
Lesson, have all fields unique id values which is easy to miss when you have multiple show cards

How to disable a slackbot button after clicking on it

I'm creating buttons for a slackbot using something like:
const messageB = {
"attachments": [
{
"text": "Essa mensagem foi útil?",
"callback_id": "button_feedback",
"color": "#3AA3E3",
"attachment_type": "default",
"actions": [
{
"name": "button_click_yes",
"text": "sim",
"type": "button",
"value": "yes"
},
{
"name": "button_click_no",
"text": "não",
"type": "button",
"value": "no"
}
]
}
]
};
But the button remain active after the message was sent, and can be used again by the user. I want to deactivate it, or delete it after it was used. But i can't find about it anywhere in the docs.
Clicking on a button will always fire a request to your Slack app. If you want to remove the button after it was clicked you need to update your original message with a new one that reflects the changed state (e.g. button removed). Its not possible to show deactivated buttons with Slack though, so you need to remove it.
To replace the original message all you need to do is respond to the Slack request with an updated message.
However, it will technically still be possible for users to click on your button twice (e.g. due to network delays), so you app should be able to response to multiple clicks on your buttons by the same user in an appropriate way.
See also here for the official documentation on the topic.
See also here and here for answer on a similar topic.

I'm sending an Api.ai carousel message to Smooch.io but it ends up being rendered as text

I have explored smooch.io. the format of sending rich messages to smooch.io is as follows:
{
"role": "appMaker",
"type": "carousel",
"items": [{
"title": "Tacos",
"description": "Description",
"mediaUrl": "http://example.org/image.jpg",
"actions": [{
"text": "Select",
"type": "postback",
"payload": "TACOS"
}, {
"text": "More info",
"type": "link",
"uri": "http://example.org"
}]
}, {
"title": "Ramen",
"description": "Description",
"mediaUrl": "http://example.org/image.jpg",
"actions": [{
"text": "Select",
"type": "postback",
"payload": "RAMEN"
}, {
"text": "More info",
"type": "link",
"uri": "http://example.org"
}]
}]
}
BUT when i send this JSON response through api.ai to smooch.io , it gets error. Though it easily displays simple text message.
How can i send this json message as an object to smooch. Is there any way to send it like the Facebook object?
All i want is to send a carousel to the user.
The Smooch API defines its own carousel JSON structure:
http://docs.smooch.io/rest/#carousel-message
The advantage of this is that Smooch can adapt this generic carousel format into any channel that support rendering them (Facebook Messenger, LINE messenger, and Telegram for example).
Update:
(Disclaimer: I work on Smooch)
What you're getting is a text-only fallback rendering of your carousel. This is what Smooch sends for channels that do not yet support it.
Carousels do not currently render fully in the Smooch Web Messenger, though it is in our backlog. The updated list of supported carousel channels can be found in the Channel Support section here: http://docs.smooch.io/rest/#carousel-message
For cards\carousels we had to map api.ai json to the smooch json called by the Smooch webhook.

Insert a card that can be directly responded to

update !important: The API has changed a lot, this question shouldn't be taken into consideration anymore
I am trying to use the REST api (via Node.js API) to create cards that the user can respond to and create an interaction in this way.
Reading the docs the creator attribute is not really specified anywhere, so I have no idea how to insert that.
Also this video doesn't help. Nor this guide =)
I believe there is an URL I should set as callback somehow? I'd like to know how to get these responses, please.
update
This is the card I am sending.
{
bundleId: 'veryuniqueBundle',
id: 'veryuniqueBundle:reply',
text: "want to hear moar?",
menuItems: [
{action: "REPLY"}
]
}
that's the response I get:
{
"collection": "timeline",
"itemId": "119c4dc8-c0ce-4a83-aa76-41aab4e8dbe1",
"operation": "INSERT",
"verifyToken": "42",
"userToken": "id:520ef63cde31145deb000001",
"userActions": [
{
"type": "REPLY"
}
]
}
The problem is, I can't see what the user responded (an text) and the reference to the original card id (or bundle) that was responded to. How can I get those
Cards do not provide a direct callback. Instead, when a user selects a menu item it causes the card to be updated with their menu selection. This change subsequently triggers a notification ping to your timeline subscription.
Follow these steps to detect a menu item selection:
Subscribe to notifications for changes in the timeline collection
{
"collection": "timeline",
"userToken": "awesome_kitty",
"verifyToken": "random_hash_to_verify_referer",
}
Insert a timeline card with a custom menu item
{
"text": "Hello world",
"menuItems": [
{
"action": "CUSTOM",
"id": "complete"
"values": [{
"displayName": "Complete",
"iconUrl": "http://example.com/icons/complete.png"
}]
}
]
}
Select the item on Glass
Receive the notification on your subscription URL
{
"collection": "timeline",
"itemId": "3hidvm0xez6r8_dacdb3103b8b604_h8rpllg",
"operation": "UPDATE",
"userToken": "harold_penguin",
"userActions": [
{
"type": "CUSTOM",
"payload": "PING"
}
]
}
Do cool stuff in your code
???
Profit

Resources