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

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

@@ -2269,7 +2269,8 @@ class API {
     });
   }
   getConversationUrl() {
-    return this.store.get('conversationUrl');
+    const conversationUrl = this.store.get('conversationUrl');
+    return conversationUrl;
   }
   hasConversation() {
     return !!this.getConversationUrl();
@@ -2377,7 +2378,7 @@ class API {
         if (error.status >= 500) {
           throw new SeamlyGeneralError(error);
         }
-        throw error;
+        throw new ApiError(error);
       }
     });
   }
@@ -2486,7 +2487,7 @@ class API {
         if (error.status >= 500) {
           throw new SeamlyGeneralError(error);
         }
-        throw error;
+        throw new ApiError(error);
       }
     });
   }
@@ -2546,15 +2547,17 @@ class API {
   }
 }
 _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) {
@@ -2619,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.2.0",
+    clientVersion: "22.3.0-beta.2",
     currentUrl: window.location.toString(),
     screenResolution: `${window.screen.width}x${window.screen.height}`,
     timezone: getTimeZone(),
@@ -6453,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
@@ -7009,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) {
@@ -7074,6 +7134,7 @@ var app_actions_awaiter = undefined && undefined.__awaiter || function (thisArg,
 
 
 
+
 const initializeApp = createAsyncThunk('initializeApp', (_, {
   extra: {
     api,
@@ -7139,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 {
@@ -7154,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
 
 
@@ -7194,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
 };
@@ -7213,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;
@@ -9619,6 +9746,9 @@ function useInterrupt() {
 
 
 
+
+
+
 function useSessionExpiredCommand() {
   const {
     meta: {
@@ -9626,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) {
@@ -10460,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
@@ -10540,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
 
 
@@ -10738,7 +10843,8 @@ function CarouselMessageSlide({
 /* harmony default export */ const 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 */ const 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
@@ -10763,58 +10869,70 @@ function CarouselMessageSlide({
 
 
 
-
 
 
 /* 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 = ({
-  name,
-  size = '32',
-  className = undefined,
-  alt
-}) => {
-  const iconName = `${name}${size}`;
-  return (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-    children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
-      "aria-hidden": "true",
-      className: className || css_className('icon'),
-      dangerouslySetInnerHTML: {
-        __html: ICONS[iconName]
-      }
-    }), alt && (0,jsx_runtime_namespaceObject.jsx)("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 }) => ((0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, { children: [(0,jsx_runtime_namespaceObject.jsx)("div", { "aria-hidden": "true", className: className || css_className('icon'), dangerouslySetInnerHTML: { __html: ICONS[name][size] } }), alt && (0,jsx_runtime_namespaceObject.jsx)("span", { className: css_className('visually-hidden'), children: alt })] }));
 /* harmony default export */ const layout_icon = (Icon);
+
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/carousel-component/components/controls.js
 
 
@@ -10845,7 +10963,8 @@ function CarouselControls({
       onClick: handlePrevious,
       children: (0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
         name: "arrowLeft",
-        size: "16"
+        size: "16",
+        alt: ""
       })
     }), children, (0,jsx_runtime_namespaceObject.jsx)("button", {
       className: css_className('button', 'button--next'),
@@ -10853,7 +10972,8 @@ function CarouselControls({
       onClick: handleNext,
       children: (0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
         name: "arrowRight",
-        size: "16"
+        size: "16",
+        alt: ""
       })
     })]
   });
@@ -11140,7 +11260,8 @@ const ChoicePrompt = ({
       "aria-describedby": descriptorId,
       children: [showOptions ? t('message.choicePrompts.cancelChooseAgain') : t('message.choicePrompts.chooseAgain'), (0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
         name: "chevronDown",
-        size: "8"
+        size: "8",
+        alt: ""
       })]
     }), showOptions && (0,jsx_runtime_namespaceObject.jsx)(message_container, {
       type: "choice-prompt",
@@ -11200,7 +11321,8 @@ const SuggestionsItem = ({
       className: css_className('button', 'button--primary'),
       children: [hasIcon && (0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
         name: "chevronRight",
-        size: "8"
+        size: "8",
+        alt: ""
       }), question]
     })
   });
@@ -11430,7 +11552,8 @@ function EventDivider({
       children: iconName ? (0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
         name: iconName,
         size: iconSize,
-        className: iconClassName
+        className: iconClassName,
+        alt: ""
       }) : (0,jsx_runtime_namespaceObject.jsx)("img", {
         src: graphicSrc,
         className: css_className({
@@ -13318,7 +13441,8 @@ const Lightbox = ({
         onClick: onClose,
         children: [(0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
           name: "close",
-          size: "16"
+          size: "16",
+          alt: ""
         }), t('lightbox.closeLabel')]
       })]
     })
@@ -13366,7 +13490,8 @@ const ImageLightbox = ({
         description
       }), (0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
         name: "enlarge",
-        size: "32"
+        size: "32",
+        alt: ""
       })]
     }), showLightBox && (0,jsx_runtime_namespaceObject.jsx)(lightbox, {
       url: url,
@@ -13797,6 +13922,33 @@ const SeamlyActivityMonitor = ({ 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];
@@ -13817,13 +13969,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 {
@@ -14068,31 +14220,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);
@@ -15677,7 +15817,8 @@ function error_Error({
       className: css_className('error__message'),
       children: [(0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
         name: "error",
-        size: "16"
+        size: "16",
+        alt: ""
       }), error]
     })
   });
@@ -16054,7 +16195,8 @@ const OptionsButton = () => {
       "aria-disabled": !multiMenu && !firstOption.available ? 'true' : null,
       children: [multiMenu && (0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
         name: "options",
-        size: "32"
+        size: "32",
+        alt: ""
       }), (0,jsx_runtime_namespaceObject.jsx)("span", {
         className: css_className('button__text'),
         children: multiMenu ? t('options.openButtonText') : `${firstOption.title}${!firstOption.available ? ' ' : ''}`
@@ -16077,7 +16219,7 @@ const TranslationOption = ({ label, checked, description, onChange, id, itemClas
             onChange();
         }
     };
-    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, ")"] })] }));
+    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, { name: "check", size: "16", alt: "" }), label, " ", description && (0,jsx_runtime_namespaceObject.jsxs)("span", { children: ["(", description, ")"] })] }));
 };
 /* harmony default export */ const translation_option = (TranslationOption);
 
@@ -16904,7 +17046,8 @@ function FileInput({
         className: css_className('upload__label'),
         children: [(0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
           name: "upload",
-          size: "32"
+          size: "32",
+          alt: ""
         }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
           children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
             className: css_className(['upload__label--text']),
@@ -17647,7 +17790,8 @@ const ButtonIcon = () => {
     alt: ""
   }) : (0,jsx_runtime_namespaceObject.jsx)(layout_icon, {
     name: "avatar",
-    size: "32"
+    size: "32",
+    alt: ""
   });
 };
 const WindowOpenButton = ({
@@ -17675,10 +17819,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, {})]
     })
   });
@@ -19370,6 +19518,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,
@@ -19607,7 +19771,7 @@ const standardState = {
     serviceInfo: {
       activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35'
     },
-    events: [cardAskText, cardNavigate, cardTopic]
+    events: [cardAskText, cardNavigate, cardTopic, cardNoImage]
   },
   carousel: {
     category: categoryKeys.messages,
@@ -19623,7 +19787,7 @@ const standardState = {
         type: 'carousel',
         id: randomId(),
         body: {
-          cards: [cardAskText.payload.body, cardNavigate.payload.body, cardTopic.payload.body]
+          cards: [cardAskText.payload.body, cardNavigate.payload.body, cardTopic.payload.body, cardNoImage.payload.body]
         }
       }
     }]
@@ -20022,6 +20186,13 @@ const standardState = {
         }
       }
     },
+    config: {
+      ...baseState.config,
+      context: {
+        ...baseState.context,
+        locale: 'nl'
+      }
+    },
     translations: {
       ...translationsSlice,
       isAvailable: true,