node.js - 使用 NodeJS 的 QnAMaker 自适应卡片

Question

我一直在学习 NodeJS，并开始使用 Bot Framework v4 重建我的 Bot。

我使用 C# 在 v3 中启动并运行了一个 Bot，它成功地使用了一种方法，根据代码找到的分号计数，将 QnA 配对适应为英雄卡、视频卡或标准回复。

我正在努力使用字符串拆分方法在 NodeJS 中复制此功能，以确定应使用哪种自适应卡。

我已经附上了原始 C# 代码和我使用 NodeJS 的部分尝试。

夏普

protected override async Task RespondFromQnAMakerResultAsync(IDialogContext context, IMessageActivity message, QnAMakerResults result)
    {
        var answer = result.Answers.First().Answer;
        Activity reply = ((Activity)context.Activity).CreateReply();

        string[] qnaAnswerData = answer.Split(';');
        int dataSize = qnaAnswerData.Length;
        //image and video card
        if (dataSize > 1 && dataSize <= 6)
        {
            var attachment = GetSelectedCard(answer);
            reply.Attachments.Add(attachment);
            await context.PostAsync(reply);
        }
        else
        {
            // await context.Forward(new BasicQnAMakerDialog(), AfterAnswerAsync, message, CancellationToken.None);
            await context.PostAsync(answer);
        }
    }

    private static Attachment GetSelectedCard(string answer)
    {
        int len = answer.Split(';').Length;
        switch (len)
        {
            case 4: return GetHeroCard(answer);
            case 6: return GetVideoCard(answer);
            default: return GetHeroCard(answer);
        }
    }


    private static Attachment GetHeroCard(string answer)
    {
        string[] qnaAnswerData = answer.Split(';');
        string title = qnaAnswerData[0];
        string description = qnaAnswerData[1];
        string url = qnaAnswerData[2];
        string imageURL = qnaAnswerData[3];

        HeroCard card = null;

        {
            card = new HeroCard
            {
                Title = title,
                Subtitle = description,
            };

            card.Buttons = new List<CardAction>
        {
            new CardAction(ActionTypes.OpenUrl, "Learn More", value: url)
        };

            card.Images = new List<CardImage>
        {
            new CardImage( url = imageURL)
        };
        }
        return card.ToAttachment();
    }

    private static Attachment GetVideoCard(string answer)
    {
        string[] qnaAnswerData = answer.Split(';');
        string title = qnaAnswerData[0];
        string subtitle = qnaAnswerData[1];
        string description = qnaAnswerData[2];
        string thumbimageurl = qnaAnswerData[3];
        string mediaUrl = qnaAnswerData[4];
        string url = qnaAnswerData[5];

        VideoCard card = new VideoCard
        {
            Title = title,
            Subtitle = subtitle,
            Text = description,
        };
        card.Image = new ThumbnailUrl
        {
            Url = thumbimageurl
        };
        card.Media = new List<MediaUrl>
                {
                    new MediaUrl()
                    {
                        Url = mediaUrl
                    }
                };

        card.Buttons = new List<CardAction>
                {
                    new CardAction()
                    {
                        Title = "View Full Screen",
                        Type = ActionTypes.OpenUrl,
                        Value = url
                    }
                };
        return card.ToAttachment();

    }

部分 NodeJS

async onTurn(turnContext) {
    if (turnContext.activity.type === ActivityTypes.Message) {
        for (let i = 0; i < this.qnaServices.length; i++) {
            // Perform a call to the QnA Maker service to retrieve matching Question and Answer pairs.
            const qnaResults = await this.qnaServices[i].getAnswers(turnContext);
            const qnaCard = qnaResults.includes(';');

            // If an answer was received from QnA Maker, send the answer back to the user and exit.
            if (qnaCard.toString().split(';').length > 3) {
                await turnContext.sendActivity(qnaResults[0].answer);
                await turnContext.sendActivity({
                    text: 'Video Card',
                    attachments: [CardFactory.adaptiveCard(VideoCard)]
                }); 

            } else if (qnaCard.toString().split(';').length < 3) { 
                await turnContext.sendActivity(qnaResults[0].answer);
                await turnContext.sendActivity({
                        text: 'Hero Card',
                        attachments: [CardFactory.adaptiveCard(HeroCard)]
                });
                return;
            }
        }

标签： node.jsbotframeworkqnamakeradaptive-cards

Answer 1

v4 Node SDK 中的 CardFactory 具有针对每种卡片（HeroCards、VideoCards、AdaptiveCards 等）的渲染功能。您应该针对您尝试发送的卡类型使用相应的功能。您的代码应如下所示：

async onTurn(turnContext) {
    if (turnContext.activity.type === ActivityTypes.Message) {
        for (let i = 0; i < this.qnaServices.length; i++) {
            // Perform a call to the QnA Maker service to retrieve matching Question and Answer pairs.
            const qnaResults = await this.qnaServices[i].getAnswers(turnContext);
            const qnaCard = qnaResults.includes(';');

            // If an answer was received from QnA Maker, send the answer back to the user and exit.
            if (qnaCard.toString().split(';').length > 3) {
                await turnContext.sendActivity(qnaResults[0].answer);
                await turnContext.sendActivity({
                    text: 'Video Card',
                    attachments: [CardFactory.videoCard(VideoCard)]
                }); 

            } else if (qnaCard.toString().split(';').length < 3) { 
                await turnContext.sendActivity(qnaResults[0].answer);
                await turnContext.sendActivity({
                        text: 'Hero Card',
                        attachments: [CardFactory.heroCard(HeroCard)]
                });
                return;
            }
        }
    }
}

查看Using Cards和Using Adaptive Cards以获取有关如何在 v4 BotFramework Node SDK 中发送卡片的更多示例。

希望这可以帮助！