Microsoft Bot Framework(V4):如何将英雄卡列表作为及时选择

Question

我正在尝试以选项为单位的英雄卡列表创建一个提示对话框。

我已经创建了一个函数，该功能将返回HEROCARD列表并将其用作对话框提示。

我该如何实现？或者有更好的方法来实施它。注意：我需要将其放入对话框提示符中，因为我需要实现顺序对话。我还将Herocard列表放在单独的功能中，因为我将在其他对话框提示中使用它。

async selectProduct(stepContext){
    return await stepContext.prompt(CHOICE_PROMPT, {
        prompt: 'Select Product:',
        choices: this.productChoices()
    });
}

productChoices(){        
    const productSeriesOptions = [
        CardFactory.heroCard(
        'Title 1',
        CardFactory.images(['image URL 1']),
        CardFactory.actions([
            {
                type: ActionTypes.ImBack,
                title: 'Title 1',
                value: 'Value 1'
            }
        ])
        ),
        CardFactory.heroCard(
        'Title 2',
        CardFactory.images(['image URL 2']),
        CardFactory.actions([
            {
                type: ActionTypes.ImBack,
                title: 'Title 2',
                value: 'Value 2'
            }
        ])
        )
    ];
    return productSeriesOptions;
}   

Answer 1

我包括了一个示例对话框，该对话框演示了向用户展示Herocards的轮毂(下(。HEROCARD有一个单个按钮，当单击时会导致下一个瀑布步骤正在运行。

我最初从"使用卡"样本中摘取此对话框。因此，如果您想进行运行，则可以替换该项目中的Maindialog.js并在模拟器中运行。

// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
const { ActionTypes, AttachmentLayoutTypes, CardFactory } = require('botbuilder');
const { ChoicePrompt, ComponentDialog, DialogSet, DialogTurnStatus, WaterfallDialog, ChoiceFactory } = require('botbuilder-dialogs');
const MAIN_WATERFALL_DIALOG = 'mainWaterfallDialog';
class MainDialog extends ComponentDialog {
    constructor() {
        super('MainDialog');
        // Define the main dialog and its related components.
        this.addDialog(new WaterfallDialog(MAIN_WATERFALL_DIALOG, [
            this.showProductChoicesStep.bind(this),
            this.showCardSelectionStep.bind(this)
        ]));
        // The initial child Dialog to run.
        this.initialDialogId = MAIN_WATERFALL_DIALOG;
    }
    /**
     * The run method handles the incoming activity (in the form of a TurnContext) and passes it through the dialog system.
     * If no dialog is active, it will start the default dialog.
     * @param {*} turnContext
     * @param {*} accessor
     */
    async run(turnContext, accessor) {
        const dialogSet = new DialogSet(accessor);
        dialogSet.add(this);
        const dialogContext = await dialogSet.createContext(turnContext);
        const results = await dialogContext.continueDialog();
        if (results.status === DialogTurnStatus.empty) {
            await dialogContext.beginDialog(this.id);
        }
    }
    /**
     * Send a carousel of HeroCards for the user to pick from.
     * @param {WaterfallStepContext} stepContext
     */
    async showProductChoicesStep(stepContext) {
        console.log('MainDialog.showProductChoicesStep');
        await stepContext.context.sendActivity({
            attachments: this.productChoices(),
            attachmentLayout: AttachmentLayoutTypes.Carousel
        });
        return { status: DialogTurnStatus.waiting };
    }
    async showCardSelectionStep(stepContext) {
        console.log('MainDialog.showCardSelectionStep');
        await stepContext.context.sendActivity('You picked ' + stepContext.context.activity.value);
        // Give the user instructions about what to do next
        await stepContext.context.sendActivity('Type anything to see another card.');
        return await stepContext.endDialog();
    }
    // ======================================
    // Helper functions used to create cards.
    // ======================================
    productChoices(){
        const productSeriesOptions = [
            CardFactory.heroCard(
            'Product 1',
            CardFactory.images(['https://sec.ch9.ms/ch9/7ff5/e07cfef0-aa3b-40bb-9baa-7c9ef8ff7ff5/buildreactionbotframework_960.jpg']),
            CardFactory.actions([
                {
                    type: 'messageBack',
                    title: 'Pick Me',
                    value: 'product1'
                }
            ])
            ),
            CardFactory.heroCard(
            'Product 2',
            CardFactory.images(['https://sec.ch9.ms/ch9/7ff5/e07cfef0-aa3b-40bb-9baa-7c9ef8ff7ff5/buildreactionbotframework_960.jpg']),
            CardFactory.actions([
                {
                    type: 'messageBack',
                    title: 'Pick Me',
                    value: 'product2'
                }
            ])
            ),
            CardFactory.heroCard(
                'Product 3',
                CardFactory.images(['https://sec.ch9.ms/ch9/7ff5/e07cfef0-aa3b-40bb-9baa-7c9ef8ff7ff5/buildreactionbotframework_960.jpg']),
                CardFactory.actions([
                    {
                        type: 'messageBack',
                        title: 'Pick Me',
                        value: 'product3'
                    }
                ])
                ),
            CardFactory.heroCard(
                'Product 4',
                CardFactory.images(['https://sec.ch9.ms/ch9/7ff5/e07cfef0-aa3b-40bb-9baa-7c9ef8ff7ff5/buildreactionbotframework_960.jpg']),
                CardFactory.actions([
                    {
                        type: 'messageBack',
                        title: 'Pick Me',
                        value: 'product4'
                    }
                ])
            )
        ];
        return productSeriesOptions;
    }
}
module.exports.MainDialog = MainDialog;