Azure WebChat机器人：用户选‘None of the above’时对话日志实现求助

核心逻辑 #

要实现需求，需完成两个关键环节：一是让机器人返回包含None of the above的选项列表；二是监听用户的选项选择行为，当选中目标选项时，按指定格式收集对话数据并上报到分析工具。

完整代码示例 #

以下是适配微软Bot Framework Web Chat组件的纯JS嵌入方案，可直接放入任意HTML文件：

<!DOCTYPE html>
<html>
<head>
    <title>Embedded Chat Bot</title>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
        #webchat { height: 100vh; width: 100%; }
    </style>
</head>
<body>
    <div id="webchat"></div>
    <script>
        // 创建Web Chat存储实例，用于监听对话动作
        const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
            // 监听用户发送的查询，暂存到全局变量
            if (action.type === 'WEB_CHAT/SEND_MESSAGE') {
                window.userLastQuery = action.payload.text;
            }

            // 监听机器人返回的消息，提取选项列表
            if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
                const { activity } = action.payload;
                if (activity.type === 'message' && activity.suggestedActions) {
                    window.botLastOptions = activity.suggestedActions.actions.map(item => item.title);
                }
            }

            // 监听用户选择选项的动作，判断是否选中目标项并上报数据
            if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
                const { activity } = action.payload;
                if (activity.type === 'message' && activity.text === 'None of the above') {
                    const analyticsData = {
                        userQuery: window.userLastQuery,
                        botResponse: window.botLastOptions.join(', '),
                        selectedResponse: 'none of the above'
                    };
                    // 替换为你的分析工具上报逻辑，比如：
                    // gtag('event', 'chat_selection', analyticsData);
                    console.log('上报分析数据:', analyticsData);
                }
            }

            return next(action);
        });

        // 渲染Web Chat组件，替换为你的Direct Line Token
        window.WebChat.renderWebChat({
            directLine: window.WebChat.createDirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' }),
            store: store
        }, document.getElementById('webchat'));
    </script>
</body>
</html>

关键细节说明 #

• 数据暂存：通过监听WEB_CHAT/SEND_MESSAGE和DIRECT_LINE/INCOMING_ACTIVITY动作，分别保存用户查询内容和机器人选项列表到全局变量，为后续上报准备数据。
• 选项选择监听：在DIRECT_LINE/POST_ACTIVITY动作中，判断用户是否发送了None of the above文本（对应imBack类型的选项），若匹配则组装指定格式的数据并上报。
• 机器人端配置：确保机器人返回的消息包含suggestedActions字段，且最后一个选项为None of the above，示例机器人端代码（Node.js）：

// 机器人返回带选项的消息示例
await context.sendActivity({
    text: '请选择合适的选项:',
    suggestedActions: {
        actions: [
            { type: 'imBack', title: '选项A', value: '选项A' },
            { type: 'imBack', title: '选项B', value: '选项B' },
            { type: 'imBack', title: 'None of the above', value: 'None of the above' }
        ]
    }
});

排查要点 #

• 若无法捕获选项选择事件：确认机器人使用imBack类型的选项（该类型会将选项文本作为用户消息发送，便于Web Chat监听），若使用postBack需调整监听逻辑。
• 若数据暂存失败：检查动作类型是否匹配，WEB_CHAT/SEND_MESSAGE触发时机为用户发送消息时，DIRECT_LINE/INCOMING_ACTIVITY触发时机为机器人消息到达时。

内容的提问来源于stack exchange，提问作者Shubham Kashyap