如何在Azure AI studio中的聊天机器人中添加视觉提示

Question

如何在 Azure AI studio 的聊天机器人中添加视觉提示，我们在 Azure QnA 机器人中有它。

<img src="https://i.sstatic.net/WBpuFAwX.png" /> 

Answer 1

要在 Azure AI Studio 聊天机器人中包含视觉提示（例如按钮），您可以使用 自适应卡。自适应卡提供了一种灵活的方式来在机器人的响应中呈现交互式 UI 元素，例如按钮。

创建自适应卡单击此链接自适应卡设计器。

• 使用按钮或其他 UI 元素设计卡片。

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "text": "What kind of issue are you experiencing with your computer?",
            "wrap": true,
            "weight": "Bolder",
            "size": "Large"
        },
        {
            "type": "Image",
            "url": "https://images.app.goo.gl/5q2Rxb29VF1baDGs9",
            "altText": "Computer Issue",
            "horizontalAlignment": "Center",
            "size": "Medium",
            "spacing": "Small"
        },
        {
            "type": "Input.Toggle",
            "title": "Is this issue urgent?",
            "value": "false",
            "id": "urgentIssue"
        },
        {
            "type": "Input.ChoiceSet",
            "id": "issueType",
            "style": "expanded",
            "label": "Choose the type of issue:",
            "choices": [
                {
                    "title": "Hardware Issue",
                    "value": "hardware"
                },
                {
                    "title": "Software Issue",
                    "value": "software"
                },
                {
                    "title": "Other",
                    "value": "other"
                }
            ]
        },
        {
            "type": "Input.Text",
            "id": "issueDescription",
            "placeholder": "Briefly describe your issue",
            "isMultiline": true,
            "label": "Issue Description"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit",
            "data": {
                "action": "submitIssue"
            }
        },
        {
            "type": "Action.OpenUrl",
            "title": "Get Support",
            "url": "https://example.com/support"
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.3"
}

获得自适应卡的 JSON 后，将其集成到 Azure AI Studio 中机器人的响应中。

在 Azure AI Studio 或支持的渠道（如 Teams 或 Web Chat）中测试机器人，以检查视觉提示是否正确显示。