Kendo ui 如何使用direcline在剑道ui控件聊天机器人中启用语音输入？

我想在剑道UI聊天机器人中添加语音选项。我可以通过使用webchat来实现它，但是如何在剑道中实现同样的效果呢

下面是我能够在webchat中获得speech选项的代码。 我想实现这样的目标。

提前谢谢

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

$（文档）.ready（函数（）{
window.chat=$（“#botchatgoesher”）.kendocat({
post:函数（args）{
agent.postMessage（args）；
},
}).数据（“Kendocat”）；
var agent=new directlinegent（window.chat，“令牌”）；
});
常量语音选项={
speechRecognizer:new Kendocat.Speech.BrowserSpeechRecognizer（），
speechSynthesizer:new Kendocat.Speech.BrowserSpeechSynthesizer（）
};
var AdaptiveCardComponent=kendo.chat.Component.extend({
初始化：函数（选项、视图）{
kendo.chat.Component.fn.init.call（this，options，view）；
var adaptiveCard=新的adaptiveCard.adaptiveCard（）；
adaptiveCard.hostConfig=新的adaptiveCard.hostConfig({
fontFamily：“Segoe UI，Helvetica Neue，无衬线”，
});
adaptiveCard.parse（选项）；
变量bodyElement=$("为了澄清，您不想使用网络聊天，但想使用直拨电话？此外，希望使用直拨电话启用语音功能？另外，您可以发布您尝试过的代码吗？是的，我不想使用webchat，因为我使用的是Kendocat，我使用的是direcline，但在kendo UI聊天机器人中无法看到语音选项。我发布了代码，Steven Kanberg能否请您检查上述代码，并让我知道如何使用jquery在剑道UI中添加语音选项。在webchat中启用语音选项很容易，但在kenod UI中如何启用语音选项。