c# - 如何从 botframework v3 c# 发送事件并使用 Direct Line 在客户端 JavaScript 监听？

Question

如何仅在 MessagesController 或任何对话框触发某些事件时在 wc-shellinput 中使用 disabled 来禁用用户输入，并在用户完成所需的操作时启用它。如果我想在与聊天机器人对话期间浏览 Web 应用程序怎么办？这种类型的事件处理如何可能？

标签： c#botframeworkdirect-line-botframework

Answer 1

根据此 WebChat 示例，您可以按照以下方式运行它：

将自定义 ChannelData 添加到您的传出活动（在机器人代码中）

有关更多信息，请参阅此示例。

var message = context.MakeMessage();

禁用输入

message.ChannelData = new { chatBox = "disable" }

启用输入

message.ChannelData = new { chatBox = "enable" }

发送消息

await context.PostAsync(message);

channelData.chatBox为（在 index.html 脚本标签中）创建事件

const store = window.WebChat.createStore(
    {},
    ({ dispatch }) => next => action => {
    if (action && action.payload && action.payload.activity && action.payload.activity.channelData && action.payload.activity.channelData.chatBox) {
        const event = new Event(`chatBox`);
        event.data = action.payload.activity.channelData.chatBox;
        window.dispatchEvent(event);
    }

    return next(action);
    }
);

监听事件并启用/禁用聊天框（在 index.html 脚本标签中）

window.addEventListener('chatBox', ({ data }) => {
    const chatBox = document.querySelector(`[data-id="webchat-sendbox-input"]`);
    switch(data){
        case 'enable':
            chatBox.disabled = false;
            break;
        case 'disable':
            chatBox.disabled = true;
            break;
    }
});

启用：

禁用：

只要确保您确保在禁用后根据需要重新启用它！

使用 BotChat

这几乎是一回事。您报告说 BotChat 没有检测到所有消息，所以我改用了事件。

创建/发送事件

var disable = new Activity()
{
    Type = ActivityTypes.Event,
    Value = new { chatBox = "disable" }
};
var enable = new Activity()
{
    Type = ActivityTypes.Event,
    Value = new { chatBox = "enable" }
};
await turnContext.SendActivityAsync(disable);

在 BotChat 中监听事件

botConnection.activity$
    .subscribe(function (activity) {
        if (activity.type === 'event' && activity.value.chatBox) {
            controlInput(activity.value.chatBox);
        }
    });

    function controlInput(action) {
    const chatBox = document.querySelector(`[class="wc-shellinput"]`);
    switch(action) {
        case 'enable':
            chatBox.disabled = false;
            break;
        case 'disable':
            chatBox.disabled = true;
            break;
    }
}

注意：如果您使用的是标准 BotChat css，则输入颜色不会改变。您需要自己添加 css。类似于以下内容：

input:disabled {
          background-color: black !important;
      }