Как включить речевой ввод в kendo ui control chatbot с помощью direcline? - PullRequest
Новая
       105

Как включить речевой ввод в kendo ui control chatbot с помощью direcline?

0 голосов
/ 11 октября 2019

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

Ниже приведен код, с помощью которого я могу получить речевую опцию в веб-чате. Речевая опция включена код Я хочу добиться чего-то подобного. Речь на ботче

Заранее спасибо. 

$(document).ready(function () {
    window.chat = $("#BotChatGoesHere").kendoChat({
        post: function (args) {
            agent.postMessage(args);
        },
    }).data("kendoChat");
    var agent = new DirectLineAgent(window.chat, "token");
});
const speechOptions = {
    speechRecognizer: new KendoChat.Speech.BrowserSpeechRecognizer(),
    speechSynthesizer: new KendoChat.Speech.BrowserSpeechSynthesizer()
};
var AdaptiveCardComponent = kendo.chat.Component.extend({
    init: function (options, view) {
        kendo.chat.Component.fn.init.call(this, options, view);
        var adaptiveCard = new AdaptiveCards.AdaptiveCard();
        adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
            fontFamily: "Segoe UI, Helvetica Neue, sans-serif",
        });
        adaptiveCard.parse(options);
        var bodyElement = $("<div'>").addClass("k-card-body").append(adaptiveCard.render());
        this.element.addClass("k-card").append(bodyElement);
    }
});

kendo.chat.registerComponent("application/vnd.microsoft.card.adaptive", AdaptiveCardComponent);
window.DirectLineAgent = kendo.Class.extend({
    init: function (chat, secret) {
        this.speechOptions = speechOptions;
        this.chat = chat;
        this.iconUrl = "https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0";
        this.agent = new DirectLine.DirectLine({ secret: secret });
        this.agent.activity$.subscribe($.proxy(this.onResponse, this));
    },
    postMessage: function (args) {
        var postArgs = {
            text: args.text,
            type: args.type,
            timestamp: args.timestamp,
            from: args.from
        };

        this.agent.postActivity(postArgs)
            .subscribe();
    },
    onResponse: function (response) {
        if (response.from.id === this.chat.getUser().id) {
            return;
        }
        response.from.iconUrl = this.iconUrl;
        this.renderMessage(response);
        this.renderAttachments(response);
        this.renderSuggestedActions(response.suggestedActions);
    },

    renderMessage: function (message) {
        if (message.text || message.type == "typing") {
            this.chat.renderMessage(message, message.from);
        }
    },
    renderAttachments: function (data) {
        this.chat.renderAttachments(data, data.from);
    },
    renderSuggestedActions: function (suggestedActions) {
        var actions = [];
        if (suggestedActions && suggestedActions.actions) {
            actions = suggestedActions.actions;
        }
        this.chat.renderSuggestedActions(actions);
    },
});
...