@botonic/core 0.19.0-beta.1 → 0.20.1

package/src/debug/{inspector.js → inspector.ts}

@@ -1,35 +1,54 @@
+import { Route, RouteMatcher } from '../models'
 export class RouteInspector {
-  routeMatched(route, routeKey, routeValue, input) {}
-  routeNotMatched(route, routeKey, routeValue, inputValue) {}
+  routeMatched(
+    _route: Route,
+    _routeKey: string,
+    _routeValue: RouteMatcher,
+    _input: any
+  ): void {}
+  routeNotMatched(
+    _route: Route,
+    _routeKey: string,
+    _routeValue: RouteMatcher,
+    _input: any
+  ): void {}
 }
 
 export class FocusRouteInspector extends RouteInspector {
+  focusRoutePaths: string[] | null
+  focusOnMatches: boolean
   constructor() {
     super()
     this.focusRoutePaths = null
     this.focusOnMatches = false
   }
 
-  focusOnlyOnRoutes(focusRoutePaths) {
+  focusOnlyOnRoutes(focusRoutePaths: string[]): this {
     this.focusRoutePaths = focusRoutePaths
     return this
   }
 
-  focusOnlyOnMatches() {
+  focusOnlyOnMatches(): this {
     this.focusOnMatches = true
     return this
   }
 
-  _isOnFocus(route) {
-    if (this.focusRoutePaths == null) {
+  _isOnFocus(route: Route): boolean {
+    if (this.focusRoutePaths === null) {
       return true
     }
+    // @ts-ignore
     return this.focusRoutePaths.includes(route.path)
   }
 }
 
 export class LogRouteInspector extends FocusRouteInspector {
-  routeMatched(route, routeKey, routeValue, inputValue) {
+  routeMatched(
+    route: Route,
+    routeKey: string,
+    routeValue: RouteMatcher,
+    inputValue: string
+  ): void {
     if (!this._isOnFocus(route)) {
       return
     }
@@ -39,7 +58,13 @@ export class LogRouteInspector extends FocusRouteInspector {
     )
   }
 
-  routeNotMatched(route, routeKey, routeValue, inputValue) {
+  // @ts-ignore
+  routeNotMatched(
+    route: Route,
+    routeKey: string,
+    routeValue: RouteMatcher,
+    inputValue: string
+  ): void {
     if (!this._isOnFocus(route) || this.focusOnMatches) {
       return
     }
@@ -49,7 +74,7 @@ export class LogRouteInspector extends FocusRouteInspector {
     )
   }
 
-  _routeName(obj) {
+  _routeName(obj: Route): string {
     let name = obj.path || '<<no path defined>>'
     if (obj.action) {
       name = `'${name}' (to action '${obj.action.name}')`
@@ -57,21 +82,21 @@ export class LogRouteInspector extends FocusRouteInspector {
     if (obj.redirect) {
       name = `'${name}' (with redirect to '${obj.redirect}')`
     }
-
-    return name
+    return name as string
   }
 
-  _log(message, ...optionalParams) {
+  _log(message: string, ...optionalParams: string[]): void {
     console.log(message, ...optionalParams)
   }
 }
 
 export class Inspector {
-  constructor(routeInspector = undefined) {
+  routeInspector: RouteInspector
+  constructor(routeInspector: RouteInspector | undefined = undefined) {
     this.routeInspector = routeInspector || new RouteInspector()
   }
 
-  getRouteInspector() {
+  getRouteInspector(): RouteInspector {
     return this.routeInspector
   }
 }

package/src/{handoff.js → handoff.ts}

@@ -1,14 +1,45 @@
 import axios from 'axios'
 
+import { PATH_PAYLOAD_IDENTIFIER } from './constants'
+import { Session } from './models'
+
 const HUBTYPE_API_URL = 'https://api.hubtype.com'
 
-function contextDefaults(context) {
+export interface HubtypeAgentsInfo {
+  attending_count: number
+  email: string
+  idle_count: number
+  last_message_sent: string
+  status: string
+}
+export interface HubtypeSession extends Session {
+  _hubtype_api?: string
+  _access_token: string
+}
+
+export interface SessionWithBotonicAction extends Session {
+  _botonic_action: string
+}
+export interface BackendContext {
+  timeoutMs: number
+}
+
+export interface VacationRange {
+  end_date: number // timestamp
+  id: number
+  start_date: number // timestamp
+}
+
+function contextDefaults(context: any): BackendContext {
   return {
     timeoutMs: context.timeoutMs || 10000,
   }
 }
 
-export async function getOpenQueues(session, context = {}) {
+export async function getOpenQueues(
+  session: HubtypeSession,
+  context = {}
+): Promise<{ queues: string[] }> {
   //be aware of https://github.com/axios/axios/issues/1543
   const baseUrl = session._hubtype_api || HUBTYPE_API_URL
   const endpointUrl = `${baseUrl}/v1/queues/get_open_queues/`
@@ -20,57 +51,66 @@ export async function getOpenQueues(session, context = {}) {
     method: 'post',
     url: endpointUrl,
     data: { bot_id: session.bot.id },
-    timeout: context.timeoutMs,
+    timeout: (context as BackendContext).timeoutMs,
   })
   return resp.data
 }
 
 export class HandOffBuilder {
-  constructor(session) {
+  _session: SessionWithBotonicAction
+  _queue: string
+  _onFinish: string
+  _email: string
+  _agentId: string
+  _note: string
+  _caseInfo: string
+  _shadowing: boolean
+
+  constructor(session: SessionWithBotonicAction) {
     this._session = session
   }
 
-  withQueue(queueNameOrId) {
+  withQueue(queueNameOrId: string): this {
     this._queue = queueNameOrId
     return this
   }
 
-  withOnFinishPayload(payload) {
+  withOnFinishPayload(payload: string): this {
     this._onFinish = payload
     return this
   }
 
-  withOnFinishPath(path) {
-    this._onFinish = `__PATH_PAYLOAD__${path}`
+  withOnFinishPath(path: string): this {
+    this._onFinish = `${PATH_PAYLOAD_IDENTIFIER}${path}`
     return this
   }
 
-  withAgentEmail(email) {
+  withAgentEmail(email: string): this {
     this._email = email
     return this
   }
 
-  withAgentId(agentId) {
+  withAgentId(agentId: string): this {
     this._agentId = agentId
     return this
   }
 
-  withNote(note) {
+  withNote(note: string): this {
     this._note = note
     return this
   }
 
-  withCaseInfo(caseInfo) {
+  withCaseInfo(caseInfo: string): this {
     this._caseInfo = caseInfo
     return this
   }
 
-  withShadowing(shadowing = true) {
+  withShadowing(shadowing = true): this {
     this._shadowing = shadowing
     return this
   }
 
-  async handOff() {
+  async handOff(): Promise<void> {
     return _humanHandOff(
       this._session,
       this._queue,
@@ -104,17 +144,26 @@ export async function humanHandOff(session, queueNameOrId = '', onFinish) {
   return builder.handOff()
 }
 
+interface HubtypeHandoffParams {
+  queue?: string
+  agent_email?: string
+  agent_id?: string
+  case_info?: string
+  note?: string
+  shadowing?: boolean
+  on_finish?: string
+}
 async function _humanHandOff(
-  session,
+  session: SessionWithBotonicAction,
   queueNameOrId = '',
-  onFinish,
+  onFinish: string,
   agentEmail = '',
   agentId = '',
   caseInfo = '',
   note = '',
   shadowing = false
 ) {
-  const params = {}
+  const params: HubtypeHandoffParams = {}
   if (queueNameOrId) {
     params.queue = queueNameOrId
   }
@@ -139,7 +188,11 @@ async function _humanHandOff(
   session._botonic_action = `create_case:${JSON.stringify(params)}`
 }
 
-export async function storeCaseRating(session, rating, context = {}) {
+export async function storeCaseRating(
+  session: HubtypeSession,
+  rating: number,
+  context: any = {}
+): Promise<{ status: string }> {
   const baseUrl = session._hubtype_api || HUBTYPE_API_URL
   const chatId = session.user.id
   context = contextDefaults(context)
@@ -150,12 +203,15 @@ export async function storeCaseRating(session, rating, context = {}) {
     method: 'post',
     url: `${baseUrl}/v1/chats/${chatId}/store_case_rating/`,
     data: { chat_id: chatId, rating },
-    timeout: context.timeoutMs,
+    timeout: (context as BackendContext).timeoutMs,
   })
   return resp.data
 }
 
-export async function getAvailableAgentsByQueue(session, queueId) {
+export async function getAvailableAgentsByQueue(
+  session: HubtypeSession,
+  queueId: string
+): Promise<{ agents: string[] }> {
   const baseUrl = session._hubtype_api || HUBTYPE_API_URL
   const resp = await axios({
     headers: {
@@ -167,7 +223,9 @@ export async function getAvailableAgentsByQueue(session, queueId) {
   return resp.data
 }
 
-export async function getAvailableAgents(session) {
+export async function getAvailableAgents(
+  session: HubtypeSession
+): Promise<{ agents: HubtypeAgentsInfo[] }> {
   const baseUrl = session._hubtype_api || HUBTYPE_API_URL
   const botId = session.bot.id
   const resp = await axios({
@@ -180,7 +238,10 @@ export async function getAvailableAgents(session) {
   return resp.data
 }
 
-export async function getAgentVacationRanges(session, { agentId, agentEmail }) {
+export async function getAgentVacationRanges(
+  session: HubtypeSession,
+  { agentId, agentEmail }: { agentId?: string; agentEmail?: string }
+): Promise<{ vacation_ranges: VacationRange[] }> {
   const baseUrl = session._hubtype_api || HUBTYPE_API_URL
   const botId = session.bot.id
   const resp = await axios({
@@ -194,12 +255,15 @@ export async function getAgentVacationRanges(session, { agentId, agentEmail }) {
   return resp.data
 }
 
-export function cancelHandoff(session, typification = null) {
+export function cancelHandoff(
+  session: SessionWithBotonicAction,
+  typification: string | null = null
+): void {
   let action = 'discard_case'
   if (typification) action = `${action}:${JSON.stringify({ typification })}`
   session._botonic_action = action
 }
 
-export function deleteUser(session) {
+export function deleteUser(session: SessionWithBotonicAction): void {
   session._botonic_action = `delete_user`
 }

package/src/{hubtype-service.js → hubtype-service.ts}

@@ -1,16 +1,57 @@
-import axios from 'axios'
-import Pusher from 'pusher-js'
+import axios, { AxiosResponse } from 'axios'
+import { inflate } from 'pako'
+import Pusher, { AuthOptions, Channel } from 'pusher-js'
+import Channels from 'pusher-js/types/src/core/channels/channels'
 
+import { Input, SessionUser } from './models'
 import { getWebpackEnvVar } from './utils'
 
+interface UnsentInput {
+  id: string
+  ack: number
+  unsentInput: Input
+}
+interface BotonicHeaders {
+  'X-BOTONIC-USER-ID': string
+  'X-BOTONIC-LAST-MESSAGE-ID': string
+  'X-BOTONIC-LAST-MESSAGE-UPDATE-DATE': string
+}
+interface ServerConfig {
+  activityTimeout?: number
+  pongTimeout?: number
+}
+interface HubtypeServiceArgs {
+  appId: string
+  user: SessionUser
+  lastMessageId: string
+  lastMessageUpdateDate: string
+  onEvent: any
+  unsentInputs: () => UnsentInput[]
+  server: ServerConfig
+}
+/**
+ *
+ * @param compressedData a string representing gzipped data previously encoded to base64 for very large contents
+ * @returns a string representing the information of a very large content
+ * Ref: https://stackoverflow.com/questions/4875020/javascript-decompress-inflate-unzip-ungzip-strings
+ */
+function decompressData(compressedData) {
+  const strData = atob(compressedData)
+  const charData = strData.split('').map(x => x.charCodeAt(0))
+  const binData = new Uint8Array(charData)
+  const data = inflate(binData)
+  // @ts-ignore
+  return String.fromCharCode.apply(null, new Uint8Array(data))
+}
+
 const _WEBCHAT_PUSHER_KEY_ = getWebpackEnvVar(
-  // eslint-disable-next-line no-undef
+  // @ts-ignore
   typeof WEBCHAT_PUSHER_KEY !== 'undefined' && WEBCHAT_PUSHER_KEY,
   'WEBCHAT_PUSHER_KEY',
   '434ca667c8e6cb3f641c'
 )
 const _HUBTYPE_API_URL_ = getWebpackEnvVar(
-  // eslint-disable-next-line no-undef
+  // @ts-ignore
   typeof HUBTYPE_API_URL !== 'undefined' && HUBTYPE_API_URL,
   'HUBTYPE_API_URL',
   'https://api.hubtype.com'
@@ -23,6 +64,15 @@ const PONG_TIMEOUT = 5 * 1000 // https://pusher.com/docs/channels/using_channels
  * Calls Hubtype APIs from Webchat
  */
 export class HubtypeService {
+  appId: string
+  user: SessionUser
+  lastMessageId: string
+  lastMessageUpdateDate: string
+  onEvent: any
+  unsentInputs: () => UnsentInput[]
+  pusher: Pusher | null
+  channel: Channel
+  server: ServerConfig
   PUSHER_CONNECT_TIMEOUT_MS = 10000
   constructor({
     appId,
@@ -32,7 +82,7 @@ export class HubtypeService {
     onEvent,
     unsentInputs,
     server,
-  }) {
+  }: HubtypeServiceArgs) {
     this.appId = appId
     this.user = user || {}
     this.lastMessageId = lastMessageId
@@ -44,6 +94,7 @@ export class HubtypeService {
       // It's safe not awaiting Promise because:
       // * it will never be called from AWS lambda
       // * though init() is called again from postMesage, it does nothing if Pusher already created
+      // @ts-ignore
       this.init()
     }
   }
@@ -51,7 +102,7 @@ export class HubtypeService {
   /**
    * @returns {Promise<void>}
    */
-  init(user, lastMessageId, lastMessageUpdateDate) {
+  init(user, lastMessageId, lastMessageUpdateDate): Promise<void> {
     if (user) this.user = user
     if (lastMessageId) this.lastMessageId = lastMessageId
     if (lastMessageUpdateDate)
@@ -62,7 +113,7 @@ export class HubtypeService {
   /**
    * @returns {Promise<void>}
    */
-  _initPusher() {
+  _initPusher(): Promise<void> {
     if (this.pusher) return Promise.resolve()
     if (!this.user.id || !this.appId) {
       // TODO recover user & appId somehow
@@ -74,11 +125,11 @@ export class HubtypeService {
       forceTLS: true,
       auth: {
         headers: this.constructHeaders(),
-      },
+      } as AuthOptions,
       ...this.resolveServerConfig(),
     })
     this.channel = this.pusher.subscribe(this.pusherChannel)
-    const connectionPromise = new Promise((resolve, reject) => {
+    const connectionPromise = new Promise<void>((resolve, reject) => {
       const cleanAndReject = msg => {
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
         clearTimeout(connectTimeout)
@@ -96,18 +147,27 @@ export class HubtypeService {
         resolve()
       })
       this.channel.bind('botonic_response', data => this.onPusherEvent(data))
-      this.channel.bind('update_message_info', data => this.onPusherEvent(data))
-
-      this.pusher.connection.bind('error', event => {
-        if (event.type == 'WebSocketError') this.handleConnectionChange(false)
-        else {
-          const errorMsg =
-            event.error && event.error.data
-              ? event.error.data.code || event.error.data.message
-              : 'Connection error'
-          cleanAndReject(`Pusher error (${errorMsg})`)
+      this.channel.bind('botonic_response_compressed', compressedData => {
+        try {
+          const data = JSON.parse(decompressData(compressedData))
+          this.onPusherEvent(data)
+        } catch (e) {
+          console.error('Error: Unable to decompress data', e)
         }
       })
+      this.channel.bind('update_message_info', data => this.onPusherEvent(data))
+
+      this.pusher &&
+        this.pusher.connection.bind('error', event => {
+          if (event.type == 'WebSocketError') this.handleConnectionChange(false)
+          else {
+            const errorMsg =
+              event.error && event.error.data
+                ? event.error.data.code || event.error.data.message
+                : 'Connection error'
+            cleanAndReject(`Pusher error (${errorMsg})`)
+          }
+        })
     })
     this.pusher.connection.bind('state_change', states => {
       if (states.current === 'connecting') this.updateAuthHeaders()
@@ -118,17 +178,17 @@ export class HubtypeService {
     return connectionPromise
   }
 
-  constructHeaders() {
+  constructHeaders(): BotonicHeaders {
     const headers = {}
     if (this.user && this.user.id) headers['X-BOTONIC-USER-ID'] = this.user.id
     if (this.lastMessageId)
       headers['X-BOTONIC-LAST-MESSAGE-ID'] = this.lastMessageId
     if (this.lastMessageUpdateDate)
       headers['X-BOTONIC-LAST-MESSAGE-UPDATE-DATE'] = this.lastMessageUpdateDate
-    return headers
+    return headers as BotonicHeaders
   }
 
-  resolveServerConfig() {
+  resolveServerConfig(): ServerConfig {
     if (!this.server) {
       return { activityTimeout: ACTIVITY_TIMEOUT, pongTimeout: PONG_TIMEOUT }
     }
@@ -138,7 +198,7 @@ export class HubtypeService {
     }
   }
 
-  updateAuthHeaders() {
+  updateAuthHeaders(): void {
     if (this.pusher) {
       this.pusher.config.auth.headers = {
         ...this.pusher.config.auth.headers,
@@ -147,26 +207,26 @@ export class HubtypeService {
     }
   }
 
-  handleConnectionChange(online) {
+  handleConnectionChange(online: boolean): void {
     this.onPusherEvent({ action: 'connectionChange', online })
   }
 
-  onPusherEvent(event) {
+  onPusherEvent(event: any): void {
     if (this.onEvent && typeof this.onEvent === 'function') this.onEvent(event)
   }
 
-  get pusherChannel() {
+  get pusherChannel(): string {
     return `private-encrypted-${this.appId}-${this.user.id}`
   }
 
-  handleSentInput(message) {
+  handleSentInput(message: any): void {
     this.onEvent({
       action: 'update_message_info',
       message: { id: message.id, ack: 1 },
     })
   }
 
-  handleUnsentInput(message) {
+  handleUnsentInput(message: any): void {
     this.onEvent({
       action: 'update_message_info',
       message: { id: message.id, ack: 0, unsentInput: message },
@@ -176,8 +236,9 @@ export class HubtypeService {
   /**
    * @return {Promise<void>}
    */
-  async postMessage(user, message) {
+  async postMessage(user: SessionUser, message: any): Promise<void> {
     try {
+      // @ts-ignore
       await this.init(user)
       await axios.post(
         `${_HUBTYPE_API_URL_}/v1/provider_accounts/webhooks/webchat/${this.appId}/`,
@@ -196,26 +257,30 @@ export class HubtypeService {
     return Promise.resolve()
   }
 
-  static async getWebchatVisibility({ appId }) {
+  static async getWebchatVisibility({
+    appId,
+  }: {
+    appId: string
+  }): Promise<AxiosResponse<any>> {
     return axios.get(
       `${_HUBTYPE_API_URL_}/v1/provider_accounts/${appId}/visibility/`
     )
   }
 
-  destroyPusher() {
+  destroyPusher(): void {
     if (!this.pusher) return
     this.pusher.disconnect()
     this.pusher.unsubscribe(this.pusherChannel)
     this.pusher.unbind_all()
-    this.pusher.channels = {}
+    this.pusher.channels = {} as Channels
     this.pusher = null
   }
 
-  async onConnectionRegained() {
+  async onConnectionRegained(): Promise<void> {
     await this.resendUnsentInputs()
   }
 
-  async resendUnsentInputs() {
+  async resendUnsentInputs(): Promise<void> {
     for (const message of this.unsentInputs()) {
       message.unsentInput &&
         (await this.postMessage(this.user, message.unsentInput))

package/src/{i18n.js → i18n.ts}

@@ -1,5 +1,11 @@
 // eslint-disable-next-line filenames/match-regex
-export const getString = (locales, locale, stringID) => {
+import { Locales } from './models'
+
+export const getString = (
+  locales: Locales,
+  locale: string,
+  stringID: string
+): string => {
   let l = stringID.split('.').reduce((o, i) => o[i], locales[locale])
   if (l instanceof Array) l = l[Math.floor(Math.random() * l.length)]
   return String(l)

package/src/index.ts

@@ -0,0 +1,13 @@
+export * from './constants'
+export * from './core-bot'
+// TODO: Review @botonic/react's tree-shaking to remove dataProvider from bundle
+// export * from './data-provider'
+export * from './debug'
+export * from './handoff'
+export * from './hubtype-service'
+export * from './i18n'
+export * from './models'
+export * from './output-parser'
+export * from './plugins'
+export * from './routing'
+export * from './utils'

package/src/models/events/base-event.ts

@@ -0,0 +1,14 @@
+export enum EventTypes {
+  CONNECTION = 'connection',
+  MESSAGE = 'message',
+  ACK = 'ack',
+  TRACK = 'track',
+}
+
+export interface BaseEvent {
+  eventId: string
+  userId: string
+  eventType: EventTypes
+  createdAt: string
+  modifiedAt?: string
+}

package/src/models/events/botonic-event.ts

@@ -0,0 +1,24 @@
+import { ConnectionEvent } from './connections'
+import {
+  AudioMessageEvent,
+  CarouselMessageEvent,
+  CustomMessageEvent,
+  DocumentMessageEvent,
+  ImageMessageEvent,
+  LocationMessageEvent,
+  PostbackMessageEvent,
+  TextMessageEvent,
+  VideoMessageEvent,
+} from './message'
+
+export type BotonicEvent =
+  | TextMessageEvent
+  | PostbackMessageEvent
+  | AudioMessageEvent
+  | DocumentMessageEvent
+  | ImageMessageEvent
+  | VideoMessageEvent
+  | LocationMessageEvent
+  | CarouselMessageEvent
+  | CustomMessageEvent
+  | ConnectionEvent

package/src/models/events/connections/connection-event.ts

@@ -0,0 +1,11 @@
+import { BaseEvent, EventTypes } from '../base-event'
+
+export enum ConnectionEventStatuses {
+  CONNECTED = 'connected',
+  DISCONNECTED = 'disconnected',
+}
+
+export interface ConnectionEvent extends BaseEvent {
+  eventType: EventTypes.CONNECTION
+  status: ConnectionEventStatuses
+}