Directline bot echo back inputted message after implementing token instead of secret?

Question

issue I have developed own API which generates and refreshes token using directline api. The problem is after that when I integrated token instead of Secret in above code, my bot replies the answer correctly but also echo back the input which is being provided. There is no such implementation done in code and with secret and emulator all works fine.

(function () {

    $('head').append('<link rel="stylesheet" type="text/css" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.0/css/fabric.min.css">');
    $('head').append('<link rel="stylesheet" type="text/css" href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css">');
    $('head').append('<link rel="stylesheet" type="text/css" href="chatbot.css">');


    var chatIsVisible = false;

    $(function () {

        $(".botwrapper").toggle();

      

        $('<i class="ms-Icon ms-Icon--ChromeMinimize minimizeIcon" aria-hidden="true"></i>').appendTo(".wc-header");

        $("#botbutton").click(function () {
            chatIsVisible = true;
            $("#botbutton").toggle("fade", function () {
                $("#BotChatGoesHere").toggle("fade", function () {
                    $(".chatbot .wc-shellinput").focus();
                });
            });

        });

        $(".wc-header .minimizeIcon").click(function () {
            $("#BotChatGoesHere").toggle("fade", function () { $("#botbutton").toggle("fade"); chatIsVisible = false; });

        });

        setTimeout(showBot, 3000);
        setInterval(shakeBot, 10000);


        function showBot() {
            $("#botbutton").toggle("fade").effect("bounce", { times: 3 }, "slow");
        }

        function shakeBot() {

            if (!chatIsVisible) {
                $("#botbutton").effect("bounce", { times: 3 }, "slow");
            }
        }


    });

    const params = BotChat.queryParams(location.search);

    const user = {
        id: params['userid'] || 'userid',
        name: params['username'] || 'User'
    };

    const bot = {
        id: params['botid'] || 'SAM',
        name: params['botname'] || 'SAM'
    };

    const speechOptions = {
        speechRecognizer: new CognitiveServices.SpeechRecognizer({ locale: 'de-DE', subscriptionKey: '' }),
        speechSynthesizer: new CognitiveServices.SpeechSynthesizer({
            gender: CognitiveServices.SynthesisGender.Female,
            subscriptionKey: '',
            voiceName: 'Microsoft Server Speech Text to Speech Voice (de-DE, Stefan, Apollo)'
        })
    };

    window['botchatDebug'] = params['debug'] && params['debug'] === 'true';

    function ConnectWebBotChat() {
        let headers = {
        };
        if (botConnection !== null) {
            // for refresh token
            headers = {
                old_token: TokenResult.token,
                user_id: TokenResult.userId
            };
        }
        $.ajax({
            url: "http://localhost:64102/api/DLToken",
            //async: "false",
            method: "POST",
            data: "",
            dataType: 'json',
            contentType: "application/json",
            headers: headers,
            success: function (result, status, jqXHR) {
                TokenResult = result;
                botConnection = new BotChat.DirectLine({
                    domain: params['domain'],
                    secret: result.token,
                    token: result.token,
                    webSocket: params['webSocket'] && params['webSocket'] === 'true'
                });
                BotChat.App({
                    bot: bot,
                    resize: 'detect',
                    user: user,
                    speechOptions: speechOptions,
                    directLine: botConnection
                }, document.getElementById('BotChatGoesHere'));
                PingBotConnection(true);
                console.log("SAM Connection Refreshed : " + status);
            },
            error(jqXHR, textStatus, errorThrown) {
                console.log("SAM Connection Refresh : " + errorThrown);
            }
        });
    }
    function PingBotConnection(_IsFirstTime = false) {
        botConnection
            .postActivity({
                from: user,
                name: 'Connection Test',
                type: 'event',
                value: ''
            })
            .subscribe(function (id) {
                console.log('SAM Pinged OK!');
            });
        botConnection.connectionStatus$
            .subscribe(connectionStatus => {
                handleConnection(connectionStatus);
                if (!_IsFirstTime)
                    ConnectWebBotChat();
            });
    }
    function handleConnection(connectionStatus) {
        switch (connectionStatus) {
            case 0:
                console.log("SAM Uninitialized");
                break;
            case 1:
                console.log("SAM Connecting");
                break;
            case 2:
                console.log("SAM Online");
                break;
            case 3:
                console.log("SAM ExpiredToken");
                break;
            case 4:
                console.log("SAM FailedToConnect");
                break;
            case 5:
                console.log("SAM Ended");
                break;
        }
    }

    let botConnection = null;
    let TokenResult = null;
    ConnectWebBotChat();
    setInterval(() => { PingBotConnection(false); }, 1780000);

})();

Bot should not echo back the inputted message on use of Directline Token.

Many thanks in Advance

Answer 1

Looking at the above posted code, it looks like you are passing the token as a secret. I would recommend you just pass one not both.

Also, I would recommend you to upgrade to web chat v4 as it provides more support when it comes to customization. This sample provides a detailed guide on how to migrate from Web Chat v3 to v4.