I am using Adaptive Card 1.2 to be displayed on MS Teams. I want to style the action button but not able to do do.
subCard.Actions = new List<AdaptiveAction>() {
new AdaptiveSubmitAction {
Title = "Ok",
DataJson = "{ \"Type\": \"response_feedback\" }",
Style="positive",
}
};
From my testing, it seems like Style is not implemented in Teams, at least not at the moment. By the way, you can use App Studio to test this - there's a tab there called "card editor" where you can create card JSON, see a preview, and even send it to yourself.
Related
I used SAPCAI (SAP Conversational AI is a French development platform like Azure Bot Service) to build my chatbot, but I'm using the Bot-Framework Webchat on my web app. Therefore, I don't have any C# or JS code. The problem is SAPCAI quick replies are displayed as "attachments". How can I fix that?
Expected
Got
What you want is the Quick replies type.
Quick replies: Same purpose as buttons, but disappear once clicked. Great if you don’t want the user to have to scroll up the conversation and click on a button again.
There is information about how to create click replies on this page. It seems to be in the format of:
{
"type": "quickReplies",
"content": {
"title": "TITLE",
"buttons": [
{
"title": "BUTTON_TITLE",
"value": "BUTTON_VALUE"
}
]
}
}
The important part would be "type": "quickReplies". Since you haven't provided any code I'm not sure if you know how to get to the stage where you enter/edit this JSON. From the documentation on the first page that I linked it would seem that you get to this via:
On the Actions tab of a skill (or on the Requirements tab), you can choose among other things to send messages.
Under the send message button you will be displayed a list of message types to send, quick replies is one of these types. See my screenshots here.
I hope this helps.
I'm not entirely sure how SAPCAI works, but if you are receiving a card in Web Chat, you can use a custom middleware store to convert the card's title to text and its buttons to suggested actions. Then you can add them to the activity in place of the attachment. Note, the store middleware below will convert all card to suggested actions, so you may want to add some additional logic if you do intend to use other cards in your dialog. Also, if the card is an AdaptiveCard, you will need to do some more modifications as well since those tend to more complex than rich cards.
Middleware
const store = createStore(
{},
({ dispatch}) => next => async action => {
if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
const { attachments, from: { role }} = action.payload.activity;
if (role === 'bot' && attachments) {
const text = attachments.map(({ content: { title }}) => title).join(' ');
const actions = attachments.map(({content: { buttons }}) => buttons).flat();
action.payload.activity.text = text;
action.payload.activity.attachments = [];
action.payload.activity.suggestedActions = { actions };
}
}
return next(action)
}
);
renderWebChat({
directLine,
store,
}, document.getElementById('webchat'));
Screenshot
Hope this helps!
I have defined a ThumbnailCard using this structure:
private static Attachment GetThumbnailCard()
{
var thumbnailCard= new ThumbnailCard
{
Title = "title",
Subtitle = "subtitle",
Text = "text",
Images = new List<CardImage>() { new CardImage(url: "http://example.com/image.jpg")},
Buttons = new List<CardAction>() { new CardAction(type: ActionTypes.ImBack, title: "Product 1", value: "Product 01") },
};
return thumbnailCard.ToAttachment();
}
And everything is working fine, the button is showing "Product 1" and when the user uses the button you see on the chat window the content of value in this case "Product 01".
But i need more functionality, so i review the documentation and found other parameters of the cardAction class like text and displayText.
So that when the user uses the button on the chat you will see "I want to buy Product 01", and the bot will get the Id of that product so it can check it on the database.
I have done this according to the documentation:
new CardAction(type: ActionTypes.ImBack, title: "Product 1", value: "IdOfProduct01", text: "Product 01", displayText: "I Want to buy Product 01")
And i am receiving the value on this method:
private async Task ReceivingButtonClick(IDialogContext context, IAwaitable<object> result)
{
var rpta = await result as Activity;
}
But when i try to access rpta.value it is always null, and the chat windows is still showing the content of value instead of displayText or text
Does anyone knows if maybe this functionality is not available yet, i'm using Microsoft.Bot.Builder 3.13.1 and i am testing this on the emulator, or maybe i'm receiving the result as an Activity and i should be receiving it as something else.
Thanks in advance for the answers.
This is the current behavior in BOT Framework. ImBack is similar to just typing a message and it sends back whatever was set in the 'value'. I guess you don't want to show id to the user when he/she clicks the product button. You can instead use ActionTypes.PostBack as type and that will send back the message to BOT but not show it on chat.
Try this:
new CardAction(type: ActionTypes.PostBack, title: "Product 1", value: "IdOfProduct01", text: "Product 01", displayText: "I Want to buy Product 01")
The problem with using PostBack is that it is not supported in all channels. So, make sure to check it for the channel you are implementing your bot for.
Does anyone knows if maybe this functionality is not available yet, i'm using Microsoft.Bot.Builder 3.13.1 and i am testing this on the emulator, or maybe i'm receiving the result as an Activity and i should be receiving it as something else.
The displayText and Text properties of CardAction were new added in v3 SDK, problem is that DirectLineJS hasn’t been modified to support these properties yet. You may refer to the source code of directLine.ts to see that problem.
And our emulator uses WebChat and WebChat uses DirectLine, so for ActionTypes.ImBack, that cause the problem.
You may submit an issue on Github BotFramework-WebChat, it will be convenient for us to monitor this issue. Thank you.
I want to capture the user behavior in my chatbot after each response given by bot. it basically a feedback, like/dislike button in Facebook.
Is it possible in MS bot framework?
You can implement feedback yes no button or like button using rich card or hero card.
Many messaging channels provide the ability to attach richer objects. The Bot Framework has the ability to render rich cards as attachments. There are several types of cards supported: Hero Card, Thumbnail Card, Receipt Card, Sign-In Card, Animation Card, Video Card and Audio Card. Once the desired Card type is selected, it is mapped into an Attachment data structure. Check out the key code located in the CardsDialog class where the message.Attachments property of the message activity is populated with a card attachment.
public async Task DisplaySelectedCard(IDialogContext context, IAwaitable<string> result)
{
var selectedCard = await result;
var message = context.MakeMessage();
var attachment = GetSelectedCard(selectedCard);
message.Attachments.Add(attachment);
await context.PostAsync(message);
context.Wait(this.MessageReceivedAsync);
}
Hero Card
The Hero card is a multipurpose card; it primarily hosts a single large image, a button, and a "tap action", along with text content to display on the card. Check out the GetHeroCard method in the CardsDialog class for a Hero Card sample.
private static Attachment GetHeroCard()
{
var heroCard = new HeroCard
{
Title = "BotFramework Hero Card",
Subtitle = "Your bots — wherever your users are talking",
Text = "Build and connect intelligent bots to interact with your users naturally wherever they are, from text/sms to Skype, Slack, Office 365 mail and other popular services.",
Images = new List<CardImage> { new CardImage("https://sec.ch9.ms/ch9/7ff5/e07cfef0-aa3b-40bb-9baa-7c9ef8ff7ff5/buildreactionbotframework_960.jpg") },
Buttons = new List<CardAction> { new CardAction(ActionTypes.OpenUrl, "Get Started", value: "https://learn.microsoft.com/bot-framework") }
};
return heroCard.ToAttachment();
}
i have create a sample. Sharing image with you. On click of Yes it will show a card to give rating as well.
I'm trying to develop a Firefox add on using WebExtensions. What I'm trying to do is open a new Firefox tab or window when the user clicks the notification. But it doesn't work.
When I click the notification, nothing happens.
I'm creating notifications like:
var q = chrome.notifications.create({
"type": "basic",
"iconUrl": chrome.extension.getURL("128-128q.png"),
"title": 'title',
"message": 'content'
});
chrome.notifications.onClicked.addListener(function(notificationId) {
window.open('http://www.google.com');
});
browser.notifications.onClicked.addListener(function(notificationId) {
window.open('http://www.google.com');
});
q.onClicked.addListener(function(notificationId) {
window.open('http://www.google.com');
});
var audio = new Audio('message.mp3');
audio.play();
How can I make this work?
It appears that the problem is that you are attempting to open a new URL in a way that does not work.
The following should work, using chrome.tabs.create():
var q = chrome.notifications.create("MyExtensionNotificationId", {
"type": "basic",
"iconUrl": chrome.extension.getURL("128-128q.png"),
"title": 'title',
"message": 'content'
});
chrome.notifications.onClicked.addListener(function(notificationId) {
chrome.tabs.create({url:"http://www.google.com"});
});
However, you need to be testing this in Firefox 47.0+ as support for chrome.notifications.onClicked() was only added recently. My statement of Firefox 47.0+ is based on the compatibility table. However, the compatibility table has at least one definite error. Thus, a higher version of Firefox may be required. The code I tested worked in Firefox Nightly, version 50.0a1, but did not work properly in Firefox Developer Edition, version 48.0a2. In general, given that the WebExtensions API is in active development, you should be testing against Firefox Nightly if you have questions/issues which are not functioning as you expect. You can also check the source code for the API to see what really is implemented and when it was added.
Note: this works with either chrome.notifications.onClicked or browser.notifications.onClicked. However, don't use both to add two separate anonymous functions which do the same thing as doing so will result in whatever you are doing happening twice.
I did not actually test it with your code, but I did test it with a modified version of the notify-link-clicks-i18n WebExtensions example. I modified the background-script.js file from that example to be:
/*
Log that we received the message.
Then display a notification. The notification contains the URL,
which we read from the message.
*/
function notify(message) {
console.log("notify-link-clicks-i18n: background script received message");
var title = chrome.i18n.getMessage("notificationTitle");
var content = chrome.i18n.getMessage("notificationContent", message.url);
let id = "notify-link-clicks-i18n::" + title + "::" + message.url;
chrome.notifications.create(id,{
"type": "basic",
"iconUrl": chrome.extension.getURL("icons/link-48.png"),
"title": title,
"message": content
});
}
/*
Assign `notify()` as a listener to messages from the content script.
*/
chrome.runtime.onMessage.addListener(notify);
//Add the listener for clicks on a notification:
chrome.notifications.onClicked.addListener(function(notificationId) {
console.log("Caught notification onClicked with ID:" + notificationId);
//Open a new tab with the desired URL:
browser.tabs.create({url:"http://www.google.com"});
});
My preference for something like this where a unique ID is possible is to provide a unique ID, that both identifies that the notification was displayed by my add-on and what the notification was. This allows the listener function to choose to only act on notifications which were displayed by my add-on and/or only a subset of those I display, or have different actions based on why I displayed the notification.
The reason you had trouble here in figuring out what was not working is probably because you did not reduce the issue to the minimum necessary to demonstrate the issue. In other words, it would have been a good idea to just try opening a new URL separately from the notifications onClicked listener and just try a console.log() within the listener.
I'm developing windows phone 8 application and this application should work in two languages English and Arabic.
In some screens I'm showing the message box with some message and buttons(OK, CANCEL).
When the application is in English the buttons content (OK and CANCEL) is displaying in English. It is fine.
But when the application is running in Arabic language, then the Buttons content is not displaying in Arabic.It is showing in English only
How should I change the buttons content based on the language.
Thanks
You should use Windows Phone toolkit CustomMessageBox control.
It can be easily localized:
CustomMessageBox messageBox = new CustomMessageBox()
{
Caption = "Do you like this sample?",
Message = "There are tons of things you can do using custom message boxes. To learn more, be sure to check out the source code at Codeplex.",
LeftButtonContent = "yes",
RightButtonContent = "no",
IsFullScreen = (bool)FullScreenCheckBox.IsChecked
};
In Windows Phone 8, you have access to Microsoft.Xna.Framework.GameServices which has a much more versatile message box you can use and no need to download a separate library.
IAsyncResult result = Microsoft.Xna.Framework.GamerServices.Guide.BeginShowMessageBox(
AppResources.SmsConfirmText,
"",
new string[] { AppResources.OkText, AppResources.CancelText },
0,
Microsoft.Xna.Framework.GamerServices.MessageBoxIcon.None,
null,
null);
// Include following line if you want it to be synchronous
result.AsyncWaitHandle.WaitOne();
int? choice = Microsoft.Xna.Framework.GamerServices.Guide.EndShowMessageBox(result);
if(choice.HasValue)
{
if(choice.Value==0)
{
// User clicked on the first button: AppResources.OkText
}
else if(choice.Value==1)
{
// User clicked on the second button: AppResources.CancelText
}
}
Source: http://developer.nokia.com/community/wiki/Advanced_MessageBox_for_Windows_Phone