azure - 我们可以动态添加文本字段吗

Question

我在我的聊天机器人中创建了一个自适应卡(使用 json)来接收用户的输入。我想添加一个按钮，使用户每次单击插入字段时都可以添加新的文本字段。 (即，用户可以单击插入按钮输入教育详细信息(学校、学院等))

这可以在自适应卡中实现吗？

我也想知道，自适应卡片可以用其他语言设计吗(不包括json)

Answer 1

最简单的方法是使用 Action.ShowCard:

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "Input.Text",
      "placeholder": "Placeholder 1",
      "id": "text1"
    }
  ],
  "actions": [
    {
      "type": "Action.ShowCard",
      "title": "Add field",
      "card": {
        "type": "AdaptiveCard",
        "body": [
          {
            "type": "Input.Text",
            "placeholder": "Placeholder 2",
            "id": "text2"
          }
        ],
        "actions": [
          {
            "type": "Action.ShowCard",
            "title": "Add field",
            "card": {
              "type": "AdaptiveCard",
              "body": [
                {
                  "type": "Input.Text",
                  "placeholder": "Placeholder 3",
                  "id": "text3"
                }
              ],
              "actions": [
                {
                  "type": "Action.ShowCard",
                  "title": "Add field",
                  "card": {
                    "type": "AdaptiveCard",
                    "body": [
                      {
                        "type": "Input.Text",
                        "placeholder": "Placeholder 4",
                        "id": "text4"
                      }
                    ],
                    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
                  }
                }
              ],
              "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
            }
          }
        ],
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
      }
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0"
}

您可能不喜欢它的外观，但还有另一种选择。 Microsoft Teams 允许您更新消息，因此您可以使用更多输入字段更新卡片以响应提交操作。首先，您需要一种保存卡状态的方法，以便可以更新卡的事件。在 C# 中，您可以像这样声明状态属性访问器:

public IStatePropertyAccessor<Dictionary<string, (string ActivityId, int InputCount)>> InputCardStateAccessor { get; internal set; }

然后你可以像这样实例化它:

InputCardStateAccessor = _conversationState.CreateProperty<Dictionary<string, (string, int)>>("cardState");

在 Node.js 中，您不需要声明任何内容，但可以像这样实例化它:

this.inputCardState = this.conversationState.createProperty('cardState');

您需要采用一致的方式来生成卡片，以便在最初发送卡片和更新卡片时使用。我在 C# 中使用 AdaptiveCards NuGet 包:

public static IActivity GenerateAdaptiveCardActivityWithInputs(int inputCount, object valueObject)
{
    var cardData = JObject.FromObject(valueObject);
    var cardId = Convert.ToString(cardData[KEYCARDID]);

    var card = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0))
    {
        Body = Enumerable.Range(0, inputCount).Select(i =>
        {
            var inputId = $"text{i}";

            return new AdaptiveTextInput
            {
                Id = inputId,
                Value = Convert.ToString(cardData[inputId]),
            };
        }).ToList<AdaptiveElement>(),
        Actions = new List<AdaptiveAction>
        {
            new AdaptiveSubmitAction
            {
                Title = "Add field",
                Data = new Dictionary<string, string>
                {
                    { KEYCARDID, cardId },
                    { KEYSUBMITACTIONID, ACTIONSUBMITADDFIELD },
                },
            },
            new AdaptiveSubmitAction
            {
                Title = "Submit",
            },
        },
    };

    return MessageFactory.Attachment(new Attachment(AdaptiveCard.ContentType, content: JObject.FromObject(card)));
}

Node.js:

generateAdaptiveCardActivityWithInputs(inputCount, cardData) {
    var cardId = cardData[KEYCARDID];
    var body = [];

    for (let i = 0; i < inputCount; i++) {
        var inputId = `text${i}`;
        body.push({
            type: "Input.Text",
            id: inputId,
            value: cardData[inputId]
        });
    }

    var card = {
        type: "AdaptiveCard",
        $schema: "http://adaptivecards.io/schemas/adaptive-card.json",
        version: "1.0",
        body,
        actions: [
            {
                type: "Action.Submit",
                title: "Add field",
                data: {
                    [KEYCARDID]: cardId,
                    [KEYSUBMITACTIONID]: ACTIONSUBMITADDFIELD
                },
            },
            {
                type: "Action.Submit",
                title: "Submit",
            }
        ]
    };

    return MessageFactory.attachment(CardFactory.adaptiveCard(card));
}

使用此函数，您可以在 C# 中像这样最初发送卡片:

var inputCount = 1;
var cardId = Guid.NewGuid().ToString();
var reply = GenerateAdaptiveCardActivityWithInputs(inputCount, new Dictionary<string, string> { { KEYCARDID, cardId } });
var response = await turnContext.SendActivityAsync(reply, cancellationToken);
var dict = await InputCardStateAccessor.GetAsync(turnContext, () => new Dictionary<string, (string, int)>(), cancellationToken);

dict[cardId] = (response.Id, inputCount);

Node.js:

var inputCount = 1;
var cardId = Date.now().toString();
var reply = this.generateAdaptiveCardActivityWithInputs(inputCount, { [KEYCARDID]: cardId });
var response = await turnContext.sendActivity(reply);
var dict = await this.inputCardState.get(turnContext, {});
dict[cardId] = {
    activityId: response.id,
    inputCount: inputCount
};
await this.inputCardState.set(turnContext, dict);

您可以更新卡以响应卡的“添加字段”提交操作，如下 C# 中所示:

private async Task AddFieldAsync(ITurnContext turnContext, CancellationToken cancellationToken)
{
    var activity = turnContext.Activity;

    if (activity.ChannelId == Channels.Msteams)
    {
        var value = JObject.FromObject(activity.Value);
        var cardId = Convert.ToString(value[KEYCARDID]);
        var dict = await InputCardStateAccessor.GetAsync(turnContext, () => new Dictionary<string, (string, int)>(), cancellationToken);

        if (dict.TryGetValue(cardId, out var cardInfo))
        {
            var update = GenerateAdaptiveCardActivityWithInputs(++cardInfo.InputCount, value);

            update.Id = cardInfo.ActivityId;
            update.Conversation = activity.Conversation;

            await turnContext.UpdateActivityAsync(update, cancellationToken);

            dict[cardId] = cardInfo;
        }
    }
}

Node.js:

async addField(turnContext) {
    var activity = turnContext.activity;

    if (activity.channelId == 'msteams') {
        var value = activity.value;
        var cardId = value[KEYCARDID];
        var dict = await this.inputCardState.get(turnContext, {});
        var cardInfo = dict[cardId];

        if (cardInfo) {
            var update = this.generateAdaptiveCardActivityWithInputs(++cardInfo.inputCount, value);

            update.id = cardInfo.activityId;
            update.conversation = activity.conversation;
            update.serviceUrl = activity.serviceUrl;

            dict[cardId] = cardInfo;

            await this.inputCardState.set(turnContext, dict);
            await turnContext.updateActivity(update);
        }
    }
}