@seamly/web-ui 20.3.1 → 20.4.0

package/build/dist/lib/index.debug.js

@@ -278,7 +278,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"API\": () => (/* binding */ API)\n/* harmony export */ });\n/* harmony import */ var xstream__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! xstream */ \"./node_modules/xstream/index.js\");\n/* harmony import */ var xstream__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(xstream__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var superagent__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! superagent */ \"./node_modules/superagent/lib/client.js\");\n/* harmony import */ var superagent__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(superagent__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var lib_store_index__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/store/index */ \"./src/javascripts/lib/store/index.js\");\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! lib/store/providers/session-storage */ \"./src/javascripts/lib/store/providers/session-storage.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! lib/debug */ \"./src/javascripts/lib/debug.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(lib_debug__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _producer__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./producer */ \"./src/javascripts/api/producer.js\");\n/* harmony import */ var _event_producer__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./event-producer */ \"./src/javascripts/api/event-producer.js\");\n/* harmony import */ var _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var _errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./errors/seamly-configuration-error */ \"./src/javascripts/api/errors/seamly-configuration-error.js\");\n/* harmony import */ var _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./errors/seamly-general-error */ \"./src/javascripts/api/errors/seamly-general-error.js\");\n/* harmony import */ var _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./errors/seamly-unauthorized-error */ \"./src/javascripts/api/errors/seamly-unauthorized-error.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst log = lib_debug__WEBPACK_IMPORTED_MODULE_6___default()('seamly');\nconst DOMAIN = 'api.seamly-app.com';\nconst TRANSLATIONS_VERSION = 1;\n\nfunction buildPayload(command, payload) {\n  if (command !== 'message') {\n    return payload;\n  }\n\n  const {\n    type,\n    body\n  } = payload;\n  let {\n    transactionId\n  } = payload;\n\n  if (!transactionId) {\n    transactionId = (0,lib_id__WEBPACK_IMPORTED_MODULE_4__.randomId)();\n  }\n\n  return {\n    type,\n    body,\n    transactionId\n  };\n}\n/**\n * Tries to get the time zone key directly from the operating system for those\n * environments that support the ECMAScript Internationalization API.\n *\n * Based on https://github.com/pellepim/jstimezonedetect/blob/master/jstz.main.js\n */\n\n\nfunction getTimeZone() {\n  if (!Intl || typeof Intl === 'undefined' || typeof Intl.DateTimeFormat === 'undefined') {\n    return null;\n  }\n\n  const format = Intl.DateTimeFormat();\n\n  if (typeof format === 'undefined' || typeof format.resolvedOptions === 'undefined') {\n    return null;\n  }\n\n  const timezone = format.resolvedOptions().timeZone; // Ensure we get a valid timezone\n\n  if (timezone && (timezone.indexOf('/') > -1 || timezone === 'UTC')) {\n    return timezone;\n  } else {\n    return null;\n  }\n}\n\nclass API {\n  /**\n   * Creates an instance of API.\n   * @param {Object} [config={}]\n   * @param {string} config.key Api key\n   * @param {string} config.domain Domain to connect to\n   * @param {string} config.secure Connect securely\n   * @param {string} config.externalId Unique visitor identifier (optional)\n   * @param {boolean} config.sendEnvironment\n   * @param {string} layoutMode\n   * @param {string} namespace\n   * @param {Object} [context={ channelName: undefined, variables: undefined, locale: undefined, topic: undefined, translationLocale: undefined }]\n   * @param {string} context.channelName\n   * @param {object} context.variables\n   * @param {string} context.locale\n   * @param {string} context.topic\n   * @param {string} context.translationLocale\n   * @memberof API\n   */\n  constructor({\n    layoutMode,\n    namespace,\n    config = {},\n    context = {}\n  }) {\n    this.store = (0,lib_store_index__WEBPACK_IMPORTED_MODULE_3__.objectStore)(`${namespace}.connection${context.locale ? '.' + context.locale : ''}`, config.storageProvider || lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_5__[\"default\"]);\n    this.connectionInfo = {\n      apiKey: config.key,\n      domain: config.domain || DOMAIN,\n      secure: config.secure !== false ? config.secure || true : false\n    };\n    this.config = {\n      sendEnvironment: config.sendEnvironment ?? true,\n      context: _objectSpread(_objectSpread({}, context), {}, {\n        channelName: context.channelName || 'web'\n      })\n    };\n    this.connected = false;\n    this.configReady = false;\n    this.externalId = config.externalId;\n    this.layoutMode = layoutMode;\n    this.internalProducer = new _event_producer__WEBPACK_IMPORTED_MODULE_9__[\"default\"]('API');\n    this.internal$ = xstream__WEBPACK_IMPORTED_MODULE_0___default().create(this.internalProducer).flatten();\n    this.connection$ = this.internal$.filter(event => event.type === 'connection');\n    this.connection$.subscribe({\n      next: ({\n        connected,\n        ready\n      }) => {\n        this.connected = connected;\n        this.ready = ready;\n      }\n    });\n    this.URLS = {};\n  }\n\n  getAccessToken() {\n    return this.store.get('accessToken');\n  }\n\n  setAccessToken(accessToken) {\n    this.store.set('accessToken', accessToken);\n  }\n\n  getConversationUrl() {\n    return this.store.get('conversationUrl');\n  }\n\n  setConversationUrl(url) {\n    this.store.set('conversationUrl', url);\n  }\n\n  hasConversation() {\n    return !!this.getConversationUrl();\n  }\n\n  getChannelTopic() {\n    // The `channelName` fallback is needed for seamless client upgrades.\n    // TODO: Remove when all clients have been upgraded past v20.\n    return this.store.get('channelTopic') || this.store.get('channelName');\n  }\n\n  setChannelTopic(topic) {\n    this.store.set('channelTopic', topic);\n  }\n\n  clearStore() {\n    this.store.delete('accessToken');\n    this.store.delete('conversationUrl'); // TODO: Remove `channelName` when all clients have been upgraded past v20.\n\n    this.store.delete('channelName');\n    this.store.delete('channelTopic');\n  }\n\n  getUrlPrefix(protocol) {\n    const realProtocol = this.connectionInfo.secure ? `${protocol}s` : protocol;\n    return `${realProtocol}://${this.connectionInfo.domain}`;\n  }\n\n  updateUrls({\n    _links: responseLinks\n  }) {\n    this.URLS = Object.entries(responseLinks).filter(([key]) => key !== 'self').reduce((urls, [key, {\n      href\n    }]) => {\n      return _objectSpread(_objectSpread({}, urls), {}, {\n        [key]: href\n      });\n    }, this.URLS);\n  }\n\n  async reset() {\n    await this.disconnect();\n    this.clearStore();\n    return this.getConfig();\n  }\n\n  async disconnect() {\n    if (this.conversationProducer) {\n      await this.conversationProducer.disconnect();\n    }\n\n    this.connected = false;\n    this.configReady = false;\n  }\n\n  async createConversation() {\n    try {\n      const request = superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}${this.URLS.conversations}`).set('Content-Type', 'application/json').query({\n        v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n      }) // withCredentials() is necessary to allow browsers to save received\n      // cookies in CORS requests.\n      .withCredentials().send({\n        externalId: this.externalId || undefined\n      });\n      const {\n        body\n      } = await request;\n      const {\n        conversation\n      } = body;\n\n      const initialState = _objectSpread({}, conversation);\n\n      delete initialState.accessToken;\n      delete initialState.channelTopic;\n      this.setAccessToken(conversation.accessToken);\n      this.setChannelTopic(conversation.channelTopic);\n      this.updateUrls(body);\n      this.setConversationUrl(this.URLS.conversation);\n      return initialState;\n    } catch (error) {\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  getConfig() {\n    return superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}/client/${this.connectionInfo.apiKey}/configs`).set('Content-Type', 'application/json').query({\n      v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n    }).send({\n      context: _objectSpread(_objectSpread({}, this.config.context), {}, {\n        environment: this.config.sendEnvironment === true ? this.getEnvironment() : this.config.sendEnvironment\n      })\n    }).then(({\n      body\n    }) => {\n      this.updateUrls(body);\n      this.configReady = true;\n      return body.config;\n    }).catch(error => {\n      if (error.status === 404) {\n        throw new _errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_11__[\"default\"]();\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    });\n  }\n\n  async getConversation() {\n    if (!this.hasConversation()) {\n      return null;\n    }\n\n    try {\n      const {\n        body\n      } = await superagent__WEBPACK_IMPORTED_MODULE_1___default().get(`${this.getUrlPrefix('http')}${this.URLS.history}`).set('Authorization', `Bearer ${this.getAccessToken()}`).query({\n        v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n      });\n      this.updateUrls(body);\n      const {\n        messages,\n        participants,\n        activeServiceSessionId,\n        activeServiceSettings,\n        serviceData,\n        ui,\n        translation\n      } = body.history;\n      return {\n        events: messages.map(([type, msg]) => {\n          return {\n            type,\n            payload: _objectSpread(_objectSpread({}, msg), {}, {\n              type: type === 'participant' ? type : msg.type\n            })\n          };\n        }),\n        participants,\n        activeServiceSessionId,\n        activeServiceSettings,\n        serviceData,\n        resumeConversationPrompt: ui ? Boolean(ui.resumeConversationPrompt) : false,\n        translation\n      };\n    } catch (error) {\n      if (error.status === 401) {\n        throw new _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_13__[\"default\"](error);\n      }\n\n      if (error.status === 404) {\n        throw new _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_10__[\"default\"](error);\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  async connect() {\n    this.connected = false;\n    let conversationInitialState = null;\n\n    if (!this.hasConversation()) {\n      conversationInitialState = await this.createConversation();\n    }\n\n    this.conversationProducer = new _producer__WEBPACK_IMPORTED_MODULE_8__[\"default\"](`${this.getUrlPrefix('ws')}${this.URLS.socket}`, this.config.context.channelName, this.getChannelTopic(), this.getAccessToken());\n    this.internalProducer.emit(xstream__WEBPACK_IMPORTED_MODULE_0___default().create(this.conversationProducer)); // Send environment\n\n    if (this.config.sendEnvironment) {\n      this.send('context', {\n        environment: this.config.sendEnvironment === true ? this.getEnvironment() : this.config.sendEnvironment\n      }, false);\n    }\n\n    return conversationInitialState;\n  }\n\n  uploadFile(file, progressCallback, successCallback, errorCallback) {\n    const formData = new FormData();\n    formData.append('upload', file);\n    const req = superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}${this.URLS.uploads}`).set('Authorization', `Bearer ${this.getAccessToken()}`).send(formData);\n    req.on('progress', function (e) {\n      const {\n        direction,\n        percent\n      } = e;\n\n      if (direction === 'upload' && typeof progressCallback === 'function') {\n        progressCallback(percent);\n      }\n    });\n    req.then(uploadResponse => {\n      if (successCallback) {\n        successCallback(uploadResponse);\n      }\n    }).catch(err => {\n      if (errorCallback) {\n        errorCallback(err.response);\n      } else {\n        throw err;\n      }\n    });\n    return req;\n  }\n\n  getConversationIntitialState() {\n    return superagent__WEBPACK_IMPORTED_MODULE_1___default().get(`${this.getUrlPrefix('http')}${this.getConversationUrl()}`).set('Authorization', `Bearer ${this.getAccessToken()}`).query({\n      v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n    }).then(({\n      body\n    }) => {\n      this.updateUrls(body);\n      return (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.omit)(body.conversation, ['accessToken', 'channelTopic']);\n    }).catch(error => {\n      if (error.status === 401) {\n        throw new _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_13__[\"default\"](error);\n      }\n\n      if (error.status === 404) {\n        throw new _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_10__[\"default\"](error);\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    });\n  }\n\n  async getTranslations(locale) {\n    try {\n      const url = `${this.getUrlPrefix('http')}${this.URLS.translations}`.replace('{version}', String(TRANSLATIONS_VERSION)).replace('{locale}', locale);\n      const request = superagent__WEBPACK_IMPORTED_MODULE_1___default().get(url);\n      const {\n        body\n      } = await request;\n      return body.translations;\n    } catch (error) {\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  send(command, payload, waitForReady = true) {\n    if (!this.connected || waitForReady && !this.ready) {\n      // Wait for connection\n      this.connection$.filter(e => waitForReady ? e.connected && e.ready : e.connected).take(1).subscribe({\n        next: () => this.send(command, payload, waitForReady)\n      });\n      return;\n    }\n\n    log('[SEND]', command, payload);\n    this.conversationProducer.push(command, buildPayload(command, payload), 10000);\n  }\n\n  sendContext(context = {}) {\n    const {\n      locale,\n      variables\n    } = context;\n    const payload = {};\n\n    if (locale) {\n      if (typeof locale !== 'string') {\n        throw new Error('Locale must be a string');\n      }\n\n      payload.locale = locale;\n    }\n\n    if (variables) {\n      if (typeof variables !== 'object') {\n        throw new Error('Variables must be an object');\n      }\n\n      payload.variables = variables;\n    } // If we have empty context don't send context message\n\n\n    if (Object.keys(payload).length === 0 && payload.constructor === Object) {\n      return;\n    }\n\n    this.send('context', payload, false);\n  }\n\n  stream() {\n    return this.internal$.filter(event => event.type !== 'connection');\n  }\n\n  getEnvironment() {\n    return {\n      clientName: \"@seamly/web-ui\",\n      clientVariant: this.layoutMode,\n      clientVersion: \"20.3.1\",\n      currentUrl: window.location.toString(),\n      screenResolution: `${window.screen.width}x${window.screen.height}`,\n      timezone: getTimeZone(),\n      userAgent: navigator.userAgent\n    };\n  }\n\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"API\": () => (/* binding */ API)\n/* harmony export */ });\n/* harmony import */ var xstream__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! xstream */ \"./node_modules/xstream/index.js\");\n/* harmony import */ var xstream__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(xstream__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var superagent__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! superagent */ \"./node_modules/superagent/lib/client.js\");\n/* harmony import */ var superagent__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(superagent__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var lib_store_index__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/store/index */ \"./src/javascripts/lib/store/index.js\");\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! lib/store/providers/session-storage */ \"./src/javascripts/lib/store/providers/session-storage.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! lib/debug */ \"./src/javascripts/lib/debug.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(lib_debug__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _producer__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./producer */ \"./src/javascripts/api/producer.js\");\n/* harmony import */ var _event_producer__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./event-producer */ \"./src/javascripts/api/event-producer.js\");\n/* harmony import */ var _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var _errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./errors/seamly-configuration-error */ \"./src/javascripts/api/errors/seamly-configuration-error.js\");\n/* harmony import */ var _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./errors/seamly-general-error */ \"./src/javascripts/api/errors/seamly-general-error.js\");\n/* harmony import */ var _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./errors/seamly-unauthorized-error */ \"./src/javascripts/api/errors/seamly-unauthorized-error.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst log = lib_debug__WEBPACK_IMPORTED_MODULE_6___default()('seamly');\nconst DOMAIN = 'api.seamly-app.com';\nconst TRANSLATIONS_VERSION = 1;\n\nfunction buildPayload(command, payload) {\n  if (command !== 'message') {\n    return payload;\n  }\n\n  const {\n    type,\n    body\n  } = payload;\n  let {\n    transactionId\n  } = payload;\n\n  if (!transactionId) {\n    transactionId = (0,lib_id__WEBPACK_IMPORTED_MODULE_4__.randomId)();\n  }\n\n  return {\n    type,\n    body,\n    transactionId\n  };\n}\n/**\n * Tries to get the time zone key directly from the operating system for those\n * environments that support the ECMAScript Internationalization API.\n *\n * Based on https://github.com/pellepim/jstimezonedetect/blob/master/jstz.main.js\n */\n\n\nfunction getTimeZone() {\n  if (!Intl || typeof Intl === 'undefined' || typeof Intl.DateTimeFormat === 'undefined') {\n    return null;\n  }\n\n  const format = Intl.DateTimeFormat();\n\n  if (typeof format === 'undefined' || typeof format.resolvedOptions === 'undefined') {\n    return null;\n  }\n\n  const timezone = format.resolvedOptions().timeZone; // Ensure we get a valid timezone\n\n  if (timezone && (timezone.indexOf('/') > -1 || timezone === 'UTC')) {\n    return timezone;\n  } else {\n    return null;\n  }\n}\n\nclass API {\n  /**\n   * Creates an instance of API.\n   * @param {Object} [config={}]\n   * @param {string} config.key Api key\n   * @param {string} config.domain Domain to connect to\n   * @param {string} config.secure Connect securely\n   * @param {string} config.externalId Unique visitor identifier (optional)\n   * @param {boolean} config.sendEnvironment\n   * @param {string} layoutMode\n   * @param {string} namespace\n   * @param {Object} [context={ channelName: undefined, variables: undefined, locale: undefined, topic: undefined, translationLocale: undefined }]\n   * @param {string} context.channelName\n   * @param {object} context.variables\n   * @param {string} context.locale\n   * @param {string} context.topic\n   * @param {string} context.translationLocale\n   * @memberof API\n   */\n  constructor({\n    layoutMode,\n    namespace,\n    config = {},\n    context = {}\n  }) {\n    this.store = (0,lib_store_index__WEBPACK_IMPORTED_MODULE_3__.objectStore)(`${namespace}.connection${context.locale ? '.' + context.locale : ''}`, config.storageProvider || lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_5__[\"default\"]);\n    this.connectionInfo = {\n      apiKey: config.key,\n      domain: config.domain || DOMAIN,\n      secure: config.secure !== false ? config.secure || true : false\n    };\n    this.config = {\n      sendEnvironment: config.sendEnvironment ?? true,\n      context: _objectSpread(_objectSpread({}, context), {}, {\n        channelName: context.channelName || 'web'\n      })\n    };\n    this.connected = false;\n    this.configReady = false;\n    this.externalId = config.externalId;\n    this.layoutMode = layoutMode;\n    this.internalProducer = new _event_producer__WEBPACK_IMPORTED_MODULE_9__[\"default\"]('API');\n    this.internal$ = xstream__WEBPACK_IMPORTED_MODULE_0___default().create(this.internalProducer).flatten();\n    this.connection$ = this.internal$.filter(event => event.type === 'connection');\n    this.connection$.subscribe({\n      next: ({\n        connected,\n        ready\n      }) => {\n        this.connected = connected;\n        this.ready = ready;\n      }\n    });\n    this.URLS = {};\n  }\n\n  getAccessToken() {\n    return this.store.get('accessToken');\n  }\n\n  setAccessToken(accessToken) {\n    this.store.set('accessToken', accessToken);\n  }\n\n  getConversationUrl() {\n    return this.store.get('conversationUrl');\n  }\n\n  setConversationUrl(url) {\n    this.store.set('conversationUrl', url);\n  }\n\n  hasConversation() {\n    return !!this.getConversationUrl();\n  }\n\n  getChannelTopic() {\n    // The `channelName` fallback is needed for seamless client upgrades.\n    // TODO: Remove when all clients have been upgraded past v20.\n    return this.store.get('channelTopic') || this.store.get('channelName');\n  }\n\n  setChannelTopic(topic) {\n    this.store.set('channelTopic', topic);\n  }\n\n  clearStore() {\n    this.store.delete('accessToken');\n    this.store.delete('conversationUrl'); // TODO: Remove `channelName` when all clients have been upgraded past v20.\n\n    this.store.delete('channelName');\n    this.store.delete('channelTopic');\n  }\n\n  getUrlPrefix(protocol) {\n    const realProtocol = this.connectionInfo.secure ? `${protocol}s` : protocol;\n    return `${realProtocol}://${this.connectionInfo.domain}`;\n  }\n\n  updateUrls({\n    _links: responseLinks\n  }) {\n    this.URLS = Object.entries(responseLinks).filter(([key]) => key !== 'self').reduce((urls, [key, {\n      href\n    }]) => {\n      return _objectSpread(_objectSpread({}, urls), {}, {\n        [key]: href\n      });\n    }, this.URLS);\n  }\n\n  async reset() {\n    await this.disconnect();\n    this.clearStore();\n    return this.getConfig();\n  }\n\n  async disconnect() {\n    if (this.conversationProducer) {\n      await this.conversationProducer.disconnect();\n    }\n\n    this.connected = false;\n    this.configReady = false;\n  }\n\n  async createConversation() {\n    try {\n      const request = superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}${this.URLS.conversations}`).set('Content-Type', 'application/json').query({\n        v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n      }) // withCredentials() is necessary to allow browsers to save received\n      // cookies in CORS requests.\n      .withCredentials().send({\n        externalId: this.externalId || undefined\n      });\n      const {\n        body\n      } = await request;\n      const {\n        conversation\n      } = body;\n\n      const initialState = _objectSpread({}, conversation);\n\n      delete initialState.accessToken;\n      delete initialState.channelTopic;\n      this.setAccessToken(conversation.accessToken);\n      this.setChannelTopic(conversation.channelTopic);\n      this.updateUrls(body);\n      this.setConversationUrl(this.URLS.conversation);\n      return initialState;\n    } catch (error) {\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  getConfig() {\n    return superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}/client/${this.connectionInfo.apiKey}/configs`).set('Content-Type', 'application/json').query({\n      v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n    }).send({\n      context: _objectSpread(_objectSpread({}, this.config.context), {}, {\n        environment: this.config.sendEnvironment === true ? this.getEnvironment() : this.config.sendEnvironment\n      })\n    }).then(({\n      body\n    }) => {\n      this.updateUrls(body);\n      this.configReady = true;\n      return body.config;\n    }).catch(error => {\n      if (error.status === 404) {\n        throw new _errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_11__[\"default\"]();\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    });\n  }\n\n  async getConversation() {\n    if (!this.hasConversation()) {\n      return null;\n    }\n\n    try {\n      const {\n        body\n      } = await superagent__WEBPACK_IMPORTED_MODULE_1___default().get(`${this.getUrlPrefix('http')}${this.URLS.history}`).set('Authorization', `Bearer ${this.getAccessToken()}`).query({\n        v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n      });\n      this.updateUrls(body);\n      const {\n        messages,\n        participants,\n        activeServiceSessionId,\n        activeServiceSettings,\n        serviceData,\n        ui,\n        translation\n      } = body.history;\n      return {\n        events: messages.map(([type, msg]) => {\n          return {\n            type,\n            payload: _objectSpread(_objectSpread({}, msg), {}, {\n              type: type === 'participant' ? type : msg.type\n            })\n          };\n        }),\n        participants,\n        activeServiceSessionId,\n        activeServiceSettings,\n        serviceData,\n        resumeConversationPrompt: ui ? Boolean(ui.resumeConversationPrompt) : false,\n        translation\n      };\n    } catch (error) {\n      if (error.status === 401) {\n        throw new _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_13__[\"default\"](error);\n      }\n\n      if (error.status === 404) {\n        throw new _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_10__[\"default\"](error);\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  async connect() {\n    this.connected = false;\n    let conversationInitialState = null;\n\n    if (!this.hasConversation()) {\n      conversationInitialState = await this.createConversation();\n    }\n\n    this.conversationProducer = new _producer__WEBPACK_IMPORTED_MODULE_8__[\"default\"](`${this.getUrlPrefix('ws')}${this.URLS.socket}`, this.config.context.channelName, this.getChannelTopic(), this.getAccessToken());\n    this.internalProducer.emit(xstream__WEBPACK_IMPORTED_MODULE_0___default().create(this.conversationProducer)); // Send environment\n\n    if (this.config.sendEnvironment) {\n      this.send('context', {\n        environment: this.config.sendEnvironment === true ? this.getEnvironment() : this.config.sendEnvironment\n      }, false);\n    }\n\n    return conversationInitialState;\n  }\n\n  uploadFile(file, progressCallback, successCallback, errorCallback) {\n    const formData = new FormData();\n    formData.append('upload', file);\n    const req = superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}${this.URLS.uploads}`).set('Authorization', `Bearer ${this.getAccessToken()}`).send(formData);\n    req.on('progress', function (e) {\n      const {\n        direction,\n        percent\n      } = e;\n\n      if (direction === 'upload' && typeof progressCallback === 'function') {\n        progressCallback(percent);\n      }\n    });\n    req.then(uploadResponse => {\n      if (successCallback) {\n        successCallback(uploadResponse);\n      }\n    }).catch(err => {\n      if (errorCallback) {\n        errorCallback(err.response);\n      } else {\n        throw err;\n      }\n    });\n    return req;\n  }\n\n  getConversationIntitialState() {\n    return superagent__WEBPACK_IMPORTED_MODULE_1___default().get(`${this.getUrlPrefix('http')}${this.getConversationUrl()}`).set('Authorization', `Bearer ${this.getAccessToken()}`).query({\n      v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n    }).then(({\n      body\n    }) => {\n      this.updateUrls(body);\n      return (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.omit)(body.conversation, ['accessToken', 'channelTopic']);\n    }).catch(error => {\n      if (error.status === 401) {\n        throw new _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_13__[\"default\"](error);\n      }\n\n      if (error.status === 404) {\n        throw new _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_10__[\"default\"](error);\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    });\n  }\n\n  async getTranslations(locale) {\n    try {\n      const url = `${this.getUrlPrefix('http')}${this.URLS.translations}`.replace('{version}', String(TRANSLATIONS_VERSION)).replace('{locale}', locale);\n      const request = superagent__WEBPACK_IMPORTED_MODULE_1___default().get(url);\n      const {\n        body\n      } = await request;\n      return body.translations;\n    } catch (error) {\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  send(command, payload, waitForReady = true) {\n    if (!this.connected || waitForReady && !this.ready) {\n      // Wait for connection\n      this.connection$.filter(e => waitForReady ? e.connected && e.ready : e.connected).take(1).subscribe({\n        next: () => this.send(command, payload, waitForReady)\n      });\n      return;\n    }\n\n    log('[SEND]', command, payload);\n    this.conversationProducer.push(command, buildPayload(command, payload), 10000);\n  }\n\n  sendContext(context = {}) {\n    const {\n      locale,\n      variables\n    } = context;\n    const payload = {};\n\n    if (locale) {\n      if (typeof locale !== 'string') {\n        throw new Error('Locale must be a string');\n      }\n\n      payload.locale = locale;\n    }\n\n    if (variables) {\n      if (typeof variables !== 'object') {\n        throw new Error('Variables must be an object');\n      }\n\n      payload.variables = variables;\n    } // If we have empty context don't send context message\n\n\n    if (Object.keys(payload).length === 0 && payload.constructor === Object) {\n      return;\n    }\n\n    this.send('context', payload, false);\n  }\n\n  stream() {\n    return this.internal$.filter(event => event.type !== 'connection');\n  }\n\n  getEnvironment() {\n    return {\n      clientName: \"@seamly/web-ui\",\n      clientVariant: this.layoutMode,\n      clientVersion: \"20.4.0\",\n      currentUrl: window.location.toString(),\n      screenResolution: `${window.screen.width}x${window.screen.height}`,\n      timezone: getTimeZone(),\n      userAgent: navigator.userAgent\n    };\n  }\n\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/index.js?");
 
 /***/ }),
 
@@ -784,7 +784,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ stateReducer)\n/* harmony export */ });\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n// Legacy state reducer. Do not add new features here but extract/create new reducers as needed\n\n\n\nconst initialState = {\n  events: [],\n  initialState: {},\n  unreadEvents: 0,\n  isLoading: false,\n  idleDetachCountdown: {\n    hasCountdown: false,\n    isActive: false\n  },\n  resumeConversationPrompt: false,\n  serviceInfo: {\n    activeServiceSessionId: ''\n  },\n  participantInfo: {\n    participants: {},\n    currentAgent: ''\n  },\n  headerTitles: {\n    title: null,\n    subTitle: ''\n  },\n  historyLoaded: false,\n  skiplinkTargetId: (0,lib_id__WEBPACK_IMPORTED_MODULE_0__.randomId)(),\n  optionsButtonId: (0,lib_id__WEBPACK_IMPORTED_MODULE_0__.randomId)(),\n  headerCollapseButtonId: (0,lib_id__WEBPACK_IMPORTED_MODULE_0__.randomId)(),\n  serviceData: {},\n  options: {\n    features: {},\n    panelActive: false,\n    optionActive: '',\n    userSelectedOptions: {}\n  },\n  showFileUpload: false,\n  currentUploads: [],\n  entryMeta: {\n    default: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.entryTypes.text,\n    active: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.entryTypes.text,\n    userSelected: null,\n    blockAutoEntrySwitch: false,\n    options: {},\n    optionsOverride: {}\n  },\n  seamlyContainerElement: null\n};\nfunction stateReducer(state = initialState, action) {\n  if (action.type === String(domains_app_actions__WEBPACK_IMPORTED_MODULE_2__.initialize.pending)) {\n    return initialState;\n  }\n\n  return (0,ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyStateReducer)(state, action);\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/store/state-reducer.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ stateReducer)\n/* harmony export */ });\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n// Legacy state reducer. Do not add new features here but extract/create new reducers as needed\n\n\n\nconst initialState = {\n  events: [],\n  initialState: {},\n  unreadEvents: 0,\n  loadedImageEventIds: [],\n  isLoading: false,\n  idleDetachCountdown: {\n    hasCountdown: false,\n    isActive: false\n  },\n  resumeConversationPrompt: false,\n  serviceInfo: {\n    activeServiceSessionId: ''\n  },\n  participantInfo: {\n    participants: {},\n    currentAgent: ''\n  },\n  headerTitles: {\n    title: null,\n    subTitle: ''\n  },\n  historyLoaded: false,\n  skiplinkTargetId: (0,lib_id__WEBPACK_IMPORTED_MODULE_0__.randomId)(),\n  optionsButtonId: (0,lib_id__WEBPACK_IMPORTED_MODULE_0__.randomId)(),\n  headerCollapseButtonId: (0,lib_id__WEBPACK_IMPORTED_MODULE_0__.randomId)(),\n  serviceData: {},\n  options: {\n    features: {},\n    panelActive: false,\n    optionActive: '',\n    userSelectedOptions: {}\n  },\n  showFileUpload: false,\n  currentUploads: [],\n  entryMeta: {\n    default: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.entryTypes.text,\n    active: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.entryTypes.text,\n    userSelected: null,\n    blockAutoEntrySwitch: false,\n    options: {},\n    optionsOverride: {}\n  },\n  seamlyContainerElement: null\n};\nfunction stateReducer(state = initialState, action) {\n  if (action.type === String(domains_app_actions__WEBPACK_IMPORTED_MODULE_2__.initialize.pending)) {\n    return initialState;\n  }\n\n  return (0,ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyStateReducer)(state, action);\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/store/state-reducer.js?");
 
 /***/ }),
 
@@ -1200,7 +1200,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var ui_components_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/layout/privacy-disclaimer */ \"./src/javascripts/ui/components/layout/privacy-disclaimer.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _event_event__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./event/event */ \"./src/javascripts/ui/components/conversation/event/event.js\");\n/* harmony import */ var _loader__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./loader */ \"./src/javascripts/ui/components/conversation/loader.js\");\n/* harmony import */ var _component_filter__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./component-filter */ \"./src/javascripts/ui/components/conversation/component-filter.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst Conversation = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const appBodyContainer = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const events = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useEvents)();\n  const isLoading = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyIsLoading)();\n  const {\n    isOpen\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_6__.useVisibility)();\n  const skiplinkTargetId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplink)();\n  const focusSkiplinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplinkTargetFocusing)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    window.requestAnimationFrame(() => {\n      if (appBodyContainer.current) {\n        appBodyContainer.current.scrollTop = appBodyContainer.current.scrollHeight;\n      }\n    });\n  }, [events, isLoading, isOpen]);\n\n  const renderEvents = () => {\n    let prevParticipant = null;\n    return events.map(event => {\n      const {\n        type,\n        payload\n      } = event;\n      const {\n        participant,\n        fromClient\n      } = payload;\n      let participantChanged = false;\n\n      if (type !== 'participant') {\n        const currentParticipant = fromClient ? 'seamly-client-participant' : participant;\n\n        if (event.type !== 'info' && prevParticipant !== currentParticipant) {\n          participantChanged = true;\n        }\n\n        prevParticipant = currentParticipant;\n      }\n\n      return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_event_event__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n        event: event,\n        newParticipant: participantChanged\n      }, event.payload.id);\n    });\n  };\n\n  const onClickHandler = e => {\n    e.preventDefault();\n    focusSkiplinkTarget();\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.Fragment, {\n    children: [isOpen && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"a\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('skip-link'),\n      href: `#${skiplinkTargetId}`,\n      onClick: onClickHandler,\n      children: t('skiplinkText')\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('chat__body'),\n      ref: appBodyContainer,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('conversation__container'),\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"ol\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('conversation'),\n          children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_component_filter__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n            children: renderEvents()\n          }), isLoading && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_loader__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {})]\n        })]\n      })\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Conversation);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/conversation.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var ui_components_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/layout/privacy-disclaimer */ \"./src/javascripts/ui/components/layout/privacy-disclaimer.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _event_event__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./event/event */ \"./src/javascripts/ui/components/conversation/event/event.js\");\n/* harmony import */ var _loader__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./loader */ \"./src/javascripts/ui/components/conversation/loader.js\");\n/* harmony import */ var _component_filter__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./component-filter */ \"./src/javascripts/ui/components/conversation/component-filter.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst Conversation = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const chatBodyContainer = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const events = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useEvents)();\n  const isLoading = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyIsLoading)();\n  const {\n    isOpen\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_6__.useVisibility)();\n  const skiplinkTargetId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplink)();\n  const focusSkiplinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplinkTargetFocusing)();\n  const loadedImageEventIds = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useLoadedImageEventIds)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const containerElement = chatBodyContainer.current;\n\n    if (containerElement) {\n      containerElement.scrollTop = containerElement.scrollHeight;\n    }\n  }, [events, isLoading, isOpen, loadedImageEventIds]);\n\n  const renderEvents = () => {\n    let prevParticipant = null;\n    return events.map(event => {\n      const {\n        type,\n        payload\n      } = event;\n      const {\n        participant,\n        fromClient\n      } = payload;\n      let participantChanged = false;\n\n      if (type !== 'participant') {\n        const currentParticipant = fromClient ? 'seamly-client-participant' : participant;\n\n        if (event.type !== 'info' && prevParticipant !== currentParticipant) {\n          participantChanged = true;\n        }\n\n        prevParticipant = currentParticipant;\n      }\n\n      return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_event_event__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n        event: event,\n        newParticipant: participantChanged\n      }, event.payload.id);\n    });\n  };\n\n  const onClickHandler = e => {\n    e.preventDefault();\n    focusSkiplinkTarget();\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.Fragment, {\n    children: [isOpen && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"a\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('skip-link'),\n      href: `#${skiplinkTargetId}`,\n      onClick: onClickHandler,\n      children: t('skiplinkText')\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('chat__body'),\n      ref: chatBodyContainer,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('conversation__container'),\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"ol\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('conversation'),\n          children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_component_filter__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n            children: renderEvents()\n          }), isLoading && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_loader__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {})]\n        })]\n      })\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Conversation);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/conversation.js?");
 
 /***/ }),
 
@@ -1442,7 +1442,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _image_lightbox__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./image-lightbox */ \"./src/javascripts/ui/components/conversation/event/image-lightbox.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);\nconst _excluded = [\"event\", \"descriptorId\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\nconst Image = _ref => {\n  let {\n    event,\n    descriptorId\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const [body] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_2__.useTranslatedEventData)(event);\n  const {\n    description,\n    url,\n    isZoomable\n  } = body;\n  const [showLighbox, setShowLightbox] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_1__[\"default\"], _objectSpread(_objectSpread({\n    event: event,\n    type: \"image\"\n  }, props), {}, {\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(\"img\", {\n      src: url,\n      id: descriptorId,\n      alt: description,\n      onLoad: () => {\n        setShowLightbox(true);\n      }\n    }), isZoomable && showLighbox && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_image_lightbox__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n      description: description,\n      url: url\n    })]\n  }));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Image);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/image.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _image_lightbox__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./image-lightbox */ \"./src/javascripts/ui/components/conversation/event/image-lightbox.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__);\nconst _excluded = [\"event\", \"descriptorId\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\nconst {\n  SET_LOADED_IMAGE_EVENT_IDS\n} = _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__.seamlyActions;\n\nconst Image = _ref => {\n  let {\n    event,\n    descriptorId\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const [body] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_2__.useTranslatedEventData)(event);\n  const {\n    description,\n    url,\n    isZoomable\n  } = body;\n  const [showLighbox, setShowLightbox] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_3__.useStoreDispatch)();\n\n  const handleOnLoad = () => {\n    dispatch({\n      type: SET_LOADED_IMAGE_EVENT_IDS,\n      eventId: event.payload.id\n    });\n    setShowLightbox(true);\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_1__[\"default\"], _objectSpread(_objectSpread({\n    event: event,\n    type: \"image\"\n  }, props), {}, {\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(\"img\", {\n      src: url,\n      id: descriptorId,\n      alt: description,\n      onLoad: handleOnLoad\n    }), isZoomable && showLighbox && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_image_lightbox__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n      description: description,\n      url: url\n    })]\n  }));\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Image);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/image.js?");
 
 /***/ }),
 
@@ -1739,7 +1739,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ TextEntryForm)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var domains_forms__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var ui_components_form_controls_form__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/form-controls/form */ \"./src/javascripts/ui/components/form-controls/form.js\");\n/* harmony import */ var ui_components_form_controls_input__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/components/form-controls/input */ \"./src/javascripts/ui/components/form-controls/input.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./hooks */ \"./src/javascripts/ui/components/entry/text-entry/hooks.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__);\n\n\n\n\n\n\n\n\n\n\n\nfunction TextEntryForm({\n  controlName,\n  skipLinkId\n}) {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_7__.useI18n)();\n  const {\n    sendAssertive\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useLiveRegion)();\n  const {\n    emitEvent\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyCommands)();\n  const handleKeyUp = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyTyping)();\n  const {\n    setBlockAutoEntrySwitch\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyEntry)(); // TODO: Standardize the validation on form fields\n\n  const {\n    hasCharacterLimit,\n    characterLimit,\n    reachedCharacterWarning,\n    reachedCharacterLimit,\n    remainingChars\n  } = (0,_hooks__WEBPACK_IMPORTED_MODULE_8__.useCharacterLimit)(controlName);\n  const [{\n    value\n  }] = (0,domains_forms__WEBPACK_IMPORTED_MODULE_4__.useFormControl)(controlName);\n  const hasValue = !!value;\n  const handleFocus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    if (reachedCharacterWarning) {\n      sendAssertive(t('input.srCharacterLimitText', {\n        limit: remainingChars\n      }));\n    }\n\n    emitEvent('ui.inputFocus');\n  }, [t, sendAssertive, reachedCharacterWarning, remainingChars, emitEvent]);\n  const placeholder = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => t('input.inputPlaceholder', {\n    hasLimit: hasCharacterLimit,\n    limit: hasCharacterLimit ? characterLimit : null\n  }), [t, hasCharacterLimit, characterLimit]);\n  const labelText = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => t('input.inputLabel', {\n    hasLimit: hasCharacterLimit,\n    limit: hasCharacterLimit ? characterLimit : null\n  }), [t, hasCharacterLimit, characterLimit]); // When the input holds a value, the component should be blocked from switching\n  // to file upload form.\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n    setBlockAutoEntrySwitch(hasValue);\n    return () => {\n      setBlockAutoEntrySwitch(false);\n    };\n  }, [setBlockAutoEntrySwitch, hasValue]);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(ui_components_form_controls_form__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('entry-form'),\n    disableValidationClasses: true,\n    noValidate: \"true\",\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(['input--text__container', ...(reachedCharacterWarning && !reachedCharacterLimit ? ['character-warning'] : []), ...(reachedCharacterLimit ? ['character-exceeded'] : [])]),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_form_controls_input__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n        id: skipLinkId,\n        type: \"text\",\n        name: controlName,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('input__text'),\n        autocomplete: \"off\",\n        placeholder: placeholder,\n        labelText: labelText,\n        labelClass: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('visually-hidden'),\n        \"aria-invalid\": hasCharacterLimit ? reachedCharacterLimit : null,\n        onKeyUp: handleKeyUp,\n        onFocus: handleFocus\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('character-count'),\n        children: reachedCharacterWarning && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n          children: remainingChars\n        })\n      })]\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"button\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'input__submit'),\n      type: \"submit\",\n      \"aria-disabled\": !hasValue || reachedCharacterLimit ? 'true' : null,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        name: \"send\",\n        size: \"32\",\n        alt: t('input.sendMessage')\n      })\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/text-entry/text-entry-form.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ TextEntryForm)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var domains_forms__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var ui_components_form_controls_form__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/form-controls/form */ \"./src/javascripts/ui/components/form-controls/form.js\");\n/* harmony import */ var ui_components_form_controls_input__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/components/form-controls/input */ \"./src/javascripts/ui/components/form-controls/input.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./hooks */ \"./src/javascripts/ui/components/entry/text-entry/hooks.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__);\n\n\n\n\n\n\n\n\n\n\n\nfunction TextEntryForm({\n  controlName,\n  skipLinkId\n}) {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_7__.useI18n)();\n  const {\n    sendAssertive\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useLiveRegion)();\n  const {\n    emitEvent\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyCommands)();\n  const handleKeyUp = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyTyping)();\n  const {\n    setBlockAutoEntrySwitch\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyEntry)(); // TODO: Standardize the validation on form fields\n\n  const {\n    hasCharacterLimit,\n    characterLimit,\n    reachedCharacterWarning,\n    reachedCharacterLimit,\n    remainingChars\n  } = (0,_hooks__WEBPACK_IMPORTED_MODULE_8__.useCharacterLimit)(controlName);\n  const [{\n    value\n  }] = (0,domains_forms__WEBPACK_IMPORTED_MODULE_4__.useFormControl)(controlName);\n  const hasValue = !!value;\n  const handleFocus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    if (reachedCharacterWarning) {\n      sendAssertive(t('input.srCharacterLimitText', {\n        limit: remainingChars\n      }));\n    }\n\n    emitEvent('ui.inputFocus');\n  }, [t, sendAssertive, reachedCharacterWarning, remainingChars, emitEvent]);\n  const placeholder = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => t('input.inputPlaceholder', {\n    hasLimit: hasCharacterLimit,\n    limit: hasCharacterLimit ? characterLimit : null\n  }), [t, hasCharacterLimit, characterLimit]);\n  const labelText = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => t('input.inputLabel', {\n    hasLimit: hasCharacterLimit,\n    limit: hasCharacterLimit ? characterLimit : null\n  }), [t, hasCharacterLimit, characterLimit]); // When the input holds a value, the component should be blocked from switching\n  // to file upload form.\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n    setBlockAutoEntrySwitch(hasValue);\n    return () => {\n      setBlockAutoEntrySwitch(false);\n    };\n  }, [setBlockAutoEntrySwitch, hasValue]);\n\n  const handlePointerDown = event => {\n    // When a message is submitted, the keyboard should be prevented from closing on mobile devices\n    event.preventDefault();\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(ui_components_form_controls_form__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('entry-form'),\n    disableValidationClasses: true,\n    noValidate: \"true\",\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(['input--text__container', ...(reachedCharacterWarning && !reachedCharacterLimit ? ['character-warning'] : []), ...(reachedCharacterLimit ? ['character-exceeded'] : [])]),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_form_controls_input__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n        id: skipLinkId,\n        type: \"text\",\n        name: controlName,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('input__text'),\n        autocomplete: \"off\",\n        placeholder: placeholder,\n        labelText: labelText,\n        labelClass: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('visually-hidden'),\n        \"aria-invalid\": hasCharacterLimit ? reachedCharacterLimit : null,\n        onKeyUp: handleKeyUp,\n        onFocus: handleFocus\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('character-count'),\n        children: reachedCharacterWarning && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n          children: remainingChars\n        })\n      })]\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"button\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('button', 'input__submit'),\n      type: \"submit\",\n      onPointerDown: handlePointerDown,\n      \"aria-disabled\": !hasValue || reachedCharacterLimit ? 'true' : null,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n        name: \"send\",\n        size: \"32\",\n        alt: t('input.sendMessage')\n      })\n    })]\n  });\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/entry/text-entry/text-entry-form.js?");
 
 /***/ }),
 
@@ -2289,7 +2289,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"selectEvents\": () => (/* binding */ selectEvents),\n/* harmony export */   \"selectEventsWithSuggestion\": () => (/* binding */ selectEventsWithSuggestion),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState),\n/* harmony export */   \"useEntryTextLimit\": () => (/* binding */ useEntryTextLimit),\n/* harmony export */   \"useEvents\": () => (/* binding */ useEvents),\n/* harmony export */   \"useLastMessageEventId\": () => (/* binding */ useLastMessageEventId),\n/* harmony export */   \"useSeamlyCurrentAgent\": () => (/* binding */ useSeamlyCurrentAgent),\n/* harmony export */   \"useSeamlyHeaderData\": () => (/* binding */ useSeamlyHeaderData),\n/* harmony export */   \"useSeamlyIsHistoryLoaded\": () => (/* binding */ useSeamlyIsHistoryLoaded),\n/* harmony export */   \"useSeamlyIsLoading\": () => (/* binding */ useSeamlyIsLoading),\n/* harmony export */   \"useSeamlyLayoutMode\": () => (/* binding */ useSeamlyLayoutMode),\n/* harmony export */   \"useSeamlyParticipant\": () => (/* binding */ useSeamlyParticipant),\n/* harmony export */   \"useSeamlyServiceData\": () => (/* binding */ useSeamlyServiceData),\n/* harmony export */   \"useSeamlyServiceInfo\": () => (/* binding */ useSeamlyServiceInfo),\n/* harmony export */   \"useSeamlyStateContext\": () => (/* binding */ useSeamlyStateContext),\n/* harmony export */   \"useSeamlyUnreadCount\": () => (/* binding */ useSeamlyUnreadCount),\n/* harmony export */   \"useSkiplink\": () => (/* binding */ useSkiplink)\n/* harmony export */ });\n/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! reselect */ \"./node_modules/reselect/es/index.js\");\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/selectors */ \"./src/javascripts/domains/config/selectors.js\");\n/* harmony import */ var domains_app_selectors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/app/selectors */ \"./src/javascripts/domains/app/selectors.js\");\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\nconst selectState = state => state.state;\nconst useSeamlyStateContext = () => (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(selectState);\nconst selectEventsWithSuggestion = (0,reselect__WEBPACK_IMPORTED_MODULE_5__.createSelector)(selectState, domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__.selectConfig, domains_app_selectors__WEBPACK_IMPORTED_MODULE_3__.selectUserHasResponded, ({\n  events,\n  serviceData\n}, config, userHasResponded) => {\n  if (userHasResponded || config.layoutMode === 'inline' || !serviceData.suggestion || !serviceData.suggestion?.body.length) {\n    return events;\n  }\n\n  const suggestionsEvent = {\n    type: 'service_data',\n    payload: serviceData.suggestion\n  };\n  return [...events, suggestionsEvent];\n});\nconst selectEvents = (0,reselect__WEBPACK_IMPORTED_MODULE_5__.createSelector)(selectEventsWithSuggestion, domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__.selectConfig, (events, config) => {\n  const {\n    enabled,\n    threshold\n  } = config?.messages?.timeIndicator ?? {};\n\n  if (!enabled) {\n    return events;\n  }\n\n  const mappedEvents = [];\n  let previousEvent = null;\n  events.forEach((event, idx) => {\n    // always add timeIndicator to first message\n    if (idx === 0) {\n      mappedEvents.push(_objectSpread(_objectSpread({}, event), {}, {\n        timeIndicator: event.payload.occurredAt\n      })); // else check if diff is greater than threshold\n    } else {\n      const timeIndicator = previousEvent && (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__.microsecondsToMilliseconds)(event.payload.occurredAt - previousEvent.payload.occurredAt) >= threshold ? event.payload.occurredAt : undefined;\n      mappedEvents.push(_objectSpread(_objectSpread({}, event), {}, {\n        timeIndicator\n      }));\n    }\n\n    previousEvent = event;\n  });\n  return mappedEvents;\n});\nconst useEvents = () => (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(selectEvents, []);\nconst useSeamlyIsLoading = () => useSeamlyStateContext().isLoading;\nconst useSeamlyHeaderData = () => useSeamlyStateContext().headerTitles;\nconst useSeamlyUnreadCount = () => useSeamlyStateContext().unreadEvents;\nconst useSkiplink = () => useSeamlyStateContext().skiplinkTargetId;\nconst useSeamlyParticipant = participantId => useSeamlyStateContext().participantInfo.participants[participantId];\nconst useSeamlyServiceInfo = () => useSeamlyStateContext().serviceInfo;\nconst selectLastMessageEventId = (0,reselect__WEBPACK_IMPORTED_MODULE_5__.createSelector)(selectEvents, events => {\n  const filteredEvents = events.filter(event => event.type === 'message');\n  return filteredEvents[filteredEvents.length - 1]?.payload.id;\n});\nconst useLastMessageEventId = () => (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(selectLastMessageEventId);\nconst useSeamlyIsHistoryLoaded = () => useSeamlyStateContext().historyLoaded;\nconst useSeamlyCurrentAgent = () => {\n  const {\n    participants,\n    currentAgent\n  } = useSeamlyStateContext().participantInfo;\n  return currentAgent ? participants[currentAgent] : null;\n};\nconst useSeamlyServiceData = key => useSeamlyStateContext().serviceData[key];\nconst useEntryTextLimit = () => {\n  const {\n    entryMeta: {\n      options: {\n        text\n      }\n    }\n  } = useSeamlyStateContext();\n  const {\n    limit\n  } = text || {};\n  return {\n    hasLimit: limit != null,\n    limit: limit != null ? limit : null\n  };\n};\nconst useSeamlyLayoutMode = () => {\n  const {\n    layoutMode\n  } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_4__.useConfig)();\n  return {\n    isInline: layoutMode === 'inline',\n    isWindow: layoutMode === 'window',\n    isResolving: !layoutMode\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/seamly-state-hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"selectEvents\": () => (/* binding */ selectEvents),\n/* harmony export */   \"selectEventsWithSuggestion\": () => (/* binding */ selectEventsWithSuggestion),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState),\n/* harmony export */   \"useEntryTextLimit\": () => (/* binding */ useEntryTextLimit),\n/* harmony export */   \"useEvents\": () => (/* binding */ useEvents),\n/* harmony export */   \"useLastMessageEventId\": () => (/* binding */ useLastMessageEventId),\n/* harmony export */   \"useLoadedImageEventIds\": () => (/* binding */ useLoadedImageEventIds),\n/* harmony export */   \"useSeamlyCurrentAgent\": () => (/* binding */ useSeamlyCurrentAgent),\n/* harmony export */   \"useSeamlyHeaderData\": () => (/* binding */ useSeamlyHeaderData),\n/* harmony export */   \"useSeamlyIsHistoryLoaded\": () => (/* binding */ useSeamlyIsHistoryLoaded),\n/* harmony export */   \"useSeamlyIsLoading\": () => (/* binding */ useSeamlyIsLoading),\n/* harmony export */   \"useSeamlyLayoutMode\": () => (/* binding */ useSeamlyLayoutMode),\n/* harmony export */   \"useSeamlyParticipant\": () => (/* binding */ useSeamlyParticipant),\n/* harmony export */   \"useSeamlyServiceData\": () => (/* binding */ useSeamlyServiceData),\n/* harmony export */   \"useSeamlyServiceInfo\": () => (/* binding */ useSeamlyServiceInfo),\n/* harmony export */   \"useSeamlyStateContext\": () => (/* binding */ useSeamlyStateContext),\n/* harmony export */   \"useSeamlyUnreadCount\": () => (/* binding */ useSeamlyUnreadCount),\n/* harmony export */   \"useSkiplink\": () => (/* binding */ useSkiplink)\n/* harmony export */ });\n/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! reselect */ \"./node_modules/reselect/es/index.js\");\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/selectors */ \"./src/javascripts/domains/config/selectors.js\");\n/* harmony import */ var domains_app_selectors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/app/selectors */ \"./src/javascripts/domains/app/selectors.js\");\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\nconst selectState = state => state.state;\nconst useSeamlyStateContext = () => (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(selectState);\nconst selectEventsWithSuggestion = (0,reselect__WEBPACK_IMPORTED_MODULE_5__.createSelector)(selectState, domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__.selectConfig, domains_app_selectors__WEBPACK_IMPORTED_MODULE_3__.selectUserHasResponded, ({\n  events,\n  serviceData\n}, config, userHasResponded) => {\n  if (userHasResponded || config.layoutMode === 'inline' || !serviceData.suggestion || !serviceData.suggestion?.body.length) {\n    return events;\n  }\n\n  const suggestionsEvent = {\n    type: 'service_data',\n    payload: serviceData.suggestion\n  };\n  return [...events, suggestionsEvent];\n});\nconst selectEvents = (0,reselect__WEBPACK_IMPORTED_MODULE_5__.createSelector)(selectEventsWithSuggestion, domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__.selectConfig, (events, config) => {\n  const {\n    enabled,\n    threshold\n  } = config?.messages?.timeIndicator ?? {};\n\n  if (!enabled) {\n    return events;\n  }\n\n  const mappedEvents = [];\n  let previousEvent = null;\n  events.forEach((event, idx) => {\n    // always add timeIndicator to first message\n    if (idx === 0) {\n      mappedEvents.push(_objectSpread(_objectSpread({}, event), {}, {\n        timeIndicator: event.payload.occurredAt\n      })); // else check if diff is greater than threshold\n    } else {\n      const timeIndicator = previousEvent && (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__.microsecondsToMilliseconds)(event.payload.occurredAt - previousEvent.payload.occurredAt) >= threshold ? event.payload.occurredAt : undefined;\n      mappedEvents.push(_objectSpread(_objectSpread({}, event), {}, {\n        timeIndicator\n      }));\n    }\n\n    previousEvent = event;\n  });\n  return mappedEvents;\n});\nconst useEvents = () => (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(selectEvents, []);\nconst useSeamlyIsLoading = () => useSeamlyStateContext().isLoading;\nconst useSeamlyHeaderData = () => useSeamlyStateContext().headerTitles;\nconst useSeamlyUnreadCount = () => useSeamlyStateContext().unreadEvents;\nconst useLoadedImageEventIds = () => useSeamlyStateContext().loadedImageEventIds;\nconst useSkiplink = () => useSeamlyStateContext().skiplinkTargetId;\nconst useSeamlyParticipant = participantId => useSeamlyStateContext().participantInfo.participants[participantId];\nconst useSeamlyServiceInfo = () => useSeamlyStateContext().serviceInfo;\nconst selectLastMessageEventId = (0,reselect__WEBPACK_IMPORTED_MODULE_5__.createSelector)(selectEvents, events => {\n  const filteredEvents = events.filter(event => event.type === 'message');\n  return filteredEvents[filteredEvents.length - 1]?.payload.id;\n});\nconst useLastMessageEventId = () => (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(selectLastMessageEventId);\nconst useSeamlyIsHistoryLoaded = () => useSeamlyStateContext().historyLoaded;\nconst useSeamlyCurrentAgent = () => {\n  const {\n    participants,\n    currentAgent\n  } = useSeamlyStateContext().participantInfo;\n  return currentAgent ? participants[currentAgent] : null;\n};\nconst useSeamlyServiceData = key => useSeamlyStateContext().serviceData[key];\nconst useEntryTextLimit = () => {\n  const {\n    entryMeta: {\n      options: {\n        text\n      }\n    }\n  } = useSeamlyStateContext();\n  const {\n    limit\n  } = text || {};\n  return {\n    hasLimit: limit != null,\n    limit: limit != null ? limit : null\n  };\n};\nconst useSeamlyLayoutMode = () => {\n  const {\n    layoutMode\n  } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_4__.useConfig)();\n  return {\n    isInline: layoutMode === 'inline',\n    isWindow: layoutMode === 'window',\n    isResolving: !layoutMode\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/seamly-state-hooks.js?");
 
 /***/ }),
 
@@ -2432,7 +2432,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"actionTypes\": () => (/* binding */ actionTypes),\n/* harmony export */   \"ariaLiveLevels\": () => (/* binding */ ariaLiveLevels),\n/* harmony export */   \"cardTypes\": () => (/* binding */ cardTypes),\n/* harmony export */   \"dismissTypes\": () => (/* binding */ dismissTypes),\n/* harmony export */   \"dividerKeys\": () => (/* binding */ dividerKeys),\n/* harmony export */   \"entryTypes\": () => (/* binding */ entryTypes),\n/* harmony export */   \"eventTypes\": () => (/* binding */ eventTypes),\n/* harmony export */   \"featureKeys\": () => (/* binding */ featureKeys),\n/* harmony export */   \"isUnreadMessage\": () => (/* binding */ isUnreadMessage),\n/* harmony export */   \"mergeHistory\": () => (/* binding */ mergeHistory),\n/* harmony export */   \"payloadTypes\": () => (/* binding */ payloadTypes),\n/* harmony export */   \"readStates\": () => (/* binding */ readStates),\n/* harmony export */   \"seamlyActions\": () => (/* binding */ seamlyActions),\n/* harmony export */   \"seamlyStateReducer\": () => (/* binding */ seamlyStateReducer)\n/* harmony export */ });\n/* harmony import */ var _general_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\nconst eventTypes = {\n  info: 'info',\n  message: 'message',\n  participant: 'participant',\n  system: 'system'\n};\nconst payloadTypes = {\n  choicePrompt: 'choice_prompt',\n  text: 'text',\n  image: 'image',\n  video: 'video',\n  participant: 'participant',\n  divider: 'divider',\n  translation: 'translation',\n  message: 'message',\n  countdown: 'countdown',\n  upload: 'upload',\n  cta: 'cta',\n  splash: 'splash'\n};\nconst entryTypes = {\n  text: 'text',\n  upload: 'upload'\n};\nconst readStates = {\n  received: 'received',\n  read: 'read'\n};\nconst actionTypes = {\n  pickChoice: 'pick_choice',\n  navigate: 'navigate',\n  custom: 'custom',\n  typing: 'typing',\n  read: 'read',\n  detachService: 'detach_service',\n  interactivityUpdate: 'interactivity_update',\n  dismiss: 'dismiss',\n  sendTranscript: 'send_transcript',\n  setTopic: 'set_topic',\n  setTranslation: 'set_translation',\n  clickCta: 'click_cta',\n  clickCard: 'click_card'\n};\nconst dismissTypes = {\n  resumeConversationPrompt: 'resume_conversation_prompt'\n};\nconst ariaLiveLevels = {\n  assertive: 'assertive',\n  polite: 'polite'\n};\nconst dividerKeys = {\n  new_topic: 'newTopic',\n  new_translation: 'newTranslation'\n};\nconst featureKeys = {\n  sendTranscript: 'sendTranscript',\n  typingPeekahead: 'typingPeekahead',\n  uploads: 'uploads'\n};\nconst seamlyActions = {\n  ADD_EVENT: 'ADD_EVENT',\n  CLEAR_EVENTS: 'CLEAR_EVENTS',\n  SET_HISTORY: 'SET_HISTORY',\n  SET_EVENTS_READ: 'SET_EVENTS_READ',\n  ACK_EVENT: 'ACK_EVENT',\n  SET_IS_LOADING: 'SET_IS_LOADING',\n  CLEAR_PARTICIPANTS: 'CLEAR_PARTICIPANTS',\n  SET_PARTICIPANT: 'SET_PARTICIPANT',\n  SET_HEADER_TITLE: 'SET_HEADER_TITLE',\n  SET_HEADER_SUB_TITLE: 'SET_HEADER_SUB_TITLE',\n  RESET_HISTORY_LOADED_FLAG: 'RESET_HISTORY_LOADED_FLAG',\n  SET_ACTIVE_SERVICE: 'SET_ACTIVE_SERVICE',\n  INIT_IDLE_DETACH_COUNTDOWN: 'INIT_IDLE_DETACH_COUNTDOWN',\n  DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER: 'DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER',\n  STOP_IDLE_DETACH_COUNTDOWN_COUNTER: 'STOP_IDLE_DETACH_COUNTDOWN_COUNTER',\n  CLEAR_IDLE_DETACH_COUNTDOWN: 'CLEAR_IDLE_DETACH_COUNTDOWN',\n  INIT_RESUME_CONVERSATION_PROMPT: 'INIT_RESUME_CONVERSATION_PROMPT',\n  CLEAR_RESUME_CONVERSATION_PROMPT: 'CLEAR_RESUME_CONVERSATION_PROMPT',\n  SET_SERVICE_DATA_ITEM: 'SET_SERVICE_DATA_ITEM',\n  SET_FEATURES: 'SET_FEATURES',\n  SET_FEATURE_ENABLED_STATE: 'SET_FEATURE_ENABLED_STATE',\n  CLEAR_FEATURES: 'CLEAR_FEATURES',\n  SET_INITIAL_STATE: 'SET_INITIAL_STATE',\n  SET_USER_SELECTED_OPTIONS: 'SET_USER_SELECTED_OPTIONS',\n  SET_USER_SELECTED_OPTION: 'SET_USER_SELECTED_OPTION',\n  SHOW_OPTION: 'SHOW_OPTION',\n  HIDE_OPTION: 'HIDE_OPTION',\n  SET_SERVICE_ENTRY_METADATA: 'SET_SERVICE_ENTRY_METADATA',\n  SET_BLOCK_AUTO_ENTRY_SWITCH: 'SET_BLOCK_AUTO_ENTRY_SWITCH',\n  SET_ACTIVE_ENTRY_TYPE: 'SET_ACTIVE_ENTRY_TYPE',\n  SET_USER_ENTRY_TYPE: 'SET_USER_ENTRY_TYPE',\n  REGISTER_UPLOAD: 'REGISTER_UPLOAD',\n  SET_UPLOAD_PROGRESS: 'SET_UPLOAD_PROGRESS',\n  SET_UPLOAD_COMPLETE: 'SET_UPLOAD_COMPLETE',\n  SET_UPLOAD_ERROR: 'SET_UPLOAD_ERROR',\n  CLEAR_UPLOAD: 'CLEAR_UPLOAD',\n  CLEAR_ALL_UPLOADS: 'CLEAR_ALL_UPLOADS',\n  SET_SEAMLY_CONTAINER_ELEMENT: 'SET_SEAMLY_CONTAINER_ELEMENT'\n};\nconst cardTypes = {\n  ask: 'ask',\n  navigate: 'navigate',\n  topic: 'topic'\n};\nconst {\n  ADD_EVENT,\n  CLEAR_EVENTS,\n  SET_HISTORY,\n  SET_EVENTS_READ,\n  ACK_EVENT,\n  SET_IS_LOADING,\n  CLEAR_PARTICIPANTS,\n  SET_PARTICIPANT,\n  SET_HEADER_TITLE,\n  SET_HEADER_SUB_TITLE,\n  RESET_HISTORY_LOADED_FLAG,\n  SET_ACTIVE_SERVICE,\n  INIT_IDLE_DETACH_COUNTDOWN,\n  DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER,\n  STOP_IDLE_DETACH_COUNTDOWN_COUNTER,\n  CLEAR_IDLE_DETACH_COUNTDOWN,\n  INIT_RESUME_CONVERSATION_PROMPT,\n  CLEAR_RESUME_CONVERSATION_PROMPT,\n  SET_SERVICE_DATA_ITEM,\n  SET_FEATURES,\n  SET_FEATURE_ENABLED_STATE,\n  CLEAR_FEATURES,\n  SET_INITIAL_STATE,\n  SET_USER_SELECTED_OPTION,\n  SET_USER_SELECTED_OPTIONS,\n  SHOW_OPTION,\n  HIDE_OPTION,\n  SET_BLOCK_AUTO_ENTRY_SWITCH,\n  SET_USER_ENTRY_TYPE,\n  SET_ACTIVE_ENTRY_TYPE,\n  SET_SERVICE_ENTRY_METADATA,\n  REGISTER_UPLOAD,\n  SET_UPLOAD_PROGRESS,\n  SET_UPLOAD_COMPLETE,\n  SET_UPLOAD_ERROR,\n  CLEAR_UPLOAD,\n  CLEAR_ALL_UPLOADS,\n  SET_SEAMLY_CONTAINER_ELEMENT\n} = seamlyActions;\nconst isUnreadMessage = ({\n  type,\n  payload\n}) => type === eventTypes.message && !payload.fromClient || type === eventTypes.info && payload.type === payloadTypes.text;\n\nconst orderHistory = events => {\n  return events.sort(({\n    payload: {\n      occurredAt: occurredAtA\n    }\n  }, {\n    payload: {\n      occurredAt: occurredAtB\n    }\n  }) => occurredAtA - occurredAtB);\n};\n\nconst mergeHistory = (stateEvents, historyEvents) => {\n  const newHistoryEvents = historyEvents.filter(historyEvent => // Deduplicate the event streams\n  !stateEvents.find(stateEvent => stateEvent.payload.id === historyEvent.payload.id) && // Remove all non displayable participant messages\n  !(historyEvent.type === 'participant' && !historyEvent.payload.participant.introduction)) // Reverse is done here because the server sends the history in the order\n  // newest to oldest. In the case of exactly the same occurredAt timestamps\n  // these messages will be shown in the wrong order if not reversed. For\n  // the normal merging logic there is no added effect.\n  .reverse();\n  return orderHistory([...newHistoryEvents, ...stateEvents]);\n};\n\nconst participantReducer = (state, action) => {\n  switch (action.type) {\n    case CLEAR_PARTICIPANTS:\n      return {\n        participants: {},\n        currentAgent: ''\n      };\n\n    case SET_PARTICIPANT:\n      // TODO: a) Styleguide only! b) Should be removed after styleguide overhaul.\n      if (!state) {\n        return {\n          participants: {},\n          currentAgent: ''\n        };\n      }\n\n      const {\n        participants\n      } = state || {\n        participants: {}\n      };\n      const {\n        id,\n        avatar,\n        name,\n        introduction\n      } = action.participant;\n      const oldParticipant = participants[id];\n\n      const newParticipants = _objectSpread(_objectSpread({}, participants), {}, {\n        [id]: oldParticipant ? _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, oldParticipant), avatar ? {\n          avatar\n        } : {}), name ? {\n          name\n        } : {}), introduction ? {\n          introduction\n        } : {}) : action.participant\n      });\n\n      return _objectSpread(_objectSpread({}, state), {}, {\n        participants: newParticipants,\n        currentAgent: state.currentAgent !== id && !action.fromClient ? id : state.currentAgent\n      });\n\n    default:\n      return state;\n  }\n};\n\nconst headerTitlesReducer = (state, action) => {\n  switch (action.type) {\n    case SET_HEADER_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        title: action.title\n      });\n\n    case SET_HEADER_SUB_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        subTitle: action.title\n      });\n\n    default:\n      return state;\n  }\n};\n\nconst calculateNewEntryMeta = (entryMeta, payload) => {\n  const {\n    entry\n  } = payload;\n  const {\n    blockAutoEntrySwitch\n  } = entryMeta;\n\n  if (!entry) {\n    return _objectSpread(_objectSpread({}, entryMeta), {}, {\n      optionsOverride: {}\n    });\n  }\n\n  const {\n    type,\n    options\n  } = entry;\n  let newActive = entryMeta.active;\n\n  if (!blockAutoEntrySwitch && type !== entryMeta.userSelected) {\n    newActive = type;\n  }\n\n  return _objectSpread(_objectSpread({}, entryMeta), {}, {\n    active: newActive,\n    optionsOverride: _objectSpread(_objectSpread({}, entryMeta.optionsOverride), {}, {\n      [type]: options || {}\n    })\n  });\n};\n\nconst seamlyStateReducer = (state, action) => {\n  switch (action.type) {\n    case ADD_EVENT:\n      const {\n        type: eventType,\n        payload\n      } = action.event;\n      const accountHasUploads = state.options.features.hasOwnProperty(featureKeys.uploads);\n      const newEntryMeta = calculateNewEntryMeta(state.entryMeta, payload);\n\n      let newOptions = _objectSpread({}, state.options); // This enabled override of the service enabled value for uploads.\n      // If a message is sent with entry of type upload it will temporarily\n      // override service value and enable uploads.\n\n\n      if (accountHasUploads && (eventType === eventTypes.message || eventType === eventTypes.participant) && !payload.fromClient) {\n        const {\n          type: entryType\n        } = payload.entry || {};\n        newOptions = _objectSpread(_objectSpread({}, newOptions), {}, {\n          features: _objectSpread(_objectSpread({}, newOptions.features), {}, {\n            uploads: _objectSpread(_objectSpread({}, newOptions.features.uploads), {}, {\n              enabledFromEntry: entryType === entryTypes.upload\n            })\n          })\n        });\n      }\n\n      const incrementUnread = isUnreadMessage(action.event); // We check for duplicated and ignore them as in some error of the websocket\n      // a duplicate join can be active for a while until the server connection\n      // times out.\n\n      const eventExists = state.events.find(e => e.payload.id === payload.id);\n\n      if (eventExists) {\n        return state;\n      }\n\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: !accountHasUploads && newEntryMeta.active === entryTypes.upload ? _objectSpread({}, state.entryMeta) : newEntryMeta,\n        options: newOptions,\n        unreadEvents: incrementUnread ? state.unreadEvents + 1 : state.unreadEvents,\n        events: [...state.events, _objectSpread(_objectSpread({}, action.event), {}, {\n          // The payload spread should be done after adding the message\n          // status to enable overriding the status when setting\n          // event optimistically.\n          payload: _objectSpread(_objectSpread({}, incrementUnread && {\n            messageStatus: payload.fromClient ? readStates.read : readStates.received\n          }), payload)\n        })]\n      });\n\n    case ACK_EVENT:\n      // If any ACKs are sent without transactionID the conversation crashes.\n      // Ensure that this edge case is handled gracefully.\n      if (!action.event.payload.transactionId) {\n        console.warn('ACK received without transaction ID.');\n        return state;\n      }\n\n      const matchedEvent = state.events.find(m => m.payload.transactionId === action.event.payload.transactionId);\n      const {\n        id,\n        occurredAt\n      } = action.event.payload;\n      return matchedEvent ? _objectSpread(_objectSpread({}, state), {}, {\n        events: orderHistory(state.events.map(m => m.payload.id === matchedEvent.payload.id ? _objectSpread(_objectSpread({}, m), {}, {\n          payload: _objectSpread(_objectSpread({}, m.payload), {}, {\n            id,\n            occurredAt\n          })\n        }) : m))\n      }) : state;\n\n    case CLEAR_EVENTS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: 0,\n        events: []\n      });\n\n    case SET_EVENTS_READ:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: 0,\n        events: state.events.map(event => {\n          if (action.ids.indexOf(event.payload.id) !== -1) {\n            return _objectSpread(_objectSpread({}, event), {}, {\n              payload: _objectSpread(_objectSpread({}, event.payload), event.payload.messageStatus === readStates.received && {\n                messageStatus: readStates.read\n              })\n            });\n          }\n\n          return event;\n        })\n      });\n\n    case SET_HISTORY:\n      const {\n        events: history,\n        participants,\n        activeServiceSessionId,\n        activeServiceSettings = {},\n        serviceData,\n        resumeConversationPrompt\n      } = action.history;\n      const events = mergeHistory(state.events, history);\n\n      const mergedParticipants = _objectSpread(_objectSpread({}, state.participantInfo.participants), participants);\n\n      const lastParticipantEvent = events.slice().reverse().find(m => (m.type === 'message' || m.type === 'participant') && !m.payload.fromClient);\n      let lastParticipantId = null;\n\n      if (lastParticipantEvent) {\n        if (lastParticipantEvent.type === 'message') {\n          lastParticipantId = lastParticipantEvent.payload.participant;\n        }\n\n        if (lastParticipantEvent.type === 'participant') {\n          lastParticipantId = lastParticipantEvent.payload.participant.id;\n        }\n      }\n\n      const {\n        entry,\n        uploads\n      } = activeServiceSettings;\n      const historyNewEntryMeta = calculateNewEntryMeta(_objectSpread(_objectSpread(_objectSpread({}, state.entryMeta), entry), {}, {\n        active: entry.default || payloadTypes.text,\n        options: _objectSpread({}, entry && entry.options ? entry.options : {})\n      }), events[events.length - 1].payload);\n\n      let newFeatures = _objectSpread({}, state.options.features);\n\n      const newFeaturesHasUpload = newFeatures.hasOwnProperty(featureKeys.uploads); // Only set uploads if it was initialised by the account config.\n\n      if (newFeaturesHasUpload) {\n        const {\n          payload: lastParticipantEventPayload\n        } = lastParticipantEvent;\n        const {\n          type: entryType\n        } = lastParticipantEventPayload.entry || {};\n        newFeatures = _objectSpread(_objectSpread({}, newFeatures), {}, {\n          uploads: {\n            enabled: !!(uploads && uploads.enabled),\n            enabledFromEntry: entryType === entryTypes.upload\n          }\n        });\n      }\n\n      const returnState = _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: events.filter(event => event.type === 'message' && event.payload.messageStatus === readStates.received).length,\n        events: events.filter(e => e.type !== 'participant' || !!e.payload.participant.introduction),\n        participantInfo: _objectSpread(_objectSpread(_objectSpread({}, state.participantInfo), lastParticipantId ? participantReducer(state.participantInfo, {\n          type: SET_PARTICIPANT,\n          participant: mergedParticipants[lastParticipantId]\n        }) : {}), {}, {\n          participants: mergedParticipants\n        }),\n        historyLoaded: true,\n        serviceInfo: _objectSpread(_objectSpread({}, state.serviceInfo), {}, {\n          activeServiceSessionId\n        }),\n        serviceData: serviceData || {},\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: newFeatures\n        }),\n        entryMeta: !newFeaturesHasUpload && historyNewEntryMeta.active === entryTypes.upload ? _objectSpread({}, state.entryMeta) : historyNewEntryMeta,\n        resumeConversationPrompt: resumeConversationPrompt || false\n      });\n\n      if (lastParticipantId) {\n        returnState.headerTitles = headerTitlesReducer(state.headerTitles, {\n          type: SET_HEADER_SUB_TITLE,\n          title: mergedParticipants[lastParticipantId].name\n        });\n      }\n\n      return returnState;\n\n    case RESET_HISTORY_LOADED_FLAG:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        historyLoaded: false\n      });\n\n    case SET_IS_LOADING:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        isLoading: action.isLoading\n      });\n\n    case INIT_IDLE_DETACH_COUNTDOWN:\n      const {\n        delaySeconds,\n        delayTime\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: {\n          hasCountdown: true,\n          isActive: true,\n          wasStopped: false,\n          count: delaySeconds,\n          remaining: delaySeconds,\n          timer: delayTime\n        }\n      });\n\n    case DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER:\n      const {\n        idleDetachCountdown\n      } = state;\n      const {\n        remaining: prevRemaining\n      } = idleDetachCountdown;\n      const remaining = prevRemaining - 1;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: _objectSpread(_objectSpread({}, state.idleDetachCountdown), {}, {\n          remaining,\n          timer: (0,_general_utils__WEBPACK_IMPORTED_MODULE_0__.getTimeFromSeconds)(remaining)\n        })\n      });\n\n    case STOP_IDLE_DETACH_COUNTDOWN_COUNTER:\n      {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          idleDetachCountdown: _objectSpread(_objectSpread({}, state.idleDetachCountdown), {}, {\n            isActive: false,\n            wasStopped: true\n          })\n        });\n      }\n\n    case CLEAR_IDLE_DETACH_COUNTDOWN:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: {\n          hasCountdown: false,\n          isActive: false\n        }\n      });\n\n    case INIT_RESUME_CONVERSATION_PROMPT:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        resumeConversationPrompt: true\n      });\n\n    case CLEAR_RESUME_CONVERSATION_PROMPT:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        resumeConversationPrompt: false\n      });\n\n    case SET_PARTICIPANT:\n    case CLEAR_PARTICIPANTS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        participantInfo: participantReducer(state.participantInfo, action)\n      });\n\n    case SET_ACTIVE_SERVICE:\n      if (state.serviceInfo.activeServiceSessionId !== action.activeServiceSessionId) {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          serviceInfo: _objectSpread(_objectSpread({}, state.serviceInfo), {}, {\n            activeServiceSessionId: action.activeServiceSessionId\n          })\n        });\n      }\n\n      return state;\n\n    case SET_HEADER_TITLE:\n    case SET_HEADER_SUB_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        headerTitles: headerTitlesReducer(state.headerTitles, action)\n      });\n\n    case SET_INITIAL_STATE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        initialState: action.initialState\n      });\n\n    case SET_SERVICE_DATA_ITEM:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        serviceData: _objectSpread(_objectSpread({}, state.serviceData), {}, {\n          [action.payload.type]: action.payload\n        })\n      });\n\n    case SET_FEATURES:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: action.features\n        })\n      });\n\n    case SET_FEATURE_ENABLED_STATE:\n      return state.options.features.hasOwnProperty(action.key) ? _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: _objectSpread(_objectSpread({}, state.options.features), {}, {\n            [action.key]: _objectSpread(_objectSpread({}, state.options.features[action.key] || {}), {}, {\n              enabled: action.enabled\n            })\n          })\n        })\n      }) : state;\n\n    case CLEAR_FEATURES:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: {}\n        })\n      });\n\n    case SHOW_OPTION:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          panelActive: true,\n          optionActive: action.optionName\n        })\n      });\n\n    case HIDE_OPTION:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          panelActive: false,\n          optionActive: ''\n        })\n      });\n\n    case SET_USER_SELECTED_OPTIONS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          userSelectedOptions: action.options\n        })\n      });\n\n    case SET_USER_SELECTED_OPTION:\n      const {\n        option,\n        value\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          userSelectedOptions: _objectSpread(_objectSpread({}, state.options.userSelectedOptions), {}, {\n            [option]: value\n          })\n        })\n      });\n\n    case SET_BLOCK_AUTO_ENTRY_SWITCH:\n      const {\n        value: blockAutoEntrySwitch\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          blockAutoEntrySwitch\n        })\n      });\n\n    case SET_SERVICE_ENTRY_METADATA:\n      const {\n        entryMeta\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread(_objectSpread({}, state.entryMeta), entryMeta), {}, {\n          active: entryMeta.default,\n          options: _objectSpread({}, entryMeta.options || {}),\n          overrideOptions: {}\n        })\n      });\n\n    case SET_ACTIVE_ENTRY_TYPE:\n      const {\n        entryType: active\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          active\n        })\n      });\n\n    case SET_USER_ENTRY_TYPE:\n      const {\n        entryType: userSelected\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          userSelected\n        })\n      });\n\n    case REGISTER_UPLOAD:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: [...state.currentUploads, {\n          id: action.fileId,\n          name: action.fileName,\n          progress: 1,\n          uploading: true,\n          complete: false,\n          error: '',\n          uploadHandle: action.uploadHandle\n        }]\n      });\n\n    case SET_UPLOAD_PROGRESS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              progress: action.progress,\n              uploading: action.progress !== 100,\n              uploadHandle: action.progress === 100 ? null : fileUpload.uploadHandle\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case SET_UPLOAD_ERROR:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              error: action.errorText,\n              progress: 0,\n              uploading: false,\n              uploadHandle: null\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case SET_UPLOAD_COMPLETE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              complete: true\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case CLEAR_UPLOAD:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.filter(fileUpload => fileUpload.id !== action.fileId)\n      });\n\n    case CLEAR_ALL_UPLOADS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: []\n      });\n\n    case SET_SEAMLY_CONTAINER_ELEMENT:\n      {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          seamlyContainerElement: action.element\n        });\n      }\n\n    default:\n      return state;\n  }\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/utils/seamly-utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"actionTypes\": () => (/* binding */ actionTypes),\n/* harmony export */   \"ariaLiveLevels\": () => (/* binding */ ariaLiveLevels),\n/* harmony export */   \"cardTypes\": () => (/* binding */ cardTypes),\n/* harmony export */   \"dismissTypes\": () => (/* binding */ dismissTypes),\n/* harmony export */   \"dividerKeys\": () => (/* binding */ dividerKeys),\n/* harmony export */   \"entryTypes\": () => (/* binding */ entryTypes),\n/* harmony export */   \"eventTypes\": () => (/* binding */ eventTypes),\n/* harmony export */   \"featureKeys\": () => (/* binding */ featureKeys),\n/* harmony export */   \"isUnreadMessage\": () => (/* binding */ isUnreadMessage),\n/* harmony export */   \"mergeHistory\": () => (/* binding */ mergeHistory),\n/* harmony export */   \"payloadTypes\": () => (/* binding */ payloadTypes),\n/* harmony export */   \"readStates\": () => (/* binding */ readStates),\n/* harmony export */   \"seamlyActions\": () => (/* binding */ seamlyActions),\n/* harmony export */   \"seamlyStateReducer\": () => (/* binding */ seamlyStateReducer)\n/* harmony export */ });\n/* harmony import */ var _general_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\nconst eventTypes = {\n  info: 'info',\n  message: 'message',\n  participant: 'participant',\n  system: 'system'\n};\nconst payloadTypes = {\n  choicePrompt: 'choice_prompt',\n  text: 'text',\n  image: 'image',\n  video: 'video',\n  participant: 'participant',\n  divider: 'divider',\n  translation: 'translation',\n  message: 'message',\n  countdown: 'countdown',\n  upload: 'upload',\n  cta: 'cta',\n  splash: 'splash'\n};\nconst entryTypes = {\n  text: 'text',\n  upload: 'upload'\n};\nconst readStates = {\n  received: 'received',\n  read: 'read'\n};\nconst actionTypes = {\n  pickChoice: 'pick_choice',\n  navigate: 'navigate',\n  custom: 'custom',\n  typing: 'typing',\n  read: 'read',\n  detachService: 'detach_service',\n  interactivityUpdate: 'interactivity_update',\n  dismiss: 'dismiss',\n  sendTranscript: 'send_transcript',\n  setTopic: 'set_topic',\n  setTranslation: 'set_translation',\n  clickCta: 'click_cta',\n  clickCard: 'click_card'\n};\nconst dismissTypes = {\n  resumeConversationPrompt: 'resume_conversation_prompt'\n};\nconst ariaLiveLevels = {\n  assertive: 'assertive',\n  polite: 'polite'\n};\nconst dividerKeys = {\n  new_topic: 'newTopic',\n  new_translation: 'newTranslation'\n};\nconst featureKeys = {\n  sendTranscript: 'sendTranscript',\n  typingPeekahead: 'typingPeekahead',\n  uploads: 'uploads'\n};\nconst seamlyActions = {\n  ADD_EVENT: 'ADD_EVENT',\n  CLEAR_EVENTS: 'CLEAR_EVENTS',\n  SET_HISTORY: 'SET_HISTORY',\n  SET_EVENTS_READ: 'SET_EVENTS_READ',\n  SET_LOADED_IMAGE_EVENT_IDS: 'SET_LOADED_IMAGE_EVENT_IDS',\n  ACK_EVENT: 'ACK_EVENT',\n  SET_IS_LOADING: 'SET_IS_LOADING',\n  CLEAR_PARTICIPANTS: 'CLEAR_PARTICIPANTS',\n  SET_PARTICIPANT: 'SET_PARTICIPANT',\n  SET_HEADER_TITLE: 'SET_HEADER_TITLE',\n  SET_HEADER_SUB_TITLE: 'SET_HEADER_SUB_TITLE',\n  RESET_HISTORY_LOADED_FLAG: 'RESET_HISTORY_LOADED_FLAG',\n  SET_ACTIVE_SERVICE: 'SET_ACTIVE_SERVICE',\n  INIT_IDLE_DETACH_COUNTDOWN: 'INIT_IDLE_DETACH_COUNTDOWN',\n  DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER: 'DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER',\n  STOP_IDLE_DETACH_COUNTDOWN_COUNTER: 'STOP_IDLE_DETACH_COUNTDOWN_COUNTER',\n  CLEAR_IDLE_DETACH_COUNTDOWN: 'CLEAR_IDLE_DETACH_COUNTDOWN',\n  INIT_RESUME_CONVERSATION_PROMPT: 'INIT_RESUME_CONVERSATION_PROMPT',\n  CLEAR_RESUME_CONVERSATION_PROMPT: 'CLEAR_RESUME_CONVERSATION_PROMPT',\n  SET_SERVICE_DATA_ITEM: 'SET_SERVICE_DATA_ITEM',\n  SET_FEATURES: 'SET_FEATURES',\n  SET_FEATURE_ENABLED_STATE: 'SET_FEATURE_ENABLED_STATE',\n  CLEAR_FEATURES: 'CLEAR_FEATURES',\n  SET_INITIAL_STATE: 'SET_INITIAL_STATE',\n  SET_USER_SELECTED_OPTIONS: 'SET_USER_SELECTED_OPTIONS',\n  SET_USER_SELECTED_OPTION: 'SET_USER_SELECTED_OPTION',\n  SHOW_OPTION: 'SHOW_OPTION',\n  HIDE_OPTION: 'HIDE_OPTION',\n  SET_SERVICE_ENTRY_METADATA: 'SET_SERVICE_ENTRY_METADATA',\n  SET_BLOCK_AUTO_ENTRY_SWITCH: 'SET_BLOCK_AUTO_ENTRY_SWITCH',\n  SET_ACTIVE_ENTRY_TYPE: 'SET_ACTIVE_ENTRY_TYPE',\n  SET_USER_ENTRY_TYPE: 'SET_USER_ENTRY_TYPE',\n  REGISTER_UPLOAD: 'REGISTER_UPLOAD',\n  SET_UPLOAD_PROGRESS: 'SET_UPLOAD_PROGRESS',\n  SET_UPLOAD_COMPLETE: 'SET_UPLOAD_COMPLETE',\n  SET_UPLOAD_ERROR: 'SET_UPLOAD_ERROR',\n  CLEAR_UPLOAD: 'CLEAR_UPLOAD',\n  CLEAR_ALL_UPLOADS: 'CLEAR_ALL_UPLOADS',\n  SET_SEAMLY_CONTAINER_ELEMENT: 'SET_SEAMLY_CONTAINER_ELEMENT'\n};\nconst cardTypes = {\n  ask: 'ask',\n  navigate: 'navigate',\n  topic: 'topic'\n};\nconst {\n  ADD_EVENT,\n  CLEAR_EVENTS,\n  SET_HISTORY,\n  SET_EVENTS_READ,\n  SET_LOADED_IMAGE_EVENT_IDS,\n  ACK_EVENT,\n  SET_IS_LOADING,\n  CLEAR_PARTICIPANTS,\n  SET_PARTICIPANT,\n  SET_HEADER_TITLE,\n  SET_HEADER_SUB_TITLE,\n  RESET_HISTORY_LOADED_FLAG,\n  SET_ACTIVE_SERVICE,\n  INIT_IDLE_DETACH_COUNTDOWN,\n  DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER,\n  STOP_IDLE_DETACH_COUNTDOWN_COUNTER,\n  CLEAR_IDLE_DETACH_COUNTDOWN,\n  INIT_RESUME_CONVERSATION_PROMPT,\n  CLEAR_RESUME_CONVERSATION_PROMPT,\n  SET_SERVICE_DATA_ITEM,\n  SET_FEATURES,\n  SET_FEATURE_ENABLED_STATE,\n  CLEAR_FEATURES,\n  SET_INITIAL_STATE,\n  SET_USER_SELECTED_OPTION,\n  SET_USER_SELECTED_OPTIONS,\n  SHOW_OPTION,\n  HIDE_OPTION,\n  SET_BLOCK_AUTO_ENTRY_SWITCH,\n  SET_USER_ENTRY_TYPE,\n  SET_ACTIVE_ENTRY_TYPE,\n  SET_SERVICE_ENTRY_METADATA,\n  REGISTER_UPLOAD,\n  SET_UPLOAD_PROGRESS,\n  SET_UPLOAD_COMPLETE,\n  SET_UPLOAD_ERROR,\n  CLEAR_UPLOAD,\n  CLEAR_ALL_UPLOADS,\n  SET_SEAMLY_CONTAINER_ELEMENT\n} = seamlyActions;\nconst isUnreadMessage = ({\n  type,\n  payload\n}) => type === eventTypes.message && !payload.fromClient || type === eventTypes.info && payload.type === payloadTypes.text;\n\nconst orderHistory = events => {\n  return events.sort(({\n    payload: {\n      occurredAt: occurredAtA\n    }\n  }, {\n    payload: {\n      occurredAt: occurredAtB\n    }\n  }) => occurredAtA - occurredAtB);\n};\n\nconst mergeHistory = (stateEvents, historyEvents) => {\n  const newHistoryEvents = historyEvents.filter(historyEvent => // Deduplicate the event streams\n  !stateEvents.find(stateEvent => stateEvent.payload.id === historyEvent.payload.id) && // Remove all non displayable participant messages\n  !(historyEvent.type === 'participant' && !historyEvent.payload.participant.introduction)) // Reverse is done here because the server sends the history in the order\n  // newest to oldest. In the case of exactly the same occurredAt timestamps\n  // these messages will be shown in the wrong order if not reversed. For\n  // the normal merging logic there is no added effect.\n  .reverse();\n  return orderHistory([...newHistoryEvents, ...stateEvents]);\n};\n\nconst participantReducer = (state, action) => {\n  switch (action.type) {\n    case CLEAR_PARTICIPANTS:\n      return {\n        participants: {},\n        currentAgent: ''\n      };\n\n    case SET_PARTICIPANT:\n      // TODO: a) Styleguide only! b) Should be removed after styleguide overhaul.\n      if (!state) {\n        return {\n          participants: {},\n          currentAgent: ''\n        };\n      }\n\n      const {\n        participants\n      } = state || {\n        participants: {}\n      };\n      const {\n        id,\n        avatar,\n        name,\n        introduction\n      } = action.participant;\n      const oldParticipant = participants[id];\n\n      const newParticipants = _objectSpread(_objectSpread({}, participants), {}, {\n        [id]: oldParticipant ? _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, oldParticipant), avatar ? {\n          avatar\n        } : {}), name ? {\n          name\n        } : {}), introduction ? {\n          introduction\n        } : {}) : action.participant\n      });\n\n      return _objectSpread(_objectSpread({}, state), {}, {\n        participants: newParticipants,\n        currentAgent: state.currentAgent !== id && !action.fromClient ? id : state.currentAgent\n      });\n\n    default:\n      return state;\n  }\n};\n\nconst headerTitlesReducer = (state, action) => {\n  switch (action.type) {\n    case SET_HEADER_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        title: action.title\n      });\n\n    case SET_HEADER_SUB_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        subTitle: action.title\n      });\n\n    default:\n      return state;\n  }\n};\n\nconst calculateNewEntryMeta = (entryMeta, payload) => {\n  const {\n    entry\n  } = payload;\n  const {\n    blockAutoEntrySwitch\n  } = entryMeta;\n\n  if (!entry) {\n    return _objectSpread(_objectSpread({}, entryMeta), {}, {\n      optionsOverride: {}\n    });\n  }\n\n  const {\n    type,\n    options\n  } = entry;\n  let newActive = entryMeta.active;\n\n  if (!blockAutoEntrySwitch && type !== entryMeta.userSelected) {\n    newActive = type;\n  }\n\n  return _objectSpread(_objectSpread({}, entryMeta), {}, {\n    active: newActive,\n    optionsOverride: _objectSpread(_objectSpread({}, entryMeta.optionsOverride), {}, {\n      [type]: options || {}\n    })\n  });\n};\n\nconst seamlyStateReducer = (state, action) => {\n  switch (action.type) {\n    case ADD_EVENT:\n      const {\n        type: eventType,\n        payload\n      } = action.event;\n      const accountHasUploads = state.options.features.hasOwnProperty(featureKeys.uploads);\n      const newEntryMeta = calculateNewEntryMeta(state.entryMeta, payload);\n\n      let newOptions = _objectSpread({}, state.options); // This enabled override of the service enabled value for uploads.\n      // If a message is sent with entry of type upload it will temporarily\n      // override service value and enable uploads.\n\n\n      if (accountHasUploads && (eventType === eventTypes.message || eventType === eventTypes.participant) && !payload.fromClient) {\n        const {\n          type: entryType\n        } = payload.entry || {};\n        newOptions = _objectSpread(_objectSpread({}, newOptions), {}, {\n          features: _objectSpread(_objectSpread({}, newOptions.features), {}, {\n            uploads: _objectSpread(_objectSpread({}, newOptions.features.uploads), {}, {\n              enabledFromEntry: entryType === entryTypes.upload\n            })\n          })\n        });\n      }\n\n      const incrementUnread = isUnreadMessage(action.event); // We check for duplicated and ignore them as in some error of the websocket\n      // a duplicate join can be active for a while until the server connection\n      // times out.\n\n      const eventExists = state.events.find(e => e.payload.id === payload.id);\n\n      if (eventExists) {\n        return state;\n      }\n\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: !accountHasUploads && newEntryMeta.active === entryTypes.upload ? _objectSpread({}, state.entryMeta) : newEntryMeta,\n        options: newOptions,\n        unreadEvents: incrementUnread ? state.unreadEvents + 1 : state.unreadEvents,\n        events: [...state.events, _objectSpread(_objectSpread({}, action.event), {}, {\n          // The payload spread should be done after adding the message\n          // status to enable overriding the status when setting\n          // event optimistically.\n          payload: _objectSpread(_objectSpread({}, incrementUnread && {\n            messageStatus: payload.fromClient ? readStates.read : readStates.received\n          }), payload)\n        })]\n      });\n\n    case ACK_EVENT:\n      // If any ACKs are sent without transactionID the conversation crashes.\n      // Ensure that this edge case is handled gracefully.\n      if (!action.event.payload.transactionId) {\n        console.warn('ACK received without transaction ID.');\n        return state;\n      }\n\n      const matchedEvent = state.events.find(m => m.payload.transactionId === action.event.payload.transactionId);\n      const {\n        id,\n        occurredAt\n      } = action.event.payload;\n      return matchedEvent ? _objectSpread(_objectSpread({}, state), {}, {\n        events: orderHistory(state.events.map(m => m.payload.id === matchedEvent.payload.id ? _objectSpread(_objectSpread({}, m), {}, {\n          payload: _objectSpread(_objectSpread({}, m.payload), {}, {\n            id,\n            occurredAt\n          })\n        }) : m))\n      }) : state;\n\n    case CLEAR_EVENTS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: 0,\n        loadedImageEventIds: [],\n        events: []\n      });\n\n    case SET_EVENTS_READ:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: 0,\n        events: state.events.map(event => {\n          if (action.ids.indexOf(event.payload.id) !== -1) {\n            return _objectSpread(_objectSpread({}, event), {}, {\n              payload: _objectSpread(_objectSpread({}, event.payload), event.payload.messageStatus === readStates.received && {\n                messageStatus: readStates.read\n              })\n            });\n          }\n\n          return event;\n        })\n      });\n\n    case SET_LOADED_IMAGE_EVENT_IDS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        loadedImageEventIds: [...state.loadedImageEventIds, action.eventId]\n      });\n\n    case SET_HISTORY:\n      const {\n        events: history,\n        participants,\n        activeServiceSessionId,\n        activeServiceSettings = {},\n        serviceData,\n        resumeConversationPrompt\n      } = action.history;\n      const events = mergeHistory(state.events, history);\n\n      const mergedParticipants = _objectSpread(_objectSpread({}, state.participantInfo.participants), participants);\n\n      const lastParticipantEvent = events.slice().reverse().find(m => (m.type === 'message' || m.type === 'participant') && !m.payload.fromClient);\n      let lastParticipantId = null;\n\n      if (lastParticipantEvent) {\n        if (lastParticipantEvent.type === 'message') {\n          lastParticipantId = lastParticipantEvent.payload.participant;\n        }\n\n        if (lastParticipantEvent.type === 'participant') {\n          lastParticipantId = lastParticipantEvent.payload.participant.id;\n        }\n      }\n\n      const {\n        entry,\n        uploads\n      } = activeServiceSettings;\n      const historyNewEntryMeta = calculateNewEntryMeta(_objectSpread(_objectSpread(_objectSpread({}, state.entryMeta), entry), {}, {\n        active: entry.default || payloadTypes.text,\n        options: _objectSpread({}, entry && entry.options ? entry.options : {})\n      }), events[events.length - 1].payload);\n\n      let newFeatures = _objectSpread({}, state.options.features);\n\n      const newFeaturesHasUpload = newFeatures.hasOwnProperty(featureKeys.uploads); // Only set uploads if it was initialised by the account config.\n\n      if (newFeaturesHasUpload) {\n        const {\n          payload: lastParticipantEventPayload\n        } = lastParticipantEvent;\n        const {\n          type: entryType\n        } = lastParticipantEventPayload.entry || {};\n        newFeatures = _objectSpread(_objectSpread({}, newFeatures), {}, {\n          uploads: {\n            enabled: !!(uploads && uploads.enabled),\n            enabledFromEntry: entryType === entryTypes.upload\n          }\n        });\n      }\n\n      const returnState = _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: events.filter(event => event.type === 'message' && event.payload.messageStatus === readStates.received).length,\n        events: events.filter(e => e.type !== 'participant' || !!e.payload.participant.introduction),\n        participantInfo: _objectSpread(_objectSpread(_objectSpread({}, state.participantInfo), lastParticipantId ? participantReducer(state.participantInfo, {\n          type: SET_PARTICIPANT,\n          participant: mergedParticipants[lastParticipantId]\n        }) : {}), {}, {\n          participants: mergedParticipants\n        }),\n        historyLoaded: true,\n        serviceInfo: _objectSpread(_objectSpread({}, state.serviceInfo), {}, {\n          activeServiceSessionId\n        }),\n        serviceData: serviceData || {},\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: newFeatures\n        }),\n        entryMeta: !newFeaturesHasUpload && historyNewEntryMeta.active === entryTypes.upload ? _objectSpread({}, state.entryMeta) : historyNewEntryMeta,\n        resumeConversationPrompt: resumeConversationPrompt || false\n      });\n\n      if (lastParticipantId) {\n        returnState.headerTitles = headerTitlesReducer(state.headerTitles, {\n          type: SET_HEADER_SUB_TITLE,\n          title: mergedParticipants[lastParticipantId].name\n        });\n      }\n\n      return returnState;\n\n    case RESET_HISTORY_LOADED_FLAG:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        historyLoaded: false\n      });\n\n    case SET_IS_LOADING:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        isLoading: action.isLoading\n      });\n\n    case INIT_IDLE_DETACH_COUNTDOWN:\n      const {\n        delaySeconds,\n        delayTime\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: {\n          hasCountdown: true,\n          isActive: true,\n          wasStopped: false,\n          count: delaySeconds,\n          remaining: delaySeconds,\n          timer: delayTime\n        }\n      });\n\n    case DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER:\n      const {\n        idleDetachCountdown\n      } = state;\n      const {\n        remaining: prevRemaining\n      } = idleDetachCountdown;\n      const remaining = prevRemaining - 1;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: _objectSpread(_objectSpread({}, state.idleDetachCountdown), {}, {\n          remaining,\n          timer: (0,_general_utils__WEBPACK_IMPORTED_MODULE_0__.getTimeFromSeconds)(remaining)\n        })\n      });\n\n    case STOP_IDLE_DETACH_COUNTDOWN_COUNTER:\n      {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          idleDetachCountdown: _objectSpread(_objectSpread({}, state.idleDetachCountdown), {}, {\n            isActive: false,\n            wasStopped: true\n          })\n        });\n      }\n\n    case CLEAR_IDLE_DETACH_COUNTDOWN:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: {\n          hasCountdown: false,\n          isActive: false\n        }\n      });\n\n    case INIT_RESUME_CONVERSATION_PROMPT:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        resumeConversationPrompt: true\n      });\n\n    case CLEAR_RESUME_CONVERSATION_PROMPT:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        resumeConversationPrompt: false\n      });\n\n    case SET_PARTICIPANT:\n    case CLEAR_PARTICIPANTS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        participantInfo: participantReducer(state.participantInfo, action)\n      });\n\n    case SET_ACTIVE_SERVICE:\n      if (state.serviceInfo.activeServiceSessionId !== action.activeServiceSessionId) {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          serviceInfo: _objectSpread(_objectSpread({}, state.serviceInfo), {}, {\n            activeServiceSessionId: action.activeServiceSessionId\n          })\n        });\n      }\n\n      return state;\n\n    case SET_HEADER_TITLE:\n    case SET_HEADER_SUB_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        headerTitles: headerTitlesReducer(state.headerTitles, action)\n      });\n\n    case SET_INITIAL_STATE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        initialState: action.initialState\n      });\n\n    case SET_SERVICE_DATA_ITEM:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        serviceData: _objectSpread(_objectSpread({}, state.serviceData), {}, {\n          [action.payload.type]: action.payload\n        })\n      });\n\n    case SET_FEATURES:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: action.features\n        })\n      });\n\n    case SET_FEATURE_ENABLED_STATE:\n      return state.options.features.hasOwnProperty(action.key) ? _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: _objectSpread(_objectSpread({}, state.options.features), {}, {\n            [action.key]: _objectSpread(_objectSpread({}, state.options.features[action.key] || {}), {}, {\n              enabled: action.enabled\n            })\n          })\n        })\n      }) : state;\n\n    case CLEAR_FEATURES:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: {}\n        })\n      });\n\n    case SHOW_OPTION:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          panelActive: true,\n          optionActive: action.optionName\n        })\n      });\n\n    case HIDE_OPTION:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          panelActive: false,\n          optionActive: ''\n        })\n      });\n\n    case SET_USER_SELECTED_OPTIONS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          userSelectedOptions: action.options\n        })\n      });\n\n    case SET_USER_SELECTED_OPTION:\n      const {\n        option,\n        value\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          userSelectedOptions: _objectSpread(_objectSpread({}, state.options.userSelectedOptions), {}, {\n            [option]: value\n          })\n        })\n      });\n\n    case SET_BLOCK_AUTO_ENTRY_SWITCH:\n      const {\n        value: blockAutoEntrySwitch\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          blockAutoEntrySwitch\n        })\n      });\n\n    case SET_SERVICE_ENTRY_METADATA:\n      const {\n        entryMeta\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread(_objectSpread({}, state.entryMeta), entryMeta), {}, {\n          active: entryMeta.default,\n          options: _objectSpread({}, entryMeta.options || {}),\n          overrideOptions: {}\n        })\n      });\n\n    case SET_ACTIVE_ENTRY_TYPE:\n      const {\n        entryType: active\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          active\n        })\n      });\n\n    case SET_USER_ENTRY_TYPE:\n      const {\n        entryType: userSelected\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          userSelected\n        })\n      });\n\n    case REGISTER_UPLOAD:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: [...state.currentUploads, {\n          id: action.fileId,\n          name: action.fileName,\n          progress: 1,\n          uploading: true,\n          complete: false,\n          error: '',\n          uploadHandle: action.uploadHandle\n        }]\n      });\n\n    case SET_UPLOAD_PROGRESS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              progress: action.progress,\n              uploading: action.progress !== 100,\n              uploadHandle: action.progress === 100 ? null : fileUpload.uploadHandle\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case SET_UPLOAD_ERROR:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              error: action.errorText,\n              progress: 0,\n              uploading: false,\n              uploadHandle: null\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case SET_UPLOAD_COMPLETE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              complete: true\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case CLEAR_UPLOAD:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.filter(fileUpload => fileUpload.id !== action.fileId)\n      });\n\n    case CLEAR_ALL_UPLOADS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: []\n      });\n\n    case SET_SEAMLY_CONTAINER_ELEMENT:\n      {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          seamlyContainerElement: action.element\n        });\n      }\n\n    default:\n      return state;\n  }\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/utils/seamly-utils.js?");
 
 /***/ }),