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.
Related
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.
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 am using hero card to display the result to the user for their questions but it's not displaying in MS Teams channel.
It's working in Skype.
Is there any issue in BOT framework regarding this?
And is there any way to fix this?
It may be the issue with the http:// and https://
cardImages.Add(new CardImage(url: "https://<ImageUrl1>"));
Just use the url as https://
and
ThumbnailCard plCard = new ThumbnailCard()
{
Title = "I'm a thumbnail card",
Subtitle = "Pig Latin Wikipedia Page",
Images = cardImages,
Buttons = cardButtons
};
Rich Card attachments are not showing on web chat or Skype, but showing fine on the emulator. The attachment contains the correct data and attributes and works fine if I use ContentType + ContentURL. But if I use rich card attachments, they don't show up on Web Chat or Skype. This is my code. Please help.
Message reply = context.MakeMessage();
var actions = new List<Microsoft.Bot.Connector.Action>();
actions.Add(new Microsoft.Bot.Connector.Action
{
Title = $"I like it",
Message = $"I like it message"
});
actions.Add(new Microsoft.Bot.Connector.Action
{
Title = $"Show me more",
Message = $"Show me more message"
});
reply.Attachments = new List<Attachment>();
reply.Attachments.Add(new Attachment()
{
Title = p.Title,
TitleLink = p.DetailPageURL,
ThumbnailUrl = p.MediumImage,
Text = p.Title,
Actions = actions,
FallbackText ="The message attachment is not rendering for: " + p.Title
});
await context.PostAsync(reply);
context.Wait(MessageReceived);
From the bot framework page:
Important:You should test Skype bots using the developer version of the Skype Web App until updated Skype apps for desktop and mobile are available at the end of July. https://web.skype.com/en/?ecsoverride=developer
This should be resolved now with latest Skype clients now that Bot Framework V3 has been released.