 Today on Visual Studio Toolbox, you're going to see how to make your bots not look ugly. Hi, welcome to Visual Studio Toolbox. I'm your host Robert Green and joining me today is Sam Bazoo. Hey, Sam. Hey. This is part two of our two-part conversation on bots. In part one, we had an overview of bots. We talked a little bit about what they are, a little bit about the bot framework. Saw a couple simple examples. Today we're going to go a bit more in-depth into a bot you're going to show. And people may have noticed that the UI you used in the previous episode was- A blend. I was going to say basic. I was not going to be judgmental. But yeah, it was going to blend and boring. You're going to show us ways we can make them a lot more interesting. So, all right, let's go to it. Let's roll. Thank you so much again for having me. So let's switch streams and let's talk about conversational UI in bots. So we talked about what bots are. They're essentially apps, but they need to be a little smart with all the intelligence behind the scenes in the cloud. And then your user doesn't really care about how you get that intelligence. To him or her, it's all about how do I use this bot. Is it friendly enough? Is it visually appealing enough? And that's some of the things that we can talk about. Once again, my name is Sam Basu. And at SAM IDIP, that's my social handle for most things, I am a developer advocate at Progress. So I deal with most of the tillerics out of our tooling and also a little bit of Kendo UI, which we'll talk about. So, turns out bots are just like any other apps. They need to have a good user experience. Otherwise, it falls a little short of expectations. So we talked about how bots can be created either locally or on Azure or other platforms. And then you very likely use a bot framework to kind of get started. Microsoft being the most popular one, but there are other ones. But no matter how you build your bot, it's all about that user experience to that end user at the very end. So to that end, we have actually been a little busy with this over the last one year or so. So just a little backdrop. We are Progress and we make some of the tools that developers love over the years. Tilleric is a brand that we have, hopefully most developers know us as Tilleric. We make all sorts of dotnet tooling, smart and polished UI for web, desktop, mobile, you name it. So it really is any platform. And with Xamarin now, you can take your dotnet code to all of the Microsoft platforms as well. iOS, Android, you name it. So it really is for any platform. That's all of our dotnet tooling. And then about maybe five or six years back, Kendo UI came along. Kendo UI is our front-end JavaScript UI tooling for all types of web applications and mobile web applications as well. When I actually started with Tilleric, it was simple. Back in the good old days, Kendo UI was just a jQuery. Back in the good old days, when it was simple. It was just a jQuery-based library. And you know, when jQuery gets a lot of flag these days, people say it's dead. It's fine, really. I mean, if you look at how many enterprises use jQuery, I think it's fine. But I mean, Kendo UI is a classic example of how the web has evolved and how our tools have evolved. We thought jQuery was a safe dependency to take and most people use it that way. But we have wrappers for everything. So you can use Kendo UI to ASP.NET, like MVC, or you can do ASP.NET Core. We are rendering the same HTML and JavaScript on the client side. And then in the last couple of years, we've been busy building components because, turns out, the JavaScript world likes opinionated spa frameworks. So things like Angular, React, and View. So we make components for all of these platforms. So make your web applications however you want and bring your framework. And to us, it's all about rendering the UI. So with those two things, Telerik and Kendo UI, for the first time, we are actually able to do something that's kind of cross-cutting all of our products, both on .NET and on JavaScript. And this is what we call conversational UI, kind of in theme of what bots do. It's conversations. We're trying to put a more human UI in front of it. So conversational UI is our big effort to kind of help put a polished UI in front of bots. Essentially, the idea is to have UI that is platform agnostic. So we don't care whether you do .NET or whether you do Node.js. We don't care if it's web, desktop, or mobile. It's the same UI everywhere. So it's consistent. The APIs are consistent for developers to hook it up. Because if you are building a bot framework, I mean, you have built your bot, but then you want to have a client-side look for your web applications and then your mobile, you don't want them to be substantially different. That kind of looks awkward to your customers. You want it to be looking the same, and that's what we can strive with some consistency. So when it comes to conversations, a lot of the times bot frameworks will kind of help you out. But to the end user, these UI controls are not just about what's visually appealing. It's also the continuity of your conversation. When I say, what pizza do you want? What do you want in your pizza? If I kind of make you type everything like pepperoni, this, that, that's not a good experience, right? So by nature, we humans are very good at selecting things rather than having to type them in. So we will kind of help you out with different types of pickers and things that can help kind of get that user response that much quicker. So to the user, he feels like, oh, I'm just click, click, click, and I'm done. So it's part of that conversational flow that we are also kind of aiming to make it better for users. And so I noticed that you've got conversational UI for WinForms or WPF, so which I guess kind of makes sense because the bot's essentially a service running in the cloud somewhere that your application is talking to. Again, we said a race TTP. So then that would kind of imply that it doesn't really matter what the front end is, right? We do a lot of talk, you know, oh, you have it in Skype, you have in Teams, you have in Slack, but you could just as well have it in WinForms, WPF, ASP, right? And then this is the appeal for enterprise developers who are building line of business apps. So you don't always have to go chase the fluffy things in the cloud. This can live in WinForms and WPF. It's just a thing that's embedded inside of your apps that helps you automate workflows inside of your enterprise. Right. So then I guess the question that I'll have, I want you to answer not necessarily right now, but before we stop, is conversational UI for bots and it's a picker that shows me pepperoni sausage, et cetera, which we've been doing in our UIs since long before bots were invented. So what's the difference between a, you'll sell me a picker I can use in WinForms, you'll sell me a conversational picker that I can use in WinForms. What's the difference? The UI is not all that different. It's how it's presented as a part of a conversation that's different. And for us, it's making sure that UI is consistent. Cause I mean, we have like grids and charts, things that are common across web, desktop and mobile. We've been doing this for years, but this is also an opportunity for us to do very distinctly different UI that is consistent across WPF and Xamarin and ASP. So yes, some of those things. And this is part of the reason why we are building conversational UI, because to your point, drop-down lists and calendars and grids and charts, we have these things. We have had these things for years. Now we're putting it in chats, inside of conversational chatbots. So developers, if you are having to throw something at the user to have them pick something or select a date, do this, choose this, you don't have to reinvent the wheel altogether. We already have the UI that you can just render. So that's what we are doing. And again, I like the list of things that we down support all the way from JQuery to WPF and ASP.NET, Xamarin, I'm a big fan of because you can now do this in iOS and Android. So it's kind of all across. So let's look at modern UI for chatbots. The basic idea is very simple and we just give you some of the UI that kind of helps you drive those conversations. So let's jump out of our slides and look at some code. Well, first thing is we're going to start here. We have this landing page, telleray.com forward slash conversational dash UI. That's the landing page that's going to tell you everything about what we built. So it's modern UI for chatbots and it's platform agnostic, all of those things that we said. And right in here, we have demos and documentation. So choose your platform. Don't even bother about the things that you don't care. Just drill into those demos, drill into that documentation and see how it works for your platform, okay? That's it. Now, to break down what this is, we write a lot, this URL that we normally use, telleray.com forward slash blogs, that's our blogs page. So I wrote this article which kind of helps break down what this is. So any chat conversation that you see has a bunch of pieces to it. First is it's a two-person conversation, you and a bot, right? So it has to have an author. So these are some like plain old POCO objects that we are throwing your way. I'm gonna talk about these things from a .NET perspective, but it's the same exact idea if you go to JavaScript. It's just objects that we are creating. So every author has to have a name and avatar so we can nicely depict who's saying what. And then there's messages. Messages is what you send back and forth with your bot. Just text messages with the author. And then we have this concept of items. There is a collection, which is essentially an observable collection. So you can bind it to the UI and it auto updates. But the items collection is what your chat conversation is all about. So no matter what be your backend when you're having a chat conversation, it all your messages get pumped into this items collection. That's what holds your entire chat conversation. So that's an interesting concept for us because that's where we are gonna stick in all of our UI. And then to your point, we have had these UI things for a long time. Now we are just putting them into chatbots. So things like date pickers, time pickers, again, you will have some of these things, but they're not baked into bot framework or other bot engines entirely. So date pickers, time pickers, item pickers, this is kind of a generic thing. So you can pick whatever parts of a sandwich you wanna pick, whatever pizza toppings you want. And then we have a concept of cart pickers, which is essentially a hero card, which is a rich, richer experience. So this is what kind of makes up kind of the parts of our conversational UI. It is basic, but what you can do with it is quite a bit. So let's kind of dive into this and see what this looks like. So I'm in Visual Studio for Mac, you can get the exact same thing on Visual Studio on Windows. Let's open up a solution. I'll show you some code. So this here is a Xamarin. We'll have a link to this in the show notes. So what I'm showing here is this is a super simple Xamarin solution. So we are building iOS or Android apps with C sharp and XAML, but the ideas and the code is gonna be the exact same, whether you do this in WPF or WinForms or with JavaScript on the website of things. So in here, kind of what you expect from a Xamarin solution, this is a Xamarin solution. This is a .NET standard library. So it's shared between all platforms. And in here, I just have iOS, but you can have Android, you can have UWP, you can have any other framework that Xamarin.Forms supports. We don't have any platform specific code in here, whatsoever, so everything is in here. So this is our shared project. If you look at the dependencies from Nuget, it is just two things. It's Xamarin.Forms, which is because it's a Xamarin.Forms app, and then Tilleri Graph for Xamarin. And you don't need the whole thing, we are just gonna pull out the chat conversations part of it, so you can just get the Nuget that's catered to that. So in here, all I have is main page.xaml and then main page.xaml.cs. So one UI front-end with Xaml and then the code behind for it. So let's take a look at the Xaml part of it first. This is super simple. We have a content page as is expected from any Xamarin.Forms application, it holds all our content. And within that, I have a few namespaces in here declared, so I can just say rad chat. That's just one placeholder, that's our chat front-end that's gonna hold our entire conversation, okay? Now, at this point, we are kind of abstracting away the chat conversations front-end, what the user sees with what's behind the scenes. So we can talk to this through other ways in which we can talk to our bot. So this is just the UI part of it, is what I'm showing you. And then what I have defined here is what's called a repeat bot, kind of exactly what we did from the Azure templates or any of the bot builder SDKs. When you do an echo bot, this is what we're doing, it's a repeat service. So when you receive a message from the user, I simply turn around and repeat that message back to the user. So it's an echo thing that we're doing. So now let's look at mainpagesaml.cs. So in here, I have a few using statements and then in here, I'm defining my bot service as the repeat bot service, so it's an echo bot. And then when the bot receives a message, I have a function that kind of takes the message and translates it back and gives it back to the user. And that's my bot author. It's just called mybot. Interesting thing to keep in mind when you're doing like mobile apps, images are important. This one has a little avatar, it's got a bot face. And that avatar, those images, those need to live in the platform-specific projects like iOS and Android. Author lives where? So the author is two-part. One is you, the user. No, I mean the class, author. That's just a property on the chat object. Okay, so if you show us that, is that built into the Telerik UI, right? Yeah, okay. So when you got the namespace, it kind of is automatically initiating a red chat. Telerik.zermanforms.conversationalUI. Yeah, so this red chat thing that you initialized has the author, has the items collection. And that's where we're gonna start. So let's talk about- And then are you also abstracting the bot framework you're using? You could, yes. Right now this has no bot framework whatsoever. This one is just purely client-side. Okay. Just trying to show you a demo with an echo bot. Got it. So we have the bot author and then we can do things to it. This one is, notice how this is the chat placeholder. Do that, we can add things to it. We can say, oh, this bot author starts out the conversation saying, welcome to our chat. And then we'll take it from here. So let's kinda run this and we'll see how this works. So this is a super simple example that kinda shows you the different aspects of how to use the UI. We're gonna wait for the iOS simulator to spin up. And it starts up. Okay. Notice how this is just a simple iOS app, but this bot face, this is our bot author. And these images do need to live in platform-specific projects because that's how the app packages are built. So this one here is, this is just an echo bot so I can say hello. And notice how this is my author. I can set up myself as a nice avatar which I don't have yet. But this is the bot saying hello. So it's literally spitting back whatever I say. So it's an echo bot. That's just the basics of it. So we looked at how to set up an author and how to have an items collection and then we have a repeat bot service that's just relaying what we are doing. So that's just step one. Let's look into some things. And I'll kinda break this down so it's easy to follow for one thing at a time. So let's look at dates. Let's fire this up. If you had to have a conversation where you are asking the user to pick a date, again, obviously don't have him or her type it in, we can throw in a little calendar. Again, these are things that we have already as native controls on iOS, Android, and Udallupi and other platforms. We can just now throw this as a part of the conversation. So this is just a date picker. I can go left and right. I can have properties on these things like min date, max date, what's my present selected date. And when I select something, the bot can say, oh, you chose that. Okay, so it's just simple. So that's just dates. Let me turn this relaying thing off so it doesn't keep repeating what we just said. So let's look at time, for example. We're gonna run that. So this is supposed to be part of a chain of conversations. You're gonna string together a conversation. I'm just trying to show you the UI just separately, one at a time. So this is just a time picker. You just pick your time and it says what time you chose. You get to pick the time intervals and what your min and max times are. Super simple. But it's hard to create these things by hand. So let's comment that out. Let's look at pizza toppings. This one here is gonna be a picker. You're trying to order pizza. Here are your options and you just do a single selection or multiple selections and you go from there. Just simple pickers. Now, while we are doing this, let me show you a little bit of the code which is gonna be very similar to how we do these pickers but just to kind of take a look at one of them. For example, this one here is the date selector, the date picker that we just saw. The rat chat that we threw in our UI already knows how to handle a collection of items. To that collection, we're gonna throw in a date picker. Notice how we can give it a min date, max date, whatever and then we can add that collection inside of our items collection and that's how we do it. And once that date context changes, once the user does actually pick the date, we can remove that and say, hey, you picked that date. So the same exact concept for time. This is the pizza topping selector that I showed you. This one being, it's an item picker so it has an item source property. So data binding. So you can bind this to whatever you want from your Poco Business Object, from your models, whatever it is that you want to bind it to. You bind and you render and then you have either a single selection or multiple selections. Let's look at the next thing that's interesting. I'm gonna open up selecting conferences. So let's run this. This is where you get to do slightly more sophisticated UI and I'm still showing you a basic part of it but these are called cards. So essentially you are asking somebody to select something but you're giving them a richer experience. So what conference do you wanna go to? Right now we are in Redmond for VS Live Redmond. Robert was speaking just a while back but if you wanted to go look ahead, we do a conference in Sofia, Bulgaria. It's called Deverage or if you wanna go to Microsoft Ignite. So this is, it's a picker but it's a little more smarter. It's a little more richer experience. So these are called cards and you essentially select whatever you want. So if I select that you will say I selected VS Live. So this is working because we can pull off a few more advanced pickers. So let's look at selecting conferences right here. So when it comes to selecting a conference, I have a picker item and then I have a method that returns get conference cards, right? This conference cards method returns a list of cards. This card context is what we're building. So there are two types of cards you can return. One is a basic and one is an image card. This one is a basic card. So it has a title, it has a subtitle, it has a description and then it has actions and there can be multiple actions but essentially we are trying to select a conference and these all have support for commands. So you can do this in an MVVM way and not just have it hard coded in the code behind. But essentially this is the list of cards that I'm returning and once you do select a card, we can have a command here that says, oh, that's the card that you chose, index off and then I can say you selected that. So just a very basic card concept and this you can utilize in any how you want. You build it and you bind it to an item source essentially however you want. So that's just to look at the very basic side of the UI in a project that does not have any bot framework dependence whatsoever. It's just locally hard coded. So let's take things a little more advanced and let's look at another example. Yeah, because I mean at the moment that's not really a bot. No, no, it's just UI that we're coming around with. Okay, so this thing that I'm gonna show you in case anyone wants to go ahead and get the code, you can get this code for whichever platform that you're on. I'm a big fan of Xamarin these days so if I go into UI for Xamarin, that is our UI for Xamarin suite has lots and lots of polished UI that we build, 70 plus UI for Xamarin forms, Xamarin iOS, all of that. If you already have a subscription then you already have the code but if you don't you can hit this big download free trial button and that's gonna get you a trial download of all of the UI. And then I'm literally showing you that trials. If we go into downloads here, this is the trial folder that you get when you hit that button. We give you the binaries and we give you some examples and this is a project that we give you, it's called the quick solution. It kind of steps you through how to use our UI in a real world solution. So all of the code that I'm showing you, anyone can play with it. Just hit the trial button and you'll have the source code for this. It's also in GitHub. So let's open up this application which is a little more advanced and we're gonna run this again. This is once again a Xamarin forms solution. So while it's spinning up, let me close this. So you notice that this is just QSF and then there's an iOS part of it. There's also an Android, UDL, which I've taken out and everything that you see is really just coded up entirely in the .NET standard library. There is no platform specific dependencies whatsoever. And if you go into examples, we have examples for all of our controls like autocomplete, bar charts, busy indicators, data grids, list views, a whole bunch of things. What you wanna look into is this thing called conversational UI. That's the chat. So let's look at this. We have the iOS thing spin up here. Notice how this is a trial. So I'd say, hey, you're using a trial. So this is an app that you actually don't have to get all this source code and kind of build this yourself. And again, this is running locally? Yes, okay. But you don't have to do this. If you have an iOS or an Android or a UWP device, you can go to your respective store and search for Tilleric UI for Xamarin example. This is the app that we actually have put out in the store. So you don't need to install anything, just install the app and play with it so you get a feel of all the UI that we're throwing in before you actually start incorporating this in your app. So this has all of our controls, bar charts, autocompletes, barcodes, busy indicators, so you're not letting the user just wait in vain. Calendar controls, all of that is kind of nicely demoed here and you also get the source code as to how we do any of these things. So let's go back in here and what we wanna look at is this conversational UI. So we have a few scenarios. I like the travel assistance because it's fun. You can also do insurance and healthcare. So for each of these things, we actually have it hooked up to bots that are running in the cloud. So I think the health insurance is hooked up to Google dialogue flow. I like the travel assistance because if you can notice it's connected to Azure. Because this is running a Microsoft bot framework that's already hosted in Azure and it is actually using the form flow. So it is gonna ask you for a list of things as a rule to entice all the things that it needs to kind of make a reservation. Yeah, okay. How about that? So this is travel assistance. You and me are both tired. We need a vacation, right? That's important stuff. So time with friends, why not? That's a little busy indicator. So what you notice right out of the gate is we are not, we are trying to minimize how much the user types. This is part of your usability and your user experience. We wanna do click, click, click and done, right? So what app, time with friends, select a start date. That's the calendar that I just showed you. So now you see that the same exact calendar that I showed you in a very simple non-bot framework scenario can now be hooked up to bots because the bot framework behind the scenes is saying trigger the flow that entices the user to give me a date. So we see that and we throw in the calendar control. So you and me, we wanna leave as quickly as possible. Let's do this Friday. How many days? Five days. How many people? Two, just you and me. All right, so this is again a picker, right? So same pickers that we saw. Let's do Spain. All right, okay. Can't go wrong with any of those. Yeah. So now what it's doing is what we just saw in a just a little bit more richer experience. So these are called adaptive cards or Hilo cards. So same exact idea, we are returning a bunch of cards. Each card has title, subtitle, description and it has an image. Right. That's where you see the images. So you can kind of scroll through this. So you see how easy this is to kind of hook up and let's say we, let's go this one here, Barcelona. Would you like to do traveling measurements? When I say yes, again, more pickers, more things that can automate how the user inputs their side of the story in the bot framework. Let's do Lufthansa. Okay. And now it should almost be done. It's going to say, hey, this is what you're looking at. This is where you're going for a party of two. That's your total cost. This is your contact person for travel. And now you're done. Right. So we didn't even have to pay for it. Exactly. I love it. Yeah, yeah. This is going to be my best vacation ever. Exactly. We're leaving the day after tomorrow. So just a quick experience of how we're integrating with the bot framework, bot that's sitting in Azure. Yep. But what you're looking at is the client side aspects of it. So if you remember how we created a bot in Azure, and we didn't have to do anything, the bot. We could test the bot right away. It's the web chat that's kind of built in into Azure or bot framework. What we are looking at right now is something called DirectLine. So when you have a bot that's deployed to Azure, you can take the web chat, and you can embed that in your web application. But that's just the web side of the story. If you don't want that, but you still want all of the bot's features, then you use what's called DirectLine. And these are libraries that Microsoft makes. So there is DirectLine for .NET, and there is DirectLine.js for Node.js. So what this will do is essentially give you an abstraction over the restful endpoint. So you're not doing it over the web view, but you're still doing the exact same things that the bot does. You're essentially intercepting the messages as it goes out to the bot and comes back to the bot, and then you're throwing the UI on top of it. So that's what it is. So that's travel assistance. I mean, I would encourage everyone to kind of play around with these things. There's insurance, there's healthcare. This healthcare is very popular because it kind of automates getting an appointment with your doctor, which, as one can imagine, that's not a very difficult thing to do. If your calendar is correct, then you can choose an appointment. And many hospitals and healthcare institutions are starting to do this. And then again, as you're creating the bot itself, you can decide how much of it's kind of wizardy filling out a form versus how much you need to train it to be able to react to what you do here. So the demos that you just showed were kind of simple in the sense that they're linear. It's one flow, right? Right. Where are you going? When do you want to leave? Et cetera. It's pretty much the same questions over and over again, but the UI is obviously tremendously helpful and it is a bot living up in Azure, so it can be called from a number of things. And then you can decide that you might need it to be able to kind of go off script if you go off script. Right. And that depends on your bot. Right. How you train it. So when your bot calls into Louis, you train Louis to say, here are the different ways in which I can say, book me this reservation. Right. And if you have built any apps in cognitive services in Louis, it's very simple. It's an interface that says, and Alexa and Siri, they all do the same thing. So give us all of the ways in which the user can say this and they're going to break this down into intent and parameters. But if you're starting out with bots, it would be a good idea to build a more of a linear one to get the hang of it, to get the feel for it. And then you could, once you understand that, start exploring. Right. Back and forth. This travel one says, would you like to book a vacation? Yes. Where would you like to go? Here. Versus one that says, what can I do for you? Exactly. I need to get out of here. Open right there. At that point, I need to get out of here. What does that mean? Right. Does that mean I need to call an Uber to go home? Exactly. Does it mean I need to book a vacation? Exactly. What exactly does that mean? So, to your bot, those things that it can do are commands. Right. And how you, which command you invoke is dependent upon how well your bot is conversing in a natural way. But I think one of the key takeaways here is that it is a bot. The framework of being a bot is this conversational thing where you are having a conversation with the bot, whether it's linear or completely orthogonal. Exactly. And as geeks, you and me speak to developers. But as geeks, if we can avoid maybe talking to a human sometimes, we'll just do talk to a computer. Always. This is what bots are good for. Now, let me show you another thing. So all of the code is right here. I'm not going to waste time kind of going through it. But you can see that for this one here, we are clearly hooking this up to an Azure Bot Service. That's our key and we'll go from there. This is our XAML, which is going to be a little verbose. But at the end of it, we are using some custom template selectors. But all of this comes down to a RAD check, which is the basics of what we just saw. And then it has an items collection and so on. Now, if you want to do this same exact thing, or maybe a similar thing to this, let me show you another example maybe. Let's look at Kendo UI. So you see that we have the same insurance travel and let's do health care actually. So what you're seeing here is the same exact experience. Now it's just embedded in a web view. So let's do a book a checkup, again a picker. So there is a bit of a picker that's kind of built in the bot framework. Other frameworks actually don't have very good pickers. But I mean, traditionally what we have done is like when you look at Xamarin or ASP.NET, there might be controls that are built in. But we can kind of put it on steroids. We can give it much more of an API flair as to how developers want to style it, how they want to bind it, all of that. So this is a picker, but again, it's a little bit fancy. So let's say I want to go to a family physician and this one will come back with a list of cards, right? So hero cards. So I want to go see this doctor and choose a date. And again, you can store states. So this thing knows who you are and knows who your gastroenterologist is. Exactly. And do all of that. You could pick a new one or you could go to your previous one. It knows when you went. So you can absolutely play around with storing the state. Right. And the state is stored in what's called middleware for lots of bots. Because bot framework, by nature, it's a stateless, restful service. But it's got to go somewhere to find that state and that somewhere it could be Cosmos DB, could be SQL Server. Yeah, you can, from inside your bot code, you can call any data store. Exactly. So if you are coming from a heavy enterprise background, if you have services, web services that are the middleman between your client apps and your database, this is what it is. And you can hook up and you can go anywhere you want from there. So you can turn it into, basically, it becomes a semi-personal assistant where it knows who you are. And therefore, it knows about you. Right, right, yeah. And those are things that kind of help you differentiate your app, make it more personal, make it more useful. Because you and me are getting old. Maybe some of this is too fancy. But if you look at this objectively from an enterprise standpoint. Getting old, you're too kind. So there are little workflows that you can automate. And that's where the cost savings are. And enterprises are starting to realize this. Yep. Big airline companies, they have bots. When you go to their websites, that speaking agent thing, it's all about what can we do before we actually throw a human into the conversation. So if you are having issues with something basic that we know how to fix, maybe a human doesn't need to be involved. You could potentially build one that helps you fill out your expense report. We have an app. I go in, I can see all my outstanding charges. They're there. And then it walks me through a step. You could have a bot that does the same thing. Exactly. It's going to ask you what expenses you want to include in that report. And you go from there. Include your attachments, your images. And you go from there. So lots of different things you can think of in terms of applications. But you see that this is the same travel bot that we saw. Except now it's on the web. And it's exactly the same thing. So let's give it a date for some reason. It's not like the date picker here. So see the pickers. It's the exact same UI. And this is what we were shooting for to have that consistency all across. And this is going to give you all of those hero cards again. And you choose. And you're done. So I would encourage everyone to kind of look around and see what works for you. This one here is clearly connected to the bot framework. And it talks about the DirectLine.js. So essentially, this is from Microsoft. And if we look at the code, this is super simple HTML. This is jQuery, Kendo UI that we're looking at. This is what does the magic, DirectLine.js. We are actually including this so that we can have an interface as we talk between our client and the bot framework. So this is the interceptor that lets us go send messages and then bring messages back. And it's from Microsoft. And it works for Node.js and .NET. So what essentially we are doing is throwing in UI that is smart. Let me do the conversation UI. So again, that's the landing page. So what we have tried doing for the first time, we have a big portfolio of products across web, desktop, and mobile. And it's not often that we're able to do something consistently all across. This was an opportunity and we seized it. Because we can throw that consistent UI, a modern UI, for all types of chatbots and does not care what your bot framework is. It can be anything. We just want to give you the UI that we already have for different platforms. Now included as part of the chat conversation. That's awesome. I really enjoyed this two-part introduction to bots. I think you've done a good job of kind of demystifying it and landing that it is absolutely something that you can do regardless of the type of apps you're building. Because again, it's just a service. Yeah, and it's just an app. Out in Azure somewhere. Exactly. It doesn't need to be something nebulous. It's only meant for the HIP and the startups. It can very well serve your enterprise needs if you have a valid use case for it. OK, cool. So that's all I had for modern UI for chatbots. Once again, my name is Sam, and that's where you can find me. And it's been an honor. All right, thanks so much. It was fun to be here. All right, hope you enjoyed that. And we will see you next time on Visual Studio Toolbox.