Sending channelData to webchat with each message

Question

I am trying to inject channelData with each message that is sent from a bot webchat control in a page. I looked around and found this sample (https://cmsdk.com/javascript/how-to-send-custom-channel-data-when-using-web-chat-client-with-bot-framework.html) and my code looks like the code below.

The issue is that this works in Chrome but the spread operator (…) doesn’t work on Edge or IE. Is there an alternative syntax that would work in all browsers?

var user = {
    id: '@User.Identity.Name',
    name: '@User.Identity.Name'
};

var bot = {
    id: BotId,
    name: 'BotName'
};

var botConnect = new BotChat.DirectLine({
    secret: '@ViewData["BotSecret"]',
    webSockets: 'true'
});

var v = { ...botConnect };
debugger;

BotChat.App({
    botConnection: {
        ...botConnect,
        postActivity: activity => {
            activity.channelData = {
                StudentId: '@User.Identity.Name'
            };
            return botConnect.postActivity(activity);
        }
    },
    user: user,
    bot: bot,
    resize: 'detect'
}, document.getElementById("bot"));

Answer 1

It looks like Babel has a plugin which transforms the Spread operator into equivalent code using Object.assign. This doesn't fully solve your problem, as IE still doesn't support Object.assign - in the case of Babel, a polyfill is included for Object.Assign. Although including Babel in your project might be overkill, the MDN has sample code for a simple standalone Object.assign polyfill that might be more reasonable to include.

If that's an agreeable dependency, then once Object.assign is available to you cross-browser, the Babel documentation suggests that the two lines of code are equivalent:

In:

z = { x, ...y };

Out:

z = Object.assign({ x }, y);

Answer 2

just closing the loop on this one, I worked with some guys that know their JS and we implemented a "spread equivalent" function that works on IE, Chrome and Edge (haven't tested in Safari but I guess it should work there too).

IE didn't like the => operator so we changed that to a function too, here is the resulting code:

var user = {
    id: '@User.Identity.Name',
    name: '@User.Identity.Name'
};

var bot = {
    id: 'TheBotId',
    name: 'TheBotName'
};

var botConnect = new BotChat.DirectLine({
    secret: 'TheBotSecret',
    webSockets: 'true'
});

// Spread equivalent function
function getBotConnectionDetail(botconnection) {
    var botConnectionDetail = {};
    var keys = Object.keys(botconnection);
    for (var i = 0; i < keys.length; i++) {
        botConnectionDetail[keys[i]] = botconnection[keys[i]];
    };
    botConnectionDetail['postActivity'] = function (activity) {
        activity.channelData = {
            StudentId: '@User.Identity.Name'
        };
        return botconnection.postActivity(activity)
    };
    return botConnectionDetail;
}

// Invokes Bot
BotChat.App({
        botConnection: getBotConnectionDetail(botConnect),
        user: user,
        bot: bot,
        resize: 'detect'
    },
    document.getElementById("bot")
);