@seamly/web-ui 20.5.0 → 20.7.0

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

@@ -62,17 +62,6 @@ eval("/**\n * This is the common logic for both the Node.js and web browser\n *
 
 /***/ }),
 
-/***/ "./node_modules/phoenix/priv/static/phoenix.esm.js":
-/*!*********************************************************!*\
-  !*** ./node_modules/phoenix/priv/static/phoenix.esm.js ***!
-  \*********************************************************/
-/***/ ((__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 */   \"Channel\": () => (/* binding */ Channel),\n/* harmony export */   \"LongPoll\": () => (/* binding */ LongPoll),\n/* harmony export */   \"Presence\": () => (/* binding */ Presence),\n/* harmony export */   \"Serializer\": () => (/* binding */ serializer_default),\n/* harmony export */   \"Socket\": () => (/* binding */ Socket)\n/* harmony export */ });\n// js/phoenix/utils.js\nvar closure = value => {\n  if (typeof value === \"function\") {\n    return value;\n  } else {\n    let closure2 = function () {\n      return value;\n    };\n\n    return closure2;\n  }\n}; // js/phoenix/constants.js\n\n\nvar globalSelf = typeof self !== \"undefined\" ? self : null;\nvar phxWindow = typeof window !== \"undefined\" ? window : null;\nvar global = globalSelf || phxWindow || void 0;\nvar DEFAULT_VSN = \"2.0.0\";\nvar SOCKET_STATES = {\n  connecting: 0,\n  open: 1,\n  closing: 2,\n  closed: 3\n};\nvar DEFAULT_TIMEOUT = 1e4;\nvar WS_CLOSE_NORMAL = 1e3;\nvar CHANNEL_STATES = {\n  closed: \"closed\",\n  errored: \"errored\",\n  joined: \"joined\",\n  joining: \"joining\",\n  leaving: \"leaving\"\n};\nvar CHANNEL_EVENTS = {\n  close: \"phx_close\",\n  error: \"phx_error\",\n  join: \"phx_join\",\n  reply: \"phx_reply\",\n  leave: \"phx_leave\"\n};\nvar TRANSPORTS = {\n  longpoll: \"longpoll\",\n  websocket: \"websocket\"\n};\nvar XHR_STATES = {\n  complete: 4\n}; // js/phoenix/push.js\n\nvar Push = class {\n  constructor(channel, event, payload, timeout) {\n    this.channel = channel;\n    this.event = event;\n\n    this.payload = payload || function () {\n      return {};\n    };\n\n    this.receivedResp = null;\n    this.timeout = timeout;\n    this.timeoutTimer = null;\n    this.recHooks = [];\n    this.sent = false;\n  }\n\n  resend(timeout) {\n    this.timeout = timeout;\n    this.reset();\n    this.send();\n  }\n\n  send() {\n    if (this.hasReceived(\"timeout\")) {\n      return;\n    }\n\n    this.startTimeout();\n    this.sent = true;\n    this.channel.socket.push({\n      topic: this.channel.topic,\n      event: this.event,\n      payload: this.payload(),\n      ref: this.ref,\n      join_ref: this.channel.joinRef()\n    });\n  }\n\n  receive(status, callback) {\n    if (this.hasReceived(status)) {\n      callback(this.receivedResp.response);\n    }\n\n    this.recHooks.push({\n      status,\n      callback\n    });\n    return this;\n  }\n\n  reset() {\n    this.cancelRefEvent();\n    this.ref = null;\n    this.refEvent = null;\n    this.receivedResp = null;\n    this.sent = false;\n  }\n\n  matchReceive({\n    status,\n    response,\n    _ref\n  }) {\n    this.recHooks.filter(h => h.status === status).forEach(h => h.callback(response));\n  }\n\n  cancelRefEvent() {\n    if (!this.refEvent) {\n      return;\n    }\n\n    this.channel.off(this.refEvent);\n  }\n\n  cancelTimeout() {\n    clearTimeout(this.timeoutTimer);\n    this.timeoutTimer = null;\n  }\n\n  startTimeout() {\n    if (this.timeoutTimer) {\n      this.cancelTimeout();\n    }\n\n    this.ref = this.channel.socket.makeRef();\n    this.refEvent = this.channel.replyEventName(this.ref);\n    this.channel.on(this.refEvent, payload => {\n      this.cancelRefEvent();\n      this.cancelTimeout();\n      this.receivedResp = payload;\n      this.matchReceive(payload);\n    });\n    this.timeoutTimer = setTimeout(() => {\n      this.trigger(\"timeout\", {});\n    }, this.timeout);\n  }\n\n  hasReceived(status) {\n    return this.receivedResp && this.receivedResp.status === status;\n  }\n\n  trigger(status, response) {\n    this.channel.trigger(this.refEvent, {\n      status,\n      response\n    });\n  }\n\n}; // js/phoenix/timer.js\n\nvar Timer = class {\n  constructor(callback, timerCalc) {\n    this.callback = callback;\n    this.timerCalc = timerCalc;\n    this.timer = null;\n    this.tries = 0;\n  }\n\n  reset() {\n    this.tries = 0;\n    clearTimeout(this.timer);\n  }\n\n  scheduleTimeout() {\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => {\n      this.tries = this.tries + 1;\n      this.callback();\n    }, this.timerCalc(this.tries + 1));\n  }\n\n}; // js/phoenix/channel.js\n\nvar Channel = class {\n  constructor(topic, params, socket) {\n    this.state = CHANNEL_STATES.closed;\n    this.topic = topic;\n    this.params = closure(params || {});\n    this.socket = socket;\n    this.bindings = [];\n    this.bindingRef = 0;\n    this.timeout = this.socket.timeout;\n    this.joinedOnce = false;\n    this.joinPush = new Push(this, CHANNEL_EVENTS.join, this.params, this.timeout);\n    this.pushBuffer = [];\n    this.stateChangeRefs = [];\n    this.rejoinTimer = new Timer(() => {\n      if (this.socket.isConnected()) {\n        this.rejoin();\n      }\n    }, this.socket.rejoinAfterMs);\n    this.stateChangeRefs.push(this.socket.onError(() => this.rejoinTimer.reset()));\n    this.stateChangeRefs.push(this.socket.onOpen(() => {\n      this.rejoinTimer.reset();\n\n      if (this.isErrored()) {\n        this.rejoin();\n      }\n    }));\n    this.joinPush.receive(\"ok\", () => {\n      this.state = CHANNEL_STATES.joined;\n      this.rejoinTimer.reset();\n      this.pushBuffer.forEach(pushEvent => pushEvent.send());\n      this.pushBuffer = [];\n    });\n    this.joinPush.receive(\"error\", () => {\n      this.state = CHANNEL_STATES.errored;\n\n      if (this.socket.isConnected()) {\n        this.rejoinTimer.scheduleTimeout();\n      }\n    });\n    this.onClose(() => {\n      this.rejoinTimer.reset();\n      if (this.socket.hasLogger()) this.socket.log(\"channel\", `close ${this.topic} ${this.joinRef()}`);\n      this.state = CHANNEL_STATES.closed;\n      this.socket.remove(this);\n    });\n    this.onError(reason => {\n      if (this.socket.hasLogger()) this.socket.log(\"channel\", `error ${this.topic}`, reason);\n\n      if (this.isJoining()) {\n        this.joinPush.reset();\n      }\n\n      this.state = CHANNEL_STATES.errored;\n\n      if (this.socket.isConnected()) {\n        this.rejoinTimer.scheduleTimeout();\n      }\n    });\n    this.joinPush.receive(\"timeout\", () => {\n      if (this.socket.hasLogger()) this.socket.log(\"channel\", `timeout ${this.topic} (${this.joinRef()})`, this.joinPush.timeout);\n      let leavePush = new Push(this, CHANNEL_EVENTS.leave, closure({}), this.timeout);\n      leavePush.send();\n      this.state = CHANNEL_STATES.errored;\n      this.joinPush.reset();\n\n      if (this.socket.isConnected()) {\n        this.rejoinTimer.scheduleTimeout();\n      }\n    });\n    this.on(CHANNEL_EVENTS.reply, (payload, ref) => {\n      this.trigger(this.replyEventName(ref), payload);\n    });\n  }\n\n  join(timeout = this.timeout) {\n    if (this.joinedOnce) {\n      throw new Error(\"tried to join multiple times. 'join' can only be called a single time per channel instance\");\n    } else {\n      this.timeout = timeout;\n      this.joinedOnce = true;\n      this.rejoin();\n      return this.joinPush;\n    }\n  }\n\n  onClose(callback) {\n    this.on(CHANNEL_EVENTS.close, callback);\n  }\n\n  onError(callback) {\n    return this.on(CHANNEL_EVENTS.error, reason => callback(reason));\n  }\n\n  on(event, callback) {\n    let ref = this.bindingRef++;\n    this.bindings.push({\n      event,\n      ref,\n      callback\n    });\n    return ref;\n  }\n\n  off(event, ref) {\n    this.bindings = this.bindings.filter(bind => {\n      return !(bind.event === event && (typeof ref === \"undefined\" || ref === bind.ref));\n    });\n  }\n\n  canPush() {\n    return this.socket.isConnected() && this.isJoined();\n  }\n\n  push(event, payload, timeout = this.timeout) {\n    payload = payload || {};\n\n    if (!this.joinedOnce) {\n      throw new Error(`tried to push '${event}' to '${this.topic}' before joining. Use channel.join() before pushing events`);\n    }\n\n    let pushEvent = new Push(this, event, function () {\n      return payload;\n    }, timeout);\n\n    if (this.canPush()) {\n      pushEvent.send();\n    } else {\n      pushEvent.startTimeout();\n      this.pushBuffer.push(pushEvent);\n    }\n\n    return pushEvent;\n  }\n\n  leave(timeout = this.timeout) {\n    this.rejoinTimer.reset();\n    this.joinPush.cancelTimeout();\n    this.state = CHANNEL_STATES.leaving;\n\n    let onClose = () => {\n      if (this.socket.hasLogger()) this.socket.log(\"channel\", `leave ${this.topic}`);\n      this.trigger(CHANNEL_EVENTS.close, \"leave\");\n    };\n\n    let leavePush = new Push(this, CHANNEL_EVENTS.leave, closure({}), timeout);\n    leavePush.receive(\"ok\", () => onClose()).receive(\"timeout\", () => onClose());\n    leavePush.send();\n\n    if (!this.canPush()) {\n      leavePush.trigger(\"ok\", {});\n    }\n\n    return leavePush;\n  }\n\n  onMessage(_event, payload, _ref) {\n    return payload;\n  }\n\n  isMember(topic, event, payload, joinRef) {\n    if (this.topic !== topic) {\n      return false;\n    }\n\n    if (joinRef && joinRef !== this.joinRef()) {\n      if (this.socket.hasLogger()) this.socket.log(\"channel\", \"dropping outdated message\", {\n        topic,\n        event,\n        payload,\n        joinRef\n      });\n      return false;\n    } else {\n      return true;\n    }\n  }\n\n  joinRef() {\n    return this.joinPush.ref;\n  }\n\n  rejoin(timeout = this.timeout) {\n    if (this.isLeaving()) {\n      return;\n    }\n\n    this.socket.leaveOpenTopic(this.topic);\n    this.state = CHANNEL_STATES.joining;\n    this.joinPush.resend(timeout);\n  }\n\n  trigger(event, payload, ref, joinRef) {\n    let handledPayload = this.onMessage(event, payload, ref, joinRef);\n\n    if (payload && !handledPayload) {\n      throw new Error(\"channel onMessage callbacks must return the payload, modified or unmodified\");\n    }\n\n    let eventBindings = this.bindings.filter(bind => bind.event === event);\n\n    for (let i = 0; i < eventBindings.length; i++) {\n      let bind = eventBindings[i];\n      bind.callback(handledPayload, ref, joinRef || this.joinRef());\n    }\n  }\n\n  replyEventName(ref) {\n    return `chan_reply_${ref}`;\n  }\n\n  isClosed() {\n    return this.state === CHANNEL_STATES.closed;\n  }\n\n  isErrored() {\n    return this.state === CHANNEL_STATES.errored;\n  }\n\n  isJoined() {\n    return this.state === CHANNEL_STATES.joined;\n  }\n\n  isJoining() {\n    return this.state === CHANNEL_STATES.joining;\n  }\n\n  isLeaving() {\n    return this.state === CHANNEL_STATES.leaving;\n  }\n\n}; // js/phoenix/ajax.js\n\nvar Ajax = class {\n  static request(method, endPoint, accept, body, timeout, ontimeout, callback) {\n    if (global.XDomainRequest) {\n      let req = new global.XDomainRequest();\n      this.xdomainRequest(req, method, endPoint, body, timeout, ontimeout, callback);\n    } else {\n      let req = new global.XMLHttpRequest();\n      this.xhrRequest(req, method, endPoint, accept, body, timeout, ontimeout, callback);\n    }\n  }\n\n  static xdomainRequest(req, method, endPoint, body, timeout, ontimeout, callback) {\n    req.timeout = timeout;\n    req.open(method, endPoint);\n\n    req.onload = () => {\n      let response = this.parseJSON(req.responseText);\n      callback && callback(response);\n    };\n\n    if (ontimeout) {\n      req.ontimeout = ontimeout;\n    }\n\n    req.onprogress = () => {};\n\n    req.send(body);\n  }\n\n  static xhrRequest(req, method, endPoint, accept, body, timeout, ontimeout, callback) {\n    req.open(method, endPoint, true);\n    req.timeout = timeout;\n    req.setRequestHeader(\"Content-Type\", accept);\n\n    req.onerror = () => {\n      callback && callback(null);\n    };\n\n    req.onreadystatechange = () => {\n      if (req.readyState === XHR_STATES.complete && callback) {\n        let response = this.parseJSON(req.responseText);\n        callback(response);\n      }\n    };\n\n    if (ontimeout) {\n      req.ontimeout = ontimeout;\n    }\n\n    req.send(body);\n  }\n\n  static parseJSON(resp) {\n    if (!resp || resp === \"\") {\n      return null;\n    }\n\n    try {\n      return JSON.parse(resp);\n    } catch (e) {\n      console && console.log(\"failed to parse JSON response\", resp);\n      return null;\n    }\n  }\n\n  static serialize(obj, parentKey) {\n    let queryStr = [];\n\n    for (var key in obj) {\n      if (!Object.prototype.hasOwnProperty.call(obj, key)) {\n        continue;\n      }\n\n      let paramKey = parentKey ? `${parentKey}[${key}]` : key;\n      let paramVal = obj[key];\n\n      if (typeof paramVal === \"object\") {\n        queryStr.push(this.serialize(paramVal, paramKey));\n      } else {\n        queryStr.push(encodeURIComponent(paramKey) + \"=\" + encodeURIComponent(paramVal));\n      }\n    }\n\n    return queryStr.join(\"&\");\n  }\n\n  static appendParams(url, params) {\n    if (Object.keys(params).length === 0) {\n      return url;\n    }\n\n    let prefix = url.match(/\\?/) ? \"&\" : \"?\";\n    return `${url}${prefix}${this.serialize(params)}`;\n  }\n\n}; // js/phoenix/longpoll.js\n\nvar LongPoll = class {\n  constructor(endPoint) {\n    this.endPoint = null;\n    this.token = null;\n    this.skipHeartbeat = true;\n\n    this.onopen = function () {};\n\n    this.onerror = function () {};\n\n    this.onmessage = function () {};\n\n    this.onclose = function () {};\n\n    this.pollEndpoint = this.normalizeEndpoint(endPoint);\n    this.readyState = SOCKET_STATES.connecting;\n    this.poll();\n  }\n\n  normalizeEndpoint(endPoint) {\n    return endPoint.replace(\"ws://\", \"http://\").replace(\"wss://\", \"https://\").replace(new RegExp(\"(.*)/\" + TRANSPORTS.websocket), \"$1/\" + TRANSPORTS.longpoll);\n  }\n\n  endpointURL() {\n    return Ajax.appendParams(this.pollEndpoint, {\n      token: this.token\n    });\n  }\n\n  closeAndRetry() {\n    this.close();\n    this.readyState = SOCKET_STATES.connecting;\n  }\n\n  ontimeout() {\n    this.onerror(\"timeout\");\n    this.closeAndRetry();\n  }\n\n  poll() {\n    if (!(this.readyState === SOCKET_STATES.open || this.readyState === SOCKET_STATES.connecting)) {\n      return;\n    }\n\n    Ajax.request(\"GET\", this.endpointURL(), \"application/json\", null, this.timeout, this.ontimeout.bind(this), resp => {\n      if (resp) {\n        var {\n          status,\n          token,\n          messages\n        } = resp;\n        this.token = token;\n      } else {\n        status = 0;\n      }\n\n      switch (status) {\n        case 200:\n          messages.forEach(msg => {\n            setTimeout(() => {\n              this.onmessage({\n                data: msg\n              });\n            }, 0);\n          });\n          this.poll();\n          break;\n\n        case 204:\n          this.poll();\n          break;\n\n        case 410:\n          this.readyState = SOCKET_STATES.open;\n          this.onopen();\n          this.poll();\n          break;\n\n        case 403:\n          this.onerror();\n          this.close();\n          break;\n\n        case 0:\n        case 500:\n          this.onerror();\n          this.closeAndRetry();\n          break;\n\n        default:\n          throw new Error(`unhandled poll status ${status}`);\n      }\n    });\n  }\n\n  send(body) {\n    Ajax.request(\"POST\", this.endpointURL(), \"application/json\", body, this.timeout, this.onerror.bind(this, \"timeout\"), resp => {\n      if (!resp || resp.status !== 200) {\n        this.onerror(resp && resp.status);\n        this.closeAndRetry();\n      }\n    });\n  }\n\n  close(_code, _reason) {\n    this.readyState = SOCKET_STATES.closed;\n    this.onclose();\n  }\n\n}; // js/phoenix/presence.js\n\nvar Presence = class {\n  constructor(channel, opts = {}) {\n    let events = opts.events || {\n      state: \"presence_state\",\n      diff: \"presence_diff\"\n    };\n    this.state = {};\n    this.pendingDiffs = [];\n    this.channel = channel;\n    this.joinRef = null;\n    this.caller = {\n      onJoin: function () {},\n      onLeave: function () {},\n      onSync: function () {}\n    };\n    this.channel.on(events.state, newState => {\n      let {\n        onJoin,\n        onLeave,\n        onSync\n      } = this.caller;\n      this.joinRef = this.channel.joinRef();\n      this.state = Presence.syncState(this.state, newState, onJoin, onLeave);\n      this.pendingDiffs.forEach(diff => {\n        this.state = Presence.syncDiff(this.state, diff, onJoin, onLeave);\n      });\n      this.pendingDiffs = [];\n      onSync();\n    });\n    this.channel.on(events.diff, diff => {\n      let {\n        onJoin,\n        onLeave,\n        onSync\n      } = this.caller;\n\n      if (this.inPendingSyncState()) {\n        this.pendingDiffs.push(diff);\n      } else {\n        this.state = Presence.syncDiff(this.state, diff, onJoin, onLeave);\n        onSync();\n      }\n    });\n  }\n\n  onJoin(callback) {\n    this.caller.onJoin = callback;\n  }\n\n  onLeave(callback) {\n    this.caller.onLeave = callback;\n  }\n\n  onSync(callback) {\n    this.caller.onSync = callback;\n  }\n\n  list(by) {\n    return Presence.list(this.state, by);\n  }\n\n  inPendingSyncState() {\n    return !this.joinRef || this.joinRef !== this.channel.joinRef();\n  }\n\n  static syncState(currentState, newState, onJoin, onLeave) {\n    let state = this.clone(currentState);\n    let joins = {};\n    let leaves = {};\n    this.map(state, (key, presence) => {\n      if (!newState[key]) {\n        leaves[key] = presence;\n      }\n    });\n    this.map(newState, (key, newPresence) => {\n      let currentPresence = state[key];\n\n      if (currentPresence) {\n        let newRefs = newPresence.metas.map(m => m.phx_ref);\n        let curRefs = currentPresence.metas.map(m => m.phx_ref);\n        let joinedMetas = newPresence.metas.filter(m => curRefs.indexOf(m.phx_ref) < 0);\n        let leftMetas = currentPresence.metas.filter(m => newRefs.indexOf(m.phx_ref) < 0);\n\n        if (joinedMetas.length > 0) {\n          joins[key] = newPresence;\n          joins[key].metas = joinedMetas;\n        }\n\n        if (leftMetas.length > 0) {\n          leaves[key] = this.clone(currentPresence);\n          leaves[key].metas = leftMetas;\n        }\n      } else {\n        joins[key] = newPresence;\n      }\n    });\n    return this.syncDiff(state, {\n      joins,\n      leaves\n    }, onJoin, onLeave);\n  }\n\n  static syncDiff(state, diff, onJoin, onLeave) {\n    let {\n      joins,\n      leaves\n    } = this.clone(diff);\n\n    if (!onJoin) {\n      onJoin = function () {};\n    }\n\n    if (!onLeave) {\n      onLeave = function () {};\n    }\n\n    this.map(joins, (key, newPresence) => {\n      let currentPresence = state[key];\n      state[key] = this.clone(newPresence);\n\n      if (currentPresence) {\n        let joinedRefs = state[key].metas.map(m => m.phx_ref);\n        let curMetas = currentPresence.metas.filter(m => joinedRefs.indexOf(m.phx_ref) < 0);\n        state[key].metas.unshift(...curMetas);\n      }\n\n      onJoin(key, currentPresence, newPresence);\n    });\n    this.map(leaves, (key, leftPresence) => {\n      let currentPresence = state[key];\n\n      if (!currentPresence) {\n        return;\n      }\n\n      let refsToRemove = leftPresence.metas.map(m => m.phx_ref);\n      currentPresence.metas = currentPresence.metas.filter(p => {\n        return refsToRemove.indexOf(p.phx_ref) < 0;\n      });\n      onLeave(key, currentPresence, leftPresence);\n\n      if (currentPresence.metas.length === 0) {\n        delete state[key];\n      }\n    });\n    return state;\n  }\n\n  static list(presences, chooser) {\n    if (!chooser) {\n      chooser = function (key, pres) {\n        return pres;\n      };\n    }\n\n    return this.map(presences, (key, presence) => {\n      return chooser(key, presence);\n    });\n  }\n\n  static map(obj, func) {\n    return Object.getOwnPropertyNames(obj).map(key => func(key, obj[key]));\n  }\n\n  static clone(obj) {\n    return JSON.parse(JSON.stringify(obj));\n  }\n\n}; // js/phoenix/serializer.js\n\nvar serializer_default = {\n  HEADER_LENGTH: 1,\n  META_LENGTH: 4,\n  KINDS: {\n    push: 0,\n    reply: 1,\n    broadcast: 2\n  },\n\n  encode(msg, callback) {\n    if (msg.payload.constructor === ArrayBuffer) {\n      return callback(this.binaryEncode(msg));\n    } else {\n      let payload = [msg.join_ref, msg.ref, msg.topic, msg.event, msg.payload];\n      return callback(JSON.stringify(payload));\n    }\n  },\n\n  decode(rawPayload, callback) {\n    if (rawPayload.constructor === ArrayBuffer) {\n      return callback(this.binaryDecode(rawPayload));\n    } else {\n      let [join_ref, ref, topic, event, payload] = JSON.parse(rawPayload);\n      return callback({\n        join_ref,\n        ref,\n        topic,\n        event,\n        payload\n      });\n    }\n  },\n\n  binaryEncode(message) {\n    let {\n      join_ref,\n      ref,\n      event,\n      topic,\n      payload\n    } = message;\n    let metaLength = this.META_LENGTH + join_ref.length + ref.length + topic.length + event.length;\n    let header = new ArrayBuffer(this.HEADER_LENGTH + metaLength);\n    let view = new DataView(header);\n    let offset = 0;\n    view.setUint8(offset++, this.KINDS.push);\n    view.setUint8(offset++, join_ref.length);\n    view.setUint8(offset++, ref.length);\n    view.setUint8(offset++, topic.length);\n    view.setUint8(offset++, event.length);\n    Array.from(join_ref, char => view.setUint8(offset++, char.charCodeAt(0)));\n    Array.from(ref, char => view.setUint8(offset++, char.charCodeAt(0)));\n    Array.from(topic, char => view.setUint8(offset++, char.charCodeAt(0)));\n    Array.from(event, char => view.setUint8(offset++, char.charCodeAt(0)));\n    var combined = new Uint8Array(header.byteLength + payload.byteLength);\n    combined.set(new Uint8Array(header), 0);\n    combined.set(new Uint8Array(payload), header.byteLength);\n    return combined.buffer;\n  },\n\n  binaryDecode(buffer) {\n    let view = new DataView(buffer);\n    let kind = view.getUint8(0);\n    let decoder = new TextDecoder();\n\n    switch (kind) {\n      case this.KINDS.push:\n        return this.decodePush(buffer, view, decoder);\n\n      case this.KINDS.reply:\n        return this.decodeReply(buffer, view, decoder);\n\n      case this.KINDS.broadcast:\n        return this.decodeBroadcast(buffer, view, decoder);\n    }\n  },\n\n  decodePush(buffer, view, decoder) {\n    let joinRefSize = view.getUint8(1);\n    let topicSize = view.getUint8(2);\n    let eventSize = view.getUint8(3);\n    let offset = this.HEADER_LENGTH + this.META_LENGTH - 1;\n    let joinRef = decoder.decode(buffer.slice(offset, offset + joinRefSize));\n    offset = offset + joinRefSize;\n    let topic = decoder.decode(buffer.slice(offset, offset + topicSize));\n    offset = offset + topicSize;\n    let event = decoder.decode(buffer.slice(offset, offset + eventSize));\n    offset = offset + eventSize;\n    let data = buffer.slice(offset, buffer.byteLength);\n    return {\n      join_ref: joinRef,\n      ref: null,\n      topic,\n      event,\n      payload: data\n    };\n  },\n\n  decodeReply(buffer, view, decoder) {\n    let joinRefSize = view.getUint8(1);\n    let refSize = view.getUint8(2);\n    let topicSize = view.getUint8(3);\n    let eventSize = view.getUint8(4);\n    let offset = this.HEADER_LENGTH + this.META_LENGTH;\n    let joinRef = decoder.decode(buffer.slice(offset, offset + joinRefSize));\n    offset = offset + joinRefSize;\n    let ref = decoder.decode(buffer.slice(offset, offset + refSize));\n    offset = offset + refSize;\n    let topic = decoder.decode(buffer.slice(offset, offset + topicSize));\n    offset = offset + topicSize;\n    let event = decoder.decode(buffer.slice(offset, offset + eventSize));\n    offset = offset + eventSize;\n    let data = buffer.slice(offset, buffer.byteLength);\n    let payload = {\n      status: event,\n      response: data\n    };\n    return {\n      join_ref: joinRef,\n      ref,\n      topic,\n      event: CHANNEL_EVENTS.reply,\n      payload\n    };\n  },\n\n  decodeBroadcast(buffer, view, decoder) {\n    let topicSize = view.getUint8(1);\n    let eventSize = view.getUint8(2);\n    let offset = this.HEADER_LENGTH + 2;\n    let topic = decoder.decode(buffer.slice(offset, offset + topicSize));\n    offset = offset + topicSize;\n    let event = decoder.decode(buffer.slice(offset, offset + eventSize));\n    offset = offset + eventSize;\n    let data = buffer.slice(offset, buffer.byteLength);\n    return {\n      join_ref: null,\n      ref: null,\n      topic,\n      event,\n      payload: data\n    };\n  }\n\n}; // js/phoenix/socket.js\n\nvar Socket = class {\n  constructor(endPoint, opts = {}) {\n    this.stateChangeCallbacks = {\n      open: [],\n      close: [],\n      error: [],\n      message: []\n    };\n    this.channels = [];\n    this.sendBuffer = [];\n    this.ref = 0;\n    this.timeout = opts.timeout || DEFAULT_TIMEOUT;\n    this.transport = opts.transport || global.WebSocket || LongPoll;\n    this.establishedConnections = 0;\n    this.defaultEncoder = serializer_default.encode.bind(serializer_default);\n    this.defaultDecoder = serializer_default.decode.bind(serializer_default);\n    this.closeWasClean = false;\n    this.binaryType = opts.binaryType || \"arraybuffer\";\n    this.connectClock = 1;\n\n    if (this.transport !== LongPoll) {\n      this.encode = opts.encode || this.defaultEncoder;\n      this.decode = opts.decode || this.defaultDecoder;\n    } else {\n      this.encode = this.defaultEncoder;\n      this.decode = this.defaultDecoder;\n    }\n\n    let awaitingConnectionOnPageShow = null;\n\n    if (phxWindow && phxWindow.addEventListener) {\n      phxWindow.addEventListener(\"pagehide\", _e => {\n        if (this.conn) {\n          this.disconnect();\n          awaitingConnectionOnPageShow = this.connectClock;\n        }\n      });\n      phxWindow.addEventListener(\"pageshow\", _e => {\n        if (awaitingConnectionOnPageShow === this.connectClock) {\n          awaitingConnectionOnPageShow = null;\n          this.connect();\n        }\n      });\n    }\n\n    this.heartbeatIntervalMs = opts.heartbeatIntervalMs || 3e4;\n\n    this.rejoinAfterMs = tries => {\n      if (opts.rejoinAfterMs) {\n        return opts.rejoinAfterMs(tries);\n      } else {\n        return [1e3, 2e3, 5e3][tries - 1] || 1e4;\n      }\n    };\n\n    this.reconnectAfterMs = tries => {\n      if (opts.reconnectAfterMs) {\n        return opts.reconnectAfterMs(tries);\n      } else {\n        return [10, 50, 100, 150, 200, 250, 500, 1e3, 2e3][tries - 1] || 5e3;\n      }\n    };\n\n    this.logger = opts.logger || null;\n    this.longpollerTimeout = opts.longpollerTimeout || 2e4;\n    this.params = closure(opts.params || {});\n    this.endPoint = `${endPoint}/${TRANSPORTS.websocket}`;\n    this.vsn = opts.vsn || DEFAULT_VSN;\n    this.heartbeatTimer = null;\n    this.pendingHeartbeatRef = null;\n    this.reconnectTimer = new Timer(() => {\n      this.teardown(() => this.connect());\n    }, this.reconnectAfterMs);\n  }\n\n  replaceTransport(newTransport) {\n    this.disconnect();\n    this.transport = newTransport;\n  }\n\n  protocol() {\n    return location.protocol.match(/^https/) ? \"wss\" : \"ws\";\n  }\n\n  endPointURL() {\n    let uri = Ajax.appendParams(Ajax.appendParams(this.endPoint, this.params()), {\n      vsn: this.vsn\n    });\n\n    if (uri.charAt(0) !== \"/\") {\n      return uri;\n    }\n\n    if (uri.charAt(1) === \"/\") {\n      return `${this.protocol()}:${uri}`;\n    }\n\n    return `${this.protocol()}://${location.host}${uri}`;\n  }\n\n  disconnect(callback, code, reason) {\n    this.connectClock++;\n    this.closeWasClean = true;\n    this.reconnectTimer.reset();\n    this.teardown(callback, code, reason);\n  }\n\n  connect(params) {\n    this.connectClock++;\n\n    if (params) {\n      console && console.log(\"passing params to connect is deprecated. Instead pass :params to the Socket constructor\");\n      this.params = closure(params);\n    }\n\n    if (this.conn) {\n      return;\n    }\n\n    this.closeWasClean = false;\n    this.conn = new this.transport(this.endPointURL());\n    this.conn.binaryType = this.binaryType;\n    this.conn.timeout = this.longpollerTimeout;\n\n    this.conn.onopen = () => this.onConnOpen();\n\n    this.conn.onerror = error => this.onConnError(error);\n\n    this.conn.onmessage = event => this.onConnMessage(event);\n\n    this.conn.onclose = event => this.onConnClose(event);\n  }\n\n  log(kind, msg, data) {\n    this.logger(kind, msg, data);\n  }\n\n  hasLogger() {\n    return this.logger !== null;\n  }\n\n  onOpen(callback) {\n    let ref = this.makeRef();\n    this.stateChangeCallbacks.open.push([ref, callback]);\n    return ref;\n  }\n\n  onClose(callback) {\n    let ref = this.makeRef();\n    this.stateChangeCallbacks.close.push([ref, callback]);\n    return ref;\n  }\n\n  onError(callback) {\n    let ref = this.makeRef();\n    this.stateChangeCallbacks.error.push([ref, callback]);\n    return ref;\n  }\n\n  onMessage(callback) {\n    let ref = this.makeRef();\n    this.stateChangeCallbacks.message.push([ref, callback]);\n    return ref;\n  }\n\n  onConnOpen() {\n    if (this.hasLogger()) this.log(\"transport\", `connected to ${this.endPointURL()}`);\n    this.closeWasClean = false;\n    this.establishedConnections++;\n    this.flushSendBuffer();\n    this.reconnectTimer.reset();\n    this.resetHeartbeat();\n    this.stateChangeCallbacks.open.forEach(([, callback]) => callback());\n  }\n\n  heartbeatTimeout() {\n    if (this.pendingHeartbeatRef) {\n      this.pendingHeartbeatRef = null;\n\n      if (this.hasLogger()) {\n        this.log(\"transport\", \"heartbeat timeout. Attempting to re-establish connection\");\n      }\n\n      this.abnormalClose(\"heartbeat timeout\");\n    }\n  }\n\n  resetHeartbeat() {\n    if (this.conn && this.conn.skipHeartbeat) {\n      return;\n    }\n\n    this.pendingHeartbeatRef = null;\n    clearTimeout(this.heartbeatTimer);\n    setTimeout(() => this.sendHeartbeat(), this.heartbeatIntervalMs);\n  }\n\n  teardown(callback, code, reason) {\n    if (!this.conn) {\n      return callback && callback();\n    }\n\n    this.waitForBufferDone(() => {\n      if (this.conn) {\n        if (code) {\n          this.conn.close(code, reason || \"\");\n        } else {\n          this.conn.close();\n        }\n      }\n\n      this.waitForSocketClosed(() => {\n        if (this.conn) {\n          this.conn.onclose = function () {};\n\n          this.conn = null;\n        }\n\n        callback && callback();\n      });\n    });\n  }\n\n  waitForBufferDone(callback, tries = 1) {\n    if (tries === 5 || !this.conn || !this.conn.bufferedAmount) {\n      callback();\n      return;\n    }\n\n    setTimeout(() => {\n      this.waitForBufferDone(callback, tries + 1);\n    }, 150 * tries);\n  }\n\n  waitForSocketClosed(callback, tries = 1) {\n    if (tries === 5 || !this.conn || this.conn.readyState === SOCKET_STATES.closed) {\n      callback();\n      return;\n    }\n\n    setTimeout(() => {\n      this.waitForSocketClosed(callback, tries + 1);\n    }, 150 * tries);\n  }\n\n  onConnClose(event) {\n    let closeCode = event && event.code;\n    if (this.hasLogger()) this.log(\"transport\", \"close\", event);\n    this.triggerChanError();\n    clearTimeout(this.heartbeatTimer);\n\n    if (!this.closeWasClean && closeCode !== 1e3) {\n      this.reconnectTimer.scheduleTimeout();\n    }\n\n    this.stateChangeCallbacks.close.forEach(([, callback]) => callback(event));\n  }\n\n  onConnError(error) {\n    if (this.hasLogger()) this.log(\"transport\", error);\n    let transportBefore = this.transport;\n    let establishedBefore = this.establishedConnections;\n    this.stateChangeCallbacks.error.forEach(([, callback]) => {\n      callback(error, transportBefore, establishedBefore);\n    });\n\n    if (transportBefore === this.transport || establishedBefore > 0) {\n      this.triggerChanError();\n    }\n  }\n\n  triggerChanError() {\n    this.channels.forEach(channel => {\n      if (!(channel.isErrored() || channel.isLeaving() || channel.isClosed())) {\n        channel.trigger(CHANNEL_EVENTS.error);\n      }\n    });\n  }\n\n  connectionState() {\n    switch (this.conn && this.conn.readyState) {\n      case SOCKET_STATES.connecting:\n        return \"connecting\";\n\n      case SOCKET_STATES.open:\n        return \"open\";\n\n      case SOCKET_STATES.closing:\n        return \"closing\";\n\n      default:\n        return \"closed\";\n    }\n  }\n\n  isConnected() {\n    return this.connectionState() === \"open\";\n  }\n\n  remove(channel) {\n    this.off(channel.stateChangeRefs);\n    this.channels = this.channels.filter(c => c.joinRef() !== channel.joinRef());\n  }\n\n  off(refs) {\n    for (let key in this.stateChangeCallbacks) {\n      this.stateChangeCallbacks[key] = this.stateChangeCallbacks[key].filter(([ref]) => {\n        return refs.indexOf(ref) === -1;\n      });\n    }\n  }\n\n  channel(topic, chanParams = {}) {\n    let chan = new Channel(topic, chanParams, this);\n    this.channels.push(chan);\n    return chan;\n  }\n\n  push(data) {\n    if (this.hasLogger()) {\n      let {\n        topic,\n        event,\n        payload,\n        ref,\n        join_ref\n      } = data;\n      this.log(\"push\", `${topic} ${event} (${join_ref}, ${ref})`, payload);\n    }\n\n    if (this.isConnected()) {\n      this.encode(data, result => this.conn.send(result));\n    } else {\n      this.sendBuffer.push(() => this.encode(data, result => this.conn.send(result)));\n    }\n  }\n\n  makeRef() {\n    let newRef = this.ref + 1;\n\n    if (newRef === this.ref) {\n      this.ref = 0;\n    } else {\n      this.ref = newRef;\n    }\n\n    return this.ref.toString();\n  }\n\n  sendHeartbeat() {\n    if (this.pendingHeartbeatRef && !this.isConnected()) {\n      return;\n    }\n\n    this.pendingHeartbeatRef = this.makeRef();\n    this.push({\n      topic: \"phoenix\",\n      event: \"heartbeat\",\n      payload: {},\n      ref: this.pendingHeartbeatRef\n    });\n    this.heartbeatTimer = setTimeout(() => this.heartbeatTimeout(), this.heartbeatIntervalMs);\n  }\n\n  abnormalClose(reason) {\n    this.closeWasClean = false;\n\n    if (this.isConnected()) {\n      this.conn.close(WS_CLOSE_NORMAL, reason);\n    }\n  }\n\n  flushSendBuffer() {\n    if (this.isConnected() && this.sendBuffer.length > 0) {\n      this.sendBuffer.forEach(callback => callback());\n      this.sendBuffer = [];\n    }\n  }\n\n  onConnMessage(rawMessage) {\n    this.decode(rawMessage.data, msg => {\n      let {\n        topic,\n        event,\n        payload,\n        ref,\n        join_ref\n      } = msg;\n\n      if (ref && ref === this.pendingHeartbeatRef) {\n        clearTimeout(this.heartbeatTimer);\n        this.pendingHeartbeatRef = null;\n        setTimeout(() => this.sendHeartbeat(), this.heartbeatIntervalMs);\n      }\n\n      if (this.hasLogger()) this.log(\"receive\", `${payload.status || \"\"} ${topic} ${event} ${ref && \"(\" + ref + \")\" || \"\"}`, payload);\n\n      for (let i = 0; i < this.channels.length; i++) {\n        const channel = this.channels[i];\n\n        if (!channel.isMember(topic, event, payload, join_ref)) {\n          continue;\n        }\n\n        channel.trigger(event, payload, ref, join_ref);\n      }\n\n      for (let i = 0; i < this.stateChangeCallbacks.message.length; i++) {\n        let [, callback] = this.stateChangeCallbacks.message[i];\n        callback(msg);\n      }\n    });\n  }\n\n  leaveOpenTopic(topic) {\n    let dupChannel = this.channels.find(c => c.topic === topic && (c.isJoined() || c.isJoining()));\n\n    if (dupChannel) {\n      if (this.hasLogger()) this.log(\"transport\", `leaving duplicate topic \"${topic}\"`);\n      dupChannel.leave();\n    }\n  }\n\n};\n\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/phoenix/priv/static/phoenix.esm.js?");
-
-/***/ }),
-
 /***/ "./node_modules/superagent/lib/agent-base.js":
 /*!***************************************************!*\
   !*** ./node_modules/superagent/lib/agent-base.js ***!
@@ -190,7 +179,7 @@ eval("\n\nvar formats = __webpack_require__(/*! ./formats */ \"./node_modules/su
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ SeamlyBaseError)\n/* harmony export */ });\nclass SeamlyBaseError extends Error {\n  constructor(originalError, ...params) {\n    super(...params);\n\n    if (Error.captureStackTrace) {\n      Error.captureStackTrace(this, Object.getPrototypeOf(this));\n    }\n\n    this.originalError = originalError;\n\n    if (originalError?.payload) {\n      this.originalEvent = originalError;\n      this.originalError = originalError.payload.error;\n      this.message = `Event of type ${originalError.payload.type} encountered`;\n    }\n\n    if (originalError?.error) {\n      this.originalError = originalError.error;\n    }\n  }\n\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/errors/seamly-base-error.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ SeamlyBaseError)\n/* harmony export */ });\nclass SeamlyBaseError extends Error {\n  constructor(originalError, ...params) {\n    super(...params);\n\n    if (Error.captureStackTrace) {\n      Error.captureStackTrace(this, Object.getPrototypeOf(this));\n    }\n\n    this.originalError = originalError;\n\n    if (originalError !== null && originalError !== void 0 && originalError.payload) {\n      this.originalEvent = originalError;\n      this.originalError = originalError.payload.error;\n      this.message = `Event of type ${originalError.payload.type} encountered`;\n    }\n\n    if (originalError !== null && originalError !== void 0 && originalError.error) {\n      this.originalError = originalError.error;\n    }\n  }\n\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/errors/seamly-base-error.js?");
 
 /***/ }),
 
@@ -278,7 +267,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"API\": () => (/* binding */ API)\n/* harmony export */ });\n/* harmony import */ var xstream__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! xstream */ \"./node_modules/xstream/index.js\");\n/* harmony import */ var xstream__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(xstream__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var superagent__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! superagent */ \"./node_modules/superagent/lib/client.js\");\n/* harmony import */ var superagent__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(superagent__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var lib_store_index__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/store/index */ \"./src/javascripts/lib/store/index.js\");\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! lib/store/providers/session-storage */ \"./src/javascripts/lib/store/providers/session-storage.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! lib/debug */ \"./src/javascripts/lib/debug.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(lib_debug__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _producer__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./producer */ \"./src/javascripts/api/producer.js\");\n/* harmony import */ var _event_producer__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./event-producer */ \"./src/javascripts/api/event-producer.js\");\n/* harmony import */ var _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var _errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./errors/seamly-configuration-error */ \"./src/javascripts/api/errors/seamly-configuration-error.js\");\n/* harmony import */ var _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./errors/seamly-general-error */ \"./src/javascripts/api/errors/seamly-general-error.js\");\n/* harmony import */ var _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./errors/seamly-unauthorized-error */ \"./src/javascripts/api/errors/seamly-unauthorized-error.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst log = lib_debug__WEBPACK_IMPORTED_MODULE_6___default()('seamly');\nconst DOMAIN = 'api.seamly-app.com';\nconst TRANSLATIONS_VERSION = 1;\n\nfunction buildPayload(command, payload) {\n  if (command !== 'message') {\n    return payload;\n  }\n\n  const {\n    type,\n    body\n  } = payload;\n  let {\n    transactionId\n  } = payload;\n\n  if (!transactionId) {\n    transactionId = (0,lib_id__WEBPACK_IMPORTED_MODULE_4__.randomId)();\n  }\n\n  return {\n    type,\n    body,\n    transactionId\n  };\n}\n/**\n * Tries to get the time zone key directly from the operating system for those\n * environments that support the ECMAScript Internationalization API.\n *\n * Based on https://github.com/pellepim/jstimezonedetect/blob/master/jstz.main.js\n */\n\n\nfunction getTimeZone() {\n  if (!Intl || typeof Intl === 'undefined' || typeof Intl.DateTimeFormat === 'undefined') {\n    return null;\n  }\n\n  const format = Intl.DateTimeFormat();\n\n  if (typeof format === 'undefined' || typeof format.resolvedOptions === 'undefined') {\n    return null;\n  }\n\n  const timezone = format.resolvedOptions().timeZone; // Ensure we get a valid timezone\n\n  if (timezone && (timezone.indexOf('/') > -1 || timezone === 'UTC')) {\n    return timezone;\n  } else {\n    return null;\n  }\n}\n\nclass API {\n  /**\n   * Creates an instance of API.\n   * @param {Object} [config={}]\n   * @param {string} config.key Api key\n   * @param {string} config.domain Domain to connect to\n   * @param {string} config.secure Connect securely\n   * @param {string} config.externalId Unique visitor identifier (optional)\n   * @param {boolean} config.sendEnvironment\n   * @param {string} layoutMode\n   * @param {string} namespace\n   * @param {Object} [context={ channelName: undefined, variables: undefined, locale: undefined, topic: undefined, translationLocale: undefined }]\n   * @param {string} context.channelName\n   * @param {object} context.variables\n   * @param {string} context.locale\n   * @param {string} context.topic\n   * @param {string} context.translationLocale\n   * @memberof API\n   */\n  constructor({\n    layoutMode,\n    namespace,\n    config = {},\n    context = {}\n  }) {\n    this.store = (0,lib_store_index__WEBPACK_IMPORTED_MODULE_3__.objectStore)(`${namespace}.connection${context.locale ? '.' + context.locale : ''}`, config.storageProvider || lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_5__[\"default\"]);\n    this.connectionInfo = {\n      apiKey: config.key,\n      domain: config.domain || DOMAIN,\n      secure: config.secure !== false ? config.secure || true : false\n    };\n    this.config = {\n      sendEnvironment: config.sendEnvironment ?? true,\n      context: _objectSpread(_objectSpread({}, context), {}, {\n        channelName: context.channelName || 'web'\n      })\n    };\n    this.connected = false;\n    this.configReady = false;\n    this.externalId = config.externalId;\n    this.layoutMode = layoutMode;\n    this.userResponded = false;\n    this.internalProducer = new _event_producer__WEBPACK_IMPORTED_MODULE_9__[\"default\"]('API');\n    this.internal$ = xstream__WEBPACK_IMPORTED_MODULE_0___default().create(this.internalProducer).flatten();\n    this.connection$ = this.internal$.filter(event => event.type === 'connection');\n    this.connection$.subscribe({\n      next: ({\n        connected,\n        ready\n      }) => {\n        this.connected = connected;\n        this.ready = ready;\n      }\n    });\n    this.URLS = {}; // 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\n    window.addEventListener('pageshow', event => {\n      if (event.persisted && this.connected) {\n        this.connect();\n      }\n    });\n  }\n\n  getAccessToken() {\n    return this.store.get('accessToken');\n  }\n\n  setAccessToken(accessToken) {\n    this.store.set('accessToken', accessToken);\n  }\n\n  getConversationUrl() {\n    return this.store.get('conversationUrl');\n  }\n\n  setConversationUrl(url) {\n    this.store.set('conversationUrl', url);\n  }\n\n  hasConversation() {\n    return !!this.getConversationUrl();\n  }\n\n  getChannelTopic() {\n    // The `channelName` fallback is needed for seamless client upgrades.\n    // TODO: Remove when all clients have been upgraded past v20.\n    return this.store.get('channelTopic') || this.store.get('channelName');\n  }\n\n  setChannelTopic(topic) {\n    this.store.set('channelTopic', topic);\n  }\n\n  getLocale = locale => locale || this.locale;\n\n  clearStore() {\n    this.store.delete('accessToken');\n    this.store.delete('conversationUrl'); // TODO: Remove `channelName` when all clients have been upgraded past v20.\n\n    this.store.delete('channelName');\n    this.store.delete('channelTopic');\n  }\n\n  getUrlPrefix(protocol) {\n    const realProtocol = this.connectionInfo.secure ? `${protocol}s` : protocol;\n    return `${realProtocol}://${this.connectionInfo.domain}`;\n  }\n\n  updateUrls({\n    _links: responseLinks\n  }) {\n    this.URLS = Object.entries(responseLinks).filter(([key]) => key !== 'self').reduce((urls, [key, {\n      href\n    }]) => {\n      return _objectSpread(_objectSpread({}, urls), {}, {\n        [key]: href\n      });\n    }, this.URLS);\n  }\n\n  async reset() {\n    await this.disconnect();\n    this.clearStore();\n    return this.getConfig();\n  }\n\n  async disconnect() {\n    if (this.conversationProducer) {\n      await this.conversationProducer.disconnect();\n    }\n\n    this.connected = false;\n    this.configReady = false;\n  }\n\n  async createConversation() {\n    try {\n      const request = superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}${this.URLS.conversations}`).set('Content-Type', 'application/json').query({\n        v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n      }) // withCredentials() is necessary to allow browsers to save received\n      // cookies in CORS requests.\n      .withCredentials().send({\n        externalId: this.externalId || undefined\n      });\n      const {\n        body\n      } = await request;\n      const {\n        conversation\n      } = body;\n\n      const initialState = _objectSpread({}, conversation);\n\n      delete initialState.accessToken;\n      delete initialState.channelTopic;\n      this.setAccessToken(conversation.accessToken);\n      this.setChannelTopic(conversation.channelTopic);\n      this.updateUrls(body);\n      this.setConversationUrl(this.URLS.conversation);\n      this.locale = conversation.translation?.locale;\n      this.userResponded = conversation.userResponded;\n      return initialState;\n    } catch (error) {\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  getConfig() {\n    return superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}/client/${this.connectionInfo.apiKey}/configs`).set('Content-Type', 'application/json').query({\n      v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n    }).send({\n      context: _objectSpread(_objectSpread({}, this.config.context), {}, {\n        environment: this.config.sendEnvironment === true ? this.getEnvironment() : this.config.sendEnvironment\n      })\n    }).then(({\n      body\n    }) => {\n      this.updateUrls(body);\n      this.configReady = true;\n      return body.config;\n    }).catch(error => {\n      if (error.status === 404) {\n        throw new _errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_11__[\"default\"]();\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    });\n  }\n\n  async getConversation() {\n    if (!this.hasConversation()) {\n      return null;\n    }\n\n    try {\n      const {\n        body\n      } = await superagent__WEBPACK_IMPORTED_MODULE_1___default().get(`${this.getUrlPrefix('http')}${this.URLS.history}`).set('Authorization', `Bearer ${this.getAccessToken()}`).query({\n        v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n      });\n      this.updateUrls(body);\n      const {\n        messages,\n        participants,\n        activeServiceSessionId,\n        activeServiceSettings,\n        serviceData,\n        ui,\n        translation\n      } = body.history;\n      return {\n        events: messages.map(([type, msg]) => {\n          return {\n            type,\n            payload: _objectSpread(_objectSpread({}, msg), {}, {\n              type: type === 'participant' ? type : msg.type\n            })\n          };\n        }),\n        participants,\n        activeServiceSessionId,\n        activeServiceSettings,\n        serviceData,\n        resumeConversationPrompt: ui ? Boolean(ui.resumeConversationPrompt) : false,\n        translation\n      };\n    } catch (error) {\n      if (error.status === 401) {\n        throw new _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_13__[\"default\"](error);\n      }\n\n      if (error.status === 404) {\n        throw new _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_10__[\"default\"](error);\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  async connect() {\n    this.connected = false;\n    let conversationInitialState = null;\n\n    if (!this.hasConversation()) {\n      conversationInitialState = await this.createConversation();\n    }\n\n    this.conversationProducer = new _producer__WEBPACK_IMPORTED_MODULE_8__[\"default\"](`${this.getUrlPrefix('ws')}${this.URLS.socket}`, this.config.context.channelName, this.getChannelTopic(), this.getAccessToken());\n    this.internalProducer.emit(xstream__WEBPACK_IMPORTED_MODULE_0___default().create(this.conversationProducer)); // Send environment\n\n    if (this.config.sendEnvironment) {\n      this.send('context', {\n        environment: this.config.sendEnvironment === true ? this.getEnvironment() : this.config.sendEnvironment\n      }, false);\n    }\n\n    return conversationInitialState;\n  }\n\n  uploadFile(file, progressCallback, successCallback, errorCallback) {\n    const formData = new FormData();\n    formData.append('upload', file);\n    const req = superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}${this.URLS.uploads}`).set('Authorization', `Bearer ${this.getAccessToken()}`).send(formData);\n    req.on('progress', function (e) {\n      const {\n        direction,\n        percent\n      } = e;\n\n      if (direction === 'upload' && typeof progressCallback === 'function') {\n        progressCallback(percent);\n      }\n    });\n    req.then(uploadResponse => {\n      if (successCallback) {\n        successCallback(uploadResponse);\n      }\n    }).catch(err => {\n      if (errorCallback) {\n        errorCallback(err.response);\n      } else {\n        throw err;\n      }\n    });\n    return req;\n  }\n\n  getConversationIntitialState() {\n    return superagent__WEBPACK_IMPORTED_MODULE_1___default().get(`${this.getUrlPrefix('http')}${this.getConversationUrl()}`).set('Authorization', `Bearer ${this.getAccessToken()}`).query({\n      v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n    }).then(({\n      body\n    }) => {\n      this.updateUrls(body);\n      this.userResponded = body.conversation.userResponded;\n      return (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.omit)(body.conversation, ['accessToken', 'channelTopic']);\n    }).catch(error => {\n      if (error.status === 401) {\n        throw new _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_13__[\"default\"](error);\n      }\n\n      if (error.status === 404) {\n        throw new _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_10__[\"default\"](error);\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    });\n  }\n\n  async getTranslations(locale) {\n    try {\n      const url = `${this.getUrlPrefix('http')}${this.URLS.translations}`.replace('{version}', String(TRANSLATIONS_VERSION)).replace('{locale}', this.getLocale(locale));\n      const request = superagent__WEBPACK_IMPORTED_MODULE_1___default().get(url);\n      const {\n        body\n      } = await request;\n      return body.translations;\n    } catch (error) {\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  send(command, payload, waitForReady = true) {\n    if (!this.connected || waitForReady && !this.ready) {\n      // Wait for connection\n      this.connection$.filter(e => waitForReady ? e.connected && e.ready : e.connected).take(1).subscribe({\n        next: () => this.send(command, payload, waitForReady)\n      });\n      return;\n    }\n\n    log('[SEND]', command, payload);\n    this.conversationProducer.push(command, buildPayload(command, payload), 10000);\n  }\n\n  sendContext(context = {}) {\n    const {\n      locale,\n      variables\n    } = context;\n    const payload = {};\n\n    if (locale) {\n      if (typeof locale !== 'string') {\n        throw new Error('Locale must be a string');\n      }\n\n      payload.locale = locale;\n    }\n\n    if (variables) {\n      if (typeof variables !== 'object') {\n        throw new Error('Variables must be an object');\n      }\n\n      payload.variables = variables;\n    } // If we have empty context don't send context message\n\n\n    if (Object.keys(payload).length === 0 && payload.constructor === Object) {\n      return;\n    }\n\n    this.send('context', payload, false);\n  }\n\n  stream() {\n    return this.internal$.filter(event => event.type !== 'connection');\n  }\n\n  getEnvironment() {\n    return {\n      clientName: \"@seamly/web-ui\",\n      clientVariant: this.layoutMode,\n      clientVersion: \"20.5.0\",\n      currentUrl: window.location.toString(),\n      screenResolution: `${window.screen.width}x${window.screen.height}`,\n      timezone: getTimeZone(),\n      userAgent: navigator.userAgent\n    };\n  }\n\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"API\": () => (/* binding */ API)\n/* harmony export */ });\n/* harmony import */ var xstream__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! xstream */ \"./node_modules/xstream/index.js\");\n/* harmony import */ var xstream__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(xstream__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var superagent__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! superagent */ \"./node_modules/superagent/lib/client.js\");\n/* harmony import */ var superagent__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(superagent__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var lib_store_index__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/store/index */ \"./src/javascripts/lib/store/index.js\");\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! lib/store/providers/session-storage */ \"./src/javascripts/lib/store/providers/session-storage.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! lib/debug */ \"./src/javascripts/lib/debug.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(lib_debug__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _producer__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./producer */ \"./src/javascripts/api/producer.js\");\n/* harmony import */ var _event_producer__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./event-producer */ \"./src/javascripts/api/event-producer.js\");\n/* harmony import */ var _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var _errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./errors/seamly-configuration-error */ \"./src/javascripts/api/errors/seamly-configuration-error.js\");\n/* harmony import */ var _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./errors/seamly-general-error */ \"./src/javascripts/api/errors/seamly-general-error.js\");\n/* harmony import */ var _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./errors/seamly-unauthorized-error */ \"./src/javascripts/api/errors/seamly-unauthorized-error.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst log = lib_debug__WEBPACK_IMPORTED_MODULE_6___default()('seamly');\nconst DOMAIN = 'api.seamly-app.com';\nconst TRANSLATIONS_VERSION = 1;\n\nfunction buildPayload(command, payload) {\n  if (command !== 'message') {\n    return payload;\n  }\n\n  const {\n    type,\n    body\n  } = payload;\n  let {\n    transactionId\n  } = payload;\n\n  if (!transactionId) {\n    transactionId = (0,lib_id__WEBPACK_IMPORTED_MODULE_4__.randomId)();\n  }\n\n  return {\n    type,\n    body,\n    transactionId\n  };\n}\n/**\n * Tries to get the time zone key directly from the operating system for those\n * environments that support the ECMAScript Internationalization API.\n *\n * Based on https://github.com/pellepim/jstimezonedetect/blob/master/jstz.main.js\n */\n\n\nfunction getTimeZone() {\n  if (!Intl || typeof Intl === 'undefined' || typeof Intl.DateTimeFormat === 'undefined') {\n    return null;\n  }\n\n  const format = Intl.DateTimeFormat();\n\n  if (typeof format === 'undefined' || typeof format.resolvedOptions === 'undefined') {\n    return null;\n  }\n\n  const timezone = format.resolvedOptions().timeZone; // Ensure we get a valid timezone\n\n  if (timezone && (timezone.indexOf('/') > -1 || timezone === 'UTC')) {\n    return timezone;\n  } else {\n    return null;\n  }\n}\n\nclass API {\n  /**\n   * Creates an instance of API.\n   * @param {Object} [config={}]\n   * @param {string} config.key Api key\n   * @param {string} config.domain Domain to connect to\n   * @param {string} config.secure Connect securely\n   * @param {string} config.externalId Unique visitor identifier (optional)\n   * @param {boolean} config.sendEnvironment\n   * @param {string} layoutMode\n   * @param {string} namespace\n   * @param {Object} [context={ channelName: undefined, variables: undefined, locale: undefined, topic: undefined, translationLocale: undefined }]\n   * @param {string} context.channelName\n   * @param {object} context.variables\n   * @param {string} context.locale\n   * @param {string} context.topic\n   * @param {string} context.translationLocale\n   * @memberof API\n   */\n  constructor({\n    layoutMode,\n    namespace,\n    config = {},\n    context = {}\n  }) {\n    this.store = (0,lib_store_index__WEBPACK_IMPORTED_MODULE_3__.objectStore)(`${namespace}.connection${context.locale ? '.' + context.locale : ''}`, config.storageProvider || lib_store_providers_session_storage__WEBPACK_IMPORTED_MODULE_5__[\"default\"]);\n    this.connectionInfo = {\n      apiKey: config.key,\n      domain: config.domain || DOMAIN,\n      secure: config.secure !== false ? config.secure || true : false\n    };\n    this.config = {\n      sendEnvironment: config.sendEnvironment ?? true,\n      context: _objectSpread(_objectSpread({}, context), {}, {\n        channelName: context.channelName || 'web'\n      })\n    };\n    this.connected = false;\n    this.configReady = false;\n    this.externalId = config.externalId;\n    this.layoutMode = layoutMode;\n    this.userResponded = false;\n    this.internalProducer = new _event_producer__WEBPACK_IMPORTED_MODULE_9__[\"default\"]('API');\n    this.internal$ = xstream__WEBPACK_IMPORTED_MODULE_0___default().create(this.internalProducer).flatten();\n    this.connection$ = this.internal$.filter(event => event.type === 'connection');\n    this.connection$.subscribe({\n      next: ({\n        connected,\n        ready\n      }) => {\n        this.connected = connected;\n        this.ready = ready;\n      }\n    });\n    this.URLS = {}; // 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\n    window.addEventListener('pageshow', event => {\n      if (event.persisted && this.connected) {\n        this.connect();\n      }\n    });\n  }\n\n  getAccessToken() {\n    return this.store.get('accessToken');\n  }\n\n  setAccessToken(accessToken) {\n    this.store.set('accessToken', accessToken);\n  }\n\n  getConversationUrl() {\n    return this.store.get('conversationUrl');\n  }\n\n  setConversationUrl(url) {\n    this.store.set('conversationUrl', url);\n  }\n\n  hasConversation() {\n    return !!this.getConversationUrl();\n  }\n\n  getChannelTopic() {\n    // The `channelName` fallback is needed for seamless client upgrades.\n    // TODO: Remove when all clients have been upgraded past v20.\n    return this.store.get('channelTopic') || this.store.get('channelName');\n  }\n\n  setChannelTopic(topic) {\n    this.store.set('channelTopic', topic);\n  }\n\n  getLocale = locale => locale || this.locale;\n\n  clearStore() {\n    this.store.delete('accessToken');\n    this.store.delete('conversationUrl'); // TODO: Remove `channelName` when all clients have been upgraded past v20.\n\n    this.store.delete('channelName');\n    this.store.delete('channelTopic');\n  }\n\n  getUrlPrefix(protocol) {\n    const realProtocol = this.connectionInfo.secure ? `${protocol}s` : protocol;\n    return `${realProtocol}://${this.connectionInfo.domain}`;\n  }\n\n  updateUrls({\n    _links: responseLinks\n  }) {\n    this.URLS = Object.entries(responseLinks).filter(([key]) => key !== 'self').reduce((urls, [key, {\n      href\n    }]) => {\n      return _objectSpread(_objectSpread({}, urls), {}, {\n        [key]: href\n      });\n    }, this.URLS);\n  }\n\n  async reset() {\n    await this.disconnect();\n    this.clearStore();\n    return this.getConfig();\n  }\n\n  async disconnect() {\n    if (this.conversationProducer) {\n      await this.conversationProducer.disconnect();\n    }\n\n    this.connected = false;\n    this.configReady = false;\n  }\n\n  async createConversation() {\n    try {\n      var _conversation$transla;\n\n      const request = superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}${this.URLS.conversations}`).set('Content-Type', 'application/json').query({\n        v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n      }) // withCredentials() is necessary to allow browsers to save received\n      // cookies in CORS requests.\n      .withCredentials().send({\n        externalId: this.externalId || undefined\n      });\n      const {\n        body\n      } = await request;\n      const {\n        conversation\n      } = body;\n\n      const initialState = _objectSpread({}, conversation);\n\n      delete initialState.accessToken;\n      delete initialState.channelTopic;\n      this.setAccessToken(conversation.accessToken);\n      this.setChannelTopic(conversation.channelTopic);\n      this.updateUrls(body);\n      this.setConversationUrl(this.URLS.conversation);\n      this.locale = (_conversation$transla = conversation.translation) === null || _conversation$transla === void 0 ? void 0 : _conversation$transla.locale;\n      this.userResponded = conversation.userResponded;\n      return initialState;\n    } catch (error) {\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  getConfig() {\n    return superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}/client/${this.connectionInfo.apiKey}/configs`).set('Content-Type', 'application/json').query({\n      v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n    }).send({\n      context: _objectSpread(_objectSpread({}, this.config.context), {}, {\n        environment: this.config.sendEnvironment === true ? this.getEnvironment() : this.config.sendEnvironment\n      })\n    }).then(({\n      body\n    }) => {\n      this.updateUrls(body);\n      this.configReady = true;\n      return body.config;\n    }).catch(error => {\n      if (error.status === 404) {\n        throw new _errors_seamly_configuration_error__WEBPACK_IMPORTED_MODULE_11__[\"default\"]();\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    });\n  }\n\n  async getConversation() {\n    if (!this.hasConversation()) {\n      return null;\n    }\n\n    try {\n      const {\n        body\n      } = await superagent__WEBPACK_IMPORTED_MODULE_1___default().get(`${this.getUrlPrefix('http')}${this.URLS.history}`).set('Authorization', `Bearer ${this.getAccessToken()}`).query({\n        v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n      });\n      this.updateUrls(body);\n      const {\n        messages,\n        participants,\n        activeServiceSessionId,\n        activeServiceSettings,\n        serviceData,\n        ui,\n        translation\n      } = body.history;\n      return {\n        events: messages.map(([type, msg]) => {\n          return {\n            type,\n            payload: _objectSpread(_objectSpread({}, msg), {}, {\n              type: type === 'participant' ? type : msg.type\n            })\n          };\n        }),\n        participants,\n        activeServiceSessionId,\n        activeServiceSettings,\n        serviceData,\n        resumeConversationPrompt: ui ? Boolean(ui.resumeConversationPrompt) : false,\n        translation\n      };\n    } catch (error) {\n      if (error.status === 401) {\n        throw new _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_13__[\"default\"](error);\n      }\n\n      if (error.status === 404) {\n        throw new _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_10__[\"default\"](error);\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  async connect() {\n    this.connected = false;\n    let conversationInitialState = null;\n\n    if (!this.hasConversation()) {\n      conversationInitialState = await this.createConversation();\n    }\n\n    this.conversationProducer = new _producer__WEBPACK_IMPORTED_MODULE_8__[\"default\"](`${this.getUrlPrefix('ws')}${this.URLS.socket}`, this.config.context.channelName, this.getChannelTopic(), this.getAccessToken());\n    this.internalProducer.emit(xstream__WEBPACK_IMPORTED_MODULE_0___default().create(this.conversationProducer)); // Send environment\n\n    if (this.config.sendEnvironment) {\n      this.send('context', {\n        environment: this.config.sendEnvironment === true ? this.getEnvironment() : this.config.sendEnvironment\n      }, false);\n    }\n\n    return conversationInitialState;\n  }\n\n  uploadFile(file, progressCallback, successCallback, errorCallback) {\n    const formData = new FormData();\n    formData.append('upload', file);\n    const req = superagent__WEBPACK_IMPORTED_MODULE_1___default().post(`${this.getUrlPrefix('http')}${this.URLS.uploads}`).set('Authorization', `Bearer ${this.getAccessToken()}`).send(formData);\n    req.on('progress', function (e) {\n      const {\n        direction,\n        percent\n      } = e;\n\n      if (direction === 'upload' && typeof progressCallback === 'function') {\n        progressCallback(percent);\n      }\n    });\n    req.then(uploadResponse => {\n      if (successCallback) {\n        successCallback(uploadResponse);\n      }\n    }).catch(err => {\n      if (errorCallback) {\n        errorCallback(err.response);\n      } else {\n        throw err;\n      }\n    });\n    return req;\n  }\n\n  getConversationIntitialState() {\n    return superagent__WEBPACK_IMPORTED_MODULE_1___default().get(`${this.getUrlPrefix('http')}${this.getConversationUrl()}`).set('Authorization', `Bearer ${this.getAccessToken()}`).query({\n      v: config__WEBPACK_IMPORTED_MODULE_2__.apiVersion\n    }).then(({\n      body\n    }) => {\n      this.updateUrls(body);\n      this.userResponded = body.conversation.userResponded;\n      return (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.omit)(body.conversation, ['accessToken', 'channelTopic']);\n    }).catch(error => {\n      if (error.status === 401) {\n        throw new _errors_seamly_unauthorized_error__WEBPACK_IMPORTED_MODULE_13__[\"default\"](error);\n      }\n\n      if (error.status === 404) {\n        throw new _errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_10__[\"default\"](error);\n      }\n\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    });\n  }\n\n  async getTranslations(locale) {\n    try {\n      const url = `${this.getUrlPrefix('http')}${this.URLS.translations}`.replace('{version}', String(TRANSLATIONS_VERSION)).replace('{locale}', this.getLocale(locale));\n      const request = superagent__WEBPACK_IMPORTED_MODULE_1___default().get(url);\n      const {\n        body\n      } = await request;\n      return body.translations;\n    } catch (error) {\n      if (error.status >= 500) {\n        throw new _errors_seamly_general_error__WEBPACK_IMPORTED_MODULE_12__[\"default\"](error);\n      }\n\n      throw error;\n    }\n  }\n\n  send(command, payload, waitForReady = true) {\n    if (!this.connected || waitForReady && !this.ready) {\n      // Wait for connection\n      this.connection$.filter(e => waitForReady ? e.connected && e.ready : e.connected).take(1).subscribe({\n        next: () => this.send(command, payload, waitForReady)\n      });\n      return;\n    }\n\n    log('[SEND]', command, payload);\n    this.conversationProducer.push(command, buildPayload(command, payload), 10000);\n  }\n\n  sendContext(context = {}) {\n    const {\n      locale,\n      variables\n    } = context;\n    const payload = {};\n\n    if (locale) {\n      if (typeof locale !== 'string') {\n        throw new Error('Locale must be a string');\n      }\n\n      payload.locale = locale;\n    }\n\n    if (variables) {\n      if (typeof variables !== 'object') {\n        throw new Error('Variables must be an object');\n      }\n\n      payload.variables = variables;\n    } // If we have empty context don't send context message\n\n\n    if (Object.keys(payload).length === 0 && payload.constructor === Object) {\n      return;\n    }\n\n    this.send('context', payload, false);\n  }\n\n  stream() {\n    return this.internal$.filter(event => event.type !== 'connection');\n  }\n\n  getEnvironment() {\n    return {\n      clientName: \"@seamly/web-ui\",\n      clientVariant: this.layoutMode,\n      clientVersion: \"20.7.0\",\n      currentUrl: window.location.toString(),\n      screenResolution: `${window.screen.width}x${window.screen.height}`,\n      timezone: getTimeZone(),\n      userAgent: navigator.userAgent\n    };\n  }\n\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/index.js?");
 
 /***/ }),
 
@@ -289,7 +278,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ ConversationProducer)\n/* harmony export */ });\n/* harmony import */ var phoenix__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! phoenix */ \"./node_modules/phoenix/priv/static/phoenix.esm.js\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var lib_split_url_params__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/split-url-params */ \"./src/javascripts/lib/split-url-params.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/debug */ \"./src/javascripts/lib/debug.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(lib_debug__WEBPACK_IMPORTED_MODULE_3__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\nconst log = lib_debug__WEBPACK_IMPORTED_MODULE_3___default()('seamly');\nclass ConversationProducer {\n  constructor(url, channelName, channelTopic, accessToken) {\n    this.url = url;\n    this.accessToken = accessToken;\n    this.channelName = channelName;\n    this.channelTopic = channelTopic;\n    this.connect();\n    this.socket.onError(err => {\n      log('[SOCKET][ERROR]', err);\n      this.emit({\n        type: 'error',\n        payload: {\n          type: 'seamly_offline',\n          error: err\n        }\n      });\n    });\n    this.socket.onOpen(() => {\n      log('[SOCKET]OPEN');\n      this.emit({\n        type: 'socket_opened'\n      });\n    });\n    this.channel.on('system', msg => {\n      switch (msg.type) {\n        case 'attach_channel_succeeded':\n          this.emit({\n            type: 'connection',\n            connected: true,\n            ready: true\n          });\n          break;\n      }\n    });\n    this.socket.onClose(() => {\n      log('[SOCKET]CLOSE');\n      this.emit({\n        type: 'connection',\n        connected: false,\n        ready: false\n      });\n    });\n    this.channel.onClose(() => {\n      log('[CHANNEL]CLOSE');\n      this.emit({\n        type: 'connection',\n        connected: false,\n        ready: false\n      });\n    });\n    this.channel.onError(msg => {\n      log('[CHANNEL][ERROR]', msg);\n      this.emit({\n        type: 'connection',\n        connected: false,\n        ready: false\n      });\n    });\n    this.listenTo('ack');\n    this.listenTo('ui');\n    this.listenTo('error');\n    this.listenTo('participant', (type, msg) => _objectSpread(_objectSpread({}, msg), {}, {\n      type\n    }));\n    this.listenTo('message');\n    this.listenTo('service_data');\n    this.listenTo('system');\n    this.listenTo('info');\n    this.listenTo('sync');\n  }\n\n  start(listener) {\n    this.listener = listener;\n    this.channel.join().receive('ok', () => {\n      log('[CHANNEL][JOIN] OK');\n      this.emit({\n        type: 'connection',\n        connected: true,\n        ready: false\n      });\n    }).receive('error', err => {\n      log('[CHANNEL][JOIN] ERROR', err);\n      this.emit({\n        type: 'error',\n        payload: {\n          type: 'join_channel_erred',\n          error: err\n        }\n      });\n      this.emit({\n        type: 'connection',\n        connected: false,\n        ready: false\n      });\n      this.channel.socket.disconnect();\n    }).receive('timeout', () => {\n      log('[CHANEL][JOIN] Networking issue. Still waiting...');\n    });\n  }\n\n  stop() {\n    this.listener = null;\n  }\n\n  connect() {\n    const {\n      url,\n      params\n    } = (0,lib_split_url_params__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(this.url);\n    this.socket = new phoenix__WEBPACK_IMPORTED_MODULE_0__.Socket(url, {\n      params: _objectSpread(_objectSpread({}, params), {}, {\n        v: config__WEBPACK_IMPORTED_MODULE_1__.apiVersion\n      })\n    });\n    this.socket.connect();\n    this.channel = this.socket.channel(this.channelTopic, {\n      authorization: `Bearer ${this.accessToken}`,\n      channelName: this.channelName\n    });\n  }\n\n  disconnect() {\n    return new Promise(resolve => {\n      this.socket.disconnect(resolve);\n    });\n  }\n\n  listenTo(type, transform = null) {\n    this.channel.on(type, msg => {\n      log('[RECEIVE]', type, msg);\n      this.emit({\n        type,\n        payload: transform ? transform(type, msg) : msg\n      });\n    });\n  }\n\n  emit(payload) {\n    if (!this.listener) {\n      return;\n    }\n\n    this.listener.next(payload);\n  }\n\n  push(command, payload, timeout) {\n    this.channel.push(command, payload, timeout);\n  }\n\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/producer.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ ConversationProducer)\n/* harmony export */ });\n/* harmony import */ var phoenix__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! phoenix */ \"./node_modules/phoenix/priv/static/phoenix.mjs\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var lib_split_url_params__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/split-url-params */ \"./src/javascripts/lib/split-url-params.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/debug */ \"./src/javascripts/lib/debug.js\");\n/* harmony import */ var lib_debug__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(lib_debug__WEBPACK_IMPORTED_MODULE_3__);\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\nconst log = lib_debug__WEBPACK_IMPORTED_MODULE_3___default()('seamly');\nclass ConversationProducer {\n  constructor(url, channelName, channelTopic, accessToken) {\n    this.url = url;\n    this.accessToken = accessToken;\n    this.channelName = channelName;\n    this.channelTopic = channelTopic;\n    this.connect();\n    this.socket.onError(err => {\n      log('[SOCKET][ERROR]', err);\n      this.emit({\n        type: 'error',\n        payload: {\n          type: 'seamly_offline',\n          error: err\n        }\n      });\n    });\n    this.socket.onOpen(() => {\n      log('[SOCKET]OPEN');\n      this.emit({\n        type: 'socket_opened'\n      });\n    });\n    this.channel.on('system', msg => {\n      switch (msg.type) {\n        case 'attach_channel_succeeded':\n          this.emit({\n            type: 'connection',\n            connected: true,\n            ready: true\n          });\n          break;\n      }\n    });\n    this.socket.onClose(() => {\n      log('[SOCKET]CLOSE');\n      this.emit({\n        type: 'connection',\n        connected: false,\n        ready: false\n      });\n    });\n    this.channel.onClose(() => {\n      log('[CHANNEL]CLOSE');\n      this.emit({\n        type: 'connection',\n        connected: false,\n        ready: false\n      });\n    });\n    this.channel.onError(msg => {\n      log('[CHANNEL][ERROR]', msg);\n      this.emit({\n        type: 'connection',\n        connected: false,\n        ready: false\n      });\n    });\n    this.listenTo('ack');\n    this.listenTo('ui');\n    this.listenTo('error');\n    this.listenTo('participant', (type, msg) => _objectSpread(_objectSpread({}, msg), {}, {\n      type\n    }));\n    this.listenTo('message');\n    this.listenTo('service_data');\n    this.listenTo('system');\n    this.listenTo('info');\n    this.listenTo('sync');\n  }\n\n  start(listener) {\n    this.listener = listener;\n    this.channel.join().receive('ok', () => {\n      log('[CHANNEL][JOIN] OK');\n      this.emit({\n        type: 'connection',\n        connected: true,\n        ready: false\n      });\n    }).receive('error', err => {\n      log('[CHANNEL][JOIN] ERROR', err);\n      this.emit({\n        type: 'error',\n        payload: {\n          type: 'join_channel_erred',\n          error: err\n        }\n      });\n      this.emit({\n        type: 'connection',\n        connected: false,\n        ready: false\n      });\n      this.channel.socket.disconnect();\n    }).receive('timeout', () => {\n      log('[CHANEL][JOIN] Networking issue. Still waiting...');\n    });\n  }\n\n  stop() {\n    this.listener = null;\n  }\n\n  connect() {\n    const {\n      url,\n      params\n    } = (0,lib_split_url_params__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(this.url);\n    this.socket = new phoenix__WEBPACK_IMPORTED_MODULE_0__.Socket(url, {\n      params: _objectSpread(_objectSpread({}, params), {}, {\n        v: config__WEBPACK_IMPORTED_MODULE_1__.apiVersion\n      })\n    });\n    this.socket.connect();\n    this.channel = this.socket.channel(this.channelTopic, {\n      authorization: `Bearer ${this.accessToken}`,\n      channelName: this.channelName\n    });\n  }\n\n  disconnect() {\n    return new Promise(resolve => {\n      this.socket.disconnect(resolve);\n    });\n  }\n\n  listenTo(type, transform = null) {\n    this.channel.on(type, msg => {\n      log('[RECEIVE]', type, msg);\n      this.emit({\n        type,\n        payload: transform ? transform(type, msg) : msg\n      });\n    });\n  }\n\n  emit(payload) {\n    if (!this.listener) {\n      return;\n    }\n\n    this.listener.next(payload);\n  }\n\n  push(command, payload, timeout) {\n    this.channel.push(command, payload, timeout);\n  }\n\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/api/producer.js?");
 
 /***/ }),
 
@@ -311,7 +300,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 */   \"initialize\": () => (/* binding */ initialize),\n/* harmony export */   \"reset\": () => (/* binding */ reset),\n/* harmony export */   \"setHasResponded\": () => (/* binding */ setHasResponded)\n/* harmony export */ });\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.js\");\n/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n/actions */ \"./src/javascripts/domains/i18n/actions.js\");\n/* harmony import */ var domains_translations_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/translations/actions */ \"./src/javascripts/domains/translations/actions.js\");\n/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/visibility/actions */ \"./src/javascripts/domains/visibility/actions.js\");\n/* harmony import */ var api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! api/errors/seamly-unavailable-error */ \"./src/javascripts/api/errors/seamly-unavailable-error.js\");\n/* harmony import */ var api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/interrupt/actions */ \"./src/javascripts/domains/interrupt/actions.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/app/utils.js\");\n\n\n\n\n\n\n\n\n\nconst setHasResponded = (0,_utils__WEBPACK_IMPORTED_MODULE_8__.createAction)('setHasResponded', hasResponded => ({\n  hasResponded\n}));\nconst initialize = (0,_utils__WEBPACK_IMPORTED_MODULE_8__.createThunk)('initialize', async (_, {\n  dispatch,\n  extra: {\n    api,\n    config\n  }\n}) => {\n  dispatch(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initialize(config));\n  let locale = config?.context?.locale;\n\n  try {\n    const {\n      features,\n      defaultLocale,\n      preChat,\n      agentParticipant,\n      userParticipant,\n      startChatIcon\n    } = await api.getConfig();\n    dispatch({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_FEATURES,\n      features\n    });\n    locale = locale || defaultLocale;\n    dispatch(domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setInitialLocale(locale));\n    dispatch(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.setPreChatEvents(preChat.map(payload => ({\n      type: 'message',\n      payload\n    }))));\n    dispatch(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.update({\n      agentParticipant,\n      userParticipant,\n      startChatIcon\n    }));\n\n    if (agentParticipant?.name) {\n      dispatch({\n        type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_HEADER_SUB_TITLE,\n        title: agentParticipant.name\n      });\n    }\n  } catch (e) {\n    throw new api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"]();\n  }\n\n  try {\n    if (api.hasConversation()) {\n      const initialState = await api.getConversationIntitialState();\n      dispatch({\n        type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_INITIAL_STATE,\n        initialState\n      });\n      locale = initialState.translation?.locale || locale;\n\n      if ('userResponded' in initialState) {\n        dispatch(setHasResponded(initialState.userResponded));\n      }\n    } else {\n      if (config?.context?.topic) {\n        api.send('action', {\n          type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.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\n      if (config?.context?.translationLocale) {\n        locale = config.context.translationLocale;\n        api.send('action', {\n          type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.actionTypes.setTranslation,\n          body: {\n            enabled: true,\n            locale\n          }\n        });\n        dispatch(domains_translations_actions__WEBPACK_IMPORTED_MODULE_3__.enable(locale));\n      }\n    }\n  } catch (e) {\n    if (e instanceof api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_6__[\"default\"]) {\n      throw e;\n    }\n\n    throw new api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"]();\n  } finally {\n    await dispatch(domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale(locale));\n    dispatch(domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__.initialize());\n  }\n});\nconst reset = (0,_utils__WEBPACK_IMPORTED_MODULE_8__.createThunk)('reset', async (config, {\n  dispatch,\n  extra: {\n    api\n  }\n}) => {\n  try {\n    await api.disconnect();\n    await api.clearStore();\n    dispatch(initialize());\n  } catch (error) {\n    dispatch(domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__.set(error));\n  }\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/app/actions.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"initialize\": () => (/* binding */ initialize),\n/* harmony export */   \"reset\": () => (/* binding */ reset),\n/* harmony export */   \"setHasResponded\": () => (/* binding */ setHasResponded)\n/* harmony export */ });\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config/actions */ \"./src/javascripts/domains/config/actions.js\");\n/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n/actions */ \"./src/javascripts/domains/i18n/actions.js\");\n/* harmony import */ var domains_translations_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/translations/actions */ \"./src/javascripts/domains/translations/actions.js\");\n/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/visibility/actions */ \"./src/javascripts/domains/visibility/actions.js\");\n/* harmony import */ var api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! api/errors/seamly-unavailable-error */ \"./src/javascripts/api/errors/seamly-unavailable-error.js\");\n/* harmony import */ var api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! api/errors/seamly-session-expired-error */ \"./src/javascripts/api/errors/seamly-session-expired-error.js\");\n/* harmony import */ var domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/interrupt/actions */ \"./src/javascripts/domains/interrupt/actions.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/app/utils.js\");\n\n\n\n\n\n\n\n\n\nconst setHasResponded = (0,_utils__WEBPACK_IMPORTED_MODULE_8__.createAction)('setHasResponded', hasResponded => ({\n  hasResponded\n}));\nconst initialize = (0,_utils__WEBPACK_IMPORTED_MODULE_8__.createThunk)('initialize', async (_, {\n  dispatch,\n  extra: {\n    api,\n    config\n  }\n}) => {\n  var _config$context;\n\n  dispatch(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.initialize(config));\n  let locale = config === null || config === void 0 ? void 0 : (_config$context = config.context) === null || _config$context === void 0 ? void 0 : _config$context.locale;\n\n  try {\n    const {\n      features,\n      defaultLocale,\n      preChat,\n      agentParticipant,\n      userParticipant,\n      startChatIcon\n    } = await api.getConfig();\n    dispatch({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_FEATURES,\n      features\n    });\n    locale = locale || defaultLocale;\n    dispatch(domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setInitialLocale(locale));\n    dispatch(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.setPreChatEvents(preChat.map(payload => ({\n      type: 'message',\n      payload\n    }))));\n    dispatch(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__.update({\n      agentParticipant,\n      userParticipant,\n      startChatIcon\n    }));\n\n    if (agentParticipant !== null && agentParticipant !== void 0 && agentParticipant.name) {\n      dispatch({\n        type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_HEADER_SUB_TITLE,\n        title: agentParticipant.name\n      });\n    }\n  } catch (e) {\n    throw new api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"]();\n  }\n\n  try {\n    if (api.hasConversation()) {\n      var _initialState$transla;\n\n      const initialState = await api.getConversationIntitialState();\n      dispatch({\n        type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_INITIAL_STATE,\n        initialState\n      });\n      locale = ((_initialState$transla = initialState.translation) === null || _initialState$transla === void 0 ? void 0 : _initialState$transla.locale) || locale;\n\n      if ('userResponded' in initialState) {\n        dispatch(setHasResponded(initialState.userResponded));\n      }\n    } else {\n      var _config$context2, _config$context3;\n\n      if (config !== null && config !== void 0 && (_config$context2 = config.context) !== null && _config$context2 !== void 0 && _config$context2.topic) {\n        api.send('action', {\n          type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.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\n      if (config !== null && config !== void 0 && (_config$context3 = config.context) !== null && _config$context3 !== void 0 && _config$context3.translationLocale) {\n        locale = config.context.translationLocale;\n        api.send('action', {\n          type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.actionTypes.setTranslation,\n          body: {\n            enabled: true,\n            locale\n          }\n        });\n        dispatch(domains_translations_actions__WEBPACK_IMPORTED_MODULE_3__.enable(locale));\n      }\n    }\n  } catch (e) {\n    if (e instanceof api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_6__[\"default\"]) {\n      throw e;\n    }\n\n    throw new api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_5__[\"default\"]();\n  } finally {\n    await dispatch(domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__.setLocale(locale));\n    dispatch(domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__.initialize());\n  }\n});\nconst reset = (0,_utils__WEBPACK_IMPORTED_MODULE_8__.createThunk)('reset', async (config, {\n  dispatch,\n  extra: {\n    api\n  }\n}) => {\n  try {\n    await api.disconnect();\n    await api.clearStore();\n    dispatch(initialize());\n  } catch (error) {\n    dispatch(domains_interrupt_actions__WEBPACK_IMPORTED_MODULE_7__.set(error));\n  }\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/app/actions.js?");
 
 /***/ }),
 
@@ -421,7 +410,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 */   \"selectConfig\": () => (/* binding */ selectConfig),\n/* harmony export */   \"selectState\": () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_1__.selectState)\n/* harmony export */ });\n/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! reselect */ \"./node_modules/reselect/es/index.js\");\n/* harmony import */ var domains_visibility_constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/visibility/constants */ \"./src/javascripts/domains/visibility/constants.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/config/utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\nconst selectConfig = (0,reselect__WEBPACK_IMPORTED_MODULE_2__.createSelector)(_utils__WEBPACK_IMPORTED_MODULE_1__.selectState, config => {\n  let newConfig = _objectSpread({\n    visible: config?.layoutMode === 'inline' ? domains_visibility_constants__WEBPACK_IMPORTED_MODULE_0__.visibilityStates.open : domains_visibility_constants__WEBPACK_IMPORTED_MODULE_0__.visibilityStates.minimized,\n    appContainerClassNames: config.appContainerClassNames || []\n  }, config);\n\n  if (typeof newConfig.appContainerClassNames === 'function') {\n    newConfig = _objectSpread(_objectSpread({}, newConfig), {}, {\n      appContainerClassNames: newConfig.appContainerClassNames(newConfig)\n    });\n  }\n\n  return newConfig;\n});\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/selectors.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"selectConfig\": () => (/* binding */ selectConfig),\n/* harmony export */   \"selectState\": () => (/* reexport safe */ _utils__WEBPACK_IMPORTED_MODULE_1__.selectState)\n/* harmony export */ });\n/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! reselect */ \"./node_modules/reselect/es/index.js\");\n/* harmony import */ var domains_visibility_constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/visibility/constants */ \"./src/javascripts/domains/visibility/constants.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/config/utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\nconst selectConfig = (0,reselect__WEBPACK_IMPORTED_MODULE_2__.createSelector)(_utils__WEBPACK_IMPORTED_MODULE_1__.selectState, config => {\n  let newConfig = _objectSpread({\n    visible: (config === null || config === void 0 ? void 0 : config.layoutMode) === 'inline' ? domains_visibility_constants__WEBPACK_IMPORTED_MODULE_0__.visibilityStates.open : domains_visibility_constants__WEBPACK_IMPORTED_MODULE_0__.visibilityStates.minimized,\n    appContainerClassNames: config.appContainerClassNames || []\n  }, config);\n\n  if (typeof newConfig.appContainerClassNames === 'function') {\n    newConfig = _objectSpread(_objectSpread({}, newConfig), {}, {\n      appContainerClassNames: newConfig.appContainerClassNames(newConfig)\n    });\n  }\n\n  return newConfig;\n});\n\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/config/selectors.js?");
 
 /***/ }),
 
@@ -443,7 +432,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 */   \"catchError\": () => (/* binding */ catchError),\n/* harmony export */   \"createMiddleware\": () => (/* binding */ createMiddleware)\n/* harmony export */ });\n/* harmony import */ var lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n\n\nconst {\n  createAction\n} = (0,lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('errors');\nconst catchError = createAction('catch-error', error => ({\n  error\n}));\nfunction createMiddleware({\n  api: seamlyApi\n}) {\n  return ({\n    getState\n  }) => {\n    const handleError = action => {\n      const {\n        errorCallback,\n        namespace,\n        api,\n        layoutMode\n      } = domains_config__WEBPACK_IMPORTED_MODULE_1__.Selectors.selectConfig(getState());\n      errorCallback?.(action.error, {\n        namespace,\n        api,\n        layoutMode,\n        conversationUrl: seamlyApi.getConversationUrl(),\n        action: action.type ? action : undefined\n      });\n    };\n\n    return next => action => {\n      try {\n        if (action.error) {\n          handleError(action);\n        }\n\n        return next(action);\n      } catch (error) {\n        handleError({\n          error\n        });\n        throw error;\n      }\n    };\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/errors/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"catchError\": () => (/* binding */ catchError),\n/* harmony export */   \"createMiddleware\": () => (/* binding */ createMiddleware)\n/* harmony export */ });\n/* harmony import */ var lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n\n\nconst {\n  createAction\n} = (0,lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('errors');\nconst catchError = createAction('catch-error', error => ({\n  error\n}));\nfunction createMiddleware({\n  api: seamlyApi\n}) {\n  return ({\n    getState\n  }) => {\n    const handleError = action => {\n      const {\n        errorCallback,\n        namespace,\n        api,\n        layoutMode\n      } = domains_config__WEBPACK_IMPORTED_MODULE_1__.Selectors.selectConfig(getState());\n      errorCallback === null || errorCallback === void 0 ? void 0 : errorCallback(action.error, {\n        namespace,\n        api,\n        layoutMode,\n        conversationUrl: seamlyApi.getConversationUrl(),\n        action: action.type ? action : undefined\n      });\n    };\n\n    return next => action => {\n      try {\n        if (action.error) {\n          handleError(action);\n        }\n\n        return next(action);\n      } catch (error) {\n        handleError({\n          error\n        });\n        throw error;\n      }\n    };\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/errors/index.js?");
 
 /***/ }),
 
@@ -476,7 +465,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 */   \"useForm\": () => (/* binding */ useForm),\n/* harmony export */   \"useFormContext\": () => (/* binding */ useFormContext),\n/* harmony export */   \"useFormControl\": () => (/* binding */ useFormControl),\n/* harmony export */   \"useValidations\": () => (/* binding */ useValidations)\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 domains_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./context */ \"./src/javascripts/domains/forms/context.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/forms/actions.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/forms/selectors.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/forms/utils.js\");\n\n\n\n\n\n\nfunction useFormContext() {\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_context__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n}\nfunction useForm() {\n  const {\n    handleSubmit,\n    isSubmitted,\n    isValid\n  } = useFormContext();\n  return {\n    handleSubmit,\n    isSubmitted,\n    isValid\n  };\n}\nfunction useValidations(values, validationSchema) {\n  const errors = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => (0,_utils__WEBPACK_IMPORTED_MODULE_5__.validate)(values, validationSchema), [values, validationSchema]);\n  return {\n    isValid: Object.keys(errors).length === 0,\n    errors\n  };\n}\nfunction useFormControl(name) {\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useStoreDispatch)();\n  const {\n    formId,\n    updateControlValue,\n    updateControlTouched,\n    errors\n  } = useFormContext();\n  const form = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getFormById, {\n    formId\n  }, [formId]);\n  const isRegistered = !!form;\n  const isRegisteredRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  isRegisteredRef.current = isRegistered;\n  const value = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getControlValueByName, {\n    formId,\n    name\n  }, [formId, name]);\n  const touched = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getControlTouchedByName, {\n    formId,\n    name\n  }, [formId, name]);\n  const error = errors?.[name];\n  const isValid = !error;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    // Make sure the form is registered\n    // Since child useEffect runs before FormProvider useEffect\n    if (isRegisteredRef.current) {\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.registerControl(formId, name));\n    }\n  }, [isRegistered, formId, name, dispatch]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n    return () => {\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.deregisterControl(formId, name));\n    };\n  }, [isRegistered, formId, name, dispatch]); // preact uses onInput instead of onChange\n\n  const onInput = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(e => updateControlValue(name, e.target.value), [name, updateControlValue]);\n  const onBlur = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    updateControlTouched(name, true);\n  }, [updateControlTouched, name]);\n  const field = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({\n    name,\n    onInput,\n    onBlur,\n    value\n  }), [name, onInput, onBlur, value]);\n  const meta = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({\n    isValid,\n    error,\n    touched\n  }), [isValid, error, touched]);\n  return [field, meta];\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useForm\": () => (/* binding */ useForm),\n/* harmony export */   \"useFormContext\": () => (/* binding */ useFormContext),\n/* harmony export */   \"useFormControl\": () => (/* binding */ useFormControl),\n/* harmony export */   \"useValidations\": () => (/* binding */ useValidations)\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 domains_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./context */ \"./src/javascripts/domains/forms/context.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/forms/actions.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/forms/selectors.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/forms/utils.js\");\n\n\n\n\n\n\nfunction useFormContext() {\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_context__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n}\nfunction useForm() {\n  const {\n    handleSubmit,\n    isSubmitted,\n    isValid\n  } = useFormContext();\n  return {\n    handleSubmit,\n    isSubmitted,\n    isValid\n  };\n}\nfunction useValidations(values, validationSchema) {\n  const errors = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => (0,_utils__WEBPACK_IMPORTED_MODULE_5__.validate)(values, validationSchema), [values, validationSchema]);\n  return {\n    isValid: Object.keys(errors).length === 0,\n    errors\n  };\n}\nfunction useFormControl(name) {\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useStoreDispatch)();\n  const {\n    formId,\n    updateControlValue,\n    updateControlTouched,\n    errors\n  } = useFormContext();\n  const form = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getFormById, {\n    formId\n  }, [formId]);\n  const isRegistered = !!form;\n  const isRegisteredRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  isRegisteredRef.current = isRegistered;\n  const value = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getControlValueByName, {\n    formId,\n    name\n  }, [formId, name]);\n  const touched = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getControlTouchedByName, {\n    formId,\n    name\n  }, [formId, name]);\n  const error = errors === null || errors === void 0 ? void 0 : errors[name];\n  const isValid = !error;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    // Make sure the form is registered\n    // Since child useEffect runs before FormProvider useEffect\n    if (isRegisteredRef.current) {\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.registerControl(formId, name));\n    }\n  }, [isRegistered, formId, name, dispatch]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n    return () => {\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.deregisterControl(formId, name));\n    };\n  }, [isRegistered, formId, name, dispatch]); // preact uses onInput instead of onChange\n\n  const onInput = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(e => updateControlValue(name, e.target.value), [name, updateControlValue]);\n  const onBlur = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    updateControlTouched(name, true);\n  }, [updateControlTouched, name]);\n  const field = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({\n    name,\n    onInput,\n    onBlur,\n    value\n  }), [name, onInput, onBlur, value]);\n  const meta = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({\n    isValid,\n    error,\n    touched\n  }), [isValid, error, touched]);\n  return [field, meta];\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/hooks.js?");
 
 /***/ }),
 
@@ -498,7 +487,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ FormProvider)\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 domains_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n/* harmony import */ var domains_forms_context__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/forms/context */ \"./src/javascripts/domains/forms/context.js\");\n/* harmony import */ var domains_forms_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/forms/actions */ \"./src/javascripts/domains/forms/actions.js\");\n/* harmony import */ var domains_forms_selectors__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/forms/selectors */ \"./src/javascripts/domains/forms/selectors.js\");\n/* harmony import */ var domains_forms_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/forms/hooks */ \"./src/javascripts/domains/forms/hooks.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__);\nconst _excluded = [\"children\", \"formId\", \"persistData\", \"onError\", \"onSubmit\", \"validationSchema\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\nfunction FormProvider(_ref) {\n  let {\n    children,\n    formId,\n    persistData,\n    onError,\n    onSubmit,\n    validationSchema\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useStoreDispatch)();\n  const values = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(domains_forms_selectors__WEBPACK_IMPORTED_MODULE_5__.getFormValuesByFormId, {\n    formId\n  }, [formId]);\n  const [isSubmitted, setIsSubmitted] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const [externalErrors, setExternalErrors] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)({});\n  const {\n    isValid: validationIsValid,\n    errors: validationErrors\n  } = (0,domains_forms_hooks__WEBPACK_IMPORTED_MODULE_6__.useValidations)(values, validationSchema);\n  const errors = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => _objectSpread(_objectSpread({}, validationErrors), externalErrors), [validationErrors, externalErrors]); // register\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n    // register form in redux store\n    dispatch(domains_forms_actions__WEBPACK_IMPORTED_MODULE_4__.registerForm(formId, persistData));\n  }, [formId, persistData, dispatch]); // deregister\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    return () => {\n      // deregister form from redux store\n      dispatch(domains_forms_actions__WEBPACK_IMPORTED_MODULE_4__.deregisterForm(formId));\n    };\n  }, [formId, persistData, dispatch]);\n  const updateControlValue = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((name, value) => {\n    dispatch(domains_forms_actions__WEBPACK_IMPORTED_MODULE_4__.updateControlValue(formId, name, value));\n  }, [formId, dispatch]);\n  const updateControlTouched = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((name, touched) => {\n    dispatch(domains_forms_actions__WEBPACK_IMPORTED_MODULE_4__.updateControlTouched(formId, name, touched));\n  }, [dispatch, formId]); // Function to manually set an error\n\n  const setError = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((name, error) => {\n    setExternalErrors(val => {\n      return _objectSpread(_objectSpread({}, val), {}, {\n        [name]: error\n      });\n    });\n  }, [setExternalErrors]);\n  const handleSubmit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(e => {\n    e.preventDefault(); // If the submitter is set to being aria-disabled, block the submit action\n\n    const ariaDisabled = e.submitter?.ariaDisabled === 'true';\n    setIsSubmitted(!ariaDisabled);\n\n    if (!ariaDisabled && validationIsValid) {\n      dispatch((0,domains_app_actions__WEBPACK_IMPORTED_MODULE_2__.setHasResponded)(true));\n      onSubmit(values, {\n        updateControlValue,\n        setError\n      });\n    }\n  }, [validationIsValid, dispatch, onSubmit, values, updateControlValue, setError]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (onError) {\n      onError({\n        errors,\n        isSubmitted,\n        isValid: Object.keys(errors).length === 0\n      });\n    }\n  }, [isSubmitted, errors, onError]);\n  const contextValue = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({\n    formId,\n    values,\n    errors,\n    isValid: Object.keys(errors).length === 0,\n    isSubmitted,\n    handleSubmit,\n    validationSchema,\n    updateControlValue,\n    updateControlTouched\n  }), [formId, values, errors, isSubmitted, handleSubmit, validationSchema, updateControlValue, updateControlTouched]);\n\n  if (!formId) {\n    console.error('\"formId\" is required.');\n    return null;\n  }\n\n  if (!onSubmit) {\n    console.error('\"onSubmit\" is required.');\n    return null;\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(domains_forms_context__WEBPACK_IMPORTED_MODULE_3__.Provider, _objectSpread(_objectSpread({}, props), {}, {\n    value: contextValue,\n    children: children\n  }));\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/provider.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ FormProvider)\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 domains_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n/* harmony import */ var domains_forms_context__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/forms/context */ \"./src/javascripts/domains/forms/context.js\");\n/* harmony import */ var domains_forms_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/forms/actions */ \"./src/javascripts/domains/forms/actions.js\");\n/* harmony import */ var domains_forms_selectors__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/forms/selectors */ \"./src/javascripts/domains/forms/selectors.js\");\n/* harmony import */ var domains_forms_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/forms/hooks */ \"./src/javascripts/domains/forms/hooks.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__);\nconst _excluded = [\"children\", \"formId\", \"persistData\", \"onError\", \"onSubmit\", \"validationSchema\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\nfunction FormProvider(_ref) {\n  let {\n    children,\n    formId,\n    persistData,\n    onError,\n    onSubmit,\n    validationSchema\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useStoreDispatch)();\n  const values = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelectorWithProps)(domains_forms_selectors__WEBPACK_IMPORTED_MODULE_5__.getFormValuesByFormId, {\n    formId\n  }, [formId]);\n  const [isSubmitted, setIsSubmitted] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(false);\n  const [externalErrors, setExternalErrors] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)({});\n  const {\n    isValid: validationIsValid,\n    errors: validationErrors\n  } = (0,domains_forms_hooks__WEBPACK_IMPORTED_MODULE_6__.useValidations)(values, validationSchema);\n  const errors = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => _objectSpread(_objectSpread({}, validationErrors), externalErrors), [validationErrors, externalErrors]); // register\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n    // register form in redux store\n    dispatch(domains_forms_actions__WEBPACK_IMPORTED_MODULE_4__.registerForm(formId, persistData));\n  }, [formId, persistData, dispatch]); // deregister\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    return () => {\n      // deregister form from redux store\n      dispatch(domains_forms_actions__WEBPACK_IMPORTED_MODULE_4__.deregisterForm(formId));\n    };\n  }, [formId, persistData, dispatch]);\n  const updateControlValue = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((name, value) => {\n    dispatch(domains_forms_actions__WEBPACK_IMPORTED_MODULE_4__.updateControlValue(formId, name, value));\n  }, [formId, dispatch]);\n  const updateControlTouched = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((name, touched) => {\n    dispatch(domains_forms_actions__WEBPACK_IMPORTED_MODULE_4__.updateControlTouched(formId, name, touched));\n  }, [dispatch, formId]); // Function to manually set an error\n\n  const setError = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((name, error) => {\n    setExternalErrors(val => {\n      return _objectSpread(_objectSpread({}, val), {}, {\n        [name]: error\n      });\n    });\n  }, [setExternalErrors]);\n  const handleSubmit = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(e => {\n    var _e$submitter;\n\n    e.preventDefault(); // If the submitter is set to being aria-disabled, block the submit action\n\n    const ariaDisabled = ((_e$submitter = e.submitter) === null || _e$submitter === void 0 ? void 0 : _e$submitter.ariaDisabled) === 'true';\n    setIsSubmitted(!ariaDisabled);\n\n    if (!ariaDisabled && validationIsValid) {\n      dispatch((0,domains_app_actions__WEBPACK_IMPORTED_MODULE_2__.setHasResponded)(true));\n      onSubmit(values, {\n        updateControlValue,\n        setError\n      });\n    }\n  }, [validationIsValid, dispatch, onSubmit, values, updateControlValue, setError]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (onError) {\n      onError({\n        errors,\n        isSubmitted,\n        isValid: Object.keys(errors).length === 0\n      });\n    }\n  }, [isSubmitted, errors, onError]);\n  const contextValue = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({\n    formId,\n    values,\n    errors,\n    isValid: Object.keys(errors).length === 0,\n    isSubmitted,\n    handleSubmit,\n    validationSchema,\n    updateControlValue,\n    updateControlTouched\n  }), [formId, values, errors, isSubmitted, handleSubmit, validationSchema, updateControlValue, updateControlTouched]);\n\n  if (!formId) {\n    console.error('\"formId\" is required.');\n    return null;\n  }\n\n  if (!onSubmit) {\n    console.error('\"onSubmit\" is required.');\n    return null;\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(domains_forms_context__WEBPACK_IMPORTED_MODULE_3__.Provider, _objectSpread(_objectSpread({}, props), {}, {\n    value: contextValue,\n    children: children\n  }));\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/provider.js?");
 
 /***/ }),
 
@@ -509,7 +498,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.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/forms/utils.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/forms/actions.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\nconst initialState = {};\nconst initialFormState = {\n  controls: {}\n};\nconst initialControlState = {\n  value: '',\n  touched: false\n};\n\nfunction updateFormControl(state, formId, name, controlState) {\n  const currentControlState = state[formId]?.controls[name] || initialControlState;\n  return _objectSpread(_objectSpread({}, state), {}, {\n    [formId]: _objectSpread(_objectSpread({}, state[formId]), {}, {\n      controls: _objectSpread(_objectSpread({}, state[formId].controls), {}, {\n        [name]: _objectSpread(_objectSpread({}, currentControlState), controlState)\n      })\n    })\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.createReducer)({\n  // Form handlers\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.registerForm]: (state, {\n    formId,\n    persistData\n  }) => {\n    const formState = persistData ? state[formId] ?? _objectSpread(_objectSpread({}, initialFormState), {}, {\n      persistData\n    }) : _objectSpread(_objectSpread({}, initialFormState), {}, {\n      persistData\n    });\n    return _objectSpread(_objectSpread({}, state), {}, {\n      [formId]: formState\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.deregisterForm]: (state, {\n    formId\n  }) => {\n    const newState = _objectSpread({}, state);\n\n    if (!newState[formId]?.persistData) {\n      delete newState[formId];\n    }\n\n    return newState;\n  },\n  // Form control handlers\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.registerControl]: (state, {\n    name,\n    formId\n  }) => {\n    return updateFormControl(state, formId, name);\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.deregisterControl]: (state, {\n    formId,\n    name\n  }) => {\n    const form = state[formId];\n\n    if (!form) {\n      return state;\n    }\n\n    if (form.persistData) {\n      return state;\n    }\n\n    const controls = _objectSpread({}, form.controls);\n\n    delete controls[name];\n    return _objectSpread(_objectSpread({}, state), {}, {\n      [formId]: _objectSpread(_objectSpread({}, form), {}, {\n        controls\n      })\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.updateControlValue]: (state, {\n    formId,\n    name,\n    value\n  }) => {\n    return updateFormControl(state, formId, name, {\n      value\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.updateControlTouched]: (state, {\n    formId,\n    name,\n    touched\n  }) => {\n    return updateFormControl(state, formId, name, {\n      touched\n    });\n  },\n  [domains_app_actions__WEBPACK_IMPORTED_MODULE_0__.initialize.pending]: () => initialState\n}, initialState));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/reducer.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/forms/utils.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/forms/actions.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\nconst initialState = {};\nconst initialFormState = {\n  controls: {}\n};\nconst initialControlState = {\n  value: '',\n  touched: false\n};\n\nfunction updateFormControl(state, formId, name, controlState) {\n  var _state$formId;\n\n  const currentControlState = ((_state$formId = state[formId]) === null || _state$formId === void 0 ? void 0 : _state$formId.controls[name]) || initialControlState;\n  return _objectSpread(_objectSpread({}, state), {}, {\n    [formId]: _objectSpread(_objectSpread({}, state[formId]), {}, {\n      controls: _objectSpread(_objectSpread({}, state[formId].controls), {}, {\n        [name]: _objectSpread(_objectSpread({}, currentControlState), controlState)\n      })\n    })\n  });\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.createReducer)({\n  // Form handlers\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.registerForm]: (state, {\n    formId,\n    persistData\n  }) => {\n    const formState = persistData ? state[formId] ?? _objectSpread(_objectSpread({}, initialFormState), {}, {\n      persistData\n    }) : _objectSpread(_objectSpread({}, initialFormState), {}, {\n      persistData\n    });\n    return _objectSpread(_objectSpread({}, state), {}, {\n      [formId]: formState\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.deregisterForm]: (state, {\n    formId\n  }) => {\n    var _newState$formId;\n\n    const newState = _objectSpread({}, state);\n\n    if (!((_newState$formId = newState[formId]) !== null && _newState$formId !== void 0 && _newState$formId.persistData)) {\n      delete newState[formId];\n    }\n\n    return newState;\n  },\n  // Form control handlers\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.registerControl]: (state, {\n    name,\n    formId\n  }) => {\n    return updateFormControl(state, formId, name);\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.deregisterControl]: (state, {\n    formId,\n    name\n  }) => {\n    const form = state[formId];\n\n    if (!form) {\n      return state;\n    }\n\n    if (form.persistData) {\n      return state;\n    }\n\n    const controls = _objectSpread({}, form.controls);\n\n    delete controls[name];\n    return _objectSpread(_objectSpread({}, state), {}, {\n      [formId]: _objectSpread(_objectSpread({}, form), {}, {\n        controls\n      })\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.updateControlValue]: (state, {\n    formId,\n    name,\n    value\n  }) => {\n    return updateFormControl(state, formId, name, {\n      value\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_2__.updateControlTouched]: (state, {\n    formId,\n    name,\n    touched\n  }) => {\n    return updateFormControl(state, formId, name, {\n      touched\n    });\n  },\n  [domains_app_actions__WEBPACK_IMPORTED_MODULE_0__.initialize.pending]: () => initialState\n}, initialState));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/reducer.js?");
 
 /***/ }),
 
@@ -520,7 +509,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 */   \"getControlTouchedByName\": () => (/* binding */ getControlTouchedByName),\n/* harmony export */   \"getControlValueByName\": () => (/* binding */ getControlValueByName),\n/* harmony export */   \"getFormById\": () => (/* binding */ getFormById),\n/* harmony export */   \"getFormControlsByFormId\": () => (/* binding */ getFormControlsByFormId),\n/* harmony export */   \"getFormValuesByFormId\": () => (/* binding */ getFormValuesByFormId),\n/* harmony export */   \"getState\": () => (/* binding */ getState)\n/* harmony export */ });\n/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! reselect */ \"./node_modules/reselect/es/index.js\");\n/* harmony import */ var domains_redux_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/redux/utils */ \"./src/javascripts/domains/redux/utils.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/forms/utils.js\");\n\n\n\nconst getState = _utils__WEBPACK_IMPORTED_MODULE_1__.selectState;\nconst getFormById = (0,reselect__WEBPACK_IMPORTED_MODULE_2__.createSelector)(getState, (0,domains_redux_utils__WEBPACK_IMPORTED_MODULE_0__.getPropSelector)('formId'), (forms, formId) => forms[formId]);\nconst getFormControlsByFormId = (0,reselect__WEBPACK_IMPORTED_MODULE_2__.createSelector)(getFormById, form => form?.controls || {});\nconst getFormValuesByFormId = (0,reselect__WEBPACK_IMPORTED_MODULE_2__.createSelector)(getFormControlsByFormId, controls => {\n  const valuesObj = {};\n  Object.entries(controls).forEach(([key, {\n    value\n  }]) => {\n    valuesObj[key] = value;\n  });\n  return valuesObj;\n});\nconst getControlValueByName = (0,reselect__WEBPACK_IMPORTED_MODULE_2__.createSelector)(getFormControlsByFormId, (0,domains_redux_utils__WEBPACK_IMPORTED_MODULE_0__.getPropSelector)('name'), (controls, name) => controls[name]?.value);\nconst getControlTouchedByName = (0,reselect__WEBPACK_IMPORTED_MODULE_2__.createSelector)(getFormControlsByFormId, (0,domains_redux_utils__WEBPACK_IMPORTED_MODULE_0__.getPropSelector)('name'), (controls, name) => controls[name]?.touched);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/selectors.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"getControlTouchedByName\": () => (/* binding */ getControlTouchedByName),\n/* harmony export */   \"getControlValueByName\": () => (/* binding */ getControlValueByName),\n/* harmony export */   \"getFormById\": () => (/* binding */ getFormById),\n/* harmony export */   \"getFormControlsByFormId\": () => (/* binding */ getFormControlsByFormId),\n/* harmony export */   \"getFormValuesByFormId\": () => (/* binding */ getFormValuesByFormId),\n/* harmony export */   \"getState\": () => (/* binding */ getState)\n/* harmony export */ });\n/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! reselect */ \"./node_modules/reselect/es/index.js\");\n/* harmony import */ var domains_redux_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/redux/utils */ \"./src/javascripts/domains/redux/utils.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/forms/utils.js\");\n\n\n\nconst getState = _utils__WEBPACK_IMPORTED_MODULE_1__.selectState;\nconst getFormById = (0,reselect__WEBPACK_IMPORTED_MODULE_2__.createSelector)(getState, (0,domains_redux_utils__WEBPACK_IMPORTED_MODULE_0__.getPropSelector)('formId'), (forms, formId) => forms[formId]);\nconst getFormControlsByFormId = (0,reselect__WEBPACK_IMPORTED_MODULE_2__.createSelector)(getFormById, form => (form === null || form === void 0 ? void 0 : form.controls) || {});\nconst getFormValuesByFormId = (0,reselect__WEBPACK_IMPORTED_MODULE_2__.createSelector)(getFormControlsByFormId, controls => {\n  const valuesObj = {};\n  Object.entries(controls).forEach(([key, {\n    value\n  }]) => {\n    valuesObj[key] = value;\n  });\n  return valuesObj;\n});\nconst getControlValueByName = (0,reselect__WEBPACK_IMPORTED_MODULE_2__.createSelector)(getFormControlsByFormId, (0,domains_redux_utils__WEBPACK_IMPORTED_MODULE_0__.getPropSelector)('name'), (controls, name) => {\n  var _controls$name;\n\n  return (_controls$name = controls[name]) === null || _controls$name === void 0 ? void 0 : _controls$name.value;\n});\nconst getControlTouchedByName = (0,reselect__WEBPACK_IMPORTED_MODULE_2__.createSelector)(getFormControlsByFormId, (0,domains_redux_utils__WEBPACK_IMPORTED_MODULE_0__.getPropSelector)('name'), (controls, name) => {\n  var _controls$name2;\n\n  return (_controls$name2 = controls[name]) === null || _controls$name2 === void 0 ? void 0 : _controls$name2.touched;\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/selectors.js?");
 
 /***/ }),
 
@@ -531,7 +520,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 */   \"createActions\": () => (/* binding */ createActions),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState),\n/* harmony export */   \"validate\": () => (/* binding */ validate)\n/* harmony export */ });\n/* harmony import */ var lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n\nconst {\n  createActions,\n  createReducer,\n  selectState\n} = (0,lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('forms');\nfunction validate(values, schema = {}) {\n  return Object.entries(schema).reduce((errors, [key, validations]) => {\n    if (validations && !Array.isArray(validations)) {\n      // eslint-disable-next-line no-param-reassign\n      validations = [validations];\n    }\n\n    for (let i = 0; i < validations?.length ?? 0; i++) {\n      if (!validations[i].fn(values[key], validations[i].compareValue)) {\n        errors[key] = validations[i].errorText;\n        break;\n      }\n    }\n\n    return errors;\n  }, {});\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"createActions\": () => (/* binding */ createActions),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState),\n/* harmony export */   \"validate\": () => (/* binding */ validate)\n/* harmony export */ });\n/* harmony import */ var lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/redux-helpers */ \"./src/javascripts/lib/redux-helpers/index.js\");\n\nconst {\n  createActions,\n  createReducer,\n  selectState\n} = (0,lib_redux_helpers__WEBPACK_IMPORTED_MODULE_0__.createDomain)('forms');\nfunction validate(values, schema = {}) {\n  return Object.entries(schema).reduce((errors, [key, validations]) => {\n    if (validations && !Array.isArray(validations)) {\n      // eslint-disable-next-line no-param-reassign\n      validations = [validations];\n    }\n\n    for (let i = 0; i < ((_validations = validations) === null || _validations === void 0 ? void 0 : _validations.length) ?? 0; i++) {\n      var _validations;\n\n      if (!validations[i].fn(values[key], validations[i].compareValue)) {\n        errors[key] = validations[i].errorText;\n        break;\n      }\n    }\n\n    return errors;\n  }, {});\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/forms/utils.js?");
 
 /***/ }),
 
@@ -729,7 +718,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 */   \"useSelector\": () => (/* binding */ useSelector),\n/* harmony export */   \"useSelectorWithProps\": () => (/* binding */ useSelectorWithProps),\n/* harmony export */   \"useStoreContext\": () => (/* binding */ useStoreContext),\n/* harmony export */   \"useStoreDispatch\": () => (/* binding */ useStoreDispatch)\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 _context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./context */ \"./src/javascripts/domains/redux/context.js\");\n\n // import { arrayContentEquals } from './utils'\n\nfunction useStoreContext() {\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_context__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n}\nfunction useStoreDispatch() {\n  return useStoreContext().dispatch;\n}\nfunction useSelector(selector, deps = []) {\n  const store = useStoreContext(); // we need a force-update because we're manually updating a ref instead of a useState\n\n  const [, forceUpdate] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useReducer)(x => x + 1, 0); // we're keeping the value to compare against\n\n  const valueRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(); // instead of accepting a stabilized selector, we stick to the signature\n  // of useCallback, as that makes the exposed api much more dev-friendly\n  // otherwise you'd have to stabilize selectors externally\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  const selectorCb = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(selector, deps); // we're keeping the selector in a ref to compare against\n  // we need this both in the store subscription and for\n  // synchronous state updates if the selector changes, but the store didn't\n  // if the selector changes, we want to synchronously select the new information\n  // otherwise, the rendered component does not accurately and predictably reflect\n  // the selector+state\n  // in order to keep multiple selectors in sync, we also re-calculate when\n  // the state has changed but the selector hasn't re-calculated async.\n  // selectors *might* be heavy, which could kill FPS, but the alternative is\n  // stale data\n\n  const selectorRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  const stateRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  const state = store.getState();\n\n  if (selectorRef.current !== selectorCb || stateRef.current !== state) {\n    stateRef.current = state;\n    valueRef.current = selectorCb(stateRef.current);\n    selectorRef.current = selectorCb;\n  }\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n    // we subscribe to the store changes\n    return store.subscribe(() => {\n      const newState = store.getState(); // prevent recalculating if the state hasn't changed\n      // if the selector changed, it was already handled synchronously\n\n      if (newState === stateRef.current) {\n        return;\n      } // calculate the new value based on selector+state\n\n\n      const newValue = selectorRef.current?.(store.getState()); // only if the value changed we update. this saves heaps of re-rendering\n\n      if (newValue !== valueRef.current) {\n        valueRef.current = newValue;\n        forceUpdate();\n      }\n    });\n  }, [store]);\n  return valueRef.current;\n}\nconst useSelectorWithProps = function useSelectorWithProps(selector, props, inputs = [] // equalityFn = arrayContentEquals,\n) {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const wrappedMapper = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(state => selector(state, props), inputs);\n  return useSelector(wrappedMapper, inputs);\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/redux/hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useSelector\": () => (/* binding */ useSelector),\n/* harmony export */   \"useSelectorWithProps\": () => (/* binding */ useSelectorWithProps),\n/* harmony export */   \"useStoreContext\": () => (/* binding */ useStoreContext),\n/* harmony export */   \"useStoreDispatch\": () => (/* binding */ useStoreDispatch)\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 _context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./context */ \"./src/javascripts/domains/redux/context.js\");\n\n // import { arrayContentEquals } from './utils'\n\nfunction useStoreContext() {\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_context__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n}\nfunction useStoreDispatch() {\n  return useStoreContext().dispatch;\n}\nfunction useSelector(selector, deps = []) {\n  const store = useStoreContext(); // we need a force-update because we're manually updating a ref instead of a useState\n\n  const [, forceUpdate] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useReducer)(x => x + 1, 0); // we're keeping the value to compare against\n\n  const valueRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(); // instead of accepting a stabilized selector, we stick to the signature\n  // of useCallback, as that makes the exposed api much more dev-friendly\n  // otherwise you'd have to stabilize selectors externally\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n\n  const selectorCb = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(selector, deps); // we're keeping the selector in a ref to compare against\n  // we need this both in the store subscription and for\n  // synchronous state updates if the selector changes, but the store didn't\n  // if the selector changes, we want to synchronously select the new information\n  // otherwise, the rendered component does not accurately and predictably reflect\n  // the selector+state\n  // in order to keep multiple selectors in sync, we also re-calculate when\n  // the state has changed but the selector hasn't re-calculated async.\n  // selectors *might* be heavy, which could kill FPS, but the alternative is\n  // stale data\n\n  const selectorRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  const stateRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  const state = store.getState();\n\n  if (selectorRef.current !== selectorCb || stateRef.current !== state) {\n    stateRef.current = state;\n    valueRef.current = selectorCb(stateRef.current);\n    selectorRef.current = selectorCb;\n  }\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n    // we subscribe to the store changes\n    return store.subscribe(() => {\n      var _selectorRef$current;\n\n      const newState = store.getState(); // prevent recalculating if the state hasn't changed\n      // if the selector changed, it was already handled synchronously\n\n      if (newState === stateRef.current) {\n        return;\n      } // calculate the new value based on selector+state\n\n\n      const newValue = (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 ? void 0 : _selectorRef$current.call(selectorRef, store.getState()); // only if the value changed we update. this saves heaps of re-rendering\n\n      if (newValue !== valueRef.current) {\n        valueRef.current = newValue;\n        forceUpdate();\n      }\n    });\n  }, [store]);\n  return valueRef.current;\n}\nconst useSelectorWithProps = function useSelectorWithProps(selector, props, inputs = [] // equalityFn = arrayContentEquals,\n) {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const wrappedMapper = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(state => selector(state, props), inputs);\n  return useSelector(wrappedMapper, inputs);\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/redux/hooks.js?");
 
 /***/ }),
 
@@ -773,7 +762,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 */   \"createStore\": () => (/* binding */ createStore)\n/* harmony export */ });\n/* harmony import */ var redux_thunk__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! redux-thunk */ \"./node_modules/redux-thunk/es/index.js\");\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var domains_app__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/app */ \"./src/javascripts/domains/app/index.js\");\n/* harmony import */ var domains_forms__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var domains_interrupt__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var domains_options__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/options */ \"./src/javascripts/domains/options/index.js\");\n/* harmony import */ var domains_errors__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! domains/errors */ \"./src/javascripts/domains/errors/index.js\");\n/* harmony import */ var _state_reducer__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./state-reducer */ \"./src/javascripts/domains/store/state-reducer.js\");\n\n\n\n\n\n\n\n\n\n\n\n\nfunction createStore({\n  initialState,\n  api,\n  eventBus,\n  config\n} = {}) {\n  const store = (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.createReduxStore)({\n    reducers: {\n      state: _state_reducer__WEBPACK_IMPORTED_MODULE_10__[\"default\"],\n      [String(domains_app__WEBPACK_IMPORTED_MODULE_1__.Reducer)]: domains_app__WEBPACK_IMPORTED_MODULE_1__.Reducer,\n      [String(domains_config__WEBPACK_IMPORTED_MODULE_3__.Reducer)]: domains_config__WEBPACK_IMPORTED_MODULE_3__.Reducer,\n      [String(domains_forms__WEBPACK_IMPORTED_MODULE_2__.Reducer)]: domains_forms__WEBPACK_IMPORTED_MODULE_2__.Reducer,\n      [String(domains_translations__WEBPACK_IMPORTED_MODULE_4__.Reducer)]: domains_translations__WEBPACK_IMPORTED_MODULE_4__.Reducer,\n      [String(domains_i18n__WEBPACK_IMPORTED_MODULE_5__.Reducer)]: domains_i18n__WEBPACK_IMPORTED_MODULE_5__.Reducer,\n      [String(domains_interrupt__WEBPACK_IMPORTED_MODULE_7__.Reducer)]: domains_interrupt__WEBPACK_IMPORTED_MODULE_7__.Reducer,\n      [String(domains_visibility__WEBPACK_IMPORTED_MODULE_6__.Reducer)]: domains_visibility__WEBPACK_IMPORTED_MODULE_6__.Reducer\n    },\n    initialState,\n    middlewares: [(0,domains_errors__WEBPACK_IMPORTED_MODULE_9__.createMiddleware)({\n      api\n    }), redux_thunk__WEBPACK_IMPORTED_MODULE_11__[\"default\"].withExtraArgument({\n      api,\n      eventBus,\n      config\n    }), (0,domains_interrupt__WEBPACK_IMPORTED_MODULE_7__.createMiddleware)({\n      api\n    }), (0,domains_options__WEBPACK_IMPORTED_MODULE_8__.createMiddleware)({\n      api\n    }), (0,domains_translations__WEBPACK_IMPORTED_MODULE_4__.createMiddleware)()]\n  });\n  return store;\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/store/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"createStore\": () => (/* binding */ createStore)\n/* harmony export */ });\n/* harmony import */ var domains_app__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/app */ \"./src/javascripts/domains/app/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var domains_errors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/errors */ \"./src/javascripts/domains/errors/index.js\");\n/* harmony import */ var domains_forms__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/forms */ \"./src/javascripts/domains/forms/index.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_interrupt__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var domains_options__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/options */ \"./src/javascripts/domains/options/index.js\");\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var redux_thunk__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! redux-thunk */ \"./node_modules/redux-thunk/es/index.js\");\n/* harmony import */ var _state_reducer__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./state-reducer */ \"./src/javascripts/domains/store/state-reducer.js\");\n\n\n\n\n\n\n\n\n\n\n\n\nfunction createStore({\n  initialState,\n  api,\n  eventBus,\n  config\n} = {}) {\n  const store = (0,domains_redux__WEBPACK_IMPORTED_MODULE_7__.createReduxStore)({\n    reducers: {\n      state: _state_reducer__WEBPACK_IMPORTED_MODULE_10__[\"default\"],\n      [String(domains_app__WEBPACK_IMPORTED_MODULE_0__.Reducer)]: domains_app__WEBPACK_IMPORTED_MODULE_0__.Reducer,\n      [String(domains_config__WEBPACK_IMPORTED_MODULE_1__.Reducer)]: domains_config__WEBPACK_IMPORTED_MODULE_1__.Reducer,\n      [String(domains_forms__WEBPACK_IMPORTED_MODULE_3__.Reducer)]: domains_forms__WEBPACK_IMPORTED_MODULE_3__.Reducer,\n      [String(domains_translations__WEBPACK_IMPORTED_MODULE_8__.Reducer)]: domains_translations__WEBPACK_IMPORTED_MODULE_8__.Reducer,\n      [String(domains_i18n__WEBPACK_IMPORTED_MODULE_4__.Reducer)]: domains_i18n__WEBPACK_IMPORTED_MODULE_4__.Reducer,\n      [String(domains_interrupt__WEBPACK_IMPORTED_MODULE_5__.Reducer)]: domains_interrupt__WEBPACK_IMPORTED_MODULE_5__.Reducer,\n      [String(domains_visibility__WEBPACK_IMPORTED_MODULE_9__.Reducer)]: domains_visibility__WEBPACK_IMPORTED_MODULE_9__.Reducer\n    },\n    initialState,\n    middlewares: [(0,domains_errors__WEBPACK_IMPORTED_MODULE_2__.createMiddleware)({\n      api\n    }), redux_thunk__WEBPACK_IMPORTED_MODULE_11__[\"default\"].withExtraArgument({\n      api,\n      eventBus,\n      config\n    }), (0,domains_interrupt__WEBPACK_IMPORTED_MODULE_5__.createMiddleware)({\n      api\n    }), (0,domains_options__WEBPACK_IMPORTED_MODULE_6__.createMiddleware)({\n      api\n    }), domains_translations__WEBPACK_IMPORTED_MODULE_8__.createMiddleware]\n  });\n  return store;\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/store/index.js?");
 
 /***/ }),
 
@@ -850,7 +839,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 */   \"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 ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/translations/selectors.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/translations/actions.js\");\n\n\n\n\n\n\nfunction useTranslations() {\n  const {\n    sendAction\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCommands)();\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_3__.useStoreDispatch)();\n  const enableTranslations = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useStableCallback)(locale => {\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.actionTypes.setTranslation,\n      body: {\n        enabled: true,\n        locale\n      }\n    });\n    dispatch(_actions__WEBPACK_IMPORTED_MODULE_5__.enable(locale));\n  }, [sendAction, dispatch]);\n  const disableTranslations = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useStableCallback)(() => {\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.actionTypes.setTranslation,\n      body: {\n        enabled: false\n      }\n    });\n    dispatch(_actions__WEBPACK_IMPORTED_MODULE_5__.disable());\n  }, [sendAction, dispatch]);\n  const {\n    languages,\n    isActive,\n    isAvailable,\n    currentLocale\n  } = (0,domains_redux__WEBPACK_IMPORTED_MODULE_3__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getState, []);\n  return {\n    languages,\n    isActive,\n    isAvailable,\n    currentLocale,\n    enableTranslations,\n    disableTranslations\n  };\n}\nfunction useTranslatedEventData({\n  payload\n} = {}) {\n  const payloadId = payload?.id;\n  let body;\n  let translatedBody;\n\n  switch (payload?.type) {\n    case 'participant':\n      body = payload.participant.introduction;\n      translatedBody = payload.participant.translatedIntroduction;\n      break;\n\n    default:\n      body = payload?.body;\n      translatedBody = payload?.translatedBody;\n  }\n\n  const hasTranslation = !!translatedBody;\n  const isTranslated = (0,domains_redux__WEBPACK_IMPORTED_MODULE_3__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getIsPayloadTranslated, {\n    payloadId\n  }, [payloadId]);\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_3__.useStoreDispatch)();\n  const toggleTranslation = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useStableCallback)(() => {\n    if (isTranslated) {\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_5__.disableEvent(payloadId));\n    } else {\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_5__.enableEvent(payloadId));\n    }\n  }, [isTranslated, payloadId, dispatch]);\n  return [hasTranslation && isTranslated ? translatedBody?.data : body, {\n    hasTranslation,\n    isTranslated: isTranslated && hasTranslation,\n    toggleTranslation,\n    translatedBy: translatedBody?.translatedBy,\n    locale: translatedBody?.locale\n  }];\n}\nfunction useTranslationsContainer() {\n  const id = (0,domains_redux__WEBPACK_IMPORTED_MODULE_3__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getState, []).containerId;\n  const focusContainer = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useElementFocusingById)(id);\n  return {\n    id,\n    focusContainer\n  };\n}\nfunction useLocaleNativeName(locale) {\n  const {\n    languages\n  } = useTranslations();\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => languages?.find(lang => lang.locale === locale)?.nativeName, [locale, languages]);\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/hooks.js?");
+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 */   \"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 ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/translations/selectors.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/translations/actions.js\");\n\n\n\n\n\n\nfunction useTranslations() {\n  const {\n    sendAction\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCommands)();\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_3__.useStoreDispatch)();\n  const enableTranslations = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useStableCallback)(locale => {\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.actionTypes.setTranslation,\n      body: {\n        enabled: true,\n        locale\n      }\n    });\n    dispatch(_actions__WEBPACK_IMPORTED_MODULE_5__.enable(locale));\n  }, [sendAction, dispatch]);\n  const disableTranslations = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useStableCallback)(() => {\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.actionTypes.setTranslation,\n      body: {\n        enabled: false\n      }\n    });\n    dispatch(_actions__WEBPACK_IMPORTED_MODULE_5__.disable());\n  }, [sendAction, dispatch]);\n  const {\n    languages,\n    isActive,\n    isAvailable,\n    currentLocale\n  } = (0,domains_redux__WEBPACK_IMPORTED_MODULE_3__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getState, []);\n  return {\n    languages,\n    isActive,\n    isAvailable,\n    currentLocale,\n    enableTranslations,\n    disableTranslations\n  };\n}\nfunction useTranslatedEventData({\n  payload\n} = {}) {\n  var _translatedBody, _translatedBody2, _translatedBody3;\n\n  const payloadId = payload === null || payload === void 0 ? void 0 : payload.id;\n  let body;\n  let translatedBody;\n\n  switch (payload === null || payload === void 0 ? void 0 : payload.type) {\n    case 'participant':\n      body = payload.participant.introduction;\n      translatedBody = payload.participant.translatedIntroduction;\n      break;\n\n    default:\n      body = payload === null || payload === void 0 ? void 0 : payload.body;\n      translatedBody = payload === null || payload === void 0 ? void 0 : payload.translatedBody;\n  }\n\n  const hasTranslation = !!translatedBody;\n  const isTranslated = (0,domains_redux__WEBPACK_IMPORTED_MODULE_3__.useSelectorWithProps)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getIsPayloadTranslated, {\n    payloadId\n  }, [payloadId]);\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_3__.useStoreDispatch)();\n  const toggleTranslation = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useStableCallback)(() => {\n    if (isTranslated) {\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_5__.disableEvent(payloadId));\n    } else {\n      dispatch(_actions__WEBPACK_IMPORTED_MODULE_5__.enableEvent(payloadId));\n    }\n  }, [isTranslated, payloadId, dispatch]);\n  return [hasTranslation && isTranslated ? (_translatedBody = translatedBody) === null || _translatedBody === void 0 ? void 0 : _translatedBody.data : body, {\n    hasTranslation,\n    isTranslated: isTranslated && hasTranslation,\n    toggleTranslation,\n    translatedBy: (_translatedBody2 = translatedBody) === null || _translatedBody2 === void 0 ? void 0 : _translatedBody2.translatedBy,\n    locale: (_translatedBody3 = translatedBody) === null || _translatedBody3 === void 0 ? void 0 : _translatedBody3.locale\n  }];\n}\nfunction useTranslationsContainer() {\n  const id = (0,domains_redux__WEBPACK_IMPORTED_MODULE_3__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_4__.getState, []).containerId;\n  const focusContainer = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useElementFocusingById)(id);\n  return {\n    id,\n    focusContainer\n  };\n}\nfunction useLocaleNativeName(locale) {\n  const {\n    languages\n  } = useTranslations();\n  return (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {\n    var _languages$find;\n\n    return languages === null || languages === void 0 ? void 0 : (_languages$find = languages.find(lang => lang.locale === locale)) === null || _languages$find === void 0 ? void 0 : _languages$find.nativeName;\n  }, [locale, languages]);\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/hooks.js?");
 
 /***/ }),
 
@@ -872,7 +861,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ createMiddleware)\n/* harmony export */ });\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/translations/actions.js\");\n\n\n\nfunction createMiddleware() {\n  return ({\n    dispatch,\n    getState\n  }) => next => action => {\n    const result = next(action);\n\n    switch (action.type) {\n      case String(ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_HISTORY):\n        if (action.history?.translation?.enabled) {\n          dispatch(_actions__WEBPACK_IMPORTED_MODULE_2__.enable(action.history.translation.locale));\n        }\n\n        break;\n\n      case String(ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_INITIAL_STATE):\n        if (action.initialState?.translation?.enabled) {\n          dispatch(_actions__WEBPACK_IMPORTED_MODULE_2__.enable(action.initialState.translation.locale));\n          dispatch(domains_i18n__WEBPACK_IMPORTED_MODULE_1__.Actions.setLocale(action.locale));\n        }\n\n        break;\n\n      case String(ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.ADD_EVENT):\n        if (action.event.type === 'info' && action.event?.payload?.body?.subtype === 'new_translation' && action.event.payload.body.translationEnabled) {\n          dispatch(domains_i18n__WEBPACK_IMPORTED_MODULE_1__.Actions.setLocale(action.event.payload.body.translationLocale));\n        }\n\n        break;\n\n      case String(_actions__WEBPACK_IMPORTED_MODULE_2__.disable):\n        const initialLocale = domains_i18n__WEBPACK_IMPORTED_MODULE_1__.Selectors.selectInitialLocale(getState());\n        dispatch(domains_i18n__WEBPACK_IMPORTED_MODULE_1__.Actions.setLocale(initialLocale));\n        break;\n    }\n\n    return result;\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/middleware.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ createMiddleware)\n/* harmony export */ });\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/translations/actions.js\");\n\n\n\nfunction createMiddleware({\n  dispatch,\n  getState\n}) {\n  return next => {\n    return action => {\n      var _action$history, _action$history$trans, _action$initialState, _action$initialState$, _action$event, _action$event$payload, _action$event$payload2;\n\n      const result = next(action);\n\n      switch (action.type) {\n        case String(ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyActions.SET_HISTORY):\n          if ((_action$history = action.history) !== null && _action$history !== void 0 && (_action$history$trans = _action$history.translation) !== null && _action$history$trans !== void 0 && _action$history$trans.enabled) {\n            dispatch(_actions__WEBPACK_IMPORTED_MODULE_2__.enable(action.history.translation.locale));\n            dispatch(domains_i18n__WEBPACK_IMPORTED_MODULE_0__.Actions.setLocale(action.history.translation.locale));\n          }\n\n          break;\n\n        case String(ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyActions.SET_INITIAL_STATE):\n          if ((_action$initialState = action.initialState) !== null && _action$initialState !== void 0 && (_action$initialState$ = _action$initialState.translation) !== null && _action$initialState$ !== void 0 && _action$initialState$.enabled) {\n            dispatch(_actions__WEBPACK_IMPORTED_MODULE_2__.enable(action.initialState.translation.locale));\n            dispatch(domains_i18n__WEBPACK_IMPORTED_MODULE_0__.Actions.setLocale(action.locale));\n          }\n\n          break;\n\n        case String(ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__.seamlyActions.ADD_EVENT):\n          if (action.event.type === 'info' && ((_action$event = action.event) === null || _action$event === void 0 ? void 0 : (_action$event$payload = _action$event.payload) === null || _action$event$payload === void 0 ? void 0 : (_action$event$payload2 = _action$event$payload.body) === null || _action$event$payload2 === void 0 ? void 0 : _action$event$payload2.subtype) === 'new_translation' && action.event.payload.body.translationEnabled) {\n            dispatch(domains_i18n__WEBPACK_IMPORTED_MODULE_0__.Actions.setLocale(action.event.payload.body.translationLocale));\n          }\n\n          break;\n\n        case String(_actions__WEBPACK_IMPORTED_MODULE_2__.disable):\n          const initialLocale = domains_i18n__WEBPACK_IMPORTED_MODULE_0__.Selectors.selectInitialLocale(getState());\n          dispatch(domains_i18n__WEBPACK_IMPORTED_MODULE_0__.Actions.setLocale(initialLocale));\n          break;\n      }\n\n      return result;\n    };\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/middleware.js?");
 
 /***/ }),
 
@@ -883,7 +872,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 ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/translations/actions.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/translations/utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\nconst initialState = {\n  isActive: false,\n  currentLocale: undefined,\n  isAvailable: false,\n  languages: [],\n  originalPayloadIds: [],\n  containerId: (0,lib_id__WEBPACK_IMPORTED_MODULE_1__.randomId)()\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils__WEBPACK_IMPORTED_MODULE_4__.createReducer)({\n  [ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_FEATURES]: (state, action) => {\n    const feature = action?.features?.translation;\n\n    if (!feature) {\n      return state;\n    }\n\n    return _objectSpread(_objectSpread({}, state), {}, {\n      isAvailable: feature.enabled === true,\n      languages: feature.languages || []\n    });\n  },\n  [ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.CLEAR_FEATURES]: () => initialState,\n  [_actions__WEBPACK_IMPORTED_MODULE_3__.enable]: (state, {\n    locale\n  }) => {\n    return _objectSpread(_objectSpread({}, state), {}, {\n      isActive: true,\n      currentLocale: locale\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_3__.disable]: state => {\n    return _objectSpread(_objectSpread({}, state), {}, {\n      isActive: false,\n      currentLocale: undefined\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_3__.enableEvent]: (state, {\n    payloadId\n  }) => {\n    if (!state.originalPayloadIds.includes(payloadId)) {\n      return state;\n    }\n\n    return _objectSpread(_objectSpread({}, state), {}, {\n      originalPayloadIds: state.originalPayloadIds.filter(id => id !== payloadId)\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_3__.disableEvent]: (state, {\n    payloadId\n  }) => {\n    if (state.originalPayloadIds.includes(payloadId)) {\n      return state;\n    }\n\n    return _objectSpread(_objectSpread({}, state), {}, {\n      originalPayloadIds: [...state.originalPayloadIds, payloadId]\n    });\n  },\n  [domains_app_actions__WEBPACK_IMPORTED_MODULE_2__.initialize.pending]: () => initialState\n}, initialState));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/reducer.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/translations/actions.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/translations/utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\nconst initialState = {\n  isActive: false,\n  currentLocale: undefined,\n  isAvailable: false,\n  languages: [],\n  originalPayloadIds: [],\n  containerId: (0,lib_id__WEBPACK_IMPORTED_MODULE_1__.randomId)()\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_utils__WEBPACK_IMPORTED_MODULE_4__.createReducer)({\n  [ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.SET_FEATURES]: (state, action) => {\n    var _action$features;\n\n    const feature = action === null || action === void 0 ? void 0 : (_action$features = action.features) === null || _action$features === void 0 ? void 0 : _action$features.translation;\n\n    if (!feature) {\n      return state;\n    }\n\n    return _objectSpread(_objectSpread({}, state), {}, {\n      isAvailable: feature.enabled === true,\n      languages: feature.languages || []\n    });\n  },\n  [ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__.seamlyActions.CLEAR_FEATURES]: () => initialState,\n  [_actions__WEBPACK_IMPORTED_MODULE_3__.enable]: (state, {\n    locale\n  }) => {\n    return _objectSpread(_objectSpread({}, state), {}, {\n      isActive: true,\n      currentLocale: locale\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_3__.disable]: state => {\n    return _objectSpread(_objectSpread({}, state), {}, {\n      isActive: false,\n      currentLocale: undefined\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_3__.enableEvent]: (state, {\n    payloadId\n  }) => {\n    if (!state.originalPayloadIds.includes(payloadId)) {\n      return state;\n    }\n\n    return _objectSpread(_objectSpread({}, state), {}, {\n      originalPayloadIds: state.originalPayloadIds.filter(id => id !== payloadId)\n    });\n  },\n  [_actions__WEBPACK_IMPORTED_MODULE_3__.disableEvent]: (state, {\n    payloadId\n  }) => {\n    if (state.originalPayloadIds.includes(payloadId)) {\n      return state;\n    }\n\n    return _objectSpread(_objectSpread({}, state), {}, {\n      originalPayloadIds: [...state.originalPayloadIds, payloadId]\n    });\n  },\n  [domains_app_actions__WEBPACK_IMPORTED_MODULE_2__.initialize.pending]: () => initialState\n}, initialState));\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/translations/reducer.js?");
 
 /***/ }),
 
@@ -916,7 +905,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 */   \"initialize\": () => (/* binding */ initialize),\n/* harmony export */   \"setFromStorage\": () => (/* binding */ setFromStorage),\n/* harmony export */   \"setShowInlineView\": () => (/* binding */ setShowInlineView),\n/* harmony export */   \"setVisibility\": () => (/* binding */ setVisibility)\n/* harmony export */ });\n/* harmony import */ var domains_config_selectors__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/config/selectors */ \"./src/javascripts/domains/config/selectors.js\");\n/* harmony import */ var domains_app_selectors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/app/selectors */ \"./src/javascripts/domains/app/selectors.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./constants */ \"./src/javascripts/domains/visibility/constants.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/visibility/utils.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/visibility/selectors.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\nconst setFromStorage = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.createAction)('setFromStorage', visibility => ({\n  visibility\n}));\nconst setShowInlineView = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.createAction)('setShowInlineView');\nconst validVisibilityStates = [_constants__WEBPACK_IMPORTED_MODULE_3__.visibilityStates.open, _constants__WEBPACK_IMPORTED_MODULE_3__.visibilityStates.minimized, _constants__WEBPACK_IMPORTED_MODULE_3__.visibilityStates.hidden];\nconst setVisibility = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.createThunk)('set', (requestedVisibility, {\n  getState,\n  extra: {\n    api,\n    eventBus\n  }\n}) => {\n  const state = getState();\n  const previousVisibility = _selectors__WEBPACK_IMPORTED_MODULE_5__.selectVisibility(state);\n  const hasResponded = domains_app_selectors__WEBPACK_IMPORTED_MODULE_1__.selectUserHasResponded(state);\n  const hasConversation = api.hasConversation();\n  const config = domains_config_selectors__WEBPACK_IMPORTED_MODULE_0__.selectConfig(state);\n  const {\n    visibilityCallback = _utils__WEBPACK_IMPORTED_MODULE_4__.calculateVisibility,\n    layoutMode\n  } = config;\n  const {\n    unreadEvents: unreadMessageCount\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_2__.selectState)(state);\n  const calculatedVisibility = visibilityCallback({\n    hasConversation,\n    hasResponded,\n    previousVisibility,\n    requestedVisibility,\n    config\n  });\n\n  if (!validVisibilityStates.includes(calculatedVisibility)) {\n    console.error('The visibilityCallback function should return \"open\", \"minimized\" or \"hidden\".');\n    return undefined;\n  }\n\n  if (previousVisibility === calculatedVisibility) {\n    return undefined;\n  } // Store the user-requested visibility in order to reinitialize after refresh\n\n\n  api.store.set(_constants__WEBPACK_IMPORTED_MODULE_3__.StoreKey, _objectSpread(_objectSpread({}, api.store.get(_constants__WEBPACK_IMPORTED_MODULE_3__.StoreKey) || {}), {}, {\n    [layoutMode]: requestedVisibility\n  }));\n\n  if (requestedVisibility) {\n    eventBus.emit('ui.visible', requestedVisibility, {\n      visibility: requestedVisibility,\n      hasConversation,\n      hasResponded,\n      unreadMessageCount\n    });\n  }\n\n  return calculatedVisibility;\n});\nconst initialize = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.createThunk)('initialize', async (locale, {\n  dispatch,\n  getState,\n  extra: {\n    api\n  }\n}) => {\n  // initialize stored visibility\n  const {\n    layoutMode\n  } = domains_config_selectors__WEBPACK_IMPORTED_MODULE_0__.selectConfig(getState());\n  const storedVisibility = api.store.get(_constants__WEBPACK_IMPORTED_MODULE_3__.StoreKey)?.[layoutMode];\n\n  if (storedVisibility) {\n    dispatch(setFromStorage(storedVisibility));\n  }\n\n  dispatch(setVisibility(_constants__WEBPACK_IMPORTED_MODULE_3__.visibilityStates.initialize));\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/visibility/actions.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"initialize\": () => (/* binding */ initialize),\n/* harmony export */   \"setFromStorage\": () => (/* binding */ setFromStorage),\n/* harmony export */   \"setShowInlineView\": () => (/* binding */ setShowInlineView),\n/* harmony export */   \"setVisibility\": () => (/* binding */ setVisibility)\n/* harmony export */ });\n/* harmony import */ var domains_config_selectors__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/config/selectors */ \"./src/javascripts/domains/config/selectors.js\");\n/* harmony import */ var domains_app_selectors__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/app/selectors */ \"./src/javascripts/domains/app/selectors.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./constants */ \"./src/javascripts/domains/visibility/constants.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils */ \"./src/javascripts/domains/visibility/utils.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/visibility/selectors.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\nconst setFromStorage = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.createAction)('setFromStorage', visibility => ({\n  visibility\n}));\nconst setShowInlineView = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.createAction)('setShowInlineView');\nconst validVisibilityStates = [_constants__WEBPACK_IMPORTED_MODULE_3__.visibilityStates.open, _constants__WEBPACK_IMPORTED_MODULE_3__.visibilityStates.minimized, _constants__WEBPACK_IMPORTED_MODULE_3__.visibilityStates.hidden];\nconst setVisibility = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.createThunk)('set', (requestedVisibility, {\n  getState,\n  extra: {\n    api,\n    eventBus\n  }\n}) => {\n  const state = getState();\n  const previousVisibility = _selectors__WEBPACK_IMPORTED_MODULE_5__.selectVisibility(state);\n  const hasResponded = domains_app_selectors__WEBPACK_IMPORTED_MODULE_1__.selectUserHasResponded(state);\n  const hasConversation = api.hasConversation();\n  const config = domains_config_selectors__WEBPACK_IMPORTED_MODULE_0__.selectConfig(state);\n  const {\n    visibilityCallback = _utils__WEBPACK_IMPORTED_MODULE_4__.calculateVisibility,\n    layoutMode\n  } = config;\n  const {\n    unreadEvents: unreadMessageCount\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_2__.selectState)(state);\n  const calculatedVisibility = visibilityCallback({\n    hasConversation,\n    hasResponded,\n    previousVisibility,\n    requestedVisibility,\n    config\n  });\n\n  if (!validVisibilityStates.includes(calculatedVisibility)) {\n    console.error('The visibilityCallback function should return \"open\", \"minimized\" or \"hidden\".');\n    return undefined;\n  }\n\n  if (previousVisibility === calculatedVisibility) {\n    return undefined;\n  } // Store the user-requested visibility in order to reinitialize after refresh\n\n\n  api.store.set(_constants__WEBPACK_IMPORTED_MODULE_3__.StoreKey, _objectSpread(_objectSpread({}, api.store.get(_constants__WEBPACK_IMPORTED_MODULE_3__.StoreKey) || {}), {}, {\n    [layoutMode]: requestedVisibility\n  }));\n\n  if (requestedVisibility) {\n    eventBus.emit('ui.visible', requestedVisibility, {\n      visibility: requestedVisibility,\n      hasConversation,\n      hasResponded,\n      unreadMessageCount\n    });\n  }\n\n  return calculatedVisibility;\n});\nconst initialize = (0,_utils__WEBPACK_IMPORTED_MODULE_4__.createThunk)('initialize', async (locale, {\n  dispatch,\n  getState,\n  extra: {\n    api\n  }\n}) => {\n  var _api$store$get;\n\n  // initialize stored visibility\n  const {\n    layoutMode\n  } = domains_config_selectors__WEBPACK_IMPORTED_MODULE_0__.selectConfig(getState());\n  const storedVisibility = (_api$store$get = api.store.get(_constants__WEBPACK_IMPORTED_MODULE_3__.StoreKey)) === null || _api$store$get === void 0 ? void 0 : _api$store$get[layoutMode];\n\n  if (storedVisibility) {\n    dispatch(setFromStorage(storedVisibility));\n  }\n\n  dispatch(setVisibility(_constants__WEBPACK_IMPORTED_MODULE_3__.visibilityStates.initialize));\n});\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/visibility/actions.js?");
 
 /***/ }),
 
@@ -938,7 +927,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 */   \"useShowInlineView\": () => (/* binding */ useShowInlineView),\n/* harmony export */   \"useVisibility\": () => (/* binding */ useVisibility)\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 domains_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/visibility/actions.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/visibility/selectors.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./constants */ \"./src/javascripts/domains/visibility/constants.js\");\n\n\n\n\n\n\nconst useVisibility = () => {\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useStoreDispatch)();\n  const visible = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_4__.selectVisibility);\n  const isVisible = visible ? visible !== _constants__WEBPACK_IMPORTED_MODULE_5__.visibilityStates.hidden : false;\n  const isOpen = visible === _constants__WEBPACK_IMPORTED_MODULE_5__.visibilityStates.open;\n  const isMinimized = visible === _constants__WEBPACK_IMPORTED_MODULE_5__.visibilityStates.minimized;\n  const setVisibility = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(visibility => dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.setVisibility(visibility)), [dispatch]);\n  return {\n    isVisible,\n    isOpen,\n    isMinimized,\n    visible,\n    setVisibility\n  };\n};\n/**\n * Custom hook which enables initializing of IntersectionObserver on any node ref.\n * @param {object} options Hook options.\n * @param {boolean=} options.freezeOnceVisible Stops observing when the root element is visible.\n * @param {boolean=} options.enabled Determines if useIntersect is enabled.\n */\n\nconst useIntersect = ({\n  freezeOnceVisible = false,\n  enabled = true\n}) => {\n  const [entry, setEntry] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(null);\n  const containerRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const isVisible = !!entry?.isIntersecting || !enabled;\n  const frozen = isVisible && freezeOnceVisible;\n\n  const observerCallback = ([updatedEntry]) => setEntry(updatedEntry);\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const node = containerRef?.current;\n    const hasIOSupport = !!window.IntersectionObserver;\n\n    if (!node && \"development\" === 'development') {\n      console.error('containerRef must be set on a DOM element. check the component where useIntersect is being used.');\n    } // Return an arrow function to have a consistent return value\n\n\n    if (!hasIOSupport || frozen || !node || !enabled) return () => undefined;\n    const observerOptions = {\n      threshold: 0,\n      root: null,\n      rootMargin: '0%'\n    };\n    const observer = new IntersectionObserver(observerCallback, observerOptions);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [enabled, frozen]);\n  return {\n    isVisible,\n    containerRef\n  };\n};\n\nconst useShowInlineView = () => {\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useStoreDispatch)();\n  const {\n    connectWhenInView\n  } = (0,domains_config__WEBPACK_IMPORTED_MODULE_2__.useConfig)();\n  const showInlineView = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_4__.selectShowInlineView);\n  const {\n    containerRef,\n    isVisible\n  } = useIntersect({\n    enabled: connectWhenInView,\n    freezeOnceVisible: true\n  });\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!isVisible) return;\n    dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.setShowInlineView());\n  }, [dispatch, isVisible]);\n  return {\n    containerRef,\n    showInlineView\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/visibility/hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useShowInlineView\": () => (/* binding */ useShowInlineView),\n/* harmony export */   \"useVisibility\": () => (/* binding */ useVisibility)\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 domains_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions */ \"./src/javascripts/domains/visibility/actions.js\");\n/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./selectors */ \"./src/javascripts/domains/visibility/selectors.js\");\n/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./constants */ \"./src/javascripts/domains/visibility/constants.js\");\n\n\n\n\n\n\nconst useVisibility = () => {\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useStoreDispatch)();\n  const visible = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_4__.selectVisibility);\n  const isVisible = visible ? visible !== _constants__WEBPACK_IMPORTED_MODULE_5__.visibilityStates.hidden : false;\n  const isOpen = visible === _constants__WEBPACK_IMPORTED_MODULE_5__.visibilityStates.open;\n  const isMinimized = visible === _constants__WEBPACK_IMPORTED_MODULE_5__.visibilityStates.minimized;\n  const setVisibility = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(visibility => dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.setVisibility(visibility)), [dispatch]);\n  return {\n    isVisible,\n    isOpen,\n    isMinimized,\n    visible,\n    setVisibility\n  };\n};\n/**\n * Custom hook which enables initializing of IntersectionObserver on any node ref.\n * @param {object} options Hook options.\n * @param {boolean=} options.freezeOnceVisible Stops observing when the root element is visible.\n * @param {boolean=} options.enabled Determines if useIntersect is enabled.\n */\n\nconst useIntersect = ({\n  freezeOnceVisible = false,\n  enabled = true\n}) => {\n  const [entry, setEntry] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(null);\n  const containerRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const isVisible = !!(entry !== null && entry !== void 0 && entry.isIntersecting) || !enabled;\n  const frozen = isVisible && freezeOnceVisible;\n\n  const observerCallback = ([updatedEntry]) => setEntry(updatedEntry);\n\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const node = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;\n    const hasIOSupport = !!window.IntersectionObserver;\n\n    if (!node && \"development\" === 'development') {\n      console.error('containerRef must be set on a DOM element. check the component where useIntersect is being used.');\n    } // Return an arrow function to have a consistent return value\n\n\n    if (!hasIOSupport || frozen || !node || !enabled) return () => undefined;\n    const observerOptions = {\n      threshold: 0,\n      root: null,\n      rootMargin: '0%'\n    };\n    const observer = new IntersectionObserver(observerCallback, observerOptions);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [enabled, frozen]);\n  return {\n    isVisible,\n    containerRef\n  };\n};\n\nconst useShowInlineView = () => {\n  const dispatch = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useStoreDispatch)();\n  const {\n    connectWhenInView\n  } = (0,domains_config__WEBPACK_IMPORTED_MODULE_2__.useConfig)();\n  const showInlineView = (0,domains_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(_selectors__WEBPACK_IMPORTED_MODULE_4__.selectShowInlineView);\n  const {\n    containerRef,\n    isVisible\n  } = useIntersect({\n    enabled: connectWhenInView,\n    freezeOnceVisible: true\n  });\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!isVisible) return;\n    dispatch(_actions__WEBPACK_IMPORTED_MODULE_3__.setShowInlineView());\n  }, [dispatch, isVisible]);\n  return {\n    containerRef,\n    showInlineView\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/domains/visibility/hooks.js?");
 
 /***/ }),
 
@@ -1036,7 +1025,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 lib_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/engine */ \"./src/javascripts/lib/engine/index.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\nconst isActionObject = actionObj => typeof actionObj === 'object' && 'action' in actionObj;\n\nconst fixActionObjectArgs = actionObj => _objectSpread(_objectSpread({}, actionObj), {}, {\n  args: Array.isArray(actionObj.args) ? actionObj.args : [actionObj.args]\n});\n\nclass ExternalApi {\n  constructor(appConfig) {\n    this._waitingActions = [];\n    this._instances = {};\n    this.appConfig = appConfig;\n    this.context = {};\n  }\n\n  push(...actionObjects) {\n    // eslint-disable-next-line no-param-reassign\n    actionObjects = actionObjects.filter(isActionObject).map(fixActionObjectArgs);\n\n    if (actionObjects.length) {\n      this._waitingActions.push(...actionObjects);\n\n      this.handleActions();\n    }\n  }\n\n  handleActions() {\n    const actions = this._waitingActions;\n    this._waitingActions = [];\n    actions.forEach(actionObj => {\n      switch (actionObj.action) {\n        case 'init':\n          this.handleInit(actionObj);\n          break;\n\n        case 'destroy':\n          this.handleDestroy(actionObj);\n          break;\n\n        default:\n          if (!this.handleAction(actionObj) && // Store context properties for the next instance that will be created\n          !this.setContext(actionObj.action, ...actionObj.args)) {\n            this._waitingActions.push(actionObj);\n          }\n\n          break;\n      }\n    });\n  }\n\n  setContext(action, args) {\n    switch (action) {\n      case 'setTopic':\n        const {\n          name\n        } = args;\n\n        if (name) {\n          this.context.topic = name;\n        }\n\n        return true;\n\n      case 'setTranslation':\n        const {\n          enabled,\n          locale\n        } = args;\n\n        if (!!enabled && locale) {\n          this.context.translationLocale = locale;\n        }\n\n        return true;\n\n      case 'setVariables':\n        if (Object.keys(args).length > 0) {\n          this.context.variables = _objectSpread({}, args);\n        }\n\n        return true;\n\n      default:\n        return false;\n    }\n  }\n\n  handleInit(actionObj) {\n    const userConfig = this.getUserConfig(...actionObj.args);\n    const config = this.getCombinedConfig(userConfig); // if this.appConfig is a function, it might return an invalid configuration (false, null, undefined)\n\n    const {\n      parentElement,\n      namespace\n    } = config || userConfig;\n\n    if (!namespace) {\n      this.destroy();\n    } else {\n      Object.values(this._instances).forEach(instance => {\n        if (instance.parentElement === parentElement || instance.namespace === namespace) {\n          this.destroy(instance);\n        }\n      });\n    }\n\n    if (config) {\n      const instance = this.createInstance(config);\n      this._instances[config.namespace] = instance; // Clear the context after creating the instance, so we do not reuse it for the next\n\n      this.context = {};\n      instance.render();\n    }\n  }\n\n  handleDestroy(actionObj) {\n    this.destroy(actionObj.instance);\n  }\n\n  handleAction(actionObj) {\n    const {\n      action,\n      instance: namespace,\n      args\n    } = actionObj;\n    const instances = Object.values(this._instances);\n\n    if (!namespace && instances.length > 1) {\n      console.warn(`Multiple instances detected. Due to potential race conditions, it is recommended to target a specific instance with the action: ${action}`);\n    } // results will be an array containing the results of wether an instance has\n    // handled the action or not\n\n\n    const results = instances.map(instance => {\n      return !namespace || instance.namespace === namespace ? instance.execFunction(action, ...args) : false;\n    }); // test if any of the instances has handled the action\n\n    return results.some(Boolean);\n  }\n\n  createInstance(config) {\n    return new lib_engine__WEBPACK_IMPORTED_MODULE_0__[\"default\"](config, this);\n  }\n\n  destroy(instance) {\n    if (!instance) {\n      Object.entries(this._instances).forEach(([namespace, _instance]) => {\n        _instance.destroy();\n\n        delete this._instances[namespace];\n      });\n    } else {\n      if (typeof instance === 'string') {\n        // eslint-disable-next-line no-param-reassign\n        instance = this._instances[instance];\n      }\n\n      if (instance) {\n        instance.destroy();\n        delete this._instances[instance.namespace];\n      }\n    }\n  } // eslint-disable-next-line class-methods-use-this\n\n\n  getUserConfig(userConfig = {}) {\n    return userConfig;\n  }\n\n  getCombinedConfig(userConfig) {\n    const context = _objectSpread(_objectSpread({}, userConfig.context || this.appConfig.context), this.context); // Key `variables` should only be set if there are any variables\n\n\n    const variables = this.getMergedVariables(userConfig);\n\n    if (Object.keys(variables).length > 0) {\n      context.variables = variables;\n    }\n\n    const defaults = _objectSpread(_objectSpread({}, this.appConfig.defaults), userConfig.defaults);\n\n    const combinedConfig = _objectSpread(_objectSpread(_objectSpread({}, this.appConfig), userConfig), {}, {\n      api: _objectSpread(_objectSpread({}, this.appConfig.api), userConfig.api),\n      context: Object.keys(context).length ? context : undefined,\n      defaults: Object.keys(defaults).length ? defaults : undefined\n    });\n\n    return typeof this.appConfig === 'function' ? this.appConfig(combinedConfig) : combinedConfig;\n  }\n\n  getMergedVariables(userConfig) {\n    return _objectSpread(_objectSpread(_objectSpread({}, this.appConfig.context?.variables || {}), userConfig.context?.variables || {}), this.context.variables || {});\n  }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ExternalApi);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/lib/external-api/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var lib_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/engine */ \"./src/javascripts/lib/engine/index.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\nconst isActionObject = actionObj => typeof actionObj === 'object' && 'action' in actionObj;\n\nconst fixActionObjectArgs = actionObj => _objectSpread(_objectSpread({}, actionObj), {}, {\n  args: Array.isArray(actionObj.args) ? actionObj.args : [actionObj.args]\n});\n\nclass ExternalApi {\n  constructor(appConfig) {\n    this._waitingActions = [];\n    this._instances = {};\n    this.appConfig = appConfig;\n    this.context = {};\n  }\n\n  push(...actionObjects) {\n    // eslint-disable-next-line no-param-reassign\n    actionObjects = actionObjects.filter(isActionObject).map(fixActionObjectArgs);\n\n    if (actionObjects.length) {\n      this._waitingActions.push(...actionObjects);\n\n      this.handleActions();\n    }\n  }\n\n  handleActions() {\n    const actions = this._waitingActions;\n    this._waitingActions = [];\n    actions.forEach(actionObj => {\n      switch (actionObj.action) {\n        case 'init':\n          this.handleInit(actionObj);\n          break;\n\n        case 'destroy':\n          this.handleDestroy(actionObj);\n          break;\n\n        default:\n          if (!this.handleAction(actionObj) && // Store context properties for the next instance that will be created\n          !this.setContext(actionObj.action, ...actionObj.args)) {\n            this._waitingActions.push(actionObj);\n          }\n\n          break;\n      }\n    });\n  }\n\n  setContext(action, args) {\n    switch (action) {\n      case 'setTopic':\n        const {\n          name\n        } = args;\n\n        if (name) {\n          this.context.topic = name;\n        }\n\n        return true;\n\n      case 'setTranslation':\n        const {\n          enabled,\n          locale\n        } = args;\n\n        if (!!enabled && locale) {\n          this.context.translationLocale = locale;\n        }\n\n        return true;\n\n      case 'setVariables':\n        if (Object.keys(args).length > 0) {\n          this.context.variables = _objectSpread({}, args);\n        }\n\n        return true;\n\n      default:\n        return false;\n    }\n  }\n\n  handleInit(actionObj) {\n    const userConfig = this.getUserConfig(...actionObj.args);\n    const config = this.getCombinedConfig(userConfig); // if this.appConfig is a function, it might return an invalid configuration (false, null, undefined)\n\n    const {\n      parentElement,\n      namespace\n    } = config || userConfig;\n\n    if (!namespace) {\n      this.destroy();\n    } else {\n      Object.values(this._instances).forEach(instance => {\n        if (instance.parentElement === parentElement || instance.namespace === namespace) {\n          this.destroy(instance);\n        }\n      });\n    }\n\n    if (config) {\n      const instance = this.createInstance(config);\n      this._instances[config.namespace] = instance; // Clear the context after creating the instance, so we do not reuse it for the next\n\n      this.context = {};\n      instance.render();\n    }\n  }\n\n  handleDestroy(actionObj) {\n    this.destroy(actionObj.instance);\n  }\n\n  handleAction(actionObj) {\n    const {\n      action,\n      instance: namespace,\n      args\n    } = actionObj;\n    const instances = Object.values(this._instances);\n\n    if (!namespace && instances.length > 1) {\n      console.warn(`Multiple instances detected. Due to potential race conditions, it is recommended to target a specific instance with the action: ${action}`);\n    } // results will be an array containing the results of wether an instance has\n    // handled the action or not\n\n\n    const results = instances.map(instance => {\n      return !namespace || instance.namespace === namespace ? instance.execFunction(action, ...args) : false;\n    }); // test if any of the instances has handled the action\n\n    return results.some(Boolean);\n  }\n\n  createInstance(config) {\n    return new lib_engine__WEBPACK_IMPORTED_MODULE_0__[\"default\"](config, this);\n  }\n\n  destroy(instance) {\n    if (!instance) {\n      Object.entries(this._instances).forEach(([namespace, _instance]) => {\n        _instance.destroy();\n\n        delete this._instances[namespace];\n      });\n    } else {\n      if (typeof instance === 'string') {\n        // eslint-disable-next-line no-param-reassign\n        instance = this._instances[instance];\n      }\n\n      if (instance) {\n        instance.destroy();\n        delete this._instances[instance.namespace];\n      }\n    }\n  } // eslint-disable-next-line class-methods-use-this\n\n\n  getUserConfig(userConfig = {}) {\n    return userConfig;\n  }\n\n  getCombinedConfig(userConfig) {\n    const context = _objectSpread(_objectSpread({}, userConfig.context || this.appConfig.context), this.context); // Key `variables` should only be set if there are any variables\n\n\n    const variables = this.getMergedVariables(userConfig);\n\n    if (Object.keys(variables).length > 0) {\n      context.variables = variables;\n    }\n\n    const defaults = _objectSpread(_objectSpread({}, this.appConfig.defaults), userConfig.defaults);\n\n    const combinedConfig = _objectSpread(_objectSpread(_objectSpread({}, this.appConfig), userConfig), {}, {\n      api: _objectSpread(_objectSpread({}, this.appConfig.api), userConfig.api),\n      context: Object.keys(context).length ? context : undefined,\n      defaults: Object.keys(defaults).length ? defaults : undefined\n    });\n\n    return typeof this.appConfig === 'function' ? this.appConfig(combinedConfig) : combinedConfig;\n  }\n\n  getMergedVariables(userConfig) {\n    var _this$appConfig$conte, _userConfig$context;\n\n    return _objectSpread(_objectSpread(_objectSpread({}, ((_this$appConfig$conte = this.appConfig.context) === null || _this$appConfig$conte === void 0 ? void 0 : _this$appConfig$conte.variables) || {}), ((_userConfig$context = userConfig.context) === null || _userConfig$context === void 0 ? void 0 : _userConfig$context.variables) || {}), this.context.variables || {});\n  }\n\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ExternalApi);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/lib/external-api/index.js?");
 
 /***/ }),
 
@@ -1090,7 +1079,7 @@ eval("if (true) {\n  module.exports = __webpack_require__(/*! preact/debug */ \"
 /***/ ((__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 */   \"DOMAIN_DELIMITER\": () => (/* binding */ DOMAIN_DELIMITER),\n/* harmony export */   \"SLICE_DELIMITER\": () => (/* binding */ SLICE_DELIMITER),\n/* harmony export */   \"createAction\": () => (/* binding */ createAction),\n/* harmony export */   \"createActions\": () => (/* binding */ createActions),\n/* harmony export */   \"createDomain\": () => (/* binding */ createDomain),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"createThunk\": () => (/* binding */ createThunk),\n/* harmony export */   \"prefixType\": () => (/* binding */ prefixType)\n/* harmony export */ });\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\nconst SLICE_DELIMITER = '/';\nconst DOMAIN_DELIMITER = '//';\nfunction prefixType(prefix, fn, delimiter = '/') {\n  return (type, ...args) => fn(prefix + delimiter + type, ...args);\n}\nfunction createAction(type, identityReducer = payload => ({\n  payload\n})) {\n  const action = (...params) => _objectSpread({\n    type\n  }, identityReducer(...params));\n\n  action.toString = () => String(type);\n\n  action.match = obj => obj?.type === String(type);\n\n  return action;\n}\nfunction createActions(baseType, ...args) {\n  const handlers = []; // eslint-disable-next-line consistent-return\n\n  args.forEach(arg => {\n    const argType = typeof arg;\n\n    if (argType === 'string') {\n      return handlers.push([arg]);\n    }\n\n    if (argType !== 'object' || arg instanceof Array) {\n      return undefined;\n    }\n\n    Object.keys(arg).forEach(key => handlers.push([key, arg[key]]));\n  });\n  const create = prefixType(baseType, createAction, SLICE_DELIMITER);\n  return handlers.map(handler => create(...handler));\n}\nfunction createThunk(type, payloadCreator) {\n  const [pending, fulfilled, rejected] = createActions(type, {\n    pending: (arg, requestId) => ({\n      meta: {\n        arg,\n        requestId,\n        status: 'pending'\n      }\n    }),\n    fulfilled: (arg, payload, requestId) => ({\n      payload,\n      meta: {\n        arg,\n        requestId,\n        status: 'fulfilled'\n      }\n    }),\n    rejected: (arg, error, requestId) => ({\n      error,\n      meta: {\n        arg,\n        requestId,\n        status: 'rejected',\n        error: String(error)\n      }\n    })\n  });\n\n  const thunkCreator = arg => (dispatch, getState, extra) => {\n    const requestId = (0,lib_id__WEBPACK_IMPORTED_MODULE_0__.randomId)();\n\n    const promise = (async () => {\n      let finalAction;\n\n      try {\n        dispatch(pending(arg, requestId));\n        const prms = payloadCreator(arg, {\n          dispatch,\n          getState,\n          extra\n        });\n        const result = await prms;\n        finalAction = fulfilled(arg, result, requestId);\n      } catch (error) {\n        finalAction = rejected(arg, error, requestId);\n      }\n\n      dispatch(finalAction);\n      return finalAction;\n    })();\n\n    return Object.assign(promise, {\n      type,\n      arg,\n      requestId\n    });\n  };\n\n  return Object.assign(thunkCreator, {\n    type,\n    pending,\n    fulfilled,\n    rejected\n  });\n}\nfunction createReducer(domain, handlers = {}, defaultState) {\n  const reducer = (state = defaultState, action) => {\n    const typeReducer = handlers?.[action?.type];\n    return typeReducer ? typeReducer(state, action) : state;\n  };\n\n  reducer.toString = () => domain;\n\n  return reducer;\n}\nfunction createDomain(domain) {\n  return {\n    createAction: prefixType(domain, createAction, DOMAIN_DELIMITER),\n    createActions: prefixType(domain, createActions, DOMAIN_DELIMITER),\n    createThunk: prefixType(domain, createThunk, DOMAIN_DELIMITER),\n    createReducer: (handlers, defaultState) => createReducer(domain, handlers, defaultState),\n    selectState: state => state[domain]\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/lib/redux-helpers/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"DOMAIN_DELIMITER\": () => (/* binding */ DOMAIN_DELIMITER),\n/* harmony export */   \"SLICE_DELIMITER\": () => (/* binding */ SLICE_DELIMITER),\n/* harmony export */   \"createAction\": () => (/* binding */ createAction),\n/* harmony export */   \"createActions\": () => (/* binding */ createActions),\n/* harmony export */   \"createDomain\": () => (/* binding */ createDomain),\n/* harmony export */   \"createReducer\": () => (/* binding */ createReducer),\n/* harmony export */   \"createThunk\": () => (/* binding */ createThunk),\n/* harmony export */   \"prefixType\": () => (/* binding */ prefixType)\n/* harmony export */ });\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\nconst SLICE_DELIMITER = '/';\nconst DOMAIN_DELIMITER = '//';\nfunction prefixType(prefix, fn, delimiter = '/') {\n  return (type, ...args) => fn(prefix + delimiter + type, ...args);\n}\nfunction createAction(type, identityReducer = payload => ({\n  payload\n})) {\n  const action = (...params) => _objectSpread({\n    type\n  }, identityReducer(...params));\n\n  action.toString = () => String(type);\n\n  action.match = obj => (obj === null || obj === void 0 ? void 0 : obj.type) === String(type);\n\n  return action;\n}\nfunction createActions(baseType, ...args) {\n  const handlers = []; // eslint-disable-next-line consistent-return\n\n  args.forEach(arg => {\n    const argType = typeof arg;\n\n    if (argType === 'string') {\n      return handlers.push([arg]);\n    }\n\n    if (argType !== 'object' || arg instanceof Array) {\n      return undefined;\n    }\n\n    Object.keys(arg).forEach(key => handlers.push([key, arg[key]]));\n  });\n  const create = prefixType(baseType, createAction, SLICE_DELIMITER);\n  return handlers.map(handler => create(...handler));\n}\nfunction createThunk(type, payloadCreator) {\n  const [pending, fulfilled, rejected] = createActions(type, {\n    pending: (arg, requestId) => ({\n      meta: {\n        arg,\n        requestId,\n        status: 'pending'\n      }\n    }),\n    fulfilled: (arg, payload, requestId) => ({\n      payload,\n      meta: {\n        arg,\n        requestId,\n        status: 'fulfilled'\n      }\n    }),\n    rejected: (arg, error, requestId) => ({\n      error,\n      meta: {\n        arg,\n        requestId,\n        status: 'rejected',\n        error: String(error)\n      }\n    })\n  });\n\n  const thunkCreator = arg => (dispatch, getState, extra) => {\n    const requestId = (0,lib_id__WEBPACK_IMPORTED_MODULE_0__.randomId)();\n\n    const promise = (async () => {\n      let finalAction;\n\n      try {\n        dispatch(pending(arg, requestId));\n        const prms = payloadCreator(arg, {\n          dispatch,\n          getState,\n          extra\n        });\n        const result = await prms;\n        finalAction = fulfilled(arg, result, requestId);\n      } catch (error) {\n        finalAction = rejected(arg, error, requestId);\n      }\n\n      dispatch(finalAction);\n      return finalAction;\n    })();\n\n    return Object.assign(promise, {\n      type,\n      arg,\n      requestId\n    });\n  };\n\n  return Object.assign(thunkCreator, {\n    type,\n    pending,\n    fulfilled,\n    rejected\n  });\n}\nfunction createReducer(domain, handlers = {}, defaultState) {\n  const reducer = (state = defaultState, action) => {\n    const typeReducer = handlers === null || handlers === void 0 ? void 0 : handlers[action === null || action === void 0 ? void 0 : action.type];\n    return typeReducer ? typeReducer(state, action) : state;\n  };\n\n  reducer.toString = () => domain;\n\n  return reducer;\n}\nfunction createDomain(domain) {\n  return {\n    createAction: prefixType(domain, createAction, DOMAIN_DELIMITER),\n    createActions: prefixType(domain, createActions, DOMAIN_DELIMITER),\n    createThunk: prefixType(domain, createThunk, DOMAIN_DELIMITER),\n    createReducer: (handlers, defaultState) => createReducer(domain, handlers, defaultState),\n    selectState: state => state[domain]\n  };\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/lib/redux-helpers/index.js?");
 
 /***/ }),
 
@@ -1189,7 +1178,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var ui_components_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/layout/privacy-disclaimer */ \"./src/javascripts/ui/components/layout/privacy-disclaimer.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _event_event__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./event/event */ \"./src/javascripts/ui/components/conversation/event/event.js\");\n/* harmony import */ var _loader__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./loader */ \"./src/javascripts/ui/components/conversation/loader.js\");\n/* harmony import */ var _component_filter__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./component-filter */ \"./src/javascripts/ui/components/conversation/component-filter.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst Conversation = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const chatBodyContainer = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const events = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useEvents)();\n  const isLoading = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyIsLoading)();\n  const {\n    isOpen\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_6__.useVisibility)();\n  const skiplinkTargetId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplink)();\n  const focusSkiplinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplinkTargetFocusing)();\n  const loadedImageEventIds = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useLoadedImageEventIds)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const containerElement = chatBodyContainer.current;\n\n    if (containerElement) {\n      containerElement.scrollTop = containerElement.scrollHeight;\n    }\n  }, [events, isLoading, isOpen, loadedImageEventIds]);\n\n  const renderEvents = () => {\n    let prevParticipant = null;\n    return events.map(event => {\n      const {\n        type,\n        payload\n      } = event;\n      const {\n        participant,\n        fromClient\n      } = payload;\n      let participantChanged = false;\n\n      if (type !== 'participant') {\n        const currentParticipant = fromClient ? 'seamly-client-participant' : participant;\n\n        if (event.type !== 'info' && prevParticipant !== currentParticipant) {\n          participantChanged = true;\n        }\n\n        prevParticipant = currentParticipant;\n      }\n\n      return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_event_event__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n        event: event,\n        newParticipant: participantChanged\n      }, event.payload.id);\n    });\n  };\n\n  const onClickHandler = e => {\n    e.preventDefault();\n    focusSkiplinkTarget();\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.Fragment, {\n    children: [isOpen && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"a\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('skip-link'),\n      href: `#${skiplinkTargetId}`,\n      onClick: onClickHandler,\n      children: t('skiplinkText')\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('chat__body'),\n      ref: chatBodyContainer,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('conversation__container'),\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"ol\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('conversation'),\n          children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_component_filter__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n            children: renderEvents()\n          }), isLoading && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_loader__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {})]\n        })]\n      })\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Conversation);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/conversation.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var ui_components_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/layout/privacy-disclaimer */ \"./src/javascripts/ui/components/layout/privacy-disclaimer.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _event_event__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./event/event */ \"./src/javascripts/ui/components/conversation/event/event.js\");\n/* harmony import */ var _loader__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./loader */ \"./src/javascripts/ui/components/conversation/loader.js\");\n/* harmony import */ var _component_filter__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./component-filter */ \"./src/javascripts/ui/components/conversation/component-filter.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst Events = () => {\n  const events = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useEvents)();\n  let prevParticipant = null;\n  return events.map(event => {\n    const {\n      type,\n      payload\n    } = event;\n    const {\n      participant,\n      fromClient\n    } = payload;\n    let participantChanged = false;\n\n    if (type !== 'participant') {\n      const currentParticipant = fromClient ? 'seamly-client-participant' : participant;\n\n      if (event.type !== 'info' && prevParticipant !== currentParticipant) {\n        participantChanged = true;\n      }\n\n      prevParticipant = currentParticipant;\n    }\n\n    return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_event_event__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n      event: event,\n      newParticipant: participantChanged\n    }, event.payload.key || event.payload.id);\n  });\n};\n\nconst Conversation = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const chatBodyContainer = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const events = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useEvents)();\n  const isLoading = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyIsLoading)();\n  const {\n    isOpen\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_6__.useVisibility)();\n  const skiplinkTargetId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplink)();\n  const focusSkiplinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSkiplinkTargetFocusing)();\n  const loadedImageEventIds = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useLoadedImageEventIds)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    const containerElement = chatBodyContainer.current;\n\n    if (containerElement) {\n      containerElement.scrollTop = containerElement.scrollHeight;\n    }\n  }, [events, isLoading, isOpen, loadedImageEventIds]);\n\n  const onClickHandler = e => {\n    e.preventDefault();\n    focusSkiplinkTarget();\n  };\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.Fragment, {\n    children: [isOpen && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"a\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('skip-link'),\n      href: `#${skiplinkTargetId}`,\n      onClick: onClickHandler,\n      children: t('skiplinkText')\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('chat__body'),\n      ref: chatBodyContainer,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('conversation__container'),\n        children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_layout_privacy_disclaimer__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {}), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"ol\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('conversation'),\n          children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_component_filter__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n            children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(Events, {})\n          }), isLoading && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_loader__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {})]\n        })]\n      })\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Conversation);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/conversation.js?");
 
 /***/ }),
 
@@ -1288,7 +1277,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 */   \"useChoicePrompt\": () => (/* binding */ useChoicePrompt)\n/* harmony export */ });\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact */ \"preact\");\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__);\nconst _excluded = [\"event\", \"children\"];\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst useChoicePrompt = event => {\n  const {\n    payload\n  } = event;\n  const [showOptions, setShowOptions] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n  const {\n    sendAction,\n    addMessageBubble,\n    addDivider\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyCommands)();\n  const {\n    activeServiceSessionId\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyServiceInfo)();\n  const lastEventId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useLastMessageEventId)();\n  const [body] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_7__.useTranslatedEventData)(event);\n  const {\n    service\n  } = payload;\n  const subEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n    return _objectSpread(_objectSpread({}, event), {}, {\n      payload: _objectSpread(_objectSpread({}, event.payload), {}, {\n        body: event.payload.body?.prompt,\n        translatedBody: event.payload.translatedBody && _objectSpread(_objectSpread({}, event.payload.translatedBody), {}, {\n          data: event.payload.translatedBody.data.prompt\n        })\n      })\n    });\n  }, [event]);\n  const chooseAgain = body.chooseAgain && activeServiceSessionId === service.serviceSessionId && payload.id !== lastEventId;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    setShowOptions(payload.id === lastEventId);\n  }, [payload, lastEventId]);\n\n  const onChoiceClickHandler = choice => {\n    if (chooseAgain) {\n      addDivider('new_topic');\n    }\n\n    addMessageBubble(choice.text);\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.pickChoice,\n      originMessage: payload.id,\n      choice: {\n        id: choice.id,\n        text: choice.text,\n        chooseAgain\n      }\n    });\n    setShowOptions(false);\n  };\n\n  const onChooseAgainClickHandler = () => {\n    setShowOptions(s => !s);\n  };\n\n  return {\n    body,\n    subEvent,\n    showOptions,\n    chooseAgain,\n    onChoiceClickHandler,\n    onChooseAgainClickHandler\n  };\n};\n\nconst ChoicePrompt = _ref => {\n  let {\n    event,\n    children\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_6__.useI18n)();\n  const descriptorId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n  const {\n    body,\n    subEvent,\n    showOptions,\n    chooseAgain,\n    onChoiceClickHandler,\n    onChooseAgainClickHandler\n  } = useChoicePrompt(event);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.Fragment, {\n    children: [(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(children).map(child => {\n      child.props = _objectSpread(_objectSpread({}, child.props), {}, {\n        event: subEvent,\n        descriptorId,\n        showTranslationToggle: false\n      });\n      return child;\n    }), chooseAgain && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('button', 'button--secondary', 'button--choose-again'),\n      \"aria-expanded\": showOptions ? 'true' : 'false',\n      onClick: onChooseAgainClickHandler,\n      \"aria-describedby\": descriptorId,\n      children: [showOptions ? t('message.choicePrompts.cancelChooseAgain') : t('message.choicePrompts.chooseAgain'), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n        name: \"chevronDown\",\n        size: \"8\"\n      })]\n    }), showOptions && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_8__[\"default\"], _objectSpread(_objectSpread({\n      type: \"choice-prompt\",\n      showParticipant: false,\n      event: event\n    }, props), {}, {\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"ul\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('choice-prompt', 'choice-prompt--many'),\n        children: body.choices.map(choice => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"li\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('choice-prompt__item', {\n            [`choice-prompt__item--${choice.category}`]: choice.category\n          }),\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"button\", {\n            type: \"button\",\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('button', 'button--primary'),\n            onClick: () => {\n              onChoiceClickHandler(choice);\n            },\n            children: choice.text\n          })\n        }, choice.id))\n      })\n    }))]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChoicePrompt);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/choice-prompt.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   \"useChoicePrompt\": () => (/* binding */ useChoicePrompt)\n/* harmony export */ });\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact */ \"preact\");\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__);\nconst _excluded = [\"event\", \"children\"];\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst useChoicePrompt = event => {\n  const {\n    payload\n  } = event;\n  const [showOptions, setShowOptions] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n  const {\n    sendAction,\n    addMessageBubble,\n    addDivider\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyCommands)();\n  const {\n    activeServiceSessionId\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyServiceInfo)();\n  const lastEventId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useLastMessageEventId)();\n  const [body] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_7__.useTranslatedEventData)(event);\n  const {\n    service\n  } = payload;\n  const subEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n    var _event$payload$body;\n\n    return _objectSpread(_objectSpread({}, event), {}, {\n      payload: _objectSpread(_objectSpread({}, event.payload), {}, {\n        body: (_event$payload$body = event.payload.body) === null || _event$payload$body === void 0 ? void 0 : _event$payload$body.prompt,\n        translatedBody: event.payload.translatedBody && _objectSpread(_objectSpread({}, event.payload.translatedBody), {}, {\n          data: event.payload.translatedBody.data.prompt\n        })\n      })\n    });\n  }, [event]);\n  const chooseAgain = body.chooseAgain && activeServiceSessionId === service.serviceSessionId && payload.id !== lastEventId;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    setShowOptions(payload.id === lastEventId);\n  }, [payload, lastEventId]);\n\n  const onChoiceClickHandler = choice => {\n    if (chooseAgain) {\n      addDivider('new_topic');\n    }\n\n    addMessageBubble(choice.text);\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.pickChoice,\n      originMessage: payload.id,\n      choice: {\n        id: choice.id,\n        text: choice.text,\n        chooseAgain\n      }\n    });\n    setShowOptions(false);\n  };\n\n  const onChooseAgainClickHandler = () => {\n    setShowOptions(s => !s);\n  };\n\n  return {\n    body,\n    subEvent,\n    showOptions,\n    chooseAgain,\n    onChoiceClickHandler,\n    onChooseAgainClickHandler\n  };\n};\n\nconst ChoicePrompt = _ref => {\n  let {\n    event,\n    children\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_6__.useI18n)();\n  const descriptorId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useGeneratedId)();\n  const {\n    body,\n    subEvent,\n    showOptions,\n    chooseAgain,\n    onChoiceClickHandler,\n    onChooseAgainClickHandler\n  } = useChoicePrompt(event);\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.Fragment, {\n    children: [(0,preact__WEBPACK_IMPORTED_MODULE_0__.toChildArray)(children).map(child => {\n      child.props = _objectSpread(_objectSpread({}, child.props), {}, {\n        event: subEvent,\n        descriptorId,\n        showTranslationToggle: false\n      });\n      return child;\n    }), chooseAgain && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('button', 'button--secondary', 'button--choose-again'),\n      \"aria-expanded\": showOptions ? 'true' : 'false',\n      onClick: onChooseAgainClickHandler,\n      \"aria-describedby\": descriptorId,\n      children: [showOptions ? t('message.choicePrompts.cancelChooseAgain') : t('message.choicePrompts.chooseAgain'), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n        name: \"chevronDown\",\n        size: \"8\"\n      })]\n    }), showOptions && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_8__[\"default\"], _objectSpread(_objectSpread({\n      type: \"choice-prompt\",\n      showParticipant: false,\n      event: event\n    }, props), {}, {\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"ul\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('choice-prompt', 'choice-prompt--many'),\n        children: body.choices.map(choice => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"li\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('choice-prompt__item', {\n            [`choice-prompt__item--${choice.category}`]: choice.category\n          }),\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"button\", {\n            type: \"button\",\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__.className)('button', 'button--primary'),\n            onClick: () => {\n              onChoiceClickHandler(choice);\n            },\n            children: choice.text\n          })\n        }, choice.id))\n      })\n    }))]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChoicePrompt);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/choice-prompt.js?");
 
 /***/ }),
 
@@ -1299,7 +1288,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 */   \"useSuggestions\": () => (/* binding */ useSuggestions)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var domains_app__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/app */ \"./src/javascripts/domains/app/index.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.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.js\");\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var ui_components_suggestions_suggestions_list__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/components/suggestions/suggestions-list */ \"./src/javascripts/ui/components/suggestions/suggestions-list.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__);\nconst _excluded = [\"event\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst useSuggestions = event => {\n  const {\n    payload\n  } = event;\n  const [suggestions] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_4__.useTranslatedEventData)(event);\n  return {\n    suggestions,\n    payload\n  };\n};\n\nconst ConversationSuggestions = _ref => {\n  let {\n    event\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const [isExpanded, setIsExpanded] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(true);\n  const dispatch = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyDispatchContext)();\n  const userResponded = (0,domains_app__WEBPACK_IMPORTED_MODULE_5__.useUserHasResponded)();\n  const {\n    sendAction,\n    addMessageBubble\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyCommands)();\n  const {\n    suggestions,\n    payload\n  } = useSuggestions(event);\n  const events = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useEvents)();\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const headingText = t('suggestions.headingText');\n  const footerText = t('suggestions.footerText'); // We check if there is at least one last transaction\n  // to avoid rendering the suggestions before prior events are rendered.\n\n  const hasLastTransactionEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => events.some(({\n    payload: eventPayload\n  }) => eventPayload?.transactionLast), [events]);\n  const handleClick = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(({\n    id,\n    question\n  }) => {\n    setIsExpanded(false);\n    dispatch((0,domains_app_actions__WEBPACK_IMPORTED_MODULE_6__.setHasResponded)(true)); // @todo Refactor to 'suggestionclick'\n\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__.actionTypes.custom,\n      originMessage: payload.id,\n      body: {\n        type: 'faqclick',\n        body: {\n          faqId: id,\n          faqQuestion: question\n        }\n      }\n    });\n    addMessageBubble(question);\n  }, [dispatch, sendAction, payload.id, addMessageBubble]);\n\n  if (!isExpanded || userResponded || !hasLastTransactionEvent) {\n    return null;\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('suggestions', 'suggestions--conversation'),\n    children: [headingText && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"p\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('suggestions__heading'),\n      children: headingText\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_8__[\"default\"], _objectSpread(_objectSpread({\n      type: \"suggestions\",\n      showParticipant: false,\n      event: event\n    }, props), {}, {\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_suggestions_suggestions_list__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n        className: \"suggestions__list--conversation\",\n        onClickSuggestion: handleClick,\n        suggestions: suggestions\n      }), footerText && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('suggestions__footer'),\n        children: footerText\n      })]\n    }))]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ConversationSuggestions);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/conversation-suggestions.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   \"useSuggestions\": () => (/* binding */ useSuggestions)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var domains_app__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/app */ \"./src/javascripts/domains/app/index.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.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.js\");\n/* harmony import */ var ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/components/conversation/message-container */ \"./src/javascripts/ui/components/conversation/message-container.js\");\n/* harmony import */ var ui_components_suggestions_suggestions_list__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/components/suggestions/suggestions-list */ \"./src/javascripts/ui/components/suggestions/suggestions-list.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__);\nconst _excluded = [\"event\"];\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst useSuggestions = event => {\n  const {\n    payload\n  } = event;\n  const [suggestions] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_4__.useTranslatedEventData)(event);\n  return {\n    suggestions,\n    payload\n  };\n};\n\nconst ConversationSuggestions = _ref => {\n  let {\n    event\n  } = _ref,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  const [isExpanded, setIsExpanded] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useState)(true);\n  const dispatch = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyDispatchContext)();\n  const userResponded = (0,domains_app__WEBPACK_IMPORTED_MODULE_5__.useUserHasResponded)();\n  const {\n    sendAction,\n    addMessageBubble\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useSeamlyCommands)();\n  const {\n    suggestions,\n    payload\n  } = useSuggestions(event);\n  const events = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_2__.useEvents)();\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_3__.useI18n)();\n  const headingText = t('suggestions.headingText');\n  const footerText = t('suggestions.footerText'); // We check if there is at least one last transaction\n  // to avoid rendering the suggestions before prior events are rendered.\n\n  const hasLastTransactionEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => events.some(({\n    payload: eventPayload\n  }) => eventPayload === null || eventPayload === void 0 ? void 0 : eventPayload.transactionLast), [events]);\n  const handleClick = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(({\n    id,\n    question\n  }) => {\n    setIsExpanded(false);\n    dispatch((0,domains_app_actions__WEBPACK_IMPORTED_MODULE_6__.setHasResponded)(true)); // @todo Refactor to 'suggestionclick'\n\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_7__.actionTypes.custom,\n      originMessage: payload.id,\n      body: {\n        type: 'faqclick',\n        body: {\n          faqId: id,\n          faqQuestion: question\n        }\n      }\n    });\n    addMessageBubble(question);\n  }, [dispatch, sendAction, payload.id, addMessageBubble]);\n\n  if (!isExpanded || userResponded || !hasLastTransactionEvent) {\n    return null;\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('suggestions', 'suggestions--conversation'),\n    children: [headingText && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"p\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('suggestions__heading'),\n      children: headingText\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(ui_components_conversation_message_container__WEBPACK_IMPORTED_MODULE_8__[\"default\"], _objectSpread(_objectSpread({\n      type: \"suggestions\",\n      showParticipant: false,\n      event: event\n    }, props), {}, {\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(ui_components_suggestions_suggestions_list__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n        className: \"suggestions__list--conversation\",\n        onClickSuggestion: handleClick,\n        suggestions: suggestions\n      }), footerText && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('suggestions__footer'),\n        children: footerText\n      })]\n    }))]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ConversationSuggestions);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/conversation-suggestions.js?");
 
 /***/ }),
 
@@ -1398,7 +1387,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 */   \"useFormattedDate\": () => (/* binding */ useFormattedDate)\n/* harmony export */ });\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n\n\n\nconst dateFormatOptions = {\n  month: 'long',\n  day: 'numeric',\n  year: 'numeric'\n};\nconst timeFormatOptions = {\n  hour: 'numeric',\n  minute: 'numeric'\n};\nconst useFormattedDate = date => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_0__.useI18n)();\n  const config = (0,domains_config__WEBPACK_IMPORTED_MODULE_2__.useConfig)();\n  const locale = config?.context?.locale ?? [];\n  const eventDate = new Date(date);\n  const currentDate = new Date();\n  const midnight = new Date(currentDate);\n  midnight.setHours(24, 0, 0, 0);\n  const timeUntilMidnight = midnight - currentDate;\n  const fullDateTime = eventDate.toString();\n  const time = new Intl.DateTimeFormat(locale, timeFormatOptions).format(eventDate);\n  let relativeDate = (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__.getRelativeDate)(eventDate, currentDate);\n\n  switch (relativeDate) {\n    case 'today':\n      relativeDate = t('dateTime.today');\n      break;\n\n    case 'yesterday':\n      relativeDate = t('dateTime.yesterday');\n      break;\n\n    default:\n      relativeDate = new Intl.DateTimeFormat(locale, dateFormatOptions).format(eventDate);\n  }\n\n  const srText = t('dateTime.srText', {\n    date: relativeDate,\n    time\n  });\n  return {\n    date: relativeDate,\n    srText,\n    time,\n    fullDateTime,\n    timeUntilMidnight\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/hooks/use-formatted-date.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"useFormattedDate\": () => (/* binding */ useFormattedDate)\n/* harmony export */ });\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n\n\n\nconst dateFormatOptions = {\n  month: 'long',\n  day: 'numeric',\n  year: 'numeric'\n};\nconst timeFormatOptions = {\n  hour: 'numeric',\n  minute: 'numeric'\n};\nconst useFormattedDate = date => {\n  var _config$context;\n\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_0__.useI18n)();\n  const config = (0,domains_config__WEBPACK_IMPORTED_MODULE_2__.useConfig)();\n  const locale = (config === null || config === void 0 ? void 0 : (_config$context = config.context) === null || _config$context === void 0 ? void 0 : _config$context.locale) ?? [];\n  const eventDate = new Date(date);\n  const currentDate = new Date();\n  const midnight = new Date(currentDate);\n  midnight.setHours(24, 0, 0, 0);\n  const timeUntilMidnight = midnight - currentDate;\n  const fullDateTime = eventDate.toString();\n  const time = new Intl.DateTimeFormat(locale, timeFormatOptions).format(eventDate);\n  let relativeDate = (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__.getRelativeDate)(eventDate, currentDate);\n\n  switch (relativeDate) {\n    case 'today':\n      relativeDate = t('dateTime.today');\n      break;\n\n    case 'yesterday':\n      relativeDate = t('dateTime.yesterday');\n      break;\n\n    default:\n      relativeDate = new Intl.DateTimeFormat(locale, dateFormatOptions).format(eventDate);\n  }\n\n  const srText = t('dateTime.srText', {\n    date: relativeDate,\n    time\n  });\n  return {\n    date: relativeDate,\n    srText,\n    time,\n    fullDateTime,\n    timeUntilMidnight\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/conversation/event/hooks/use-formatted-date.js?");
 
 /***/ }),
 
@@ -1618,7 +1607,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var domains_interrupt__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _seamly_api_context__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.js\");\n\n\n\n\n\n\n\n\n\nfunction useSeamlyInstanceFunction(functionName, fn, deps = []) {\n  const eventBus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_7__.SeamlyEventBusContext);\n  const callbackRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  callbackRef.current = fn;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!deps.every(Boolean)) {\n      return undefined;\n    }\n\n    const callback = (...args) => callbackRef.current?.(...args);\n\n    eventBus.emit('function.register', functionName, callback);\n    return () => eventBus.emit('function.unregister', functionName, callback); // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [eventBus, functionName, ...deps]);\n}\n\nconst SeamlyInstanceFunctionsLoader = () => {\n  const config = (0,domains_config__WEBPACK_IMPORTED_MODULE_5__.useConfig)();\n  const {\n    sendMessage,\n    sendContext,\n    sendAction\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCommands)();\n  const {\n    setVisibility,\n    visible\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_6__.useVisibility)();\n  const currentVisibility = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(visible);\n  const eventBus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_7__.SeamlyEventBusContext);\n  const api = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyApiContext)();\n  const unreadCount = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyUnreadCount)();\n  const previousUnreadCount = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const previousVisibilityState = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    isInline,\n    isResolving\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyLayoutMode)();\n  const {\n    hasInterrupt\n  } = (0,domains_interrupt__WEBPACK_IMPORTED_MODULE_4__.useInterrupt)();\n  const currentConversationUrl = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyConversationUrl)();\n  const prevConversationUrl = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const onActivityHandler = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyActivityEventHandler)();\n  const {\n    enableTranslations,\n    disableTranslations\n  } = (0,domains_translations__WEBPACK_IMPORTED_MODULE_3__.useTranslations)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    currentVisibility.current = visible;\n  }, [visible]);\n  useSeamlyInstanceFunction('askText', text => {\n    sendMessage({\n      body: text\n    });\n  }, [api?.send]);\n  useSeamlyInstanceFunction('setVariables', variables => {\n    sendContext({\n      variables\n    });\n  }, [api?.send]);\n  useSeamlyInstanceFunction('getVisibility', callback => {\n    if (callback) {\n      callback(currentVisibility.current);\n    } else {\n      console.warn('A callback function is required for the getVisibility action.');\n    }\n  });\n  useSeamlyInstanceFunction('setVisibility', visibilityState => {\n    if (!Object.values(domains_visibility__WEBPACK_IMPORTED_MODULE_6__.visibilityStates).includes(visibilityState)) {\n      console.error('Requested visibility states should be \"open\", \"minimized\" ,\"hidden\" or null.');\n      return;\n    }\n\n    onActivityHandler();\n    setVisibility(visibilityState);\n  }, [config?.api]);\n  useSeamlyInstanceFunction('sendCustomAction', (actionType, body) => {\n    sendAction({\n      type: 'custom',\n      body: {\n        type: actionType,\n        body\n      }\n    });\n  }, [api.send]);\n  useSeamlyInstanceFunction('setTopic', ({\n    name,\n    fallbackMessage\n  }) => {\n    if (name && fallbackMessage) {\n      sendAction({\n        type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.actionTypes.setTopic,\n        body: {\n          name,\n          fallbackMessage\n        }\n      });\n    } else {\n      console.warn('A name and a fallbackMessage are required for the setTopic action.');\n    }\n  }, [api.send]);\n  useSeamlyInstanceFunction('setTranslation', ({\n    enabled,\n    locale\n  }) => {\n    if (enabled) {\n      enableTranslations(locale);\n    } else {\n      disableTranslations();\n    }\n  }, [api.send]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!isResolving && !hasInterrupt) {\n      // Check for app reset\n      if (prevConversationUrl.current && prevConversationUrl.current !== currentConversationUrl) {\n        eventBus.emit('unreadMessageCount', unreadCount);\n      } //  Broadcast once on window open\n\n\n      if (visible === domains_visibility__WEBPACK_IMPORTED_MODULE_6__.visibilityStates.open && visible !== previousVisibilityState.current) {\n        if (previousUnreadCount.current !== 0) {\n          eventBus.emit('unreadMessageCount', 0);\n        }\n      }\n\n      if (visible !== domains_visibility__WEBPACK_IMPORTED_MODULE_6__.visibilityStates.open && unreadCount !== previousUnreadCount.current) {\n        eventBus.emit('unreadMessageCount', unreadCount);\n      }\n\n      previousVisibilityState.current = visible;\n      previousUnreadCount.current = unreadCount;\n      prevConversationUrl.current = currentConversationUrl;\n    }\n  }, [unreadCount, visible, eventBus, isInline, isResolving, hasInterrupt, currentConversationUrl]);\n  return null;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyInstanceFunctionsLoader);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-instance-functions-loader.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var domains_interrupt__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _seamly_api_context__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.js\");\n\n\n\n\n\n\n\n\n\nfunction useSeamlyInstanceFunction(functionName, fn, deps = []) {\n  const eventBus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_7__.SeamlyEventBusContext);\n  const callbackRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)();\n  callbackRef.current = fn;\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!deps.every(Boolean)) {\n      return undefined;\n    }\n\n    const callback = (...args) => {\n      var _callbackRef$current;\n\n      return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);\n    };\n\n    eventBus.emit('function.register', functionName, callback);\n    return () => eventBus.emit('function.unregister', functionName, callback); // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [eventBus, functionName, ...deps]);\n}\n\nconst SeamlyInstanceFunctionsLoader = () => {\n  const config = (0,domains_config__WEBPACK_IMPORTED_MODULE_5__.useConfig)();\n  const {\n    sendMessage,\n    sendContext,\n    sendAction\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCommands)();\n  const {\n    setVisibility,\n    visible\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_6__.useVisibility)();\n  const currentVisibility = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(visible);\n  const eventBus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(_seamly_api_context__WEBPACK_IMPORTED_MODULE_7__.SeamlyEventBusContext);\n  const api = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyApiContext)();\n  const unreadCount = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyUnreadCount)();\n  const previousUnreadCount = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const previousVisibilityState = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    isInline,\n    isResolving\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyLayoutMode)();\n  const {\n    hasInterrupt\n  } = (0,domains_interrupt__WEBPACK_IMPORTED_MODULE_4__.useInterrupt)();\n  const currentConversationUrl = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyConversationUrl)();\n  const prevConversationUrl = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const onActivityHandler = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyActivityEventHandler)();\n  const {\n    enableTranslations,\n    disableTranslations\n  } = (0,domains_translations__WEBPACK_IMPORTED_MODULE_3__.useTranslations)();\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    currentVisibility.current = visible;\n  }, [visible]);\n  useSeamlyInstanceFunction('askText', text => {\n    sendMessage({\n      body: text\n    });\n  }, [api === null || api === void 0 ? void 0 : api.send]);\n  useSeamlyInstanceFunction('setVariables', variables => {\n    sendContext({\n      variables\n    });\n  }, [api === null || api === void 0 ? void 0 : api.send]);\n  useSeamlyInstanceFunction('getVisibility', callback => {\n    if (callback) {\n      callback(currentVisibility.current);\n    } else {\n      console.warn('A callback function is required for the getVisibility action.');\n    }\n  });\n  useSeamlyInstanceFunction('setVisibility', visibilityState => {\n    if (!Object.values(domains_visibility__WEBPACK_IMPORTED_MODULE_6__.visibilityStates).includes(visibilityState)) {\n      console.error('Requested visibility states should be \"open\", \"minimized\" ,\"hidden\" or null.');\n      return;\n    }\n\n    onActivityHandler();\n    setVisibility(visibilityState);\n  }, [config === null || config === void 0 ? void 0 : config.api]);\n  useSeamlyInstanceFunction('sendCustomAction', (actionType, body) => {\n    sendAction({\n      type: 'custom',\n      body: {\n        type: actionType,\n        body\n      }\n    });\n  }, [api.send]);\n  useSeamlyInstanceFunction('setTopic', ({\n    name,\n    fallbackMessage\n  }) => {\n    if (name && fallbackMessage) {\n      sendAction({\n        type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_2__.actionTypes.setTopic,\n        body: {\n          name,\n          fallbackMessage\n        }\n      });\n    } else {\n      console.warn('A name and a fallbackMessage are required for the setTopic action.');\n    }\n  }, [api.send]);\n  useSeamlyInstanceFunction('setTranslation', ({\n    enabled,\n    locale\n  }) => {\n    if (enabled) {\n      enableTranslations(locale);\n    } else {\n      disableTranslations();\n    }\n  }, [api.send]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (!isResolving && !hasInterrupt) {\n      // Check for app reset\n      if (prevConversationUrl.current && prevConversationUrl.current !== currentConversationUrl) {\n        eventBus.emit('unreadMessageCount', unreadCount);\n      } //  Broadcast once on window open\n\n\n      if (visible === domains_visibility__WEBPACK_IMPORTED_MODULE_6__.visibilityStates.open && visible !== previousVisibilityState.current) {\n        if (previousUnreadCount.current !== 0) {\n          eventBus.emit('unreadMessageCount', 0);\n        }\n      }\n\n      if (visible !== domains_visibility__WEBPACK_IMPORTED_MODULE_6__.visibilityStates.open && unreadCount !== previousUnreadCount.current) {\n        eventBus.emit('unreadMessageCount', unreadCount);\n      }\n\n      previousVisibilityState.current = visible;\n      previousUnreadCount.current = unreadCount;\n      prevConversationUrl.current = currentConversationUrl;\n    }\n  }, [unreadCount, visible, eventBus, isInline, isResolving, hasInterrupt, currentConversationUrl]);\n  return null;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SeamlyInstanceFunctionsLoader);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/core/seamly-instance-functions-loader.js?");
 
 /***/ }),
 
@@ -1838,7 +1827,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 ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_interrupt__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__);\n\n\n\n\n\n\n\n\n\n\nconst AgentInfo = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const {\n    title,\n    subTitle\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyHeaderData)();\n  const unreadMessageCount = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyUnreadCount)();\n  const {\n    isOpen\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n  const currentAgent = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyCurrentAgent)();\n  const {\n    hasInterrupt\n  } = (0,domains_interrupt__WEBPACK_IMPORTED_MODULE_3__.useInterrupt)();\n  const startChatIcon = (0,domains_config__WEBPACK_IMPORTED_MODULE_4__.useStartChatIcon)();\n  const src = currentAgent?.avatar ?? startChatIcon;\n  const displaySubtitle = hasInterrupt ? '' : subTitle;\n  const classNames = ['message-count'];\n\n  if (isOpen) {\n    classNames.push('message-count__hide');\n  }\n\n  if (unreadMessageCount === 0) {\n    classNames.push('message-count__empty');\n  }\n\n  return (displaySubtitle || !isOpen) && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('agent-info'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('agent-info__graphic'),\n      children: [src ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"img\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(currentAgent?.avatar ? 'avatar' : 'icon'),\n        src: src,\n        alt: \"\"\n      }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_icon__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n        name: \"avatar\",\n        size: \"32\"\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(classNames),\n        \"aria-hidden\": \"true\",\n        children: unreadMessageCount\n      })]\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('agent-info__body'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('agent-info__heading'),\n        children: title ?? t('header.title')\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('agent-info__text'),\n        children: displaySubtitle\n      })]\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (AgentInfo);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/agent-info.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_interrupt__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__);\n\n\n\n\n\n\n\n\n\n\nconst AgentInfo = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const {\n    title,\n    subTitle\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyHeaderData)();\n  const unreadMessageCount = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyUnreadCount)();\n  const {\n    isOpen\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_5__.useVisibility)();\n  const currentAgent = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_0__.useSeamlyCurrentAgent)();\n  const {\n    hasInterrupt\n  } = (0,domains_interrupt__WEBPACK_IMPORTED_MODULE_3__.useInterrupt)();\n  const startChatIcon = (0,domains_config__WEBPACK_IMPORTED_MODULE_4__.useStartChatIcon)();\n  const src = (currentAgent === null || currentAgent === void 0 ? void 0 : currentAgent.avatar) ?? startChatIcon;\n  const displaySubtitle = hasInterrupt ? '' : subTitle;\n  const classNames = ['message-count'];\n\n  if (isOpen) {\n    classNames.push('message-count__hide');\n  }\n\n  if (unreadMessageCount === 0) {\n    classNames.push('message-count__empty');\n  }\n\n  return (displaySubtitle || !isOpen) && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('agent-info'),\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('agent-info__graphic'),\n      children: [src ? (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"img\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(currentAgent !== null && currentAgent !== void 0 && currentAgent.avatar ? 'avatar' : 'icon'),\n        src: src,\n        alt: \"\"\n      }) : (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(_icon__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n        name: \"avatar\",\n        size: \"32\"\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)(classNames),\n        \"aria-hidden\": \"true\",\n        children: unreadMessageCount\n      })]\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(\"div\", {\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('agent-info__body'),\n      children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('agent-info__heading'),\n        children: title ?? t('header.title')\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('agent-info__text'),\n        children: displaySubtitle\n      })]\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (AgentInfo);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/layout/agent-info.js?");
 
 /***/ }),
 
@@ -1937,7 +1926,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__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact */ \"preact\");\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/components/widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _options__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./options */ \"./src/javascripts/ui/components/options/options.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__);\n\n\n\n\n\n\n\n\n\n\n\n\nconst OptionsButton = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_4__.useI18n)();\n  const {\n    menuOptions,\n    showOption,\n    panelActive,\n    hideOption\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyOptions)();\n  const {\n    id\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useOptionButton)();\n  const focusOutDelayTimeoutID = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  const [menuIsOpen, setMenuIsOpen] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n  const toggleButton = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  const optionsLength = menuOptions.length;\n  const menuItemButtons = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(Array.from({\n    length: optionsLength\n  }, () => (0,preact__WEBPACK_IMPORTED_MODULE_0__.createRef)()));\n  const prevMenuIsOpen = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);\n  const multiMenu = optionsLength > 1;\n  const firstOption = menuOptions[0];\n  const firstOptionName = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => firstOption?.name?.trim().replace(/\\s+/g, ''), [firstOption]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    return () => {\n      clearTimeout(focusOutDelayTimeoutID.current);\n    };\n  }, []);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    if (menuIsOpen && !prevMenuIsOpen.current) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          const firstActiveOptionIndex = menuOptions.findIndex(option => option.available);\n          const focusIndex = firstActiveOptionIndex === -1 ? 0 : firstActiveOptionIndex;\n          (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[focusIndex]);\n        });\n      });\n    }\n\n    prevMenuIsOpen.current = menuIsOpen;\n  }, [menuIsOpen, menuOptions]);\n\n  const onClickHandler = () => {\n    if (panelActive) {\n      hideOption();\n    }\n\n    if (multiMenu) {\n      setMenuIsOpen(o => !o);\n    } else if (firstOption.available) {\n      showOption(firstOption.name);\n    }\n  };\n\n  const onMainKeyDownHandler = e => {\n    if (!menuIsOpen) {\n      return;\n    }\n\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.Escape) {\n      setMenuIsOpen(false);\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(toggleButton.current);\n    }\n\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.Home) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[0]);\n      e.preventDefault();\n    }\n\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.End) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[optionsLength - 1]);\n      e.preventDefault();\n    }\n  };\n\n  const onButtonKeyDownHandler = e => {\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.ArrowDown) {\n      setMenuIsOpen(true);\n      e.preventDefault();\n    }\n  };\n\n  const onMenuItemKeyDownHandler = (e, index) => {\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.ArrowDown) {\n      const newIndex = Math.min(optionsLength - 1, index + 1);\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[index === newIndex ? 0 : newIndex]);\n      e.preventDefault();\n    }\n\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.ArrowUp) {\n      const newIndex = Math.max(0, index - 1);\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[index === newIndex ? optionsLength - 1 : newIndex]);\n      e.preventDefault();\n    }\n  };\n\n  const onFocusOutHandler = () => {\n    if (multiMenu) {\n      focusOutDelayTimeoutID.current = setTimeout(() => {\n        setMenuIsOpen(false);\n      }, 200);\n    }\n  };\n\n  const onFocusInHandler = () => {\n    clearTimeout(focusOutDelayTimeoutID.current);\n  };\n\n  const onKeyPressHandler = (e, index) => {\n    const char = String.fromCharCode(e.charCode);\n    const isPrintableChar = !!(char.length === 1 && char.match(/\\S/));\n\n    if (!isPrintableChar) {\n      return;\n    }\n\n    let foundIndex = -1;\n    menuOptions.forEach((option, i) => {\n      if (i > index && option.title.charAt(0).toLowerCase() === char.toLowerCase() && foundIndex === -1) {\n        foundIndex = i;\n      }\n    });\n\n    if (foundIndex !== -1) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[foundIndex]);\n    }\n  };\n\n  const onMenuItemClickHandler = (name, available) => {\n    if (available) {\n      setMenuIsOpen(false);\n      showOption(name);\n    }\n  };\n\n  if (!optionsLength) {\n    return null;\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__container'),\n    onKeyDown: onMainKeyDownHandler,\n    onfocusout: onFocusOutHandler,\n    onfocusin: onFocusInHandler,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n      transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__.transitionStartStates.notRendered,\n      isActive: panelActive,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__dialog'),\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_options__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {})\n      })\n    }), multiMenu && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n      isActive: menuIsOpen,\n      transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__.transitionStartStates.notRendered,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"ul\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)(['options__menu']),\n        role: \"menu\",\n        tabIndex: \"-1\",\n        \"aria-labelledby\": id,\n        children: menuOptions.map(({\n          name,\n          title,\n          available\n        }, i) => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"li\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__menu__item'),\n          role: \"menuitem\",\n          \"data-testid\": name,\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"button\", {\n            type: \"button\",\n            ref: item => {\n              menuItemButtons.current[i] = item;\n            },\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)(['button', 'button--secondary']),\n            onKeyDown: e => onMenuItemKeyDownHandler(e, i),\n            onKeyPress: e => onKeyPressHandler(e, i),\n            onClick: () => onMenuItemClickHandler(name, available),\n            \"aria-disabled\": !available ? 'true' : null,\n            children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"span\", {\n              className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button__text'),\n              children: [title, !available && ' ']\n            }), !available && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n              className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button__state'),\n              children: t('options.unavailableText')\n            })]\n          })\n        }, name))\n      })\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)(['button', 'button--secondary', 'chat__options__button', ...(!multiMenu && firstOptionName ? [`chat__options__button--${firstOptionName}`] : [])]),\n      id: id,\n      onClick: onClickHandler,\n      onKeyDown: multiMenu ? onButtonKeyDownHandler : null,\n      ref: toggleButton,\n      \"aria-haspopup\": multiMenu ? 'menu' : null,\n      \"aria-expanded\": multiMenu ? menuIsOpen.toString() : null,\n      \"aria-disabled\": !multiMenu && !firstOption.available ? 'true' : null,\n      children: [multiMenu && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n        name: \"options\",\n        size: \"32\"\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button__text'),\n        children: multiMenu ? t('options.openButtonText') : `${firstOption.title}${!firstOption.available ? ' ' : ''}`\n      }), !multiMenu && !firstOption.available && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button__state'),\n        children: t('options.unavailableText')\n      })]\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (OptionsButton);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/options/options-button.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact */ \"preact\");\n/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ \"./src/javascripts/ui/hooks/seamly-hooks.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/components/layout/icon */ \"./src/javascripts/ui/components/layout/icon.js\");\n/* harmony import */ var ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/components/widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _options__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./options */ \"./src/javascripts/ui/components/options/options.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__);\n\n\n\n\n\n\n\n\n\n\n\n\nconst OptionsButton = () => {\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_4__.useI18n)();\n  const {\n    menuOptions,\n    showOption,\n    panelActive,\n    hideOption\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyOptions)();\n  const {\n    id\n  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useOptionButton)();\n  const focusOutDelayTimeoutID = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  const [menuIsOpen, setMenuIsOpen] = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useState)(false);\n  const toggleButton = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);\n  const optionsLength = menuOptions.length;\n  const menuItemButtons = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(Array.from({\n    length: optionsLength\n  }, () => (0,preact__WEBPACK_IMPORTED_MODULE_0__.createRef)()));\n  const prevMenuIsOpen = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);\n  const multiMenu = optionsLength > 1;\n  const firstOption = menuOptions[0];\n  const firstOptionName = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useMemo)(() => {\n    var _firstOption$name;\n\n    return firstOption === null || firstOption === void 0 ? void 0 : (_firstOption$name = firstOption.name) === null || _firstOption$name === void 0 ? void 0 : _firstOption$name.trim().replace(/\\s+/g, '');\n  }, [firstOption]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    return () => {\n      clearTimeout(focusOutDelayTimeoutID.current);\n    };\n  }, []);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {\n    if (menuIsOpen && !prevMenuIsOpen.current) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          const firstActiveOptionIndex = menuOptions.findIndex(option => option.available);\n          const focusIndex = firstActiveOptionIndex === -1 ? 0 : firstActiveOptionIndex;\n          (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[focusIndex]);\n        });\n      });\n    }\n\n    prevMenuIsOpen.current = menuIsOpen;\n  }, [menuIsOpen, menuOptions]);\n\n  const onClickHandler = () => {\n    if (panelActive) {\n      hideOption();\n    }\n\n    if (multiMenu) {\n      setMenuIsOpen(o => !o);\n    } else if (firstOption.available) {\n      showOption(firstOption.name);\n    }\n  };\n\n  const onMainKeyDownHandler = e => {\n    if (!menuIsOpen) {\n      return;\n    }\n\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.Escape) {\n      setMenuIsOpen(false);\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(toggleButton.current);\n    }\n\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.Home) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[0]);\n      e.preventDefault();\n    }\n\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.End) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[optionsLength - 1]);\n      e.preventDefault();\n    }\n  };\n\n  const onButtonKeyDownHandler = e => {\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.ArrowDown) {\n      setMenuIsOpen(true);\n      e.preventDefault();\n    }\n  };\n\n  const onMenuItemKeyDownHandler = (e, index) => {\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.ArrowDown) {\n      const newIndex = Math.min(optionsLength - 1, index + 1);\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[index === newIndex ? 0 : newIndex]);\n      e.preventDefault();\n    }\n\n    if ((0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.getKey)(e) === ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.keyNames.ArrowUp) {\n      const newIndex = Math.max(0, index - 1);\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[index === newIndex ? optionsLength - 1 : newIndex]);\n      e.preventDefault();\n    }\n  };\n\n  const onFocusOutHandler = () => {\n    if (multiMenu) {\n      focusOutDelayTimeoutID.current = setTimeout(() => {\n        setMenuIsOpen(false);\n      }, 200);\n    }\n  };\n\n  const onFocusInHandler = () => {\n    clearTimeout(focusOutDelayTimeoutID.current);\n  };\n\n  const onKeyPressHandler = (e, index) => {\n    const char = String.fromCharCode(e.charCode);\n    const isPrintableChar = !!(char.length === 1 && char.match(/\\S/));\n\n    if (!isPrintableChar) {\n      return;\n    }\n\n    let foundIndex = -1;\n    menuOptions.forEach((option, i) => {\n      if (i > index && option.title.charAt(0).toLowerCase() === char.toLowerCase() && foundIndex === -1) {\n        foundIndex = i;\n      }\n    });\n\n    if (foundIndex !== -1) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_7__.focusElement)(menuItemButtons.current[foundIndex]);\n    }\n  };\n\n  const onMenuItemClickHandler = (name, available) => {\n    if (available) {\n      setMenuIsOpen(false);\n      showOption(name);\n    }\n  };\n\n  if (!optionsLength) {\n    return null;\n  }\n\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"div\", {\n    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__container'),\n    onKeyDown: onMainKeyDownHandler,\n    onfocusout: onFocusOutHandler,\n    onfocusin: onFocusInHandler,\n    children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n      transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__.transitionStartStates.notRendered,\n      isActive: panelActive,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"div\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__dialog'),\n        children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_options__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {})\n      })\n    }), multiMenu && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__[\"default\"], {\n      isActive: menuIsOpen,\n      transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_6__.transitionStartStates.notRendered,\n      children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"ul\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)(['options__menu']),\n        role: \"menu\",\n        tabIndex: \"-1\",\n        \"aria-labelledby\": id,\n        children: menuOptions.map(({\n          name,\n          title,\n          available\n        }, i) => (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"li\", {\n          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('options__menu__item'),\n          role: \"menuitem\",\n          \"data-testid\": name,\n          children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"button\", {\n            type: \"button\",\n            ref: item => {\n              menuItemButtons.current[i] = item;\n            },\n            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)(['button', 'button--secondary']),\n            onKeyDown: e => onMenuItemKeyDownHandler(e, i),\n            onKeyPress: e => onKeyPressHandler(e, i),\n            onClick: () => onMenuItemClickHandler(name, available),\n            \"aria-disabled\": !available ? 'true' : null,\n            children: [(0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"span\", {\n              className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button__text'),\n              children: [title, !available && ' ']\n            }), !available && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n              className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button__state'),\n              children: t('options.unavailableText')\n            })]\n          })\n        }, name))\n      })\n    }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(\"button\", {\n      type: \"button\",\n      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)(['button', 'button--secondary', 'chat__options__button', ...(!multiMenu && firstOptionName ? [`chat__options__button--${firstOptionName}`] : [])]),\n      id: id,\n      onClick: onClickHandler,\n      onKeyDown: multiMenu ? onButtonKeyDownHandler : null,\n      ref: toggleButton,\n      \"aria-haspopup\": multiMenu ? 'menu' : null,\n      \"aria-expanded\": multiMenu ? menuIsOpen.toString() : null,\n      \"aria-disabled\": !multiMenu && !firstOption.available ? 'true' : null,\n      children: [multiMenu && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(ui_components_layout_icon__WEBPACK_IMPORTED_MODULE_5__[\"default\"], {\n        name: \"options\",\n        size: \"32\"\n      }), (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button__text'),\n        children: multiMenu ? t('options.openButtonText') : `${firstOption.title}${!firstOption.available ? ' ' : ''}`\n      }), !multiMenu && !firstOption.available && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(\"span\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_2__.className)('button__state'),\n        children: t('options.unavailableText')\n      })]\n    })]\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (OptionsButton);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/options/options-button.js?");
 
 /***/ }),
 
@@ -1992,7 +1981,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var _domains_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var _hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _domains_translations__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var _domains_interrupt__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var _hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../hooks/utility-hooks */ \"./src/javascripts/ui/hooks/utility-hooks.js\");\n/* harmony import */ var _hooks_use_seamly_idle_detach_countdown__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../hooks/use-seamly-idle-detach-countdown */ \"./src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js\");\n/* harmony import */ var _hooks_use_seamly_resume_conversation_prompt__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../hooks/use-seamly-resume-conversation-prompt */ \"./src/javascripts/ui/hooks/use-seamly-resume-conversation-prompt.js\");\n/* harmony import */ var _hooks_use_seamly_commands__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../hooks/use-seamly-commands */ \"./src/javascripts/ui/hooks/use-seamly-commands.js\");\n/* harmony import */ var _hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../hooks/focus-helper-hooks */ \"./src/javascripts/ui/hooks/focus-helper-hooks.js\");\n/* harmony import */ var _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var _domains_app__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../../domains/app */ \"./src/javascripts/domains/app/index.js\");\n/* harmony import */ var _domains_visibility__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../../domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.js\");\n/* harmony import */ var _hooks_live_region_hooks__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../../hooks/live-region-hooks */ \"./src/javascripts/ui/hooks/live-region-hooks.js\");\n/* harmony import */ var _utils_general_utils__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../../utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var _suggestions_list__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./suggestions-list */ \"./src/javascripts/ui/components/suggestions/suggestions-list.js\");\n/* harmony import */ var _domains_config__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../../../domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_19___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst Suggestions = ({\n  isAside\n}) => {\n  // generic hooks\n  const {\n    layoutMode\n  } = (0,_domains_config__WEBPACK_IMPORTED_MODULE_18__.useConfig)();\n  const {\n    t\n  } = (0,_domains_i18n__WEBPACK_IMPORTED_MODULE_2__.useI18n)();\n  const {\n    sendAction,\n    addMessageBubble\n  } = (0,_hooks_use_seamly_commands__WEBPACK_IMPORTED_MODULE_9__[\"default\"])();\n  const {\n    isOpen,\n    setVisibility\n  } = (0,_domains_visibility__WEBPACK_IMPORTED_MODULE_13__.useVisibility)(); // a11y hooks\n\n  const sectionId = (0,_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_6__.useGeneratedId)();\n  const focusSkiplinkTarget = (0,_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_10__.useSkiplinkTargetFocusing)();\n  const containerRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const {\n    sendPolite\n  } = (0,_hooks_live_region_hooks__WEBPACK_IMPORTED_MODULE_15__.useLiveRegion)(); // interrupt & countdown hooks\n\n  const {\n    hasInterrupt\n  } = (0,_domains_interrupt__WEBPACK_IMPORTED_MODULE_5__.useInterrupt)();\n  const {\n    hasCountdown,\n    endCountdown\n  } = (0,_hooks_use_seamly_idle_detach_countdown__WEBPACK_IMPORTED_MODULE_7__[\"default\"])();\n  const {\n    hasPrompt,\n    continueChat\n  } = (0,_hooks_use_seamly_resume_conversation_prompt__WEBPACK_IMPORTED_MODULE_8__[\"default\"])(); // data hooks\n\n  const hasResponded = (0,_domains_app__WEBPACK_IMPORTED_MODULE_12__.useUserHasResponded)();\n  const payload = (0,_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyServiceData)('suggestion');\n  const [eventBody] = (0,_domains_translations__WEBPACK_IMPORTED_MODULE_4__.useTranslatedEventData)({\n    payload\n  });\n  const suggestions = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => payload && !hasInterrupt ? eventBody : [], [payload, hasInterrupt, eventBody]);\n  const prevSuggestions = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n  const prevHasSuggestions = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);\n  const previousRenderedSuggestions = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)([]);\n  const hasSuggestions = !!suggestions.length;\n  const hideSuggestions = layoutMode === 'inline' ? (hasResponded || isOpen) && !isAside : hasResponded;\n  const prevHideSuggestions = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useRef)(hideSuggestions);\n  const showSuggestionsContainer = hasSuggestions && !hideSuggestions;\n  const renderedSuggestions = hasSuggestions ? suggestions : previousRenderedSuggestions.current;\n  previousRenderedSuggestions.current = renderedSuggestions; // click handler\n\n  const handleClick = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(({\n    id,\n    question\n  }) => {\n    if (hasCountdown) {\n      endCountdown(true);\n    }\n\n    if (hasPrompt) {\n      continueChat();\n    } // @todo Refactor to 'suggestionclick'\n\n\n    sendAction({\n      type: _utils_seamly_utils__WEBPACK_IMPORTED_MODULE_11__.actionTypes.custom,\n      originMessage: payload.id,\n      body: {\n        type: 'faqclick',\n        body: {\n          faqId: id,\n          faqQuestion: question\n        }\n      }\n    });\n    addMessageBubble(question);\n\n    if (!isOpen) {\n      setVisibility(_domains_visibility__WEBPACK_IMPORTED_MODULE_13__.visibilityStates.open);\n    }\n\n    focusSkiplinkTarget();\n  }, [addMessageBubble, continueChat, endCountdown, focusSkiplinkTarget, hasCountdown, hasPrompt, payload, sendAction, setVisibility, isOpen]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n    if (prevSuggestions.current !== suggestions && !hideSuggestions) {\n      if (hasSuggestions) {\n        const politeText = prevHasSuggestions.current ? t('suggestions.srUpdatedText') : t('suggestions.srAvailableText');\n        setTimeout(() => {\n          sendPolite(politeText);\n        }, 30);\n      } else if (prevHasSuggestions.current) {\n        sendPolite(t('suggestions.srUnavailableText'));\n      }\n\n      prevSuggestions.current = suggestions;\n    }\n\n    if (!prevHideSuggestions.current && hideSuggestions) {\n      (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_16__.runIfElementContainsOrHasFocus)(containerRef.current, focusSkiplinkTarget);\n      sendPolite(t('suggestions.srUnavailableText'));\n    } else if (!hasSuggestions && prevHasSuggestions.current) {\n      (0,_utils_general_utils__WEBPACK_IMPORTED_MODULE_16__.runIfElementContainsOrHasFocus)(containerRef.current, focusSkiplinkTarget);\n    }\n\n    prevHasSuggestions.current = hasSuggestions;\n    prevHideSuggestions.current = hideSuggestions;\n  }, [suggestions, hasSuggestions, hideSuggestions, focusSkiplinkTarget, sendPolite, t]);\n  const headingText = t('suggestions.headingText');\n  const footerText = t('suggestions.footerText');\n  const ContainerElement = headingText ? 'section' : 'div';\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n    isActive: showSuggestionsContainer,\n    transitionStartState: _widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_14__.transitionStartStates.notRendered,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsxs)(ContainerElement, {\n      className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('suggestions'),\n      \"aria-labelledby\": headingText ? sectionId : null,\n      ref: containerRef,\n      children: [headingText && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(\"p\", {\n        id: sectionId,\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('suggestions__heading'),\n        children: headingText\n      }), !!renderedSuggestions.length && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_suggestions_list__WEBPACK_IMPORTED_MODULE_17__[\"default\"], {\n        suggestions: renderedSuggestions,\n        onClickSuggestion: handleClick\n      }), footerText && !isOpen && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(\"p\", {\n        className: (0,_lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('suggestions__footer'),\n        children: footerText\n      })]\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Suggestions);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/suggestions/index.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var domains_app__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/app */ \"./src/javascripts/domains/app/index.js\");\n/* harmony import */ var domains_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! domains/i18n */ \"./src/javascripts/domains/i18n/index.js\");\n/* harmony import */ var domains_interrupt__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var domains_translations__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/translations */ \"./src/javascripts/domains/translations/index.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! lib/css */ \"./src/javascripts/lib/css.js\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var ui_components_suggestions_suggestions_list__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/components/suggestions/suggestions-list */ \"./src/javascripts/ui/components/suggestions/suggestions-list.js\");\n/* harmony import */ var ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/components/widgets/in-out-transition */ \"./src/javascripts/ui/components/widgets/in-out-transition.js\");\n/* harmony import */ var ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/hooks/focus-helper-hooks */ \"./src/javascripts/ui/hooks/focus-helper-hooks.js\");\n/* harmony import */ var ui_hooks_live_region_hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/hooks/live-region-hooks */ \"./src/javascripts/ui/hooks/live-region-hooks.js\");\n/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var ui_hooks_use_seamly_commands__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ui/hooks/use-seamly-commands */ \"./src/javascripts/ui/hooks/use-seamly-commands.js\");\n/* harmony import */ var ui_hooks_use_seamly_idle_detach_countdown__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ui/hooks/use-seamly-idle-detach-countdown */ \"./src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js\");\n/* harmony import */ var ui_hooks_use_seamly_resume_conversation_prompt__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ui/hooks/use-seamly-resume-conversation-prompt */ \"./src/javascripts/ui/hooks/use-seamly-resume-conversation-prompt.js\");\n/* harmony import */ var ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ui/hooks/utility-hooks */ \"./src/javascripts/ui/hooks/utility-hooks.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! preact/jsx-runtime */ \"preact/jsx-runtime\");\n/* harmony import */ var preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_18___default = /*#__PURE__*/__webpack_require__.n(preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_18__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst Suggestions = ({\n  isAside = false\n}) => {\n  // generic hooks\n  const {\n    isInline\n  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_11__.useSeamlyLayoutMode)();\n  const {\n    t\n  } = (0,domains_i18n__WEBPACK_IMPORTED_MODULE_1__.useI18n)();\n  const {\n    sendAction,\n    addMessageBubble\n  } = (0,ui_hooks_use_seamly_commands__WEBPACK_IMPORTED_MODULE_12__[\"default\"])();\n  const {\n    isOpen,\n    setVisibility\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_4__.useVisibility)(); // a11y hooks\n\n  const sectionId = (0,ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_15__.useGeneratedId)();\n  const focusSkiplinkTarget = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_9__.useSkiplinkTargetFocusing)();\n  const containerRef = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_6__.useRef)(null);\n  const {\n    sendPolite\n  } = (0,ui_hooks_live_region_hooks__WEBPACK_IMPORTED_MODULE_10__.useLiveRegion)(); // interrupt & countdown hooks\n\n  const {\n    hasInterrupt\n  } = (0,domains_interrupt__WEBPACK_IMPORTED_MODULE_2__.useInterrupt)();\n  const {\n    hasCountdown,\n    endCountdown\n  } = (0,ui_hooks_use_seamly_idle_detach_countdown__WEBPACK_IMPORTED_MODULE_13__[\"default\"])();\n  const {\n    hasPrompt,\n    continueChat\n  } = (0,ui_hooks_use_seamly_resume_conversation_prompt__WEBPACK_IMPORTED_MODULE_14__[\"default\"])(); // data hooks\n\n  const hasResponded = (0,domains_app__WEBPACK_IMPORTED_MODULE_0__.useUserHasResponded)();\n  const payload = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_11__.useSeamlyServiceData)('suggestion');\n  const [eventBody] = (0,domains_translations__WEBPACK_IMPORTED_MODULE_3__.useTranslatedEventData)({\n    payload\n  });\n  const suggestions = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_6__.useMemo)(() => payload && !hasInterrupt ? eventBody : [], [payload, hasInterrupt, eventBody]);\n  const prevSuggestions = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_6__.useRef)(null);\n  const prevHasSuggestions = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_6__.useRef)(false);\n  const previousRenderedSuggestions = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_6__.useRef)([]);\n  const hasSuggestions = !!suggestions.length;\n  const hideSuggestions = isInline ? (hasResponded || isOpen) && !isAside : hasResponded;\n  const prevHideSuggestions = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_6__.useRef)(hideSuggestions);\n  const showSuggestionsContainer = hasSuggestions && !hideSuggestions;\n  const renderedSuggestions = hasSuggestions ? suggestions : previousRenderedSuggestions.current;\n  previousRenderedSuggestions.current = renderedSuggestions;\n  const suggestionsClassNames = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_6__.useMemo)(() => {\n    const classNames = ['suggestions'];\n\n    if (isAside) {\n      classNames.push('suggestions--aside');\n    }\n\n    return (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)(classNames);\n  }, [isAside]); // click handler\n\n  const handleClick = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_6__.useCallback)(({\n    id,\n    question\n  }) => {\n    if (hasCountdown) {\n      endCountdown(true);\n    }\n\n    if (hasPrompt) {\n      continueChat();\n    } // @todo Refactor to 'suggestionclick'\n\n\n    sendAction({\n      type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_17__.actionTypes.custom,\n      originMessage: payload.id,\n      body: {\n        type: 'faqclick',\n        body: {\n          faqId: id,\n          faqQuestion: question\n        }\n      }\n    });\n    addMessageBubble(question);\n\n    if (!isOpen) {\n      setVisibility(domains_visibility__WEBPACK_IMPORTED_MODULE_4__.visibilityStates.open);\n    }\n\n    focusSkiplinkTarget();\n  }, [addMessageBubble, continueChat, endCountdown, focusSkiplinkTarget, hasCountdown, hasPrompt, payload, sendAction, setVisibility, isOpen]);\n  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_6__.useEffect)(() => {\n    if (prevSuggestions.current !== suggestions && !hideSuggestions) {\n      if (hasSuggestions) {\n        const politeText = prevHasSuggestions.current ? t('suggestions.srUpdatedText') : t('suggestions.srAvailableText');\n        setTimeout(() => {\n          sendPolite(politeText);\n        }, 30);\n      } else if (prevHasSuggestions.current) {\n        sendPolite(t('suggestions.srUnavailableText'));\n      }\n\n      prevSuggestions.current = suggestions;\n    }\n\n    if (!prevHideSuggestions.current && hideSuggestions) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_16__.runIfElementContainsOrHasFocus)(containerRef.current, focusSkiplinkTarget);\n      sendPolite(t('suggestions.srUnavailableText'));\n    } else if (!hasSuggestions && prevHasSuggestions.current) {\n      (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_16__.runIfElementContainsOrHasFocus)(containerRef.current, focusSkiplinkTarget);\n    }\n\n    prevHasSuggestions.current = hasSuggestions;\n    prevHideSuggestions.current = hideSuggestions;\n  }, [suggestions, hasSuggestions, hideSuggestions, focusSkiplinkTarget, sendPolite, t]);\n  const headingText = t('suggestions.headingText');\n  const footerText = t('suggestions.footerText');\n  const ContainerElement = headingText ? 'section' : 'div';\n  return (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_18__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n    isActive: showSuggestionsContainer,\n    transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__.transitionStartStates.notRendered,\n    children: (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_18__.jsxs)(ContainerElement, {\n      className: suggestionsClassNames,\n      \"aria-labelledby\": headingText ? sectionId : null,\n      ref: containerRef,\n      children: [headingText && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_18__.jsx)(\"p\", {\n        id: sectionId,\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('suggestions__heading'),\n        children: headingText\n      }), !!renderedSuggestions.length && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_18__.jsx)(ui_components_suggestions_suggestions_list__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n        suggestions: renderedSuggestions,\n        onClickSuggestion: handleClick\n      }), footerText && !isOpen && (0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_18__.jsx)(\"p\", {\n        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('suggestions__footer'),\n        children: footerText\n      })]\n    })\n  });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Suggestions);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/components/suggestions/index.js?");
 
 /***/ }),
 
@@ -2267,7 +2256,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"selectEvents\": () => (/* binding */ selectEvents),\n/* harmony export */   \"selectEventsWithSuggestion\": () => (/* binding */ selectEventsWithSuggestion),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState),\n/* harmony export */   \"useEntryTextLimit\": () => (/* binding */ useEntryTextLimit),\n/* harmony export */   \"useEvents\": () => (/* binding */ useEvents),\n/* harmony export */   \"useLastMessageEventId\": () => (/* binding */ useLastMessageEventId),\n/* harmony export */   \"useLoadedImageEventIds\": () => (/* binding */ useLoadedImageEventIds),\n/* harmony export */   \"useSeamlyCurrentAgent\": () => (/* binding */ useSeamlyCurrentAgent),\n/* harmony export */   \"useSeamlyHeaderData\": () => (/* binding */ useSeamlyHeaderData),\n/* harmony export */   \"useSeamlyIsHistoryLoaded\": () => (/* binding */ useSeamlyIsHistoryLoaded),\n/* harmony export */   \"useSeamlyIsLoading\": () => (/* binding */ useSeamlyIsLoading),\n/* harmony export */   \"useSeamlyLayoutMode\": () => (/* binding */ useSeamlyLayoutMode),\n/* harmony export */   \"useSeamlyParticipant\": () => (/* binding */ useSeamlyParticipant),\n/* harmony export */   \"useSeamlyServiceData\": () => (/* binding */ useSeamlyServiceData),\n/* harmony export */   \"useSeamlyServiceInfo\": () => (/* binding */ useSeamlyServiceInfo),\n/* harmony export */   \"useSeamlyStateContext\": () => (/* binding */ useSeamlyStateContext),\n/* harmony export */   \"useSeamlyUnreadCount\": () => (/* binding */ useSeamlyUnreadCount),\n/* harmony export */   \"useSkiplink\": () => (/* binding */ useSkiplink)\n/* harmony export */ });\n/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! reselect */ \"./node_modules/reselect/es/index.js\");\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/selectors */ \"./src/javascripts/domains/config/selectors.js\");\n/* harmony import */ var domains_app_selectors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/app/selectors */ \"./src/javascripts/domains/app/selectors.js\");\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\nconst selectState = state => state.state;\nconst useSeamlyStateContext = () => (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(selectState);\nconst selectEventsWithSuggestion = (0,reselect__WEBPACK_IMPORTED_MODULE_5__.createSelector)(selectState, domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__.selectConfig, domains_app_selectors__WEBPACK_IMPORTED_MODULE_3__.selectUserHasResponded, ({\n  events,\n  serviceData\n}, config, userHasResponded) => {\n  if (userHasResponded || config.layoutMode === 'inline' || !serviceData.suggestion || !serviceData.suggestion?.body.length) {\n    return events;\n  }\n\n  const suggestionsEvent = {\n    type: 'service_data',\n    payload: serviceData.suggestion\n  };\n  return [...events, suggestionsEvent];\n});\nconst selectEvents = (0,reselect__WEBPACK_IMPORTED_MODULE_5__.createSelector)(selectEventsWithSuggestion, domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__.selectConfig, (events, config) => {\n  const {\n    enabled,\n    threshold\n  } = config?.messages?.timeIndicator ?? {};\n\n  if (!enabled) {\n    return events;\n  }\n\n  const mappedEvents = [];\n  let previousEvent = null;\n  events.forEach((event, idx) => {\n    // always add timeIndicator to first message\n    if (idx === 0) {\n      mappedEvents.push(_objectSpread(_objectSpread({}, event), {}, {\n        timeIndicator: event.payload.occurredAt\n      })); // else check if diff is greater than threshold\n    } else {\n      const timeIndicator = previousEvent && (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__.microsecondsToMilliseconds)(event.payload.occurredAt - previousEvent.payload.occurredAt) >= threshold ? event.payload.occurredAt : undefined;\n      mappedEvents.push(_objectSpread(_objectSpread({}, event), {}, {\n        timeIndicator\n      }));\n    }\n\n    previousEvent = event;\n  });\n  return mappedEvents;\n});\nconst useEvents = () => (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(selectEvents, []);\nconst useSeamlyIsLoading = () => useSeamlyStateContext().isLoading;\nconst useSeamlyHeaderData = () => useSeamlyStateContext().headerTitles;\nconst useSeamlyUnreadCount = () => useSeamlyStateContext().unreadEvents;\nconst useLoadedImageEventIds = () => useSeamlyStateContext().loadedImageEventIds;\nconst useSkiplink = () => useSeamlyStateContext().skiplinkTargetId;\nconst useSeamlyParticipant = participantId => useSeamlyStateContext().participantInfo.participants[participantId];\nconst useSeamlyServiceInfo = () => useSeamlyStateContext().serviceInfo;\nconst selectLastMessageEventId = (0,reselect__WEBPACK_IMPORTED_MODULE_5__.createSelector)(selectEvents, events => {\n  const filteredEvents = events.filter(event => event.type === 'message');\n  return filteredEvents[filteredEvents.length - 1]?.payload.id;\n});\nconst useLastMessageEventId = () => (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(selectLastMessageEventId);\nconst useSeamlyIsHistoryLoaded = () => useSeamlyStateContext().historyLoaded;\nconst useSeamlyCurrentAgent = () => {\n  const {\n    participants,\n    currentAgent\n  } = useSeamlyStateContext().participantInfo;\n  return currentAgent ? participants[currentAgent] : null;\n};\nconst useSeamlyServiceData = key => useSeamlyStateContext().serviceData[key];\nconst useEntryTextLimit = () => {\n  const {\n    entryMeta: {\n      options: {\n        text\n      },\n      optionsOverride: {\n        text: overrideText\n      }\n    }\n  } = useSeamlyStateContext();\n  const {\n    limit\n  } = overrideText || text || {\n    limit: null\n  };\n  return {\n    hasLimit: limit !== null,\n    limit: limit !== null ? limit : null\n  };\n};\nconst useSeamlyLayoutMode = () => {\n  const {\n    layoutMode\n  } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_4__.useConfig)();\n  return {\n    isInline: layoutMode === 'inline',\n    isWindow: layoutMode === 'window',\n    isResolving: !layoutMode\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/seamly-state-hooks.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"selectEvents\": () => (/* binding */ selectEvents),\n/* harmony export */   \"selectEventsWithSuggestion\": () => (/* binding */ selectEventsWithSuggestion),\n/* harmony export */   \"selectState\": () => (/* binding */ selectState),\n/* harmony export */   \"useEntryTextLimit\": () => (/* binding */ useEntryTextLimit),\n/* harmony export */   \"useEvents\": () => (/* binding */ useEvents),\n/* harmony export */   \"useLastMessageEventId\": () => (/* binding */ useLastMessageEventId),\n/* harmony export */   \"useLoadedImageEventIds\": () => (/* binding */ useLoadedImageEventIds),\n/* harmony export */   \"useSeamlyCurrentAgent\": () => (/* binding */ useSeamlyCurrentAgent),\n/* harmony export */   \"useSeamlyHeaderData\": () => (/* binding */ useSeamlyHeaderData),\n/* harmony export */   \"useSeamlyIsHistoryLoaded\": () => (/* binding */ useSeamlyIsHistoryLoaded),\n/* harmony export */   \"useSeamlyIsLoading\": () => (/* binding */ useSeamlyIsLoading),\n/* harmony export */   \"useSeamlyLayoutMode\": () => (/* binding */ useSeamlyLayoutMode),\n/* harmony export */   \"useSeamlyParticipant\": () => (/* binding */ useSeamlyParticipant),\n/* harmony export */   \"useSeamlyServiceData\": () => (/* binding */ useSeamlyServiceData),\n/* harmony export */   \"useSeamlyServiceInfo\": () => (/* binding */ useSeamlyServiceInfo),\n/* harmony export */   \"useSeamlyStateContext\": () => (/* binding */ useSeamlyStateContext),\n/* harmony export */   \"useSeamlyUnreadCount\": () => (/* binding */ useSeamlyUnreadCount),\n/* harmony export */   \"useSkiplink\": () => (/* binding */ useSkiplink)\n/* harmony export */ });\n/* harmony import */ var reselect__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! reselect */ \"./node_modules/reselect/es/index.js\");\n/* harmony import */ var domains_redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/redux */ \"./src/javascripts/domains/redux/index.js\");\n/* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/utils/general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\n/* harmony import */ var domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/selectors */ \"./src/javascripts/domains/config/selectors.js\");\n/* harmony import */ var domains_app_selectors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/app/selectors */ \"./src/javascripts/domains/app/selectors.js\");\n/* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/config/hooks */ \"./src/javascripts/domains/config/hooks.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\nconst selectState = state => state.state;\nconst useSeamlyStateContext = () => (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(selectState);\nconst selectEventsWithSuggestion = (0,reselect__WEBPACK_IMPORTED_MODULE_5__.createSelector)(selectState, domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__.selectConfig, domains_app_selectors__WEBPACK_IMPORTED_MODULE_3__.selectUserHasResponded, ({\n  events,\n  serviceData\n}, config, userHasResponded) => {\n  var _serviceData$suggesti;\n\n  if (userHasResponded || config.layoutMode === 'inline' || !serviceData.suggestion || !((_serviceData$suggesti = serviceData.suggestion) !== null && _serviceData$suggesti !== void 0 && _serviceData$suggesti.body.length)) {\n    return events;\n  }\n\n  const suggestionsEvent = {\n    type: 'service_data',\n    payload: serviceData.suggestion\n  };\n  return [...events, suggestionsEvent];\n});\nconst selectEvents = (0,reselect__WEBPACK_IMPORTED_MODULE_5__.createSelector)(selectEventsWithSuggestion, domains_config_selectors__WEBPACK_IMPORTED_MODULE_2__.selectConfig, (events, config) => {\n  var _config$messages;\n\n  const {\n    enabled,\n    threshold\n  } = (config === null || config === void 0 ? void 0 : (_config$messages = config.messages) === null || _config$messages === void 0 ? void 0 : _config$messages.timeIndicator) ?? {};\n\n  if (!enabled) {\n    return events;\n  }\n\n  const mappedEvents = [];\n  let previousEvent = null;\n  events.forEach((event, idx) => {\n    // always add timeIndicator to first message\n    if (idx === 0) {\n      mappedEvents.push(_objectSpread(_objectSpread({}, event), {}, {\n        timeIndicator: event.payload.occurredAt\n      })); // else check if diff is greater than threshold\n    } else {\n      const timeIndicator = previousEvent && (0,ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_1__.microsecondsToMilliseconds)(event.payload.occurredAt - previousEvent.payload.occurredAt) >= threshold ? event.payload.occurredAt : undefined;\n      mappedEvents.push(_objectSpread(_objectSpread({}, event), {}, {\n        timeIndicator\n      }));\n    }\n\n    previousEvent = event;\n  });\n  return mappedEvents;\n});\nconst useEvents = () => (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(selectEvents, []);\nconst useSeamlyIsLoading = () => useSeamlyStateContext().isLoading;\nconst useSeamlyHeaderData = () => useSeamlyStateContext().headerTitles;\nconst useSeamlyUnreadCount = () => useSeamlyStateContext().unreadEvents;\nconst useLoadedImageEventIds = () => useSeamlyStateContext().loadedImageEventIds;\nconst useSkiplink = () => useSeamlyStateContext().skiplinkTargetId;\nconst useSeamlyParticipant = participantId => useSeamlyStateContext().participantInfo.participants[participantId];\nconst useSeamlyServiceInfo = () => useSeamlyStateContext().serviceInfo;\nconst selectLastMessageEventId = (0,reselect__WEBPACK_IMPORTED_MODULE_5__.createSelector)(selectEvents, events => {\n  var _filteredEvents;\n\n  const filteredEvents = events.filter(event => event.type === 'message');\n  return (_filteredEvents = filteredEvents[filteredEvents.length - 1]) === null || _filteredEvents === void 0 ? void 0 : _filteredEvents.payload.id;\n});\nconst useLastMessageEventId = () => (0,domains_redux__WEBPACK_IMPORTED_MODULE_0__.useSelector)(selectLastMessageEventId);\nconst useSeamlyIsHistoryLoaded = () => useSeamlyStateContext().historyLoaded;\nconst useSeamlyCurrentAgent = () => {\n  const {\n    participants,\n    currentAgent\n  } = useSeamlyStateContext().participantInfo;\n  return currentAgent ? participants[currentAgent] : null;\n};\nconst useSeamlyServiceData = key => useSeamlyStateContext().serviceData[key];\nconst useEntryTextLimit = () => {\n  const {\n    entryMeta: {\n      options: {\n        text\n      },\n      optionsOverride: {\n        text: overrideText\n      }\n    }\n  } = useSeamlyStateContext();\n  const {\n    limit\n  } = overrideText || text || {\n    limit: null\n  };\n  return {\n    hasLimit: limit !== null,\n    limit: limit !== null ? limit : null\n  };\n};\nconst useSeamlyLayoutMode = () => {\n  const {\n    layoutMode\n  } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_4__.useConfig)();\n  return {\n    isInline: layoutMode === 'inline',\n    isWindow: layoutMode === 'window',\n    isResolving: !layoutMode\n  };\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/seamly-state-hooks.js?");
 
 /***/ }),
 
@@ -2322,7 +2311,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/core/seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.js\");\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_interrupt__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n/* harmony import */ var domains_app_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/app/hooks */ \"./src/javascripts/domains/app/hooks.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _utility_hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./utility-hooks */ \"./src/javascripts/ui/hooks/utility-hooks.js\");\n/* harmony import */ var _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\n/* harmony import */ var _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _seamly_api_hooks__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./seamly-api-hooks */ \"./src/javascripts/ui/hooks/seamly-api-hooks.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst {\n  ADD_EVENT,\n  SET_INITIAL_STATE\n} = ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.seamlyActions;\n\nconst useSeamlyCommands = () => {\n  const api = (0,_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_13__.useSeamlyApiContext)();\n  const appConfig = (0,domains_config__WEBPACK_IMPORTED_MODULE_6__.useConfig)();\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_11__[\"default\"])();\n  const eventBus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_1__.SeamlyEventBusContext);\n  const hasResponded = (0,domains_app_hooks__WEBPACK_IMPORTED_MODULE_8__.useUserHasResponded)();\n  const hasConversation = (0,_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_13__.useSeamlyHasConversation)();\n  const {\n    visible: visibility,\n    setVisibility\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_9__.useVisibility)();\n  const unreadMessageCount = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_12__.useSeamlyUnreadCount)();\n  const emitEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((...args) => {\n    eventBus.emit(...args);\n  }, [eventBus]);\n  const start = (0,_utility_hooks__WEBPACK_IMPORTED_MODULE_10__.useStableCallback)(() => {\n    api.sendContext(appConfig.context || {});\n    emitEvent('ui.beforeStart', {\n      visibility,\n      hasConversation,\n      hasResponded,\n      unreadMessageCount\n    });\n    api.send('start');\n    emitEvent('ui.start', {\n      visibility,\n      hasConversation,\n      hasResponded,\n      unreadMessageCount\n    });\n  }, [api, appConfig, emitEvent, hasResponded, hasConversation, visibility, unreadMessageCount]);\n  const reset = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(async () => {\n    dispatch(domains_app_actions__WEBPACK_IMPORTED_MODULE_7__.reset());\n  }, [dispatch]);\n  const getMessageBase = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(type => ({\n    type,\n    id: (0,lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n    transactionId: (0,lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n    participant: config__WEBPACK_IMPORTED_MODULE_3__.userParticipantId,\n    fromClient: true,\n    occurredAt: Date.now() * 1000,\n    meta: {}\n  }), []);\n  const getTextMessageBase = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(bodyText => {\n    const base = getMessageBase('text');\n    return _objectSpread(_objectSpread({}, base), {}, {\n      body: {\n        text: bodyText\n      }\n    });\n  }, [getMessageBase]);\n  const sendMessage = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(({\n    body,\n    config = {}\n  }) => {\n    if (body.trim() === '') {\n      return;\n    }\n\n    const message = _objectSpread(_objectSpread({}, getTextMessageBase(body)), config);\n\n    api.send('message', message);\n    emitEvent('message', message);\n    dispatch({\n      type: ADD_EVENT,\n      event: {\n        type: 'message',\n        payload: _objectSpread(_objectSpread({}, message), {}, {\n          optimisticallyInjected: true\n        })\n      }\n    });\n  }, [api, dispatch, emitEvent, getTextMessageBase]);\n  const addMessageBubble = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(text => {\n    dispatch({\n      type: ADD_EVENT,\n      event: {\n        type: 'message',\n        payload: getTextMessageBase(text)\n      }\n    });\n  }, [dispatch, getTextMessageBase]);\n  const addUploadBubble = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((id, transactionId, occurredAt, contentType, filename, filesize, url) => {\n    dispatch({\n      type: ADD_EVENT,\n      event: {\n        type: 'message',\n        payload: {\n          type: 'upload',\n          id,\n          transactionId,\n          participant: config__WEBPACK_IMPORTED_MODULE_3__.userParticipantId,\n          fromClient: true,\n          occurredAt,\n          meta: {},\n          body: {\n            contentType,\n            filename,\n            filesize,\n            url\n          }\n        }\n      }\n    });\n  }, [dispatch]);\n  const addDivider = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(subtype => {\n    const payload = {\n      body: {\n        subtype,\n        type: 'divider'\n      },\n      fromClient: false,\n      fromHistory: true,\n      id: (0,lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n      transactionId: (0,lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n      type: 'divider'\n    };\n    dispatch({\n      type: ADD_EVENT,\n      event: {\n        type: 'info',\n        payload\n      }\n    });\n  }, [dispatch]);\n  const sendInfo = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(({\n    type,\n    subtype\n  }) => {\n    const info = {\n      type,\n      subtype,\n      id: (0,lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n      transactionId: (0,lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n      participant: config__WEBPACK_IMPORTED_MODULE_3__.userParticipantId,\n      fromClient: true\n    };\n    api.send('info', info);\n  }, [api]);\n  const sendAction = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(body => {\n    if (!body) {\n      return;\n    }\n\n    api.send('action', body);\n    const {\n      type\n    } = body;\n\n    if (type !== ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.typing && type !== ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.read) {\n      emitEvent(`action.${type}`, body);\n    }\n  }, [api, emitEvent]);\n  const sendContext = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(context => {\n    api.sendContext(context);\n  }, [api]);\n  const connect = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    if (api.connected) {\n      return Promise.reject(new Error('The API is already connected'));\n    }\n\n    return api.connect().then(initialState => {\n      if (initialState) {\n        dispatch({\n          type: SET_INITIAL_STATE,\n          initialState\n        });\n\n        if (initialState.userResponded) {\n          dispatch(domains_app_actions__WEBPACK_IMPORTED_MODULE_7__.setHasResponded(initialState.userResponded));\n          setVisibility(domains_visibility__WEBPACK_IMPORTED_MODULE_9__.visibilityStates.open);\n        }\n      }\n    }).catch(error => {\n      dispatch(domains_interrupt__WEBPACK_IMPORTED_MODULE_5__.Actions.set(error));\n    });\n  }, [api, dispatch, setVisibility]);\n  return {\n    connect,\n    start,\n    sendMessage,\n    sendInfo,\n    sendAction,\n    sendContext,\n    reset,\n    emitEvent,\n    addMessageBubble,\n    addUploadBubble,\n    addDivider,\n    apiConnected: api.connected,\n    apiConfigReady: api.configReady\n  };\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSeamlyCommands);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-seamly-commands.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ \"preact/hooks\");\n/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/components/core/seamly-api-context */ \"./src/javascripts/ui/components/core/seamly-api-context.js\");\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var config__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! config */ \"./src/javascripts/config.js\");\n/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/utils/seamly-utils */ \"./src/javascripts/ui/utils/seamly-utils.js\");\n/* harmony import */ var domains_interrupt__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! domains/interrupt */ \"./src/javascripts/domains/interrupt/index.js\");\n/* harmony import */ var domains_config__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! domains/config */ \"./src/javascripts/domains/config/index.js\");\n/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! domains/app/actions */ \"./src/javascripts/domains/app/actions.js\");\n/* harmony import */ var domains_app_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! domains/app/hooks */ \"./src/javascripts/domains/app/hooks.js\");\n/* harmony import */ var domains_visibility__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! domains/visibility */ \"./src/javascripts/domains/visibility/index.js\");\n/* harmony import */ var _utility_hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./utility-hooks */ \"./src/javascripts/ui/hooks/utility-hooks.js\");\n/* harmony import */ var _use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./use-seamly-dispatch */ \"./src/javascripts/ui/hooks/use-seamly-dispatch.js\");\n/* harmony import */ var _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./seamly-state-hooks */ \"./src/javascripts/ui/hooks/seamly-state-hooks.js\");\n/* harmony import */ var _seamly_api_hooks__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./seamly-api-hooks */ \"./src/javascripts/ui/hooks/seamly-api-hooks.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst {\n  ADD_EVENT,\n  SET_INITIAL_STATE\n} = ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.seamlyActions;\n\nconst useSeamlyCommands = () => {\n  const api = (0,_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_13__.useSeamlyApiContext)();\n  const appConfig = (0,domains_config__WEBPACK_IMPORTED_MODULE_6__.useConfig)();\n  const dispatch = (0,_use_seamly_dispatch__WEBPACK_IMPORTED_MODULE_11__[\"default\"])();\n  const eventBus = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useContext)(ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_1__.SeamlyEventBusContext);\n  const hasResponded = (0,domains_app_hooks__WEBPACK_IMPORTED_MODULE_8__.useUserHasResponded)();\n  const hasConversation = (0,_seamly_api_hooks__WEBPACK_IMPORTED_MODULE_13__.useSeamlyHasConversation)();\n  const {\n    visible: visibility,\n    setVisibility\n  } = (0,domains_visibility__WEBPACK_IMPORTED_MODULE_9__.useVisibility)();\n  const unreadMessageCount = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_12__.useSeamlyUnreadCount)();\n  const emitEvent = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((...args) => {\n    eventBus.emit(...args);\n  }, [eventBus]);\n  const start = (0,_utility_hooks__WEBPACK_IMPORTED_MODULE_10__.useStableCallback)(() => {\n    api.sendContext(appConfig.context || {});\n    emitEvent('ui.beforeStart', {\n      visibility,\n      hasConversation,\n      hasResponded,\n      unreadMessageCount\n    });\n    api.send('start');\n    emitEvent('ui.start', {\n      visibility,\n      hasConversation,\n      hasResponded,\n      unreadMessageCount\n    });\n  }, [api, appConfig, emitEvent, hasResponded, hasConversation, visibility, unreadMessageCount]);\n  const reset = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(async () => {\n    dispatch(domains_app_actions__WEBPACK_IMPORTED_MODULE_7__.reset());\n  }, [dispatch]);\n  const getMessageBase = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(type => ({\n    type,\n    id: (0,lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n    transactionId: (0,lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n    participant: config__WEBPACK_IMPORTED_MODULE_3__.userParticipantId,\n    fromClient: true,\n    occurredAt: Date.now() * 1000,\n    meta: {}\n  }), []);\n  const getTextMessageBase = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(bodyText => {\n    const base = getMessageBase('text');\n    return _objectSpread(_objectSpread({}, base), {}, {\n      body: {\n        text: bodyText\n      }\n    });\n  }, [getMessageBase]);\n  const sendMessage = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(({\n    body,\n    config = {}\n  }) => {\n    if (body.trim() === '') {\n      return;\n    }\n\n    const message = _objectSpread(_objectSpread({}, getTextMessageBase(body)), config);\n\n    api.send('message', message);\n    emitEvent('message', message);\n    dispatch({\n      type: ADD_EVENT,\n      event: {\n        type: 'message',\n        payload: _objectSpread(_objectSpread({}, message), {}, {\n          optimisticallyInjected: true\n        })\n      }\n    });\n  }, [api, dispatch, emitEvent, getTextMessageBase]);\n  const addMessageBubble = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(text => {\n    dispatch({\n      type: ADD_EVENT,\n      event: {\n        type: 'message',\n        payload: getTextMessageBase(text)\n      }\n    });\n  }, [dispatch, getTextMessageBase]);\n  const addUploadBubble = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)((id, transactionId, occurredAt, contentType, filename, filesize, url) => {\n    dispatch({\n      type: ADD_EVENT,\n      event: {\n        type: 'message',\n        payload: {\n          type: 'upload',\n          id,\n          transactionId,\n          participant: config__WEBPACK_IMPORTED_MODULE_3__.userParticipantId,\n          fromClient: true,\n          occurredAt,\n          meta: {},\n          body: {\n            contentType,\n            filename,\n            filesize,\n            url\n          }\n        }\n      }\n    });\n  }, [dispatch]);\n  const addDivider = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(subtype => {\n    const payload = {\n      body: {\n        subtype,\n        type: 'divider'\n      },\n      fromClient: false,\n      fromHistory: true,\n      id: (0,lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n      transactionId: (0,lib_id__WEBPACK_IMPORTED_MODULE_2__.randomId)(),\n      type: 'divider'\n    };\n    dispatch({\n      type: ADD_EVENT,\n      event: {\n        type: 'info',\n        payload\n      }\n    });\n  }, [dispatch]);\n  const sendAction = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(body => {\n    if (!body) {\n      return;\n    }\n\n    api.send('action', body);\n    const {\n      type\n    } = body;\n\n    if (type !== ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.typing && type !== ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__.actionTypes.read) {\n      emitEvent(`action.${type}`, body);\n    }\n  }, [api, emitEvent]);\n  const sendContext = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(context => {\n    api.sendContext(context);\n  }, [api]);\n  const connect = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {\n    if (api.connected) {\n      return Promise.reject(new Error('The API is already connected'));\n    }\n\n    return api.connect().then(initialState => {\n      if (initialState) {\n        dispatch({\n          type: SET_INITIAL_STATE,\n          initialState\n        });\n\n        if (initialState.userResponded) {\n          dispatch(domains_app_actions__WEBPACK_IMPORTED_MODULE_7__.setHasResponded(initialState.userResponded));\n          setVisibility(domains_visibility__WEBPACK_IMPORTED_MODULE_9__.visibilityStates.open);\n        }\n      }\n    }).catch(error => {\n      dispatch(domains_interrupt__WEBPACK_IMPORTED_MODULE_5__.Actions.set(error));\n    });\n  }, [api, dispatch, setVisibility]);\n  return {\n    connect,\n    start,\n    sendMessage,\n    sendAction,\n    sendContext,\n    reset,\n    emitEvent,\n    addMessageBubble,\n    addUploadBubble,\n    addDivider,\n    apiConnected: api.connected,\n    apiConfigReady: api.configReady\n  };\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSeamlyCommands);\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/hooks/use-seamly-commands.js?");
 
 /***/ }),
 
@@ -2410,7 +2399,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"actionTypes\": () => (/* binding */ actionTypes),\n/* harmony export */   \"ariaLiveLevels\": () => (/* binding */ ariaLiveLevels),\n/* harmony export */   \"cardTypes\": () => (/* binding */ cardTypes),\n/* harmony export */   \"dismissTypes\": () => (/* binding */ dismissTypes),\n/* harmony export */   \"dividerKeys\": () => (/* binding */ dividerKeys),\n/* harmony export */   \"entryTypes\": () => (/* binding */ entryTypes),\n/* harmony export */   \"eventTypes\": () => (/* binding */ eventTypes),\n/* harmony export */   \"featureKeys\": () => (/* binding */ featureKeys),\n/* harmony export */   \"isUnreadMessage\": () => (/* binding */ isUnreadMessage),\n/* harmony export */   \"mergeHistory\": () => (/* binding */ mergeHistory),\n/* harmony export */   \"payloadTypes\": () => (/* binding */ payloadTypes),\n/* harmony export */   \"readStates\": () => (/* binding */ readStates),\n/* harmony export */   \"seamlyActions\": () => (/* binding */ seamlyActions),\n/* harmony export */   \"seamlyStateReducer\": () => (/* binding */ seamlyStateReducer)\n/* harmony export */ });\n/* harmony import */ var _general_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\nconst eventTypes = {\n  info: 'info',\n  message: 'message',\n  participant: 'participant',\n  system: 'system'\n};\nconst payloadTypes = {\n  choicePrompt: 'choice_prompt',\n  text: 'text',\n  image: 'image',\n  video: 'video',\n  participant: 'participant',\n  divider: 'divider',\n  translation: 'translation',\n  message: 'message',\n  countdown: 'countdown',\n  upload: 'upload',\n  cta: 'cta',\n  splash: 'splash'\n};\nconst entryTypes = {\n  text: 'text',\n  upload: 'upload'\n};\nconst readStates = {\n  received: 'received',\n  read: 'read'\n};\nconst actionTypes = {\n  pickChoice: 'pick_choice',\n  navigate: 'navigate',\n  custom: 'custom',\n  typing: 'typing',\n  read: 'read',\n  detachService: 'detach_service',\n  interactivityUpdate: 'interactivity_update',\n  dismiss: 'dismiss',\n  sendTranscript: 'send_transcript',\n  setTopic: 'set_topic',\n  setTranslation: 'set_translation',\n  clickCta: 'click_cta',\n  clickCard: 'click_card'\n};\nconst dismissTypes = {\n  resumeConversationPrompt: 'resume_conversation_prompt'\n};\nconst ariaLiveLevels = {\n  assertive: 'assertive',\n  polite: 'polite'\n};\nconst dividerKeys = {\n  new_topic: 'newTopic',\n  new_translation: 'newTranslation'\n};\nconst featureKeys = {\n  sendTranscript: 'sendTranscript',\n  typingPeekahead: 'typingPeekahead',\n  uploads: 'uploads'\n};\nconst seamlyActions = {\n  ADD_EVENT: 'ADD_EVENT',\n  CLEAR_EVENTS: 'CLEAR_EVENTS',\n  SET_HISTORY: 'SET_HISTORY',\n  SET_EVENTS_READ: 'SET_EVENTS_READ',\n  SET_LOADED_IMAGE_EVENT_IDS: 'SET_LOADED_IMAGE_EVENT_IDS',\n  ACK_EVENT: 'ACK_EVENT',\n  SET_IS_LOADING: 'SET_IS_LOADING',\n  CLEAR_PARTICIPANTS: 'CLEAR_PARTICIPANTS',\n  SET_PARTICIPANT: 'SET_PARTICIPANT',\n  SET_HEADER_TITLE: 'SET_HEADER_TITLE',\n  SET_HEADER_SUB_TITLE: 'SET_HEADER_SUB_TITLE',\n  RESET_HISTORY_LOADED_FLAG: 'RESET_HISTORY_LOADED_FLAG',\n  SET_ACTIVE_SERVICE: 'SET_ACTIVE_SERVICE',\n  INIT_IDLE_DETACH_COUNTDOWN: 'INIT_IDLE_DETACH_COUNTDOWN',\n  DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER: 'DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER',\n  STOP_IDLE_DETACH_COUNTDOWN_COUNTER: 'STOP_IDLE_DETACH_COUNTDOWN_COUNTER',\n  CLEAR_IDLE_DETACH_COUNTDOWN: 'CLEAR_IDLE_DETACH_COUNTDOWN',\n  INIT_RESUME_CONVERSATION_PROMPT: 'INIT_RESUME_CONVERSATION_PROMPT',\n  CLEAR_RESUME_CONVERSATION_PROMPT: 'CLEAR_RESUME_CONVERSATION_PROMPT',\n  SET_SERVICE_DATA_ITEM: 'SET_SERVICE_DATA_ITEM',\n  SET_FEATURES: 'SET_FEATURES',\n  SET_FEATURE_ENABLED_STATE: 'SET_FEATURE_ENABLED_STATE',\n  CLEAR_FEATURES: 'CLEAR_FEATURES',\n  SET_INITIAL_STATE: 'SET_INITIAL_STATE',\n  SET_USER_SELECTED_OPTIONS: 'SET_USER_SELECTED_OPTIONS',\n  SET_USER_SELECTED_OPTION: 'SET_USER_SELECTED_OPTION',\n  SHOW_OPTION: 'SHOW_OPTION',\n  HIDE_OPTION: 'HIDE_OPTION',\n  SET_SERVICE_ENTRY_METADATA: 'SET_SERVICE_ENTRY_METADATA',\n  SET_BLOCK_AUTO_ENTRY_SWITCH: 'SET_BLOCK_AUTO_ENTRY_SWITCH',\n  SET_ACTIVE_ENTRY_TYPE: 'SET_ACTIVE_ENTRY_TYPE',\n  SET_USER_ENTRY_TYPE: 'SET_USER_ENTRY_TYPE',\n  REGISTER_UPLOAD: 'REGISTER_UPLOAD',\n  SET_UPLOAD_PROGRESS: 'SET_UPLOAD_PROGRESS',\n  SET_UPLOAD_COMPLETE: 'SET_UPLOAD_COMPLETE',\n  SET_UPLOAD_ERROR: 'SET_UPLOAD_ERROR',\n  CLEAR_UPLOAD: 'CLEAR_UPLOAD',\n  CLEAR_ALL_UPLOADS: 'CLEAR_ALL_UPLOADS',\n  SET_SEAMLY_CONTAINER_ELEMENT: 'SET_SEAMLY_CONTAINER_ELEMENT'\n};\nconst cardTypes = {\n  ask: 'ask',\n  navigate: 'navigate',\n  topic: 'topic'\n};\nconst {\n  ADD_EVENT,\n  CLEAR_EVENTS,\n  SET_HISTORY,\n  SET_EVENTS_READ,\n  SET_LOADED_IMAGE_EVENT_IDS,\n  ACK_EVENT,\n  SET_IS_LOADING,\n  CLEAR_PARTICIPANTS,\n  SET_PARTICIPANT,\n  SET_HEADER_TITLE,\n  SET_HEADER_SUB_TITLE,\n  RESET_HISTORY_LOADED_FLAG,\n  SET_ACTIVE_SERVICE,\n  INIT_IDLE_DETACH_COUNTDOWN,\n  DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER,\n  STOP_IDLE_DETACH_COUNTDOWN_COUNTER,\n  CLEAR_IDLE_DETACH_COUNTDOWN,\n  INIT_RESUME_CONVERSATION_PROMPT,\n  CLEAR_RESUME_CONVERSATION_PROMPT,\n  SET_SERVICE_DATA_ITEM,\n  SET_FEATURES,\n  SET_FEATURE_ENABLED_STATE,\n  CLEAR_FEATURES,\n  SET_INITIAL_STATE,\n  SET_USER_SELECTED_OPTION,\n  SET_USER_SELECTED_OPTIONS,\n  SHOW_OPTION,\n  HIDE_OPTION,\n  SET_BLOCK_AUTO_ENTRY_SWITCH,\n  SET_USER_ENTRY_TYPE,\n  SET_ACTIVE_ENTRY_TYPE,\n  SET_SERVICE_ENTRY_METADATA,\n  REGISTER_UPLOAD,\n  SET_UPLOAD_PROGRESS,\n  SET_UPLOAD_COMPLETE,\n  SET_UPLOAD_ERROR,\n  CLEAR_UPLOAD,\n  CLEAR_ALL_UPLOADS,\n  SET_SEAMLY_CONTAINER_ELEMENT\n} = seamlyActions;\nconst isUnreadMessage = ({\n  type,\n  payload\n}) => type === eventTypes.message && !payload.fromClient || type === eventTypes.info && payload.type === payloadTypes.text;\n\nconst orderHistory = events => {\n  return events.sort(({\n    payload: {\n      occurredAt: occurredAtA\n    }\n  }, {\n    payload: {\n      occurredAt: occurredAtB\n    }\n  }) => occurredAtA - occurredAtB);\n};\n\nconst mergeHistory = (stateEvents, historyEvents) => {\n  const newStateEvents = stateEvents.filter(stateEvent => // Deduplicate the event streams, giving events in historyEvents\n  // precedence so the server is able to push changes to events.\n  !historyEvents.some(historyEvent => historyEvent.payload.id === stateEvent.payload.id));\n  const newHistoryEvents = historyEvents.filter(historyEvent => // Remove all non displayable participant messages\n  !(historyEvent.type === 'participant' && !historyEvent.payload.participant.introduction)) // Reverse is done here because the server sends the history in the order\n  // newest to oldest. In the case of exactly the same occurredAt timestamps\n  // these messages will be shown in the wrong order if not reversed. For\n  // the normal merging logic there is no added effect.\n  .reverse();\n  return orderHistory([...newHistoryEvents, ...newStateEvents]);\n};\n\nconst participantReducer = (state, action) => {\n  switch (action.type) {\n    case CLEAR_PARTICIPANTS:\n      return {\n        participants: {},\n        currentAgent: ''\n      };\n\n    case SET_PARTICIPANT:\n      // TODO: a) Styleguide only! b) Should be removed after styleguide overhaul.\n      if (!state) {\n        return {\n          participants: {},\n          currentAgent: ''\n        };\n      }\n\n      const {\n        participants\n      } = state || {\n        participants: {}\n      };\n      const {\n        id,\n        avatar,\n        name,\n        introduction\n      } = action.participant;\n      const oldParticipant = participants[id];\n\n      const newParticipants = _objectSpread(_objectSpread({}, participants), {}, {\n        [id]: oldParticipant ? _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, oldParticipant), avatar ? {\n          avatar\n        } : {}), name ? {\n          name\n        } : {}), introduction ? {\n          introduction\n        } : {}) : action.participant\n      });\n\n      return _objectSpread(_objectSpread({}, state), {}, {\n        participants: newParticipants,\n        currentAgent: state.currentAgent !== id && !action.fromClient ? id : state.currentAgent\n      });\n\n    default:\n      return state;\n  }\n};\n\nconst headerTitlesReducer = (state, action) => {\n  switch (action.type) {\n    case SET_HEADER_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        title: action.title\n      });\n\n    case SET_HEADER_SUB_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        subTitle: action.title\n      });\n\n    default:\n      return state;\n  }\n};\n\nconst calculateNewEntryMeta = (entryMeta, payload) => {\n  const {\n    entry\n  } = payload;\n  const {\n    blockAutoEntrySwitch\n  } = entryMeta;\n\n  if (!entry) {\n    return _objectSpread(_objectSpread({}, entryMeta), {}, {\n      optionsOverride: {}\n    });\n  }\n\n  const {\n    type,\n    options\n  } = entry;\n  let newActive = entryMeta.active;\n\n  if (!blockAutoEntrySwitch && type !== entryMeta.userSelected) {\n    newActive = type;\n  }\n\n  return _objectSpread(_objectSpread({}, entryMeta), {}, {\n    active: newActive,\n    optionsOverride: _objectSpread(_objectSpread({}, entryMeta.optionsOverride), {}, {\n      [type]: options || {}\n    })\n  });\n};\n\nconst seamlyStateReducer = (state, action) => {\n  switch (action.type) {\n    case ADD_EVENT:\n      const {\n        type: eventType,\n        payload\n      } = action.event;\n      const accountHasUploads = state.options.features.hasOwnProperty(featureKeys.uploads);\n      const newEntryMeta = calculateNewEntryMeta(state.entryMeta, payload);\n\n      let newOptions = _objectSpread({}, state.options); // This enabled override of the service enabled value for uploads.\n      // If a message is sent with entry of type upload it will temporarily\n      // override service value and enable uploads.\n\n\n      if (accountHasUploads && (eventType === eventTypes.message || eventType === eventTypes.participant) && !payload.fromClient) {\n        const {\n          type: entryType\n        } = payload.entry || {};\n        newOptions = _objectSpread(_objectSpread({}, newOptions), {}, {\n          features: _objectSpread(_objectSpread({}, newOptions.features), {}, {\n            uploads: _objectSpread(_objectSpread({}, newOptions.features.uploads), {}, {\n              enabledFromEntry: entryType === entryTypes.upload\n            })\n          })\n        });\n      }\n\n      const incrementUnread = isUnreadMessage(action.event); // We check for duplicated and ignore them as in some error of the websocket\n      // a duplicate join can be active for a while until the server connection\n      // times out.\n\n      const eventExists = state.events.find(e => e.payload.id === payload.id);\n\n      if (eventExists) {\n        return state;\n      }\n\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: !accountHasUploads && newEntryMeta.active === entryTypes.upload ? _objectSpread({}, state.entryMeta) : newEntryMeta,\n        options: newOptions,\n        unreadEvents: incrementUnread ? state.unreadEvents + 1 : state.unreadEvents,\n        events: [...state.events, _objectSpread(_objectSpread({}, action.event), {}, {\n          // The payload spread should be done after adding the message\n          // status to enable overriding the status when setting\n          // event optimistically.\n          payload: _objectSpread(_objectSpread({}, incrementUnread && {\n            messageStatus: payload.fromClient ? readStates.read : readStates.received\n          }), payload)\n        })]\n      });\n\n    case ACK_EVENT:\n      // If any ACKs are sent without transactionID the conversation crashes.\n      // Ensure that this edge case is handled gracefully.\n      if (!action.event.payload.transactionId) {\n        console.warn('ACK received without transaction ID.');\n        return state;\n      }\n\n      const matchedEvent = state.events.find(m => m.payload.transactionId === action.event.payload.transactionId);\n      const {\n        id,\n        occurredAt\n      } = action.event.payload;\n      return matchedEvent ? _objectSpread(_objectSpread({}, state), {}, {\n        events: orderHistory(state.events.map(m => m.payload.id === matchedEvent.payload.id ? _objectSpread(_objectSpread({}, m), {}, {\n          payload: _objectSpread(_objectSpread({}, m.payload), {}, {\n            id,\n            occurredAt\n          })\n        }) : m))\n      }) : state;\n\n    case CLEAR_EVENTS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: 0,\n        loadedImageEventIds: [],\n        events: []\n      });\n\n    case SET_EVENTS_READ:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: 0,\n        events: state.events.map(event => {\n          if (action.ids.indexOf(event.payload.id) !== -1) {\n            return _objectSpread(_objectSpread({}, event), {}, {\n              payload: _objectSpread(_objectSpread({}, event.payload), event.payload.messageStatus === readStates.received && {\n                messageStatus: readStates.read\n              })\n            });\n          }\n\n          return event;\n        })\n      });\n\n    case SET_LOADED_IMAGE_EVENT_IDS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        loadedImageEventIds: [...state.loadedImageEventIds, action.eventId]\n      });\n\n    case SET_HISTORY:\n      const {\n        events: history,\n        participants,\n        activeServiceSessionId,\n        activeServiceSettings = {},\n        serviceData,\n        resumeConversationPrompt\n      } = action.history;\n      const events = mergeHistory(state.events, history);\n\n      const mergedParticipants = _objectSpread(_objectSpread({}, state.participantInfo.participants), participants);\n\n      const lastParticipantEvent = events.slice().reverse().find(m => (m.type === 'message' || m.type === 'participant') && !m.payload.fromClient);\n      let lastParticipantId = null;\n\n      if (lastParticipantEvent) {\n        if (lastParticipantEvent.type === 'message') {\n          lastParticipantId = lastParticipantEvent.payload.participant;\n        }\n\n        if (lastParticipantEvent.type === 'participant') {\n          lastParticipantId = lastParticipantEvent.payload.participant.id;\n        }\n      }\n\n      const {\n        entry,\n        uploads\n      } = activeServiceSettings;\n      const historyNewEntryMeta = calculateNewEntryMeta(_objectSpread(_objectSpread(_objectSpread({}, state.entryMeta), entry), {}, {\n        active: entry.default || payloadTypes.text,\n        options: _objectSpread({}, entry && entry.options ? entry.options : {})\n      }), events[events.length - 1].payload);\n\n      let newFeatures = _objectSpread({}, state.options.features);\n\n      const newFeaturesHasUpload = newFeatures.hasOwnProperty(featureKeys.uploads); // Only set uploads if it was initialised by the account config.\n\n      if (newFeaturesHasUpload) {\n        const {\n          payload: lastParticipantEventPayload\n        } = lastParticipantEvent;\n        const {\n          type: entryType\n        } = lastParticipantEventPayload.entry || {};\n        newFeatures = _objectSpread(_objectSpread({}, newFeatures), {}, {\n          uploads: {\n            enabled: !!(uploads && uploads.enabled),\n            enabledFromEntry: entryType === entryTypes.upload\n          }\n        });\n      }\n\n      const returnState = _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: events.filter(event => event.type === 'message' && event.payload.messageStatus === readStates.received).length,\n        events: events.filter(e => e.type !== 'participant' || !!e.payload.participant.introduction),\n        participantInfo: _objectSpread(_objectSpread(_objectSpread({}, state.participantInfo), lastParticipantId ? participantReducer(state.participantInfo, {\n          type: SET_PARTICIPANT,\n          participant: mergedParticipants[lastParticipantId]\n        }) : {}), {}, {\n          participants: mergedParticipants\n        }),\n        historyLoaded: true,\n        serviceInfo: _objectSpread(_objectSpread({}, state.serviceInfo), {}, {\n          activeServiceSessionId\n        }),\n        serviceData: serviceData || {},\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: newFeatures\n        }),\n        entryMeta: !newFeaturesHasUpload && historyNewEntryMeta.active === entryTypes.upload ? _objectSpread({}, state.entryMeta) : historyNewEntryMeta,\n        resumeConversationPrompt: resumeConversationPrompt || false\n      });\n\n      if (lastParticipantId) {\n        returnState.headerTitles = headerTitlesReducer(state.headerTitles, {\n          type: SET_HEADER_SUB_TITLE,\n          title: mergedParticipants[lastParticipantId].name\n        });\n      }\n\n      return returnState;\n\n    case RESET_HISTORY_LOADED_FLAG:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        historyLoaded: false\n      });\n\n    case SET_IS_LOADING:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        isLoading: action.isLoading\n      });\n\n    case INIT_IDLE_DETACH_COUNTDOWN:\n      const {\n        delaySeconds,\n        delayTime\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: {\n          hasCountdown: true,\n          isActive: true,\n          wasStopped: false,\n          count: delaySeconds,\n          remaining: delaySeconds,\n          timer: delayTime\n        }\n      });\n\n    case DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER:\n      const {\n        idleDetachCountdown\n      } = state;\n      const {\n        remaining: prevRemaining\n      } = idleDetachCountdown;\n      const remaining = prevRemaining - 1;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: _objectSpread(_objectSpread({}, state.idleDetachCountdown), {}, {\n          remaining,\n          timer: (0,_general_utils__WEBPACK_IMPORTED_MODULE_0__.getTimeFromSeconds)(remaining)\n        })\n      });\n\n    case STOP_IDLE_DETACH_COUNTDOWN_COUNTER:\n      {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          idleDetachCountdown: _objectSpread(_objectSpread({}, state.idleDetachCountdown), {}, {\n            isActive: false,\n            wasStopped: true\n          })\n        });\n      }\n\n    case CLEAR_IDLE_DETACH_COUNTDOWN:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: {\n          hasCountdown: false,\n          isActive: false\n        }\n      });\n\n    case INIT_RESUME_CONVERSATION_PROMPT:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        resumeConversationPrompt: true\n      });\n\n    case CLEAR_RESUME_CONVERSATION_PROMPT:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        resumeConversationPrompt: false\n      });\n\n    case SET_PARTICIPANT:\n    case CLEAR_PARTICIPANTS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        participantInfo: participantReducer(state.participantInfo, action)\n      });\n\n    case SET_ACTIVE_SERVICE:\n      if (state.serviceInfo.activeServiceSessionId !== action.activeServiceSessionId) {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          serviceInfo: _objectSpread(_objectSpread({}, state.serviceInfo), {}, {\n            activeServiceSessionId: action.activeServiceSessionId\n          })\n        });\n      }\n\n      return state;\n\n    case SET_HEADER_TITLE:\n    case SET_HEADER_SUB_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        headerTitles: headerTitlesReducer(state.headerTitles, action)\n      });\n\n    case SET_INITIAL_STATE:\n      const {\n        initialState\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        initialState,\n        unreadEvents: initialState.unreadMessageCount\n      });\n\n    case SET_SERVICE_DATA_ITEM:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        serviceData: _objectSpread(_objectSpread({}, state.serviceData), {}, {\n          [action.payload.type]: action.payload\n        })\n      });\n\n    case SET_FEATURES:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: action.features\n        })\n      });\n\n    case SET_FEATURE_ENABLED_STATE:\n      return state.options.features.hasOwnProperty(action.key) ? _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: _objectSpread(_objectSpread({}, state.options.features), {}, {\n            [action.key]: _objectSpread(_objectSpread({}, state.options.features[action.key] || {}), {}, {\n              enabled: action.enabled\n            })\n          })\n        })\n      }) : state;\n\n    case CLEAR_FEATURES:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: {}\n        })\n      });\n\n    case SHOW_OPTION:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          panelActive: true,\n          optionActive: action.optionName\n        })\n      });\n\n    case HIDE_OPTION:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          panelActive: false,\n          optionActive: ''\n        })\n      });\n\n    case SET_USER_SELECTED_OPTIONS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          userSelectedOptions: action.options\n        })\n      });\n\n    case SET_USER_SELECTED_OPTION:\n      const {\n        option,\n        value\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          userSelectedOptions: _objectSpread(_objectSpread({}, state.options.userSelectedOptions), {}, {\n            [option]: value\n          })\n        })\n      });\n\n    case SET_BLOCK_AUTO_ENTRY_SWITCH:\n      const {\n        value: blockAutoEntrySwitch\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          blockAutoEntrySwitch\n        })\n      });\n\n    case SET_SERVICE_ENTRY_METADATA:\n      const {\n        entryMeta\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread(_objectSpread({}, state.entryMeta), entryMeta), {}, {\n          active: entryMeta.default,\n          options: _objectSpread({}, entryMeta.options || {}),\n          overrideOptions: {}\n        })\n      });\n\n    case SET_ACTIVE_ENTRY_TYPE:\n      const {\n        entryType: active\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          active\n        })\n      });\n\n    case SET_USER_ENTRY_TYPE:\n      const {\n        entryType: userSelected\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          userSelected\n        })\n      });\n\n    case REGISTER_UPLOAD:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: [...state.currentUploads, {\n          id: action.fileId,\n          name: action.fileName,\n          progress: 1,\n          uploading: true,\n          complete: false,\n          error: '',\n          uploadHandle: action.uploadHandle\n        }]\n      });\n\n    case SET_UPLOAD_PROGRESS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              progress: action.progress,\n              uploading: action.progress !== 100,\n              uploadHandle: action.progress === 100 ? null : fileUpload.uploadHandle\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case SET_UPLOAD_ERROR:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              error: action.errorText,\n              progress: 0,\n              uploading: false,\n              uploadHandle: null\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case SET_UPLOAD_COMPLETE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              complete: true\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case CLEAR_UPLOAD:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.filter(fileUpload => fileUpload.id !== action.fileId)\n      });\n\n    case CLEAR_ALL_UPLOADS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: []\n      });\n\n    case SET_SEAMLY_CONTAINER_ELEMENT:\n      {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          seamlyContainerElement: action.element\n        });\n      }\n\n    default:\n      return state;\n  }\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/utils/seamly-utils.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"actionTypes\": () => (/* binding */ actionTypes),\n/* harmony export */   \"ariaLiveLevels\": () => (/* binding */ ariaLiveLevels),\n/* harmony export */   \"cardTypes\": () => (/* binding */ cardTypes),\n/* harmony export */   \"dismissTypes\": () => (/* binding */ dismissTypes),\n/* harmony export */   \"dividerKeys\": () => (/* binding */ dividerKeys),\n/* harmony export */   \"entryTypes\": () => (/* binding */ entryTypes),\n/* harmony export */   \"eventTypes\": () => (/* binding */ eventTypes),\n/* harmony export */   \"featureKeys\": () => (/* binding */ featureKeys),\n/* harmony export */   \"isUnreadMessage\": () => (/* binding */ isUnreadMessage),\n/* harmony export */   \"mergeHistory\": () => (/* binding */ mergeHistory),\n/* harmony export */   \"payloadTypes\": () => (/* binding */ payloadTypes),\n/* harmony export */   \"readStates\": () => (/* binding */ readStates),\n/* harmony export */   \"seamlyActions\": () => (/* binding */ seamlyActions),\n/* harmony export */   \"seamlyStateReducer\": () => (/* binding */ seamlyStateReducer)\n/* harmony export */ });\n/* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/id */ \"./src/javascripts/lib/id.js\");\n/* harmony import */ var _general_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./general-utils */ \"./src/javascripts/ui/utils/general-utils.js\");\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n\n\nconst eventTypes = {\n  info: 'info',\n  message: 'message',\n  participant: 'participant',\n  system: 'system'\n};\nconst payloadTypes = {\n  choicePrompt: 'choice_prompt',\n  text: 'text',\n  image: 'image',\n  video: 'video',\n  participant: 'participant',\n  divider: 'divider',\n  translation: 'translation',\n  message: 'message',\n  countdown: 'countdown',\n  upload: 'upload',\n  cta: 'cta',\n  splash: 'splash'\n};\nconst entryTypes = {\n  text: 'text',\n  upload: 'upload'\n};\nconst readStates = {\n  received: 'received',\n  read: 'read'\n};\nconst actionTypes = {\n  pickChoice: 'pick_choice',\n  navigate: 'navigate',\n  custom: 'custom',\n  typing: 'typing',\n  read: 'read',\n  detachService: 'detach_service',\n  interactivityUpdate: 'interactivity_update',\n  dismiss: 'dismiss',\n  sendTranscript: 'send_transcript',\n  setTopic: 'set_topic',\n  setTranslation: 'set_translation',\n  clickCta: 'click_cta',\n  clickCard: 'click_card'\n};\nconst dismissTypes = {\n  resumeConversationPrompt: 'resume_conversation_prompt'\n};\nconst ariaLiveLevels = {\n  assertive: 'assertive',\n  polite: 'polite'\n};\nconst dividerKeys = {\n  new_topic: 'newTopic',\n  new_translation: 'newTranslation'\n};\nconst featureKeys = {\n  sendTranscript: 'sendTranscript',\n  typingPeekahead: 'typingPeekahead',\n  uploads: 'uploads'\n};\nconst seamlyActions = {\n  ADD_EVENT: 'ADD_EVENT',\n  CLEAR_EVENTS: 'CLEAR_EVENTS',\n  SET_HISTORY: 'SET_HISTORY',\n  SET_EVENTS_READ: 'SET_EVENTS_READ',\n  SET_LOADED_IMAGE_EVENT_IDS: 'SET_LOADED_IMAGE_EVENT_IDS',\n  ACK_EVENT: 'ACK_EVENT',\n  SET_IS_LOADING: 'SET_IS_LOADING',\n  CLEAR_PARTICIPANTS: 'CLEAR_PARTICIPANTS',\n  SET_PARTICIPANT: 'SET_PARTICIPANT',\n  SET_HEADER_TITLE: 'SET_HEADER_TITLE',\n  SET_HEADER_SUB_TITLE: 'SET_HEADER_SUB_TITLE',\n  RESET_HISTORY_LOADED_FLAG: 'RESET_HISTORY_LOADED_FLAG',\n  SET_ACTIVE_SERVICE: 'SET_ACTIVE_SERVICE',\n  INIT_IDLE_DETACH_COUNTDOWN: 'INIT_IDLE_DETACH_COUNTDOWN',\n  DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER: 'DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER',\n  STOP_IDLE_DETACH_COUNTDOWN_COUNTER: 'STOP_IDLE_DETACH_COUNTDOWN_COUNTER',\n  CLEAR_IDLE_DETACH_COUNTDOWN: 'CLEAR_IDLE_DETACH_COUNTDOWN',\n  INIT_RESUME_CONVERSATION_PROMPT: 'INIT_RESUME_CONVERSATION_PROMPT',\n  CLEAR_RESUME_CONVERSATION_PROMPT: 'CLEAR_RESUME_CONVERSATION_PROMPT',\n  SET_SERVICE_DATA_ITEM: 'SET_SERVICE_DATA_ITEM',\n  SET_FEATURES: 'SET_FEATURES',\n  SET_FEATURE_ENABLED_STATE: 'SET_FEATURE_ENABLED_STATE',\n  CLEAR_FEATURES: 'CLEAR_FEATURES',\n  SET_INITIAL_STATE: 'SET_INITIAL_STATE',\n  SET_USER_SELECTED_OPTIONS: 'SET_USER_SELECTED_OPTIONS',\n  SET_USER_SELECTED_OPTION: 'SET_USER_SELECTED_OPTION',\n  SHOW_OPTION: 'SHOW_OPTION',\n  HIDE_OPTION: 'HIDE_OPTION',\n  SET_SERVICE_ENTRY_METADATA: 'SET_SERVICE_ENTRY_METADATA',\n  SET_BLOCK_AUTO_ENTRY_SWITCH: 'SET_BLOCK_AUTO_ENTRY_SWITCH',\n  SET_ACTIVE_ENTRY_TYPE: 'SET_ACTIVE_ENTRY_TYPE',\n  SET_USER_ENTRY_TYPE: 'SET_USER_ENTRY_TYPE',\n  REGISTER_UPLOAD: 'REGISTER_UPLOAD',\n  SET_UPLOAD_PROGRESS: 'SET_UPLOAD_PROGRESS',\n  SET_UPLOAD_COMPLETE: 'SET_UPLOAD_COMPLETE',\n  SET_UPLOAD_ERROR: 'SET_UPLOAD_ERROR',\n  CLEAR_UPLOAD: 'CLEAR_UPLOAD',\n  CLEAR_ALL_UPLOADS: 'CLEAR_ALL_UPLOADS',\n  SET_SEAMLY_CONTAINER_ELEMENT: 'SET_SEAMLY_CONTAINER_ELEMENT'\n};\nconst cardTypes = {\n  ask: 'ask',\n  navigate: 'navigate',\n  topic: 'topic'\n};\nconst {\n  ADD_EVENT,\n  CLEAR_EVENTS,\n  SET_HISTORY,\n  SET_EVENTS_READ,\n  SET_LOADED_IMAGE_EVENT_IDS,\n  ACK_EVENT,\n  SET_IS_LOADING,\n  CLEAR_PARTICIPANTS,\n  SET_PARTICIPANT,\n  SET_HEADER_TITLE,\n  SET_HEADER_SUB_TITLE,\n  RESET_HISTORY_LOADED_FLAG,\n  SET_ACTIVE_SERVICE,\n  INIT_IDLE_DETACH_COUNTDOWN,\n  DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER,\n  STOP_IDLE_DETACH_COUNTDOWN_COUNTER,\n  CLEAR_IDLE_DETACH_COUNTDOWN,\n  INIT_RESUME_CONVERSATION_PROMPT,\n  CLEAR_RESUME_CONVERSATION_PROMPT,\n  SET_SERVICE_DATA_ITEM,\n  SET_FEATURES,\n  SET_FEATURE_ENABLED_STATE,\n  CLEAR_FEATURES,\n  SET_INITIAL_STATE,\n  SET_USER_SELECTED_OPTION,\n  SET_USER_SELECTED_OPTIONS,\n  SHOW_OPTION,\n  HIDE_OPTION,\n  SET_BLOCK_AUTO_ENTRY_SWITCH,\n  SET_USER_ENTRY_TYPE,\n  SET_ACTIVE_ENTRY_TYPE,\n  SET_SERVICE_ENTRY_METADATA,\n  REGISTER_UPLOAD,\n  SET_UPLOAD_PROGRESS,\n  SET_UPLOAD_COMPLETE,\n  SET_UPLOAD_ERROR,\n  CLEAR_UPLOAD,\n  CLEAR_ALL_UPLOADS,\n  SET_SEAMLY_CONTAINER_ELEMENT\n} = seamlyActions;\nconst isUnreadMessage = ({\n  type,\n  payload\n}) => type === eventTypes.message && !payload.fromClient || type === eventTypes.info && payload.type === payloadTypes.text;\n\nconst orderHistory = events => {\n  return events.sort(({\n    payload: {\n      occurredAt: occurredAtA\n    }\n  }, {\n    payload: {\n      occurredAt: occurredAtB\n    }\n  }) => occurredAtA - occurredAtB);\n};\n\nconst mergeHistory = (stateEvents, historyEvents) => {\n  const newStateEvents = stateEvents.filter(stateEvent => // Deduplicate the event streams, giving events in historyEvents\n  // precedence so the server is able to push changes to events.\n  !historyEvents.some(historyEvent => historyEvent.payload.id === stateEvent.payload.id));\n  const newHistoryEvents = historyEvents.filter(historyEvent => // Remove all non displayable participant messages\n  !(historyEvent.type === 'participant' && !historyEvent.payload.participant.introduction)) // Reverse is done here because the server sends the history in the order\n  // newest to oldest. In the case of exactly the same occurredAt timestamps\n  // these messages will be shown in the wrong order if not reversed. For\n  // the normal merging logic there is no added effect.\n  .reverse();\n  return orderHistory([...newHistoryEvents, ...newStateEvents]);\n};\n\nconst participantReducer = (state, action) => {\n  switch (action.type) {\n    case CLEAR_PARTICIPANTS:\n      return {\n        participants: {},\n        currentAgent: ''\n      };\n\n    case SET_PARTICIPANT:\n      // TODO: a) Styleguide only! b) Should be removed after styleguide overhaul.\n      if (!state) {\n        return {\n          participants: {},\n          currentAgent: ''\n        };\n      }\n\n      const {\n        participants\n      } = state || {\n        participants: {}\n      };\n      const {\n        id,\n        avatar,\n        name,\n        introduction\n      } = action.participant;\n      const oldParticipant = participants[id];\n\n      const newParticipants = _objectSpread(_objectSpread({}, participants), {}, {\n        [id]: oldParticipant ? _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, oldParticipant), avatar ? {\n          avatar\n        } : {}), name ? {\n          name\n        } : {}), introduction ? {\n          introduction\n        } : {}) : action.participant\n      });\n\n      return _objectSpread(_objectSpread({}, state), {}, {\n        participants: newParticipants,\n        currentAgent: state.currentAgent !== id && !action.fromClient ? id : state.currentAgent\n      });\n\n    default:\n      return state;\n  }\n};\n\nconst headerTitlesReducer = (state, action) => {\n  switch (action.type) {\n    case SET_HEADER_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        title: action.title\n      });\n\n    case SET_HEADER_SUB_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        subTitle: action.title\n      });\n\n    default:\n      return state;\n  }\n};\n\nconst calculateNewEntryMeta = (entryMeta, payload) => {\n  const {\n    entry\n  } = payload;\n  const {\n    blockAutoEntrySwitch\n  } = entryMeta;\n\n  if (!entry) {\n    return _objectSpread(_objectSpread({}, entryMeta), {}, {\n      optionsOverride: {}\n    });\n  }\n\n  const {\n    type,\n    options\n  } = entry;\n  let newActive = entryMeta.active;\n\n  if (!blockAutoEntrySwitch && type !== entryMeta.userSelected) {\n    newActive = type;\n  }\n\n  return _objectSpread(_objectSpread({}, entryMeta), {}, {\n    active: newActive,\n    optionsOverride: _objectSpread(_objectSpread({}, entryMeta.optionsOverride), {}, {\n      [type]: options || {}\n    })\n  });\n};\n\nconst seamlyStateReducer = (state, action) => {\n  switch (action.type) {\n    case ADD_EVENT:\n      const {\n        type: eventType,\n        payload\n      } = action.event;\n      const accountHasUploads = state.options.features.hasOwnProperty(featureKeys.uploads);\n      const newEntryMeta = calculateNewEntryMeta(state.entryMeta, payload);\n\n      let newOptions = _objectSpread({}, state.options); // This enabled override of the service enabled value for uploads.\n      // If a message is sent with entry of type upload it will temporarily\n      // override service value and enable uploads.\n\n\n      if (accountHasUploads && (eventType === eventTypes.message || eventType === eventTypes.participant) && !payload.fromClient) {\n        var _payload$entry;\n\n        const entryType = payload === null || payload === void 0 ? void 0 : (_payload$entry = payload.entry) === null || _payload$entry === void 0 ? void 0 : _payload$entry.type;\n        newOptions = _objectSpread(_objectSpread({}, newOptions), {}, {\n          features: _objectSpread(_objectSpread({}, newOptions.features), {}, {\n            uploads: _objectSpread(_objectSpread({}, newOptions.features.uploads), {}, {\n              enabledFromEntry: entryType === entryTypes.upload\n            })\n          })\n        });\n      }\n\n      const incrementUnread = isUnreadMessage(action.event); // We check for duplicated and ignore them as in some error of the websocket\n      // a duplicate join can be active for a while until the server connection\n      // times out.\n\n      const eventExists = state.events.find(e => e.payload.id === payload.id);\n\n      if (eventExists) {\n        return state;\n      }\n\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: !accountHasUploads && newEntryMeta.active === entryTypes.upload ? _objectSpread({}, state.entryMeta) : newEntryMeta,\n        options: newOptions,\n        unreadEvents: incrementUnread ? state.unreadEvents + 1 : state.unreadEvents,\n        events: [...state.events, _objectSpread(_objectSpread({}, action.event), {}, {\n          // The payload spread should be done after adding the message\n          // status to enable overriding the status when setting\n          // event optimistically.\n          payload: _objectSpread(_objectSpread({}, incrementUnread && {\n            messageStatus: payload.fromClient ? readStates.read : readStates.received\n          }), {}, {\n            // We add a randomid to use as key for mapping of Events to avoid rerendering\n            key: (0,lib_id__WEBPACK_IMPORTED_MODULE_0__.randomId)()\n          }, payload)\n        })]\n      });\n\n    case ACK_EVENT:\n      // If any ACKs are sent without transactionID the conversation crashes.\n      // Ensure that this edge case is handled gracefully.\n      if (!action.event.payload.transactionId) {\n        console.warn('ACK received without transaction ID.');\n        return state;\n      }\n\n      const matchedEvent = state.events.find(m => m.payload.transactionId === action.event.payload.transactionId);\n      const {\n        id,\n        occurredAt\n      } = action.event.payload;\n      return matchedEvent ? _objectSpread(_objectSpread({}, state), {}, {\n        events: orderHistory(state.events.map(m => m.payload.id === matchedEvent.payload.id ? _objectSpread(_objectSpread({}, m), {}, {\n          payload: _objectSpread(_objectSpread({}, m.payload), {}, {\n            id,\n            occurredAt\n          })\n        }) : m))\n      }) : state;\n\n    case CLEAR_EVENTS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: 0,\n        loadedImageEventIds: [],\n        events: []\n      });\n\n    case SET_EVENTS_READ:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: 0,\n        events: state.events.map(event => {\n          if (action.ids.indexOf(event.payload.id) !== -1) {\n            return _objectSpread(_objectSpread({}, event), {}, {\n              payload: _objectSpread(_objectSpread({}, event.payload), event.payload.messageStatus === readStates.received && {\n                messageStatus: readStates.read\n              })\n            });\n          }\n\n          return event;\n        })\n      });\n\n    case SET_LOADED_IMAGE_EVENT_IDS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        loadedImageEventIds: [...state.loadedImageEventIds, action.eventId]\n      });\n\n    case SET_HISTORY:\n      const {\n        events: history,\n        participants,\n        activeServiceSessionId,\n        activeServiceSettings = {},\n        serviceData,\n        resumeConversationPrompt\n      } = action.history;\n      const events = mergeHistory(state.events, history);\n\n      const mergedParticipants = _objectSpread(_objectSpread({}, state.participantInfo.participants), participants);\n\n      const lastParticipantEvent = events.slice().reverse().find(m => (m.type === 'message' || m.type === 'participant') && !m.payload.fromClient);\n      let lastParticipantId = null;\n\n      if (lastParticipantEvent) {\n        if (lastParticipantEvent.type === 'message') {\n          lastParticipantId = lastParticipantEvent.payload.participant;\n        }\n\n        if (lastParticipantEvent.type === 'participant') {\n          lastParticipantId = lastParticipantEvent.payload.participant.id;\n        }\n      }\n\n      const {\n        entry,\n        uploads\n      } = activeServiceSettings;\n      const historyNewEntryMeta = calculateNewEntryMeta(_objectSpread(_objectSpread(_objectSpread({}, state.entryMeta), entry), {}, {\n        active: entry.default || payloadTypes.text,\n        options: _objectSpread({}, entry && entry.options ? entry.options : {})\n      }), events[events.length - 1].payload);\n\n      let newFeatures = _objectSpread({}, state.options.features);\n\n      const newFeaturesHasUpload = newFeatures.hasOwnProperty(featureKeys.uploads); // Only set uploads if it was initialised by the account config.\n\n      if (newFeaturesHasUpload) {\n        var _lastParticipantEvent, _lastParticipantEvent2;\n\n        const entryType = lastParticipantEvent === null || lastParticipantEvent === void 0 ? void 0 : (_lastParticipantEvent = lastParticipantEvent.payload) === null || _lastParticipantEvent === void 0 ? void 0 : (_lastParticipantEvent2 = _lastParticipantEvent.entry) === null || _lastParticipantEvent2 === void 0 ? void 0 : _lastParticipantEvent2.type;\n        newFeatures = _objectSpread(_objectSpread({}, newFeatures), {}, {\n          uploads: {\n            enabled: !!(uploads && uploads.enabled),\n            enabledFromEntry: entryType === entryTypes.upload\n          }\n        });\n      }\n\n      const returnState = _objectSpread(_objectSpread({}, state), {}, {\n        unreadEvents: events.filter(event => event.type === 'message' && event.payload.messageStatus === readStates.received).length,\n        events: events.filter(e => e.type !== 'participant' || !!e.payload.participant.introduction),\n        participantInfo: _objectSpread(_objectSpread(_objectSpread({}, state.participantInfo), lastParticipantId ? participantReducer(state.participantInfo, {\n          type: SET_PARTICIPANT,\n          participant: mergedParticipants[lastParticipantId]\n        }) : {}), {}, {\n          participants: mergedParticipants\n        }),\n        historyLoaded: true,\n        serviceInfo: _objectSpread(_objectSpread({}, state.serviceInfo), {}, {\n          activeServiceSessionId\n        }),\n        serviceData: serviceData || {},\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: newFeatures\n        }),\n        entryMeta: !newFeaturesHasUpload && historyNewEntryMeta.active === entryTypes.upload ? _objectSpread({}, state.entryMeta) : historyNewEntryMeta,\n        resumeConversationPrompt: resumeConversationPrompt || false\n      });\n\n      if (lastParticipantId) {\n        returnState.headerTitles = headerTitlesReducer(state.headerTitles, {\n          type: SET_HEADER_SUB_TITLE,\n          title: mergedParticipants[lastParticipantId].name\n        });\n      }\n\n      return returnState;\n\n    case RESET_HISTORY_LOADED_FLAG:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        historyLoaded: false\n      });\n\n    case SET_IS_LOADING:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        isLoading: action.isLoading\n      });\n\n    case INIT_IDLE_DETACH_COUNTDOWN:\n      const {\n        delaySeconds,\n        delayTime\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: {\n          hasCountdown: true,\n          isActive: true,\n          wasStopped: false,\n          count: delaySeconds,\n          remaining: delaySeconds,\n          timer: delayTime\n        }\n      });\n\n    case DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER:\n      const {\n        idleDetachCountdown\n      } = state;\n      const {\n        remaining: prevRemaining\n      } = idleDetachCountdown;\n      const remaining = prevRemaining - 1;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: _objectSpread(_objectSpread({}, state.idleDetachCountdown), {}, {\n          remaining,\n          timer: (0,_general_utils__WEBPACK_IMPORTED_MODULE_1__.getTimeFromSeconds)(remaining)\n        })\n      });\n\n    case STOP_IDLE_DETACH_COUNTDOWN_COUNTER:\n      {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          idleDetachCountdown: _objectSpread(_objectSpread({}, state.idleDetachCountdown), {}, {\n            isActive: false,\n            wasStopped: true\n          })\n        });\n      }\n\n    case CLEAR_IDLE_DETACH_COUNTDOWN:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        idleDetachCountdown: {\n          hasCountdown: false,\n          isActive: false\n        }\n      });\n\n    case INIT_RESUME_CONVERSATION_PROMPT:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        resumeConversationPrompt: true\n      });\n\n    case CLEAR_RESUME_CONVERSATION_PROMPT:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        resumeConversationPrompt: false\n      });\n\n    case SET_PARTICIPANT:\n    case CLEAR_PARTICIPANTS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        participantInfo: participantReducer(state.participantInfo, action)\n      });\n\n    case SET_ACTIVE_SERVICE:\n      if (state.serviceInfo.activeServiceSessionId !== action.activeServiceSessionId) {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          serviceInfo: _objectSpread(_objectSpread({}, state.serviceInfo), {}, {\n            activeServiceSessionId: action.activeServiceSessionId\n          })\n        });\n      }\n\n      return state;\n\n    case SET_HEADER_TITLE:\n    case SET_HEADER_SUB_TITLE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        headerTitles: headerTitlesReducer(state.headerTitles, action)\n      });\n\n    case SET_INITIAL_STATE:\n      const {\n        initialState\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        initialState,\n        unreadEvents: initialState.unreadMessageCount\n      });\n\n    case SET_SERVICE_DATA_ITEM:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        serviceData: _objectSpread(_objectSpread({}, state.serviceData), {}, {\n          [action.payload.type]: action.payload\n        })\n      });\n\n    case SET_FEATURES:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: action.features\n        })\n      });\n\n    case SET_FEATURE_ENABLED_STATE:\n      return state.options.features.hasOwnProperty(action.key) ? _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: _objectSpread(_objectSpread({}, state.options.features), {}, {\n            [action.key]: _objectSpread(_objectSpread({}, state.options.features[action.key] || {}), {}, {\n              enabled: action.enabled\n            })\n          })\n        })\n      }) : state;\n\n    case CLEAR_FEATURES:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          features: {}\n        })\n      });\n\n    case SHOW_OPTION:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          panelActive: true,\n          optionActive: action.optionName\n        })\n      });\n\n    case HIDE_OPTION:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          panelActive: false,\n          optionActive: ''\n        })\n      });\n\n    case SET_USER_SELECTED_OPTIONS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          userSelectedOptions: action.options\n        })\n      });\n\n    case SET_USER_SELECTED_OPTION:\n      const {\n        option,\n        value\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        options: _objectSpread(_objectSpread({}, state.options), {}, {\n          userSelectedOptions: _objectSpread(_objectSpread({}, state.options.userSelectedOptions), {}, {\n            [option]: value\n          })\n        })\n      });\n\n    case SET_BLOCK_AUTO_ENTRY_SWITCH:\n      const {\n        value: blockAutoEntrySwitch\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          blockAutoEntrySwitch\n        })\n      });\n\n    case SET_SERVICE_ENTRY_METADATA:\n      const {\n        entryMeta\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread(_objectSpread({}, state.entryMeta), entryMeta), {}, {\n          active: entryMeta.default,\n          options: _objectSpread({}, entryMeta.options || {}),\n          overrideOptions: {}\n        })\n      });\n\n    case SET_ACTIVE_ENTRY_TYPE:\n      const {\n        entryType: active\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          active\n        })\n      });\n\n    case SET_USER_ENTRY_TYPE:\n      const {\n        entryType: userSelected\n      } = action;\n      return _objectSpread(_objectSpread({}, state), {}, {\n        entryMeta: _objectSpread(_objectSpread({}, state.entryMeta), {}, {\n          userSelected\n        })\n      });\n\n    case REGISTER_UPLOAD:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: [...state.currentUploads, {\n          id: action.fileId,\n          name: action.fileName,\n          progress: 1,\n          uploading: true,\n          complete: false,\n          error: '',\n          uploadHandle: action.uploadHandle\n        }]\n      });\n\n    case SET_UPLOAD_PROGRESS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              progress: action.progress,\n              uploading: action.progress !== 100,\n              uploadHandle: action.progress === 100 ? null : fileUpload.uploadHandle\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case SET_UPLOAD_ERROR:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              error: action.errorText,\n              progress: 0,\n              uploading: false,\n              uploadHandle: null\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case SET_UPLOAD_COMPLETE:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.map(fileUpload => {\n          if (fileUpload.id === action.fileId) {\n            return _objectSpread(_objectSpread({}, fileUpload), {}, {\n              complete: true\n            });\n          }\n\n          return fileUpload;\n        })\n      });\n\n    case CLEAR_UPLOAD:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: state.currentUploads.filter(fileUpload => fileUpload.id !== action.fileId)\n      });\n\n    case CLEAR_ALL_UPLOADS:\n      return _objectSpread(_objectSpread({}, state), {}, {\n        currentUploads: []\n      });\n\n    case SET_SEAMLY_CONTAINER_ELEMENT:\n      {\n        return _objectSpread(_objectSpread({}, state), {}, {\n          seamlyContainerElement: action.element\n        });\n      }\n\n    default:\n      return state;\n  }\n};\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/utils/seamly-utils.js?");
 
 /***/ }),
 
@@ -2421,7 +2410,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 */   \"fileListObjectIsNotEmpty\": () => (/* binding */ fileListObjectIsNotEmpty),\n/* harmony export */   \"isEmailString\": () => (/* binding */ isEmailString),\n/* harmony export */   \"isNotEmptyString\": () => (/* binding */ isNotEmptyString),\n/* harmony export */   \"validateFileSize\": () => (/* binding */ validateFileSize)\n/* harmony export */ });\nconst validateFileSize = (fileList, maxSize) => {\n  let isValid = true;\n\n  for (let i = 0; i < fileList.length; i++) {\n    if (fileList[i].size > maxSize) {\n      isValid = false;\n    }\n  }\n\n  return isValid;\n};\nconst fileListObjectIsNotEmpty = fileListObj => !!fileListObj?.length > 0;\n/* eslint-disable no-control-regex */\n\nconst isEmailString = val => {\n  const regex = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])$/i;\n  const trimmedVal = val && val.trim();\n  return !!(trimmedVal && trimmedVal.match(regex));\n};\n/* eslint-enable no-control-regex */\n\nconst isNotEmptyString = val => !!val;\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/utils/validations.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"fileListObjectIsNotEmpty\": () => (/* binding */ fileListObjectIsNotEmpty),\n/* harmony export */   \"isEmailString\": () => (/* binding */ isEmailString),\n/* harmony export */   \"isNotEmptyString\": () => (/* binding */ isNotEmptyString),\n/* harmony export */   \"validateFileSize\": () => (/* binding */ validateFileSize)\n/* harmony export */ });\nconst validateFileSize = (fileList, maxSize) => {\n  let isValid = true;\n\n  for (let i = 0; i < fileList.length; i++) {\n    if (fileList[i].size > maxSize) {\n      isValid = false;\n    }\n  }\n\n  return isValid;\n};\nconst fileListObjectIsNotEmpty = fileListObj => !!(fileListObj !== null && fileListObj !== void 0 && fileListObj.length) > 0;\n/* eslint-disable no-control-regex */\n\nconst isEmailString = val => {\n  const regex = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])$/i;\n  const trimmedVal = val && val.trim();\n  return !!(trimmedVal && trimmedVal.match(regex));\n};\n/* eslint-enable no-control-regex */\n\nconst isNotEmptyString = val => !!val;\n\n//# sourceURL=webpack://@seamly/web-ui/./src/javascripts/ui/utils/validations.js?");
 
 /***/ }),
 
@@ -3174,6 +3163,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 "use strict";
 eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ _unsupportedIterableToArray)\n/* harmony export */ });\n/* harmony import */ var _arrayLikeToArray_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./arrayLikeToArray.js */ \"./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js\");\n\nfunction _unsupportedIterableToArray(o, minLen) {\n  if (!o) return;\n  if (typeof o === \"string\") return (0,_arrayLikeToArray_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(o, minLen);\n  var n = Object.prototype.toString.call(o).slice(8, -1);\n  if (n === \"Object\" && o.constructor) n = o.constructor.name;\n  if (n === \"Map\" || n === \"Set\") return Array.from(o);\n  if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return (0,_arrayLikeToArray_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(o, minLen);\n}\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js?");
 
+/***/ }),
+
+/***/ "./node_modules/phoenix/priv/static/phoenix.mjs":
+/*!******************************************************!*\
+  !*** ./node_modules/phoenix/priv/static/phoenix.mjs ***!
+  \******************************************************/
+/***/ ((__unused_webpack___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 */   \"Channel\": () => (/* binding */ Channel),\n/* harmony export */   \"LongPoll\": () => (/* binding */ LongPoll),\n/* harmony export */   \"Presence\": () => (/* binding */ Presence),\n/* harmony export */   \"Serializer\": () => (/* binding */ serializer_default),\n/* harmony export */   \"Socket\": () => (/* binding */ Socket)\n/* harmony export */ });\n// js/phoenix/utils.js\nvar closure = (value) => {\n  if (typeof value === \"function\") {\n    return value;\n  } else {\n    let closure2 = function() {\n      return value;\n    };\n    return closure2;\n  }\n};\n\n// js/phoenix/constants.js\nvar globalSelf = typeof self !== \"undefined\" ? self : null;\nvar phxWindow = typeof window !== \"undefined\" ? window : null;\nvar global = globalSelf || phxWindow || global;\nvar DEFAULT_VSN = \"2.0.0\";\nvar SOCKET_STATES = { connecting: 0, open: 1, closing: 2, closed: 3 };\nvar DEFAULT_TIMEOUT = 1e4;\nvar WS_CLOSE_NORMAL = 1e3;\nvar CHANNEL_STATES = {\n  closed: \"closed\",\n  errored: \"errored\",\n  joined: \"joined\",\n  joining: \"joining\",\n  leaving: \"leaving\"\n};\nvar CHANNEL_EVENTS = {\n  close: \"phx_close\",\n  error: \"phx_error\",\n  join: \"phx_join\",\n  reply: \"phx_reply\",\n  leave: \"phx_leave\"\n};\nvar TRANSPORTS = {\n  longpoll: \"longpoll\",\n  websocket: \"websocket\"\n};\nvar XHR_STATES = {\n  complete: 4\n};\n\n// js/phoenix/push.js\nvar Push = class {\n  constructor(channel, event, payload, timeout) {\n    this.channel = channel;\n    this.event = event;\n    this.payload = payload || function() {\n      return {};\n    };\n    this.receivedResp = null;\n    this.timeout = timeout;\n    this.timeoutTimer = null;\n    this.recHooks = [];\n    this.sent = false;\n  }\n  resend(timeout) {\n    this.timeout = timeout;\n    this.reset();\n    this.send();\n  }\n  send() {\n    if (this.hasReceived(\"timeout\")) {\n      return;\n    }\n    this.startTimeout();\n    this.sent = true;\n    this.channel.socket.push({\n      topic: this.channel.topic,\n      event: this.event,\n      payload: this.payload(),\n      ref: this.ref,\n      join_ref: this.channel.joinRef()\n    });\n  }\n  receive(status, callback) {\n    if (this.hasReceived(status)) {\n      callback(this.receivedResp.response);\n    }\n    this.recHooks.push({ status, callback });\n    return this;\n  }\n  reset() {\n    this.cancelRefEvent();\n    this.ref = null;\n    this.refEvent = null;\n    this.receivedResp = null;\n    this.sent = false;\n  }\n  matchReceive({ status, response, _ref }) {\n    this.recHooks.filter((h) => h.status === status).forEach((h) => h.callback(response));\n  }\n  cancelRefEvent() {\n    if (!this.refEvent) {\n      return;\n    }\n    this.channel.off(this.refEvent);\n  }\n  cancelTimeout() {\n    clearTimeout(this.timeoutTimer);\n    this.timeoutTimer = null;\n  }\n  startTimeout() {\n    if (this.timeoutTimer) {\n      this.cancelTimeout();\n    }\n    this.ref = this.channel.socket.makeRef();\n    this.refEvent = this.channel.replyEventName(this.ref);\n    this.channel.on(this.refEvent, (payload) => {\n      this.cancelRefEvent();\n      this.cancelTimeout();\n      this.receivedResp = payload;\n      this.matchReceive(payload);\n    });\n    this.timeoutTimer = setTimeout(() => {\n      this.trigger(\"timeout\", {});\n    }, this.timeout);\n  }\n  hasReceived(status) {\n    return this.receivedResp && this.receivedResp.status === status;\n  }\n  trigger(status, response) {\n    this.channel.trigger(this.refEvent, { status, response });\n  }\n};\n\n// js/phoenix/timer.js\nvar Timer = class {\n  constructor(callback, timerCalc) {\n    this.callback = callback;\n    this.timerCalc = timerCalc;\n    this.timer = null;\n    this.tries = 0;\n  }\n  reset() {\n    this.tries = 0;\n    clearTimeout(this.timer);\n  }\n  scheduleTimeout() {\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => {\n      this.tries = this.tries + 1;\n      this.callback();\n    }, this.timerCalc(this.tries + 1));\n  }\n};\n\n// js/phoenix/channel.js\nvar Channel = class {\n  constructor(topic, params, socket) {\n    this.state = CHANNEL_STATES.closed;\n    this.topic = topic;\n    this.params = closure(params || {});\n    this.socket = socket;\n    this.bindings = [];\n    this.bindingRef = 0;\n    this.timeout = this.socket.timeout;\n    this.joinedOnce = false;\n    this.joinPush = new Push(this, CHANNEL_EVENTS.join, this.params, this.timeout);\n    this.pushBuffer = [];\n    this.stateChangeRefs = [];\n    this.rejoinTimer = new Timer(() => {\n      if (this.socket.isConnected()) {\n        this.rejoin();\n      }\n    }, this.socket.rejoinAfterMs);\n    this.stateChangeRefs.push(this.socket.onError(() => this.rejoinTimer.reset()));\n    this.stateChangeRefs.push(this.socket.onOpen(() => {\n      this.rejoinTimer.reset();\n      if (this.isErrored()) {\n        this.rejoin();\n      }\n    }));\n    this.joinPush.receive(\"ok\", () => {\n      this.state = CHANNEL_STATES.joined;\n      this.rejoinTimer.reset();\n      this.pushBuffer.forEach((pushEvent) => pushEvent.send());\n      this.pushBuffer = [];\n    });\n    this.joinPush.receive(\"error\", () => {\n      this.state = CHANNEL_STATES.errored;\n      if (this.socket.isConnected()) {\n        this.rejoinTimer.scheduleTimeout();\n      }\n    });\n    this.onClose(() => {\n      this.rejoinTimer.reset();\n      if (this.socket.hasLogger())\n        this.socket.log(\"channel\", `close ${this.topic} ${this.joinRef()}`);\n      this.state = CHANNEL_STATES.closed;\n      this.socket.remove(this);\n    });\n    this.onError((reason) => {\n      if (this.socket.hasLogger())\n        this.socket.log(\"channel\", `error ${this.topic}`, reason);\n      if (this.isJoining()) {\n        this.joinPush.reset();\n      }\n      this.state = CHANNEL_STATES.errored;\n      if (this.socket.isConnected()) {\n        this.rejoinTimer.scheduleTimeout();\n      }\n    });\n    this.joinPush.receive(\"timeout\", () => {\n      if (this.socket.hasLogger())\n        this.socket.log(\"channel\", `timeout ${this.topic} (${this.joinRef()})`, this.joinPush.timeout);\n      let leavePush = new Push(this, CHANNEL_EVENTS.leave, closure({}), this.timeout);\n      leavePush.send();\n      this.state = CHANNEL_STATES.errored;\n      this.joinPush.reset();\n      if (this.socket.isConnected()) {\n        this.rejoinTimer.scheduleTimeout();\n      }\n    });\n    this.on(CHANNEL_EVENTS.reply, (payload, ref) => {\n      this.trigger(this.replyEventName(ref), payload);\n    });\n  }\n  join(timeout = this.timeout) {\n    if (this.joinedOnce) {\n      throw new Error(\"tried to join multiple times. 'join' can only be called a single time per channel instance\");\n    } else {\n      this.timeout = timeout;\n      this.joinedOnce = true;\n      this.rejoin();\n      return this.joinPush;\n    }\n  }\n  onClose(callback) {\n    this.on(CHANNEL_EVENTS.close, callback);\n  }\n  onError(callback) {\n    return this.on(CHANNEL_EVENTS.error, (reason) => callback(reason));\n  }\n  on(event, callback) {\n    let ref = this.bindingRef++;\n    this.bindings.push({ event, ref, callback });\n    return ref;\n  }\n  off(event, ref) {\n    this.bindings = this.bindings.filter((bind) => {\n      return !(bind.event === event && (typeof ref === \"undefined\" || ref === bind.ref));\n    });\n  }\n  canPush() {\n    return this.socket.isConnected() && this.isJoined();\n  }\n  push(event, payload, timeout = this.timeout) {\n    payload = payload || {};\n    if (!this.joinedOnce) {\n      throw new Error(`tried to push '${event}' to '${this.topic}' before joining. Use channel.join() before pushing events`);\n    }\n    let pushEvent = new Push(this, event, function() {\n      return payload;\n    }, timeout);\n    if (this.canPush()) {\n      pushEvent.send();\n    } else {\n      pushEvent.startTimeout();\n      this.pushBuffer.push(pushEvent);\n    }\n    return pushEvent;\n  }\n  leave(timeout = this.timeout) {\n    this.rejoinTimer.reset();\n    this.joinPush.cancelTimeout();\n    this.state = CHANNEL_STATES.leaving;\n    let onClose = () => {\n      if (this.socket.hasLogger())\n        this.socket.log(\"channel\", `leave ${this.topic}`);\n      this.trigger(CHANNEL_EVENTS.close, \"leave\");\n    };\n    let leavePush = new Push(this, CHANNEL_EVENTS.leave, closure({}), timeout);\n    leavePush.receive(\"ok\", () => onClose()).receive(\"timeout\", () => onClose());\n    leavePush.send();\n    if (!this.canPush()) {\n      leavePush.trigger(\"ok\", {});\n    }\n    return leavePush;\n  }\n  onMessage(_event, payload, _ref) {\n    return payload;\n  }\n  isMember(topic, event, payload, joinRef) {\n    if (this.topic !== topic) {\n      return false;\n    }\n    if (joinRef && joinRef !== this.joinRef()) {\n      if (this.socket.hasLogger())\n        this.socket.log(\"channel\", \"dropping outdated message\", { topic, event, payload, joinRef });\n      return false;\n    } else {\n      return true;\n    }\n  }\n  joinRef() {\n    return this.joinPush.ref;\n  }\n  rejoin(timeout = this.timeout) {\n    if (this.isLeaving()) {\n      return;\n    }\n    this.socket.leaveOpenTopic(this.topic);\n    this.state = CHANNEL_STATES.joining;\n    this.joinPush.resend(timeout);\n  }\n  trigger(event, payload, ref, joinRef) {\n    let handledPayload = this.onMessage(event, payload, ref, joinRef);\n    if (payload && !handledPayload) {\n      throw new Error(\"channel onMessage callbacks must return the payload, modified or unmodified\");\n    }\n    let eventBindings = this.bindings.filter((bind) => bind.event === event);\n    for (let i = 0; i < eventBindings.length; i++) {\n      let bind = eventBindings[i];\n      bind.callback(handledPayload, ref, joinRef || this.joinRef());\n    }\n  }\n  replyEventName(ref) {\n    return `chan_reply_${ref}`;\n  }\n  isClosed() {\n    return this.state === CHANNEL_STATES.closed;\n  }\n  isErrored() {\n    return this.state === CHANNEL_STATES.errored;\n  }\n  isJoined() {\n    return this.state === CHANNEL_STATES.joined;\n  }\n  isJoining() {\n    return this.state === CHANNEL_STATES.joining;\n  }\n  isLeaving() {\n    return this.state === CHANNEL_STATES.leaving;\n  }\n};\n\n// js/phoenix/ajax.js\nvar Ajax = class {\n  static request(method, endPoint, accept, body, timeout, ontimeout, callback) {\n    if (global.XDomainRequest) {\n      let req = new global.XDomainRequest();\n      return this.xdomainRequest(req, method, endPoint, body, timeout, ontimeout, callback);\n    } else {\n      let req = new global.XMLHttpRequest();\n      return this.xhrRequest(req, method, endPoint, accept, body, timeout, ontimeout, callback);\n    }\n  }\n  static xdomainRequest(req, method, endPoint, body, timeout, ontimeout, callback) {\n    req.timeout = timeout;\n    req.open(method, endPoint);\n    req.onload = () => {\n      let response = this.parseJSON(req.responseText);\n      callback && callback(response);\n    };\n    if (ontimeout) {\n      req.ontimeout = ontimeout;\n    }\n    req.onprogress = () => {\n    };\n    req.send(body);\n    return req;\n  }\n  static xhrRequest(req, method, endPoint, accept, body, timeout, ontimeout, callback) {\n    req.open(method, endPoint, true);\n    req.timeout = timeout;\n    req.setRequestHeader(\"Content-Type\", accept);\n    req.onerror = () => callback && callback(null);\n    req.onreadystatechange = () => {\n      if (req.readyState === XHR_STATES.complete && callback) {\n        let response = this.parseJSON(req.responseText);\n        callback(response);\n      }\n    };\n    if (ontimeout) {\n      req.ontimeout = ontimeout;\n    }\n    req.send(body);\n    return req;\n  }\n  static parseJSON(resp) {\n    if (!resp || resp === \"\") {\n      return null;\n    }\n    try {\n      return JSON.parse(resp);\n    } catch (e) {\n      console && console.log(\"failed to parse JSON response\", resp);\n      return null;\n    }\n  }\n  static serialize(obj, parentKey) {\n    let queryStr = [];\n    for (var key in obj) {\n      if (!Object.prototype.hasOwnProperty.call(obj, key)) {\n        continue;\n      }\n      let paramKey = parentKey ? `${parentKey}[${key}]` : key;\n      let paramVal = obj[key];\n      if (typeof paramVal === \"object\") {\n        queryStr.push(this.serialize(paramVal, paramKey));\n      } else {\n        queryStr.push(encodeURIComponent(paramKey) + \"=\" + encodeURIComponent(paramVal));\n      }\n    }\n    return queryStr.join(\"&\");\n  }\n  static appendParams(url, params) {\n    if (Object.keys(params).length === 0) {\n      return url;\n    }\n    let prefix = url.match(/\\?/) ? \"&\" : \"?\";\n    return `${url}${prefix}${this.serialize(params)}`;\n  }\n};\n\n// js/phoenix/longpoll.js\nvar LongPoll = class {\n  constructor(endPoint) {\n    this.endPoint = null;\n    this.token = null;\n    this.skipHeartbeat = true;\n    this.reqs = /* @__PURE__ */ new Set();\n    this.onopen = function() {\n    };\n    this.onerror = function() {\n    };\n    this.onmessage = function() {\n    };\n    this.onclose = function() {\n    };\n    this.pollEndpoint = this.normalizeEndpoint(endPoint);\n    this.readyState = SOCKET_STATES.connecting;\n    this.poll();\n  }\n  normalizeEndpoint(endPoint) {\n    return endPoint.replace(\"ws://\", \"http://\").replace(\"wss://\", \"https://\").replace(new RegExp(\"(.*)/\" + TRANSPORTS.websocket), \"$1/\" + TRANSPORTS.longpoll);\n  }\n  endpointURL() {\n    return Ajax.appendParams(this.pollEndpoint, { token: this.token });\n  }\n  closeAndRetry(code, reason, wasClean) {\n    this.close(code, reason, wasClean);\n    this.readyState = SOCKET_STATES.connecting;\n  }\n  ontimeout() {\n    this.onerror(\"timeout\");\n    this.closeAndRetry(1005, \"timeout\", false);\n  }\n  isActive() {\n    return this.readyState === SOCKET_STATES.open || this.readyState === SOCKET_STATES.connecting;\n  }\n  poll() {\n    this.ajax(\"GET\", null, () => this.ontimeout(), (resp) => {\n      if (resp) {\n        var { status, token, messages } = resp;\n        this.token = token;\n      } else {\n        status = 0;\n      }\n      switch (status) {\n        case 200:\n          messages.forEach((msg) => {\n            setTimeout(() => this.onmessage({ data: msg }), 0);\n          });\n          this.poll();\n          break;\n        case 204:\n          this.poll();\n          break;\n        case 410:\n          this.readyState = SOCKET_STATES.open;\n          this.onopen({});\n          this.poll();\n          break;\n        case 403:\n          this.onerror(403);\n          this.close(1008, \"forbidden\", false);\n          break;\n        case 0:\n        case 500:\n          this.onerror(500);\n          this.closeAndRetry(1011, \"internal server error\", 500);\n          break;\n        default:\n          throw new Error(`unhandled poll status ${status}`);\n      }\n    });\n  }\n  send(body) {\n    this.ajax(\"POST\", body, () => this.onerror(\"timeout\"), (resp) => {\n      if (!resp || resp.status !== 200) {\n        this.onerror(resp && resp.status);\n        this.closeAndRetry(1011, \"internal server error\", false);\n      }\n    });\n  }\n  close(code, reason, wasClean) {\n    for (let req of this.reqs) {\n      req.abort();\n    }\n    this.readyState = SOCKET_STATES.closed;\n    let opts = Object.assign({ code: 1e3, reason: void 0, wasClean: true }, { code, reason, wasClean });\n    if (typeof CloseEvent !== \"undefined\") {\n      this.onclose(new CloseEvent(\"close\", opts));\n    } else {\n      this.onclose(opts);\n    }\n  }\n  ajax(method, body, onCallerTimeout, callback) {\n    let req;\n    let ontimeout = () => {\n      this.reqs.delete(req);\n      onCallerTimeout();\n    };\n    req = Ajax.request(method, this.endpointURL(), \"application/json\", body, this.timeout, ontimeout, (resp) => {\n      this.reqs.delete(req);\n      if (this.isActive()) {\n        callback(resp);\n      }\n    });\n    this.reqs.add(req);\n  }\n};\n\n// js/phoenix/presence.js\nvar Presence = class {\n  constructor(channel, opts = {}) {\n    let events = opts.events || { state: \"presence_state\", diff: \"presence_diff\" };\n    this.state = {};\n    this.pendingDiffs = [];\n    this.channel = channel;\n    this.joinRef = null;\n    this.caller = {\n      onJoin: function() {\n      },\n      onLeave: function() {\n      },\n      onSync: function() {\n      }\n    };\n    this.channel.on(events.state, (newState) => {\n      let { onJoin, onLeave, onSync } = this.caller;\n      this.joinRef = this.channel.joinRef();\n      this.state = Presence.syncState(this.state, newState, onJoin, onLeave);\n      this.pendingDiffs.forEach((diff) => {\n        this.state = Presence.syncDiff(this.state, diff, onJoin, onLeave);\n      });\n      this.pendingDiffs = [];\n      onSync();\n    });\n    this.channel.on(events.diff, (diff) => {\n      let { onJoin, onLeave, onSync } = this.caller;\n      if (this.inPendingSyncState()) {\n        this.pendingDiffs.push(diff);\n      } else {\n        this.state = Presence.syncDiff(this.state, diff, onJoin, onLeave);\n        onSync();\n      }\n    });\n  }\n  onJoin(callback) {\n    this.caller.onJoin = callback;\n  }\n  onLeave(callback) {\n    this.caller.onLeave = callback;\n  }\n  onSync(callback) {\n    this.caller.onSync = callback;\n  }\n  list(by) {\n    return Presence.list(this.state, by);\n  }\n  inPendingSyncState() {\n    return !this.joinRef || this.joinRef !== this.channel.joinRef();\n  }\n  static syncState(currentState, newState, onJoin, onLeave) {\n    let state = this.clone(currentState);\n    let joins = {};\n    let leaves = {};\n    this.map(state, (key, presence) => {\n      if (!newState[key]) {\n        leaves[key] = presence;\n      }\n    });\n    this.map(newState, (key, newPresence) => {\n      let currentPresence = state[key];\n      if (currentPresence) {\n        let newRefs = newPresence.metas.map((m) => m.phx_ref);\n        let curRefs = currentPresence.metas.map((m) => m.phx_ref);\n        let joinedMetas = newPresence.metas.filter((m) => curRefs.indexOf(m.phx_ref) < 0);\n        let leftMetas = currentPresence.metas.filter((m) => newRefs.indexOf(m.phx_ref) < 0);\n        if (joinedMetas.length > 0) {\n          joins[key] = newPresence;\n          joins[key].metas = joinedMetas;\n        }\n        if (leftMetas.length > 0) {\n          leaves[key] = this.clone(currentPresence);\n          leaves[key].metas = leftMetas;\n        }\n      } else {\n        joins[key] = newPresence;\n      }\n    });\n    return this.syncDiff(state, { joins, leaves }, onJoin, onLeave);\n  }\n  static syncDiff(state, diff, onJoin, onLeave) {\n    let { joins, leaves } = this.clone(diff);\n    if (!onJoin) {\n      onJoin = function() {\n      };\n    }\n    if (!onLeave) {\n      onLeave = function() {\n      };\n    }\n    this.map(joins, (key, newPresence) => {\n      let currentPresence = state[key];\n      state[key] = this.clone(newPresence);\n      if (currentPresence) {\n        let joinedRefs = state[key].metas.map((m) => m.phx_ref);\n        let curMetas = currentPresence.metas.filter((m) => joinedRefs.indexOf(m.phx_ref) < 0);\n        state[key].metas.unshift(...curMetas);\n      }\n      onJoin(key, currentPresence, newPresence);\n    });\n    this.map(leaves, (key, leftPresence) => {\n      let currentPresence = state[key];\n      if (!currentPresence) {\n        return;\n      }\n      let refsToRemove = leftPresence.metas.map((m) => m.phx_ref);\n      currentPresence.metas = currentPresence.metas.filter((p) => {\n        return refsToRemove.indexOf(p.phx_ref) < 0;\n      });\n      onLeave(key, currentPresence, leftPresence);\n      if (currentPresence.metas.length === 0) {\n        delete state[key];\n      }\n    });\n    return state;\n  }\n  static list(presences, chooser) {\n    if (!chooser) {\n      chooser = function(key, pres) {\n        return pres;\n      };\n    }\n    return this.map(presences, (key, presence) => {\n      return chooser(key, presence);\n    });\n  }\n  static map(obj, func) {\n    return Object.getOwnPropertyNames(obj).map((key) => func(key, obj[key]));\n  }\n  static clone(obj) {\n    return JSON.parse(JSON.stringify(obj));\n  }\n};\n\n// js/phoenix/serializer.js\nvar serializer_default = {\n  HEADER_LENGTH: 1,\n  META_LENGTH: 4,\n  KINDS: { push: 0, reply: 1, broadcast: 2 },\n  encode(msg, callback) {\n    if (msg.payload.constructor === ArrayBuffer) {\n      return callback(this.binaryEncode(msg));\n    } else {\n      let payload = [msg.join_ref, msg.ref, msg.topic, msg.event, msg.payload];\n      return callback(JSON.stringify(payload));\n    }\n  },\n  decode(rawPayload, callback) {\n    if (rawPayload.constructor === ArrayBuffer) {\n      return callback(this.binaryDecode(rawPayload));\n    } else {\n      let [join_ref, ref, topic, event, payload] = JSON.parse(rawPayload);\n      return callback({ join_ref, ref, topic, event, payload });\n    }\n  },\n  binaryEncode(message) {\n    let { join_ref, ref, event, topic, payload } = message;\n    let metaLength = this.META_LENGTH + join_ref.length + ref.length + topic.length + event.length;\n    let header = new ArrayBuffer(this.HEADER_LENGTH + metaLength);\n    let view = new DataView(header);\n    let offset = 0;\n    view.setUint8(offset++, this.KINDS.push);\n    view.setUint8(offset++, join_ref.length);\n    view.setUint8(offset++, ref.length);\n    view.setUint8(offset++, topic.length);\n    view.setUint8(offset++, event.length);\n    Array.from(join_ref, (char) => view.setUint8(offset++, char.charCodeAt(0)));\n    Array.from(ref, (char) => view.setUint8(offset++, char.charCodeAt(0)));\n    Array.from(topic, (char) => view.setUint8(offset++, char.charCodeAt(0)));\n    Array.from(event, (char) => view.setUint8(offset++, char.charCodeAt(0)));\n    var combined = new Uint8Array(header.byteLength + payload.byteLength);\n    combined.set(new Uint8Array(header), 0);\n    combined.set(new Uint8Array(payload), header.byteLength);\n    return combined.buffer;\n  },\n  binaryDecode(buffer) {\n    let view = new DataView(buffer);\n    let kind = view.getUint8(0);\n    let decoder = new TextDecoder();\n    switch (kind) {\n      case this.KINDS.push:\n        return this.decodePush(buffer, view, decoder);\n      case this.KINDS.reply:\n        return this.decodeReply(buffer, view, decoder);\n      case this.KINDS.broadcast:\n        return this.decodeBroadcast(buffer, view, decoder);\n    }\n  },\n  decodePush(buffer, view, decoder) {\n    let joinRefSize = view.getUint8(1);\n    let topicSize = view.getUint8(2);\n    let eventSize = view.getUint8(3);\n    let offset = this.HEADER_LENGTH + this.META_LENGTH - 1;\n    let joinRef = decoder.decode(buffer.slice(offset, offset + joinRefSize));\n    offset = offset + joinRefSize;\n    let topic = decoder.decode(buffer.slice(offset, offset + topicSize));\n    offset = offset + topicSize;\n    let event = decoder.decode(buffer.slice(offset, offset + eventSize));\n    offset = offset + eventSize;\n    let data = buffer.slice(offset, buffer.byteLength);\n    return { join_ref: joinRef, ref: null, topic, event, payload: data };\n  },\n  decodeReply(buffer, view, decoder) {\n    let joinRefSize = view.getUint8(1);\n    let refSize = view.getUint8(2);\n    let topicSize = view.getUint8(3);\n    let eventSize = view.getUint8(4);\n    let offset = this.HEADER_LENGTH + this.META_LENGTH;\n    let joinRef = decoder.decode(buffer.slice(offset, offset + joinRefSize));\n    offset = offset + joinRefSize;\n    let ref = decoder.decode(buffer.slice(offset, offset + refSize));\n    offset = offset + refSize;\n    let topic = decoder.decode(buffer.slice(offset, offset + topicSize));\n    offset = offset + topicSize;\n    let event = decoder.decode(buffer.slice(offset, offset + eventSize));\n    offset = offset + eventSize;\n    let data = buffer.slice(offset, buffer.byteLength);\n    let payload = { status: event, response: data };\n    return { join_ref: joinRef, ref, topic, event: CHANNEL_EVENTS.reply, payload };\n  },\n  decodeBroadcast(buffer, view, decoder) {\n    let topicSize = view.getUint8(1);\n    let eventSize = view.getUint8(2);\n    let offset = this.HEADER_LENGTH + 2;\n    let topic = decoder.decode(buffer.slice(offset, offset + topicSize));\n    offset = offset + topicSize;\n    let event = decoder.decode(buffer.slice(offset, offset + eventSize));\n    offset = offset + eventSize;\n    let data = buffer.slice(offset, buffer.byteLength);\n    return { join_ref: null, ref: null, topic, event, payload: data };\n  }\n};\n\n// js/phoenix/socket.js\nvar Socket = class {\n  constructor(endPoint, opts = {}) {\n    this.stateChangeCallbacks = { open: [], close: [], error: [], message: [] };\n    this.channels = [];\n    this.sendBuffer = [];\n    this.ref = 0;\n    this.timeout = opts.timeout || DEFAULT_TIMEOUT;\n    this.transport = opts.transport || global.WebSocket || LongPoll;\n    this.establishedConnections = 0;\n    this.defaultEncoder = serializer_default.encode.bind(serializer_default);\n    this.defaultDecoder = serializer_default.decode.bind(serializer_default);\n    this.closeWasClean = false;\n    this.binaryType = opts.binaryType || \"arraybuffer\";\n    this.connectClock = 1;\n    if (this.transport !== LongPoll) {\n      this.encode = opts.encode || this.defaultEncoder;\n      this.decode = opts.decode || this.defaultDecoder;\n    } else {\n      this.encode = this.defaultEncoder;\n      this.decode = this.defaultDecoder;\n    }\n    let awaitingConnectionOnPageShow = null;\n    if (phxWindow && phxWindow.addEventListener) {\n      phxWindow.addEventListener(\"pagehide\", (_e) => {\n        if (this.conn) {\n          this.disconnect();\n          awaitingConnectionOnPageShow = this.connectClock;\n        }\n      });\n      phxWindow.addEventListener(\"pageshow\", (_e) => {\n        if (awaitingConnectionOnPageShow === this.connectClock) {\n          awaitingConnectionOnPageShow = null;\n          this.connect();\n        }\n      });\n    }\n    this.heartbeatIntervalMs = opts.heartbeatIntervalMs || 3e4;\n    this.rejoinAfterMs = (tries) => {\n      if (opts.rejoinAfterMs) {\n        return opts.rejoinAfterMs(tries);\n      } else {\n        return [1e3, 2e3, 5e3][tries - 1] || 1e4;\n      }\n    };\n    this.reconnectAfterMs = (tries) => {\n      if (opts.reconnectAfterMs) {\n        return opts.reconnectAfterMs(tries);\n      } else {\n        return [10, 50, 100, 150, 200, 250, 500, 1e3, 2e3][tries - 1] || 5e3;\n      }\n    };\n    this.logger = opts.logger || null;\n    this.longpollerTimeout = opts.longpollerTimeout || 2e4;\n    this.params = closure(opts.params || {});\n    this.endPoint = `${endPoint}/${TRANSPORTS.websocket}`;\n    this.vsn = opts.vsn || DEFAULT_VSN;\n    this.heartbeatTimer = null;\n    this.pendingHeartbeatRef = null;\n    this.reconnectTimer = new Timer(() => {\n      this.teardown(() => this.connect());\n    }, this.reconnectAfterMs);\n  }\n  getLongPollTransport() {\n    return LongPoll;\n  }\n  replaceTransport(newTransport) {\n    this.connectClock++;\n    this.closeWasClean = true;\n    this.reconnectTimer.reset();\n    this.sendBuffer = [];\n    if (this.conn) {\n      this.conn.close();\n      this.conn = null;\n    }\n    this.transport = newTransport;\n  }\n  protocol() {\n    return location.protocol.match(/^https/) ? \"wss\" : \"ws\";\n  }\n  endPointURL() {\n    let uri = Ajax.appendParams(Ajax.appendParams(this.endPoint, this.params()), { vsn: this.vsn });\n    if (uri.charAt(0) !== \"/\") {\n      return uri;\n    }\n    if (uri.charAt(1) === \"/\") {\n      return `${this.protocol()}:${uri}`;\n    }\n    return `${this.protocol()}://${location.host}${uri}`;\n  }\n  disconnect(callback, code, reason) {\n    this.connectClock++;\n    this.closeWasClean = true;\n    this.reconnectTimer.reset();\n    this.teardown(callback, code, reason);\n  }\n  connect(params) {\n    if (params) {\n      console && console.log(\"passing params to connect is deprecated. Instead pass :params to the Socket constructor\");\n      this.params = closure(params);\n    }\n    if (this.conn) {\n      return;\n    }\n    this.connectClock++;\n    this.closeWasClean = false;\n    this.conn = new this.transport(this.endPointURL());\n    this.conn.binaryType = this.binaryType;\n    this.conn.timeout = this.longpollerTimeout;\n    this.conn.onopen = () => this.onConnOpen();\n    this.conn.onerror = (error) => this.onConnError(error);\n    this.conn.onmessage = (event) => this.onConnMessage(event);\n    this.conn.onclose = (event) => this.onConnClose(event);\n  }\n  log(kind, msg, data) {\n    this.logger(kind, msg, data);\n  }\n  hasLogger() {\n    return this.logger !== null;\n  }\n  onOpen(callback) {\n    let ref = this.makeRef();\n    this.stateChangeCallbacks.open.push([ref, callback]);\n    return ref;\n  }\n  onClose(callback) {\n    let ref = this.makeRef();\n    this.stateChangeCallbacks.close.push([ref, callback]);\n    return ref;\n  }\n  onError(callback) {\n    let ref = this.makeRef();\n    this.stateChangeCallbacks.error.push([ref, callback]);\n    return ref;\n  }\n  onMessage(callback) {\n    let ref = this.makeRef();\n    this.stateChangeCallbacks.message.push([ref, callback]);\n    return ref;\n  }\n  ping(callback) {\n    if (!this.isConnected()) {\n      return false;\n    }\n    let ref = this.makeRef();\n    let startTime = Date.now();\n    this.push({ topic: \"phoenix\", event: \"heartbeat\", payload: {}, ref });\n    let onMsgRef = this.onMessage((msg) => {\n      if (msg.ref === ref) {\n        this.off([onMsgRef]);\n        callback(Date.now() - startTime);\n      }\n    });\n    return true;\n  }\n  onConnOpen() {\n    if (this.hasLogger())\n      this.log(\"transport\", `connected to ${this.endPointURL()}`);\n    this.closeWasClean = false;\n    this.establishedConnections++;\n    this.flushSendBuffer();\n    this.reconnectTimer.reset();\n    this.resetHeartbeat();\n    this.stateChangeCallbacks.open.forEach(([, callback]) => callback());\n  }\n  heartbeatTimeout() {\n    if (this.pendingHeartbeatRef) {\n      this.pendingHeartbeatRef = null;\n      if (this.hasLogger()) {\n        this.log(\"transport\", \"heartbeat timeout. Attempting to re-establish connection\");\n      }\n      this.abnormalClose(\"heartbeat timeout\");\n    }\n  }\n  resetHeartbeat() {\n    if (this.conn && this.conn.skipHeartbeat) {\n      return;\n    }\n    this.pendingHeartbeatRef = null;\n    clearTimeout(this.heartbeatTimer);\n    setTimeout(() => this.sendHeartbeat(), this.heartbeatIntervalMs);\n  }\n  teardown(callback, code, reason) {\n    if (!this.conn) {\n      return callback && callback();\n    }\n    this.waitForBufferDone(() => {\n      if (this.conn) {\n        if (code) {\n          this.conn.close(code, reason || \"\");\n        } else {\n          this.conn.close();\n        }\n      }\n      this.waitForSocketClosed(() => {\n        if (this.conn) {\n          this.conn.onclose = function() {\n          };\n          this.conn = null;\n        }\n        callback && callback();\n      });\n    });\n  }\n  waitForBufferDone(callback, tries = 1) {\n    if (tries === 5 || !this.conn || !this.conn.bufferedAmount) {\n      callback();\n      return;\n    }\n    setTimeout(() => {\n      this.waitForBufferDone(callback, tries + 1);\n    }, 150 * tries);\n  }\n  waitForSocketClosed(callback, tries = 1) {\n    if (tries === 5 || !this.conn || this.conn.readyState === SOCKET_STATES.closed) {\n      callback();\n      return;\n    }\n    setTimeout(() => {\n      this.waitForSocketClosed(callback, tries + 1);\n    }, 150 * tries);\n  }\n  onConnClose(event) {\n    let closeCode = event && event.code;\n    if (this.hasLogger())\n      this.log(\"transport\", \"close\", event);\n    this.triggerChanError();\n    clearTimeout(this.heartbeatTimer);\n    if (!this.closeWasClean && closeCode !== 1e3) {\n      this.reconnectTimer.scheduleTimeout();\n    }\n    this.stateChangeCallbacks.close.forEach(([, callback]) => callback(event));\n  }\n  onConnError(error) {\n    if (this.hasLogger())\n      this.log(\"transport\", error);\n    let transportBefore = this.transport;\n    let establishedBefore = this.establishedConnections;\n    this.stateChangeCallbacks.error.forEach(([, callback]) => {\n      callback(error, transportBefore, establishedBefore);\n    });\n    if (transportBefore === this.transport || establishedBefore > 0) {\n      this.triggerChanError();\n    }\n  }\n  triggerChanError() {\n    this.channels.forEach((channel) => {\n      if (!(channel.isErrored() || channel.isLeaving() || channel.isClosed())) {\n        channel.trigger(CHANNEL_EVENTS.error);\n      }\n    });\n  }\n  connectionState() {\n    switch (this.conn && this.conn.readyState) {\n      case SOCKET_STATES.connecting:\n        return \"connecting\";\n      case SOCKET_STATES.open:\n        return \"open\";\n      case SOCKET_STATES.closing:\n        return \"closing\";\n      default:\n        return \"closed\";\n    }\n  }\n  isConnected() {\n    return this.connectionState() === \"open\";\n  }\n  remove(channel) {\n    this.off(channel.stateChangeRefs);\n    this.channels = this.channels.filter((c) => c.joinRef() !== channel.joinRef());\n  }\n  off(refs) {\n    for (let key in this.stateChangeCallbacks) {\n      this.stateChangeCallbacks[key] = this.stateChangeCallbacks[key].filter(([ref]) => {\n        return refs.indexOf(ref) === -1;\n      });\n    }\n  }\n  channel(topic, chanParams = {}) {\n    let chan = new Channel(topic, chanParams, this);\n    this.channels.push(chan);\n    return chan;\n  }\n  push(data) {\n    if (this.hasLogger()) {\n      let { topic, event, payload, ref, join_ref } = data;\n      this.log(\"push\", `${topic} ${event} (${join_ref}, ${ref})`, payload);\n    }\n    if (this.isConnected()) {\n      this.encode(data, (result) => this.conn.send(result));\n    } else {\n      this.sendBuffer.push(() => this.encode(data, (result) => this.conn.send(result)));\n    }\n  }\n  makeRef() {\n    let newRef = this.ref + 1;\n    if (newRef === this.ref) {\n      this.ref = 0;\n    } else {\n      this.ref = newRef;\n    }\n    return this.ref.toString();\n  }\n  sendHeartbeat() {\n    if (this.pendingHeartbeatRef && !this.isConnected()) {\n      return;\n    }\n    this.pendingHeartbeatRef = this.makeRef();\n    this.push({ topic: \"phoenix\", event: \"heartbeat\", payload: {}, ref: this.pendingHeartbeatRef });\n    this.heartbeatTimer = setTimeout(() => this.heartbeatTimeout(), this.heartbeatIntervalMs);\n  }\n  abnormalClose(reason) {\n    this.closeWasClean = false;\n    if (this.isConnected()) {\n      this.conn.close(WS_CLOSE_NORMAL, reason);\n    }\n  }\n  flushSendBuffer() {\n    if (this.isConnected() && this.sendBuffer.length > 0) {\n      this.sendBuffer.forEach((callback) => callback());\n      this.sendBuffer = [];\n    }\n  }\n  onConnMessage(rawMessage) {\n    this.decode(rawMessage.data, (msg) => {\n      let { topic, event, payload, ref, join_ref } = msg;\n      if (ref && ref === this.pendingHeartbeatRef) {\n        clearTimeout(this.heartbeatTimer);\n        this.pendingHeartbeatRef = null;\n        setTimeout(() => this.sendHeartbeat(), this.heartbeatIntervalMs);\n      }\n      if (this.hasLogger())\n        this.log(\"receive\", `${payload.status || \"\"} ${topic} ${event} ${ref && \"(\" + ref + \")\" || \"\"}`, payload);\n      for (let i = 0; i < this.channels.length; i++) {\n        const channel = this.channels[i];\n        if (!channel.isMember(topic, event, payload, join_ref)) {\n          continue;\n        }\n        channel.trigger(event, payload, ref, join_ref);\n      }\n      for (let i = 0; i < this.stateChangeCallbacks.message.length; i++) {\n        let [, callback] = this.stateChangeCallbacks.message[i];\n        callback(msg);\n      }\n    });\n  }\n  leaveOpenTopic(topic) {\n    let dupChannel = this.channels.find((c) => c.topic === topic && (c.isJoined() || c.isJoining()));\n    if (dupChannel) {\n      if (this.hasLogger())\n        this.log(\"transport\", `leaving duplicate topic \"${topic}\"`);\n      dupChannel.leave();\n    }\n  }\n};\n\n//# sourceMappingURL=phoenix.mjs.map\n\n\n//# sourceURL=webpack://@seamly/web-ui/./node_modules/phoenix/priv/static/phoenix.mjs?");
+
 /***/ })
 
 /******/ 	});