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

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.1",
     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
 
 
@@ -24398,6 +24510,34 @@ const SeamlyActivityMonitor = ({ children }) => {
 
 
 
+
+var seamly_event_subscriber_awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = (promise_default())))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
 var seamly_event_subscriber_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && index_of_default()(e).call(e, p) < 0) t[p] = s[p];
@@ -24418,13 +24558,13 @@ var seamly_event_subscriber_rest = undefined && undefined.__rest || function (s,
 
 
 
+
 const EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video'];
 const SeamlyEventSubscriber = () => {
   const api = useSeamlyApiContext();
   const syncChannelRef = (0,hooks_module/* useRef */.sO)();
   const messageChannelRef = (0,hooks_module/* useRef */.sO)();
-  const dispatch = useDispatch();
-  const events = useEvents();
+  const dispatch = useAppDispatch();
   const eventBus = (0,hooks_module/* useContext */.qp)(SeamlyEventBusContext);
   const prevEmittedEventId = (0,hooks_module/* useRef */.sO)(null);
   const {
@@ -24673,31 +24813,19 @@ const SeamlyEventSubscriber = () => {
         if (syncChannelRef.current) {
           (_a = api.conversation.channel) === null || _a === void 0 ? void 0 : _a.off('sync', syncChannelRef.current);
         }
-        syncChannelRef.current = api.conversation.channel.on('sync', payload => {
-          var _a;
-          const lastEvent = events[events.length - 1];
-          const payloadLastEventId = (_a = payload === null || payload === void 0 ? void 0 : payload.lastEvent) === null || _a === void 0 ? void 0 : _a.id;
-          if (lastEvent && payloadLastEventId === lastEvent.payload.id) {
-            return payload;
-          }
-          return api.getConversation().then(history => {
+        syncChannelRef.current = api.conversation.channel.on('sync', payload => seamly_event_subscriber_awaiter(void 0, void 0, void 0, function* () {
+          try {
+            const history = yield dispatch(getConversation(payload)).unwrap();
             if (!history) return;
             dispatch(setHistory(history));
-          }).catch(error => {
-            dispatch(setInterrupt({
-              name: error === null || error === void 0 ? void 0 : error.name,
-              message: error === null || error === void 0 ? void 0 : error.message,
-              langKey: error === null || error === void 0 ? void 0 : error.langKey,
-              action: error === null || error === void 0 ? void 0 : error.action,
-              originalEvent: error === null || error === void 0 ? void 0 : error.originalEvent,
-              originalError: error === null || error === void 0 ? void 0 : error.originalError
-            }));
-          });
-        });
+          } catch (_e) {
+            // nothing to do, the error is handled in the thunk
+          }
+        }));
         return true;
       });
     }
-  }, [api, api.connectionInfo, api.conversation.channel, events, dispatch]);
+  }, [api, api.connectionInfo, api.conversation.channel, dispatch]);
   return null;
 };
 /* harmony default export */ var seamly_event_subscriber = (SeamlyEventSubscriber);
@@ -28380,10 +28508,14 @@ const WindowOpenButton = _ref => {
       "aria-label": ariaLabel,
       "aria-hidden": isOpen,
       onClick: handleClick,
-      children: [o("span", {
-        className: css_className('message-count'),
-        "aria-hidden": "true",
-        children: !!count && count
+      children: [o(in_out_transition, {
+        isActive: !!count,
+        transitionStartState: transitionStartStates.notRendered,
+        children: o("span", {
+          className: css_className('message-count'),
+          "aria-hidden": "true",
+          children: count
+        })
       }), o(ButtonIcon, {})]
     })
   });