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

package/build/dist/lib/style-guide.js

@@ -2104,6 +2104,7 @@ _ConversationConnector_connectionListeners = new WeakMap(), _ConversationConnect
     return !complete;
   }), "f");
 };
+/* harmony default export */ const conversation_connector = (ConversationConnector);
 ;// CONCATENATED MODULE: ./src/javascripts/api/index.ts
 var api_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
@@ -2143,6 +2144,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) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(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;
 
 
@@ -2230,7 +2239,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 = {
@@ -2260,7 +2269,8 @@ class API {
     });
   }
   getConversationUrl() {
-    return this.store.get('conversationUrl');
+    const conversationUrl = this.store.get('conversationUrl');
+    return conversationUrl;
   }
   hasConversation() {
     return !!this.getConversationUrl();
@@ -2368,7 +2378,7 @@ class API {
         if (error.status >= 500) {
           throw new SeamlyGeneralError(error);
         }
-        throw error;
+        throw new ApiError(error);
       }
     });
   }
@@ -2477,7 +2487,7 @@ class API {
         if (error.status >= 500) {
           throw new SeamlyGeneralError(error);
         }
-        throw error;
+        throw new ApiError(error);
       }
     });
   }
@@ -2503,6 +2513,7 @@ class API {
     this.conversation.pushToChannel(command, buildPayload(command, payload), 10000);
   }
   sendContext(context) {
+    var _a;
     const {
       locale,
       variables
@@ -2524,19 +2535,29 @@ class API {
     if (Object.keys(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', Object.assign(Object.assign({}, configLocale ? {
+      locale: configLocale
+    } : {}), restPayload), false);
   }
 }
 _API_ready = new WeakMap(), _API_externalId = new WeakMap(), _API_conversationAuthToken = new WeakMap(), _API_layoutMode = new WeakMap(), _API_config = new WeakMap(), _API_getLocale = new WeakMap(), _API_instances = new WeakSet(), _API_getAccessToken = function _API_getAccessToken() {
-  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) {
@@ -2601,7 +2622,7 @@ _API_ready = new WeakMap(), _API_externalId = new WeakMap(), _API_conversationAu
   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(),
@@ -2637,15 +2658,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 */ const 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.
@@ -2662,13 +2720,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!');
@@ -2693,16 +2746,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;
   };
@@ -3289,16 +3363,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 {
@@ -3327,7 +3405,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.
  *
@@ -3337,7 +3414,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
@@ -6378,6 +6456,62 @@ const setLocale = createAsyncThunk('setLocale', (locale, {
     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 = setTimeout(() => {
+      invoke();
+      debounceTimer = null;
+    }, wait);
+    if (immediate) {
+      return true;
+    }
+    cancel();
+    //  Start max wait condition resolution
+    if (maxWait && !maxWaitTimer) {
+      maxWaitTimer = setTimeout(invoke, maxWait);
+    }
+    return new Promise(res => {
+      resolve = res;
+    });
+  };
+  return createAsyncThunk(typePrefix, payloadCreator, {
+    condition: debounceExecutionCondition
+  });
+};
+/* harmony default export */ const 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
@@ -6934,8 +7068,9 @@ const setVisibility = createAsyncThunk('setVisibility', (requestedVisibility, {
   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, Object.assign(Object.assign({}, api.store.get(StoreKey) || {}), {
+  api.store.set(StoreKey, Object.assign(Object.assign({}, visibility || {}), {
     [layoutMode]: requestedVisibility
   }));
   if (requestedVisibility) {
@@ -6999,6 +7134,7 @@ var app_actions_awaiter = undefined && undefined.__awaiter || function (thisArg,
 
 
 
+
 const initializeApp = createAsyncThunk('initializeApp', (_, {
   extra: {
     api,
@@ -7064,14 +7200,14 @@ const initializeApp = createAsyncThunk('initializeApp', (_, {
     });
   }
 }));
-const resetApp = createAsyncThunk('resetApp', (_, {
+const resetApp = create_debounced_async_thunk('resetApp', (_, {
   dispatch,
   extra: {
     api
   }
 }) => app_actions_awaiter(void 0, void 0, void 0, function* () {
   yield api.disconnect();
-  yield api.clearStore();
+  api.clearStore();
   dispatch(resetConfig());
   yield dispatch(initializeConfig());
   try {
@@ -7079,11 +7215,14 @@ const resetApp = createAsyncThunk('resetApp', (_, {
       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
 
 
@@ -7119,12 +7258,75 @@ const {
   setHasResponded
 } = appSlice.actions;
 /* harmony default export */ const 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))(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', (_, {
+  extra: {
+    api
+  },
+  rejectWithValue
+}) => 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, {
+    getState
+  }) {
+    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
 };
@@ -7138,7 +7340,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, {
+    builder.addCase(initializeConfig.pending, () => slice_initialState).addMatcher(isAnyOf(initializeApp.rejected, initializeConfig.rejected, setLocale.rejected, setVisibility.rejected, initializeVisibility.rejected, getConversation.rejected), (state, {
       payload
     }) => {
       state.error = payload;
@@ -7775,7 +7977,7 @@ const {
 } = storeSlice.actions;
 /* harmony default export */ const store_slice = (storeSlice.reducer);
 ;// 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) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
@@ -7818,7 +8020,7 @@ const updateState = (state, config) => {
     {
       messages
     } = _a,
-    partialConfig = __rest(_a, ["messages"]);
+    partialConfig = slice_rest(_a, ["messages"]);
   let newState = state;
   if (Object.keys(partialConfig).length > 0) {
     newState = Object.assign(Object.assign({}, newState), partialConfig);
@@ -7852,13 +8054,15 @@ const configSlice = createSlice({
         preChat,
         agentParticipant,
         userParticipant,
-        startChatIcon
+        startChatIcon,
+        locale
       }
     }) => {
       state.preChatEvents = preChat.map(payload => ({
         type: 'message',
         payload
       }));
+      state.context.locale = locale;
       state.agentParticipant = agentParticipant;
       state.userParticipant = userParticipant;
       state.startChatIcon = startChatIcon;
@@ -8300,7 +8504,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 = [...feature.languages].sort((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, {
       payload
     }) => {
@@ -9536,6 +9746,9 @@ function useInterrupt() {
 
 
 
+
+
+
 function useSessionExpiredCommand() {
   const {
     meta: {
@@ -9543,13 +9756,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_.useRef)(0);
+  const limitTimer = (0,hooks_.useRef)(null);
   (0,hooks_.useEffect)(() => {
     if (isExpiredError && seamlyCommands[action]) {
+      if (limit.current >= 10) {
+        limitTimer.current = setTimeout(() => {
+          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
 var use_seamly_chat_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
@@ -10377,7 +10612,7 @@ const EventParticipant = ({
       })
     }));
   }
-  if (showName) {
+  if (showName && participantName) {
     authorInfo.push((0,jsx_runtime_namespaceObject.jsx)("span", {
       className: css_className('message__author-name'),
       children: participantName
@@ -10457,108 +10692,61 @@ function MessageContainer({
   });
 }
 /* harmony default export */ const 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 = ({
-  id,
-  action,
-  buttonText,
-  description,
-  hasFocus,
-  image,
-  title,
-  isCarouselItem
-}) => {
-  const cardRef = (0,hooks_.useRef)(null);
-  const {
-    sendMessage,
-    sendAction,
-    emitEvent
-  } = use_seamly_commands();
-  const descriptionId = useGeneratedId();
-  const isMounted = (0,hooks_.useRef)();
-  const CardActionComponent = action.type === cardTypes.navigate ? 'a' : 'button';
-  const emitCardEvent = (0,hooks_.useCallback)(() => emitEvent(`action.${actionTypes.clickCard}`, {
-    type: actionTypes.clickCta,
-    originMessage: id,
-    action
-  }), [emitEvent, id, action]);
-  const handleClick = (0,hooks_.useCallback)(() => {
-    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_.useRef)(null);
+    const { sendMessage, sendAction, emitEvent } = use_seamly_commands();
+    const descriptionId = useGeneratedId();
+    const isMounted = (0,hooks_.useRef)(false);
+    const CardActionComponent = action.type === cardTypes.navigate ? 'a' : 'button';
+    const emitCardEvent = (0,hooks_.useCallback)(() => emitEvent(`action.${actionTypes.clickCard}`, {
+        type: actionTypes.clickCta,
+        originMessage: id,
+        action,
+    }), [emitEvent, id, action]);
+    const handleClick = (0,hooks_.useCallback)(() => {
+        emitCardEvent();
+        if (action.type === cardTypes.ask) {
+            sendMessage({ body: action.ask });
         }
-      });
-    }
-  }, [sendMessage, action, sendAction, emitCardEvent]);
-  const actionProps = (0,hooks_.useMemo)(() => action.type === cardTypes.navigate ? {
-    href: action.link,
-    rel: 'noopener noreferrer',
-    target: action.newTab ? '_blank' : '_self',
-    onClick: emitCardEvent
-  } : {
-    onClick: handleClick
-  }, [action, handleClick, emitCardEvent]);
-  (0,hooks_.useEffect)(() => {
-    if (isCarouselItem) {
-      if (hasFocus && isMounted.current) {
-        window.requestAnimationFrame(() => cardRef.current.focus());
-      } else {
-        cardRef.current.blur();
-      }
-    }
-    isMounted.current = true;
-  }, [hasFocus, isCarouselItem]);
-  return (0,jsx_runtime_namespaceObject.jsxs)("div", {
-    className: css_className('card__wrapper'),
-    id: id,
-    tabIndex: "-1" // set tabIndex of -1 so card can be focussed
-    ,
-    ref: cardRef,
-    children: [(0,jsx_runtime_namespaceObject.jsx)("img", {
-      className: css_className('card__image'),
-      src: image,
-      alt: ""
-    }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
-      className: css_className('card__content'),
-      id: id,
-      children: [title && (0,jsx_runtime_namespaceObject.jsx)("h2", {
-        className: css_className('card__title'),
-        children: title
-      }), description && (0,jsx_runtime_namespaceObject.jsx)("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 },
+            });
         }
-      }), (0,jsx_runtime_namespaceObject.jsx)(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_.useMemo)(() => action.type === cardTypes.navigate
+        ? {
+            href: action.link,
+            rel: 'noopener noreferrer',
+            target: action.newTab ? '_blank' : '_self',
+            onClick: emitCardEvent,
+        }
+        : {
+            onClick: handleClick,
+        }, [action, handleClick, emitCardEvent]);
+    (0,hooks_.useEffect)(() => {
+        if (isCarouselItem) {
+            if (hasFocus && isMounted.current) {
+                window.requestAnimationFrame(() => cardRef.current.focus());
+            }
+            else {
+                cardRef.current.blur();
+            }
+        }
+        isMounted.current = true;
+    }, [hasFocus, isCarouselItem]);
+    return ((0,jsx_runtime_namespaceObject.jsxs)("div", { className: css_className('card__wrapper'), id: id, tabIndex: -1, ref: cardRef, children: [image ? ((0,jsx_runtime_namespaceObject.jsx)("img", { className: css_className('card__image'), src: image, alt: "" })) : null, (0,jsx_runtime_namespaceObject.jsxs)("div", { className: css_className('card__content'), id: id, children: [title && (0,jsx_runtime_namespaceObject.jsx)("h2", { className: css_className('card__title'), children: title }), description && ((0,jsx_runtime_namespaceObject.jsx)("div", { className: css_className('card__description'), dangerouslySetInnerHTML: { __html: description } })), (0,jsx_runtime_namespaceObject.jsx)(CardActionComponent, Object.assign({ tabIndex: isCarouselItem && !hasFocus ? -1 : undefined, className: css_className('button', 'button--primary'), "aria-describedby": descriptionId }, actionProps, { children: buttonText }))] })] }));
 };
 /* harmony default export */ const card_component = (CardComponent);
+
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/card-message.js
 
 
@@ -11578,7 +11766,7 @@ const TimeIndicator = ({
 /* harmony default export */ const 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
@@ -11758,7 +11946,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,
@@ -11767,16 +11975,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;
 };
@@ -12019,7 +12239,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;
@@ -12044,7 +12264,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);
@@ -12063,32 +12283,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;
 };
@@ -12119,7 +12339,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
 */
 
@@ -12205,10 +12425,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
@@ -12292,8 +12512,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: [],
@@ -12310,7 +12533,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
 
@@ -12329,7 +12554,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.
@@ -12424,14 +12651,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.
@@ -12442,30 +12696,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)];
         }
       };
     });
@@ -12478,6 +12726,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) {
@@ -12493,6 +12754,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();
@@ -12503,64 +12765,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) {
@@ -12583,8 +12804,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))) {
@@ -12602,7 +12823,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()
@@ -12612,8 +12833,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))) {
@@ -12631,7 +12852,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()
@@ -12643,6 +12864,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
@@ -13529,11 +13897,38 @@ 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 ((0,jsx_runtime_namespaceObject.jsx)("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: (0,jsx_runtime_namespaceObject.jsx)(seamly_activity_event_context.Provider, Object.assign({ value: onActivityHandler }, { children: children })) })));
+    return ((0,jsx_runtime_namespaceObject.jsx)("div", { className: css_className('activity-monitor'), tabIndex: -1, onMouseDown: onActivityHandler, onKeyUp: onActivityHandler, onTouchStart: onActivityHandler, onMouseMove: onActivityHandler, onWheel: onActivityHandler, onPointerDown: onActivityHandler, onPointerMove: onActivityHandler, children: (0,jsx_runtime_namespaceObject.jsx)(seamly_activity_event_context.Provider, { value: onActivityHandler, children: children }) }));
 };
 /* harmony default export */ const seamly_activity_monitor = (SeamlyActivityMonitor);
 
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/core/seamly-event-subscriber.ts
+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))(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) && e.indexOf(p) < 0) t[p] = s[p];
@@ -13554,13 +13949,13 @@ var seamly_event_subscriber_rest = undefined && undefined.__rest || function (s,
 
 
 
+
 const EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video'];
 const SeamlyEventSubscriber = () => {
   const api = seamly_api_hooks_useSeamlyApiContext();
   const syncChannelRef = (0,hooks_.useRef)();
   const messageChannelRef = (0,hooks_.useRef)();
-  const dispatch = useDispatch();
-  const events = useEvents();
+  const dispatch = useAppDispatch();
   const eventBus = (0,hooks_.useContext)(SeamlyEventBusContext);
   const prevEmittedEventId = (0,hooks_.useRef)(null);
   const {
@@ -13805,31 +14200,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 */ const seamly_event_subscriber = (SeamlyEventSubscriber);
@@ -13936,7 +14319,7 @@ const SeamlyFileUpload = ({ children }) => {
             uploadHandle,
         }));
     }, [addImageToSessionStorage, addUploadBubble, api, dispatch, t]);
-    return ((0,jsx_runtime_namespaceObject.jsx)(seamly_file_upload_context.Provider, Object.assign({ value: onUploadFileHandler }, { children: children })));
+    return ((0,jsx_runtime_namespaceObject.jsx)(seamly_file_upload_context.Provider, { value: onUploadFileHandler, children: children }));
 };
 /* harmony default export */ const seamly_file_upload = (SeamlyFileUpload);
 
@@ -14327,7 +14710,7 @@ const SeamlyCore = ({ store, children, eventBus, api }) => {
     (0,hooks_.useErrorBoundary)((error) => {
         store.dispatch(catchError(error));
     });
-    return ((0,jsx_runtime_namespaceObject.jsx)(components_Provider, Object.assign({ store: store }, { children: (0,jsx_runtime_namespaceObject.jsx)(SeamlyEventBusContext.Provider, Object.assign({ value: eventBus }, { children: (0,jsx_runtime_namespaceObject.jsx)(SeamlyApiContext.Provider, Object.assign({ value: api }, { children: (0,jsx_runtime_namespaceObject.jsx)(seamly_live_region, { children: (0,jsx_runtime_namespaceObject.jsx)(seamly_chat, { children: (0,jsx_runtime_namespaceObject.jsxs)(component_filter, { children: [(0,jsx_runtime_namespaceObject.jsx)(seamly_initializer, {}), (0,jsx_runtime_namespaceObject.jsx)(seamly_event_subscriber, {}), (0,jsx_runtime_namespaceObject.jsx)(seamly_read_state, {}), (0,jsx_runtime_namespaceObject.jsx)(seamly_new_notifications, {}), (0,jsx_runtime_namespaceObject.jsx)(seamly_idle_detach_counter, {}), (0,jsx_runtime_namespaceObject.jsxs)(seamly_activity_monitor, { children: [(0,jsx_runtime_namespaceObject.jsx)(seamly_instance_functions_loader, {}), (0,jsx_runtime_namespaceObject.jsx)(seamly_file_upload, { children: children })] })] }) }) }) })) })) })));
+    return ((0,jsx_runtime_namespaceObject.jsx)(components_Provider, { store: store, children: (0,jsx_runtime_namespaceObject.jsx)(SeamlyEventBusContext.Provider, { value: eventBus, children: (0,jsx_runtime_namespaceObject.jsx)(SeamlyApiContext.Provider, { value: api, children: (0,jsx_runtime_namespaceObject.jsx)(seamly_live_region, { children: (0,jsx_runtime_namespaceObject.jsx)(seamly_chat, { children: (0,jsx_runtime_namespaceObject.jsxs)(component_filter, { children: [(0,jsx_runtime_namespaceObject.jsx)(seamly_initializer, {}), (0,jsx_runtime_namespaceObject.jsx)(seamly_event_subscriber, {}), (0,jsx_runtime_namespaceObject.jsx)(seamly_read_state, {}), (0,jsx_runtime_namespaceObject.jsx)(seamly_new_notifications, {}), (0,jsx_runtime_namespaceObject.jsx)(seamly_idle_detach_counter, {}), (0,jsx_runtime_namespaceObject.jsxs)(seamly_activity_monitor, { children: [(0,jsx_runtime_namespaceObject.jsx)(seamly_instance_functions_loader, {}), (0,jsx_runtime_namespaceObject.jsx)(seamly_file_upload, { children: children })] })] }) }) }) }) }) }));
 };
 /* harmony default export */ const seamly_core = (SeamlyCore);
 
@@ -14388,9 +14771,9 @@ const useDebounce = (value, delay = 20) => {
 const getState = ({
   forms
 }) => forms;
-const getFormById = es_createSelector(getState, (_, {
+const getFormById = es_createSelector([getState, (_, {
   formId
-}) => formId, (forms, formId) => forms[formId]);
+}) => 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 => {
   const valuesObj = {};
@@ -14401,15 +14784,15 @@ const getFormValuesByFormId = es_createSelector(getFormControlsByFormId, control
   });
   return valuesObj;
 });
-const getControlValueByName = es_createSelector(getFormControlsByFormId, (_, {
+const getControlValueByName = es_createSelector([getFormControlsByFormId, (_, {
   name
-}) => name, (controls, name) => {
+}) => name], (controls, name) => {
   var _a;
   return (_a = controls[name]) === null || _a === void 0 ? void 0 : _a.value;
 });
-const getControlTouchedByName = es_createSelector(getFormControlsByFormId, (_, {
+const getControlTouchedByName = es_createSelector([getFormControlsByFormId, (_, {
   name
-}) => name, (controls, name) => {
+}) => name], (controls, name) => {
   var _a;
   return (_a = controls[name]) === null || _a === void 0 ? void 0 : _a.touched;
 });
@@ -14604,7 +14987,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_.useMemo)(() => (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_.useMemo)(() => (text === null || text === void 0 ? void 0 : text.label) ? 'label' : 'visually-hidden', [text === null || text === void 0 ? void 0 : text.label]);
   return {
     placeholder,
     label,
@@ -14649,14 +15032,14 @@ function AbortTransactionButton() {
         });
         clearEntryAbortTransaction();
     };
-    return ((0,jsx_runtime_namespaceObject.jsx)("li", Object.assign({ className: css_className([
+    return ((0,jsx_runtime_namespaceObject.jsx)("li", { className: css_className([
             'cvco-conversation__item',
             'cvco-conversation__item--abort-transaction',
-        ]) }, { children: (0,jsx_runtime_namespaceObject.jsx)("button", Object.assign({ className: css_className([
+        ]), children: (0,jsx_runtime_namespaceObject.jsx)("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: external "preact/compat"
@@ -14731,7 +15114,7 @@ const Event = ({ event, newParticipant }) => {
     if (newParticipant) {
         classNames.push('conversation__item--new-participant');
     }
-    return ((0,jsx_runtime_namespaceObject.jsxs)("li", Object.assign({ className: css_className(classNames), ref: containerRef }, { children: [event.timeIndicator && (0,jsx_runtime_namespaceObject.jsx)(time_indicator, { event: event }), (0,jsx_runtime_namespaceObject.jsx)(Component, Object.assign({ event: event }, { children: (0,jsx_runtime_namespaceObject.jsx)(SubComponent, { event: event }) }))] })));
+    return ((0,jsx_runtime_namespaceObject.jsxs)("li", { className: css_className(classNames), ref: containerRef, children: [event.timeIndicator && (0,jsx_runtime_namespaceObject.jsx)(time_indicator, { event: event }), (0,jsx_runtime_namespaceObject.jsx)(Component, { event: event, children: (0,jsx_runtime_namespaceObject.jsx)(SubComponent, { event: event }) })] }));
 };
 /* harmony default export */ const event_event = (Event);
 
@@ -14816,7 +15199,7 @@ const Conversation = () => {
         e.preventDefault();
         focusSkiplinkTarget();
     };
-    return ((0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, { children: [isOpen && ((0,jsx_runtime_namespaceObject.jsx)("a", Object.assign({ className: css_className('skip-link'), href: `#${skiplinkTargetId}`, onClick: onClickHandler }, { children: t('skiplinkText') }))), (0,jsx_runtime_namespaceObject.jsx)("div", Object.assign({ className: css_className('chat__body') }, { children: (0,jsx_runtime_namespaceObject.jsxs)("div", Object.assign({ className: css_className('conversation__container') }, { children: [(0,jsx_runtime_namespaceObject.jsx)(privacy_disclaimer, {}), (0,jsx_runtime_namespaceObject.jsxs)("ol", Object.assign({ className: css_className('conversation') }, { children: [(0,jsx_runtime_namespaceObject.jsx)(component_filter, { children: (0,jsx_runtime_namespaceObject.jsx)(Events, {}) }), debouncedIsLoading ? (0,jsx_runtime_namespaceObject.jsx)(loader, {}) : null, (0,jsx_runtime_namespaceObject.jsx)(AbortTransactionButton, {})] }))] })) }))] }));
+    return ((0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, { children: [isOpen && ((0,jsx_runtime_namespaceObject.jsx)("a", { className: css_className('skip-link'), href: `#${skiplinkTargetId}`, onClick: onClickHandler, children: t('skiplinkText') })), (0,jsx_runtime_namespaceObject.jsx)("div", { className: css_className('chat__body'), children: (0,jsx_runtime_namespaceObject.jsxs)("div", { className: css_className('conversation__container'), children: [(0,jsx_runtime_namespaceObject.jsx)(privacy_disclaimer, {}), (0,jsx_runtime_namespaceObject.jsxs)("ol", { className: css_className('conversation'), children: [(0,jsx_runtime_namespaceObject.jsx)(component_filter, { children: (0,jsx_runtime_namespaceObject.jsx)(Events, {}) }), debouncedIsLoading ? (0,jsx_runtime_namespaceObject.jsx)(loader, {}) : null, (0,jsx_runtime_namespaceObject.jsx)(AbortTransactionButton, {})] })] }) })] }));
 };
 /* harmony default export */ const conversation = (Conversation);
 
@@ -15211,16 +15594,16 @@ const OptionsFrame = ({ className: givenClassName, children, onCancel, headingTe
     (0,hooks_.useEffect)(() => {
         focusElement(container.current);
     }, [container]);
-    return ((0,jsx_runtime_namespaceObject.jsx)("section", Object.assign({ className: css_className('options', {
+    return ((0,jsx_runtime_namespaceObject.jsx)("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: (0,jsx_runtime_namespaceObject.jsxs)("div", Object.assign({ className: css_className('options__body') }, { children: [(0,jsx_runtime_namespaceObject.jsx)("h2", Object.assign({ id: mainHeadingId, className: css_className('options__title') }, { children: headingText })), (0,jsx_runtime_namespaceObject.jsxs)("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: (0,jsx_runtime_namespaceObject.jsxs)("div", { className: css_className('options__body'), children: [(0,jsx_runtime_namespaceObject.jsx)("h2", { id: mainHeadingId, className: css_className('options__title'), children: headingText }), (0,jsx_runtime_namespaceObject.jsxs)("button", { type: "button", onClick: onCancelHandler, "aria-describedby": mainHeadingId, className: css_className('button', 'options__close'), ref: (btn) => {
                         if (cancelButtonRef) {
                             cancelButtonRef.current = btn;
                         }
-                    } }, { children: [(0,jsx_runtime_namespaceObject.jsx)(layout_icon, { name: "close", size: "16", alt: "" }), (0,jsx_runtime_namespaceObject.jsx)("span", { children: cancelButtonText })] })), description ? ((0,jsx_runtime_namespaceObject.jsx)("p", Object.assign({ className: css_className('options__description'), id: descriptionId }, { children: description }))) : null, (0,jsx_runtime_namespaceObject.jsx)("div", Object.assign({ className: css_className('options__wrapper') }, { children: children }))] })) })));
+                    }, children: [(0,jsx_runtime_namespaceObject.jsx)(layout_icon, { name: "close", size: "16", alt: "" }), (0,jsx_runtime_namespaceObject.jsx)("span", { children: cancelButtonText })] }), description ? ((0,jsx_runtime_namespaceObject.jsx)("p", { className: css_className('options__description'), id: descriptionId, children: description })) : null, (0,jsx_runtime_namespaceObject.jsx)("div", { className: css_className('options__wrapper'), children: children })] }) }));
 };
 /* harmony default export */ const options_frame = (OptionsFrame);
 
@@ -15357,7 +15740,7 @@ function FormProvider(_a) {
         console.error('"onSubmit" is required.');
         return null;
     }
-    return ((0,jsx_runtime_namespaceObject.jsx)(context_Provider, Object.assign({}, props, { value: contextValue }, { children: children })));
+    return ((0,jsx_runtime_namespaceObject.jsx)(context_Provider, Object.assign({}, props, { value: contextValue, children: children })));
 }
 
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/form-controls/form.js
@@ -15423,8 +15806,8 @@ function error_Error({
 
 
 
-const FormControlWrapper = ({ contentHint, id, labelText, labelClass = css_className('label'), validity, errorText, children, }) => {
-    return ((0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, { children: [contentHint && ((0,jsx_runtime_namespaceObject.jsx)("span", Object.assign({ id: `${id}-content-hint`, className: css_className('input__content-hint') }, { children: contentHint }))), (0,jsx_runtime_namespaceObject.jsx)(error_Error, { id: `${id}-error`, error: !validity && errorText }), (0,jsx_runtime_namespaceObject.jsxs)("div", Object.assign({ className: css_className('form-control__wrapper') }, { children: [(0,jsx_runtime_namespaceObject.jsx)("label", Object.assign({ htmlFor: id, className: labelClass }, { children: labelText })), children] }))] }));
+const FormControlWrapper = ({ contentHint, id, labelText, labelClass, validity, errorText, children, }) => {
+    return ((0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, { children: [contentHint && ((0,jsx_runtime_namespaceObject.jsx)("span", { id: `${id}-content-hint`, className: css_className('input__content-hint'), children: contentHint })), (0,jsx_runtime_namespaceObject.jsx)(error_Error, { id: `${id}-error`, error: !validity && errorText }), (0,jsx_runtime_namespaceObject.jsxs)("div", { className: css_className('form-control__wrapper'), children: [(0,jsx_runtime_namespaceObject.jsx)("label", { htmlFor: id, className: css_className(labelClass), children: labelText }), children] })] }));
 };
 /* harmony default export */ const wrapper = (FormControlWrapper);
 
@@ -15459,7 +15842,7 @@ function Input(_a) {
         describedByIds.push(`${id}-error`);
     }
     // todo: destructure Field
-    return ((0,jsx_runtime_namespaceObject.jsx)(wrapper, Object.assign({ id: id, contentHint: contentHint, validity: !hasError, errorText: error, labelText: labelText, labelClass: labelClass }, { children: (0,jsx_runtime_namespaceObject.jsx)("input", Object.assign({ id: id, name: name, type: type, "aria-invalid": hasError ? 'true' : 'false', "aria-describedby": describedByIds.join(' ') || null }, field, props)) })));
+    return ((0,jsx_runtime_namespaceObject.jsx)(wrapper, { id: id, contentHint: contentHint, validity: !hasError, errorText: error, labelText: labelText, labelClass: labelClass, children: (0,jsx_runtime_namespaceObject.jsx)("input", Object.assign({ id: id, name: name, type: type, "aria-invalid": hasError ? 'true' : 'false', "aria-describedby": describedByIds.join(' ') || null }, field, props)) }));
 }
 /* harmony default export */ const input = (Input);
 
@@ -15807,14 +16190,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 ((0,jsx_runtime_namespaceObject.jsxs)("li", Object.assign({ className: css_className('translation-options__item'), "aria-selected": checked, role: "option", tabIndex: 0, onClick: onChange, onKeyDown: onKeyDown, id: id }, { children: [(0,jsx_runtime_namespaceObject.jsx)(layout_icon, { alt: "", name: "check", size: "16" }), label, " ", description && (0,jsx_runtime_namespaceObject.jsxs)("span", { children: ["(", description, ")"] })] })));
+    return ((0,jsx_runtime_namespaceObject.jsxs)("li", { className: css_className([itemClassName, 'translation-options__item']), "aria-selected": checked, role: "option", tabIndex: 0, onClick: onChange, onKeyDown: onKeyDown, id: id, children: [(0,jsx_runtime_namespaceObject.jsx)(layout_icon, { alt: "", name: "check", size: "16" }), label, " ", description && (0,jsx_runtime_namespaceObject.jsxs)("span", { children: ["(", description, ")"] })] }));
 };
 /* harmony default export */ const translation_option = (TranslationOption);
 
@@ -15826,12 +16209,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();
         }
@@ -15841,22 +16225,25 @@ const TranslationOptions = ({ onChange, describedById, }) => {
         onChange();
         focusContainer();
     };
-    const sortedLanguages = (0,hooks_.useMemo)(() => {
-        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 ((0,jsx_runtime_namespaceObject.jsx)("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 ((0,jsx_runtime_namespaceObject.jsx)(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_namespaceObject.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 ((0,jsx_runtime_namespaceObject.jsxs)("ul", { "aria-describedby": describedById, role: "listbox", tabIndex: -1, className: css_className('translation-options'), children: [primaryLanguages.map(({ locale, nativeName, checked, isOriginal }, idx) => ((0,jsx_runtime_namespaceObject.jsx)(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 }) => ((0,jsx_runtime_namespaceObject.jsx)(translation_option, { id: locale, label: nativeName, checked: checked, description: isOriginal && t('translations.settings.original'), onChange: handleChange(locale) }, locale)))] }));
 };
 /* harmony default export */ const translation_options = (TranslationOptions);
 
@@ -15869,7 +16256,7 @@ const TranslationOptions = ({ onChange, describedById, }) => {
 function TranslationsOptionsDialog({ onClose, position, }) {
     const { t } = useI18n();
     const descriptionId = useGeneratedId();
-    return ((0,jsx_runtime_namespaceObject.jsx)(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: (0,jsx_runtime_namespaceObject.jsx)(translation_options, { describedById: descriptionId, onChange: onClose }) })));
+    return ((0,jsx_runtime_namespaceObject.jsx)(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: (0,jsx_runtime_namespaceObject.jsx)(translation_options, { describedById: descriptionId, onChange: onClose }) }));
 }
 /* harmony default export */ const options_dialog = (TranslationsOptionsDialog);
 
@@ -15909,11 +16296,11 @@ function TranslationsOptionsButton({ children, position = {
             e.preventDefault();
         }
     };
-    return ((0,jsx_runtime_namespaceObject.jsxs)("div", Object.assign({ className: css_className('translations__container'), onKeyDown: onMainKeyDownHandler }, { children: [(0,jsx_runtime_namespaceObject.jsx)(in_out_transition, Object.assign({ transitionStartState: transitionStartStates.notRendered, isActive: menuIsOpen }, { children: (0,jsx_runtime_namespaceObject.jsx)("div", Object.assign({ className: css_className('options__dialog'), role: "dialog" }, { children: (0,jsx_runtime_namespaceObject.jsx)(options_dialog, { onClose: handleDialogClose, position: position }) })) })), (0,jsx_runtime_namespaceObject.jsx)("button", Object.assign({ type: "button", className: css_className([
+    return ((0,jsx_runtime_namespaceObject.jsxs)("div", { className: css_className('translations__container'), onKeyDown: onMainKeyDownHandler, children: [(0,jsx_runtime_namespaceObject.jsx)(in_out_transition, { transitionStartState: transitionStartStates.notRendered, isActive: menuIsOpen, children: (0,jsx_runtime_namespaceObject.jsx)("div", { className: css_className('options__dialog'), role: "dialog", children: (0,jsx_runtime_namespaceObject.jsx)(options_dialog, { onClose: handleDialogClose, position: position }) }) }), (0,jsx_runtime_namespaceObject.jsx)("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
@@ -15983,7 +16370,7 @@ const UnreadMessagesButton = () => {
     const { scrollToRef, unreadIds } = (0,hooks_.useContext)(chat_scroll_context);
     const { isMinimized } = useVisibility();
     const { t } = useI18n();
-    return ((0,jsx_runtime_namespaceObject.jsx)(in_out_transition, Object.assign({ isActive: !!unreadIds.length && !isMinimized }, { children: (0,jsx_runtime_namespaceObject.jsx)("div", Object.assign({ className: css_className('unread-messages') }, { children: (0,jsx_runtime_namespaceObject.jsxs)("button", Object.assign({ type: "button", className: css_className('button', 'button--primary'), onClick: scrollToRef }, { children: [t('message.unreadMessagesCount', { unreadCount: unreadIds.length }), (0,jsx_runtime_namespaceObject.jsx)(layout_icon, { name: "chevronDown", size: "32", alt: "" })] })) })) })));
+    return ((0,jsx_runtime_namespaceObject.jsx)(in_out_transition, { isActive: !!unreadIds.length && !isMinimized, children: (0,jsx_runtime_namespaceObject.jsx)("div", { className: css_className('unread-messages'), children: (0,jsx_runtime_namespaceObject.jsxs)("button", { type: "button", className: css_className('button', 'button--primary'), onClick: scrollToRef, children: [t('message.unreadMessagesCount', { unreadCount: unreadIds.length }), (0,jsx_runtime_namespaceObject.jsx)(layout_icon, { name: "chevronDown", size: "32", alt: "" })] }) }) }));
 };
 /* harmony default export */ const unread_messages_button = (UnreadMessagesButton);
 
@@ -16131,13 +16518,13 @@ const ChatScrollProvider = ({ children }) => {
         return acc;
     }, {}), [events]);
     const { scrollToRef, scrollToBottom, containerRef, unreadIds } = use_chat_scroll(eventRefs);
-    return ((0,jsx_runtime_namespaceObject.jsx)(chat_scroll_context.Provider, Object.assign({ value: {
+    return ((0,jsx_runtime_namespaceObject.jsx)(chat_scroll_context.Provider, { value: {
             eventRefs,
             unreadIds,
             scrollToRef,
             scrollToBottom,
             containerRef,
-        } }, { children: (0,jsx_runtime_namespaceObject.jsxs)("div", Object.assign({ className: css_className('chat__container') }, { children: [(0,jsx_runtime_namespaceObject.jsx)("div", Object.assign({ className: css_className('chat__container__scroll-area'), ref: containerRef }, { children: children })), (0,jsx_runtime_namespaceObject.jsx)(unread_messages_button, {})] })) })));
+        }, children: (0,jsx_runtime_namespaceObject.jsxs)("div", { className: css_className('chat__container'), children: [(0,jsx_runtime_namespaceObject.jsx)("div", { className: css_className('chat__container__scroll-area'), ref: containerRef, children: children }), (0,jsx_runtime_namespaceObject.jsx)(unread_messages_button, {})] }) }));
 };
 /* harmony default export */ const chat_scroll_provider = (ChatScrollProvider);
 
@@ -16428,13 +16815,13 @@ function TextEntryForm({ controlName, skipLinkId }) {
         // When a message is submitted, the keyboard should be prevented from closing on mobile devices
         event.preventDefault();
     };
-    return ((0,jsx_runtime_namespaceObject.jsxs)(form_controls_form, Object.assign({ className: css_className('entry-form'), disableValidationClasses: true, noValidate: "true" }, { children: [(0,jsx_runtime_namespaceObject.jsxs)("div", Object.assign({ className: css_className([
+    return ((0,jsx_runtime_namespaceObject.jsxs)(form_controls_form, { className: css_className('entry-form'), disableValidationClasses: true, noValidate: "true", children: [(0,jsx_runtime_namespaceObject.jsxs)("div", { className: css_className([
                     'input--text__container',
                     ...(reachedCharacterWarning && !reachedCharacterLimit
                         ? ['character-warning']
                         : []),
                     ...(reachedCharacterLimit ? ['character-exceeded'] : []),
-                ]) }, { children: [(0,jsx_runtime_namespaceObject.jsx)(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 }), (0,jsx_runtime_namespaceObject.jsx)("div", Object.assign({ className: css_className('character-count') }, { children: reachedCharacterWarning && (0,jsx_runtime_namespaceObject.jsx)("span", { children: remainingChars }) }))] })), (0,jsx_runtime_namespaceObject.jsx)("button", Object.assign({ className: css_className('button', 'input__submit'), type: "submit", onPointerDown: handlePointerDown, "aria-disabled": !hasValue || reachedCharacterLimit ? 'true' : null }, { children: (0,jsx_runtime_namespaceObject.jsx)(layout_icon, { name: "send", size: "32", alt: t('input.sendMessage') }) }))] })));
+                ]), children: [(0,jsx_runtime_namespaceObject.jsx)(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 }), (0,jsx_runtime_namespaceObject.jsx)("div", { className: css_className('character-count'), children: reachedCharacterWarning && (0,jsx_runtime_namespaceObject.jsx)("span", { children: remainingChars }) })] }), (0,jsx_runtime_namespaceObject.jsx)("button", { className: css_className('button', 'input__submit'), type: "submit", onPointerDown: handlePointerDown, "aria-disabled": !hasValue || reachedCharacterLimit ? 'true' : null, children: (0,jsx_runtime_namespaceObject.jsx)(layout_icon, { name: "send", size: "32", alt: t('input.sendMessage') }) })] }));
 }
 
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/entry/text-entry/index.js
@@ -17092,7 +17479,7 @@ const CollapseButton = () => {
 
 const ChatStatus = ({ children, handleClose, title, closeButtonText, srCloseButtonText, id, }) => {
     const headingId = useGeneratedId();
-    return ((0,jsx_runtime_namespaceObject.jsxs)("section", Object.assign({ tabIndex: -1, id: id, "aria-labelledby": title ? headingId : undefined, className: css_className('chat-status', !title && 'chat-status--condensed') }, { children: [(0,jsx_runtime_namespaceObject.jsxs)("div", Object.assign({ className: css_className('chat-status__body') }, { children: [title ? ((0,jsx_runtime_namespaceObject.jsx)("h2", Object.assign({ className: css_className('chat-status__title'), id: headingId }, { children: title }))) : null, children] })), typeof handleClose === 'function' && ((0,jsx_runtime_namespaceObject.jsxs)("button", Object.assign({ type: "button", onClick: handleClose, className: css_className('button', 'button--tertiary', 'chat-status__close') }, { children: [closeButtonText || (0,jsx_runtime_namespaceObject.jsx)(layout_icon, { name: "close", size: "16", alt: "" }), srCloseButtonText && ((0,jsx_runtime_namespaceObject.jsx)("span", Object.assign({ className: css_className('visually-hidden') }, { children: srCloseButtonText })))] })))] })));
+    return ((0,jsx_runtime_namespaceObject.jsxs)("section", { tabIndex: -1, id: id, "aria-labelledby": title ? headingId : undefined, className: css_className('chat-status', !title && 'chat-status--condensed'), children: [(0,jsx_runtime_namespaceObject.jsxs)("div", { className: css_className('chat-status__body'), children: [title ? ((0,jsx_runtime_namespaceObject.jsx)("h2", { className: css_className('chat-status__title'), id: headingId, children: title })) : null, children] }), typeof handleClose === 'function' && ((0,jsx_runtime_namespaceObject.jsxs)("button", { type: "button", onClick: handleClose, className: css_className('button', 'button--tertiary', 'chat-status__close'), children: [closeButtonText || (0,jsx_runtime_namespaceObject.jsx)(layout_icon, { name: "close", size: "16", alt: "" }), srCloseButtonText && ((0,jsx_runtime_namespaceObject.jsx)("span", { className: css_className('visually-hidden'), children: srCloseButtonText }))] }))] }));
 };
 /* harmony default export */ const chat_status = (ChatStatus);
 
@@ -17127,7 +17514,7 @@ function TranslationChatStatus() {
 
 
 
-const ChatStatusAction = ({ handleClick, icon, title, srButtonText, }) => ((0,jsx_runtime_namespaceObject.jsxs)("button", Object.assign({ type: "button", onClick: handleClick, className: css_className('button', 'button--primary', 'chat-status__button') }, { children: [(0,jsx_runtime_namespaceObject.jsx)(layout_icon, { name: icon, size: "16", alt: "" }), title, srButtonText && ((0,jsx_runtime_namespaceObject.jsx)("span", Object.assign({ className: css_className('visually-hidden') }, { children: srButtonText })))] })));
+const ChatStatusAction = ({ handleClick, icon, title, srButtonText, }) => ((0,jsx_runtime_namespaceObject.jsxs)("button", { type: "button", onClick: handleClick, className: css_className('button', 'button--primary', 'chat-status__button'), children: [(0,jsx_runtime_namespaceObject.jsx)(layout_icon, { name: icon, size: "16", alt: "" }), title, srButtonText && ((0,jsx_runtime_namespaceObject.jsx)("span", { className: css_className('visually-hidden'), children: srButtonText }))] }));
 /* harmony default export */ const chat_status_action = (ChatStatusAction);
 
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/translation-proposal/index.tsx
@@ -17141,7 +17528,7 @@ function TranslationProposal() {
     if (!showProposal) {
         return null;
     }
-    return ((0,jsx_runtime_namespaceObject.jsx)(chat_status, Object.assign({ handleClose: dismissTranslationProposal, srCloseButtonText: translationProposal.srDismissButtonText, id: id, title: translationProposal.titleLabel }, { children: (0,jsx_runtime_namespaceObject.jsx)(chat_status_action, { handleClick: activateTranslationProposal, icon: "newTranslation", title: translationProposal.buttonLabel }) })));
+    return ((0,jsx_runtime_namespaceObject.jsx)(chat_status, { handleClose: dismissTranslationProposal, srCloseButtonText: translationProposal.srDismissButtonText, id: id, title: translationProposal.titleLabel, children: (0,jsx_runtime_namespaceObject.jsx)(chat_status_action, { handleClick: activateTranslationProposal, icon: "newTranslation", title: translationProposal.buttonLabel }) }));
 }
 
 ;// CONCATENATED MODULE: ./src/javascripts/domains/translations/components/translation-status.tsx
@@ -17408,10 +17795,14 @@ const WindowOpenButton = ({
       "aria-label": ariaLabel,
       "aria-hidden": isOpen,
       onClick: handleClick,
-      children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
-        className: css_className('message-count'),
-        "aria-hidden": "true",
-        children: !!count && count
+      children: [(0,jsx_runtime_namespaceObject.jsx)(in_out_transition, {
+        isActive: !!count,
+        transitionStartState: transitionStartStates.notRendered,
+        children: (0,jsx_runtime_namespaceObject.jsx)("span", {
+          className: css_className('message-count'),
+          "aria-hidden": "true",
+          children: count
+        })
       }), (0,jsx_runtime_namespaceObject.jsx)(ButtonIcon, {})]
     })
   });
@@ -17446,7 +17837,7 @@ const WindowView = () => {
             },
         },
     }), [continueChatText]);
-    return ((0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, { children: [(0,jsx_runtime_namespaceObject.jsx)(window_open_button, { onClick: openChat }), (0,jsx_runtime_namespaceObject.jsx)(in_out_transition, Object.assign({ isActive: preChat && !isOpen && !userHasResponded, exitAfter: getDelay(preChat, 'exitAfter'), enterDelay: getDelay(preChat, 'enterDelay'), transitionStartState: transitionStartStates.rendered }, { children: (0,jsx_runtime_namespaceObject.jsx)("div", Object.assign({ className: css_className('unstarted-wrapper', 'unstarted-wrapper--window') }, { children: (0,jsx_runtime_namespaceObject.jsx)(PreChatMessages, {}) })) })), (0,jsx_runtime_namespaceObject.jsx)(in_out_transition, Object.assign({ isActive: continueChat && !isOpen && userHasResponded, exitAfter: getDelay(continueChat, 'exitAfter'), enterDelay: getDelay(continueChat, 'enterDelay'), transitionStartState: transitionStartStates.notRendered }, { children: (0,jsx_runtime_namespaceObject.jsx)("div", Object.assign({ className: css_className('unstarted-wrapper', 'unstarted-wrapper--window', 'unstarted-wrapper--continue') }, { children: (0,jsx_runtime_namespaceObject.jsx)(event_text, { event: continueChatEvent }) })) })), (0,jsx_runtime_namespaceObject.jsx)(in_out_transition, Object.assign({ isActive: isOpen, transitionStartState: transitionStartStates.notRendered }, { children: (0,jsx_runtime_namespaceObject.jsx)(chat, { children: (0,jsx_runtime_namespaceObject.jsx)(chat_frame, { children: (0,jsx_runtime_namespaceObject.jsx)(conversation, {}) }) }) }))] }));
+    return ((0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, { children: [(0,jsx_runtime_namespaceObject.jsx)(window_open_button, { onClick: openChat }), (0,jsx_runtime_namespaceObject.jsx)(in_out_transition, { isActive: preChat && !isOpen && !userHasResponded, exitAfter: getDelay(preChat, 'exitAfter'), enterDelay: getDelay(preChat, 'enterDelay'), transitionStartState: transitionStartStates.rendered, children: (0,jsx_runtime_namespaceObject.jsx)("div", { className: css_className('unstarted-wrapper', 'unstarted-wrapper--window'), children: (0,jsx_runtime_namespaceObject.jsx)(PreChatMessages, {}) }) }), (0,jsx_runtime_namespaceObject.jsx)(in_out_transition, { isActive: continueChat && !isOpen && userHasResponded, exitAfter: getDelay(continueChat, 'exitAfter'), enterDelay: getDelay(continueChat, 'enterDelay'), transitionStartState: transitionStartStates.notRendered, children: (0,jsx_runtime_namespaceObject.jsx)("div", { className: css_className('unstarted-wrapper', 'unstarted-wrapper--window', 'unstarted-wrapper--continue'), children: (0,jsx_runtime_namespaceObject.jsx)(event_text, { event: continueChatEvent }) }) }), (0,jsx_runtime_namespaceObject.jsx)(in_out_transition, { isActive: isOpen, transitionStartState: transitionStartStates.notRendered, children: (0,jsx_runtime_namespaceObject.jsx)(chat, { children: (0,jsx_runtime_namespaceObject.jsx)(chat_frame, { children: (0,jsx_runtime_namespaceObject.jsx)(conversation, {}) }) }) })] }));
 };
 /* harmony default export */ const window_view = (WindowView);
 
@@ -17661,7 +18052,7 @@ const View = ({ children }) => {
     if (userHasResponded) {
         classNames.push('app--user-responded');
     }
-    return (isVisible && ((0,jsx_runtime_namespaceObject.jsx)("div", Object.assign({ className: css_className(classNames), lang: blockLang, tabIndex: -1, "data-nosnippet": true, style: { zIndex }, ref: containerElementRef }, { children: children || (0,jsx_runtime_namespaceObject.jsx)(ViewComponent, {}) }))));
+    return (isVisible && ((0,jsx_runtime_namespaceObject.jsx)("div", { className: css_className(classNames), lang: blockLang, tabIndex: -1, "data-nosnippet": true, style: { zIndex }, ref: containerElementRef, children: children || (0,jsx_runtime_namespaceObject.jsx)(ViewComponent, {}) })));
 };
 /* harmony default export */ const view = (View);
 
@@ -17751,14 +18142,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,external_preact_.render)((0,jsx_runtime_namespaceObject.jsx)(seamly_core, Object.assign({ eventBus: this.eventBus, store: store, api: this.api }, { children: (0,jsx_runtime_namespaceObject.jsx)(View, {}) })), this.parentElement);
+                (0,external_preact_.render)((0,jsx_runtime_namespaceObject.jsx)(seamly_core, { eventBus: this.eventBus, store: store, api: this.api, children: (0,jsx_runtime_namespaceObject.jsx)(View, {}) }), this.parentElement);
             }
             else {
                 (0,external_preact_.render)((0,jsx_runtime_namespaceObject.jsx)(chat_app, { config: renderConfig, eventBus: this.eventBus, store: store, api: this.api }), this.parentElement);
@@ -19101,6 +19494,22 @@ const cardTopic = {
     }
   }
 };
+const cardNoImage = {
+  type: 'message',
+  payload: {
+    type: 'card',
+    id: randomId(),
+    body: {
+      action: {
+        ask: '',
+        type: 'ask'
+      },
+      buttonText: 'Ask about pizzas!',
+      description: 'Pizza Margherita is a <strong>typical Neapolitan pizza</strong>.\n\nIt is made with San Marzano tomatoes, mozzarella cheese, fresh basil, salt, and extra-virgin olive oil.',
+      title: 'Pizza Margherita'
+    }
+  }
+};
 const standardState = {
   base: {
     category: categoryKeys.unstarted,
@@ -19338,7 +19747,7 @@ const standardState = {
     serviceInfo: {
       activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35'
     },
-    events: [cardAskText, cardNavigate, cardTopic]
+    events: [cardAskText, cardNavigate, cardTopic, cardNoImage]
   },
   carousel: {
     category: categoryKeys.messages,
@@ -19856,6 +20265,104 @@ const standardState = {
       }]
     }
   },
+  translationsActiveLarge: {
+    category: categoryKeys.translations,
+    headingText: 'Show translations active (large list)',
+    description: '',
+    ...baseState,
+    config: {
+      ...baseState.config,
+      context: {
+        ...baseState.context,
+        locale: 'nl'
+      }
+    },
+    translations: {
+      ...translationsSlice,
+      currentLocale: 'lv',
+      isActive: true,
+      isAvailable: true,
+      languages: [{
+        locale: 'nl',
+        nativeName: 'Dutch'
+      }, {
+        locale: 'en',
+        nativeName: 'English'
+      }, {
+        locale: 'ar',
+        nativeName: 'Arabic'
+      }, {
+        locale: 'bg',
+        nativeName: 'Bulgarian'
+      }, {
+        locale: 'zh',
+        nativeName: 'Chinese'
+      }, {
+        locale: 'cs',
+        nativeName: 'Czech'
+      }, {
+        locale: 'da',
+        nativeName: 'Danish'
+      }, {
+        locale: 'et',
+        nativeName: 'Estonian'
+      }, {
+        locale: 'fi',
+        nativeName: 'Finnish'
+      }, {
+        locale: 'fr',
+        nativeName: 'French'
+      }, {
+        locale: 'de-informal',
+        nativeName: 'German'
+      }, {
+        locale: 'el',
+        nativeName: 'Greek'
+      }, {
+        locale: 'hu',
+        nativeName: 'Hungarian'
+      }, {
+        locale: 'it',
+        nativeName: 'Italian'
+      }, {
+        locale: 'ja',
+        nativeName: 'Japanese'
+      }, {
+        locale: 'lv',
+        nativeName: 'Latvian'
+      }, {
+        locale: 'pl',
+        nativeName: 'Polish'
+      }, {
+        locale: 'ro',
+        nativeName: 'Romanian'
+      }, {
+        locale: 'ru',
+        nativeName: 'Russian'
+      }, {
+        locale: 'sk',
+        nativeName: 'Slovak'
+      }, {
+        locale: 'sl',
+        nativeName: 'Slovenian'
+      }, {
+        locale: 'es-informal',
+        nativeName: 'Spanish'
+      }, {
+        locale: 'sv',
+        nativeName: 'Swedish'
+      }, {
+        locale: 'ti',
+        nativeName: 'Tigrinya'
+      }, {
+        locale: 'tr',
+        nativeName: 'Turkish'
+      }, {
+        locale: 'uk',
+        nativeName: 'Ukrainian'
+      }]
+    }
+  },
   translationsFullConversation: {
     category: categoryKeys.translations,
     headingText: 'Show translated messages',