как отправить сообщение в чат прямой линии с помощью интерфейса пользователя JavaScript - PullRequest
0 голосов
/ 28 января 2020

Я разрабатываю чат-бота (v4, используя MS Azure каркас бота и QnAmaker),

Я добавил функцию, то есть, пока пользователи начинают вводить вопросы, бот будет Получите подсказку и покажите соответствующие вопросы из QnAmaker, и пользователь сможет выбрать один из них, после чего этот конкретный вопрос будет отправлен боту.

Ниже приведен полный код, который я использую,

<html>
<body>
    <div id="webchat" role="main"></div>
    <script>
        (async function () {

            const styleOptions = {
                hideUploadButton: true,
                bubbleBackground: '#D8F4FF',
                bubbleFromUserBackground: '#E8E8E8',
                botAvatarImage: '../botavatar.PNG',
                botAvatarInitials: 'bot',
                userAvatarInitials: initial,
                userAvatarImage: userimg,
                rootHeight: '100%',
                rootWidth: '50%'

            };

            const styleSet = window.WebChat.createStyleSet({
                bubbleBackground: 'rgba(0, 0, 255, .1)',
                bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
            });

            styleSet.textContent = {
                fontFamily: "'Comic Sans MS', 'Arial', sans-serif",
                fontWeight: 'bold'
            };
            const secret = secret;
            const res = await fetch('https://directline.botframework.com/v3/directline/tokens/generate',
                {
                    headers: {
                        Authorization: `Bearer ${secret}`,
                    },
                    method: 'POST'
                });
            const { token } = await res.json();

            const store = window.WebChat.createStore(
                {},
                ({ dispatch }) => next => action => {
                    if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                        dispatch({
                            type: 'WEB_CHAT/SEND_EVENT',
                            payload: {
                                name: 'webchat/join',
                            }
                        });
                    }
                    return next(action);
                }
            );

            window.WebChat.renderWebChat({
                directLine: window.WebChat.createDirectLine({ token }),
                store,
                styleOptions,
                userID: emailid,
                username: fullname,
                locale: 'en-US',
                userAvatarInitials: initial
            }, document.getElementById('webchat'));
            document.querySelector('#webchat > *').focus();
            document.querySelectorAll('[aria-label="Sendbox"]')[0].placeholder = "Type your question and press enter";

            $("[aria-label='Sendbox']").keypress(function () {

                if ($("[aria-label='Sendbox']")[0].defaultValue.length > 4) {

                    getquestion(this.value);
                } else {
                    $('#ques').remove();
                }

            });
            $('div.probing').click(function () { alert(this.innerText); });

            $('div.probing').click(function () {
                document.querySelectorAll('[aria-label="Sendbox"]')[0].value = (this.innerText);
                document.querySelectorAll('[aria-label="Sendbox"]')[0].defaultValue = (this.innerText);
                $('.css-115fwte').trigger('click');
                $('#ques').remove();
            });

        })().catch(err => console.error(err));


        function getquestion(value) {
            var token = secret;
            var questionquery =
            {
                question: value,
                top: 2,
                scoreThreshold: 50,
                "strictFilters": [
                    {
                        "name": "message",
                        "value": "text"
                    }],
            }
            $.ajax({
                type: "POST",
                url: "https://endpoint/qnamaker/knowledgebases/KBID/generateAnswer",

                data: JSON.stringify(questionquery),
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Authorization', secret);
                },
                dataType: "json",
                contentType: "application/json",
                success: function (data) {    
                    var questions = "";
                    $('#ques').remove();

                    for (var i = 0; i < 4; i++) {
                        if (data.answers[0].questions[i] != null && data.answers[0].questions[i] != 'undefined')
                            questions = questions + "<div class='probing'>" + data.answers[0].questions[i] + "</div>";
                    }
                    $('.content').last().append("<div id='ques'>" + questions + "</div>");
                    $('div.probing').click(function () {
                        document.querySelectorAll('[aria-label="Sendbox"]')[0].value = (this.innerText);
                        document.querySelectorAll('[aria-label="Sendbox"]')[0].defaultValue = (this.innerText);
                        $('.css-115fwte').trigger('click');
                        $('#ques').remove();
                    });
                },
                error: function (data) {
                    alert(data.responseText);
                }
            });
        }

    </script>
</body>
</html>

Пожалуйста, проверьте изображение моего бота ниже с предложенными вопросами, это будет выглядеть так, эти вопросы присоединиться к последнему ответу, данному ботом , после выбора вопроса этот div будет удален. По следующему вопросу этот цикл продолжится снова.

enter image description here

Проблема, с которой я сталкиваюсь, находится здесь , со следующим кодом значение вводится в поле ввода, однако бот не получил ни одного вопроса, и, следовательно, он не смог ответить.

$('div.probing').click(function () {
                        document.querySelectorAll('[aria-label="Sendbox"]')[0].value = (this.innerText);
                        document.querySelectorAll('[aria-label="Sendbox"]')[0].defaultValue = (this.innerText);
                        $('.css-115fwte').trigger('click');
                        $('#ques').remove();
                    });

С этим кодом значение вводится в поле ввода, однако бот не получает никаких вопросов, и, следовательно, не удалось ответить.

так будет в консоли после добавления вопроса по сценарию. enter image description here Обратите внимание, что я использовал все необходимые ссылки JS и CSS Файлы в моем коде. Так что , пожалуйста, помогите мне с правильным подходом для достижения моего требования , Заранее спасибо.

1 Ответ

1 голос
/ 28 января 2020

Вот рабочая демонстрация, которая должна помочь вам начать, используя аналогичный метод из образца :

<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>Web Chat: Programmatic access to post activity</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!--
      This CDN points to the latest official release of Web Chat. If you need to test against Web Chat's latest bits, please refer to pointing to Web Chat's MyGet feed:
      https://github.com/microsoft/BotFramework-WebChat#how-to-test-with-web-chats-latest-bits
    -->
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        #webchat {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="webchat" role="main"></div>
    <script>
        (async function () {
            // In this demo, we are using Direct Line token from MockBot.
            // Your client code must provide either a secret or a token to talk to your bot.
            // Tokens are more secure. To learn about the differences between secrets and tokens
            // and to understand the risks associated with using secrets, visit https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication?view=azure-bot-service-4.0

            // We are creating the Web Chat store here so we can dispatch WEB_CHAT/SEND_MESSAGE action later.
            const store = window.WebChat.createStore();

            window.WebChat.renderWebChat(
                {
                    directLine: window.WebChat.createDirectLine({ token: '<your token>' }),
                    // We are passing our own version of Web Chat store.
                    store
                },
                document.getElementById('webchat')
            );

            document.querySelector('#webchat > *').focus();

// THIS IS THE IMPORTANT STUFF

            const sendbox = document.querySelector("[aria-label='Sendbox']");

            function removeQuestions() {
                const questionDivs = document.querySelectorAll('.questions');
                    questionDivs.forEach((div) => {
                        div.remove();
                    })
            }

            // This ensures that we create unique listeners for each question
            let totalQuestions = 0;

            // Track the keypress events in the Send Box
            sendbox.addEventListener('keypress', () => {
                if (sendbox.defaultValue.length > 4) {
                    getQuestion();
                } else {
                    removeQuestions();
                }
            });

            // Send a message containing the innerText of the target element
            function send(event) {
                store.dispatch({
                    type: 'WEB_CHAT/SEND_MESSAGE',
                    payload: { text: event.currentTarget.innerText }
                });
                event.currentTarget.remove();
            }

            // This generates some test questions
            function getQuestion() {
                // Create questions div
                const questions = document.createElement('DIV');
                questions.setAttribute('class', 'questions');
                document.querySelector('.content').appendChild(questions);

                // Generate test questions
                for (var i = 0; i < 4; i++) {
                    // Create question div
                    const question = document.createElement('DIV');
                    question.setAttribute('id', `question${totalQuestions}`);
                    question.setAttribute('class', 'probing');
                    question.innerText = `this is a test ${totalQuestions}`;
                    questions.appendChild(question);

                    // Create listener for question
                    const element = document.querySelector(`#question${totalQuestions}`);
                    element.addEventListener('click', send, false);
                    totalQuestions++;
                }
            }
        })().catch(err => console.error(err));
    </script>
</body>

</html>

Возможно, есть более элегантные способы сделать это, но я хотел получить ответ как можно скорее.

Примечание: я использовал vanilla javascript over jQuery, чтобы сократить время загрузки страницы и потому, что я более знаком с ним.

...