Webchat Integration

[rockwellll]

This PR introduces a new set of classes and modules that allow the integration of WebChats to be used via the JS client.

Configuration

It adds a new WebChat configuration in core/configuration/web_chat that allow to set (or override) values of the WebChat, the API for initializing a WebChat looks like this,

Hellotext.initialize('PUBLIC_BUSINESS_ID', {
  webChat: {
    id,
    container,
    placement,
    classes,
    triggerClasses,
    style: {
      primaryColor,
      secondaryColor,
      typography
    },
    behaviour,
  }
})

Read more on the docs https://github.com/hellotext/hellotext.js/blob/webchat/docs/webchat.md.

WebSockets

It introduces a parent application_channel that is used to establish WebSocket connections to Hellotext. And, it adds a web_chat_channel that inherits from it and subscribes to WS for webchat channel, which includes messages sent from the Inbox, and conversation assignment state changes.

hellotext.js/src/channels/web_chat_channel.js

Lines 13 to 21 in df83b91

	subscribe() {
	const params = {
	channel: "WebChatChannel",
	id: this.id,
	session: this.session
	}
	this.send( { command: 'subscribe', identifier: params })
	}

Controllers

Then, the webchat controller hooks into these and does something on each event,

hellotext.js/src/controllers/webchat_controller.js

Lines 67 to 70 in df83b91

	this.webChatChannel.onMessage(this.onMessageReceived)
	this.webChatChannel.onConversationAssignment(this.onConversationAssignment)
	this.webChatChannel.onAgentOnline(this.onAgentOnline)

• It supports pagination
• It has an attachment tool
• It has an emoji tool

Mixins

It extracts a usePopover mixin that is used by both the WebChat and the Emoji tool to display a dropdown popover listing their content.