Hook to customize channelData

[cwhitten]

Feature Request

see https://github.com/microsoft/BotFramework-WebChat/issues/2763#issue-539865806

This issue tracks the ability for a user to hook into outgoing channelData and modify it.

[Enhancement]

[compulim]

Design

This is very similar to custom dimensions used in telemetry. Before working on this issue, please read about the design of custom dimensions in various telemetry systems.

Add useChannelData

useChannelData(name: string, value: any); // or name it useChannelDataEffect or useChannelDataDimension

This will add:

{
  "channelData": {
    "name": "value"
  }
}

If there are more than one call to useChannelData with same name, it will turn the value into an array. For example,

{
  "channelData": {
    "name": [
      "value1",
      "value2"
    ]
  }
}

Sample code

const AddLocationHREF = () => {
  useChannelData('url', location.href);

  return false;
};

ReactDOM.render(
  <Composer directLine={directLine}>
    <BasicWebChat />
    <AddLocationHREF />
  </Composer>
);

[compulim]

Instead of hooks, I think it's more intuitive to use props to inject channel data. For example,

React.renderDOM(
  <ReactWebChat
    channelData={{authToken: 'a1b2c3d'}}
    directLine={directLine}
  />,
  document.getElementById('webchat')
);

We should also reserve some names. For example, channel data speaking and state is currently used in Web Chat.