如何在 Microsoft bot 框架中设置“建议操作”的样式？答案

【问题标题】：How to style "suggested actions" in Microsoft bot framework?如何在 Microsoft bot 框架中设置“建议操作”的样式？
【发布时间】：2019-08-10 10:48:50
【问题描述】：

我正在使用 bot 框架 v4 SDK 进行网络聊天。我已经为选择提示使用了建议的操作。默认情况下，建议的操作是水平对齐的。有没有办法让它垂直？

我已经尝试过选择提示的样式选项，例如英雄卡和列表。但是在这两种情况下，选择都将保留在聊天窗口中并且不会消失。所以我唯一的选择是使用建议的操作。我找不到让建议的操作垂直显示的方法。

 PromptOptions choicePromptOptions = new PromptOptions
        {
            Choices = choices,
            Prompt = MessageFactory.Text("Please choose :"),
            RetryPrompt = null,
            Style = ListStyle.SuggestedAction
         };

除了建议的操作之外，还有其他方法可以使选择消失吗？

【问题讨论】：

标签： c# css botframework web-chat

【解决方案1】：

很遗憾，建议的操作无法做到这一点。根据设计，建议的操作旨在消耗尽可能少的房地产，因为它们是临时存在的。因此，水平显示。

如果您想要水平显示，那么我建议您使用hero card。但是，它仍然是网络聊天记录的一部分，并且不会在发生选择或其他活动时消失。

这是从参考文档中借用的示例代码：

private static async Task DisplayOptionsAsync(ITurnContext turnContext, CancellationToken cancellationToken)
{
    var card = new HeroCard
    {
        Text = "You can upload an image or select one of the following choices",
        Buttons = new List<CardAction>
        {
            new CardAction(ActionTypes.ImBack, title: "1. Green", value: "1"),
            new CardAction(ActionTypes.ImBack, title: "2. Blue", value: "2"),
            new CardAction(ActionTypes.ImBack, title: "3. Red", value: "3"),
        },
    };

    var reply = MessageFactory.Attachment(card.ToAttachment());
    await turnContext.SendActivityAsync(reply, cancellationToken);
}

【讨论】：

【解决方案2】：

在最新版本的机器人框架中，只需应用以下设置

suggestedActionLayout: 'carousel', // either 'carousel' or 'stacked'

查看https://github.com/Microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleOptions.js了解更多详情

【讨论】：

感谢您的回答，约书亚。据我所知，虽然您的答案使用了 BotFramework-WebChat，但问题使用了机器人框架 v4 SDK。你确定，你的答案解决了问题？
也对如何使用它感兴趣？是后端还是前端的选项？链接是 404