Microsoft bot framework v4 встроить в веб-сайт как минимизируемое окно с javascript

Question

Я разработал бота с помощью Microsoft Bot Framework v4. Работает как задумано. Теперь я хочу встроить этого бота в веб-сайт как сворачиваемое / минимизируемое окно, используя JavaScript not response. Я пришел с этим фрагментом кода

<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';
        };
    });
}());

Этот встраиваемый бот как сворачиваемое окно, но не отображал приветственное приглашение при нажатии на TitleBar . Это первая проблема. Во-вторых, я хочу реализовать эту функциональность без использования React, только с JavaScript. Если использование React обязательно, то как я могу реализовать это в моем существующем ASP. Net MVC приложении?

Answer 1

В вашей реализации нет ничего плохого. Проблема в том, что версия веб-чата с iframe не может инициировать диалог одним щелчком мыши. Нет никаких хуков, с помощью которых страница хостинга могла бы подключиться, чтобы указать, что произошло действие, и что веб-чат должен затем действовать в соответствии с этим.

iframe Web Chat просто подключается к вашему боту и соответственно запускает любые приветственные сообщения. Когда страница загружается и бот подключается, создается один тип активности conversationUpdate, который включает свойство membersAdded. Поскольку он исходит из веб-чата iframe, для ChannelId будет установлено значение 'webchat'.

Это можно сделать в обработчике активности вашего бота в OnConversationUpdateActivityAsync или OnMembersAddedAsync. Когда получено действие conversationUpdate, вы фильтруете идентификатор канала на '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 предназначен как простое решение для размещения бота и не предназначен для глубокой настройки . Если вам нужно внести множество изменений, я настоятельно рекомендую вам рассмотреть BotFramework-WebChat , который разработан специально для этого. Он предлагает как версию React, так и версию без React.

Надеюсь на помощь!