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

package/build/dist/lib/standalone.js

@@ -12499,7 +12499,8 @@ class API {
     });
   }
   getConversationUrl() {
-    return this.store.get('conversationUrl');
+    const conversationUrl = this.store.get('conversationUrl');
+    return conversationUrl;
   }
   hasConversation() {
     return !!this.getConversationUrl();
@@ -12608,7 +12609,7 @@ class API {
         if (error.status >= 500) {
           throw new SeamlyGeneralError(error);
         }
-        throw error;
+        throw new ApiError(error);
       }
     });
   }
@@ -12718,7 +12719,7 @@ class API {
         if (error.status >= 500) {
           throw new SeamlyGeneralError(error);
         }
-        throw error;
+        throw new ApiError(error);
       }
     });
   }
@@ -12780,15 +12781,17 @@ class API {
   }
 }
 _API_ready = new (weak_map_default())(), _API_externalId = new (weak_map_default())(), _API_conversationAuthToken = new (weak_map_default())(), _API_layoutMode = new (weak_map_default())(), _API_config = new (weak_map_default())(), _API_getLocale = new (weak_map_default())(), _API_instances = new (weak_set_default())(), _API_getAccessToken = function _API_getAccessToken() {
-  return this.store.get('accessToken');
+  const accessToken = this.store.get('accessToken');
+  return accessToken;
 }, _API_setAccessToken = function _API_setAccessToken(accessToken) {
   this.store.set('accessToken', accessToken);
 }, _API_setConversationUrl = function _API_setConversationUrl(url) {
   this.store.set('conversationUrl', url);
 }, _API_getChannelTopic = function _API_getChannelTopic() {
+  const channelTopic = this.store.get('channelTopic') || this.store.get('channelName');
   // The `channelName` fallback is needed for seamless client upgrades.
   // TODO: Remove when all clients have been upgraded past v20.
-  return this.store.get('channelTopic') || this.store.get('channelName');
+  return channelTopic;
 }, _API_setChannelTopic = function _API_setChannelTopic(topic) {
   this.store.set('channelTopic', topic);
 }, _API_getUrlPrefix = function _API_getUrlPrefix(protocol) {
@@ -12859,7 +12862,7 @@ _API_ready = new (weak_map_default())(), _API_externalId = new (weak_map_default
   return {
     clientName: "@seamly/web-ui",
     clientVariant: api_classPrivateFieldGet(this, _API_layoutMode, "f"),
-    clientVersion: "22.2.0",
+    clientVersion: "22.3.0-beta.2",
     currentUrl: window.location.toString(),
     screenResolution: `${window.screen.width}x${window.screen.height}`,
     timezone: getTimeZone(),
@@ -16709,6 +16712,64 @@ const setLocale = createAsyncThunk('setLocale', (locale, _ref) => {
     return true;
   }
 });
+;// CONCATENATED MODULE: ./src/javascripts/domains/redux/create-debounced-async-thunk.ts
+
+
+
+/**
+ * A debounced analogue of the `createAsyncThunk` from `@reduxjs/toolkit`
+ * @param typePrefix - a string action type value
+ * @param payloadCreator - a callback function that should return a promise containing the result of some asynchronous logic
+ * @param debounceOptions - the debounce options object
+ */
+const createDebouncedAsyncThunk = (typePrefix, payloadCreator, debounceOptions) => {
+  const {
+    wait = 300,
+    maxWait = 0,
+    leading = false
+  } = debounceOptions !== null && debounceOptions !== void 0 ? debounceOptions : {};
+  let debounceTimer = null;
+  let maxWaitTimer = null;
+  let resolve;
+  const cancel = () => {
+    if (resolve) {
+      resolve(false);
+      resolve = undefined;
+    }
+  };
+  const invoke = () => {
+    clearTimeout(maxWaitTimer);
+    maxWaitTimer = undefined;
+    if (resolve) {
+      resolve(true);
+      resolve = undefined;
+    }
+  };
+  const debounceExecutionCondition = () => {
+    const immediate = leading && !debounceTimer;
+    // Start debounced condition resolution
+    clearTimeout(debounceTimer);
+    debounceTimer = set_timeout_default()(() => {
+      invoke();
+      debounceTimer = null;
+    }, wait);
+    if (immediate) {
+      return true;
+    }
+    cancel();
+    //  Start max wait condition resolution
+    if (maxWait && !maxWaitTimer) {
+      maxWaitTimer = set_timeout_default()(invoke, maxWait);
+    }
+    return new (promise_default())(res => {
+      resolve = res;
+    });
+  };
+  return createAsyncThunk(typePrefix, payloadCreator, {
+    condition: debounceExecutionCondition
+  });
+};
+/* harmony default export */ var create_debounced_async_thunk = (createDebouncedAsyncThunk);
 ;// CONCATENATED MODULE: ./node_modules/reselect/es/defaultMemoize.js
 // Cache implementation based on Erik Rasmussen's `lru-memoize`:
 // https://github.com/erikras/lru-memoize
@@ -17294,8 +17355,9 @@ const setVisibility = createAsyncThunk('setVisibility', (requestedVisibility, _r
   if (previousVisibility === calculatedVisibility) {
     return undefined;
   }
+  const visibility = api.store.get(StoreKey);
   // Store the user-requested visibility in order to reinitialize after refresh
-  api.store.set(StoreKey, assign_default()(assign_default()({}, api.store.get(StoreKey) || {}), {
+  api.store.set(StoreKey, assign_default()(assign_default()({}, visibility || {}), {
     [layoutMode]: requestedVisibility
   }));
   if (requestedVisibility) {
@@ -17363,6 +17425,7 @@ var app_actions_awaiter = undefined && undefined.__awaiter || function (thisArg,
 
 
 
+
 const initializeApp = createAsyncThunk('initializeApp', (_, _ref) => {
   let {
     extra: {
@@ -17431,7 +17494,7 @@ const initializeApp = createAsyncThunk('initializeApp', (_, _ref) => {
     }
   });
 });
-const resetApp = createAsyncThunk('resetApp', (_, _ref2) => {
+const resetApp = create_debounced_async_thunk('resetApp', (_, _ref2) => {
   let {
     dispatch,
     extra: {
@@ -17440,7 +17503,7 @@ const resetApp = createAsyncThunk('resetApp', (_, _ref2) => {
   } = _ref2;
   return app_actions_awaiter(void 0, void 0, void 0, function* () {
     yield api.disconnect();
-    yield api.clearStore();
+    api.clearStore();
     dispatch(resetConfig());
     yield dispatch(initializeConfig());
     try {
@@ -17448,11 +17511,14 @@ const resetApp = createAsyncThunk('resetApp', (_, _ref2) => {
         locale
       } = yield dispatch(initializeApp()).unwrap();
       yield dispatch(setLocale(locale));
-    } catch (rejectedValueOrSerializedError) {
+    } catch (e) {
       // nothing to do
     }
     dispatch(initializeVisibility());
   });
+}, {
+  wait: 2000,
+  leading: true
 });
 ;// CONCATENATED MODULE: ./src/javascripts/domains/app/hooks.js
 
@@ -17491,12 +17557,80 @@ const {
   setHasResponded
 } = appSlice.actions;
 /* harmony default export */ var app_slice = (appSlice.reducer);
+;// CONCATENATED MODULE: ./src/javascripts/domains/store/actions.ts
+
+var store_actions_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = (promise_default())))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+
+const getConversation = createAsyncThunk('getConversation', (_, _ref) => {
+  let {
+    extra: {
+      api
+    },
+    rejectWithValue
+  } = _ref;
+  return store_actions_awaiter(void 0, void 0, void 0, function* () {
+    try {
+      return api.getConversation();
+    } catch (error) {
+      return rejectWithValue({
+        name: error === null || error === void 0 ? void 0 : error.name,
+        message: error === null || error === void 0 ? void 0 : error.message,
+        langKey: error === null || error === void 0 ? void 0 : error.langKey,
+        action: error === null || error === void 0 ? void 0 : error.action,
+        originalEvent: error === null || error === void 0 ? void 0 : error.originalEvent,
+        originalError: error === null || error === void 0 ? void 0 : error.originalError
+      });
+    }
+  });
+}, {
+  condition(payload, _ref2) {
+    let {
+      getState
+    } = _ref2;
+    var _a;
+    const {
+      state: {
+        events
+      }
+    } = getState();
+    const lastEvent = events[events.length - 1];
+    const payloadLastEventId = (_a = payload === null || payload === void 0 ? void 0 : payload.lastEvent) === null || _a === void 0 ? void 0 : _a.id;
+    return lastEvent && payloadLastEventId !== lastEvent.payload.id;
+  }
+});
 ;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/slice.ts
 
 
 
 
 
+
 const slice_initialState = {
   error: undefined
 };
@@ -17510,7 +17644,7 @@ const interruptSlice = createSlice({
     clearInterrupt: () => slice_initialState
   },
   extraReducers: builder => {
-    builder.addCase(initializeConfig.pending, () => slice_initialState).addMatcher(isAnyOf(initializeApp.rejected, initializeConfig.rejected, setLocale.rejected, setVisibility.rejected, initializeVisibility.rejected), (state, _ref) => {
+    builder.addCase(initializeConfig.pending, () => slice_initialState).addMatcher(isAnyOf(initializeApp.rejected, initializeConfig.rejected, setLocale.rejected, setVisibility.rejected, initializeVisibility.rejected, getConversation.rejected), (state, _ref) => {
       let {
         payload
       } = _ref;
@@ -20093,6 +20227,10 @@ function useInterrupt() {
 
 
 
+
+
+
+
 function useSessionExpiredCommand() {
   const {
     meta: {
@@ -20100,13 +20238,35 @@ function useSessionExpiredCommand() {
       action
     }
   } = useInterrupt();
+  const dispatch = useAppDispatch();
   const seamlyCommands = use_seamly_commands();
   const isExpiredError = (originalError === null || originalError === void 0 ? void 0 : originalError.name) === 'SeamlySessionExpiredError';
+  const limit = (0,hooks_module/* useRef */.sO)(0);
+  const limitTimer = (0,hooks_module/* useRef */.sO)(null);
   (0,hooks_module/* useEffect */.d4)(() => {
     if (isExpiredError && seamlyCommands[action]) {
+      if (limit.current >= 10) {
+        limitTimer.current = set_timeout_default()(() => {
+          limit.current = 0;
+        }, 10000);
+        const error = new SeamlyGeneralError();
+        dispatch(setInterrupt({
+          name: error.name,
+          message: error.message,
+          langKey: error.langKey,
+          originalEvent: error.originalEvent,
+          originalError: error.originalError,
+          action: error.action
+        }));
+        return () => {};
+      }
+      limit.current += 1;
       seamlyCommands[action]();
     }
-  }, [action, seamlyCommands, isExpiredError]);
+    return () => {
+      if (limitTimer.current) clearTimeout(limitTimer.current);
+    };
+  }, [action, seamlyCommands, isExpiredError, dispatch]);
 }
 ;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/use-seamly-chat.ts
 
@@ -20987,7 +21147,7 @@ const EventParticipant = _ref => {
       })
     }));
   }
-  if (showName) {
+  if (showName && participantName) {
     authorInfo.push(o("span", {
       className: css_className('message__author-name'),
       children: participantName
@@ -21071,109 +21231,61 @@ function MessageContainer(_ref) {
   });
 }
 /* harmony default export */ var message_container = (MessageContainer);
-;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/card-component.js
-
+;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/card-component.tsx
 
 
 
 
 
-const CardComponent = _ref => {
-  let {
-    id,
-    action,
-    buttonText,
-    description,
-    hasFocus,
-    image,
-    title,
-    isCarouselItem
-  } = _ref;
-  const cardRef = (0,hooks_module/* useRef */.sO)(null);
-  const {
-    sendMessage,
-    sendAction,
-    emitEvent
-  } = use_seamly_commands();
-  const descriptionId = useGeneratedId();
-  const isMounted = (0,hooks_module/* useRef */.sO)();
-  const CardActionComponent = action.type === cardTypes.navigate ? 'a' : 'button';
-  const emitCardEvent = (0,hooks_module/* useCallback */.I4)(() => emitEvent(`action.${actionTypes.clickCard}`, {
-    type: actionTypes.clickCta,
-    originMessage: id,
-    action
-  }), [emitEvent, id, action]);
-  const handleClick = (0,hooks_module/* useCallback */.I4)(() => {
-    emitCardEvent();
-    if (action.type === cardTypes.ask) {
-      sendMessage({
-        body: action.ask
-      });
-    } else if (action.type === cardTypes.topic) {
-      const {
-        topic: name,
-        fallbackMessage
-      } = action;
-      sendAction({
-        type: actionTypes.setTopic,
-        body: {
-          name,
-          fallbackMessage
+const CardComponent = ({ id, action, buttonText, description, hasFocus, image, title, isCarouselItem, }) => {
+    const cardRef = (0,hooks_module/* useRef */.sO)(null);
+    const { sendMessage, sendAction, emitEvent } = use_seamly_commands();
+    const descriptionId = useGeneratedId();
+    const isMounted = (0,hooks_module/* useRef */.sO)(false);
+    const CardActionComponent = action.type === cardTypes.navigate ? 'a' : 'button';
+    const emitCardEvent = (0,hooks_module/* useCallback */.I4)(() => emitEvent(`action.${actionTypes.clickCard}`, {
+        type: actionTypes.clickCta,
+        originMessage: id,
+        action,
+    }), [emitEvent, id, action]);
+    const handleClick = (0,hooks_module/* useCallback */.I4)(() => {
+        emitCardEvent();
+        if (action.type === cardTypes.ask) {
+            sendMessage({ body: action.ask });
         }
-      });
-    }
-  }, [sendMessage, action, sendAction, emitCardEvent]);
-  const actionProps = (0,hooks_module/* useMemo */.Ye)(() => action.type === cardTypes.navigate ? {
-    href: action.link,
-    rel: 'noopener noreferrer',
-    target: action.newTab ? '_blank' : '_self',
-    onClick: emitCardEvent
-  } : {
-    onClick: handleClick
-  }, [action, handleClick, emitCardEvent]);
-  (0,hooks_module/* useEffect */.d4)(() => {
-    if (isCarouselItem) {
-      if (hasFocus && isMounted.current) {
-        window.requestAnimationFrame(() => cardRef.current.focus());
-      } else {
-        cardRef.current.blur();
-      }
-    }
-    isMounted.current = true;
-  }, [hasFocus, isCarouselItem]);
-  return o("div", {
-    className: css_className('card__wrapper'),
-    id: id,
-    tabIndex: "-1" // set tabIndex of -1 so card can be focussed
-    ,
-    ref: cardRef,
-    children: [o("img", {
-      className: css_className('card__image'),
-      src: image,
-      alt: ""
-    }), o("div", {
-      className: css_className('card__content'),
-      id: id,
-      children: [title && o("h2", {
-        className: css_className('card__title'),
-        children: title
-      }), description && o("div", {
-        className: css_className('card__description'),
-        dangerouslySetInnerHTML: {
-          __html: description
+        else if (action.type === cardTypes.topic) {
+            const { topic: name, fallbackMessage } = action;
+            sendAction({
+                type: actionTypes.setTopic,
+                body: { name, fallbackMessage },
+            });
         }
-      }), o(CardActionComponent, {
-        tabIndex: isCarouselItem && !hasFocus ? '-1' : undefined // disable to prevent tabbing through cards
-        ,
-        className: css_className('button', 'button--primary'),
-        "aria-describedby": descriptionId,
-        ...actionProps,
-        children: buttonText
-      })]
-    })]
-  });
+    }, [sendMessage, action, sendAction, emitCardEvent]);
+    const actionProps = (0,hooks_module/* useMemo */.Ye)(() => action.type === cardTypes.navigate
+        ? {
+            href: action.link,
+            rel: 'noopener noreferrer',
+            target: action.newTab ? '_blank' : '_self',
+            onClick: emitCardEvent,
+        }
+        : {
+            onClick: handleClick,
+        }, [action, handleClick, emitCardEvent]);
+    (0,hooks_module/* useEffect */.d4)(() => {
+        if (isCarouselItem) {
+            if (hasFocus && isMounted.current) {
+                window.requestAnimationFrame(() => cardRef.current.focus());
+            }
+            else {
+                cardRef.current.blur();
+            }
+        }
+        isMounted.current = true;
+    }, [hasFocus, isCarouselItem]);
+    return (o("div", { className: css_className('card__wrapper'), id: id, tabIndex: -1, ref: cardRef, children: [image ? (o("img", { className: css_className('card__image'), src: image, alt: "" })) : null, o("div", { className: css_className('card__content'), id: id, children: [title && o("h2", { className: css_className('card__title'), children: title }), description && (o("div", { className: css_className('card__description'), dangerouslySetInnerHTML: { __html: description } })), o(CardActionComponent, Object.assign({ tabIndex: isCarouselItem && !hasFocus ? -1 : undefined, className: css_className('button', 'button--primary'), "aria-describedby": descriptionId }, actionProps, { children: buttonText }))] })] }));
 };
 /* harmony default export */ var card_component = (CardComponent);
+
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/card-message.js
 
 
@@ -21275,7 +21387,8 @@ function CarouselMessageSlide(_ref) {
 /* harmony default export */ var icon_send_32 = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32px\" height=\"32px\" x=\"0px\" y=\"0px\" viewBox=\"0 0 32 32\"><defs/><path fill=\"#4A48C1\" d=\"M6.714,14.985l17.837-7.906c0.681-0.302,1.414,0.301,1.25,1.027L22.273,23.59\tc-0.13,0.566-0.751,0.865-1.275,0.613l-3.623-1.752l-2.334,2.287c-0.572,0.562-1.538,0.156-1.538-0.645V21.01\tc0-0.217,0.078-0.43,0.222-0.594l7.676-8.841l-10.414,7.472l-4.351-2.445C5.987,16.236,6.033,15.287,6.714,14.985L6.714,14.985z\"/></svg>");
 ;// CONCATENATED MODULE: ./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_upload-32.svg
 /* harmony default export */ var icon_upload_32 = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32px\" height=\"32px\" x=\"0px\" y=\"0px\" viewBox=\"0 0 32 32\"><defs/><path fill=\"#4A48C1\" d=\"M9.488,13.481c-0.391-0.391-0.391-1.023,0-1.414l5.805-5.805c0.026-0.026,0.06-0.036,0.088-0.058\tc0.073-0.06,0.146-0.119,0.235-0.156c0.246-0.103,0.522-0.103,0.769,0c0.093,0.039,0.171,0.101,0.249,0.165\tc0.023,0.02,0.053,0.027,0.074,0.049l5.805,5.805c0.391,0.391,0.391,1.023,0,1.414c-0.195,0.195-0.451,0.293-0.707,0.293\ts-0.512-0.098-0.707-0.293L17,9.383V20.33c0,0.553-0.447,1-1,1c-0.552,0-1-0.447-1-1V9.383l-4.098,4.098\tC10.512,13.872,9.879,13.872,9.488,13.481z M22.819,24.031H9.181c-0.552,0-1,0.447-1,1s0.448,1,1,1h13.639c0.553,0,1-0.447,1-1\tS23.372,24.031,22.819,24.031z\"/></svg>");
-;// CONCATENATED MODULE: ./src/javascripts/ui/components/layout/icon.js
+;// CONCATENATED MODULE: ./src/javascripts/ui/components/layout/icon.tsx
+
 /* eslint-disable import/no-webpack-loader-syntax */
 // The eslint rules are disabled for this as otherwsise we'd need to include the loader rule in all implementations
 // this can again be changed when we can import pre-built packages in implementations
@@ -21300,59 +21413,70 @@ function CarouselMessageSlide(_ref) {
 
 
 
-
 
 
 /* eslint-enable import/no-webpack-loader-syntax */
-
-
-
 const ICONS = {
-  send32: icon_send_32,
-  balloon32: icon_balloon_32,
-  newTopic32: icon_newtopic_32,
-  newTranslation16: icon_newtranslation_16,
-  newTranslation32: icon_newtranslation_32,
-  avatar32: avatar_bot_32,
-  chevronDown8: icon_chevron_down_8,
-  chevronDown32: icon_chevron_down_32,
-  chevronRight8: icon_chevron_right_8,
-  chevronRight16: icon_chevron_right_16,
-  close8: icon_close_8,
-  close16: icon_close_16,
-  enlarge32: icon_enlarge_32,
-  options32: icon_options_32,
-  file32: icon_file_32,
-  upload32: icon_upload_32,
-  download16: icon_download_16,
-  error16: icon_error_16,
-  arrowLeft16: icon_arrow_left_16,
-  arrowRight16: icon_arrow_right_16,
-  check32: icon_check_32,
-  check16: icon_check_16
-};
-const Icon = _ref => {
-  let {
-    name,
-    size = '32',
-    className = undefined,
-    alt
-  } = _ref;
-  const iconName = `${name}${size}`;
-  return o(preact_module/* Fragment */.HY, {
-    children: [o("div", {
-      "aria-hidden": "true",
-      className: className || css_className('icon'),
-      dangerouslySetInnerHTML: {
-        __html: ICONS[iconName]
-      }
-    }), alt && o("span", {
-      className: css_className('visually-hidden'),
-      children: alt
-    })]
-  });
+    send: {
+        32: icon_send_32,
+    },
+    balloon: {
+        32: icon_balloon_32,
+    },
+    newTopic: {
+        32: icon_newtopic_32,
+    },
+    newTranslation: {
+        16: icon_newtranslation_16,
+        32: icon_newtranslation_32,
+    },
+    avatar: {
+        32: avatar_bot_32,
+    },
+    chevronDown: {
+        8: icon_chevron_down_8,
+        32: icon_chevron_down_32,
+    },
+    chevronRight: {
+        8: icon_chevron_right_8,
+        16: icon_chevron_right_16,
+    },
+    close: {
+        8: icon_close_8,
+        16: icon_close_16,
+    },
+    enlarge: {
+        32: icon_enlarge_32,
+    },
+    options: {
+        32: icon_options_32,
+    },
+    file: {
+        32: icon_file_32,
+    },
+    upload: {
+        32: icon_upload_32,
+    },
+    download: {
+        16: icon_download_16,
+    },
+    error: {
+        16: icon_error_16,
+    },
+    arrowLeft: {
+        16: icon_arrow_left_16,
+    },
+    arrowRight: {
+        16: icon_arrow_right_16,
+    },
+    check: {
+        16: icon_check_16,
+        32: icon_check_32,
+    },
 };
+const Icon = ({ name, size = '32', className, alt }) => (o(preact_module/* Fragment */.HY, { children: [o("div", { "aria-hidden": "true", className: className || css_className('icon'), dangerouslySetInnerHTML: { __html: ICONS[name][size] } }), alt && o("span", { className: css_className('visually-hidden'), children: alt })] }));
 /* harmony default export */ var layout_icon = (Icon);
+
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/carousel-component/components/controls.js
 
 
@@ -21384,7 +21508,8 @@ function CarouselControls(_ref) {
       onClick: handlePrevious,
       children: o(layout_icon, {
         name: "arrowLeft",
-        size: "16"
+        size: "16",
+        alt: ""
       })
     }), children, o("button", {
       className: css_className('button', 'button--next'),
@@ -21392,7 +21517,8 @@ function CarouselControls(_ref) {
       onClick: handleNext,
       children: o(layout_icon, {
         name: "arrowRight",
-        size: "16"
+        size: "16",
+        alt: ""
       })
     })]
   });
@@ -21693,7 +21819,8 @@ const ChoicePrompt = _ref => {
       "aria-describedby": descriptorId,
       children: [showOptions ? t('message.choicePrompts.cancelChooseAgain') : t('message.choicePrompts.chooseAgain'), o(layout_icon, {
         name: "chevronDown",
-        size: "8"
+        size: "8",
+        alt: ""
       })]
     }), showOptions && o(message_container, {
       type: "choice-prompt",
@@ -21755,7 +21882,8 @@ const SuggestionsItem = _ref => {
       className: css_className('button', 'button--primary'),
       children: [hasIcon && o(layout_icon, {
         name: "chevronRight",
-        size: "8"
+        size: "8",
+        alt: ""
       }), question]
     })
   });
@@ -21997,7 +22125,8 @@ function EventDivider(_ref) {
       children: iconName ? o(layout_icon, {
         name: iconName,
         size: iconSize,
-        className: iconClassName
+        className: iconClassName,
+        alt: ""
       }) : o("img", {
         src: graphicSrc,
         className: css_className({
@@ -23893,7 +24022,8 @@ const Lightbox = _ref => {
         onClick: onClose,
         children: [o(layout_icon, {
           name: "close",
-          size: "16"
+          size: "16",
+          alt: ""
         }), t('lightbox.closeLabel')]
       })]
     })
@@ -23945,7 +24075,8 @@ const ImageLightbox = _ref => {
         description
       }), o(layout_icon, {
         name: "enlarge",
-        size: "32"
+        size: "32",
+        alt: ""
       })]
     }), showLightBox && o(lightbox, {
       url: url,
@@ -24398,6 +24529,34 @@ const SeamlyActivityMonitor = ({ children }) => {
 
 
 
+
+var seamly_event_subscriber_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = (promise_default())))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
 var seamly_event_subscriber_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && index_of_default()(e).call(e, p) < 0) t[p] = s[p];
@@ -24418,13 +24577,13 @@ var seamly_event_subscriber_rest = undefined && undefined.__rest || function (s,
 
 
 
+
 const EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video'];
 const SeamlyEventSubscriber = () => {
   const api = useSeamlyApiContext();
   const syncChannelRef = (0,hooks_module/* useRef */.sO)();
   const messageChannelRef = (0,hooks_module/* useRef */.sO)();
-  const dispatch = useDispatch();
-  const events = useEvents();
+  const dispatch = useAppDispatch();
   const eventBus = (0,hooks_module/* useContext */.qp)(SeamlyEventBusContext);
   const prevEmittedEventId = (0,hooks_module/* useRef */.sO)(null);
   const {
@@ -24673,31 +24832,19 @@ const SeamlyEventSubscriber = () => {
         if (syncChannelRef.current) {
           (_a = api.conversation.channel) === null || _a === void 0 ? void 0 : _a.off('sync', syncChannelRef.current);
         }
-        syncChannelRef.current = api.conversation.channel.on('sync', payload => {
-          var _a;
-          const lastEvent = events[events.length - 1];
-          const payloadLastEventId = (_a = payload === null || payload === void 0 ? void 0 : payload.lastEvent) === null || _a === void 0 ? void 0 : _a.id;
-          if (lastEvent && payloadLastEventId === lastEvent.payload.id) {
-            return payload;
-          }
-          return api.getConversation().then(history => {
+        syncChannelRef.current = api.conversation.channel.on('sync', payload => seamly_event_subscriber_awaiter(void 0, void 0, void 0, function* () {
+          try {
+            const history = yield dispatch(getConversation(payload)).unwrap();
             if (!history) return;
             dispatch(setHistory(history));
-          }).catch(error => {
-            dispatch(setInterrupt({
-              name: error === null || error === void 0 ? void 0 : error.name,
-              message: error === null || error === void 0 ? void 0 : error.message,
-              langKey: error === null || error === void 0 ? void 0 : error.langKey,
-              action: error === null || error === void 0 ? void 0 : error.action,
-              originalEvent: error === null || error === void 0 ? void 0 : error.originalEvent,
-              originalError: error === null || error === void 0 ? void 0 : error.originalError
-            }));
-          });
-        });
+          } catch (_e) {
+            // nothing to do, the error is handled in the thunk
+          }
+        }));
         return true;
       });
     }
-  }, [api, api.connectionInfo, api.conversation.channel, events, dispatch]);
+  }, [api, api.connectionInfo, api.conversation.channel, dispatch]);
   return null;
 };
 /* harmony default export */ var seamly_event_subscriber = (SeamlyEventSubscriber);
@@ -26346,7 +26493,8 @@ function error_Error(_ref) {
       className: css_className('error__message'),
       children: [o(layout_icon, {
         name: "error",
-        size: "16"
+        size: "16",
+        alt: ""
       }), error]
     })
   });
@@ -26734,7 +26882,8 @@ const OptionsButton = () => {
       "aria-disabled": !multiMenu && !firstOption.available ? 'true' : null,
       children: [multiMenu && o(layout_icon, {
         name: "options",
-        size: "32"
+        size: "32",
+        alt: ""
       }), o("span", {
         className: css_className('button__text'),
         children: multiMenu ? t('options.openButtonText') : `${firstOption.title}${!firstOption.available ? ' ' : ''}`
@@ -26757,7 +26906,7 @@ const TranslationOption = ({ label, checked, description, onChange, id, itemClas
             onChange();
         }
     };
-    return (o("li", { className: css_className([itemClassName, 'translation-options__item']), "aria-selected": checked, role: "option", tabIndex: 0, onClick: onChange, onKeyDown: onKeyDown, id: id, children: [o(layout_icon, { alt: "", name: "check", size: "16" }), label, " ", description && o("span", { children: ["(", description, ")"] })] }));
+    return (o("li", { className: css_className([itemClassName, 'translation-options__item']), "aria-selected": checked, role: "option", tabIndex: 0, onClick: onChange, onKeyDown: onKeyDown, id: id, children: [o(layout_icon, { name: "check", size: "16", alt: "" }), label, " ", description && o("span", { children: ["(", description, ")"] })] }));
 };
 /* harmony default export */ var translation_option = (TranslationOption);
 
@@ -27601,7 +27750,8 @@ function FileInput(_ref) {
         className: css_className('upload__label'),
         children: [o(layout_icon, {
           name: "upload",
-          size: "32"
+          size: "32",
+          alt: ""
         }), o("div", {
           children: [o("span", {
             className: css_className(['upload__label--text']),
@@ -28351,7 +28501,8 @@ const ButtonIcon = () => {
     alt: ""
   }) : o(layout_icon, {
     name: "avatar",
-    size: "32"
+    size: "32",
+    alt: ""
   });
 };
 const WindowOpenButton = _ref => {
@@ -28380,10 +28531,14 @@ const WindowOpenButton = _ref => {
       "aria-label": ariaLabel,
       "aria-hidden": isOpen,
       onClick: handleClick,
-      children: [o("span", {
-        className: css_className('message-count'),
-        "aria-hidden": "true",
-        children: !!count && count
+      children: [o(in_out_transition, {
+        isActive: !!count,
+        transitionStartState: transitionStartStates.notRendered,
+        children: o("span", {
+          className: css_className('message-count'),
+          "aria-hidden": "true",
+          children: count
+        })
       }), o(ButtonIcon, {})]
     })
   });
@@ -29048,7 +29203,8 @@ const AgentInfo = () => {
         alt: ""
       }) : o(layout_icon, {
         name: "avatar",
-        size: "32"
+        size: "32",
+        alt: ""
       }), o("span", {
         className: css_className(classNames),
         "aria-hidden": "true",