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

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.1",
     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
 
 
@@ -13797,6 +13902,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 +13949,13 @@ var seamly_event_subscriber_rest = undefined && undefined.__rest || function (s,
 
 
 
+
 const EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video'];
 const SeamlyEventSubscriber = () => {
   const api = seamly_api_hooks_useSeamlyApiContext();
   const syncChannelRef = (0,hooks_.useRef)();
   const messageChannelRef = (0,hooks_.useRef)();
-  const dispatch = useDispatch();
-  const events = useEvents();
+  const dispatch = useAppDispatch();
   const eventBus = (0,hooks_.useContext)(SeamlyEventBusContext);
   const prevEmittedEventId = (0,hooks_.useRef)(null);
   const {
@@ -14068,31 +14200,19 @@ const SeamlyEventSubscriber = () => {
         if (syncChannelRef.current) {
           (_a = api.conversation.channel) === null || _a === void 0 ? void 0 : _a.off('sync', syncChannelRef.current);
         }
-        syncChannelRef.current = api.conversation.channel.on('sync', payload => {
-          var _a;
-          const lastEvent = events[events.length - 1];
-          const payloadLastEventId = (_a = payload === null || payload === void 0 ? void 0 : payload.lastEvent) === null || _a === void 0 ? void 0 : _a.id;
-          if (lastEvent && payloadLastEventId === lastEvent.payload.id) {
-            return payload;
-          }
-          return api.getConversation().then(history => {
+        syncChannelRef.current = api.conversation.channel.on('sync', payload => seamly_event_subscriber_awaiter(void 0, void 0, void 0, function* () {
+          try {
+            const history = yield dispatch(getConversation(payload)).unwrap();
             if (!history) return;
             dispatch(setHistory(history));
-          }).catch(error => {
-            dispatch(setInterrupt({
-              name: error === null || error === void 0 ? void 0 : error.name,
-              message: error === null || error === void 0 ? void 0 : error.message,
-              langKey: error === null || error === void 0 ? void 0 : error.langKey,
-              action: error === null || error === void 0 ? void 0 : error.action,
-              originalEvent: error === null || error === void 0 ? void 0 : error.originalEvent,
-              originalError: error === null || error === void 0 ? void 0 : error.originalError
-            }));
-          });
-        });
+          } catch (_e) {
+            // nothing to do, the error is handled in the thunk
+          }
+        }));
         return true;
       });
     }
-  }, [api, api.connectionInfo, api.conversation.channel, events, dispatch]);
+  }, [api, api.connectionInfo, api.conversation.channel, dispatch]);
   return null;
 };
 /* harmony default export */ const seamly_event_subscriber = (SeamlyEventSubscriber);
@@ -17675,10 +17795,14 @@ const WindowOpenButton = ({
       "aria-label": ariaLabel,
       "aria-hidden": isOpen,
       onClick: handleClick,
-      children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
-        className: css_className('message-count'),
-        "aria-hidden": "true",
-        children: !!count && count
+      children: [(0,jsx_runtime_namespaceObject.jsx)(in_out_transition, {
+        isActive: !!count,
+        transitionStartState: transitionStartStates.notRendered,
+        children: (0,jsx_runtime_namespaceObject.jsx)("span", {
+          className: css_className('message-count'),
+          "aria-hidden": "true",
+          children: count
+        })
       }), (0,jsx_runtime_namespaceObject.jsx)(ButtonIcon, {})]
     })
   });
@@ -19370,6 +19494,22 @@ const cardTopic = {
     }
   }
 };
+const cardNoImage = {
+  type: 'message',
+  payload: {
+    type: 'card',
+    id: randomId(),
+    body: {
+      action: {
+        ask: '',
+        type: 'ask'
+      },
+      buttonText: 'Ask about pizzas!',
+      description: 'Pizza Margherita is a <strong>typical Neapolitan pizza</strong>.\n\nIt is made with San Marzano tomatoes, mozzarella cheese, fresh basil, salt, and extra-virgin olive oil.',
+      title: 'Pizza Margherita'
+    }
+  }
+};
 const standardState = {
   base: {
     category: categoryKeys.unstarted,
@@ -19607,7 +19747,7 @@ const standardState = {
     serviceInfo: {
       activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35'
     },
-    events: [cardAskText, cardNavigate, cardTopic]
+    events: [cardAskText, cardNavigate, cardTopic, cardNoImage]
   },
   carousel: {
     category: categoryKeys.messages,