微软机器人框架v4在网站中嵌入最小化窗口，使用javascript。

Question

我使用Microsoft Bot Framework v4开发了一个机器人，它的工作原理与预期一样。现在，我想把这个机器人嵌入到一个网站，作为可折叠的minimizable窗口，使用JavaScript，而不是react.I已经来了这个代码片段。

<script>
    (function () {
    var div = document.createElement("div");
    document.getElementsByTagName('body')[0].appendChild(div);
    div.outerHTML = "<div id='botDiv' style='height: 38px; position: fixed; bottom: 0; z-index: 1000; background-color: #fff'><div id='botTitleBar' style='height: 38px; width: 400px; position:fixed; cursor: pointer;'>Bot</div><iframe width='400px' height='600px' src='https://webchat.botframework.com/embed/demoqnaptpl-bot?s=<secret-code>'></iframe></div>"; 

    document.querySelector('body').addEventListener('click', function (e) {
        e.target.matches = e.target.matches || e.target.msMatchesSelector;
        if (e.target.matches('#botTitleBar')) { 
            var botDiv = document.querySelector('#botDiv'); 
            botDiv.style.height = botDiv.style.height == '600px' ? '38px' : '600px';
        };
    });
}());

这个嵌入的机器人作为一个可折叠的窗口，但。点击标题栏时没有显示欢迎提示。.这是第一个问题.第二个我想实现的是 这个 如果使用React是强制性的，那么我如何在我现有的ASP.Net MVC App中实现这个功能？

Answer 1

你的实现没有什么问题。问题是，网络聊天的iframe版本不能通过点击来发起对话。托管页面没有可以插入的钩子来表明发生了活动，而Web Chat应该对此采取行动。

iframe Web Chat 只需连接到您的机器人并相应地运行任何欢迎消息。当页面加载后，机器人连接到单一的 conversationUpdate 活动类型被生成，其中包括一个 "成员添加 "属性。由于它源于iframe Web Chat，所以它的 ChannelId 将被设置为 'webchat'.

这可以在你的机器人的活动处理程序中执行，可以是在 OnConversationUpdateActivityAsync 或 OnMembersAddedAsync. 当一个 conversationUpdate 您可以在收到活动时过滤通道ID 'webchat' 和你的机器人名字上的名字，向客户端发送一条消息。当用户点击最大化嵌入窗口时，该消息将已经被加载。

protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)
{
    if (turnContext.Activity.ChannelId == 'webchat' && turnContext.Activity.From?.Name == '<<YOUR BOT'S NAME')
    {
        // Echo back what the user said
        await turnContext.SendActivityAsync(MessageFactory.Text($"Welcome to my bot!"), cancellationToken);
    }
}

需要注意的是，iframe Web Chat旨在作为一个简单的机器人托管解决方案，并不打算进行深度定制。如果你需要进行大量的更改，我强烈建议你考虑一下。BotFramework-WebChat 是专门为此设计的。它提供了React和非React两种版本的工作方式。

希望对大家有所帮助!