@ulms/wc-chat

Usage

Polyfills

Workaround for custom-elements-es5-adapter:

<script>if (!window.customElements) { document.write('<!--'); }</script>
<script src="<path_to>/custom-elements-es5-adapter.84b300ee818dce8b351c7cc7c100bcf7.js" type="text/javascript" ></script>
<!--! do not remove -->

Dependencies

Chat relies on dependencies described at peerDependencies section.

They should be included according your pipeline or like that.

Initialization

Chat in a nutshell can be accessed like this:

<script src="<path/to>/dist/chat.min.js"></script>
<script>
  window.customElements.define('wc-chat', window.WcChat.Chat);
</script>

Customization

Enhance

Chat is able to be enhanced. It provides some mixins and utilities.

An example can be seen here.

I18n

Chat supports internationalization and contains basic dictionary within. You have to specify language attribute to make it work (uses en-US locale by default).

For instance:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/intl-messageformat-with-locales.min.js"></script>
<wc-chat
  language="en-US"
  placeholder="Write something…"
  placeholderdisabled="Chat is blocked now"
/>

Dependencies

• intl-messageformat

Using parsers

Chat supports parsers to render a message.

Here are built-in ones:

No parser

Chat renders string as is unless parser is defined.

HTML Entities parser

This parser just encodes a string with HTML entities.

For instance:

<wc-chat parser='html-entities' />

Result

:s/Scotch & Soda/Scotch & Soda/

Markdown parser

This parser renders any string according to Markdown markup.

For instance:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it.min.js"></script>
<wc-chat parser='markdown' />

Dependencies

• markdown-it