@seamly/web-ui 23.0.0-alpha.1 → 23.0.0-alpha.3

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

@@ -101,7 +101,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 api_errors_seamly_api_error__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! api/errors/seamly-api-error */ \"./src/javascripts/api/errors/seamly-api-error.ts\");\n/* harmony import */ var api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! api/errors/seamly-configuration-error */ \"./src/javascripts/api/errors/seamly-configuration-error.js\");\n/* harmony import */ var api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! api/errors/seamly-general-error */ \"./src/javascripts/api/errors/seamly-general-error.js\");\n/* harmony import */ var api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! api/errors/seamly-unauthorized-error */ \"./src/javascripts/api/errors/seamly-unauthorized-error.js\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! config */ \"./src/javascripts/config.ts\");\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 lib_id__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var lib_store_index__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! lib/store/index */ \"./src/javascripts/lib/store/index.js\");\n/* harmony import */ var lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! lib/store/providers/session-storage */ \"./src/javascripts/lib/store/providers/session-storage.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _conversation_connector__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./conversation-connector */ \"./src/javascripts/api/conversation-connector.ts\");\nvar __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {\n  function adopt(value) {\n    return value instanceof P ? value : new P(function (resolve) {\n      resolve(value);\n    });\n  }\n  return new (P || (P = Promise))(function (resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\nvar __classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function (receiver, state, value, kind, f) {\n  if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n  return kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;\n};\nvar __classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function (receiver, state, kind, f) {\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n  return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n};\nvar __rest = undefined && undefined.__rest || function (s, e) {\n  var t = {};\n  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n  }\n  return t;\n};\nvar _API_instances, _API_ready, _API_externalId, _API_conversationAuthToken, _API_layoutMode, _API_config, _API_getAccessToken, _API_setAccessToken, _API_setConversationUrl, _API_getChannelTopic, _API_setChannelTopic, _API_getLocale, _API_getUrlPrefix, _API_updateUrls, _API_createConversation;\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 = 4;\nfunction buildPayload(command, payload) {\n  if (command !== 'message') {\n    return payload;\n  }\n  const {\n    type,\n    body\n  } = payload;\n  let {\n    transactionId\n  } = payload;\n  if (!transactionId) {\n    transactionId = (0,lib_id__WEBPACK_IMPORTED_MODULE_7__.randomId)();\n  }\n  return {\n    type,\n    body,\n    transactionId\n  };\n}\nconst fetchApi = (input,\n// eslint-disable-next-line no-undef\ninit) => __awaiter(void 0, void 0, void 0, function* () {\n  const url = new URL(input);\n  url.searchParams.set('v', config__WEBPACK_IMPORTED_MODULE_5__.apiVersion);\n  const response = yield fetch(url.href, Object.assign({\n    mode: 'cors'\n  }, init));\n  if (!response.ok) {\n    throw new api_errors_seamly_api_error__WEBPACK_IMPORTED_MODULE_0__[\"default\"](response.statusText || `Request failed with status: ${response.status}`, {\n      status: response.status\n    });\n  }\n  return response;\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 */\nfunction getTimeZone() {\n  if (!Intl || typeof Intl === 'undefined' || typeof Intl.DateTimeFormat === 'undefined') {\n    return null;\n  }\n  const format = Intl.DateTimeFormat();\n  if (typeof format === 'undefined' || typeof format.resolvedOptions === 'undefined') {\n    return null;\n  }\n  const timezone = format.resolvedOptions().timeZone;\n  // Ensure we get a valid timezone\n  if (timezone && (timezone.indexOf('/') > -1 || timezone === 'UTC')) {\n    return timezone;\n  } else {\n    return null;\n  }\n}\nclass API {\n  constructor({\n    layoutMode,\n    namespace,\n    config,\n    context\n  }) {\n    var _a;\n    _API_instances.add(this);\n    _API_ready.set(this, void 0);\n    _API_externalId.set(this, void 0);\n    _API_conversationAuthToken.set(this, void 0);\n    _API_layoutMode.set(this, void 0);\n    _API_config.set(this, void 0);\n    this.conversation = new _conversation_connector__WEBPACK_IMPORTED_MODULE_11__[\"default\"]();\n    _API_getLocale.set(this, locale => locale || this.locale);\n    this.store = (0,lib_store_index__WEBPACK_IMPORTED_MODULE_8__.objectStore)(`${namespace}.connection${context.contentLocale ? `.${context.contentLocale}` : ''}`, config.storageProvider || lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_9__[\"default\"]);\n    this.connectionInfo = {\n      apiKey: config.key,\n      domain: config.domain || DOMAIN,\n      secure: config.secure !== false ? config.secure || true : false\n    };\n    __classPrivateFieldSet(this, _API_config, Object.assign(Object.assign({}, config), {\n      sendEnvironment: (_a = config.sendEnvironment) !== null && _a !== void 0 ? _a : true,\n      context: Object.assign(Object.assign({}, context), {\n        channelName: context.channelName || 'web'\n      })\n    }), \"f\");\n    __classPrivateFieldSet(this, _API_ready, false, \"f\");\n    this.connected = false;\n    this.configReady = false;\n    __classPrivateFieldSet(this, _API_externalId, config.externalId, \"f\");\n    __classPrivateFieldSet(this, _API_layoutMode, layoutMode, \"f\");\n    this.userResponded = false;\n    this.URLS = {};\n    // We want to reconnect whenever the page is loaded from cache (bfcache).\n    // Older browsers don't support 'pageshow' and 'bfcache' so this will be ignored and work as usual.\n    window.addEventListener('pageshow', event => {\n      if (event.persisted && this.connected) {\n        this.connect();\n      }\n    });\n  }\n  getConversationUrl() {\n    const conversationUrl = this.store.get('conversationUrl');\n    return conversationUrl;\n  }\n  hasConversation() {\n    return !!this.getConversationUrl();\n  }\n  clearStore() {\n    this.store.delete('accessToken');\n    this.store.delete('conversationUrl');\n    // TODO: Remove `channelName` when all clients have been upgraded past v20.\n    this.store.delete('channelName');\n    this.store.delete('channelTopic');\n  }\n  reset() {\n    return __awaiter(this, void 0, void 0, function* () {\n      yield this.disconnect();\n      this.clearStore();\n      return this.getConfig();\n    });\n  }\n  disconnect() {\n    var _a;\n    return __awaiter(this, void 0, void 0, function* () {\n      if ((_a = this.conversation) === null || _a === void 0 ? void 0 : _a.disconnect) {\n        this.conversation.disconnect();\n      }\n      this.connected = false;\n      this.configReady = false;\n    });\n  }\n  getConfig() {\n    return __awaiter(this, void 0, void 0, function* () {\n      try {\n        const response = yield fetchApi(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}/client/${this.connectionInfo.apiKey}/configs`, {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json'\n          },\n          body: JSON.stringify({\n            context: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _API_config, \"f\").context), {\n              environment: __classPrivateFieldGet(this, _API_config, \"f\").sendEnvironment === true ? this.getEnvironment() : __classPrivateFieldGet(this, _API_config, \"f\").sendEnvironment\n            })\n          })\n        });\n        const body = yield response.json();\n        __classPrivateFieldGet(this, _API_instances, \"m\", _API_updateUrls).call(this, body);\n        this.configReady = true;\n        return body.config;\n      } catch (error) {\n        if (error.status === 404) {\n          throw new api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"](error);\n        }\n        if (error.status >= 500) {\n          throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"](error);\n        }\n        throw error;\n      }\n    });\n  }\n  getConversation() {\n    return __awaiter(this, void 0, void 0, function* () {\n      if (!this.hasConversation()) {\n        return null;\n      }\n      try {\n        const response = yield fetchApi(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.URLS.history}`, {\n          method: 'GET',\n          headers: {\n            Authorization: `Bearer ${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getAccessToken).call(this)}`\n          }\n        });\n        const body = yield response.json();\n        __classPrivateFieldGet(this, _API_instances, \"m\", _API_updateUrls).call(this, 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: Object.assign(Object.assign({}, 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          translationProposal: ui.translationProposal,\n          translation\n        };\n      } catch (error) {\n        if (error.status === 401) {\n          throw new api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"](error);\n        }\n        if (error.status === 404) {\n          throw new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"](error);\n        }\n        if (error.status >= 500) {\n          throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"](error);\n        }\n        throw new api_errors_seamly_api_error__WEBPACK_IMPORTED_MODULE_0__[\"default\"](error);\n      }\n    });\n  }\n  connect() {\n    return __awaiter(this, void 0, void 0, function* () {\n      this.connected = false;\n      let conversationInitialState = {};\n      if (!this.hasConversation()) {\n        conversationInitialState = yield __classPrivateFieldGet(this, _API_instances, \"m\", _API_createConversation).call(this);\n      }\n      this.conversation.connect(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'ws')}${this.URLS.socket}`, __classPrivateFieldGet(this, _API_config, \"f\").context.channelName, __classPrivateFieldGet(this, _API_instances, \"m\", _API_getChannelTopic).call(this), __classPrivateFieldGet(this, _API_instances, \"m\", _API_getAccessToken).call(this));\n      this.conversation.onConnection(({\n        connected,\n        ready\n      }) => {\n        this.connected = connected;\n        __classPrivateFieldSet(this, _API_ready, ready, \"f\");\n      });\n      return conversationInitialState;\n    });\n  }\n  uploadFile(file, progressCallback, successCallback, errorCallback) {\n    const formData = new FormData();\n    formData.append('upload', file);\n    const xhr = new XMLHttpRequest();\n    xhr.open('POST', `${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.URLS.uploads}`);\n    xhr.setRequestHeader('Authorization', `Bearer ${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getAccessToken).call(this)}`);\n    xhr.upload.onprogress = event => {\n      if (typeof progressCallback === 'function') {\n        const percent = Math.ceil(event.loaded / event.total * 100);\n        progressCallback(percent);\n      }\n    };\n    xhr.onloadend = () => {\n      // status is set to 0 when upload is aborted.\n      if (xhr.status === 0) return;\n      if (xhr.status === 200 || xhr.status === 201) {\n        if (successCallback) {\n          try {\n            successCallback(JSON.parse(xhr.response));\n          } catch (_) {\n            successCallback(xhr.response);\n          }\n          return;\n        }\n      }\n      if (errorCallback) {\n        try {\n          errorCallback(JSON.parse(xhr.response));\n        } catch (_) {\n          errorCallback(xhr.response);\n        }\n      } else {\n        throw new Error(xhr.response);\n      }\n    };\n    xhr.send(formData);\n    return xhr;\n  }\n  getConversationIntitialState() {\n    return __awaiter(this, void 0, void 0, function* () {\n      try {\n        const response = yield fetchApi(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.getConversationUrl()}`, {\n          method: 'GET',\n          headers: {\n            Authorization: `Bearer ${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getAccessToken).call(this)}`\n          }\n        });\n        const body = yield response.json();\n        __classPrivateFieldGet(this, _API_instances, \"m\", _API_updateUrls).call(this, body);\n        this.userResponded = body.conversation.userResponded;\n        return (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_10__.omit)(body.conversation, ['accessToken', 'channelTopic']);\n      } catch (error) {\n        if (error.status === 401) {\n          throw new api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"](error);\n        }\n        if (error.status === 404) {\n          throw new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"](error);\n        }\n        if (error.status >= 500) {\n          throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"](error);\n        }\n        throw error;\n      }\n    });\n  }\n  getTranslations(locale) {\n    return __awaiter(this, void 0, void 0, function* () {\n      try {\n        if (!this.URLS.translations) {\n          throw new api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n        }\n        const url = `${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.URLS.translations}`.replace('{version}', String(TRANSLATIONS_VERSION)).replace('{locale}', __classPrivateFieldGet(this, _API_getLocale, \"f\").call(this, locale));\n        const response = yield fetchApi(url, {\n          method: 'GET'\n        });\n        const body = yield response.json();\n        return body.translations;\n      } catch (error) {\n        if (error.status >= 500) {\n          throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"](error);\n        }\n        throw new api_errors_seamly_api_error__WEBPACK_IMPORTED_MODULE_0__[\"default\"](error);\n      }\n    });\n  }\n  send(command, payload, waitForReady = true) {\n    var _a;\n    if (!this.connected || waitForReady && !__classPrivateFieldGet(this, _API_ready, \"f\")) {\n      // Wait for connection to be made\n      (_a = this.conversation) === null || _a === void 0 ? void 0 : _a.onConnection(({\n        connected,\n        ready\n      }) => {\n        this.connected = connected;\n        __classPrivateFieldSet(this, _API_ready, ready, \"f\");\n        if (waitForReady ? ready : connected) {\n          this.send(command, payload, waitForReady);\n          return true;\n        }\n        return false;\n      });\n      return;\n    }\n    log('[SEND]', command, payload);\n    this.conversation.pushToChannel(command, buildPayload(command, payload), 10000);\n  }\n  sendContext(context) {\n    var _a, _b;\n    const {\n      contentLocale,\n      userLocale,\n      variables,\n      environment\n    } = context;\n    const payload = {};\n    if (environment) {\n      payload.environment = environment;\n    }\n    if (contentLocale) {\n      if (typeof contentLocale !== 'string') {\n        throw new Error('Content locale must be a string');\n      }\n      payload.contentLocale = contentLocale;\n    }\n    if (userLocale) {\n      if (typeof userLocale !== 'string') {\n        throw new Error('User locale must be a string');\n      }\n      payload.userLocale = userLocale;\n    }\n    if (variables) {\n      if (typeof variables !== 'object') {\n        throw new Error('Variables must be an object');\n      }\n      payload.variables = variables;\n    }\n    // If we have empty context don't send context message\n    if (Object.keys(payload).length === 0 && payload.constructor === Object) {\n      return;\n    }\n    // Destructure the server locale from the payload\n    const {\n        contentLocale: _\n      } = payload,\n      restPayload = __rest(payload, [\"contentLocale\"]);\n    const localContentLocale = (_a = __classPrivateFieldGet(this, _API_config, \"f\").context) === null || _a === void 0 ? void 0 : _a.contentLocale;\n    const localUserLocale = (_b = __classPrivateFieldGet(this, _API_config, \"f\").context) === null || _b === void 0 ? void 0 : _b.userLocale;\n    this.send('context', Object.assign(Object.assign({}, localContentLocale ? {\n      contentLocale: localContentLocale,\n      userLocale: localUserLocale\n    } : {}), restPayload), false);\n  }\n  getEnvironment() {\n    return {\n      clientName: \"@seamly/web-ui\",\n      clientVariant: __classPrivateFieldGet(this, _API_layoutMode, \"f\"),\n      clientVersion: \"23.0.0-alpha.1\",\n      currentUrl: window.location.toString(),\n      screenResolution: `${window.screen.width}x${window.screen.height}`,\n      timezone: getTimeZone(),\n      userAgent: navigator.userAgent,\n      preferredLocale: navigator.language\n    };\n  }\n}\n_API_ready = new WeakMap(), _API_externalId = new WeakMap(), _API_conversationAuthToken = new WeakMap(), _API_layoutMode = new WeakMap(), _API_config = new WeakMap(), _API_getLocale = new WeakMap(), _API_instances = new WeakSet(), _API_getAccessToken = function _API_getAccessToken() {\n  const accessToken = this.store.get('accessToken');\n  return accessToken;\n}, _API_setAccessToken = function _API_setAccessToken(accessToken) {\n  this.store.set('accessToken', accessToken);\n}, _API_setConversationUrl = function _API_setConversationUrl(url) {\n  this.store.set('conversationUrl', url);\n}, _API_getChannelTopic = function _API_getChannelTopic() {\n  const channelTopic = this.store.get('channelTopic') || this.store.get('channelName');\n  // The `channelName` fallback is needed for seamless client upgrades.\n  // TODO: Remove when all clients have been upgraded past v20.\n  return channelTopic;\n}, _API_setChannelTopic = function _API_setChannelTopic(topic) {\n  this.store.set('channelTopic', topic);\n}, _API_getUrlPrefix = function _API_getUrlPrefix(protocol) {\n  const realProtocol = this.connectionInfo.secure ? `${protocol}s` : protocol;\n  return `${realProtocol}://${this.connectionInfo.domain}`;\n}, _API_updateUrls = function _API_updateUrls({\n  _links: responseLinks\n}) {\n  this.URLS = Object.entries(responseLinks).filter(([key]) => key !== 'self').reduce((urls, [key, {\n    href\n  }]) => {\n    return Object.assign(Object.assign({}, urls), {\n      [key]: href\n    });\n  }, this.URLS);\n}, _API_createConversation = function _API_createConversation() {\n  var _a, _b;\n  return __awaiter(this, void 0, void 0, function* () {\n    try {\n      if (typeof ((_a = __classPrivateFieldGet(this, _API_config, \"f\")) === null || _a === void 0 ? void 0 : _a.getConversationAuthToken) === 'function') {\n        __classPrivateFieldSet(this, _API_conversationAuthToken, yield __classPrivateFieldGet(this, _API_config, \"f\").getConversationAuthToken(), \"f\");\n      }\n      const response = yield fetchApi(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.URLS.conversations}`, {\n        method: 'POST',\n        credentials: 'include',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify({\n          externalId: __classPrivateFieldGet(this, _API_conversationAuthToken, \"f\") ? undefined : __classPrivateFieldGet(this, _API_externalId, \"f\"),\n          token: __classPrivateFieldGet(this, _API_conversationAuthToken, \"f\")\n        })\n      });\n      const body = yield response.json();\n      const {\n        conversation\n      } = body;\n      const initialState = Object.assign({}, conversation);\n      delete initialState.accessToken;\n      delete initialState.channelTopic;\n      __classPrivateFieldGet(this, _API_instances, \"m\", _API_setAccessToken).call(this, conversation.accessToken);\n      __classPrivateFieldGet(this, _API_instances, \"m\", _API_setChannelTopic).call(this, conversation.channelTopic);\n      __classPrivateFieldGet(this, _API_instances, \"m\", _API_updateUrls).call(this, body);\n      __classPrivateFieldGet(this, _API_instances, \"m\", _API_setConversationUrl).call(this, this.URLS.conversation);\n      this.locale = (_b = conversation.translation) === null || _b === void 0 ? void 0 : _b.locale;\n      this.userResponded = conversation.userResponded;\n      return initialState;\n    } catch (error) {\n      if (error.status >= 500) {\n        throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"](error);\n      }\n      if (error.status === 400) {\n        throw new api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"](error);\n      }\n      if (error.status === 404) {\n        throw new api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"](error);\n      }\n      throw error;\n    }\n  });\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/index.ts?");
+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 api_errors_seamly_api_error__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! api/errors/seamly-api-error */ \"./src/javascripts/api/errors/seamly-api-error.ts\");\n/* harmony import */ var api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! api/errors/seamly-configuration-error */ \"./src/javascripts/api/errors/seamly-configuration-error.js\");\n/* harmony import */ var api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! api/errors/seamly-general-error */ \"./src/javascripts/api/errors/seamly-general-error.js\");\n/* harmony import */ var api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! api/errors/seamly-unauthorized-error */ \"./src/javascripts/api/errors/seamly-unauthorized-error.js\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! config */ \"./src/javascripts/config.ts\");\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 lib_id__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var lib_store_index__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! lib/store/index */ \"./src/javascripts/lib/store/index.js\");\n/* harmony import */ var lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! lib/store/providers/session-storage */ \"./src/javascripts/lib/store/providers/session-storage.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _conversation_connector__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./conversation-connector */ \"./src/javascripts/api/conversation-connector.ts\");\nvar __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {\n  function adopt(value) {\n    return value instanceof P ? value : new P(function (resolve) {\n      resolve(value);\n    });\n  }\n  return new (P || (P = Promise))(function (resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\nvar __classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function (receiver, state, value, kind, f) {\n  if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n  return kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;\n};\nvar __classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function (receiver, state, kind, f) {\n  if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n  if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n  return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n};\nvar _API_instances, _API_ready, _API_externalId, _API_conversationAuthToken, _API_layoutMode, _API_config, _API_getAccessToken, _API_setAccessToken, _API_setConversationUrl, _API_getChannelTopic, _API_setChannelTopic, _API_getLocale, _API_getUrlPrefix, _API_updateUrls, _API_createConversation;\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 = 4;\nfunction buildPayload(command, payload) {\n  if (command !== 'message') {\n    return payload;\n  }\n  const {\n    type,\n    body\n  } = payload;\n  let {\n    transactionId\n  } = payload;\n  if (!transactionId) {\n    transactionId = (0,lib_id__WEBPACK_IMPORTED_MODULE_7__.randomId)();\n  }\n  return {\n    type,\n    body,\n    transactionId\n  };\n}\nconst fetchApi = (input,\n// eslint-disable-next-line no-undef\ninit) => __awaiter(void 0, void 0, void 0, function* () {\n  const url = new URL(input);\n  url.searchParams.set('v', config__WEBPACK_IMPORTED_MODULE_5__.apiVersion);\n  const response = yield fetch(url.href, Object.assign({\n    mode: 'cors'\n  }, init));\n  if (!response.ok) {\n    throw new api_errors_seamly_api_error__WEBPACK_IMPORTED_MODULE_0__[\"default\"](response.statusText || `Request failed with status: ${response.status}`, {\n      status: response.status\n    });\n  }\n  return response;\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 */\nfunction getTimeZone() {\n  if (!Intl || typeof Intl === 'undefined' || typeof Intl.DateTimeFormat === 'undefined') {\n    return null;\n  }\n  const format = Intl.DateTimeFormat();\n  if (typeof format === 'undefined' || typeof format.resolvedOptions === 'undefined') {\n    return null;\n  }\n  const timezone = format.resolvedOptions().timeZone;\n  // Ensure we get a valid timezone\n  if (timezone && (timezone.indexOf('/') > -1 || timezone === 'UTC')) {\n    return timezone;\n  } else {\n    return null;\n  }\n}\nclass API {\n  constructor({\n    layoutMode,\n    namespace,\n    config,\n    context\n  }) {\n    var _a;\n    _API_instances.add(this);\n    _API_ready.set(this, void 0);\n    _API_externalId.set(this, void 0);\n    _API_conversationAuthToken.set(this, void 0);\n    _API_layoutMode.set(this, void 0);\n    _API_config.set(this, void 0);\n    this.conversation = new _conversation_connector__WEBPACK_IMPORTED_MODULE_11__[\"default\"]();\n    _API_getLocale.set(this, locale => locale || this.locale);\n    this.store = (0,lib_store_index__WEBPACK_IMPORTED_MODULE_8__.objectStore)(`${namespace}.connection${context.userLocale ? `.${context.userLocale}` : ''}`, config.storageProvider || lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_9__[\"default\"]);\n    this.connectionInfo = {\n      apiKey: config.key,\n      domain: config.domain || DOMAIN,\n      secure: config.secure !== false ? config.secure || true : false\n    };\n    __classPrivateFieldSet(this, _API_config, Object.assign(Object.assign({}, config), {\n      sendEnvironment: (_a = config.sendEnvironment) !== null && _a !== void 0 ? _a : true,\n      context: Object.assign(Object.assign({}, context), {\n        channelName: context.channelName || 'web'\n      })\n    }), \"f\");\n    __classPrivateFieldSet(this, _API_ready, false, \"f\");\n    this.connected = false;\n    this.configReady = false;\n    __classPrivateFieldSet(this, _API_externalId, config.externalId, \"f\");\n    __classPrivateFieldSet(this, _API_layoutMode, layoutMode, \"f\");\n    this.userResponded = false;\n    this.URLS = {};\n    // We want to reconnect whenever the page is loaded from cache (bfcache).\n    // Older browsers don't support 'pageshow' and 'bfcache' so this will be ignored and work as usual.\n    window.addEventListener('pageshow', event => {\n      if (event.persisted && this.connected) {\n        this.connect();\n      }\n    });\n  }\n  getConversationUrl() {\n    const conversationUrl = this.store.get('conversationUrl');\n    return conversationUrl;\n  }\n  hasConversation() {\n    return !!this.getConversationUrl();\n  }\n  clearStore() {\n    this.store.delete('accessToken');\n    this.store.delete('conversationUrl');\n    // TODO: Remove `channelName` when all clients have been upgraded past v20.\n    this.store.delete('channelName');\n    this.store.delete('channelTopic');\n  }\n  reset() {\n    return __awaiter(this, void 0, void 0, function* () {\n      yield this.disconnect();\n      this.clearStore();\n      return this.getConfig();\n    });\n  }\n  disconnect() {\n    var _a;\n    return __awaiter(this, void 0, void 0, function* () {\n      if ((_a = this.conversation) === null || _a === void 0 ? void 0 : _a.disconnect) {\n        this.conversation.disconnect();\n      }\n      this.connected = false;\n      this.configReady = false;\n    });\n  }\n  getConfig() {\n    return __awaiter(this, void 0, void 0, function* () {\n      try {\n        const response = yield fetchApi(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}/client/${this.connectionInfo.apiKey}/configs`, {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json'\n          },\n          body: JSON.stringify({\n            context: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _API_config, \"f\").context), {\n              environment: __classPrivateFieldGet(this, _API_config, \"f\").sendEnvironment === true ? this.getEnvironment() : __classPrivateFieldGet(this, _API_config, \"f\").sendEnvironment\n            })\n          })\n        });\n        const body = yield response.json();\n        __classPrivateFieldGet(this, _API_instances, \"m\", _API_updateUrls).call(this, body);\n        this.configReady = true;\n        return body.config;\n      } catch (error) {\n        if (error.status === 404) {\n          throw new api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"](error);\n        }\n        if (error.status >= 500) {\n          throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"](error);\n        }\n        throw error;\n      }\n    });\n  }\n  getConversation() {\n    return __awaiter(this, void 0, void 0, function* () {\n      if (!this.hasConversation()) {\n        return null;\n      }\n      try {\n        const response = yield fetchApi(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.URLS.history}`, {\n          method: 'GET',\n          headers: {\n            Authorization: `Bearer ${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getAccessToken).call(this)}`\n          }\n        });\n        const body = yield response.json();\n        __classPrivateFieldGet(this, _API_instances, \"m\", _API_updateUrls).call(this, 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: Object.assign(Object.assign({}, 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          translationProposal: ui.translationProposal,\n          translation\n        };\n      } catch (error) {\n        if (error.status === 401) {\n          throw new api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"](error);\n        }\n        if (error.status === 404) {\n          throw new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"](error);\n        }\n        if (error.status >= 500) {\n          throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"](error);\n        }\n        throw new api_errors_seamly_api_error__WEBPACK_IMPORTED_MODULE_0__[\"default\"](error);\n      }\n    });\n  }\n  connect() {\n    return __awaiter(this, void 0, void 0, function* () {\n      this.connected = false;\n      let conversationInitialState = {};\n      if (!this.hasConversation()) {\n        conversationInitialState = yield __classPrivateFieldGet(this, _API_instances, \"m\", _API_createConversation).call(this);\n      }\n      this.conversation.connect(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'ws')}${this.URLS.socket}`, __classPrivateFieldGet(this, _API_config, \"f\").context.channelName, __classPrivateFieldGet(this, _API_instances, \"m\", _API_getChannelTopic).call(this), __classPrivateFieldGet(this, _API_instances, \"m\", _API_getAccessToken).call(this));\n      this.conversation.onConnection(({\n        connected,\n        ready\n      }) => {\n        this.connected = connected;\n        __classPrivateFieldSet(this, _API_ready, ready, \"f\");\n      });\n      return conversationInitialState;\n    });\n  }\n  uploadFile(file, progressCallback, successCallback, errorCallback) {\n    const formData = new FormData();\n    formData.append('upload', file);\n    const xhr = new XMLHttpRequest();\n    xhr.open('POST', `${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.URLS.uploads}`);\n    xhr.setRequestHeader('Authorization', `Bearer ${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getAccessToken).call(this)}`);\n    xhr.upload.onprogress = event => {\n      if (typeof progressCallback === 'function') {\n        const percent = Math.ceil(event.loaded / event.total * 100);\n        progressCallback(percent);\n      }\n    };\n    xhr.onloadend = () => {\n      // status is set to 0 when upload is aborted.\n      if (xhr.status === 0) return;\n      if (xhr.status === 200 || xhr.status === 201) {\n        if (successCallback) {\n          try {\n            successCallback(JSON.parse(xhr.response));\n          } catch (_) {\n            successCallback(xhr.response);\n          }\n          return;\n        }\n      }\n      if (errorCallback) {\n        try {\n          errorCallback(JSON.parse(xhr.response));\n        } catch (_) {\n          errorCallback(xhr.response);\n        }\n      } else {\n        throw new Error(xhr.response);\n      }\n    };\n    xhr.send(formData);\n    return xhr;\n  }\n  getConversationIntitialState() {\n    return __awaiter(this, void 0, void 0, function* () {\n      try {\n        const response = yield fetchApi(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.getConversationUrl()}`, {\n          method: 'GET',\n          headers: {\n            Authorization: `Bearer ${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getAccessToken).call(this)}`\n          }\n        });\n        const body = yield response.json();\n        __classPrivateFieldGet(this, _API_instances, \"m\", _API_updateUrls).call(this, body);\n        this.userResponded = body.conversation.userResponded;\n        return (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_10__.omit)(body.conversation, ['accessToken', 'channelTopic']);\n      } catch (error) {\n        if (error.status === 401) {\n          throw new api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"](error);\n        }\n        if (error.status === 404) {\n          throw new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_3__[\"default\"](error);\n        }\n        if (error.status >= 500) {\n          throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"](error);\n        }\n        throw error;\n      }\n    });\n  }\n  getTranslations(locale) {\n    return __awaiter(this, void 0, void 0, function* () {\n      try {\n        if (!this.URLS.translations) {\n          throw new api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n        }\n        const url = `${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.URLS.translations}`.replace('{version}', String(TRANSLATIONS_VERSION)).replace('{locale}', __classPrivateFieldGet(this, _API_getLocale, \"f\").call(this, locale));\n        const response = yield fetchApi(url, {\n          method: 'GET'\n        });\n        const body = yield response.json();\n        return body.translations;\n      } catch (error) {\n        if (error.status >= 500) {\n          throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"](error);\n        }\n        throw new api_errors_seamly_api_error__WEBPACK_IMPORTED_MODULE_0__[\"default\"](error);\n      }\n    });\n  }\n  send(command, payload, waitForReady = true) {\n    var _a;\n    if (!this.connected || waitForReady && !__classPrivateFieldGet(this, _API_ready, \"f\")) {\n      // Wait for connection to be made\n      (_a = this.conversation) === null || _a === void 0 ? void 0 : _a.onConnection(({\n        connected,\n        ready\n      }) => {\n        this.connected = connected;\n        __classPrivateFieldSet(this, _API_ready, ready, \"f\");\n        if (waitForReady ? ready : connected) {\n          this.send(command, payload, waitForReady);\n          return true;\n        }\n        return false;\n      });\n      return;\n    }\n    log('[SEND]', command, payload);\n    this.conversation.pushToChannel(command, buildPayload(command, payload), 10000);\n  }\n  sendContext(context) {\n    const {\n      contentLocale,\n      userLocale,\n      variables,\n      environment\n    } = context;\n    const payload = {};\n    if (environment) {\n      payload.environment = environment;\n    }\n    if (contentLocale) {\n      if (typeof contentLocale !== 'string') {\n        throw new Error('Content locale must be a string');\n      }\n      payload.contentLocale = contentLocale;\n    }\n    if (userLocale) {\n      if (typeof userLocale !== 'string') {\n        throw new Error('User locale must be a string');\n      }\n      payload.userLocale = userLocale;\n    }\n    if (variables) {\n      if (typeof variables !== 'object') {\n        throw new Error('Variables must be an object');\n      }\n      payload.variables = variables;\n    }\n    // If we have empty context don't send context message\n    if (Object.keys(payload).length === 0 && payload.constructor === Object) {\n      return;\n    }\n    this.send('context', payload, false);\n  }\n  getEnvironment() {\n    return {\n      clientName: \"@seamly/web-ui\",\n      clientVariant: __classPrivateFieldGet(this, _API_layoutMode, \"f\"),\n      clientVersion: \"22.3.6\",\n      currentUrl: window.location.toString(),\n      screenResolution: `${window.screen.width}x${window.screen.height}`,\n      timezone: getTimeZone(),\n      userAgent: navigator.userAgent,\n      preferredLocale: navigator.language\n    };\n  }\n}\n_API_ready = new WeakMap(), _API_externalId = new WeakMap(), _API_conversationAuthToken = new WeakMap(), _API_layoutMode = new WeakMap(), _API_config = new WeakMap(), _API_getLocale = new WeakMap(), _API_instances = new WeakSet(), _API_getAccessToken = function _API_getAccessToken() {\n  const accessToken = this.store.get('accessToken');\n  return accessToken;\n}, _API_setAccessToken = function _API_setAccessToken(accessToken) {\n  this.store.set('accessToken', accessToken);\n}, _API_setConversationUrl = function _API_setConversationUrl(url) {\n  this.store.set('conversationUrl', url);\n}, _API_getChannelTopic = function _API_getChannelTopic() {\n  const channelTopic = this.store.get('channelTopic') || this.store.get('channelName');\n  // The `channelName` fallback is needed for seamless client upgrades.\n  // TODO: Remove when all clients have been upgraded past v20.\n  return channelTopic;\n}, _API_setChannelTopic = function _API_setChannelTopic(topic) {\n  this.store.set('channelTopic', topic);\n}, _API_getUrlPrefix = function _API_getUrlPrefix(protocol) {\n  const realProtocol = this.connectionInfo.secure ? `${protocol}s` : protocol;\n  return `${realProtocol}://${this.connectionInfo.domain}`;\n}, _API_updateUrls = function _API_updateUrls({\n  _links: responseLinks\n}) {\n  this.URLS = Object.entries(responseLinks).filter(([key]) => key !== 'self').reduce((urls, [key, {\n    href\n  }]) => {\n    return Object.assign(Object.assign({}, urls), {\n      [key]: href\n    });\n  }, this.URLS);\n}, _API_createConversation = function _API_createConversation() {\n  var _a, _b;\n  return __awaiter(this, void 0, void 0, function* () {\n    try {\n      if (typeof ((_a = __classPrivateFieldGet(this, _API_config, \"f\")) === null || _a === void 0 ? void 0 : _a.getConversationAuthToken) === 'function') {\n        __classPrivateFieldSet(this, _API_conversationAuthToken, yield __classPrivateFieldGet(this, _API_config, \"f\").getConversationAuthToken(), \"f\");\n      }\n      const response = yield fetchApi(`${__classPrivateFieldGet(this, _API_instances, \"m\", _API_getUrlPrefix).call(this, 'http')}${this.URLS.conversations}`, {\n        method: 'POST',\n        credentials: 'include',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify({\n          externalId: __classPrivateFieldGet(this, _API_conversationAuthToken, \"f\") ? undefined : __classPrivateFieldGet(this, _API_externalId, \"f\"),\n          token: __classPrivateFieldGet(this, _API_conversationAuthToken, \"f\")\n        })\n      });\n      const body = yield response.json();\n      const {\n        conversation\n      } = body;\n      const initialState = Object.assign({}, conversation);\n      delete initialState.accessToken;\n      delete initialState.channelTopic;\n      __classPrivateFieldGet(this, _API_instances, \"m\", _API_setAccessToken).call(this, conversation.accessToken);\n      __classPrivateFieldGet(this, _API_instances, \"m\", _API_setChannelTopic).call(this, conversation.channelTopic);\n      __classPrivateFieldGet(this, _API_instances, \"m\", _API_updateUrls).call(this, body);\n      __classPrivateFieldGet(this, _API_instances, \"m\", _API_setConversationUrl).call(this, this.URLS.conversation);\n      this.locale = (_b = conversation.translation) === null || _b === void 0 ? void 0 : _b.locale;\n      this.userResponded = conversation.userResponded;\n      return initialState;\n    } catch (error) {\n      if (error.status >= 500) {\n        throw new api_errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_2__[\"default\"](error);\n      }\n      if (error.status === 400) {\n        throw new api_errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_4__[\"default\"](error);\n      }\n      if (error.status === 404) {\n        throw new api_errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"](error);\n      }\n      throw error;\n    }\n  });\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/index.ts?");
 
 /***/ }),
 
@@ -123,7 +123,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 */   initializeApp: () => (/* binding */ initializeApp),\n/* harmony export */   resetApp: () => (/* binding */ resetApp)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.modern.mjs\");\n/* harmony import */ var api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! api/errors/seamly-unavailable-error */ \"./src/javascripts/api/errors/seamly-unavailable-error.js\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var domains_redux_create_debounced_async_thunk__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/redux/create-debounced-async-thunk */ \"./src/javascripts/domains/redux/create-debounced-async-thunk.ts\");\n/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/visibility/actions */ \"./src/javascripts/domains/visibility/actions.ts\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\nvar __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {\n  function adopt(value) {\n    return value instanceof P ? value : new P(function (resolve) {\n      resolve(value);\n    });\n  }\n  return new (P || (P = Promise))(function (resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\n\n\n\n\n\n\n\nconst initializeApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_6__.createAsyncThunk)('initializeApp', (_, {\n  extra: {\n    api,\n    config\n  },\n  rejectWithValue\n}) => __awaiter(void 0, void 0, void 0, function* () {\n  var _a, _b, _c;\n  const contentLocale = (_a = config === null || config === void 0 ? void 0 : config.context) === null || _a === void 0 ? void 0 : _a.contentLocale;\n  const userLocale = (_b = config === null || config === void 0 ? void 0 : config.context) === null || _b === void 0 ? void 0 : _b.userLocale;\n  const environment = config.api.sendEnvironment !== false ? api.getEnvironment() : config.api.sendEnvironment;\n  try {\n    if (api.hasConversation()) {\n      const initialState = yield api.getConversationIntitialState();\n      api.sendContext(Object.assign(Object.assign({}, initialState.context), {\n        environment\n      }));\n      return {\n        initialState,\n        contentLocale,\n        userLocale,\n        config\n      };\n    } else {\n      if ((_c = config === null || config === void 0 ? void 0 : config.context) === null || _c === void 0 ? void 0 : _c.topic) {\n        api.send('action', {\n          type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__.actionTypes.setTopic,\n          body: {\n            name: config.context.topic,\n            // Separate fallback message is not needed here. Only an attached service will use this, but none will\n            // be attached before the conversation has started (meaning the fallback message will never be shown).\n            fallbackMessage: config.context.topic\n          }\n        });\n      }\n      // Send context\n      api.sendContext(Object.assign(Object.assign({}, config.context), {\n        environment\n      }));\n      return {\n        initialState: undefined,\n        contentLocale,\n        userLocale,\n        config\n      };\n    }\n  } catch (e) {\n    if (e instanceof api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_0__[\"default\"]) {\n      const err = new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_0__[\"default\"]();\n      return rejectWithValue({\n        name: err.name,\n        message: err.message,\n        originalEvent: err.originalEvent,\n        originalError: err.originalError,\n        action: err.action\n      });\n    }\n    const err = new api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n    return rejectWithValue({\n      name: err.name,\n      message: err.message,\n      langKey: err.langKey\n    });\n  }\n}));\nconst resetApp = (0,domains_redux_create_debounced_async_thunk__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('resetApp', (_, {\n  dispatch,\n  extra: {\n    api\n  }\n}) => __awaiter(void 0, void 0, void 0, function* () {\n  yield api.disconnect();\n  api.clearStore();\n  dispatch((0,domains_config_actions__WEBPACK_IMPORTED_MODULE_2__.resetConfig)());\n  yield dispatch((0,domains_config_actions__WEBPACK_IMPORTED_MODULE_2__.initializeConfig)());\n  yield dispatch(initializeApp());\n  dispatch((0,domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__.initializeVisibility)());\n}), {\n  wait: 2000,\n  leading: true\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/app/actions.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   initializeApp: () => (/* binding */ initializeApp),\n/* harmony export */   resetApp: () => (/* binding */ resetApp)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.modern.mjs\");\n/* harmony import */ var api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! api/errors/seamly-unavailable-error */ \"./src/javascripts/api/errors/seamly-unavailable-error.js\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var domains_redux_create_debounced_async_thunk__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/redux/create-debounced-async-thunk */ \"./src/javascripts/domains/redux/create-debounced-async-thunk.ts\");\n/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/visibility/actions */ \"./src/javascripts/domains/visibility/actions.ts\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\nvar __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {\n  function adopt(value) {\n    return value instanceof P ? value : new P(function (resolve) {\n      resolve(value);\n    });\n  }\n  return new (P || (P = Promise))(function (resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\n\n\n\n\n\n\n\nconst initializeApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_6__.createAsyncThunk)('initializeApp', (_, {\n  extra: {\n    api,\n    config\n  },\n  rejectWithValue\n}) => __awaiter(void 0, void 0, void 0, function* () {\n  var _a, _b, _c;\n  let contentLocale = (_a = config === null || config === void 0 ? void 0 : config.context) === null || _a === void 0 ? void 0 : _a.contentLocale;\n  let userLocale = (_b = config === null || config === void 0 ? void 0 : config.context) === null || _b === void 0 ? void 0 : _b.userLocale;\n  const environment = config.api.sendEnvironment !== false ? api.getEnvironment() : config.api.sendEnvironment;\n  try {\n    if (api.hasConversation()) {\n      const initialState = yield api.getConversationIntitialState();\n      contentLocale = initialState.context.contentLocale || contentLocale;\n      userLocale = initialState.context.userLocale || userLocale;\n      api.sendContext(Object.assign(Object.assign({}, initialState.context), {\n        environment\n      }));\n      return {\n        initialState,\n        contentLocale,\n        userLocale,\n        config\n      };\n    } else {\n      if ((_c = config === null || config === void 0 ? void 0 : config.context) === null || _c === void 0 ? void 0 : _c.topic) {\n        api.send('action', {\n          type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_5__.actionTypes.setTopic,\n          body: {\n            name: config.context.topic,\n            // Separate fallback message is not needed here. Only an attached service will use this, but none will\n            // be attached before the conversation has started (meaning the fallback message will never be shown).\n            fallbackMessage: config.context.topic\n          }\n        });\n      }\n      // Send context\n      api.sendContext(Object.assign(Object.assign({}, config.context), {\n        environment\n      }));\n      return {\n        initialState: undefined,\n        contentLocale,\n        userLocale,\n        config\n      };\n    }\n  } catch (e) {\n    if (e instanceof api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_0__[\"default\"]) {\n      const err = new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_0__[\"default\"]();\n      return rejectWithValue({\n        name: err.name,\n        message: err.message,\n        originalEvent: err.originalEvent,\n        originalError: err.originalError,\n        action: err.action\n      });\n    }\n    const err = new api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n    return rejectWithValue({\n      name: err.name,\n      message: err.message,\n      langKey: err.langKey\n    });\n  }\n}));\nconst resetApp = (0,domains_redux_create_debounced_async_thunk__WEBPACK_IMPORTED_MODULE_3__[\"default\"])('resetApp', (_, {\n  dispatch,\n  extra: {\n    api\n  }\n}) => __awaiter(void 0, void 0, void 0, function* () {\n  yield api.disconnect();\n  api.clearStore();\n  dispatch((0,domains_config_actions__WEBPACK_IMPORTED_MODULE_2__.resetConfig)());\n  yield dispatch((0,domains_config_actions__WEBPACK_IMPORTED_MODULE_2__.initializeConfig)());\n  yield dispatch(initializeApp());\n  dispatch((0,domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__.initializeVisibility)());\n}), {\n  wait: 2000,\n  leading: true\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/app/actions.ts?");
 
 /***/ }),
 
@@ -156,7 +156,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 */   initializeConfig: () => (/* binding */ initializeConfig),\n/* harmony export */   resetConfig: () => (/* binding */ resetConfig)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.modern.mjs\");\nvar __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {\n  function adopt(value) {\n    return value instanceof P ? value : new P(function (resolve) {\n      resolve(value);\n    });\n  }\n  return new (P || (P = Promise))(function (resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\n\nconst initializeConfig = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createAsyncThunk)('initializeConfig', (_, {\n  extra: {\n    api,\n    config\n  },\n  rejectWithValue\n}) => __awaiter(void 0, void 0, void 0, function* () {\n  var _a;\n  try {\n    const {\n      features,\n      defaultLocale,\n      preChat,\n      agentParticipant,\n      userParticipant,\n      startChatIcon\n    } = yield api.getConfig();\n    const defaultContentLocale = ((_a = config === null || config === void 0 ? void 0 : config.context) === null || _a === void 0 ? void 0 : _a.contentLocale) || defaultLocale;\n    const {\n      connectWhenInView\n    } = config;\n    return {\n      features,\n      defaultLocale,\n      preChat,\n      agentParticipant,\n      userParticipant,\n      startChatIcon,\n      defaultContentLocale,\n      connectWhenInView\n    };\n  } catch (error) {\n    return rejectWithValue(error);\n  }\n}));\nconst resetConfig = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createAsyncThunk)('resetConfig', (_, {\n  extra: {\n    config\n  }\n}) => __awaiter(void 0, void 0, void 0, function* () {\n  return config;\n}));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/actions.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   initializeConfig: () => (/* binding */ initializeConfig),\n/* harmony export */   resetConfig: () => (/* binding */ resetConfig)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.modern.mjs\");\nvar __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {\n  function adopt(value) {\n    return value instanceof P ? value : new P(function (resolve) {\n      resolve(value);\n    });\n  }\n  return new (P || (P = Promise))(function (resolve, reject) {\n    function fulfilled(value) {\n      try {\n        step(generator.next(value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function rejected(value) {\n      try {\n        step(generator[\"throw\"](value));\n      } catch (e) {\n        reject(e);\n      }\n    }\n    function step(result) {\n      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);\n    }\n    step((generator = generator.apply(thisArg, _arguments || [])).next());\n  });\n};\n\nconst initializeConfig = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createAsyncThunk)('initializeConfig', (_, {\n  extra: {\n    api,\n    config\n  },\n  rejectWithValue\n}) => __awaiter(void 0, void 0, void 0, function* () {\n  var _a, _b;\n  try {\n    const {\n      features,\n      defaultLocale,\n      preChat,\n      agentParticipant,\n      userParticipant,\n      startChatIcon\n    } = yield api.getConfig();\n    const defaultUserLocale = ((_a = config === null || config === void 0 ? void 0 : config.context) === null || _a === void 0 ? void 0 : _a.userLocale) || defaultLocale;\n    const defaultContentLocale = ((_b = config === null || config === void 0 ? void 0 : config.context) === null || _b === void 0 ? void 0 : _b.contentLocale) || defaultLocale;\n    const {\n      connectWhenInView\n    } = config;\n    return {\n      features,\n      defaultLocale,\n      preChat,\n      agentParticipant,\n      userParticipant,\n      startChatIcon,\n      defaultUserLocale,\n      defaultContentLocale,\n      connectWhenInView\n    };\n  } catch (error) {\n    return rejectWithValue(error);\n  }\n}));\nconst resetConfig = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createAsyncThunk)('resetConfig', (_, {\n  extra: {\n    config\n  }\n}) => __awaiter(void 0, void 0, void 0, function* () {\n  return config;\n}));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/actions.ts?");
 
 /***/ }),
 
@@ -189,7 +189,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 */   configSlice: () => (/* binding */ configSlice),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   initialConfigState: () => (/* binding */ initialConfigState),\n/* harmony export */   setConfig: () => (/* binding */ setConfig),\n/* harmony export */   setPreChatEvents: () => (/* binding */ setPreChatEvents),\n/* harmony export */   updateConfig: () => (/* binding */ updateConfig)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.modern.mjs\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! config */ \"./src/javascripts/config.ts\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n  var t = {};\n  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n  }\n  return t;\n};\n\n\n\n\nconst initialConfigState = Object.assign(Object.assign({}, config__WEBPACK_IMPORTED_MODULE_0__.defaultConfig), {\n  api: {\n    domain: '',\n    key: '',\n    secure: true,\n    sendEnvironment: true\n  },\n  notificationAudioURL: undefined,\n  hideOnNoUserResponse: false,\n  connectWhenInView: true,\n  showDisclaimer: false,\n  showSuggestions: true,\n  preChat: {\n    enterDelay: 1000,\n    exitAfter: 4000\n  },\n  continueChat: {\n    enterDelay: 0,\n    exitAfter: 2000\n  },\n  customComponents: {},\n  defaults: {\n    visible: null\n  },\n  preChatEvents: []\n});\nconst configKeys = ['hideOnNoUserResponse', 'connectWhenInView', 'showDisclaimer', 'showSuggestions', 'continueChat', 'preChat', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'visible', 'visibilityCallback', 'errorCallback', 'agentParticipant', 'userParticipant', 'startChatIcon', 'notificationAudioURL'];\nconst updateState = (state, config) => {\n  const _a = (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.pick)(config, configKeys),\n    {\n      messages\n    } = _a,\n    partialConfig = __rest(_a, [\"messages\"]);\n  let newState = state;\n  if (Object.keys(partialConfig).length > 0) {\n    newState = Object.assign(Object.assign({}, newState), partialConfig);\n  }\n  if (messages) {\n    newState = Object.assign(Object.assign({}, newState), {\n      messages: Object.assign(Object.assign({}, newState.messages), messages)\n    });\n  }\n  return newState;\n};\nconst configSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__.createSlice)({\n  name: 'config',\n  initialState: initialConfigState,\n  reducers: {\n    setConfig: (state, {\n      payload\n    }) => updateState(state, payload),\n    updateConfig: (state, {\n      payload\n    }) => updateState(state, payload),\n    setPreChatEvents: (state, {\n      payload\n    }) => {\n      state.preChatEvents = payload;\n    }\n  },\n  extraReducers: builder => {\n    builder.addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.resetConfig.fulfilled, config => config).addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initializeConfig.fulfilled, (state, {\n      payload: {\n        preChat,\n        agentParticipant,\n        userParticipant,\n        startChatIcon,\n        defaultContentLocale\n      }\n    }) => {\n      // @ts-ignore\n      state.preChatEvents = preChat.map(payload => ({\n        type: 'message',\n        payload\n      }));\n      state.context.contentLocale = defaultContentLocale;\n      state.agentParticipant = agentParticipant;\n      state.userParticipant = userParticipant;\n      state.startChatIcon = startChatIcon;\n    });\n  }\n});\nconst {\n  setConfig,\n  updateConfig,\n  setPreChatEvents\n} = configSlice.actions;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (configSlice.reducer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/slice.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   configSlice: () => (/* binding */ configSlice),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   initialConfigState: () => (/* binding */ initialConfigState),\n/* harmony export */   setConfig: () => (/* binding */ setConfig),\n/* harmony export */   setPreChatEvents: () => (/* binding */ setPreChatEvents),\n/* harmony export */   updateConfig: () => (/* binding */ updateConfig)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.modern.mjs\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! config */ \"./src/javascripts/config.ts\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\nvar __rest = undefined && undefined.__rest || function (s, e) {\n  var t = {};\n  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];\n  if (s != null && typeof Object.getOwnPropertySymbols === \"function\") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];\n  }\n  return t;\n};\n\n\n\n\nconst initialConfigState = Object.assign(Object.assign({}, config__WEBPACK_IMPORTED_MODULE_0__.defaultConfig), {\n  api: {\n    domain: '',\n    key: '',\n    secure: true,\n    sendEnvironment: true\n  },\n  notificationAudioURL: undefined,\n  hideOnNoUserResponse: false,\n  connectWhenInView: true,\n  showDisclaimer: false,\n  showSuggestions: true,\n  preChat: {\n    enterDelay: 1000,\n    exitAfter: 4000\n  },\n  continueChat: {\n    enterDelay: 0,\n    exitAfter: 2000\n  },\n  customComponents: {},\n  defaults: {\n    visible: null\n  },\n  preChatEvents: []\n});\nconst configKeys = ['hideOnNoUserResponse', 'connectWhenInView', 'showDisclaimer', 'showSuggestions', 'continueChat', 'preChat', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'visible', 'visibilityCallback', 'errorCallback', 'agentParticipant', 'userParticipant', 'startChatIcon', 'notificationAudioURL'];\nconst updateState = (state, config) => {\n  const _a = (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_2__.pick)(config, configKeys),\n    {\n      messages\n    } = _a,\n    partialConfig = __rest(_a, [\"messages\"]);\n  let newState = state;\n  if (Object.keys(partialConfig).length > 0) {\n    newState = Object.assign(Object.assign({}, newState), partialConfig);\n  }\n  if (messages) {\n    newState = Object.assign(Object.assign({}, newState), {\n      messages: Object.assign(Object.assign({}, newState.messages), messages)\n    });\n  }\n  return newState;\n};\nconst configSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__.createSlice)({\n  name: 'config',\n  initialState: initialConfigState,\n  reducers: {\n    setConfig: (state, {\n      payload\n    }) => updateState(state, payload),\n    updateConfig: (state, {\n      payload\n    }) => updateState(state, payload),\n    setPreChatEvents: (state, {\n      payload\n    }) => {\n      state.preChatEvents = payload;\n    }\n  },\n  extraReducers: builder => {\n    builder.addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.resetConfig.fulfilled, config => config).addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initializeConfig.fulfilled, (state, {\n      payload: {\n        preChat,\n        agentParticipant,\n        userParticipant,\n        startChatIcon,\n        defaultUserLocale,\n        defaultContentLocale\n      }\n    }) => {\n      // @ts-ignore\n      state.preChatEvents = preChat.map(payload => ({\n        type: 'message',\n        payload\n      }));\n      state.context.userLocale = defaultUserLocale;\n      state.context.contentLocale = defaultContentLocale;\n      state.agentParticipant = agentParticipant;\n      state.userParticipant = userParticipant;\n      state.startChatIcon = startChatIcon;\n    });\n  }\n});\nconst {\n  setConfig,\n  updateConfig,\n  setPreChatEvents\n} = configSlice.actions;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (configSlice.reducer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/slice.ts?");
 
 /***/ }),
 
@@ -299,7 +299,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 */   i18nSlice: () => (/* binding */ i18nSlice),\n/* harmony export */   setInitialLocale: () => (/* binding */ setInitialLocale),\n/* harmony export */   setTranslations: () => (/* binding */ setTranslations)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.modern.mjs\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.ts\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n/actions */ \"./src/javascripts/domains/i18n/actions.ts\");\n\n\n\n\nconst initialState = {\n  translations: {\n    'errors.configError.message': 'We are sorry this happened, please retry at a later time.',\n    'errors.configError.srText': 'A chat configuration error occurred. Our apologies, please retry at a later time.',\n    'errors.configError.title': 'Chat configuration error.',\n    'errors.general.buttonText': 'Restart chat',\n    'errors.general.message': 'Do you want to start a new chat session?',\n    'errors.general.srText': 'Something went wrong with the chat session. You can restart the chat.',\n    'errors.general.title': 'Something went wrong',\n    'errors.seamlyOffline.message': 'There might be a problem with your or our network connection. The chat session should resume as soon the connection is available again.',\n    'errors.seamlyOffline.srText': 'The chat has connection issues. There might be a problem with your or our network connection. The chat session should resume as soon as the connection is available again.',\n    'errors.seamlyOffline.title': 'Connection issues',\n    'errors.seamlyUnavailable.buttonText': 'Try again',\n    'errors.seamlyUnavailable.message': 'The server could not be reached. Try again in a little while.',\n    'errors.seamlyUnavailable.srText': 'The chat server could not be reached. Try again in a little while.',\n    'errors.seamlyUnavailable.title': 'Server unavailable'\n  },\n  isLoading: false,\n  initialLocale: undefined,\n  userLocale: undefined\n};\nconst i18nSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__.createSlice)({\n  name: 'app',\n  initialState,\n  reducers: {\n    setInitialLocale: (state, action) => {\n      state.initialLocale = action.payload;\n    },\n    setTranslations: (state, {\n      payload\n    }) => {\n      state.translations = payload;\n    }\n  },\n  extraReducers: builder => {\n    // Add reducers for additional action types here, and handle loading state as needed\n    builder.addCase(domains_app_actions__WEBPACK_IMPORTED_MODULE_0__.resetApp.pending, () => initialState).addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initializeConfig.fulfilled, (state, {\n      payload\n    }) => {\n      state.initialLocale = payload.defaultContentLocale;\n    }).addCase(domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale.pending, state => {\n      state.isLoading = true;\n    }).addCase(domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale.rejected, state => {\n      state.isLoading = false;\n    }).addCase(domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale.fulfilled, (state, {\n      payload\n    }) => {\n      state.isLoading = false;\n      if (!(payload === null || payload === void 0 ? void 0 : payload.translations)) {\n        return;\n      }\n      state.userLocale = payload.userLocale;\n      state.translations = Object.keys(payload.translations).sort().reduce((accum, key) => Object.assign(Object.assign({}, accum), {\n        [key]: payload.translations[key]\n      }), {});\n    });\n  }\n});\nconst {\n  setInitialLocale,\n  setTranslations\n} = i18nSlice.actions;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (i18nSlice.reducer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/i18n/slice.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   i18nSlice: () => (/* binding */ i18nSlice),\n/* harmony export */   setInitialLocale: () => (/* binding */ setInitialLocale),\n/* harmony export */   setTranslations: () => (/* binding */ setTranslations)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.modern.mjs\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.ts\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n/actions */ \"./src/javascripts/domains/i18n/actions.ts\");\n\n\n\n\nconst initialState = {\n  translations: {\n    'errors.configError.message': 'We are sorry this happened, please retry at a later time.',\n    'errors.configError.srText': 'A chat configuration error occurred. Our apologies, please retry at a later time.',\n    'errors.configError.title': 'Chat configuration error.',\n    'errors.general.buttonText': 'Restart chat',\n    'errors.general.message': 'Do you want to start a new chat session?',\n    'errors.general.srText': 'Something went wrong with the chat session. You can restart the chat.',\n    'errors.general.title': 'Something went wrong',\n    'errors.seamlyOffline.message': 'There might be a problem with your or our network connection. The chat session should resume as soon the connection is available again.',\n    'errors.seamlyOffline.srText': 'The chat has connection issues. There might be a problem with your or our network connection. The chat session should resume as soon as the connection is available again.',\n    'errors.seamlyOffline.title': 'Connection issues',\n    'errors.seamlyUnavailable.buttonText': 'Try again',\n    'errors.seamlyUnavailable.message': 'The server could not be reached. Try again in a little while.',\n    'errors.seamlyUnavailable.srText': 'The chat server could not be reached. Try again in a little while.',\n    'errors.seamlyUnavailable.title': 'Server unavailable'\n  },\n  isLoading: false,\n  initialLocale: undefined,\n  userLocale: undefined\n};\nconst i18nSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__.createSlice)({\n  name: 'app',\n  initialState,\n  reducers: {\n    setInitialLocale: (state, action) => {\n      state.initialLocale = action.payload;\n    },\n    setTranslations: (state, {\n      payload\n    }) => {\n      state.translations = payload;\n    }\n  },\n  extraReducers: builder => {\n    // Add reducers for additional action types here, and handle loading state as needed\n    builder.addCase(domains_app_actions__WEBPACK_IMPORTED_MODULE_0__.resetApp.pending, () => initialState).addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initializeConfig.fulfilled, (state, {\n      payload\n    }) => {\n      state.initialLocale = payload.defaultUserLocale;\n    }).addCase(domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale.pending, state => {\n      state.isLoading = true;\n    }).addCase(domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale.rejected, state => {\n      state.isLoading = false;\n    }).addCase(domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale.fulfilled, (state, {\n      payload\n    }) => {\n      state.isLoading = false;\n      if (!(payload === null || payload === void 0 ? void 0 : payload.translations)) {\n        return;\n      }\n      state.userLocale = payload.userLocale;\n      state.translations = Object.keys(payload.translations).sort().reduce((accum, key) => Object.assign(Object.assign({}, accum), {\n        [key]: payload.translations[key]\n      }), {});\n    });\n  }\n});\nconst {\n  setInitialLocale,\n  setTranslations\n} = i18nSlice.actions;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (i18nSlice.reducer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/i18n/slice.ts?");
 
 /***/ }),
 
@@ -409,7 +409,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 */   useLocaleNativeName: () => (/* binding */ useLocaleNativeName),\n/* harmony export */   useTranslatedEventData: () => (/* binding */ useTranslatedEventData),\n/* harmony export */   useTranslationProposal: () => (/* binding */ useTranslationProposal),\n/* harmony export */   useTranslations: () => (/* binding */ useTranslations),\n/* harmony export */   useTranslationsContainer: () => (/* binding */ useTranslationsContainer)\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 react_redux__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/dist/react-redux.mjs\");\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_translations_selectors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/translations/selectors */ \"./src/javascripts/domains/translations/selectors.ts\");\n/* harmony import */ var domains_translations_slice__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations/slice */ \"./src/javascripts/domains/translations/slice.ts\");\n/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n\n\n\n\n\n\n\n\n\nfunction useTranslations() {\n  const {\n    sendContext\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyCommands)();\n  const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_8__.useDispatch)();\n  const config = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_1__.useConfig)();\n  const enableTranslations = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(userLocale => {\n    sendContext({\n      userLocale\n    });\n  }, [sendContext]);\n  const disableTranslations = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    sendContext({\n      userLocale: config.context.userLocale\n    });\n    dispatch((0,domains_translations_slice__WEBPACK_IMPORTED_MODULE_4__.disableTranslation)());\n  }, [config.context, dispatch, sendContext]);\n  const {\n    languages,\n    isActive,\n    isAvailable,\n    currentLocale\n  } = (0,react_redux__WEBPACK_IMPORTED_MODULE_8__.useSelector)(({\n    translations\n  }) => translations);\n  return {\n    languages,\n    isActive,\n    isAvailable,\n    currentLocale,\n    enableTranslations,\n    disableTranslations\n  };\n}\nfunction useTranslatedEventData(channelEvent) {\n  const getTranslations = () => {\n    var _a, _b, _c, _d, _e, _f;\n    if (!(channelEvent === null || channelEvent === void 0 ? void 0 : channelEvent.payload)) return {\n      body: undefined,\n      translatedBody: undefined\n    };\n    if (channelEvent.type === 'participant') {\n      return {\n        body: (_a = channelEvent.payload) === null || _a === void 0 ? void 0 : _a.participant.introduction,\n        translatedBody: (_c = (_b = channelEvent.payload) === null || _b === void 0 ? void 0 : _b.participant) === null || _c === void 0 ? void 0 : _c.translatedIntroduction,\n        translation:\n        // @ts-ignore\n        (_e = (_d = channelEvent.payload) === null || _d === void 0 ? void 0 : _d.participant) === null || _e === void 0 ? void 0 : _e.translation\n      };\n    }\n    return {\n      body: channelEvent.payload.body,\n      translatedBody: channelEvent.payload.translatedBody,\n      // @ts-ignore\n      translation: (_f = channelEvent === null || channelEvent === void 0 ? void 0 : channelEvent.payload) === null || _f === void 0 ? void 0 : _f.translation\n    };\n  };\n  const {\n    translatedBody,\n    translation,\n    body\n  } = getTranslations();\n  const hasTranslation = !!translatedBody;\n  const isTranslated = (0,react_redux__WEBPACK_IMPORTED_MODULE_8__.useSelector)((0,domains_translations_selectors__WEBPACK_IMPORTED_MODULE_3__.selectIsTranslated)(channelEvent));\n  return {\n    // @ts-ignore\n    body: hasTranslation && isTranslated ? translatedBody : body,\n    hasTranslation,\n    isTranslated: isTranslated && hasTranslation,\n    locale: translation === null || translation === void 0 ? void 0 : translation.locale\n  };\n}\nfunction useTranslationsContainer() {\n  const id = (0,react_redux__WEBPACK_IMPORTED_MODULE_8__.useSelector)(({\n    translations\n  }) => translations.containerId);\n  const focusContainer = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useElementFocusingById)(id);\n  return {\n    id,\n    focusContainer\n  };\n}\nfunction useLocaleNativeName(userLocale) {\n  const {\n    languages\n  } = useTranslations();\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    var _a;\n    return (_a = languages === null || languages === void 0 ? void 0 : languages.find(lang => lang.locale === userLocale)) === null || _a === void 0 ? void 0 : _a.nativeName;\n  }, [userLocale, languages]);\n}\nconst useTranslationProposal = () => {\n  const {\n    isActive,\n    languages\n  } = useTranslations();\n  const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_8__.useDispatch)();\n  const {\n    sendAction\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyCommands)();\n  const {\n    translationProposal\n  } = (0,react_redux__WEBPACK_IMPORTED_MODULE_8__.useSelector)(state => state.translations);\n  const {\n    enableTranslations\n  } = useTranslations();\n  const {\n    isOpen\n  } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n  const {\n    userLocale\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const proposedLocale = translationProposal === null || translationProposal === void 0 ? void 0 : translationProposal.proposedLocale;\n  const proposedLocaleNativeName = useLocaleNativeName(proposedLocale);\n  const showProposal = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => translationProposal !== null && !isActive && isOpen && userLocale !== proposedLocale && languages.some(language => language.locale === proposedLocale), [translationProposal, isActive, isOpen, userLocale, proposedLocale, languages]);\n  const dismissTranslationProposal = () => {\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__.actionTypes.dismiss,\n      body: {\n        type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__.TRANSLATION_PROPOSAL\n      }\n    });\n    dispatch((0,domains_translations_slice__WEBPACK_IMPORTED_MODULE_4__.disableTranslationProposalPrompt)());\n  };\n  const activateTranslationProposal = () => {\n    enableTranslations(translationProposal === null || translationProposal === void 0 ? void 0 : translationProposal.proposedLocale);\n  };\n  return {\n    activateTranslationProposal,\n    dismissTranslationProposal,\n    proposedLocale,\n    proposedLocaleNativeName,\n    showProposal,\n    translationProposal\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/hooks.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   useLocaleNativeName: () => (/* binding */ useLocaleNativeName),\n/* harmony export */   useTranslatedEventData: () => (/* binding */ useTranslatedEventData),\n/* harmony export */   useTranslationProposal: () => (/* binding */ useTranslationProposal),\n/* harmony export */   useTranslations: () => (/* binding */ useTranslations),\n/* harmony export */   useTranslationsContainer: () => (/* binding */ useTranslationsContainer)\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 react_redux__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/dist/react-redux.mjs\");\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_translations_selectors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/translations/selectors */ \"./src/javascripts/domains/translations/selectors.ts\");\n/* harmony import */ var domains_translations_slice__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations/slice */ \"./src/javascripts/domains/translations/slice.ts\");\n/* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/visibility/hooks */ \"./src/javascripts/domains/visibility/hooks.ts\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.ts\");\n\n\n\n\n\n\n\n\n\nfunction useTranslations() {\n  const {\n    sendContext\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyCommands)();\n  const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_8__.useDispatch)();\n  const config = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_1__.useConfig)();\n  const enableTranslations = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(userLocale => {\n    sendContext({\n      userLocale\n    });\n  }, [sendContext]);\n  const disableTranslations = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    sendContext({\n      userLocale: config.context.contentLocale\n    });\n    dispatch((0,domains_translations_slice__WEBPACK_IMPORTED_MODULE_4__.disableTranslation)());\n  }, [config.context, dispatch, sendContext]);\n  const {\n    languages,\n    isActive,\n    isAvailable,\n    currentLocale\n  } = (0,react_redux__WEBPACK_IMPORTED_MODULE_8__.useSelector)(({\n    translations\n  }) => translations);\n  return {\n    languages,\n    isActive,\n    isAvailable,\n    currentLocale,\n    enableTranslations,\n    disableTranslations\n  };\n}\nfunction useTranslatedEventData(channelEvent) {\n  const getTranslations = () => {\n    var _a, _b, _c, _d, _e, _f;\n    if (!(channelEvent === null || channelEvent === void 0 ? void 0 : channelEvent.payload)) return {\n      body: undefined,\n      translatedBody: undefined\n    };\n    if (channelEvent.type === 'participant') {\n      return {\n        body: (_a = channelEvent.payload) === null || _a === void 0 ? void 0 : _a.participant.introduction,\n        translatedBody: (_c = (_b = channelEvent.payload) === null || _b === void 0 ? void 0 : _b.participant) === null || _c === void 0 ? void 0 : _c.translatedIntroduction,\n        translation:\n        // @ts-ignore\n        (_e = (_d = channelEvent.payload) === null || _d === void 0 ? void 0 : _d.participant) === null || _e === void 0 ? void 0 : _e.translation\n      };\n    }\n    return {\n      body: channelEvent.payload.body,\n      translatedBody: channelEvent.payload.translatedBody,\n      // @ts-ignore\n      translation: (_f = channelEvent === null || channelEvent === void 0 ? void 0 : channelEvent.payload) === null || _f === void 0 ? void 0 : _f.translation\n    };\n  };\n  const {\n    translatedBody,\n    translation,\n    body\n  } = getTranslations();\n  const hasTranslation = !!translatedBody;\n  const isTranslated = (0,react_redux__WEBPACK_IMPORTED_MODULE_8__.useSelector)((0,domains_translations_selectors__WEBPACK_IMPORTED_MODULE_3__.selectIsTranslated)(channelEvent));\n  return {\n    // @ts-ignore\n    body: hasTranslation && isTranslated ? translatedBody : body,\n    hasTranslation,\n    isTranslated: isTranslated && hasTranslation,\n    locale: translation === null || translation === void 0 ? void 0 : translation.locale\n  };\n}\nfunction useTranslationsContainer() {\n  const id = (0,react_redux__WEBPACK_IMPORTED_MODULE_8__.useSelector)(({\n    translations\n  }) => translations.containerId);\n  const focusContainer = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useElementFocusingById)(id);\n  return {\n    id,\n    focusContainer\n  };\n}\nfunction useLocaleNativeName(userLocale) {\n  const {\n    languages\n  } = useTranslations();\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    var _a;\n    return (_a = languages === null || languages === void 0 ? void 0 : languages.find(lang => lang.locale === userLocale)) === null || _a === void 0 ? void 0 : _a.nativeName;\n  }, [userLocale, languages]);\n}\nconst useTranslationProposal = () => {\n  const {\n    isActive,\n    languages\n  } = useTranslations();\n  const dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_8__.useDispatch)();\n  const {\n    sendAction\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useSeamlyCommands)();\n  const {\n    translationProposal\n  } = (0,react_redux__WEBPACK_IMPORTED_MODULE_8__.useSelector)(state => state.translations);\n  const {\n    enableTranslations\n  } = useTranslations();\n  const {\n    isOpen\n  } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n  const {\n    userLocale\n  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const proposedLocale = translationProposal === null || translationProposal === void 0 ? void 0 : translationProposal.proposedLocale;\n  const proposedLocaleNativeName = useLocaleNativeName(proposedLocale);\n  const showProposal = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => translationProposal !== null && !isActive && isOpen && userLocale !== proposedLocale && languages.some(language => language.locale === proposedLocale), [translationProposal, isActive, isOpen, userLocale, proposedLocale, languages]);\n  const dismissTranslationProposal = () => {\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__.actionTypes.dismiss,\n      body: {\n        type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__.TRANSLATION_PROPOSAL\n      }\n    });\n    dispatch((0,domains_translations_slice__WEBPACK_IMPORTED_MODULE_4__.disableTranslationProposalPrompt)());\n  };\n  const activateTranslationProposal = () => {\n    enableTranslations(translationProposal === null || translationProposal === void 0 ? void 0 : translationProposal.proposedLocale);\n  };\n  return {\n    activateTranslationProposal,\n    dismissTranslationProposal,\n    proposedLocale,\n    proposedLocaleNativeName,\n    showProposal,\n    translationProposal\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/hooks.ts?");
 
 /***/ }),
 
@@ -420,7 +420,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 domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.ts\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n/actions */ \"./src/javascripts/domains/i18n/actions.ts\");\n/* harmony import */ var domains_i18n_selectors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n/selectors */ \"./src/javascripts/domains/i18n/selectors.ts\");\n/* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/store/slice */ \"./src/javascripts/domains/store/slice.ts\");\n/* harmony import */ var domains_translations_slice__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/translations/slice */ \"./src/javascripts/domains/translations/slice.ts\");\n\n\n\n\n\n\nconst createI18nMiddleware = ({\n  dispatch,\n  getState\n}) => {\n  return next => {\n    return action => {\n      var _a, _b, _c, _d, _e, _f, _g;\n      const result = next(action);\n      if (domains_store_slice__WEBPACK_IMPORTED_MODULE_4__.setHistory.match(action)) {\n        if ((_b = (_a = action.payload) === null || _a === void 0 ? void 0 : _a.translation) === null || _b === void 0 ? void 0 : _b.enabled) {\n          dispatch((0,domains_translations_slice__WEBPACK_IMPORTED_MODULE_5__.enableTranslation)(action.payload.translation.locale));\n          dispatch((0,domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale)(action.payload.translation.locale));\n          return result;\n        }\n      }\n      if (domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initializeConfig.fulfilled.match(action)) {\n        if (action.payload.defaultContentLocale) {\n          dispatch((0,domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale)(action.payload.defaultContentLocale));\n          return result;\n        }\n      }\n      if (domains_app_actions__WEBPACK_IMPORTED_MODULE_0__.initializeApp.fulfilled.match(action)) {\n        dispatch((0,domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale)(action.payload.contentLocale));\n        return result;\n      }\n      if (domains_store_slice__WEBPACK_IMPORTED_MODULE_4__.addEvent.match(action)) {\n        if (action.payload.type === 'info' && ((_d = (_c = action.payload) === null || _c === void 0 ? void 0 : _c.payload) === null || _d === void 0 ? void 0 : _d.body) && 'subtype' in action.payload.payload.body && ((_g = (_f = (_e = action.payload) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.body) === null || _g === void 0 ? void 0 : _g.subtype) === 'new_translation' && action.payload.payload.body.translationEnabled) {\n          dispatch((0,domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale)(action.payload.payload.body.translationLocale));\n          return result;\n        }\n      }\n      if (domains_translations_slice__WEBPACK_IMPORTED_MODULE_5__.disableTranslation.match(action)) {\n        const initialLocale = (0,domains_i18n_selectors__WEBPACK_IMPORTED_MODULE_3__.selectInitialLocale)(getState());\n        dispatch((0,domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale)(initialLocale));\n        return result;\n      }\n      return result;\n    };\n  };\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (createI18nMiddleware);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/middleware.ts?");
+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 domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.ts\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n/actions */ \"./src/javascripts/domains/i18n/actions.ts\");\n/* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/store/slice */ \"./src/javascripts/domains/store/slice.ts\");\n/* harmony import */ var domains_translations_slice__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations/slice */ \"./src/javascripts/domains/translations/slice.ts\");\n\n\n\n\n\nconst createI18nMiddleware = ({\n  dispatch,\n  getState\n}) => {\n  return next => {\n    return action => {\n      var _a, _b, _c, _d, _e, _f, _g;\n      const result = next(action);\n      if (domains_store_slice__WEBPACK_IMPORTED_MODULE_3__.setHistory.match(action)) {\n        if ((_b = (_a = action.payload) === null || _a === void 0 ? void 0 : _a.translation) === null || _b === void 0 ? void 0 : _b.enabled) {\n          dispatch((0,domains_translations_slice__WEBPACK_IMPORTED_MODULE_4__.enableTranslation)(action.payload.translation.locale));\n          dispatch((0,domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale)(action.payload.translation.locale));\n          return result;\n        }\n      }\n      if (domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initializeConfig.fulfilled.match(action)) {\n        if (action.payload.defaultUserLocale) {\n          dispatch((0,domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale)(action.payload.defaultUserLocale));\n          return result;\n        }\n      }\n      if (domains_app_actions__WEBPACK_IMPORTED_MODULE_0__.initializeApp.fulfilled.match(action)) {\n        if (action.payload.userLocale) {\n          dispatch((0,domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale)(action.payload.userLocale));\n        }\n        return result;\n      }\n      if (domains_store_slice__WEBPACK_IMPORTED_MODULE_3__.addEvent.match(action)) {\n        if (action.payload.type === 'info' && ((_d = (_c = action.payload) === null || _c === void 0 ? void 0 : _c.payload) === null || _d === void 0 ? void 0 : _d.body) && 'subtype' in action.payload.payload.body && ((_g = (_f = (_e = action.payload) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.body) === null || _g === void 0 ? void 0 : _g.subtype) === 'new_translation' && action.payload.payload.body.translationEnabled) {\n          dispatch((0,domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale)(action.payload.payload.body.translationLocale));\n          return result;\n        }\n      }\n      return result;\n    };\n  };\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (createI18nMiddleware);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/middleware.ts?");
 
 /***/ }),
 
@@ -442,7 +442,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 */   disableEventsTranslation: () => (/* binding */ disableEventsTranslation),\n/* harmony export */   disableTranslation: () => (/* binding */ disableTranslation),\n/* harmony export */   disableTranslationProposalPrompt: () => (/* binding */ disableTranslationProposalPrompt),\n/* harmony export */   enableEventsTranslation: () => (/* binding */ enableEventsTranslation),\n/* harmony export */   enableTranslation: () => (/* binding */ enableTranslation),\n/* harmony export */   setTranslationProposalPrompt: () => (/* binding */ setTranslationProposalPrompt),\n/* harmony export */   translationSlice: () => (/* binding */ translationSlice),\n/* harmony export */   translationsInitialState: () => (/* binding */ translationsInitialState)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.modern.mjs\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.ts\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n/actions */ \"./src/javascripts/domains/i18n/actions.ts\");\n/* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/store/slice */ \"./src/javascripts/domains/store/slice.ts\");\n\n\n\n\n\nconst translationsInitialState = {\n  isActive: false,\n  currentLocale: undefined,\n  isAvailable: false,\n  languages: [],\n  containerId: (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__.nanoid)(),\n  translatedEventGroups: {},\n  translationProposal: null\n};\nconst getLastGroupId = (events, id) => {\n  const eventGroup = [...events].reduce((acc, {\n    payload\n  }, _index, arr) => {\n    var _a;\n    if (acc[id]) {\n      // Splice to break early (make the reducer think we are done)\n      // This is needed to avoid events of other groups from being added to the array.\n      // @ts-ignore\n      if ((payload === null || payload === void 0 ? void 0 : payload.type) === 'divider' && ((_a = payload === null || payload === void 0 ? void 0 : payload.body) === null || _a === void 0 ? void 0 : _a.translationEnabled)) {\n        arr.splice(0);\n        return acc;\n      }\n      acc[id].push(payload.id);\n    }\n    if (payload.id === id) acc[id] = [];\n    return acc;\n  }, {});\n  const [[groupId, eventIds]] = Object.entries(eventGroup);\n  const lastGroupId = events\n  // @ts-ignore\n  .filter(event => {\n    var _a;\n    return ((_a = event.payload) === null || _a === void 0 ? void 0 : _a.type) === 'divider';\n  }).map(event => event.payload.id).at(-1);\n  return {\n    lastGroupId,\n    groupId,\n    eventIds\n  };\n};\nconst translationSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__.createSlice)({\n  name: 'translation',\n  initialState: translationsInitialState,\n  reducers: {\n    enableTranslation: (state, {\n      payload\n    }) => {\n      state.isActive = true;\n      state.currentLocale = payload;\n    },\n    disableTranslation: state => {\n      state.isActive = false;\n      state.currentLocale = undefined;\n    },\n    enableEventsTranslation: (state, {\n      payload: {\n        events,\n        id\n      }\n    }) => {\n      delete state.translatedEventGroups[id];\n      const {\n        lastGroupId\n      } = getLastGroupId(events, id);\n      state.lastGroupId = lastGroupId;\n    },\n    disableEventsTranslation: (state, {\n      payload: {\n        events,\n        id\n      }\n    }) => {\n      const {\n        lastGroupId,\n        groupId,\n        eventIds\n      } = getLastGroupId(events, id);\n      state.lastGroupId = lastGroupId;\n      state.translatedEventGroups[groupId] = eventIds;\n    },\n    disableTranslationProposalPrompt: state => {\n      state.translationProposal = null;\n    },\n    setTranslationProposalPrompt: (state, {\n      payload\n    }) => {\n      state.translationProposal = payload;\n    }\n  },\n  extraReducers: builder => {\n    builder.addCase(domains_app_actions__WEBPACK_IMPORTED_MODULE_0__.resetApp.pending, () => translationsInitialState).addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initializeConfig.fulfilled, (state, {\n      payload\n    }) => {\n      var _a;\n      const feature = (_a = payload === null || payload === void 0 ? void 0 : payload.features) === null || _a === void 0 ? void 0 : _a.translation;\n      if (!feature) return;\n      state.isAvailable = feature.enabled === true;\n      state.languages = [...feature.languages].sort((a, b) => {\n        if (a.locale === payload.defaultContentLocale) return -1;\n        if (b.locale === payload.defaultContentLocale) return 1;\n        return a.nativeName.localeCompare(b.nativeName, undefined, {\n          sensitivity: 'base'\n        });\n      });\n    }).addCase(domains_store_slice__WEBPACK_IMPORTED_MODULE_3__.setHistory, (state, {\n      payload\n    }) => {\n      state.translationProposal = payload.translationProposal;\n    }).addCase(domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale.fulfilled, (state, {\n      payload\n    }) => {\n      state.currentLocale = payload.userLocale;\n    }).addCase(domains_store_slice__WEBPACK_IMPORTED_MODULE_3__.addEvent, (state, {\n      payload\n    }) => {\n      if (state.translatedEventGroups[state.lastGroupId]) {\n        state.translatedEventGroups[state.lastGroupId].push(payload.payload.id);\n      }\n    });\n  }\n});\nconst {\n  enableTranslation,\n  disableTranslation,\n  enableEventsTranslation,\n  disableEventsTranslation,\n  setTranslationProposalPrompt,\n  disableTranslationProposalPrompt\n} = translationSlice.actions;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (translationSlice.reducer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/slice.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   disableEventsTranslation: () => (/* binding */ disableEventsTranslation),\n/* harmony export */   disableTranslation: () => (/* binding */ disableTranslation),\n/* harmony export */   disableTranslationProposalPrompt: () => (/* binding */ disableTranslationProposalPrompt),\n/* harmony export */   enableEventsTranslation: () => (/* binding */ enableEventsTranslation),\n/* harmony export */   enableTranslation: () => (/* binding */ enableTranslation),\n/* harmony export */   setTranslationProposalPrompt: () => (/* binding */ setTranslationProposalPrompt),\n/* harmony export */   translationSlice: () => (/* binding */ translationSlice),\n/* harmony export */   translationsInitialState: () => (/* binding */ translationsInitialState)\n/* harmony export */ });\n/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @reduxjs/toolkit */ \"./node_modules/@reduxjs/toolkit/dist/redux-toolkit.modern.mjs\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.ts\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.ts\");\n/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n/actions */ \"./src/javascripts/domains/i18n/actions.ts\");\n/* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/store/slice */ \"./src/javascripts/domains/store/slice.ts\");\n\n\n\n\n\nconst translationsInitialState = {\n  isActive: false,\n  currentLocale: undefined,\n  isAvailable: false,\n  languages: [],\n  containerId: (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__.nanoid)(),\n  translatedEventGroups: {},\n  translationProposal: null\n};\nconst getLastGroupId = (events, id) => {\n  const eventGroup = [...events].reduce((acc, {\n    payload\n  }, _index, arr) => {\n    var _a;\n    if (acc[id]) {\n      // Splice to break early (make the reducer think we are done)\n      // This is needed to avoid events of other groups from being added to the array.\n      // @ts-ignore\n      if ((payload === null || payload === void 0 ? void 0 : payload.type) === 'divider' && ((_a = payload === null || payload === void 0 ? void 0 : payload.body) === null || _a === void 0 ? void 0 : _a.translationEnabled)) {\n        arr.splice(0);\n        return acc;\n      }\n      acc[id].push(payload.id);\n    }\n    if (payload.id === id) acc[id] = [];\n    return acc;\n  }, {});\n  const [[groupId, eventIds]] = Object.entries(eventGroup);\n  const lastGroupId = events\n  // @ts-ignore\n  .filter(event => {\n    var _a;\n    return ((_a = event.payload) === null || _a === void 0 ? void 0 : _a.type) === 'divider';\n  }).map(event => event.payload.id).at(-1);\n  return {\n    lastGroupId,\n    groupId,\n    eventIds\n  };\n};\nconst translationSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__.createSlice)({\n  name: 'translation',\n  initialState: translationsInitialState,\n  reducers: {\n    enableTranslation: (state, {\n      payload\n    }) => {\n      state.isActive = true;\n      state.currentLocale = payload;\n    },\n    disableTranslation: state => {\n      state.isActive = false;\n      state.currentLocale = undefined;\n    },\n    enableEventsTranslation: (state, {\n      payload: {\n        events,\n        id\n      }\n    }) => {\n      delete state.translatedEventGroups[id];\n      const {\n        lastGroupId\n      } = getLastGroupId(events, id);\n      state.lastGroupId = lastGroupId;\n    },\n    disableEventsTranslation: (state, {\n      payload: {\n        events,\n        id\n      }\n    }) => {\n      const {\n        lastGroupId,\n        groupId,\n        eventIds\n      } = getLastGroupId(events, id);\n      state.lastGroupId = lastGroupId;\n      state.translatedEventGroups[groupId] = eventIds;\n    },\n    disableTranslationProposalPrompt: state => {\n      state.translationProposal = null;\n    },\n    setTranslationProposalPrompt: (state, {\n      payload\n    }) => {\n      state.translationProposal = payload;\n    }\n  },\n  extraReducers: builder => {\n    builder.addCase(domains_app_actions__WEBPACK_IMPORTED_MODULE_0__.resetApp.pending, () => translationsInitialState).addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initializeConfig.fulfilled, (state, {\n      payload\n    }) => {\n      var _a;\n      const feature = (_a = payload === null || payload === void 0 ? void 0 : payload.features) === null || _a === void 0 ? void 0 : _a.translation;\n      if (!feature) return;\n      state.isAvailable = feature.enabled === true;\n      state.languages = [...feature.languages].sort((a, b) => {\n        if (a.locale === payload.defaultUserLocale) return -1;\n        if (b.locale === payload.defaultUserLocale) return 1;\n        return a.nativeName.localeCompare(b.nativeName, undefined, {\n          sensitivity: 'base'\n        });\n      });\n    }).addCase(domains_store_slice__WEBPACK_IMPORTED_MODULE_3__.setHistory, (state, {\n      payload\n    }) => {\n      state.translationProposal = payload.translationProposal;\n    }).addCase(domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale.fulfilled, (state, {\n      payload\n    }) => {\n      state.currentLocale = payload.userLocale;\n    }).addCase(domains_store_slice__WEBPACK_IMPORTED_MODULE_3__.addEvent, (state, {\n      payload\n    }) => {\n      if (state.translatedEventGroups[state.lastGroupId]) {\n        state.translatedEventGroups[state.lastGroupId].push(payload.payload.id);\n      }\n    });\n  }\n});\nconst {\n  enableTranslation,\n  disableTranslation,\n  enableEventsTranslation,\n  disableEventsTranslation,\n  setTranslationProposalPrompt,\n  disableTranslationProposalPrompt\n} = translationSlice.actions;\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (translationSlice.reducer);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/slice.ts?");
 
 /***/ }),
 
@@ -2222,7 +2222,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_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/compat */ \"preact/compat\");\n/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_compat__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_translations_components_options_dialog_translation_option__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations/components/options-dialog/translation-option */ \"./src/javascripts/domains/translations/components/options-dialog/translation-option.tsx\");\n/* harmony import */ var domains_translations_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/hooks/focus-helper-hooks */ \"./src/javascripts/ui/hooks/focus-helper-hooks.js\");\n\n\n\n\n\n\n\n\nconst isChecked = (language, currentLocale, isOriginal) => currentLocale === language.locale || (!currentLocale && isOriginal);\nconst TranslationOptions = ({ onChange, describedById, }) => {\n    const { context: { contentLocale }, } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__.useConfig)();\n    const { t } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n    const { languages, currentLocale, enableTranslations, disableTranslations } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_5__.useTranslations)();\n    const focusSkiplinkTarget = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_7__.useSkiplinkTargetFocusing)();\n    const handleChange = (locale) => () => {\n        if (locale === currentLocale || contentLocale === locale) {\n            disableTranslations();\n        }\n        else {\n            enableTranslations(locale);\n        }\n        onChange();\n        focusSkiplinkTarget();\n    };\n    const { primaryLanguages, remainingLanguages } = (0,preact_compat__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => languages.reduce((acc, language) => {\n        const isOriginal = language.locale === contentLocale;\n        const checked = isChecked(language, currentLocale, isOriginal);\n        if (language.locale !== contentLocale) {\n            acc.remainingLanguages.push(Object.assign(Object.assign({}, language), { checked, isOriginal }));\n        }\n        const selectedIdx = acc.remainingLanguages.findIndex((l) => l.locale === currentLocale);\n        if (isOriginal || (checked && selectedIdx > 4)) {\n            acc.primaryLanguages.push(Object.assign(Object.assign({}, language), { checked, isOriginal }));\n        }\n        return acc;\n    }, {\n        primaryLanguages: [],\n        remainingLanguages: [],\n    }), [currentLocale, contentLocale, languages]);\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"ul\", { \"aria-describedby\": describedById, role: \"listbox\", tabIndex: -1, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('translation-options'), children: [primaryLanguages.map(({ locale, nativeName, checked, isOriginal }, idx) => ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(domains_translations_components_options_dialog_translation_option__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { id: locale, label: nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(locale), itemClassName: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)({\n                    'translation-options__item--original': isOriginal,\n                    'translation-options__item--selected': checked && idx !== 0,\n                }) }, locale))), remainingLanguages.map(({ locale, nativeName, checked, isOriginal }) => ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(domains_translations_components_options_dialog_translation_option__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { id: locale, label: nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(locale) }, locale)))] }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TranslationOptions);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/options-dialog/translation-options.tsx?");
+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_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/compat */ \"preact/compat\");\n/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_compat__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.ts\");\n/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n/hooks */ \"./src/javascripts/domains/i18n/hooks.ts\");\n/* harmony import */ var domains_translations_components_options_dialog_translation_option__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations/components/options-dialog/translation-option */ \"./src/javascripts/domains/translations/components/options-dialog/translation-option.tsx\");\n/* harmony import */ var domains_translations_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/translations/hooks */ \"./src/javascripts/domains/translations/hooks.ts\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/hooks/focus-helper-hooks */ \"./src/javascripts/ui/hooks/focus-helper-hooks.js\");\n\n\n\n\n\n\n\n\nconst isChecked = (language, currentLocale, isOriginal) => currentLocale === language.locale || (!currentLocale && isOriginal);\nconst TranslationOptions = ({ onChange, describedById, }) => {\n    const { context: { userLocale, contentLocale }, } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__.useConfig)();\n    const { t } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n    const { languages, currentLocale, enableTranslations, disableTranslations } = (0,domains_translations_hooks__WEBPACK_IMPORTED_MODULE_5__.useTranslations)();\n    const focusSkiplinkTarget = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_7__.useSkiplinkTargetFocusing)();\n    const handleChange = (locale) => () => {\n        if (locale === currentLocale || contentLocale === locale) {\n            disableTranslations();\n        }\n        else {\n            enableTranslations(locale);\n        }\n        onChange();\n        focusSkiplinkTarget();\n    };\n    const { primaryLanguages, remainingLanguages } = (0,preact_compat__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => languages.reduce((acc, language) => {\n        const isOriginal = language.locale === contentLocale;\n        const checked = isChecked(language, currentLocale, isOriginal);\n        if (language.locale !== contentLocale) {\n            acc.remainingLanguages.push(Object.assign(Object.assign({}, language), { checked, isOriginal }));\n        }\n        const selectedIdx = acc.remainingLanguages.findIndex((l) => l.locale === currentLocale);\n        if (isOriginal || (checked && selectedIdx > 4)) {\n            acc.primaryLanguages.push(Object.assign(Object.assign({}, language), { checked, isOriginal }));\n        }\n        return acc;\n    }, {\n        primaryLanguages: [],\n        remainingLanguages: [],\n    }), [currentLocale, contentLocale, languages]);\n    return ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(\"ul\", { \"aria-describedby\": describedById, role: \"listbox\", tabIndex: -1, className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('translation-options'), children: [primaryLanguages.map(({ locale, nativeName, checked, isOriginal }, idx) => ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(domains_translations_components_options_dialog_translation_option__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { id: locale, label: nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(locale), itemClassName: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)({\n                    'translation-options__item--original': isOriginal,\n                    'translation-options__item--selected': checked && idx !== 0,\n                }) }, locale))), remainingLanguages.map(({ locale, nativeName, checked, isOriginal }) => ((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(domains_translations_components_options_dialog_translation_option__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { id: locale, label: nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(locale) }, locale)))] }));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TranslationOptions);\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/components/options-dialog/translation-options.tsx?");
 
 /***/ }),