diff --git a/CSharp/cards-RichCards/CardsBot.csproj b/CSharp/cards-RichCards/CardsBot.csproj index 01e756372b..2bb86609fe 100644 --- a/CSharp/cards-RichCards/CardsBot.csproj +++ b/CSharp/cards-RichCards/CardsBot.csproj @@ -42,42 +42,42 @@ 4 - - packages\Autofac.3.5.2\lib\net40\Autofac.dll + + packages\Autofac.4.2.1\lib\net45\Autofac.dll True packages\Chronic.Signed.0.3.2\lib\net40\Chronic.dll True - - packages\Microsoft.Bot.Builder.3.2.1\lib\net46\Microsoft.Bot.Builder.dll + + packages\Microsoft.Bot.Builder.3.5.0\lib\net46\Microsoft.Bot.Builder.dll True - - packages\Microsoft.Bot.Builder.3.2.1\lib\net46\Microsoft.Bot.Connector.dll + + packages\Microsoft.Bot.Builder.3.5.0\lib\net46\Microsoft.Bot.Connector.dll True - - packages\Microsoft.IdentityModel.Protocol.Extensions.1.0.2.206221351\lib\net45\Microsoft.IdentityModel.Protocol.Extensions.dll + + packages\Microsoft.IdentityModel.Protocol.Extensions.1.0.3.308261200\lib\net45\Microsoft.IdentityModel.Protocol.Extensions.dll True - packages\Microsoft.Rest.ClientRuntime.2.3.2\lib\net45\Microsoft.Rest.ClientRuntime.dll + packages\Microsoft.Rest.ClientRuntime.2.3.4\lib\net45\Microsoft.Rest.ClientRuntime.dll True - packages\Microsoft.WindowsAzure.ConfigurationManager.3.2.1\lib\net40\Microsoft.WindowsAzure.Configuration.dll + packages\Microsoft.WindowsAzure.ConfigurationManager.3.2.3\lib\net40\Microsoft.WindowsAzure.Configuration.dll True - - packages\Newtonsoft.Json.8.0.3\lib\net45\Newtonsoft.Json.dll + + packages\Newtonsoft.Json.9.0.1\lib\net45\Newtonsoft.Json.dll True - - packages\System.IdentityModel.Tokens.Jwt.4.0.2.206221351\lib\net45\System.IdentityModel.Tokens.Jwt.dll + + packages\System.IdentityModel.Tokens.Jwt.4.0.3.308261200\lib\net45\System.IdentityModel.Tokens.Jwt.dll True @@ -114,6 +114,7 @@ + Designer diff --git a/CSharp/cards-RichCards/CardsDialog.cs b/CSharp/cards-RichCards/CardsDialog.cs index 35d3300b56..7afceeba04 100644 --- a/CSharp/cards-RichCards/CardsDialog.cs +++ b/CSharp/cards-RichCards/CardsDialog.cs @@ -3,6 +3,7 @@ using System; using System.Collections.Generic; using System.Threading.Tasks; + using System.Web; using Microsoft.Bot.Builder.Dialogs; using Microsoft.Bot.Connector; @@ -13,8 +14,11 @@ public class CardsDialog : IDialog private const string ThumbnailCard = "Thumbnail card"; private const string ReceiptCard = "Receipt card"; private const string SigninCard = "Sign-in card"; + private const string AnimationCard = "Animation card"; + private const string VideoCard = "Video card"; + private const string AudioCard = "Audio card"; - private IEnumerable options = new List { HeroCard, ThumbnailCard, ReceiptCard, SigninCard }; + private IEnumerable options = new List { HeroCard, ThumbnailCard, ReceiptCard, SigninCard, AnimationCard, VideoCard, AudioCard }; public async Task StartAsync(IDialogContext context) { @@ -59,8 +63,12 @@ private static Attachment GetSelectedCard(string selectedCard) return GetThumbnailCard(); case ReceiptCard: return GetReceiptCard(); - case SigninCard: - return GetSigninCard(); + case AnimationCard: + return GetAnimationCard(); + case VideoCard: + return GetVideoCard(); + case AudioCard: + return GetAudioCard(); default: return GetHeroCard(); @@ -131,5 +139,91 @@ private static Attachment GetSigninCard() return signinCard.ToAttachment(); } + + private static Attachment GetAnimationCard() + { + var animationCard = new AnimationCard + { + Title = "Microsoft Bot Framework", + Subtitle = "Animation Card", + Image = new ThumbnailUrl + { + Url = "https://docs.botframework.com/en-us/images/faq-overview/botframework_overview_july.png" + }, + Media = new List + { + new MediaUrl() + { + Url = "http://i.giphy.com/Ki55RUbOV5njy.gif" + } + } + }; + + return animationCard.ToAttachment(); + } + + private static Attachment GetVideoCard() + { + var videoCard = new VideoCard + { + Title = "Big Buck Bunny", + Subtitle = "by the Blender Institute", + Text = "Big Buck Bunny (code-named Peach) is a short computer-animated comedy film by the Blender Institute, part of the Blender Foundation. Like the foundation's previous film Elephants Dream, the film was made using Blender, a free software application for animation made by the same foundation. It was released as an open-source film under Creative Commons License Attribution 3.0.", + Image = new ThumbnailUrl + { + Url = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg" + }, + Media = new List + { + new MediaUrl() + { + Url = "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" + } + }, + Buttons = new List + { + new CardAction() + { + Title = "Learn More", + Type = ActionTypes.OpenUrl, + Value = "https://peach.blender.org/" + } + } + }; + + return videoCard.ToAttachment(); + } + + private static Attachment GetAudioCard() + { + var audioCard = new AudioCard + { + Title = "I am your father", + Subtitle = "Star Wars: Episode V - The Empire Strikes Back", + Text = "The Empire Strikes Back (also known as Star Wars: Episode V – The Empire Strikes Back) is a 1980 American epic space opera film directed by Irvin Kershner. Leigh Brackett and Lawrence Kasdan wrote the screenplay, with George Lucas writing the film's story and serving as executive producer. The second installment in the original Star Wars trilogy, it was produced by Gary Kurtz for Lucasfilm Ltd. and stars Mark Hamill, Harrison Ford, Carrie Fisher, Billy Dee Williams, Anthony Daniels, David Prowse, Kenny Baker, Peter Mayhew and Frank Oz.", + Image = new ThumbnailUrl + { + Url = "https://upload.wikimedia.org/wikipedia/en/3/3c/SW_-_Empire_Strikes_Back.jpg" + }, + Media = new List + { + new MediaUrl() + { + Url = "http://www.wavlist.com/movies/004/father.wav" + } + }, + Buttons = new List + { + new CardAction() + { + Title = "Read More", + Type = ActionTypes.OpenUrl, + Value = "https://en.wikipedia.org/wiki/The_Empire_Strikes_Back" + } + } + }; + + return audioCard.ToAttachment(); + } } } \ No newline at end of file diff --git a/CSharp/cards-RichCards/Controllers/MessagesController.cs b/CSharp/cards-RichCards/Controllers/MessagesController.cs index 8e09739fa6..217072b87e 100644 --- a/CSharp/cards-RichCards/Controllers/MessagesController.cs +++ b/CSharp/cards-RichCards/Controllers/MessagesController.cs @@ -23,8 +23,9 @@ public async Task Post([FromBody]Activity activity) } else { - HandleSystemMessage(activity); + this.HandleSystemMessage(activity); } + var response = Request.CreateResponse(HttpStatusCode.OK); return response; } diff --git a/CSharp/cards-RichCards/README.md b/CSharp/cards-RichCards/README.md index 8a67c6b303..f772d2f471 100644 --- a/CSharp/cards-RichCards/README.md +++ b/CSharp/cards-RichCards/README.md @@ -10,11 +10,11 @@ A sample bot to renders several types of cards as attachments. The minimum prerequisites to run this sample are: * The latest update of Visual Studio 2015. You can download the community version [here](http://www.visualstudio.com) for free. -* The Bot Framework Emulator. To install the Bot Framework Emulator, download it from [here](https://aka.ms/bf-bc-emulator). Please refer to [this documentation article](https://docs.botframework.com/en-us/csharp/builder/sdkreference/gettingstarted.html#emulator) to know more about the Bot Framework Emulator. +* The Bot Framework Emulator. To install the Bot Framework Emulator, download it from [here](https://emulator.botframework.com/). Please refer to [this documentation article](https://github.com/microsoft/botframework-emulator/wiki/Getting-Started) to know more about the Bot Framework Emulator. ### Code Highlights -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 and Sign-In 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](CardsDialog.cs#L42-L47) class where the `message.Attachments` property of the message activity is populated with a card attachment. +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](CardsDialog.cs#L46-L51) class where the `message.Attachments` property of the message activity is populated with a card attachment. ````C# public async Task DisplaySelectedCard(IDialogContext context, IAwaitable result) @@ -34,7 +34,7 @@ public async Task DisplaySelectedCard(IDialogContext context, IAwaitable #### 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](CardsDialog.cs#L70-L82) class for a Hero Card sample. +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](CardsDialog.cs#L78-L90) class for a Hero Card sample. ````C# private static Attachment GetHeroCard() @@ -53,7 +53,7 @@ private static Attachment GetHeroCard() ```` #### Thumbnail Card -The Thumbnail card is a multipurpose card; it primarily hosts a single small image, a button, and a "tap action", along with text content to display on the card. Check out the `GetThumbnailCard` method in the [CardsDialog](CardsDialog.cs#L84-L96) class for a Thumbnail Card sample. +The Thumbnail card is a multipurpose card; it primarily hosts a single small image, a button, and a "tap action", along with text content to display on the card. Check out the `GetThumbnailCard` method in the [CardsDialog](CardsDialog.cs#L92-L104) class for a Thumbnail Card sample. ````C# private static Attachment GetThumbnailCard() @@ -72,7 +72,7 @@ private static Attachment GetThumbnailCard() ```` #### Receipt Card -The receipt card allows the Bot to present a receipt to the user. Check out the `GetReceiptCard` method in the [CardsDialog](CardsDialog.cs#L98-L122) class for a Receipt Card sample. +The receipt card allows the Bot to present a receipt to the user. Check out the `GetReceiptCard` method in the [CardsDialog](CardsDialog.cs#L106-L130) class for a Receipt Card sample. ````C# private static Attachment GetReceiptCard() @@ -103,9 +103,9 @@ private static Attachment GetReceiptCard() ```` #### Sign-In Card -The Sign-In card is a card representing a request to sign in the user. Check out the `GetSigninCard` method in the [CardsDialog](CardsDialog.cs#L124-L133) class for a Sign-In Card sample. +The Sign-In card is a card representing a request to sign in the user. Check out the `GetSigninCard` method in the [CardsDialog](CardsDialog.cs#L132-L141) class for a Sign-In Card sample. -> Note: The sign in card can be used to initiate an authentication flow which is beyond this sample. For a complete authentication flow sample take a look to the [AuthBot](https://github.com/matvelloso/authbot). +> Note: The sign in card can be used to initiate an authentication flow which is beyond this sample. For a complete authentication flow sample take a look at [AuthBot](https://github.com/MicrosoftDX/AuthBot). ````C# private static Attachment GetSigninCard() @@ -120,6 +120,113 @@ private static Attachment GetSigninCard() } ```` +#### Animation Card +The Animation card is a card that’s capable of playing animated GIFs or short videos. Check out the `GetAnimationCard` method in the [CardsDialog](CardsDialog.cs#L143-L163) class for an Animation Card sample. + +````C# +private static Attachment GetAnimationCard() +{ + var animationCard = new AnimationCard + { + Title = "Microsoft Bot Framework", + Subtitle = "Animation Card", + Image = new ThumbnailUrl + { + Url = "https://docs.botframework.com/en-us/images/faq-overview/botframework_overview_july.png" + }, + Media = new List + { + new MediaUrl() + { + Url = "http://i.giphy.com/Ki55RUbOV5njy.gif" + } + } + }; + + return animationCard.ToAttachment(); +} +```` + +> Note: At the time of writing this sample, Skype requires the Animation card to have a Thumbnail Url. + +#### Video Card +The Video card is a card that’s capable of playing videos. Check out the `GetVideoCard` method in the [CardsDialog](CardsDialog.cs#L165-L195) class for a Video Card sample. + +````C# +private static Attachment GetVideoCard() +{ + var videoCard = new VideoCard + { + Title = "Big Buck Bunny", + Subtitle = "by the Blender Institute", + Text = "Big Buck Bunny (code-named Peach) is a short computer-animated comedy film by the Blender Institute, part of the Blender Foundation. Like the foundation's previous film Elephants Dream, the film was made using Blender, a free software application for animation made by the same foundation. It was released as an open-source film under Creative Commons License Attribution 3.0.", + Image = new ThumbnailUrl + { + Url = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg" + }, + Media = new List + { + new MediaUrl() + { + Url = "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" + } + }, + Buttons = new List + { + new CardAction() + { + Title = "Learn More", + Type = ActionTypes.OpenUrl, + Value = "https://peach.blender.org/" + } + } + }; + + return videoCard.ToAttachment(); +} +```` + +> Note: At the time of writing this sample, Skype requires the Video card to have a Thumbnail Url. + +#### Audio Card +The Audio card is a card that’s capable of playing an audio file. Check out the `GetAudioCard` method in the [CardsDialog](CardsDialog.cs#L197-L227) class for an Audio Card sample. + +````C# +private static Attachment GetAudioCard() +{ + var audioCard = new AudioCard + { + Title = "I am your father", + Subtitle = "Star Wars: Episode V - The Empire Strikes Back", + Text = "The Empire Strikes Back (also known as Star Wars: Episode V – The Empire Strikes Back) is a 1980 American epic space opera film directed by Irvin Kershner. Leigh Brackett and Lawrence Kasdan wrote the screenplay, with George Lucas writing the film's story and serving as executive producer. The second installment in the original Star Wars trilogy, it was produced by Gary Kurtz for Lucasfilm Ltd. and stars Mark Hamill, Harrison Ford, Carrie Fisher, Billy Dee Williams, Anthony Daniels, David Prowse, Kenny Baker, Peter Mayhew and Frank Oz.", + Image = new ThumbnailUrl + { + Url = "https://upload.wikimedia.org/wikipedia/en/3/3c/SW_-_Empire_Strikes_Back.jpg" + }, + Media = new List + { + new MediaUrl() + { + Url = "http://www.wavlist.com/movies/004/father.wav" + } + }, + Buttons = new List + { + new CardAction() + { + Title = "Read More", + Type = ActionTypes.OpenUrl, + Value = "https://en.wikipedia.org/wiki/The_Empire_Strikes_Back" + } + } + }; + + return audioCard.ToAttachment(); +} +```` + +> Note: At the time of writing this sample, Skype requires the Audio card to have a Thumbnail Url. + ### Outcome You will see the following in the Bot Framework Emulator, Facebook Messenger and Skype when opening and running the sample. @@ -148,10 +255,30 @@ You will see the following in the Bot Framework Emulator, Facebook Messenger and |----------|-------|----------| |![Sample Outcome Sign-In Card](images/outcome-signin-emulator.png)|![Sample Outcome Sign-In Card](images/outcome-signin-facebook.png)|![Sample Outcome Sign-In Card](images/outcome-signin-skype.png)| +#### Animation Card + +| Emulator | Facebook | Skype | +|----------|-------|----------| +|![Sample Outcome Animation Card](images/outcome-animation-emulator.png)|![Sample Outcome Animation Card](images/outcome-animation-facebook.png)|![Sample Outcome Animation Card](images/outcome-animation-skype.png)| + +#### Video Card + +| Emulator | Facebook | Skype | +|----------|-------|----------| +|![Sample Outcome Video Card](images/outcome-video-emulator.png)|![Sample Outcome Video Card](images/outcome-video-facebook.png)|![Sample Outcome Video Card](images/outcome-video-skype.png)| + +#### Audio Card + +| Emulator | Facebook | Skype | +|----------|-------|----------| +|![Sample Outcome Audio Card](images/outcome-audio-emulator.png)|![Sample Outcome Audio Card](images/outcome-audio-facebook.png)|![Sample Outcome Audio Card](images/outcome-audio-skype.png)| + + ### More Information To get more information about how to get started in Bot Builder for .NET and Attachments please review the following resources: * [Bot Builder for .NET](https://docs.botframework.com/en-us/csharp/builder/sdkreference/index.html) +* [Adding Attachments to a Message](https://docs.botframework.com/en-us/core-concepts/attachments) * [Attachments Property](https://docs.botframework.com/en-us/csharp/builder/sdkreference/activities.html#attachmentsproperty) * [Attachments, Cards and Actions](https://docs.botframework.com/en-us/csharp/builder/sdkreference/attachments.html) @@ -160,7 +287,7 @@ To get more information about how to get started in Bot Builder for .NET and Att > > The Bot Framework does its best to support the reuse of your Bot in as many channels as you want. However, due to the very nature of some of these channels, some features are not fully portable. > -> The features used in this sample are fully supported in the following channels: +> The Hero card, Thumbnail card, Receipt card and Sign-in card used in this sample are fully supported in the following channels: > - Skype > - Facebook > - Telegram @@ -175,3 +302,7 @@ To get more information about how to get started in Bot Builder for .NET and Att > > On the other hand, they are not supported and the sample won't work as expected in the following channel: > - SMS +> +> The Animation card, Video card and Audio card used in this sample are fully supported in the following channels: +> - Skype +> - Facebook \ No newline at end of file diff --git a/CSharp/cards-RichCards/Web.config b/CSharp/cards-RichCards/Web.config index 05b292cffe..f59bd2d5e3 100644 --- a/CSharp/cards-RichCards/Web.config +++ b/CSharp/cards-RichCards/Web.config @@ -53,7 +53,7 @@ - + @@ -63,6 +63,18 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/CSharp/cards-RichCards/images/outcome-animation-emulator.png b/CSharp/cards-RichCards/images/outcome-animation-emulator.png new file mode 100644 index 0000000000..7f66644564 Binary files /dev/null and b/CSharp/cards-RichCards/images/outcome-animation-emulator.png differ diff --git a/CSharp/cards-RichCards/images/outcome-animation-facebook.png b/CSharp/cards-RichCards/images/outcome-animation-facebook.png new file mode 100644 index 0000000000..175a657822 Binary files /dev/null and b/CSharp/cards-RichCards/images/outcome-animation-facebook.png differ diff --git a/CSharp/cards-RichCards/images/outcome-animation-skype.png b/CSharp/cards-RichCards/images/outcome-animation-skype.png new file mode 100644 index 0000000000..4ead1c9da3 Binary files /dev/null and b/CSharp/cards-RichCards/images/outcome-animation-skype.png differ diff --git a/CSharp/cards-RichCards/images/outcome-audio-emulator.png b/CSharp/cards-RichCards/images/outcome-audio-emulator.png new file mode 100644 index 0000000000..4853ac06be Binary files /dev/null and b/CSharp/cards-RichCards/images/outcome-audio-emulator.png differ diff --git a/CSharp/cards-RichCards/images/outcome-audio-facebook.png b/CSharp/cards-RichCards/images/outcome-audio-facebook.png new file mode 100644 index 0000000000..fb385ce85b Binary files /dev/null and b/CSharp/cards-RichCards/images/outcome-audio-facebook.png differ diff --git a/CSharp/cards-RichCards/images/outcome-audio-skype.png b/CSharp/cards-RichCards/images/outcome-audio-skype.png new file mode 100644 index 0000000000..3dcf1b909d Binary files /dev/null and b/CSharp/cards-RichCards/images/outcome-audio-skype.png differ diff --git a/CSharp/cards-RichCards/images/outcome-video-emulator.png b/CSharp/cards-RichCards/images/outcome-video-emulator.png new file mode 100644 index 0000000000..73b3735b66 Binary files /dev/null and b/CSharp/cards-RichCards/images/outcome-video-emulator.png differ diff --git a/CSharp/cards-RichCards/images/outcome-video-facebook.png b/CSharp/cards-RichCards/images/outcome-video-facebook.png new file mode 100644 index 0000000000..59ccb8abf9 Binary files /dev/null and b/CSharp/cards-RichCards/images/outcome-video-facebook.png differ diff --git a/CSharp/cards-RichCards/images/outcome-video-skype.png b/CSharp/cards-RichCards/images/outcome-video-skype.png new file mode 100644 index 0000000000..34630fb2c9 Binary files /dev/null and b/CSharp/cards-RichCards/images/outcome-video-skype.png differ diff --git a/CSharp/cards-RichCards/packages.config b/CSharp/cards-RichCards/packages.config index a5622870c2..88cb35634e 100644 --- a/CSharp/cards-RichCards/packages.config +++ b/CSharp/cards-RichCards/packages.config @@ -1,15 +1,15 @@  - + - - - - - - + + + + + + \ No newline at end of file