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

package/build/dist/lib/components.js

@@ -2691,20 +2691,87 @@ const defaultConfig = {
 
 /***/ }),
 
-/***/ 9201:
+/***/ 526:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   Z: () => (/* binding */ initializeApp),
-/* harmony export */   m: () => (/* binding */ resetApp)
-/* harmony export */ });
-/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9639);
-/* harmony import */ var api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6821);
-/* harmony import */ var api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7265);
-/* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1149);
-/* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(257);
-/* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5409);
-/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9586);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  Z: () => (/* binding */ initializeApp),
+  m: () => (/* binding */ resetApp)
+});
+
+// EXTERNAL MODULE: ./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js + 2 modules
+var redux_toolkit_esm = __webpack_require__(9639);
+// EXTERNAL MODULE: ./src/javascripts/api/errors/seamly-session-expired-error.js
+var seamly_session_expired_error = __webpack_require__(6821);
+// EXTERNAL MODULE: ./src/javascripts/api/errors/seamly-unavailable-error.js
+var seamly_unavailable_error = __webpack_require__(7265);
+// EXTERNAL MODULE: ./src/javascripts/ui/utils/seamly-utils.ts
+var seamly_utils = __webpack_require__(1149);
+// EXTERNAL MODULE: ./src/javascripts/domains/config/actions.ts
+var actions = __webpack_require__(257);
+// EXTERNAL MODULE: ./src/javascripts/domains/i18n/actions.ts
+var i18n_actions = __webpack_require__(5409);
+;// 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 (0,redux_toolkit_esm/* createAsyncThunk */.hg)(typePrefix, payloadCreator, {
+    condition: debounceExecutionCondition
+  });
+};
+/* harmony default export */ const create_debounced_async_thunk = (createDebouncedAsyncThunk);
+// EXTERNAL MODULE: ./src/javascripts/domains/visibility/actions.ts
+var visibility_actions = __webpack_require__(9586);
+;// CONCATENATED MODULE: ./src/javascripts/domains/app/actions.ts
 var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
@@ -2739,7 +2806,8 @@ var __awaiter = undefined && undefined.__awaiter || function (thisArg, _argument
 
 
 
-const initializeApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .createAsyncThunk */ .hg)('initializeApp', (_, {
+
+const initializeApp = (0,redux_toolkit_esm/* createAsyncThunk */.hg)('initializeApp', (_, {
   extra: {
     api,
     config
@@ -2760,7 +2828,7 @@ const initializeApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .create
     } else {
       if ((_c = config === null || config === void 0 ? void 0 : config.context) === null || _c === void 0 ? void 0 : _c.topic) {
         api.send('action', {
-          type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__/* .actionTypes */ .Hp.setTopic,
+          type: seamly_utils/* actionTypes */.Hp.setTopic,
           body: {
             name: config.context.topic,
             // Separate fallback message is not needed here. Only an attached service will use this, but none will
@@ -2772,7 +2840,7 @@ const initializeApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .create
       if ((_d = config === null || config === void 0 ? void 0 : config.context) === null || _d === void 0 ? void 0 : _d.translationLocale) {
         locale = config.context.translationLocale;
         api.send('action', {
-          type: ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_0__/* .actionTypes */ .Hp.setTranslation,
+          type: seamly_utils/* actionTypes */.Hp.setTranslation,
           body: {
             enabled: true,
             locale
@@ -2786,8 +2854,8 @@ const initializeApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .create
       };
     }
   } catch (e) {
-    if (e instanceof api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z) {
-      const err = new api_errors_seamly_session_expired_error__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z();
+    if (e instanceof seamly_session_expired_error/* default */.Z) {
+      const err = new seamly_session_expired_error/* default */.Z();
       return rejectWithValue({
         name: err.name,
         message: err.message,
@@ -2796,7 +2864,7 @@ const initializeApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .create
         action: err.action
       });
     }
-    const err = new api_errors_seamly_unavailable_error__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z();
+    const err = new seamly_unavailable_error/* default */.Z();
     return rejectWithValue({
       name: err.name,
       message: err.message,
@@ -2804,26 +2872,29 @@ const initializeApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .create
     });
   }
 }));
-const resetApp = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .createAsyncThunk */ .hg)('resetApp', (_, {
+const resetApp = create_debounced_async_thunk('resetApp', (_, {
   dispatch,
   extra: {
     api
   }
 }) => __awaiter(void 0, void 0, void 0, function* () {
   yield api.disconnect();
-  yield api.clearStore();
-  dispatch((0,domains_config_actions__WEBPACK_IMPORTED_MODULE_1__/* .resetConfig */ .I)());
-  yield dispatch((0,domains_config_actions__WEBPACK_IMPORTED_MODULE_1__/* .initializeConfig */ .t)());
+  api.clearStore();
+  dispatch((0,actions/* resetConfig */.I)());
+  yield dispatch((0,actions/* initializeConfig */.t)());
   try {
     const {
       locale
     } = yield dispatch(initializeApp()).unwrap();
-    yield dispatch((0,domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__/* .setLocale */ .i)(locale));
-  } catch (rejectedValueOrSerializedError) {
+    yield dispatch((0,i18n_actions/* setLocale */.i)(locale));
+  } catch (e) {
     // nothing to do
   }
-  dispatch((0,domains_visibility_actions__WEBPACK_IMPORTED_MODULE_3__/* .initializeVisibility */ .Z)());
-}));
+  dispatch((0,visibility_actions/* initializeVisibility */.Z)());
+}), {
+  wait: 2000,
+  leading: true
+});
 
 /***/ }),
 
@@ -2851,7 +2922,7 @@ const selectUserHasResponded = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__/
 /* harmony export */ });
 /* unused harmony export appSlice */
 /* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9639);
-/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9201);
+/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(526);
 
 
 const initialState = {
@@ -3232,7 +3303,7 @@ function createErrorsMiddleware({
 /* harmony export */ });
 /* unused harmony export formsSlice */
 /* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9639);
-/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9201);
+/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(526);
 
 
 const initialFormState = {
@@ -4242,11 +4313,13 @@ const selectHasError = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__/* .creat
 /* harmony export */   uc: () => (/* binding */ setInterrupt)
 /* harmony export */ });
 /* unused harmony exports interruptSlice, clearInterrupt */
-/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9639);
-/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9201);
+/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9639);
+/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(526);
 /* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(257);
 /* harmony import */ var domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5409);
-/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9586);
+/* harmony import */ var domains_store_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2770);
+/* harmony import */ var domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9586);
+
 
 
 
@@ -4255,7 +4328,7 @@ const selectHasError = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__/* .creat
 const initialState = {
   error: undefined
 };
-const interruptSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .createSlice */ .oM)({
+const interruptSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_5__/* .createSlice */ .oM)({
   name: 'interrupt',
   initialState,
   reducers: {
@@ -4265,7 +4338,7 @@ const interruptSlice = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .creat
     clearInterrupt: () => initialState
   },
   extraReducers: builder => {
-    builder.addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__/* .initializeConfig */ .t.pending, () => initialState).addMatcher((0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_4__/* .isAnyOf */ .Q)(domains_app_actions__WEBPACK_IMPORTED_MODULE_0__/* .initializeApp */ .Z.rejected, domains_config_actions__WEBPACK_IMPORTED_MODULE_1__/* .initializeConfig */ .t.rejected, domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__/* .setLocale */ .i.rejected, domains_visibility_actions__WEBPACK_IMPORTED_MODULE_3__/* .setVisibility */ .i.rejected, domains_visibility_actions__WEBPACK_IMPORTED_MODULE_3__/* .initializeVisibility */ .Z.rejected), (state, {
+    builder.addCase(domains_config_actions__WEBPACK_IMPORTED_MODULE_1__/* .initializeConfig */ .t.pending, () => initialState).addMatcher((0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_5__/* .isAnyOf */ .Q)(domains_app_actions__WEBPACK_IMPORTED_MODULE_0__/* .initializeApp */ .Z.rejected, domains_config_actions__WEBPACK_IMPORTED_MODULE_1__/* .initializeConfig */ .t.rejected, domains_i18n_actions__WEBPACK_IMPORTED_MODULE_2__/* .setLocale */ .i.rejected, domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__/* .setVisibility */ .i.rejected, domains_visibility_actions__WEBPACK_IMPORTED_MODULE_4__/* .initializeVisibility */ .Z.rejected, domains_store_actions__WEBPACK_IMPORTED_MODULE_3__/* .getConversation */ .c.rejected), (state, {
       payload
     }) => {
       state.error = payload;
@@ -4280,6 +4353,77 @@ const {
 
 /***/ }),
 
+/***/ 2770:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   c: () => (/* binding */ getConversation)
+/* harmony export */ });
+/* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9639);
+var __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 = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__/* .createAsyncThunk */ .hg)('getConversation', (_, {
+  extra: {
+    api
+  },
+  rejectWithValue
+}) => __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;
+  }
+});
+
+/***/ }),
+
 /***/ 7271:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -4303,8 +4447,8 @@ var errors = __webpack_require__(9792);
 var forms_slice = __webpack_require__(3939);
 // EXTERNAL MODULE: ./node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js + 2 modules
 var redux_toolkit_esm = __webpack_require__(9639);
-// EXTERNAL MODULE: ./src/javascripts/domains/app/actions.ts
-var actions = __webpack_require__(9201);
+// EXTERNAL MODULE: ./src/javascripts/domains/app/actions.ts + 1 modules
+var actions = __webpack_require__(526);
 // EXTERNAL MODULE: ./src/javascripts/domains/config/actions.ts
 var config_actions = __webpack_require__(257);
 // EXTERNAL MODULE: ./src/javascripts/domains/i18n/actions.ts
@@ -4567,7 +4711,7 @@ const useAppDispatch = es/* useDispatch */.I0;
 /* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9639);
 /* harmony import */ var ui_utils_general_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(822);
 /* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1149);
-/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9201);
+/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(526);
 /* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(257);
 /* harmony import */ var lib_id__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8527);
 
@@ -5400,7 +5544,7 @@ const useTranslationProposal = () => {
 /* harmony export */ });
 /* unused harmony exports translationsInitialState, translationSlice, setTranslationProposalPrompt */
 /* harmony import */ var _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9639);
-/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9201);
+/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(526);
 /* harmony import */ var domains_config_actions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(257);
 /* harmony import */ var domains_store_slice__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8801);
 
@@ -5617,8 +5761,9 @@ const setVisibility = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_6__/* .create
   if (previousVisibility === calculatedVisibility) {
     return undefined;
   }
+  const visibility = api.store.get(_constants__WEBPACK_IMPORTED_MODULE_4__/* .StoreKey */ .K);
   // Store the user-requested visibility in order to reinitialize after refresh
-  api.store.set(_constants__WEBPACK_IMPORTED_MODULE_4__/* .StoreKey */ .K, Object.assign(Object.assign({}, api.store.get(_constants__WEBPACK_IMPORTED_MODULE_4__/* .StoreKey */ .K) || {}), {
+  api.store.set(_constants__WEBPACK_IMPORTED_MODULE_4__/* .StoreKey */ .K, Object.assign(Object.assign({}, visibility || {}), {
     [layoutMode]: requestedVisibility
   }));
   if (requestedVisibility) {
@@ -6065,10 +6210,17 @@ var live_region_hooks = __webpack_require__(5136);
 var seamly_state_hooks = __webpack_require__(2140);
 // EXTERNAL MODULE: ./src/javascripts/domains/interrupt/hooks.ts
 var interrupt_hooks = __webpack_require__(5889);
+// EXTERNAL MODULE: ./src/javascripts/domains/interrupt/slice.ts
+var slice = __webpack_require__(6160);
+// EXTERNAL MODULE: ./src/javascripts/domains/store/index.ts + 4 modules
+var store = __webpack_require__(7271);
 ;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/use-session-expired-command.ts
 
 
 
+
+
+
 function use_session_expired_command_useSessionExpiredCommand() {
   const {
     meta: {
@@ -6076,13 +6228,35 @@ function use_session_expired_command_useSessionExpiredCommand() {
       action
     }
   } = useInterrupt();
+  const dispatch = useAppDispatch();
   const seamlyCommands = useSeamlyCommands();
   const isExpiredError = (originalError === null || originalError === void 0 ? void 0 : originalError.name) === 'SeamlySessionExpiredError';
+  const limit = useRef(0);
+  const limitTimer = useRef(null);
   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 __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
@@ -6788,7 +6962,7 @@ const EventParticipant = ({
       })
     }));
   }
-  if (showName) {
+  if (showName && participantName) {
     authorInfo.push((0,preact_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
       className: (0,lib_css__WEBPACK_IMPORTED_MODULE_3__/* .className */ .o)('message__author-name'),
       children: participantName
@@ -7504,7 +7678,7 @@ const useSeamlyActivityEventHandler = () => (0,preact_hooks__WEBPACK_IMPORTED_MO
 /* harmony import */ var config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9787);
 /* harmony import */ var ui_components_core_seamly_api_context__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2871);
 /* harmony import */ var ui_utils_seamly_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1149);
-/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9201);
+/* harmony import */ var domains_app_actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(526);
 /* harmony import */ var domains_app_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3423);
 /* harmony import */ var domains_app_slice__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(1322);
 /* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(6134);
@@ -10168,108 +10342,61 @@ const ComponentContext = (0,external_preact_.createContext)({});
 var message_container = __webpack_require__(2480);
 // EXTERNAL MODULE: ./src/javascripts/domains/translations/hooks.ts + 1 modules
 var translations_hooks = __webpack_require__(4398);
-;// 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
-  } = (0,seamly_hooks/* useSeamlyCommands */.bs)();
-  const descriptionId = (0,seamly_hooks/* useGeneratedId */.I8)();
-  const isMounted = (0,hooks_.useRef)();
-  const CardActionComponent = action.type === seamly_utils/* cardTypes */.wh.navigate ? 'a' : 'button';
-  const emitCardEvent = (0,hooks_.useCallback)(() => emitEvent(`action.${seamly_utils/* actionTypes */.Hp.clickCard}`, {
-    type: seamly_utils/* actionTypes */.Hp.clickCta,
-    originMessage: id,
-    action
-  }), [emitEvent, id, action]);
-  const handleClick = (0,hooks_.useCallback)(() => {
-    emitCardEvent();
-    if (action.type === seamly_utils/* cardTypes */.wh.ask) {
-      sendMessage({
-        body: action.ask
-      });
-    } else if (action.type === seamly_utils/* cardTypes */.wh.topic) {
-      const {
-        topic: name,
-        fallbackMessage
-      } = action;
-      sendAction({
-        type: seamly_utils/* actionTypes */.Hp.setTopic,
-        body: {
-          name,
-          fallbackMessage
+const CardComponent = ({ id, action, buttonText, description, hasFocus, image, title, isCarouselItem, }) => {
+    const cardRef = (0,hooks_.useRef)(null);
+    const { sendMessage, sendAction, emitEvent } = (0,seamly_hooks/* useSeamlyCommands */.bs)();
+    const descriptionId = (0,seamly_hooks/* useGeneratedId */.I8)();
+    const isMounted = (0,hooks_.useRef)(false);
+    const CardActionComponent = action.type === seamly_utils/* cardTypes */.wh.navigate ? 'a' : 'button';
+    const emitCardEvent = (0,hooks_.useCallback)(() => emitEvent(`action.${seamly_utils/* actionTypes */.Hp.clickCard}`, {
+        type: seamly_utils/* actionTypes */.Hp.clickCta,
+        originMessage: id,
+        action,
+    }), [emitEvent, id, action]);
+    const handleClick = (0,hooks_.useCallback)(() => {
+        emitCardEvent();
+        if (action.type === seamly_utils/* cardTypes */.wh.ask) {
+            sendMessage({ body: action.ask });
         }
-      });
-    }
-  }, [sendMessage, action, sendAction, emitCardEvent]);
-  const actionProps = (0,hooks_.useMemo)(() => action.type === seamly_utils/* cardTypes */.wh.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_.jsxs)("div", {
-    className: (0,css/* className */.o)('card__wrapper'),
-    id: id,
-    tabIndex: "-1" // set tabIndex of -1 so card can be focussed
-    ,
-    ref: cardRef,
-    children: [(0,jsx_runtime_.jsx)("img", {
-      className: (0,css/* className */.o)('card__image'),
-      src: image,
-      alt: ""
-    }), (0,jsx_runtime_.jsxs)("div", {
-      className: (0,css/* className */.o)('card__content'),
-      id: id,
-      children: [title && (0,jsx_runtime_.jsx)("h2", {
-        className: (0,css/* className */.o)('card__title'),
-        children: title
-      }), description && (0,jsx_runtime_.jsx)("div", {
-        className: (0,css/* className */.o)('card__description'),
-        dangerouslySetInnerHTML: {
-          __html: description
+        else if (action.type === seamly_utils/* cardTypes */.wh.topic) {
+            const { topic: name, fallbackMessage } = action;
+            sendAction({
+                type: seamly_utils/* actionTypes */.Hp.setTopic,
+                body: { name, fallbackMessage },
+            });
         }
-      }), (0,jsx_runtime_.jsx)(CardActionComponent, {
-        tabIndex: isCarouselItem && !hasFocus ? '-1' : undefined // disable to prevent tabbing through cards
-        ,
-        className: (0,css/* className */.o)('button', 'button--primary'),
-        "aria-describedby": descriptionId,
-        ...actionProps,
-        children: buttonText
-      })]
-    })]
-  });
+    }, [sendMessage, action, sendAction, emitCardEvent]);
+    const actionProps = (0,hooks_.useMemo)(() => action.type === seamly_utils/* cardTypes */.wh.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_.jsxs)("div", { className: (0,css/* className */.o)('card__wrapper'), id: id, tabIndex: -1, ref: cardRef, children: [image ? ((0,jsx_runtime_.jsx)("img", { className: (0,css/* className */.o)('card__image'), src: image, alt: "" })) : null, (0,jsx_runtime_.jsxs)("div", { className: (0,css/* className */.o)('card__content'), id: id, children: [title && (0,jsx_runtime_.jsx)("h2", { className: (0,css/* className */.o)('card__title'), children: title }), description && ((0,jsx_runtime_.jsx)("div", { className: (0,css/* className */.o)('card__description'), dangerouslySetInnerHTML: { __html: description } })), (0,jsx_runtime_.jsx)(CardActionComponent, Object.assign({ tabIndex: isCarouselItem && !hasFocus ? -1 : undefined, className: (0,css/* className */.o)('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
 
 
@@ -16013,10 +16140,14 @@ const WindowOpenButton = ({
       "aria-label": ariaLabel,
       "aria-hidden": isOpen,
       onClick: handleClick,
-      children: [(0,jsx_runtime_.jsx)("span", {
-        className: (0,css/* className */.o)('message-count'),
-        "aria-hidden": "true",
-        children: !!count && count
+      children: [(0,jsx_runtime_.jsx)(in_out_transition, {
+        isActive: !!count,
+        transitionStartState: transitionStartStates.notRendered,
+        children: (0,jsx_runtime_.jsx)("span", {
+          className: (0,css/* className */.o)('message-count'),
+          "aria-hidden": "true",
+          children: count
+        })
       }), (0,jsx_runtime_.jsx)(ButtonIcon, {})]
     })
   });