Microsoft BOT Framework 是否允许开发交互式 UI？

Question

我需要使用 Microsoft Bot Framework 为 Cortana Channel 实现一些交互式 UI，但我还没有找到实现它的任何方法。我想在按钮上应用样式，重要的是在 Cortana 上使用图形和图表（如 Web 仪表板）。

Answer 1

I want to apply styles on buttons and importantly use graphs & charts (like web dashboard) on Cortana.

bot 是一种在服务器端工作的网络应用程序服务，BotFramework 提供了 bot 和本机应用程序（如 Skype 和此处的 Cortana）之间的连接通道。 UI 部分在每个本机应用程序中呈现，我找不到自定义 Cortana 应用程序样式的方法。然而，AdaptiveCards provides several simple properties for styling, for more information, you can refer to the official sample: cards-AdaptiveCards。

对于交互式图表的问题，AFAIK，目前不支持。我们现在可以做的是将图表渲染为图像并在 HeroCard 或 AdaptiveCard 中显示此图像，但此解决方法会使图表失去交互性。可以参考我在帖子How to create Charts using c# Bot Framework?

中的最后一个回答

Answer 2

的确，你可以使用Hero card, adaptive cards, thumbnail cards, receipt cards etc。

下面是示例供您参考。

public 任务 StartAsync（IDialogContext 上下文） { context.Wait(MessageReceivedAsync);

        return Task.CompletedTask;
    }
    public virtual async Task MessageReceivedAsync(IDialogContext context, IAwaitable<IMessageActivity> result)
    {
        var reply = context.MakeMessage();

        reply.AttachmentLayout = AttachmentLayoutTypes.Carousel;
        reply.Attachments = GetCardsAttachments();

        await context.PostAsync(reply);

        context.Wait(this.MessageReceivedAsync);
    }

    private static IList<Attachment> GetCardsAttachments()
    {
        return new List<Attachment>()
        {
            GetHeroCard(
                "Add a webpage",
                "",
                "",
                new CardImage(url: "https://cdn.dribbble.com/users/22691/screenshots/1958250/attachments/340010/Button_800x600.gif?sz=328"),
                new CardAction(ActionTypes.ImBack, "Add a webpage", value: "Add a webpage")),
            GetHeroCard(
                "delete a webpage",
                "",
                "",
                new CardImage(url: "https://cdn.dribbble.com/users/22691/screenshots/1958250/attachments/340010/Button_800x600.gif?sz=328"),
                new CardAction(ActionTypes.ImBack, "delete a webpage", value: "delete a webpage")),
            GetHeroCard(
                "Display help",
                "",
                "",
                new CardImage(url: "https://cdn.dribbble.com/users/22691/screenshots/1958250/attachments/340010/Button_800x600.gif?sz=328"),
                new CardAction(ActionTypes.ImBack, "Display help", value: "Display help")),
            GetHeroCard(
                "etc",
                "",
                "",
                new CardImage(url: "https://cdn.dribbble.com/users/22691/screenshots/1958250/attachments/340010/Button_800x600.gif?sz=328"),
                new CardAction(ActionTypes.ImBack, "etc", value: "etc")),

        };
    }

    private static Attachment GetHeroCard(string title, string subtitle, string text, CardImage cardImage, CardAction cardAction)
    {
        var heroCard = new HeroCard
        {
            Title = title,
            Subtitle = subtitle,
            Text = text,
            Images = new List<CardImage>() { cardImage },
            Buttons = new List<CardAction>() { cardAction },
        };

        return heroCard.ToAttachment();
    }

截图供您参考

Answer 3

您可以根据 this guideline 自定义 Web 聊天本身。就图表和图形而言，自适应卡片将是您最好的选择，但如上所述，目前不支持它。

Microsoft BOT Framework 是否允许开发交互式 UI？

Does Microsoft BOT Framework allows to develop interactive UIs?

c#

cortana

botframework