@seamly/web-ui 22.1.0 → 22.3.0-beta.1

package/build/dist/lib/standalone.js

@@ -4157,7 +4157,9 @@ module.exports = Object.setPrototypeOf || ('__proto__' in {} ? function () {
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 var DESCRIPTORS = __webpack_require__(5746);
+var fails = __webpack_require__(5981);
 var uncurryThis = __webpack_require__(5329);
+var objectGetPrototypeOf = __webpack_require__(249);
 var objectKeys = __webpack_require__(4771);
 var toIndexedObject = __webpack_require__(4529);
 var $propertyIsEnumerable = (__webpack_require__(6760).f);
@@ -4165,18 +4167,28 @@ var $propertyIsEnumerable = (__webpack_require__(6760).f);
 var propertyIsEnumerable = uncurryThis($propertyIsEnumerable);
 var push = uncurryThis([].push);
 
+// in some IE versions, `propertyIsEnumerable` returns incorrect result on integer keys
+// of `null` prototype objects
+var IE_BUG = DESCRIPTORS && fails(function () {
+  // eslint-disable-next-line es/no-object-create -- safe
+  var O = Object.create(null);
+  O[2] = 2;
+  return !propertyIsEnumerable(O, 2);
+});
+
 // `Object.{ entries, values }` methods implementation
 var createMethod = function (TO_ENTRIES) {
   return function (it) {
     var O = toIndexedObject(it);
     var keys = objectKeys(O);
+    var IE_WORKAROUND = IE_BUG && objectGetPrototypeOf(O) === null;
     var length = keys.length;
     var i = 0;
     var result = [];
     var key;
     while (length > i) {
       key = keys[i++];
-      if (!DESCRIPTORS || propertyIsEnumerable(O, key)) {
+      if (!DESCRIPTORS || (IE_WORKAROUND ? key in O : propertyIsEnumerable(O, key))) {
         push(result, TO_ENTRIES ? [key, O[key]] : O[key]);
       }
     }
@@ -4553,10 +4565,10 @@ var store = __webpack_require__(3030);
 (module.exports = function (key, value) {
   return store[key] || (store[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.30.2',
+  version: '3.31.1',
   mode: IS_PURE ? 'pure' : 'global',
   copyright: '© 2014-2023 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.30.2/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.31.1/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -5264,13 +5276,15 @@ module.exports = !fails(function () {
   // eslint-disable-next-line unicorn/relative-url-style -- required for testing
   var url = new URL('b?a=1&b=2&c=3', 'http://a');
   var searchParams = url.searchParams;
+  var searchParams2 = new URLSearchParams('a=1&a=2');
   var result = '';
   url.pathname = 'c%20d';
   searchParams.forEach(function (value, key) {
     searchParams['delete']('b');
     result += key + value;
   });
-  return (IS_PURE && !url.toJSON)
+  searchParams2['delete']('a', 2);
+  return (IS_PURE && (!url.toJSON || !searchParams2.has('a', 1) || searchParams2.has('a', 2)))
     || (!searchParams.size && (IS_PURE || !DESCRIPTORS))
     || !searchParams.sort
     || url.href !== 'http://a/c%20d?a=1&c=3'
@@ -7985,7 +7999,7 @@ var URLSearchParamsConstructor = function URLSearchParams(/* init */) {
   anInstance(this, URLSearchParamsPrototype);
   var init = arguments.length > 0 ? arguments[0] : undefined;
   var state = setInternalState(this, new URLSearchParamsState(init));
-  if (!DESCRIPTORS) this.length = state.entries.length;
+  if (!DESCRIPTORS) this.size = state.entries.length;
 };
 
 var URLSearchParamsPrototype = URLSearchParamsConstructor.prototype;
@@ -7994,32 +8008,37 @@ defineBuiltIns(URLSearchParamsPrototype, {
   // `URLSearchParams.prototype.append` method
   // https://url.spec.whatwg.org/#dom-urlsearchparams-append
   append: function append(name, value) {
-    validateArgumentsLength(arguments.length, 2);
     var state = getInternalParamsState(this);
+    validateArgumentsLength(arguments.length, 2);
     push(state.entries, { key: $toString(name), value: $toString(value) });
     if (!DESCRIPTORS) this.length++;
     state.updateURL();
   },
   // `URLSearchParams.prototype.delete` method
   // https://url.spec.whatwg.org/#dom-urlsearchparams-delete
-  'delete': function (name) {
-    validateArgumentsLength(arguments.length, 1);
+  'delete': function (name /* , value */) {
     var state = getInternalParamsState(this);
+    var length = validateArgumentsLength(arguments.length, 1);
     var entries = state.entries;
     var key = $toString(name);
+    var $value = length < 2 ? undefined : arguments[1];
+    var value = $value === undefined ? $value : $toString($value);
     var index = 0;
     while (index < entries.length) {
-      if (entries[index].key === key) splice(entries, index, 1);
-      else index++;
+      var entry = entries[index];
+      if (entry.key === key && (value === undefined || entry.value === value)) {
+        splice(entries, index, 1);
+        if (value !== undefined) break;
+      } else index++;
     }
-    if (!DESCRIPTORS) this.length = entries.length;
+    if (!DESCRIPTORS) this.size = entries.length;
     state.updateURL();
   },
   // `URLSearchParams.prototype.get` method
   // https://url.spec.whatwg.org/#dom-urlsearchparams-get
   get: function get(name) {
-    validateArgumentsLength(arguments.length, 1);
     var entries = getInternalParamsState(this).entries;
+    validateArgumentsLength(arguments.length, 1);
     var key = $toString(name);
     var index = 0;
     for (; index < entries.length; index++) {
@@ -8030,8 +8049,8 @@ defineBuiltIns(URLSearchParamsPrototype, {
   // `URLSearchParams.prototype.getAll` method
   // https://url.spec.whatwg.org/#dom-urlsearchparams-getall
   getAll: function getAll(name) {
-    validateArgumentsLength(arguments.length, 1);
     var entries = getInternalParamsState(this).entries;
+    validateArgumentsLength(arguments.length, 1);
     var key = $toString(name);
     var result = [];
     var index = 0;
@@ -8042,21 +8061,24 @@ defineBuiltIns(URLSearchParamsPrototype, {
   },
   // `URLSearchParams.prototype.has` method
   // https://url.spec.whatwg.org/#dom-urlsearchparams-has
-  has: function has(name) {
-    validateArgumentsLength(arguments.length, 1);
+  has: function has(name /* , value */) {
     var entries = getInternalParamsState(this).entries;
+    var length = validateArgumentsLength(arguments.length, 1);
     var key = $toString(name);
+    var $value = length < 2 ? undefined : arguments[1];
+    var value = $value === undefined ? $value : $toString($value);
     var index = 0;
     while (index < entries.length) {
-      if (entries[index++].key === key) return true;
+      var entry = entries[index++];
+      if (entry.key === key && (value === undefined || entry.value === value)) return true;
     }
     return false;
   },
   // `URLSearchParams.prototype.set` method
   // https://url.spec.whatwg.org/#dom-urlsearchparams-set
   set: function set(name, value) {
-    validateArgumentsLength(arguments.length, 1);
     var state = getInternalParamsState(this);
+    validateArgumentsLength(arguments.length, 1);
     var entries = state.entries;
     var found = false;
     var key = $toString(name);
@@ -8074,7 +8096,7 @@ defineBuiltIns(URLSearchParamsPrototype, {
       }
     }
     if (!found) push(entries, { key: key, value: val });
-    if (!DESCRIPTORS) this.length = entries.length;
+    if (!DESCRIPTORS) this.size = entries.length;
     state.updateURL();
   },
   // `URLSearchParams.prototype.sort` method
@@ -8187,6 +8209,22 @@ module.exports = {
 };
 
 
+/***/ }),
+
+/***/ 6454:
+/***/ (function() {
+
+// empty
+
+
+/***/ }),
+
+/***/ 3305:
+/***/ (function() {
+
+// empty
+
+
 /***/ }),
 
 /***/ 5304:
@@ -9699,16 +9737,29 @@ __webpack_require__(7634);
 module.exports = parent;
 
 
+/***/ }),
+
+/***/ 7610:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+__webpack_require__(5304);
+__webpack_require__(6454);
+__webpack_require__(3305);
+__webpack_require__(2337);
+var path = __webpack_require__(4058);
+
+module.exports = path.URLSearchParams;
+
+
 /***/ }),
 
 /***/ 1459:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
+__webpack_require__(7610);
 __webpack_require__(3601);
 __webpack_require__(4630);
 __webpack_require__(8947);
-__webpack_require__(5304);
-__webpack_require__(2337);
 var path = __webpack_require__(4058);
 
 module.exports = path.URL;
@@ -10526,15 +10577,18 @@ var _=0;function o(o,e,n,t,f,l){var s,u,a={};for(u in e)"ref"==u?s=e[u]:a[u]=e[u
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/promise.js
 var promise = __webpack_require__(6226);
 var promise_default = /*#__PURE__*/__webpack_require__.n(promise);
+// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/index-of.js
+var index_of = __webpack_require__(1882);
+var index_of_default = /*#__PURE__*/__webpack_require__.n(index_of);
+// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols.js
+var get_own_property_symbols = __webpack_require__(222);
+var get_own_property_symbols_default = /*#__PURE__*/__webpack_require__.n(get_own_property_symbols);
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/url.js
 var core_js_stable_url = __webpack_require__(3460);
 var url_default = /*#__PURE__*/__webpack_require__.n(core_js_stable_url);
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/object/assign.js
 var object_assign = __webpack_require__(6986);
 var assign_default = /*#__PURE__*/__webpack_require__.n(object_assign);
-// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/index-of.js
-var index_of = __webpack_require__(1882);
-var index_of_default = /*#__PURE__*/__webpack_require__.n(index_of);
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/json/stringify.js
 var stringify = __webpack_require__(5627);
 var stringify_default = /*#__PURE__*/__webpack_require__.n(stringify);
@@ -12266,6 +12320,7 @@ _ConversationConnector_connectionListeners = new (weak_map_default())(), _Conver
     return !complete;
   }), "f");
 };
+/* harmony default export */ var conversation_connector = (ConversationConnector);
 ;// CONCATENATED MODULE: ./src/javascripts/api/index.ts
 
 
@@ -12279,6 +12334,7 @@ _ConversationConnector_connectionListeners = new (weak_map_default())(), _Conver
 
 
 
+
 var api_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
@@ -12317,6 +12373,14 @@ var api_classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet ||
   if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
   return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
+var __rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && index_of_default()(e).call(e, p) < 0) t[p] = s[p];
+  if (s != null && typeof (get_own_property_symbols_default()) === "function") for (var i = 0, p = get_own_property_symbols_default()(s); i < p.length; i++) {
+    if (index_of_default()(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 var _API_instances, _API_ready, _API_externalId, _API_conversationAuthToken, _API_layoutMode, _API_config, _API_getAccessToken, _API_setAccessToken, _API_setConversationUrl, _API_getChannelTopic, _API_setChannelTopic, _API_getLocale, _API_getUrlPrefix, _API_updateUrls, _API_createConversation, _API_getEnvironment;
 
 
@@ -12405,7 +12469,7 @@ class API {
     _API_conversationAuthToken.set(this, void 0);
     _API_layoutMode.set(this, void 0);
     _API_config.set(this, void 0);
-    this.conversation = new ConversationConnector();
+    this.conversation = new conversation_connector();
     _API_getLocale.set(this, locale => locale || this.locale);
     this.store = objectStore(`${namespace}.connection${context.locale ? `.${context.locale}` : ''}`, config.storageProvider || store);
     this.connectionInfo = {
@@ -12435,7 +12499,8 @@ class API {
     });
   }
   getConversationUrl() {
-    return this.store.get('conversationUrl');
+    const conversationUrl = this.store.get('conversationUrl');
+    return conversationUrl;
   }
   hasConversation() {
     return !!this.getConversationUrl();
@@ -12544,7 +12609,7 @@ class API {
         if (error.status >= 500) {
           throw new SeamlyGeneralError(error);
         }
-        throw error;
+        throw new ApiError(error);
       }
     });
   }
@@ -12654,7 +12719,7 @@ class API {
         if (error.status >= 500) {
           throw new SeamlyGeneralError(error);
         }
-        throw error;
+        throw new ApiError(error);
       }
     });
   }
@@ -12682,6 +12747,7 @@ class API {
     this.conversation.pushToChannel(command, buildPayload(command, payload), 10000);
   }
   sendContext(context) {
+    var _a;
     const {
       locale,
       variables
@@ -12703,19 +12769,29 @@ class API {
     if (keys_default()(payload).length === 0 && payload.constructor === Object) {
       return;
     }
-    this.send('context', payload, false);
+    // Destructure the server locale from the payload
+    const {
+        locale: _
+      } = payload,
+      restPayload = __rest(payload, ["locale"]);
+    const configLocale = (_a = api_classPrivateFieldGet(this, _API_config, "f").context) === null || _a === void 0 ? void 0 : _a.locale;
+    this.send('context', assign_default()(assign_default()({}, configLocale ? {
+      locale: configLocale
+    } : {}), restPayload), false);
   }
 }
 _API_ready = new (weak_map_default())(), _API_externalId = new (weak_map_default())(), _API_conversationAuthToken = new (weak_map_default())(), _API_layoutMode = new (weak_map_default())(), _API_config = new (weak_map_default())(), _API_getLocale = new (weak_map_default())(), _API_instances = new (weak_set_default())(), _API_getAccessToken = function _API_getAccessToken() {
-  return this.store.get('accessToken');
+  const accessToken = this.store.get('accessToken');
+  return accessToken;
 }, _API_setAccessToken = function _API_setAccessToken(accessToken) {
   this.store.set('accessToken', accessToken);
 }, _API_setConversationUrl = function _API_setConversationUrl(url) {
   this.store.set('conversationUrl', url);
 }, _API_getChannelTopic = function _API_getChannelTopic() {
+  const channelTopic = this.store.get('channelTopic') || this.store.get('channelName');
   // The `channelName` fallback is needed for seamless client upgrades.
   // TODO: Remove when all clients have been upgraded past v20.
-  return this.store.get('channelTopic') || this.store.get('channelName');
+  return channelTopic;
 }, _API_setChannelTopic = function _API_setChannelTopic(topic) {
   this.store.set('channelTopic', topic);
 }, _API_getUrlPrefix = function _API_getUrlPrefix(protocol) {
@@ -12786,7 +12862,7 @@ _API_ready = new (weak_map_default())(), _API_externalId = new (weak_map_default
   return {
     clientName: "@seamly/web-ui",
     clientVariant: api_classPrivateFieldGet(this, _API_layoutMode, "f"),
-    clientVersion: "22.1.0",
+    clientVersion: "22.3.0-beta.1",
     currentUrl: window.location.toString(),
     screenResolution: `${window.screen.width}x${window.screen.height}`,
     timezone: getTimeZone(),
@@ -12820,15 +12896,52 @@ const setBatch = newBatch => batch = newBatch; // Supply a getter just to skip d
 const getBatch = () => batch;
 ;// CONCATENATED MODULE: ./node_modules/react-redux/es/components/Context.js
 
-const Context_ReactReduxContext = /*#__PURE__*/(0,compat_module.createContext)(null);
+const ContextKey = Symbol.for(`react-redux-context-${compat_module.version}`);
+const gT = globalThis;
+
+function getContext() {
+  let realContext = gT[ContextKey];
+
+  if (!realContext) {
+    realContext = (0,compat_module.createContext)(null);
+
+    if (false) {}
+
+    gT[ContextKey] = realContext;
+  }
+
+  return realContext;
+}
+
+const Context_ReactReduxContext = /*#__PURE__*/new Proxy({}, /*#__PURE__*/new Proxy({}, {
+  get(_, handler) {
+    const target = getContext(); // @ts-ignore
 
-if (false) {}
+    return (_target, ...args) => Reflect[handler](target, ...args);
+  }
 
+}));
 /* harmony default export */ var Context = ((/* unused pure expression or super */ null && (Context_ReactReduxContext)));
 ;// CONCATENATED MODULE: ./node_modules/react-redux/es/hooks/useReduxContext.js
 
 
 
+/**
+ * Hook factory, which creates a `useReduxContext` hook bound to a given context. This is a low-level
+ * hook that you should usually not need to call directly.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useReduxContext` hook bound to the specified context.
+ */
+function createReduxContextHook(context = Context_ReactReduxContext) {
+  return function useReduxContext() {
+    const contextValue = (0,compat_module.useContext)(context);
+
+    if (false) {}
+
+    return contextValue;
+  };
+}
 /**
  * A hook to access the value of the `ReactReduxContext`. This is a low-level
  * hook that you should usually not need to call directly.
@@ -12845,13 +12958,8 @@ if (false) {}
  *   return <div>{store.getState()}</div>
  * }
  */
-function useReduxContext_useReduxContext() {
-  const contextValue = (0,compat_module.useContext)(Context_ReactReduxContext);
-
-  if (false) {}
 
-  return contextValue;
-}
+const useReduxContext_useReduxContext = /*#__PURE__*/createReduxContextHook();
 ;// CONCATENATED MODULE: ./node_modules/react-redux/es/utils/useSyncExternalStore.js
 const useSyncExternalStore_notInitialized = () => {
   throw new Error('uSES not initialized!');
@@ -12876,16 +12984,37 @@ const refEquality = (a, b) => a === b;
 
 
 function createSelectorHook(context = Context_ReactReduxContext) {
-  const useReduxContext = context === Context_ReactReduxContext ? useReduxContext_useReduxContext : () => (0,compat_module.useContext)(context);
-  return function useSelector(selector, equalityFn = refEquality) {
+  const useReduxContext = context === Context_ReactReduxContext ? useReduxContext_useReduxContext : createReduxContextHook(context);
+  return function useSelector(selector, equalityFnOrOptions = {}) {
+    const {
+      equalityFn = refEquality,
+      stabilityCheck = undefined,
+      noopCheck = undefined
+    } = typeof equalityFnOrOptions === 'function' ? {
+      equalityFn: equalityFnOrOptions
+    } : equalityFnOrOptions;
+
     if (false) {}
 
     const {
       store,
       subscription,
-      getServerState
+      getServerState,
+      stabilityCheck: globalStabilityCheck,
+      noopCheck: globalNoopCheck
     } = useReduxContext();
-    const selectedState = useSyncExternalStoreWithSelector(subscription.addNestedSub, store.getState, getServerState || store.getState, selector, equalityFn);
+    const firstRun = (0,compat_module.useRef)(true);
+    const wrappedSelector = (0,compat_module.useCallback)({
+      [selector.name](state) {
+        const selected = selector(state);
+
+        if (false) {}
+
+        return selected;
+      }
+
+    }[selector.name], [selector, globalStabilityCheck, stabilityCheck]);
+    const selectedState = useSyncExternalStoreWithSelector(subscription.addNestedSub, store.getState, getServerState || store.getState, wrappedSelector, equalityFn);
     (0,compat_module.useDebugValue)(selectedState);
     return selectedState;
   };
@@ -13472,16 +13601,20 @@ function Provider({
   store,
   context,
   children,
-  serverState
+  serverState,
+  stabilityCheck = 'once',
+  noopCheck = 'once'
 }) {
   const contextValue = (0,compat_module.useMemo)(() => {
     const subscription = Subscription_createSubscription(store);
     return {
       store,
       subscription,
-      getServerState: serverState ? () => serverState : undefined
+      getServerState: serverState ? () => serverState : undefined,
+      stabilityCheck,
+      noopCheck
     };
-  }, [store, serverState]);
+  }, [store, serverState, stabilityCheck, noopCheck]);
   const previousState = (0,compat_module.useMemo)(() => store.getState(), [store]);
   useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(() => {
     const {
@@ -13510,7 +13643,6 @@ function Provider({
 ;// CONCATENATED MODULE: ./node_modules/react-redux/es/hooks/useStore.js
 
 
-
 /**
  * Hook factory, which creates a `useStore` hook bound to a given context.
  *
@@ -13520,7 +13652,8 @@ function Provider({
 
 function createStoreHook(context = Context_ReactReduxContext) {
   const useReduxContext = // @ts-ignore
-  context === Context_ReactReduxContext ? useReduxContext_useReduxContext : () => (0,compat_module.useContext)(context);
+  context === Context_ReactReduxContext ? useReduxContext_useReduxContext : // @ts-ignore
+  createReduxContextHook(context);
   return function useStore() {
     const {
       store
@@ -16579,6 +16712,64 @@ const setLocale = createAsyncThunk('setLocale', (locale, _ref) => {
     return true;
   }
 });
+;// CONCATENATED MODULE: ./src/javascripts/domains/redux/create-debounced-async-thunk.ts
+
+
+
+/**
+ * A debounced analogue of the `createAsyncThunk` from `@reduxjs/toolkit`
+ * @param typePrefix - a string action type value
+ * @param payloadCreator - a callback function that should return a promise containing the result of some asynchronous logic
+ * @param debounceOptions - the debounce options object
+ */
+const createDebouncedAsyncThunk = (typePrefix, payloadCreator, debounceOptions) => {
+  const {
+    wait = 300,
+    maxWait = 0,
+    leading = false
+  } = debounceOptions !== null && debounceOptions !== void 0 ? debounceOptions : {};
+  let debounceTimer = null;
+  let maxWaitTimer = null;
+  let resolve;
+  const cancel = () => {
+    if (resolve) {
+      resolve(false);
+      resolve = undefined;
+    }
+  };
+  const invoke = () => {
+    clearTimeout(maxWaitTimer);
+    maxWaitTimer = undefined;
+    if (resolve) {
+      resolve(true);
+      resolve = undefined;
+    }
+  };
+  const debounceExecutionCondition = () => {
+    const immediate = leading && !debounceTimer;
+    // Start debounced condition resolution
+    clearTimeout(debounceTimer);
+    debounceTimer = set_timeout_default()(() => {
+      invoke();
+      debounceTimer = null;
+    }, wait);
+    if (immediate) {
+      return true;
+    }
+    cancel();
+    //  Start max wait condition resolution
+    if (maxWait && !maxWaitTimer) {
+      maxWaitTimer = set_timeout_default()(invoke, maxWait);
+    }
+    return new (promise_default())(res => {
+      resolve = res;
+    });
+  };
+  return createAsyncThunk(typePrefix, payloadCreator, {
+    condition: debounceExecutionCondition
+  });
+};
+/* harmony default export */ var create_debounced_async_thunk = (createDebouncedAsyncThunk);
 ;// CONCATENATED MODULE: ./node_modules/reselect/es/defaultMemoize.js
 // Cache implementation based on Erik Rasmussen's `lru-memoize`:
 // https://github.com/erikras/lru-memoize
@@ -17164,8 +17355,9 @@ const setVisibility = createAsyncThunk('setVisibility', (requestedVisibility, _r
   if (previousVisibility === calculatedVisibility) {
     return undefined;
   }
+  const visibility = api.store.get(StoreKey);
   // Store the user-requested visibility in order to reinitialize after refresh
-  api.store.set(StoreKey, assign_default()(assign_default()({}, api.store.get(StoreKey) || {}), {
+  api.store.set(StoreKey, assign_default()(assign_default()({}, visibility || {}), {
     [layoutMode]: requestedVisibility
   }));
   if (requestedVisibility) {
@@ -17233,6 +17425,7 @@ var app_actions_awaiter = undefined && undefined.__awaiter || function (thisArg,
 
 
 
+
 const initializeApp = createAsyncThunk('initializeApp', (_, _ref) => {
   let {
     extra: {
@@ -17301,7 +17494,7 @@ const initializeApp = createAsyncThunk('initializeApp', (_, _ref) => {
     }
   });
 });
-const resetApp = createAsyncThunk('resetApp', (_, _ref2) => {
+const resetApp = create_debounced_async_thunk('resetApp', (_, _ref2) => {
   let {
     dispatch,
     extra: {
@@ -17310,7 +17503,7 @@ const resetApp = createAsyncThunk('resetApp', (_, _ref2) => {
   } = _ref2;
   return app_actions_awaiter(void 0, void 0, void 0, function* () {
     yield api.disconnect();
-    yield api.clearStore();
+    api.clearStore();
     dispatch(resetConfig());
     yield dispatch(initializeConfig());
     try {
@@ -17318,11 +17511,14 @@ const resetApp = createAsyncThunk('resetApp', (_, _ref2) => {
         locale
       } = yield dispatch(initializeApp()).unwrap();
       yield dispatch(setLocale(locale));
-    } catch (rejectedValueOrSerializedError) {
+    } catch (e) {
       // nothing to do
     }
     dispatch(initializeVisibility());
   });
+}, {
+  wait: 2000,
+  leading: true
 });
 ;// CONCATENATED MODULE: ./src/javascripts/domains/app/hooks.js
 
@@ -17361,12 +17557,80 @@ const {
   setHasResponded
 } = appSlice.actions;
 /* harmony default export */ var app_slice = (appSlice.reducer);
+;// CONCATENATED MODULE: ./src/javascripts/domains/store/actions.ts
+
+var store_actions_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = (promise_default())))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
+const getConversation = createAsyncThunk('getConversation', (_, _ref) => {
+  let {
+    extra: {
+      api
+    },
+    rejectWithValue
+  } = _ref;
+  return store_actions_awaiter(void 0, void 0, void 0, function* () {
+    try {
+      return api.getConversation();
+    } catch (error) {
+      return rejectWithValue({
+        name: error === null || error === void 0 ? void 0 : error.name,
+        message: error === null || error === void 0 ? void 0 : error.message,
+        langKey: error === null || error === void 0 ? void 0 : error.langKey,
+        action: error === null || error === void 0 ? void 0 : error.action,
+        originalEvent: error === null || error === void 0 ? void 0 : error.originalEvent,
+        originalError: error === null || error === void 0 ? void 0 : error.originalError
+      });
+    }
+  });
+}, {
+  condition(payload, _ref2) {
+    let {
+      getState
+    } = _ref2;
+    var _a;
+    const {
+      state: {
+        events
+      }
+    } = getState();
+    const lastEvent = events[events.length - 1];
+    const payloadLastEventId = (_a = payload === null || payload === void 0 ? void 0 : payload.lastEvent) === null || _a === void 0 ? void 0 : _a.id;
+    return lastEvent && payloadLastEventId !== lastEvent.payload.id;
+  }
+});
 ;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/slice.ts
 
 
 
 
 
+
 const slice_initialState = {
   error: undefined
 };
@@ -17380,7 +17644,7 @@ const interruptSlice = createSlice({
     clearInterrupt: () => slice_initialState
   },
   extraReducers: builder => {
-    builder.addCase(initializeConfig.pending, () => slice_initialState).addMatcher(isAnyOf(initializeApp.rejected, initializeConfig.rejected, setLocale.rejected, setVisibility.rejected, initializeVisibility.rejected), (state, _ref) => {
+    builder.addCase(initializeConfig.pending, () => slice_initialState).addMatcher(isAnyOf(initializeApp.rejected, initializeConfig.rejected, setLocale.rejected, setVisibility.rejected, initializeVisibility.rejected, getConversation.rejected), (state, _ref) => {
       let {
         payload
       } = _ref;
@@ -18086,16 +18350,13 @@ const {
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/concat.js
 var concat = __webpack_require__(9022);
 var concat_default = /*#__PURE__*/__webpack_require__.n(concat);
-// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols.js
-var get_own_property_symbols = __webpack_require__(222);
-var get_own_property_symbols_default = /*#__PURE__*/__webpack_require__.n(get_own_property_symbols);
 ;// CONCATENATED MODULE: ./src/javascripts/domains/config/slice.ts
 
 
 
 
 
-var __rest = undefined && undefined.__rest || function (s, e) {
+var slice_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && index_of_default()(e).call(e, p) < 0) t[p] = s[p];
   if (s != null && typeof (get_own_property_symbols_default()) === "function") for (var i = 0, p = get_own_property_symbols_default()(s); i < p.length; i++) {
@@ -18138,7 +18399,7 @@ const updateState = (state, config) => {
     {
       messages
     } = _a,
-    partialConfig = __rest(_a, ["messages"]);
+    partialConfig = slice_rest(_a, ["messages"]);
   let newState = state;
   if (keys_default()(partialConfig).length > 0) {
     newState = assign_default()(assign_default()({}, newState), partialConfig);
@@ -18180,13 +18441,15 @@ const configSlice = createSlice({
           preChat,
           agentParticipant,
           userParticipant,
-          startChatIcon
+          startChatIcon,
+          locale
         }
       } = _ref4;
       state.preChatEvents = map_default()(preChat).call(preChat, payload => ({
         type: 'message',
         payload
       }));
+      state.context.locale = locale;
       state.agentParticipant = agentParticipant;
       state.userParticipant = userParticipant;
       state.startChatIcon = startChatIcon;
@@ -18586,6 +18849,7 @@ var splice_default = /*#__PURE__*/__webpack_require__.n(splice);
 
 
 
+
 const translationsInitialState = {
   isActive: false,
   currentLocale: undefined,
@@ -18685,6 +18949,7 @@ const translationSlice = createSlice({
   },
   extraReducers: builder => {
     builder.addCase(resetApp.pending, () => translationsInitialState).addCase(initializeConfig.fulfilled, (state, _ref6) => {
+      var _context3;
       let {
         payload
       } = _ref6;
@@ -18692,7 +18957,13 @@ const translationSlice = createSlice({
       const feature = (_a = payload === null || payload === void 0 ? void 0 : payload.features) === null || _a === void 0 ? void 0 : _a.translation;
       if (!feature) return;
       state.isAvailable = feature.enabled === true;
-      state.languages = feature.languages;
+      state.languages = sort_default()(_context3 = [...feature.languages]).call(_context3, (a, b) => {
+        if (a.locale === payload.locale) return -1;
+        if (b.locale === payload.locale) return 1;
+        return a.nativeName.localeCompare(b.nativeName, undefined, {
+          sensitivity: 'base'
+        });
+      });
     }).addCase(setHistory, (state, _ref7) => {
       let {
         payload
@@ -19956,6 +20227,10 @@ function useInterrupt() {
 
 
 
+
+
+
+
 function useSessionExpiredCommand() {
   const {
     meta: {
@@ -19963,13 +20238,35 @@ function useSessionExpiredCommand() {
       action
     }
   } = useInterrupt();
+  const dispatch = useAppDispatch();
   const seamlyCommands = use_seamly_commands();
   const isExpiredError = (originalError === null || originalError === void 0 ? void 0 : originalError.name) === 'SeamlySessionExpiredError';
+  const limit = (0,hooks_module/* useRef */.sO)(0);
+  const limitTimer = (0,hooks_module/* useRef */.sO)(null);
   (0,hooks_module/* useEffect */.d4)(() => {
     if (isExpiredError && seamlyCommands[action]) {
+      if (limit.current >= 10) {
+        limitTimer.current = set_timeout_default()(() => {
+          limit.current = 0;
+        }, 10000);
+        const error = new SeamlyGeneralError();
+        dispatch(setInterrupt({
+          name: error.name,
+          message: error.message,
+          langKey: error.langKey,
+          originalEvent: error.originalEvent,
+          originalError: error.originalError,
+          action: error.action
+        }));
+        return () => {};
+      }
+      limit.current += 1;
       seamlyCommands[action]();
     }
-  }, [action, seamlyCommands, isExpiredError]);
+    return () => {
+      if (limitTimer.current) clearTimeout(limitTimer.current);
+    };
+  }, [action, seamlyCommands, isExpiredError, dispatch]);
 }
 ;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/use-seamly-chat.ts
 
@@ -20850,7 +21147,7 @@ const EventParticipant = _ref => {
       })
     }));
   }
-  if (showName) {
+  if (showName && participantName) {
     authorInfo.push(o("span", {
       className: css_className('message__author-name'),
       children: participantName
@@ -20934,109 +21231,61 @@ function MessageContainer(_ref) {
   });
 }
 /* harmony default export */ var message_container = (MessageContainer);
-;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/card-component.js
-
+;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/card-component.tsx
 
 
 
 
 
-const CardComponent = _ref => {
-  let {
-    id,
-    action,
-    buttonText,
-    description,
-    hasFocus,
-    image,
-    title,
-    isCarouselItem
-  } = _ref;
-  const cardRef = (0,hooks_module/* useRef */.sO)(null);
-  const {
-    sendMessage,
-    sendAction,
-    emitEvent
-  } = use_seamly_commands();
-  const descriptionId = useGeneratedId();
-  const isMounted = (0,hooks_module/* useRef */.sO)();
-  const CardActionComponent = action.type === cardTypes.navigate ? 'a' : 'button';
-  const emitCardEvent = (0,hooks_module/* useCallback */.I4)(() => emitEvent(`action.${actionTypes.clickCard}`, {
-    type: actionTypes.clickCta,
-    originMessage: id,
-    action
-  }), [emitEvent, id, action]);
-  const handleClick = (0,hooks_module/* useCallback */.I4)(() => {
-    emitCardEvent();
-    if (action.type === cardTypes.ask) {
-      sendMessage({
-        body: action.ask
-      });
-    } else if (action.type === cardTypes.topic) {
-      const {
-        topic: name,
-        fallbackMessage
-      } = action;
-      sendAction({
-        type: actionTypes.setTopic,
-        body: {
-          name,
-          fallbackMessage
+const CardComponent = ({ id, action, buttonText, description, hasFocus, image, title, isCarouselItem, }) => {
+    const cardRef = (0,hooks_module/* useRef */.sO)(null);
+    const { sendMessage, sendAction, emitEvent } = use_seamly_commands();
+    const descriptionId = useGeneratedId();
+    const isMounted = (0,hooks_module/* useRef */.sO)(false);
+    const CardActionComponent = action.type === cardTypes.navigate ? 'a' : 'button';
+    const emitCardEvent = (0,hooks_module/* useCallback */.I4)(() => emitEvent(`action.${actionTypes.clickCard}`, {
+        type: actionTypes.clickCta,
+        originMessage: id,
+        action,
+    }), [emitEvent, id, action]);
+    const handleClick = (0,hooks_module/* useCallback */.I4)(() => {
+        emitCardEvent();
+        if (action.type === cardTypes.ask) {
+            sendMessage({ body: action.ask });
         }
-      });
-    }
-  }, [sendMessage, action, sendAction, emitCardEvent]);
-  const actionProps = (0,hooks_module/* useMemo */.Ye)(() => action.type === cardTypes.navigate ? {
-    href: action.link,
-    rel: 'noopener noreferrer',
-    target: action.newTab ? '_blank' : '_self',
-    onClick: emitCardEvent
-  } : {
-    onClick: handleClick
-  }, [action, handleClick, emitCardEvent]);
-  (0,hooks_module/* useEffect */.d4)(() => {
-    if (isCarouselItem) {
-      if (hasFocus && isMounted.current) {
-        window.requestAnimationFrame(() => cardRef.current.focus());
-      } else {
-        cardRef.current.blur();
-      }
-    }
-    isMounted.current = true;
-  }, [hasFocus, isCarouselItem]);
-  return o("div", {
-    className: css_className('card__wrapper'),
-    id: id,
-    tabIndex: "-1" // set tabIndex of -1 so card can be focussed
-    ,
-    ref: cardRef,
-    children: [o("img", {
-      className: css_className('card__image'),
-      src: image,
-      alt: ""
-    }), o("div", {
-      className: css_className('card__content'),
-      id: id,
-      children: [title && o("h2", {
-        className: css_className('card__title'),
-        children: title
-      }), description && o("div", {
-        className: css_className('card__description'),
-        dangerouslySetInnerHTML: {
-          __html: description
+        else if (action.type === cardTypes.topic) {
+            const { topic: name, fallbackMessage } = action;
+            sendAction({
+                type: actionTypes.setTopic,
+                body: { name, fallbackMessage },
+            });
         }
-      }), o(CardActionComponent, {
-        tabIndex: isCarouselItem && !hasFocus ? '-1' : undefined // disable to prevent tabbing through cards
-        ,
-        className: css_className('button', 'button--primary'),
-        "aria-describedby": descriptionId,
-        ...actionProps,
-        children: buttonText
-      })]
-    })]
-  });
+    }, [sendMessage, action, sendAction, emitCardEvent]);
+    const actionProps = (0,hooks_module/* useMemo */.Ye)(() => action.type === cardTypes.navigate
+        ? {
+            href: action.link,
+            rel: 'noopener noreferrer',
+            target: action.newTab ? '_blank' : '_self',
+            onClick: emitCardEvent,
+        }
+        : {
+            onClick: handleClick,
+        }, [action, handleClick, emitCardEvent]);
+    (0,hooks_module/* useEffect */.d4)(() => {
+        if (isCarouselItem) {
+            if (hasFocus && isMounted.current) {
+                window.requestAnimationFrame(() => cardRef.current.focus());
+            }
+            else {
+                cardRef.current.blur();
+            }
+        }
+        isMounted.current = true;
+    }, [hasFocus, isCarouselItem]);
+    return (o("div", { className: css_className('card__wrapper'), id: id, tabIndex: -1, ref: cardRef, children: [image ? (o("img", { className: css_className('card__image'), src: image, alt: "" })) : null, o("div", { className: css_className('card__content'), id: id, children: [title && o("h2", { className: css_className('card__title'), children: title }), description && (o("div", { className: css_className('card__description'), dangerouslySetInnerHTML: { __html: description } })), o(CardActionComponent, Object.assign({ tabIndex: isCarouselItem && !hasFocus ? -1 : undefined, className: css_className('button', 'button--primary'), "aria-describedby": descriptionId }, actionProps, { children: buttonText }))] })] }));
 };
 /* harmony default export */ var card_component = (CardComponent);
+
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/card-message.js
 
 
@@ -22095,7 +22344,7 @@ const TimeIndicator = _ref => {
 /* harmony default export */ var time_indicator = (TimeIndicator);
 ;// CONCATENATED MODULE: ./node_modules/tabbable/dist/index.esm.js
 /*!
-* tabbable 6.1.2
+* tabbable 6.2.0
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
 // NOTE: separate `:not()` selectors has broader browser support than the newer
@@ -22275,7 +22524,27 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
   }
   return candidates;
 };
-var getTabindex = function getTabindex(node, isScope) {
+
+/**
+ * @private
+ * Determines if the node has an explicitly specified `tabindex` attribute.
+ * @param {HTMLElement} node
+ * @returns {boolean} True if so; false if not.
+ */
+var hasTabIndex = function hasTabIndex(node) {
+  return !isNaN(parseInt(node.getAttribute('tabindex'), 10));
+};
+
+/**
+ * Determine the tab index of a given node.
+ * @param {HTMLElement} node
+ * @returns {number} Tab order (negative, 0, or positive number).
+ * @throws {Error} If `node` is falsy.
+ */
+var getTabIndex = function getTabIndex(node) {
+  if (!node) {
+    throw new Error('No node provided');
+  }
   if (node.tabIndex < 0) {
     // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
     // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
@@ -22284,16 +22553,28 @@ var getTabindex = function getTabindex(node, isScope) {
     // order, consider their tab index to be 0.
     // Also browsers do not return `tabIndex` correctly for contentEditable nodes;
     // so if they don't have a tabindex attribute specifically set, assume it's 0.
-    //
-    // isScope is positive for custom element with shadow root or slot that by default
-    // have tabIndex -1, but need to be sorted by document order in order for their
-    // content to be inserted in the correct position
-    if ((isScope || /^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && isNaN(parseInt(node.getAttribute('tabindex'), 10))) {
+    if ((/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && !hasTabIndex(node)) {
       return 0;
     }
   }
   return node.tabIndex;
 };
+
+/**
+ * Determine the tab index of a given node __for sort order purposes__.
+ * @param {HTMLElement} node
+ * @param {boolean} [isScope] True for a custom element with shadow root or slot that, by default,
+ *  has tabIndex -1, but needs to be sorted by document order in order for its content to be
+ *  inserted into the correct sort position.
+ * @returns {number} Tab order (negative, 0, or positive number).
+ */
+var getSortOrderTabIndex = function getSortOrderTabIndex(node, isScope) {
+  var tabIndex = getTabIndex(node);
+  if (tabIndex < 0 && isScope && !hasTabIndex(node)) {
+    return 0;
+  }
+  return tabIndex;
+};
 var sortOrderedTabbables = function sortOrderedTabbables(a, b) {
   return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
 };
@@ -22536,7 +22817,7 @@ var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(o
   return true;
 };
 var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
-  if (isNonTabbableRadio(node) || getTabindex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
+  if (isNonTabbableRadio(node) || getTabIndex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
     return false;
   }
   return true;
@@ -22561,7 +22842,7 @@ var sortByOrder = function sortByOrder(candidates) {
   candidates.forEach(function (item, i) {
     var isScope = !!item.scopeParent;
     var element = isScope ? item.scopeParent : item;
-    var candidateTabindex = getTabindex(element, isScope);
+    var candidateTabindex = getSortOrderTabIndex(element, isScope);
     var elements = isScope ? sortByOrder(item.candidates) : element;
     if (candidateTabindex === 0) {
       isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
@@ -22580,32 +22861,32 @@ var sortByOrder = function sortByOrder(candidates) {
     return acc;
   }, []).concat(regularTabbables);
 };
-var tabbable = function tabbable(el, options) {
+var tabbable = function tabbable(container, options) {
   options = options || {};
   var candidates;
   if (options.getShadowRoot) {
-    candidates = getCandidatesIteratively([el], options.includeContainer, {
+    candidates = getCandidatesIteratively([container], options.includeContainer, {
       filter: isNodeMatchingSelectorTabbable.bind(null, options),
       flatten: false,
       getShadowRoot: options.getShadowRoot,
       shadowRootFilter: isValidShadowRootTabbable
     });
   } else {
-    candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
+    candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
   }
   return sortByOrder(candidates);
 };
-var focusable = function focusable(el, options) {
+var focusable = function focusable(container, options) {
   options = options || {};
   var candidates;
   if (options.getShadowRoot) {
-    candidates = getCandidatesIteratively([el], options.includeContainer, {
+    candidates = getCandidatesIteratively([container], options.includeContainer, {
       filter: isNodeMatchingSelectorFocusable.bind(null, options),
       flatten: true,
       getShadowRoot: options.getShadowRoot
     });
   } else {
-    candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
+    candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
   }
   return candidates;
 };
@@ -22636,7 +22917,7 @@ var isFocusable = function isFocusable(node, options) {
 
 ;// CONCATENATED MODULE: ./node_modules/focus-trap/dist/focus-trap.esm.js
 /*!
-* focus-trap 7.4.3
+* focus-trap 7.5.2
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 
@@ -22722,10 +23003,10 @@ var isSelectableInput = function isSelectableInput(node) {
   return node.tagName && node.tagName.toLowerCase() === 'input' && typeof node.select === 'function';
 };
 var isEscapeEvent = function isEscapeEvent(e) {
-  return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27;
+  return (e === null || e === void 0 ? void 0 : e.key) === 'Escape' || (e === null || e === void 0 ? void 0 : e.key) === 'Esc' || (e === null || e === void 0 ? void 0 : e.keyCode) === 27;
 };
 var isTabEvent = function isTabEvent(e) {
-  return e.key === 'Tab' || e.keyCode === 9;
+  return (e === null || e === void 0 ? void 0 : e.key) === 'Tab' || (e === null || e === void 0 ? void 0 : e.keyCode) === 9;
 };
 
 // checks for TAB by default
@@ -22809,8 +23090,11 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     //   container: HTMLElement,
     //   tabbableNodes: Array<HTMLElement>, // empty if none
     //   focusableNodes: Array<HTMLElement>, // empty if none
-    //   firstTabbableNode: HTMLElement|null,
-    //   lastTabbableNode: HTMLElement|null,
+    //   posTabIndexesFound: boolean,
+    //   firstTabbableNode: HTMLElement|undefined,
+    //   lastTabbableNode: HTMLElement|undefined,
+    //   firstDomTabbableNode: HTMLElement|undefined,
+    //   lastDomTabbableNode: HTMLElement|undefined,
     //   nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined
     // }>}
     containerGroups: [],
@@ -22827,7 +23111,9 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     paused: false,
     // timer ID for when delayInitialFocus is true and initial focus in this trap
     //  has been delayed during activation
-    delayInitialFocusTimer: undefined
+    delayInitialFocusTimer: undefined,
+    // the most recent KeyboardEvent for the configured nav key (typically [SHIFT+]TAB), if any
+    recentNavEvent: undefined
   };
   var trap; // eslint-disable-line prefer-const -- some private functions reference it, and its methods reference private functions, so we must declare here and define later
 
@@ -22846,7 +23132,9 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   /**
    * Finds the index of the container that contains the element.
    * @param {HTMLElement} element
-   * @param {Event} [event]
+   * @param {Event} [event] If available, and `element` isn't directly found in any container,
+   *  the event's composed path is used to see if includes any known trap containers in the
+   *  case where the element is inside a Shadow DOM.
    * @returns {number} Index of the container in either `state.containers` or
    *  `state.containerGroups` (the order/length of these lists are the same); -1
    *  if the element isn't found.
@@ -22941,14 +23229,41 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       var tabbableNodes = tabbable(container, config.tabbableOptions);
 
       // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes
-      //  are a superset of tabbable nodes
+      //  are a superset of tabbable nodes since nodes with negative `tabindex` attributes
+      //  are focusable but not tabbable
       var focusableNodes = focusable(container, config.tabbableOptions);
+      var firstTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[0] : undefined;
+      var lastTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : undefined;
+      var firstDomTabbableNode = focusableNodes.find(function (node) {
+        return isTabbable(node);
+      });
+      var lastDomTabbableNode = focusableNodes.slice().reverse().find(function (node) {
+        return isTabbable(node);
+      });
+      var posTabIndexesFound = !!tabbableNodes.find(function (node) {
+        return getTabIndex(node) > 0;
+      });
       return {
         container: container,
         tabbableNodes: tabbableNodes,
         focusableNodes: focusableNodes,
-        firstTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[0] : null,
-        lastTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : null,
+        /** True if at least one node with positive `tabindex` was found in this container. */
+        posTabIndexesFound: posTabIndexesFound,
+        /** First tabbable node in container, __tabindex__ order; `undefined` if none. */
+        firstTabbableNode: firstTabbableNode,
+        /** Last tabbable node in container, __tabindex__ order; `undefined` if none. */
+        lastTabbableNode: lastTabbableNode,
+        // NOTE: DOM order is NOT NECESSARILY "document position" order, but figuring that out
+        //  would require more than just https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
+        //  because that API doesn't work with Shadow DOM as well as it should (@see
+        //  https://github.com/whatwg/dom/issues/320) and since this first/last is only needed, so far,
+        //  to address an edge case related to positive tabindex support, this seems like a much easier,
+        //  "close enough most of the time" alternative for positive tabindexes which should generally
+        //  be avoided anyway...
+        /** First tabbable node in container, __DOM__ order; `undefined` if none. */
+        firstDomTabbableNode: firstDomTabbableNode,
+        /** Last tabbable node in container, __DOM__ order; `undefined` if none. */
+        lastDomTabbableNode: lastDomTabbableNode,
         /**
          * Finds the __tabbable__ node that follows the given node in the specified direction,
          *  in this container, if any.
@@ -22959,30 +23274,24 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
          */
         nextTabbableNode: function nextTabbableNode(node) {
           var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-          // NOTE: If tabindex is positive (in order to manipulate the tab order separate
-          //  from the DOM order), this __will not work__ because the list of focusableNodes,
-          //  while it contains tabbable nodes, does not sort its nodes in any order other
-          //  than DOM order, because it can't: Where would you place focusable (but not
-          //  tabbable) nodes in that order? They have no order, because they aren't tabbale...
-          // Support for positive tabindex is already broken and hard to manage (possibly
-          //  not supportable, TBD), so this isn't going to make things worse than they
-          //  already are, and at least makes things better for the majority of cases where
-          //  tabindex is either 0/unset or negative.
-          // FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375
-          var nodeIdx = focusableNodes.findIndex(function (n) {
-            return n === node;
-          });
+          var nodeIdx = tabbableNodes.indexOf(node);
           if (nodeIdx < 0) {
-            return undefined;
-          }
-          if (forward) {
-            return focusableNodes.slice(nodeIdx + 1).find(function (n) {
-              return isTabbable(n, config.tabbableOptions);
+            // either not tabbable nor focusable, or was focused but not tabbable (negative tabindex):
+            //  since `node` should at least have been focusable, we assume that's the case and mimic
+            //  what browsers do, which is set focus to the next node in __document position order__,
+            //  regardless of positive tabindexes, if any -- and for reasons explained in the NOTE
+            //  above related to `firstDomTabbable` and `lastDomTabbable` properties, we fall back to
+            //  basic DOM order
+            if (forward) {
+              return focusableNodes.slice(focusableNodes.indexOf(node) + 1).find(function (el) {
+                return isTabbable(el);
+              });
+            }
+            return focusableNodes.slice(0, focusableNodes.indexOf(node)).reverse().find(function (el) {
+              return isTabbable(el);
             });
           }
-          return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) {
-            return isTabbable(n, config.tabbableOptions);
-          });
+          return tabbableNodes[nodeIdx + (forward ? 1 : -1)];
         }
       };
     });
@@ -22995,6 +23304,19 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     ) {
       throw new Error('Your focus-trap must have at least one container with at least one tabbable node in it at all times');
     }
+
+    // NOTE: Positive tabindexes are only properly supported in single-container traps because
+    //  doing it across multiple containers where tabindexes could be all over the place
+    //  would require Tabbable to support multiple containers, would require additional
+    //  specialized Shadow DOM support, and would require Tabbable's multi-container support
+    //  to look at those containers in document position order rather than user-provided
+    //  order (as they are treated in Focus-trap, for legacy reasons). See discussion on
+    //  https://github.com/focus-trap/focus-trap/issues/375 for more details.
+    if (state.containerGroups.find(function (g) {
+      return g.posTabIndexesFound;
+    }) && state.containerGroups.length > 1) {
+      throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.");
+    }
   };
   var tryFocus = function tryFocus(node) {
     if (node === false) {
@@ -23010,6 +23332,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     node.focus({
       preventScroll: !!config.preventScroll
     });
+    // NOTE: focus() API does not trigger focusIn event so set MRU node manually
     state.mostRecentlyFocusedNode = node;
     if (isSelectableInput(node)) {
       node.select();
@@ -23020,64 +23343,23 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
     return node ? node : node === false ? false : previousActiveElement;
   };
 
-  // This needs to be done on mousedown and touchstart instead of click
-  // so that it precedes the focus event.
-  var checkPointerDown = function checkPointerDown(e) {
-    var target = getActualTarget(e);
-    if (findContainerIndex(target, e) >= 0) {
-      // allow the click since it ocurred inside the trap
-      return;
-    }
-    if (valueOrHandler(config.clickOutsideDeactivates, e)) {
-      // immediately deactivate the trap
-      trap.deactivate({
-        // NOTE: by setting `returnFocus: false`, deactivate() will do nothing,
-        //  which will result in the outside click setting focus to the node
-        //  that was clicked (and if not focusable, to "nothing"); by setting
-        //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused
-        //  on activation (or the configured `setReturnFocus` node), whether the
-        //  outside click was on a focusable node or not
-        returnFocus: config.returnFocusOnDeactivate
-      });
-      return;
-    }
-
-    // This is needed for mobile devices.
-    // (If we'll only let `click` events through,
-    // then on mobile they will be blocked anyways if `touchstart` is blocked.)
-    if (valueOrHandler(config.allowOutsideClick, e)) {
-      // allow the click outside the trap to take place
-      return;
-    }
-
-    // otherwise, prevent the click
-    e.preventDefault();
-  };
-
-  // In case focus escapes the trap for some strange reason, pull it back in.
-  var checkFocusIn = function checkFocusIn(e) {
-    var target = getActualTarget(e);
-    var targetContained = findContainerIndex(target, e) >= 0;
-
-    // In Firefox when you Tab out of an iframe the Document is briefly focused.
-    if (targetContained || target instanceof Document) {
-      if (targetContained) {
-        state.mostRecentlyFocusedNode = target;
-      }
-    } else {
-      // escaped! pull it back in to where it just left
-      e.stopImmediatePropagation();
-      tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());
-    }
-  };
-
-  // Hijack key nav events on the first and last focusable nodes of the trap,
-  // in order to prevent focus from escaping. If it escapes for even a
-  // moment it can end up scrolling the page and causing confusion so we
-  // kind of need to capture the action at the keydown phase.
-  var checkKeyNav = function checkKeyNav(event) {
-    var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var target = getActualTarget(event);
+  /**
+   * Finds the next node (in either direction) where focus should move according to a
+   *  keyboard focus-in event.
+   * @param {Object} params
+   * @param {Node} [params.target] Known target __from which__ to navigate, if any.
+   * @param {KeyboardEvent|FocusEvent} [params.event] Event to use if `target` isn't known (event
+   *  will be used to determine the `target`). Ignored if `target` is specified.
+   * @param {boolean} [params.isBackward] True if focus should move backward.
+   * @returns {Node|undefined} The next node, or `undefined` if a next node couldn't be
+   *  determined given the current state of the trap.
+   */
+  var findNextNavNode = function findNextNavNode(_ref2) {
+    var target = _ref2.target,
+      event = _ref2.event,
+      _ref2$isBackward = _ref2.isBackward,
+      isBackward = _ref2$isBackward === void 0 ? false : _ref2$isBackward;
+    target = target || getActualTarget(event);
     updateTabbableNodes();
     var destinationNode = null;
     if (state.tabbableGroups.length > 0) {
@@ -23100,8 +23382,8 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
         // REVERSE
 
         // is the target the first tabbable node in a group?
-        var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref2) {
-          var firstTabbableNode = _ref2.firstTabbableNode;
+        var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) {
+          var firstTabbableNode = _ref3.firstTabbableNode;
           return target === firstTabbableNode;
         });
         if (startOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target, config.tabbableOptions) && !isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target, false))) {
@@ -23119,7 +23401,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
           //  the LAST group if it's the first tabbable node of the FIRST group)
           var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;
           var destinationGroup = state.tabbableGroups[destinationGroupIndex];
-          destinationNode = destinationGroup.lastTabbableNode;
+          destinationNode = getTabIndex(target) >= 0 ? destinationGroup.lastTabbableNode : destinationGroup.lastDomTabbableNode;
         } else if (!isTabEvent(event)) {
           // user must have customized the nav keys so we have to move focus manually _within_
           //  the active group: do this based on the order determined by tabbable()
@@ -23129,8 +23411,8 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
         // FORWARD
 
         // is the target the last tabbable node in a group?
-        var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) {
-          var lastTabbableNode = _ref3.lastTabbableNode;
+        var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref4) {
+          var lastTabbableNode = _ref4.lastTabbableNode;
           return target === lastTabbableNode;
         });
         if (lastOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target, config.tabbableOptions) && !isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target))) {
@@ -23148,7 +23430,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
           //  group if it's the last tabbable node of the LAST group)
           var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;
           var _destinationGroup = state.tabbableGroups[_destinationGroupIndex];
-          destinationNode = _destinationGroup.firstTabbableNode;
+          destinationNode = getTabIndex(target) >= 0 ? _destinationGroup.firstTabbableNode : _destinationGroup.firstDomTabbableNode;
         } else if (!isTabEvent(event)) {
           // user must have customized the nav keys so we have to move focus manually _within_
           //  the active group: do this based on the order determined by tabbable()
@@ -23160,6 +23442,153 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       // NOTE: the fallbackFocus option does not support returning false to opt-out
       destinationNode = getNodeForOption('fallbackFocus');
     }
+    return destinationNode;
+  };
+
+  // This needs to be done on mousedown and touchstart instead of click
+  // so that it precedes the focus event.
+  var checkPointerDown = function checkPointerDown(e) {
+    var target = getActualTarget(e);
+    if (findContainerIndex(target, e) >= 0) {
+      // allow the click since it ocurred inside the trap
+      return;
+    }
+    if (valueOrHandler(config.clickOutsideDeactivates, e)) {
+      // immediately deactivate the trap
+      trap.deactivate({
+        // NOTE: by setting `returnFocus: false`, deactivate() will do nothing,
+        //  which will result in the outside click setting focus to the node
+        //  that was clicked (and if not focusable, to "nothing"); by setting
+        //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused
+        //  on activation (or the configured `setReturnFocus` node), whether the
+        //  outside click was on a focusable node or not
+        returnFocus: config.returnFocusOnDeactivate
+      });
+      return;
+    }
+
+    // This is needed for mobile devices.
+    // (If we'll only let `click` events through,
+    // then on mobile they will be blocked anyways if `touchstart` is blocked.)
+    if (valueOrHandler(config.allowOutsideClick, e)) {
+      // allow the click outside the trap to take place
+      return;
+    }
+
+    // otherwise, prevent the click
+    e.preventDefault();
+  };
+
+  // In case focus escapes the trap for some strange reason, pull it back in.
+  // NOTE: the focusIn event is NOT cancelable, so if focus escapes, it may cause unexpected
+  //  scrolling if the node that got focused was out of view; there's nothing we can do to
+  //  prevent that from happening by the time we discover that focus escaped
+  var checkFocusIn = function checkFocusIn(event) {
+    var target = getActualTarget(event);
+    var targetContained = findContainerIndex(target, event) >= 0;
+
+    // In Firefox when you Tab out of an iframe the Document is briefly focused.
+    if (targetContained || target instanceof Document) {
+      if (targetContained) {
+        state.mostRecentlyFocusedNode = target;
+      }
+    } else {
+      // escaped! pull it back in to where it just left
+      event.stopImmediatePropagation();
+
+      // focus will escape if the MRU node had a positive tab index and user tried to nav forward;
+      //  it will also escape if the MRU node had a 0 tab index and user tried to nav backward
+      //  toward a node with a positive tab index
+      var nextNode; // next node to focus, if we find one
+      var navAcrossContainers = true;
+      if (state.mostRecentlyFocusedNode) {
+        if (getTabIndex(state.mostRecentlyFocusedNode) > 0) {
+          // MRU container index must be >=0 otherwise we wouldn't have it as an MRU node...
+          var mruContainerIdx = findContainerIndex(state.mostRecentlyFocusedNode);
+          // there MAY not be any tabbable nodes in the container if there are at least 2 containers
+          //  and the MRU node is focusable but not tabbable (focus-trap requires at least 1 container
+          //  with at least one tabbable node in order to function, so this could be the other container
+          //  with nothing tabbable in it)
+          var tabbableNodes = state.containerGroups[mruContainerIdx].tabbableNodes;
+          if (tabbableNodes.length > 0) {
+            // MRU tab index MAY not be found if the MRU node is focusable but not tabbable
+            var mruTabIdx = tabbableNodes.findIndex(function (node) {
+              return node === state.mostRecentlyFocusedNode;
+            });
+            if (mruTabIdx >= 0) {
+              if (config.isKeyForward(state.recentNavEvent)) {
+                if (mruTabIdx + 1 < tabbableNodes.length) {
+                  nextNode = tabbableNodes[mruTabIdx + 1];
+                  navAcrossContainers = false;
+                }
+                // else, don't wrap within the container as focus should move to next/previous
+                //  container
+              } else {
+                if (mruTabIdx - 1 >= 0) {
+                  nextNode = tabbableNodes[mruTabIdx - 1];
+                  navAcrossContainers = false;
+                }
+                // else, don't wrap within the container as focus should move to next/previous
+                //  container
+              }
+              // else, don't find in container order without considering direction too
+            }
+          }
+          // else, no tabbable nodes in that container (which means we must have at least one other
+          //  container with at least one tabbable node in it, otherwise focus-trap would've thrown
+          //  an error the last time updateTabbableNodes() was run): find next node among all known
+          //  containers
+        } else {
+          // check to see if there's at least one tabbable node with a positive tab index inside
+          //  the trap because focus seems to escape when navigating backward from a tabbable node
+          //  with tabindex=0 when this is the case (instead of wrapping to the tabbable node with
+          //  the greatest positive tab index like it should)
+          if (!state.containerGroups.some(function (g) {
+            return g.tabbableNodes.some(function (n) {
+              return getTabIndex(n) > 0;
+            });
+          })) {
+            // no containers with tabbable nodes with positive tab indexes which means the focus
+            //  escaped for some other reason and we should just execute the fallback to the
+            //  MRU node or initial focus node, if any
+            navAcrossContainers = false;
+          }
+        }
+      } else {
+        // no MRU node means we're likely in some initial condition when the trap has just
+        //  been activated and initial focus hasn't been given yet, in which case we should
+        //  fall through to trying to focus the initial focus node, which is what should
+        //  happen below at this point in the logic
+        navAcrossContainers = false;
+      }
+      if (navAcrossContainers) {
+        nextNode = findNextNavNode({
+          // move FROM the MRU node, not event-related node (which will be the node that is
+          //  outside the trap causing the focus escape we're trying to fix)
+          target: state.mostRecentlyFocusedNode,
+          isBackward: config.isKeyBackward(state.recentNavEvent)
+        });
+      }
+      if (nextNode) {
+        tryFocus(nextNode);
+      } else {
+        tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());
+      }
+    }
+    state.recentNavEvent = undefined; // clear
+  };
+
+  // Hijack key nav events on the first and last focusable nodes of the trap,
+  // in order to prevent focus from escaping. If it escapes for even a
+  // moment it can end up scrolling the page and causing confusion so we
+  // kind of need to capture the action at the keydown phase.
+  var checkKeyNav = function checkKeyNav(event) {
+    var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    state.recentNavEvent = event;
+    var destinationNode = findNextNavNode({
+      event: event,
+      isBackward: isBackward
+    });
     if (destinationNode) {
       if (isTabEvent(event)) {
         // since tab natively moves focus, we wouldn't have a destination node unless we
@@ -24073,7 +24502,7 @@ const SeamlyActivityMonitor = ({ children }) => {
     // It is important to use keyUp here as focus may be set from outside the
     // chat container via keyboard. In this case the keyDown handler would not
     // be fired inside the container on the initial focus event.
-    return (o("div", Object.assign({ className: css_className('activity-monitor'), tabIndex: -1, onMouseDown: onActivityHandler, onKeyUp: onActivityHandler, onTouchStart: onActivityHandler, onMouseMove: onActivityHandler, onWheel: onActivityHandler, onPointerDown: onActivityHandler, onPointerMove: onActivityHandler }, { children: o(seamly_activity_event_context.Provider, Object.assign({ value: onActivityHandler }, { children: children })) })));
+    return (o("div", { className: css_className('activity-monitor'), tabIndex: -1, onMouseDown: onActivityHandler, onKeyUp: onActivityHandler, onTouchStart: onActivityHandler, onMouseMove: onActivityHandler, onWheel: onActivityHandler, onPointerDown: onActivityHandler, onPointerMove: onActivityHandler, children: o(seamly_activity_event_context.Provider, { value: onActivityHandler, children: children }) }));
 };
 /* harmony default export */ var seamly_activity_monitor = (SeamlyActivityMonitor);
 
@@ -24081,6 +24510,34 @@ const SeamlyActivityMonitor = ({ children }) => {
 
 
 
+
+var seamly_event_subscriber_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = (promise_default())))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
 var seamly_event_subscriber_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && index_of_default()(e).call(e, p) < 0) t[p] = s[p];
@@ -24101,13 +24558,13 @@ var seamly_event_subscriber_rest = undefined && undefined.__rest || function (s,
 
 
 
+
 const EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video'];
 const SeamlyEventSubscriber = () => {
   const api = useSeamlyApiContext();
   const syncChannelRef = (0,hooks_module/* useRef */.sO)();
   const messageChannelRef = (0,hooks_module/* useRef */.sO)();
-  const dispatch = useDispatch();
-  const events = useEvents();
+  const dispatch = useAppDispatch();
   const eventBus = (0,hooks_module/* useContext */.qp)(SeamlyEventBusContext);
   const prevEmittedEventId = (0,hooks_module/* useRef */.sO)(null);
   const {
@@ -24356,31 +24813,19 @@ const SeamlyEventSubscriber = () => {
         if (syncChannelRef.current) {
           (_a = api.conversation.channel) === null || _a === void 0 ? void 0 : _a.off('sync', syncChannelRef.current);
         }
-        syncChannelRef.current = api.conversation.channel.on('sync', payload => {
-          var _a;
-          const lastEvent = events[events.length - 1];
-          const payloadLastEventId = (_a = payload === null || payload === void 0 ? void 0 : payload.lastEvent) === null || _a === void 0 ? void 0 : _a.id;
-          if (lastEvent && payloadLastEventId === lastEvent.payload.id) {
-            return payload;
-          }
-          return api.getConversation().then(history => {
+        syncChannelRef.current = api.conversation.channel.on('sync', payload => seamly_event_subscriber_awaiter(void 0, void 0, void 0, function* () {
+          try {
+            const history = yield dispatch(getConversation(payload)).unwrap();
             if (!history) return;
             dispatch(setHistory(history));
-          }).catch(error => {
-            dispatch(setInterrupt({
-              name: error === null || error === void 0 ? void 0 : error.name,
-              message: error === null || error === void 0 ? void 0 : error.message,
-              langKey: error === null || error === void 0 ? void 0 : error.langKey,
-              action: error === null || error === void 0 ? void 0 : error.action,
-              originalEvent: error === null || error === void 0 ? void 0 : error.originalEvent,
-              originalError: error === null || error === void 0 ? void 0 : error.originalError
-            }));
-          });
-        });
+          } catch (_e) {
+            // nothing to do, the error is handled in the thunk
+          }
+        }));
         return true;
       });
     }
-  }, [api, api.connectionInfo, api.conversation.channel, events, dispatch]);
+  }, [api, api.connectionInfo, api.conversation.channel, dispatch]);
   return null;
 };
 /* harmony default export */ var seamly_event_subscriber = (SeamlyEventSubscriber);
@@ -24487,7 +24932,7 @@ const SeamlyFileUpload = ({ children }) => {
             uploadHandle,
         }));
     }, [addImageToSessionStorage, addUploadBubble, api, dispatch, t]);
-    return (o(seamly_file_upload_context.Provider, Object.assign({ value: onUploadFileHandler }, { children: children })));
+    return (o(seamly_file_upload_context.Provider, { value: onUploadFileHandler, children: children }));
 };
 /* harmony default export */ var seamly_file_upload = (SeamlyFileUpload);
 
@@ -24901,7 +25346,7 @@ const SeamlyCore = ({ store, children, eventBus, api }) => {
     (0,hooks_module/* useErrorBoundary */.cO)((error) => {
         store.dispatch(catchError(error));
     });
-    return (o(components_Provider, Object.assign({ store: store }, { children: o(SeamlyEventBusContext.Provider, Object.assign({ value: eventBus }, { children: o(SeamlyApiContext.Provider, Object.assign({ value: api }, { children: o(seamly_live_region, { children: o(seamly_chat, { children: o(component_filter, { children: [o(seamly_initializer, {}), o(seamly_event_subscriber, {}), o(seamly_read_state, {}), o(seamly_new_notifications, {}), o(seamly_idle_detach_counter, {}), o(seamly_activity_monitor, { children: [o(seamly_instance_functions_loader, {}), o(seamly_file_upload, { children: children })] })] }) }) }) })) })) })));
+    return (o(components_Provider, { store: store, children: o(SeamlyEventBusContext.Provider, { value: eventBus, children: o(SeamlyApiContext.Provider, { value: api, children: o(seamly_live_region, { children: o(seamly_chat, { children: o(component_filter, { children: [o(seamly_initializer, {}), o(seamly_event_subscriber, {}), o(seamly_read_state, {}), o(seamly_new_notifications, {}), o(seamly_idle_detach_counter, {}), o(seamly_activity_monitor, { children: [o(seamly_instance_functions_loader, {}), o(seamly_file_upload, { children: children })] })] }) }) }) }) }) }));
 };
 /* harmony default export */ var seamly_core = (SeamlyCore);
 
@@ -24969,12 +25414,12 @@ const getState = _ref => {
   } = _ref;
   return forms;
 };
-const getFormById = es_createSelector(getState, (_, _ref2) => {
+const getFormById = es_createSelector([getState, (_, _ref2) => {
   let {
     formId
   } = _ref2;
   return formId;
-}, (forms, formId) => forms[formId]);
+}], (forms, formId) => forms[formId]);
 const getFormControlsByFormId = es_createSelector(getFormById, form => (form === null || form === void 0 ? void 0 : form.controls) || {});
 const getFormValuesByFormId = es_createSelector(getFormControlsByFormId, controls => {
   var _context;
@@ -24987,21 +25432,21 @@ const getFormValuesByFormId = es_createSelector(getFormControlsByFormId, control
   });
   return valuesObj;
 });
-const getControlValueByName = es_createSelector(getFormControlsByFormId, (_, _ref4) => {
+const getControlValueByName = es_createSelector([getFormControlsByFormId, (_, _ref4) => {
   let {
     name
   } = _ref4;
   return name;
-}, (controls, name) => {
+}], (controls, name) => {
   var _a;
   return (_a = controls[name]) === null || _a === void 0 ? void 0 : _a.value;
 });
-const getControlTouchedByName = es_createSelector(getFormControlsByFormId, (_, _ref5) => {
+const getControlTouchedByName = es_createSelector([getFormControlsByFormId, (_, _ref5) => {
   let {
     name
   } = _ref5;
   return name;
-}, (controls, name) => {
+}], (controls, name) => {
   var _a;
   return (_a = controls[name]) === null || _a === void 0 ? void 0 : _a.touched;
 });
@@ -25203,7 +25648,7 @@ const useEntryTextTranslation = controlName => {
     text: (text === null || text === void 0 ? void 0 : text.label) || t('input.inputLabelText'),
     limit: !(text === null || text === void 0 ? void 0 : text.label) && hasCharacterLimit ? characterLimit : null
   }), [t, hasCharacterLimit, characterLimit, text === null || text === void 0 ? void 0 : text.label]);
-  const labelClass = (0,hooks_module/* useMemo */.Ye)(() => (text === null || text === void 0 ? void 0 : text.label) ? 'input__label' : 'visually-hidden', [text === null || text === void 0 ? void 0 : text.label]);
+  const labelClass = (0,hooks_module/* useMemo */.Ye)(() => (text === null || text === void 0 ? void 0 : text.label) ? 'label' : 'visually-hidden', [text === null || text === void 0 ? void 0 : text.label]);
   return {
     placeholder,
     label,
@@ -25248,14 +25693,14 @@ function AbortTransactionButton() {
         });
         clearEntryAbortTransaction();
     };
-    return (o("li", Object.assign({ className: css_className([
+    return (o("li", { className: css_className([
             'cvco-conversation__item',
             'cvco-conversation__item--abort-transaction',
-        ]) }, { children: o("button", Object.assign({ className: css_className([
+        ]), children: o("button", { className: css_className([
                 'button',
                 'button--secondary',
                 'abort-transaction__button',
-            ]), type: "button", onClick: handleAbortTransaction }, { children: abortTransaction.label })) })));
+            ]), type: "button", onClick: handleAbortTransaction, children: abortTransaction.label }) }));
 }
 
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/chat-scroll/chat-scroll-context.ts
@@ -25328,7 +25773,7 @@ const Event = ({ event, newParticipant }) => {
     if (newParticipant) {
         classNames.push('conversation__item--new-participant');
     }
-    return (o("li", Object.assign({ className: css_className(classNames), ref: containerRef }, { children: [event.timeIndicator && o(time_indicator, { event: event }), o(Component, Object.assign({ event: event }, { children: o(SubComponent, { event: event }) }))] })));
+    return (o("li", { className: css_className(classNames), ref: containerRef, children: [event.timeIndicator && o(time_indicator, { event: event }), o(Component, { event: event, children: o(SubComponent, { event: event }) })] }));
 };
 /* harmony default export */ var event_event = (Event);
 
@@ -25413,7 +25858,7 @@ const Conversation = () => {
         e.preventDefault();
         focusSkiplinkTarget();
     };
-    return (o(preact_module/* Fragment */.HY, { children: [isOpen && (o("a", Object.assign({ className: css_className('skip-link'), href: `#${skiplinkTargetId}`, onClick: onClickHandler }, { children: t('skiplinkText') }))), o("div", Object.assign({ className: css_className('chat__body') }, { children: o("div", Object.assign({ className: css_className('conversation__container') }, { children: [o(privacy_disclaimer, {}), o("ol", Object.assign({ className: css_className('conversation') }, { children: [o(component_filter, { children: o(Events, {}) }), debouncedIsLoading ? o(loader, {}) : null, o(AbortTransactionButton, {})] }))] })) }))] }));
+    return (o(preact_module/* Fragment */.HY, { children: [isOpen && (o("a", { className: css_className('skip-link'), href: `#${skiplinkTargetId}`, onClick: onClickHandler, children: t('skiplinkText') })), o("div", { className: css_className('chat__body'), children: o("div", { className: css_className('conversation__container'), children: [o(privacy_disclaimer, {}), o("ol", { className: css_className('conversation'), children: [o(component_filter, { children: o(Events, {}) }), debouncedIsLoading ? o(loader, {}) : null, o(AbortTransactionButton, {})] })] }) })] }));
 };
 /* harmony default export */ var conversation = (Conversation);
 
@@ -25819,16 +26264,16 @@ const OptionsFrame = ({ className: givenClassName, children, onCancel, headingTe
     (0,hooks_module/* useEffect */.d4)(() => {
         focusElement(container.current);
     }, [container]);
-    return (o("section", Object.assign({ className: css_className('options', {
+    return (o("section", { className: css_className('options', {
             'options--right': position.horizontal === 'right',
             'options--left': position.horizontal === 'left',
             'options--top': position.vertical === 'top',
             'options--bottom': position.vertical === 'bottom',
-        }, givenClassName), "aria-labelledby": mainHeadingId, tabIndex: -1, ref: container }, { children: o("div", Object.assign({ className: css_className('options__body') }, { children: [o("h2", Object.assign({ id: mainHeadingId, className: css_className('options__title') }, { children: headingText })), o("button", Object.assign({ type: "button", onClick: onCancelHandler, "aria-describedby": mainHeadingId, className: css_className('button', 'options__close'), ref: (btn) => {
+        }, givenClassName), "aria-labelledby": mainHeadingId, tabIndex: -1, ref: container, children: o("div", { className: css_className('options__body'), children: [o("h2", { id: mainHeadingId, className: css_className('options__title'), children: headingText }), o("button", { type: "button", onClick: onCancelHandler, "aria-describedby": mainHeadingId, className: css_className('button', 'options__close'), ref: (btn) => {
                         if (cancelButtonRef) {
                             cancelButtonRef.current = btn;
                         }
-                    } }, { children: [o(layout_icon, { name: "close", size: "16", alt: "" }), o("span", { children: cancelButtonText })] })), description ? (o("p", Object.assign({ className: css_className('options__description'), id: descriptionId }, { children: description }))) : null, o("div", Object.assign({ className: css_className('options__wrapper') }, { children: children }))] })) })));
+                    }, children: [o(layout_icon, { name: "close", size: "16", alt: "" }), o("span", { children: cancelButtonText })] }), description ? (o("p", { className: css_className('options__description'), id: descriptionId, children: description })) : null, o("div", { className: css_className('options__wrapper'), children: children })] }) }));
 };
 /* harmony default export */ var options_frame = (OptionsFrame);
 
@@ -25969,7 +26414,7 @@ function FormProvider(_a) {
         console.error('"onSubmit" is required.');
         return null;
     }
-    return (o(context_Provider, Object.assign({}, props, { value: contextValue }, { children: children })));
+    return (o(context_Provider, Object.assign({}, props, { value: contextValue, children: children })));
 }
 
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/form-controls/form.js
@@ -26038,8 +26483,8 @@ function error_Error(_ref) {
 
 
 
-const FormControlWrapper = ({ contentHint, id, labelText, labelClass = css_className('label'), validity, errorText, children, }) => {
-    return (o(preact_module/* Fragment */.HY, { children: [contentHint && (o("span", Object.assign({ id: `${id}-content-hint`, className: css_className('input__content-hint') }, { children: contentHint }))), o(error_Error, { id: `${id}-error`, error: !validity && errorText }), o("div", Object.assign({ className: css_className('form-control__wrapper') }, { children: [o("label", Object.assign({ htmlFor: id, className: labelClass }, { children: labelText })), children] }))] }));
+const FormControlWrapper = ({ contentHint, id, labelText, labelClass, validity, errorText, children, }) => {
+    return (o(preact_module/* Fragment */.HY, { children: [contentHint && (o("span", { id: `${id}-content-hint`, className: css_className('input__content-hint'), children: contentHint })), o(error_Error, { id: `${id}-error`, error: !validity && errorText }), o("div", { className: css_className('form-control__wrapper'), children: [o("label", { htmlFor: id, className: css_className(labelClass), children: labelText }), children] })] }));
 };
 /* harmony default export */ var wrapper = (FormControlWrapper);
 
@@ -26074,7 +26519,7 @@ function Input(_a) {
         describedByIds.push(`${id}-error`);
     }
     // todo: destructure Field
-    return (o(wrapper, Object.assign({ id: id, contentHint: contentHint, validity: !hasError, errorText: error, labelText: labelText, labelClass: labelClass }, { children: o("input", Object.assign({ id: id, name: name, type: type, "aria-invalid": hasError ? 'true' : 'false', "aria-describedby": describedByIds.join(' ') || null }, field, props)) })));
+    return (o(wrapper, { id: id, contentHint: contentHint, validity: !hasError, errorText: error, labelText: labelText, labelClass: labelClass, children: o("input", Object.assign({ id: id, name: name, type: type, "aria-invalid": hasError ? 'true' : 'false', "aria-describedby": describedByIds.join(' ') || null }, field, props)) }));
 }
 /* harmony default export */ var input = (Input);
 
@@ -26433,14 +26878,14 @@ const OptionsButton = () => {
 
 
 
-const TranslationOption = ({ label, checked, description, onChange, id, }) => {
+const TranslationOption = ({ label, checked, description, onChange, id, itemClassName, }) => {
     const onKeyDown = (e) => {
         if (e.code === 'Space' || e.code === 'Enter') {
             e.preventDefault();
             onChange();
         }
     };
-    return (o("li", Object.assign({ className: css_className('translation-options__item'), "aria-selected": checked, role: "option", tabIndex: 0, onClick: onChange, onKeyDown: onKeyDown, id: id }, { children: [o(layout_icon, { alt: "", name: "check", size: "16" }), label, " ", description && o("span", { children: ["(", description, ")"] })] })));
+    return (o("li", { className: css_className([itemClassName, 'translation-options__item']), "aria-selected": checked, role: "option", tabIndex: 0, onClick: onChange, onKeyDown: onKeyDown, id: id, children: [o(layout_icon, { alt: "", name: "check", size: "16" }), label, " ", description && o("span", { children: ["(", description, ")"] })] }));
 };
 /* harmony default export */ var translation_option = (TranslationOption);
 
@@ -26452,12 +26897,13 @@ const TranslationOption = ({ label, checked, description, onChange, id, }) => {
 
 
 
+const isChecked = (language, currentLocale, isOriginal) => currentLocale === language.locale || (!currentLocale && isOriginal);
 const TranslationOptions = ({ onChange, describedById, }) => {
     const { context: { locale: defaultLocale }, } = useConfig();
     const { t } = useI18n();
     const { focusContainer } = useTranslationsContainer();
     const { languages, currentLocale, enableTranslations, disableTranslations } = useTranslations();
-    const handleChange = ({ locale }) => () => {
+    const handleChange = (locale) => () => {
         if (locale === currentLocale || defaultLocale === locale) {
             disableTranslations();
         }
@@ -26467,22 +26913,25 @@ const TranslationOptions = ({ onChange, describedById, }) => {
         onChange();
         focusContainer();
     };
-    const sortedLanguages = (0,hooks_module/* useMemo */.Ye)(() => {
-        return [...languages].sort((a, b) => {
-            if (a.locale === defaultLocale)
-                return -1;
-            if (b.locale === defaultLocale)
-                return 1;
-            return a.nativeName.localeCompare(b.nativeName, undefined, {
-                sensitivity: 'base',
-            });
-        });
-    }, [languages, defaultLocale]);
-    return (o("ul", Object.assign({ "aria-describedby": describedById, role: "listbox", tabIndex: -1, className: css_className('translation-options') }, { children: sortedLanguages.map((language, idx) => {
-            const isOriginal = idx === 0;
-            const checked = currentLocale === language.locale || (!currentLocale && isOriginal);
-            return (o(translation_option, { id: language.locale, label: language.nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(language) }, language.locale));
-        }) })));
+    const { primaryLanguages, remainingLanguages } = (0,compat_module.useMemo)(() => languages.reduce((acc, language) => {
+        const isOriginal = language.locale === defaultLocale;
+        const checked = isChecked(language, currentLocale, isOriginal);
+        if (language.locale !== defaultLocale) {
+            acc.remainingLanguages.push(Object.assign(Object.assign({}, language), { checked, isOriginal }));
+        }
+        const selectedIdx = acc.remainingLanguages.findIndex((l) => l.locale === currentLocale);
+        if (isOriginal || (checked && selectedIdx > 4)) {
+            acc.primaryLanguages.push(Object.assign(Object.assign({}, language), { checked, isOriginal }));
+        }
+        return acc;
+    }, {
+        primaryLanguages: [],
+        remainingLanguages: [],
+    }), [currentLocale, defaultLocale, languages]);
+    return (o("ul", { "aria-describedby": describedById, role: "listbox", tabIndex: -1, className: css_className('translation-options'), children: [primaryLanguages.map(({ locale, nativeName, checked, isOriginal }, idx) => (o(translation_option, { id: locale, label: nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(locale), itemClassName: css_className({
+                    'translation-options__item--original': isOriginal,
+                    'translation-options__item--selected': checked && idx !== 0,
+                }) }, locale))), remainingLanguages.map(({ locale, nativeName, checked, isOriginal }) => (o(translation_option, { id: locale, label: nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(locale) }, locale)))] }));
 };
 /* harmony default export */ var translation_options = (TranslationOptions);
 
@@ -26495,7 +26944,7 @@ const TranslationOptions = ({ onChange, describedById, }) => {
 function TranslationsOptionsDialog({ onClose, position, }) {
     const { t } = useI18n();
     const descriptionId = useGeneratedId();
-    return (o(options_frame, Object.assign({ onCancel: onClose, headingText: t('translations.menu.title'), cancelButtonText: t('translations.settings.cancelButtonText'), description: t('translations.menu.description'), descriptionId: descriptionId, position: position, disableButtonFocusing: true }, { children: o(translation_options, { describedById: descriptionId, onChange: onClose }) })));
+    return (o(options_frame, { onCancel: onClose, headingText: t('translations.menu.title'), cancelButtonText: t('translations.settings.cancelButtonText'), description: t('translations.menu.description'), descriptionId: descriptionId, position: position, disableButtonFocusing: true, children: o(translation_options, { describedById: descriptionId, onChange: onClose }) }));
 }
 /* harmony default export */ var options_dialog = (TranslationsOptionsDialog);
 
@@ -26535,11 +26984,11 @@ function TranslationsOptionsButton({ children, position = {
             e.preventDefault();
         }
     };
-    return (o("div", Object.assign({ className: css_className('translations__container'), onKeyDown: onMainKeyDownHandler }, { children: [o(in_out_transition, Object.assign({ transitionStartState: transitionStartStates.notRendered, isActive: menuIsOpen }, { children: o("div", Object.assign({ className: css_className('options__dialog'), role: "dialog" }, { children: o(options_dialog, { onClose: handleDialogClose, position: position }) })) })), o("button", Object.assign({ type: "button", className: css_className([
+    return (o("div", { className: css_className('translations__container'), onKeyDown: onMainKeyDownHandler, children: [o(in_out_transition, { transitionStartState: transitionStartStates.notRendered, isActive: menuIsOpen, children: o("div", { className: css_className('options__dialog'), role: "dialog", children: o(options_dialog, { onClose: handleDialogClose, position: position }) }) }), o("button", { type: "button", className: css_className([
                     'button',
                     'chat__options__button',
                     ...classNames,
-                ]), id: toggleButtonId, onClick: handleToggleClick, onKeyDown: handleToggleKeyDown, ref: toggleButton, "aria-haspopup": "dialog", "aria-expanded": menuIsOpen }, { children: children }))] })));
+                ]), id: toggleButtonId, onClick: handleToggleClick, onKeyDown: handleToggleKeyDown, ref: toggleButton, "aria-haspopup": "dialog", "aria-expanded": menuIsOpen, children: children })] }));
 }
 
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/app-options/index.js
@@ -26609,7 +27058,7 @@ const UnreadMessagesButton = () => {
     const { scrollToRef, unreadIds } = (0,hooks_module/* useContext */.qp)(chat_scroll_context);
     const { isMinimized } = useVisibility();
     const { t } = useI18n();
-    return (o(in_out_transition, Object.assign({ isActive: !!unreadIds.length && !isMinimized }, { children: o("div", Object.assign({ className: css_className('unread-messages') }, { children: o("button", Object.assign({ type: "button", className: css_className('button', 'button--primary'), onClick: scrollToRef }, { children: [t('message.unreadMessagesCount', { unreadCount: unreadIds.length }), o(layout_icon, { name: "chevronDown", size: "32", alt: "" })] })) })) })));
+    return (o(in_out_transition, { isActive: !!unreadIds.length && !isMinimized, children: o("div", { className: css_className('unread-messages'), children: o("button", { type: "button", className: css_className('button', 'button--primary'), onClick: scrollToRef, children: [t('message.unreadMessagesCount', { unreadCount: unreadIds.length }), o(layout_icon, { name: "chevronDown", size: "32", alt: "" })] }) }) }));
 };
 /* harmony default export */ var unread_messages_button = (UnreadMessagesButton);
 
@@ -26764,13 +27213,13 @@ const ChatScrollProvider = ({ children }) => {
         return acc;
     }, {}), [events]);
     const { scrollToRef, scrollToBottom, containerRef, unreadIds } = use_chat_scroll(eventRefs);
-    return (o(chat_scroll_context.Provider, Object.assign({ value: {
+    return (o(chat_scroll_context.Provider, { value: {
             eventRefs,
             unreadIds,
             scrollToRef,
             scrollToBottom,
             containerRef,
-        } }, { children: o("div", Object.assign({ className: css_className('chat__container') }, { children: [o("div", Object.assign({ className: css_className('chat__container__scroll-area'), ref: containerRef }, { children: children })), o(unread_messages_button, {})] })) })));
+        }, children: o("div", { className: css_className('chat__container'), children: [o("div", { className: css_className('chat__container__scroll-area'), ref: containerRef, children: children }), o(unread_messages_button, {})] }) }));
 };
 /* harmony default export */ var chat_scroll_provider = (ChatScrollProvider);
 
@@ -27064,13 +27513,13 @@ function TextEntryForm({ controlName, skipLinkId }) {
         // When a message is submitted, the keyboard should be prevented from closing on mobile devices
         event.preventDefault();
     };
-    return (o(form_controls_form, Object.assign({ className: css_className('entry-form'), disableValidationClasses: true, noValidate: "true" }, { children: [o("div", Object.assign({ className: css_className([
+    return (o(form_controls_form, { className: css_className('entry-form'), disableValidationClasses: true, noValidate: "true", children: [o("div", { className: css_className([
                     'input--text__container',
                     ...(reachedCharacterWarning && !reachedCharacterLimit
                         ? ['character-warning']
                         : []),
                     ...(reachedCharacterLimit ? ['character-exceeded'] : []),
-                ]) }, { children: [o(input, { id: skipLinkId, type: "text", name: controlName, className: css_className('input__text'), autocomplete: "off", placeholder: placeholder, labelText: label, labelClass: css_className(labelClass), "aria-invalid": hasCharacterLimit ? reachedCharacterLimit : null, onKeyUp: handleKeyUp, onFocus: handleFocus }), o("div", Object.assign({ className: css_className('character-count') }, { children: reachedCharacterWarning && o("span", { children: remainingChars }) }))] })), o("button", Object.assign({ className: css_className('button', 'input__submit'), type: "submit", onPointerDown: handlePointerDown, "aria-disabled": !hasValue || reachedCharacterLimit ? 'true' : null }, { children: o(layout_icon, { name: "send", size: "32", alt: t('input.sendMessage') }) }))] })));
+                ]), children: [o(input, { id: skipLinkId, type: "text", name: controlName, className: css_className('input__text'), autocomplete: "off", placeholder: placeholder, labelText: label, labelClass: css_className(labelClass), "aria-invalid": hasCharacterLimit ? reachedCharacterLimit : null, onKeyUp: handleKeyUp, onFocus: handleFocus }), o("div", { className: css_className('character-count'), children: reachedCharacterWarning && o("span", { children: remainingChars }) })] }), o("button", { className: css_className('button', 'input__submit'), type: "submit", onPointerDown: handlePointerDown, "aria-disabled": !hasValue || reachedCharacterLimit ? 'true' : null, children: o(layout_icon, { name: "send", size: "32", alt: t('input.sendMessage') }) })] }));
 }
 
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/entry/text-entry/index.js
@@ -27738,7 +28187,7 @@ const CollapseButton = () => {
 
 const ChatStatus = ({ children, handleClose, title, closeButtonText, srCloseButtonText, id, }) => {
     const headingId = useGeneratedId();
-    return (o("section", Object.assign({ tabIndex: -1, id: id, "aria-labelledby": title ? headingId : undefined, className: css_className('chat-status', !title && 'chat-status--condensed') }, { children: [o("div", Object.assign({ className: css_className('chat-status__body') }, { children: [title ? (o("h2", Object.assign({ className: css_className('chat-status__title'), id: headingId }, { children: title }))) : null, children] })), typeof handleClose === 'function' && (o("button", Object.assign({ type: "button", onClick: handleClose, className: css_className('button', 'button--tertiary', 'chat-status__close') }, { children: [closeButtonText || o(layout_icon, { name: "close", size: "16", alt: "" }), srCloseButtonText && (o("span", Object.assign({ className: css_className('visually-hidden') }, { children: srCloseButtonText })))] })))] })));
+    return (o("section", { tabIndex: -1, id: id, "aria-labelledby": title ? headingId : undefined, className: css_className('chat-status', !title && 'chat-status--condensed'), children: [o("div", { className: css_className('chat-status__body'), children: [title ? (o("h2", { className: css_className('chat-status__title'), id: headingId, children: title })) : null, children] }), typeof handleClose === 'function' && (o("button", { type: "button", onClick: handleClose, className: css_className('button', 'button--tertiary', 'chat-status__close'), children: [closeButtonText || o(layout_icon, { name: "close", size: "16", alt: "" }), srCloseButtonText && (o("span", { className: css_className('visually-hidden'), children: srCloseButtonText }))] }))] }));
 };
 /* harmony default export */ var chat_status = (ChatStatus);
 
@@ -27773,7 +28222,7 @@ function TranslationChatStatus() {
 
 
 
-const ChatStatusAction = ({ handleClick, icon, title, srButtonText, }) => (o("button", Object.assign({ type: "button", onClick: handleClick, className: css_className('button', 'button--primary', 'chat-status__button') }, { children: [o(layout_icon, { name: icon, size: "16", alt: "" }), title, srButtonText && (o("span", Object.assign({ className: css_className('visually-hidden') }, { children: srButtonText })))] })));
+const ChatStatusAction = ({ handleClick, icon, title, srButtonText, }) => (o("button", { type: "button", onClick: handleClick, className: css_className('button', 'button--primary', 'chat-status__button'), children: [o(layout_icon, { name: icon, size: "16", alt: "" }), title, srButtonText && (o("span", { className: css_className('visually-hidden'), children: srButtonText }))] }));
 /* harmony default export */ var chat_status_action = (ChatStatusAction);
 
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/translation-proposal/index.tsx
@@ -27787,7 +28236,7 @@ function TranslationProposal() {
     if (!showProposal) {
         return null;
     }
-    return (o(chat_status, Object.assign({ handleClose: dismissTranslationProposal, srCloseButtonText: translationProposal.srDismissButtonText, id: id, title: translationProposal.titleLabel }, { children: o(chat_status_action, { handleClick: activateTranslationProposal, icon: "newTranslation", title: translationProposal.buttonLabel }) })));
+    return (o(chat_status, { handleClose: dismissTranslationProposal, srCloseButtonText: translationProposal.srDismissButtonText, id: id, title: translationProposal.titleLabel, children: o(chat_status_action, { handleClick: activateTranslationProposal, icon: "newTranslation", title: translationProposal.buttonLabel }) }));
 }
 
 ;// CONCATENATED MODULE: ./src/javascripts/domains/translations/components/translation-status.tsx
@@ -28059,10 +28508,14 @@ const WindowOpenButton = _ref => {
       "aria-label": ariaLabel,
       "aria-hidden": isOpen,
       onClick: handleClick,
-      children: [o("span", {
-        className: css_className('message-count'),
-        "aria-hidden": "true",
-        children: !!count && count
+      children: [o(in_out_transition, {
+        isActive: !!count,
+        transitionStartState: transitionStartStates.notRendered,
+        children: o("span", {
+          className: css_className('message-count'),
+          "aria-hidden": "true",
+          children: count
+        })
       }), o(ButtonIcon, {})]
     })
   });
@@ -28097,7 +28550,7 @@ const WindowView = () => {
             },
         },
     }), [continueChatText]);
-    return (o(preact_module/* Fragment */.HY, { children: [o(window_open_button, { onClick: openChat }), o(in_out_transition, Object.assign({ isActive: preChat && !isOpen && !userHasResponded, exitAfter: getDelay(preChat, 'exitAfter'), enterDelay: getDelay(preChat, 'enterDelay'), transitionStartState: transitionStartStates.rendered }, { children: o("div", Object.assign({ className: css_className('unstarted-wrapper', 'unstarted-wrapper--window') }, { children: o(PreChatMessages, {}) })) })), o(in_out_transition, Object.assign({ isActive: continueChat && !isOpen && userHasResponded, exitAfter: getDelay(continueChat, 'exitAfter'), enterDelay: getDelay(continueChat, 'enterDelay'), transitionStartState: transitionStartStates.notRendered }, { children: o("div", Object.assign({ className: css_className('unstarted-wrapper', 'unstarted-wrapper--window', 'unstarted-wrapper--continue') }, { children: o(event_text, { event: continueChatEvent }) })) })), o(in_out_transition, Object.assign({ isActive: isOpen, transitionStartState: transitionStartStates.notRendered }, { children: o(chat, { children: o(chat_frame, { children: o(conversation, {}) }) }) }))] }));
+    return (o(preact_module/* Fragment */.HY, { children: [o(window_open_button, { onClick: openChat }), o(in_out_transition, { isActive: preChat && !isOpen && !userHasResponded, exitAfter: getDelay(preChat, 'exitAfter'), enterDelay: getDelay(preChat, 'enterDelay'), transitionStartState: transitionStartStates.rendered, children: o("div", { className: css_className('unstarted-wrapper', 'unstarted-wrapper--window'), children: o(PreChatMessages, {}) }) }), o(in_out_transition, { isActive: continueChat && !isOpen && userHasResponded, exitAfter: getDelay(continueChat, 'exitAfter'), enterDelay: getDelay(continueChat, 'enterDelay'), transitionStartState: transitionStartStates.notRendered, children: o("div", { className: css_className('unstarted-wrapper', 'unstarted-wrapper--window', 'unstarted-wrapper--continue'), children: o(event_text, { event: continueChatEvent }) }) }), o(in_out_transition, { isActive: isOpen, transitionStartState: transitionStartStates.notRendered, children: o(chat, { children: o(chat_frame, { children: o(conversation, {}) }) }) })] }));
 };
 /* harmony default export */ var window_view = (WindowView);
 
@@ -28313,7 +28766,7 @@ const View = ({ children }) => {
     if (userHasResponded) {
         classNames.push('app--user-responded');
     }
-    return (isVisible && (o("div", Object.assign({ className: css_className(classNames), lang: blockLang, tabIndex: -1, "data-nosnippet": true, style: { zIndex }, ref: containerElementRef }, { children: children || o(ViewComponent, {}) }))));
+    return (isVisible && (o("div", { className: css_className(classNames), lang: blockLang, tabIndex: -1, "data-nosnippet": true, style: { zIndex }, ref: containerElementRef, children: children || o(ViewComponent, {}) })));
 };
 /* harmony default export */ var view = (View);
 
@@ -28403,14 +28856,16 @@ class Engine {
             yield store.dispatch(initializeConfig());
             try {
                 const { locale } = yield store.dispatch(initializeApp()).unwrap();
-                yield store.dispatch(setLocale(locale));
+                if (locale) {
+                    yield store.dispatch(setLocale(locale));
+                }
             }
             catch (rejectedValueOrSerializedError) {
                 // nothing to do
             }
             store.dispatch(initializeVisibility());
             if (View) {
-                (0,preact_module/* render */.sY)(o(seamly_core, Object.assign({ eventBus: this.eventBus, store: store, api: this.api }, { children: o(View, {}) })), this.parentElement);
+                (0,preact_module/* render */.sY)(o(seamly_core, { eventBus: this.eventBus, store: store, api: this.api, children: o(View, {}) }), this.parentElement);
             }
             else {
                 (0,preact_module/* render */.sY)(o(chat_app, { config: renderConfig, eventBus: this.eventBus, store: store, api: this.api }), this.parentElement);