Modernize styleOptions & separate HTML vs API

[corinagum]

Steps to reproduce

1. make a change to api/src/defaultStyleOptions, but NOT component/Styles/defaultStyleOptions
2. View result
3. make a change to component/Styles/defaultStyleOptions but NOT api/src/defaultStyleOptions,
4. View result
5. See behavior is not consistent

Expected behavior

both files should be cleaned up so there are no overlapping styles.

Additional context

This is in prep for RN work, where some styles will not be used in RN.

[Bug]

[compulim]

If we have time, I prefer we study more in this topic and modernize our styleOptions. But if we don't, we could just make them non-overlapping.

To modernize:

Style options in component

These are options that would only available in HTML version of Web Chat, mostly visuals (plus transitions/animations duration, etc). I would suggest to move them to CSS var. For example,

background-color: var(--webchat-transcript-background-color);

Then, we publicize the CSS var list.

Advantage: developer don't need to call renderWebChat({ styleOptions }) to set the style. Instead, they put a new stylesheet in their HTML:

<script type="text/css">
  .webchat {
    --webchat-transcript-background-color: Orange;
  }
</script>

Note that IE11 does not support CSS var. But since we are using emotion to generate stylesheet, we might be able to inline the CSS var with their true value, given we understand and document the limitation.

Style options in api

These are sendTimeout and etc. These options affect the behavior but not visuals.