@seamly/web-ui 20.3.0 → 20.3.1

package/build/dist/lib/index.js

@@ -7332,7 +7332,7 @@ function createAction(type, identityReducer = payload => ({
 
   action.toString = () => String(type);
 
-  action.match = obj => (obj === null || obj === void 0 ? void 0 : obj.type) === String(type);
+  action.match = obj => obj?.type === String(type);
 
   return action;
 }
@@ -7422,7 +7422,7 @@ function createThunk(type, payloadCreator) {
 }
 function createReducer(domain, handlers = {}, defaultState) {
   const reducer = (state = defaultState, action) => {
-    const typeReducer = handlers === null || handlers === void 0 ? void 0 : handlers[action === null || action === void 0 ? void 0 : action.type];
+    const typeReducer = handlers?.[action?.type];
     return typeReducer ? typeReducer(state, action) : state;
   };
 
@@ -7757,7 +7757,7 @@ function selectors_defineProperty(obj, key, value) { if (key in obj) { Object.de
 
 const selectConfig = createSelector(selectState, config => {
   let newConfig = selectors_objectSpread({
-    visible: (config === null || config === void 0 ? void 0 : config.layoutMode) === 'inline' ? visibilityStates.open : visibilityStates.minimized,
+    visible: config?.layoutMode === 'inline' ? visibilityStates.open : visibilityStates.minimized,
     appContainerClassNames: config.appContainerClassNames || []
   }, config);
 
@@ -8594,8 +8594,6 @@ function hooks_useSelector(selector, deps = []) {
   (0,hooks_namespaceObject.useLayoutEffect)(() => {
     // we subscribe to the store changes
     return store.subscribe(() => {
-      var _selectorRef$current;
-
       const newState = store.getState(); // prevent recalculating if the state hasn't changed
       // if the selector changed, it was already handled synchronously
 
@@ -8604,7 +8602,7 @@ function hooks_useSelector(selector, deps = []) {
       } // calculate the new value based on selector+state
 
 
-      const newValue = (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 ? void 0 : _selectorRef$current.call(selectorRef, store.getState()); // only if the value changed we update. this saves heaps of re-rendering
+      const newValue = selectorRef.current?.(store.getState()); // only if the value changed we update. this saves heaps of re-rendering
 
       if (newValue !== valueRef.current) {
         valueRef.current = newValue;
@@ -9743,9 +9741,7 @@ const selectEventsWithSuggestion = createSelector(seamly_state_hooks_selectState
   events,
   serviceData
 }, config, userHasResponded) => {
-  var _serviceData$suggesti;
-
-  if (userHasResponded || config.layoutMode === 'inline' || !serviceData.suggestion || !((_serviceData$suggesti = serviceData.suggestion) !== null && _serviceData$suggesti !== void 0 && _serviceData$suggesti.body.length)) {
+  if (userHasResponded || config.layoutMode === 'inline' || !serviceData.suggestion || !serviceData.suggestion?.body.length) {
     return events;
   }
 
@@ -9756,12 +9752,10 @@ const selectEventsWithSuggestion = createSelector(seamly_state_hooks_selectState
   return [...events, suggestionsEvent];
 });
 const selectEvents = createSelector(selectEventsWithSuggestion, selectConfig, (events, config) => {
-  var _config$messages;
-
   const {
     enabled,
     threshold
-  } = (config === null || config === void 0 ? void 0 : (_config$messages = config.messages) === null || _config$messages === void 0 ? void 0 : _config$messages.timeIndicator) ?? {};
+  } = config?.messages?.timeIndicator ?? {};
 
   if (!enabled) {
     return events;
@@ -9794,10 +9788,8 @@ const useSkiplink = () => useSeamlyStateContext().skiplinkTargetId;
 const useSeamlyParticipant = participantId => useSeamlyStateContext().participantInfo.participants[participantId];
 const useSeamlyServiceInfo = () => useSeamlyStateContext().serviceInfo;
 const selectLastMessageEventId = createSelector(selectEvents, events => {
-  var _filteredEvents;
-
   const filteredEvents = events.filter(event => event.type === 'message');
-  return (_filteredEvents = filteredEvents[filteredEvents.length - 1]) === null || _filteredEvents === void 0 ? void 0 : _filteredEvents.payload.id;
+  return filteredEvents[filteredEvents.length - 1]?.payload.id;
 });
 const useLastMessageEventId = () => hooks_useSelector(selectLastMessageEventId);
 const useSeamlyIsHistoryLoaded = () => useSeamlyStateContext().historyLoaded;
@@ -9954,13 +9946,11 @@ const actions_initialize = visibility_utils_createThunk('initialize', async (loc
     api
   }
 }) => {
-  var _api$store$get;
-
   // initialize stored visibility
   const {
     layoutMode
   } = selectConfig(getState());
-  const storedVisibility = (_api$store$get = api.store.get(StoreKey)) === null || _api$store$get === void 0 ? void 0 : _api$store$get[layoutMode];
+  const storedVisibility = api.store.get(StoreKey)?.[layoutMode];
 
   if (storedVisibility) {
     dispatch(setFromStorage(storedVisibility));
@@ -9998,13 +9988,13 @@ class SeamlyBaseError extends Error {
 
     this.originalError = originalError;
 
-    if (originalError !== null && originalError !== void 0 && originalError.payload) {
+    if (originalError?.payload) {
       this.originalEvent = originalError;
       this.originalError = originalError.payload.error;
       this.message = `Event of type ${originalError.payload.type} encountered`;
     }
 
-    if (originalError !== null && originalError !== void 0 && originalError.error) {
+    if (originalError?.error) {
       this.originalError = originalError.error;
     }
   }
@@ -10053,10 +10043,8 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
     config
   }
 }) => {
-  var _config$context;
-
   dispatch(initialize(config));
-  let locale = config === null || config === void 0 ? void 0 : (_config$context = config.context) === null || _config$context === void 0 ? void 0 : _config$context.locale;
+  let locale = config?.context?.locale;
 
   try {
     const {
@@ -10083,7 +10071,7 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
       startChatIcon
     }));
 
-    if (agentParticipant !== null && agentParticipant !== void 0 && agentParticipant.name) {
+    if (agentParticipant?.name) {
       dispatch({
         type: seamlyActions.SET_HEADER_SUB_TITLE,
         title: agentParticipant.name
@@ -10095,22 +10083,18 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
 
   try {
     if (api.hasConversation()) {
-      var _initialState$transla;
-
       const initialState = await api.getConversationIntitialState();
       dispatch({
         type: seamlyActions.SET_INITIAL_STATE,
         initialState
       });
-      locale = ((_initialState$transla = initialState.translation) === null || _initialState$transla === void 0 ? void 0 : _initialState$transla.locale) || locale;
+      locale = initialState.translation?.locale || locale;
 
       if ('userResponded' in initialState) {
         dispatch(setHasResponded(initialState.userResponded));
       }
     } else {
-      var _config$context2, _config$context3;
-
-      if (config !== null && config !== void 0 && (_config$context2 = config.context) !== null && _config$context2 !== void 0 && _config$context2.topic) {
+      if (config?.context?.topic) {
         api.send('action', {
           type: actionTypes.setTopic,
           body: {
@@ -10122,7 +10106,7 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
         });
       }
 
-      if (config !== null && config !== void 0 && (_config$context3 = config.context) !== null && _config$context3 !== void 0 && _config$context3.translationLocale) {
+      if (config?.context?.translationLocale) {
         locale = config.context.translationLocale;
         api.send('action', {
           type: actionTypes.setTranslation,
@@ -12425,21 +12409,19 @@ function useTranslations() {
 function useTranslatedEventData({
   payload
 } = {}) {
-  var _translatedBody, _translatedBody2, _translatedBody3;
-
-  const payloadId = payload === null || payload === void 0 ? void 0 : payload.id;
+  const payloadId = payload?.id;
   let body;
   let translatedBody;
 
-  switch (payload === null || payload === void 0 ? void 0 : payload.type) {
+  switch (payload?.type) {
     case 'participant':
       body = payload.participant.introduction;
       translatedBody = payload.participant.translatedIntroduction;
       break;
 
     default:
-      body = payload === null || payload === void 0 ? void 0 : payload.body;
-      translatedBody = payload === null || payload === void 0 ? void 0 : payload.translatedBody;
+      body = payload?.body;
+      translatedBody = payload?.translatedBody;
   }
 
   const hasTranslation = !!translatedBody;
@@ -12454,12 +12436,12 @@ function useTranslatedEventData({
       dispatch(enableEvent(payloadId));
     }
   }, [isTranslated, payloadId, dispatch]);
-  return [hasTranslation && isTranslated ? (_translatedBody = translatedBody) === null || _translatedBody === void 0 ? void 0 : _translatedBody.data : body, {
+  return [hasTranslation && isTranslated ? translatedBody?.data : body, {
     hasTranslation,
     isTranslated: isTranslated && hasTranslation,
     toggleTranslation,
-    translatedBy: (_translatedBody2 = translatedBody) === null || _translatedBody2 === void 0 ? void 0 : _translatedBody2.translatedBy,
-    locale: (_translatedBody3 = translatedBody) === null || _translatedBody3 === void 0 ? void 0 : _translatedBody3.locale
+    translatedBy: translatedBody?.translatedBy,
+    locale: translatedBody?.locale
   }];
 }
 function useTranslationsContainer() {
@@ -12474,11 +12456,7 @@ function useLocaleNativeName(locale) {
   const {
     languages
   } = useTranslations();
-  return (0,hooks_namespaceObject.useMemo)(() => {
-    var _languages$find;
-
-    return languages === null || languages === void 0 ? void 0 : (_languages$find = languages.find(lang => lang.locale === locale)) === null || _languages$find === void 0 ? void 0 : _languages$find.nativeName;
-  }, [locale, languages]);
+  return (0,hooks_namespaceObject.useMemo)(() => languages?.find(lang => lang.locale === locale)?.nativeName, [locale, languages]);
 }
 ;// CONCATENATED MODULE: ./src/javascripts/domains/translations/middleware.js
 
@@ -12489,20 +12467,18 @@ function middleware_createMiddleware() {
     dispatch,
     getState
   }) => next => action => {
-    var _action$history, _action$history$trans, _action$initialState, _action$initialState$, _action$event, _action$event$payload, _action$event$payload2;
-
     const result = next(action);
 
     switch (action.type) {
       case String(seamlyActions.SET_HISTORY):
-        if ((_action$history = action.history) !== null && _action$history !== void 0 && (_action$history$trans = _action$history.translation) !== null && _action$history$trans !== void 0 && _action$history$trans.enabled) {
+        if (action.history?.translation?.enabled) {
           dispatch(enable(action.history.translation.locale));
         }
 
         break;
 
       case String(seamlyActions.SET_INITIAL_STATE):
-        if ((_action$initialState = action.initialState) !== null && _action$initialState !== void 0 && (_action$initialState$ = _action$initialState.translation) !== null && _action$initialState$ !== void 0 && _action$initialState$.enabled) {
+        if (action.initialState?.translation?.enabled) {
           dispatch(enable(action.initialState.translation.locale));
           dispatch(setLocale(action.locale));
         }
@@ -12510,7 +12486,7 @@ function middleware_createMiddleware() {
         break;
 
       case String(seamlyActions.ADD_EVENT):
-        if (action.event.type === 'info' && ((_action$event = action.event) === null || _action$event === void 0 ? void 0 : (_action$event$payload = _action$event.payload) === null || _action$event$payload === void 0 ? void 0 : (_action$event$payload2 = _action$event$payload.body) === null || _action$event$payload2 === void 0 ? void 0 : _action$event$payload2.subtype) === 'new_translation' && action.event.payload.body.translationEnabled) {
+        if (action.event.type === 'info' && action.event?.payload?.body?.subtype === 'new_translation' && action.event.payload.body.translationEnabled) {
           dispatch(setLocale(action.event.payload.body.translationLocale));
         }
 
@@ -12547,9 +12523,7 @@ const translations_reducer_initialState = {
 };
 /* harmony default export */ const translations_reducer = (translations_utils_createReducer({
   [seamlyActions.SET_FEATURES]: (state, action) => {
-    var _action$features;
-
-    const feature = action === null || action === void 0 ? void 0 : (_action$features = action.features) === null || _action$features === void 0 ? void 0 : _action$features.translation;
+    const feature = action?.features?.translation;
 
     if (!feature) {
       return state;
@@ -12902,9 +12876,7 @@ function validate(values, schema = {}) {
       validations = [validations];
     }
 
-    for (let i = 0; i < ((_validations = validations) === null || _validations === void 0 ? void 0 : _validations.length) ?? 0; i++) {
-      var _validations;
-
+    for (let i = 0; i < validations?.length ?? 0; i++) {
       if (!validations[i].fn(values[key], validations[i].compareValue)) {
         errors[key] = validations[i].errorText;
         break;
@@ -12951,7 +12923,7 @@ const [registerControl, deregisterControl, actions_updateControlValue, actions_u
 
 const selectors_getState = forms_utils_selectState;
 const getFormById = createSelector(selectors_getState, getPropSelector('formId'), (forms, formId) => forms[formId]);
-const getFormControlsByFormId = createSelector(getFormById, form => (form === null || form === void 0 ? void 0 : form.controls) || {});
+const getFormControlsByFormId = createSelector(getFormById, form => form?.controls || {});
 const getFormValuesByFormId = createSelector(getFormControlsByFormId, controls => {
   const valuesObj = {};
   Object.entries(controls).forEach(([key, {
@@ -12961,16 +12933,8 @@ const getFormValuesByFormId = createSelector(getFormControlsByFormId, controls =
   });
   return valuesObj;
 });
-const getControlValueByName = createSelector(getFormControlsByFormId, getPropSelector('name'), (controls, name) => {
-  var _controls$name;
-
-  return (_controls$name = controls[name]) === null || _controls$name === void 0 ? void 0 : _controls$name.value;
-});
-const getControlTouchedByName = createSelector(getFormControlsByFormId, getPropSelector('name'), (controls, name) => {
-  var _controls$name2;
-
-  return (_controls$name2 = controls[name]) === null || _controls$name2 === void 0 ? void 0 : _controls$name2.touched;
-});
+const getControlValueByName = createSelector(getFormControlsByFormId, getPropSelector('name'), (controls, name) => controls[name]?.value);
+const getControlTouchedByName = createSelector(getFormControlsByFormId, getPropSelector('name'), (controls, name) => controls[name]?.touched);
 ;// CONCATENATED MODULE: ./src/javascripts/domains/forms/context.js
 
 const FormContext = (0,external_preact_namespaceObject.createContext)({});
@@ -13030,7 +12994,7 @@ function useFormControl(name) {
     formId,
     name
   }, [formId, name]);
-  const error = errors === null || errors === void 0 ? void 0 : errors[name];
+  const error = errors?.[name];
   const isValid = !error;
   (0,hooks_namespaceObject.useEffect)(() => {
     // Make sure the form is registered
@@ -13131,11 +13095,9 @@ function FormProvider(_ref) {
     });
   }, [setExternalErrors]);
   const handleSubmit = (0,hooks_namespaceObject.useCallback)(e => {
-    var _e$submitter;
-
     e.preventDefault(); // If the submitter is set to being aria-disabled, block the submit action
 
-    const ariaDisabled = ((_e$submitter = e.submitter) === null || _e$submitter === void 0 ? void 0 : _e$submitter.ariaDisabled) === 'true';
+    const ariaDisabled = e.submitter?.ariaDisabled === 'true';
     setIsSubmitted(!ariaDisabled);
 
     if (!ariaDisabled && validationIsValid) {
@@ -13202,9 +13164,7 @@ const initialControlState = {
 };
 
 function updateFormControl(state, formId, name, controlState) {
-  var _state$formId;
-
-  const currentControlState = ((_state$formId = state[formId]) === null || _state$formId === void 0 ? void 0 : _state$formId.controls[name]) || initialControlState;
+  const currentControlState = state[formId]?.controls[name] || initialControlState;
   return forms_reducer_objectSpread(forms_reducer_objectSpread({}, state), {}, {
     [formId]: forms_reducer_objectSpread(forms_reducer_objectSpread({}, state[formId]), {}, {
       controls: forms_reducer_objectSpread(forms_reducer_objectSpread({}, state[formId].controls), {}, {
@@ -13232,11 +13192,9 @@ function updateFormControl(state, formId, name, controlState) {
   [deregisterForm]: (state, {
     formId
   }) => {
-    var _newState$formId;
-
     const newState = forms_reducer_objectSpread({}, state);
 
-    if (!((_newState$formId = newState[formId]) !== null && _newState$formId !== void 0 && _newState$formId.persistData)) {
+    if (!newState[formId]?.persistData) {
       delete newState[formId];
     }
 
@@ -13467,7 +13425,7 @@ const validateFileSize = (fileList, maxSize) => {
 
   return isValid;
 };
-const fileListObjectIsNotEmpty = fileListObj => !!(fileListObj !== null && fileListObj !== void 0 && fileListObj.length) > 0;
+const fileListObjectIsNotEmpty = fileListObj => !!fileListObj?.length > 0;
 /* eslint-disable no-control-regex */
 
 const isEmailString = val => {
@@ -14466,13 +14424,11 @@ const timeFormatOptions = {
   minute: 'numeric'
 };
 const useFormattedDate = date => {
-  var _config$context;
-
   const {
     t
   } = useI18n();
   const config = useConfig();
-  const locale = (config === null || config === void 0 ? void 0 : (_config$context = config.context) === null || _config$context === void 0 ? void 0 : _config$context.locale) ?? [];
+  const locale = config?.context?.locale ?? [];
   const eventDate = new Date(date);
   const currentDate = new Date();
   const midnight = new Date(currentDate);
@@ -14844,11 +14800,9 @@ const useChoicePrompt = event => {
     service
   } = payload;
   const subEvent = (0,hooks_namespaceObject.useMemo)(() => {
-    var _event$payload$body;
-
     return choice_prompt_objectSpread(choice_prompt_objectSpread({}, event), {}, {
       payload: choice_prompt_objectSpread(choice_prompt_objectSpread({}, event.payload), {}, {
-        body: (_event$payload$body = event.payload.body) === null || _event$payload$body === void 0 ? void 0 : _event$payload$body.prompt,
+        body: event.payload.body?.prompt,
         translatedBody: event.payload.translatedBody && choice_prompt_objectSpread(choice_prompt_objectSpread({}, event.payload.translatedBody), {}, {
           data: event.payload.translatedBody.data.prompt
         })
@@ -22470,11 +22424,7 @@ const OptionsButton = () => {
   const prevMenuIsOpen = (0,hooks_namespaceObject.useRef)(false);
   const multiMenu = optionsLength > 1;
   const firstOption = menuOptions[0];
-  const firstOptionName = (0,hooks_namespaceObject.useMemo)(() => {
-    var _firstOption$name;
-
-    return firstOption === null || firstOption === void 0 ? void 0 : (_firstOption$name = firstOption.name) === null || _firstOption$name === void 0 ? void 0 : _firstOption$name.trim().replace(/\s+/g, '');
-  }, [firstOption]);
+  const firstOptionName = (0,hooks_namespaceObject.useMemo)(() => firstOption?.name?.trim().replace(/\s+/g, ''), [firstOption]);
   (0,hooks_namespaceObject.useEffect)(() => {
     return () => {
       clearTimeout(focusOutDelayTimeoutID.current);
@@ -23051,7 +23001,9 @@ const ViewComponentsMap = {
   window: window_view
 };
 
-const View = () => {
+const View = ({
+  children
+}) => {
   const [, setSeamlyContainerElement] = useSeamlyContainerElement();
   const {
     namespace,
@@ -23108,7 +23060,7 @@ const View = () => {
       zIndex
     },
     ref: containerElementRef,
-    children: (0,jsx_runtime_namespaceObject.jsx)(ViewComponent, {})
+    children: children || (0,jsx_runtime_namespaceObject.jsx)(ViewComponent, {})
   });
 };
 
@@ -23135,7 +23087,7 @@ function errors_createMiddleware({
         api,
         layoutMode
       } = selectConfig(getState());
-      errorCallback === null || errorCallback === void 0 ? void 0 : errorCallback(action.error, {
+      errorCallback?.(action.error, {
         namespace,
         api,
         layoutMode,
@@ -23179,11 +23131,7 @@ function useSeamlyInstanceFunction(functionName, fn, deps = []) {
       return undefined;
     }
 
-    const callback = (...args) => {
-      var _callbackRef$current;
-
-      return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
-    };
+    const callback = (...args) => callbackRef.current?.(...args);
 
     eventBus.emit('function.register', functionName, callback);
     return () => eventBus.emit('function.unregister', functionName, callback); // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -23228,12 +23176,12 @@ const SeamlyInstanceFunctionsLoader = () => {
     sendMessage({
       body: text
     });
-  }, [api === null || api === void 0 ? void 0 : api.send]);
+  }, [api?.send]);
   useSeamlyInstanceFunction('setVariables', variables => {
     sendContext({
       variables
     });
-  }, [api === null || api === void 0 ? void 0 : api.send]);
+  }, [api?.send]);
   useSeamlyInstanceFunction('getVisibility', callback => {
     if (callback) {
       callback(currentVisibility.current);
@@ -23249,7 +23197,7 @@ const SeamlyInstanceFunctionsLoader = () => {
 
     onActivityHandler();
     setVisibility(visibilityState);
-  }, [config === null || config === void 0 ? void 0 : config.api]);
+  }, [config?.api]);
   useSeamlyInstanceFunction('sendCustomAction', (actionType, body) => {
     sendAction({
       type: 'custom',
@@ -26204,7 +26152,7 @@ class API {
     return {
       clientName: "@seamly/web-ui",
       clientVariant: this.layoutMode,
-      clientVersion: "20.3.0",
+      clientVersion: "20.3.1",
       currentUrl: window.location.toString(),
       screenResolution: `${window.screen.width}x${window.screen.height}`,
       timezone: getTimeZone(),
@@ -26712,9 +26660,7 @@ class ExternalApi {
   }
 
   getMergedVariables(userConfig) {
-    var _this$appConfig$conte, _userConfig$context;
-
-    return external_api_objectSpread(external_api_objectSpread(external_api_objectSpread({}, ((_this$appConfig$conte = this.appConfig.context) === null || _this$appConfig$conte === void 0 ? void 0 : _this$appConfig$conte.variables) || {}), ((_userConfig$context = userConfig.context) === null || _userConfig$context === void 0 ? void 0 : _userConfig$context.variables) || {}), this.context.variables || {});
+    return external_api_objectSpread(external_api_objectSpread(external_api_objectSpread({}, this.appConfig.context?.variables || {}), userConfig.context?.variables || {}), this.context.variables || {});
   }
 
 }
@@ -26762,7 +26708,7 @@ const AgentInfo = () => {
     hasInterrupt
   } = useInterrupt();
   const startChatIcon = useStartChatIcon();
-  const src = (currentAgent === null || currentAgent === void 0 ? void 0 : currentAgent.avatar) ?? startChatIcon;
+  const src = currentAgent?.avatar ?? startChatIcon;
   const displaySubtitle = hasInterrupt ? '' : subTitle;
   const classNames = ['message-count'];
 
@@ -26779,7 +26725,7 @@ const AgentInfo = () => {
     children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
       className: css_className('agent-info__graphic'),
       children: [src ? (0,jsx_runtime_namespaceObject.jsx)("img", {
-        className: css_className(currentAgent !== null && currentAgent !== void 0 && currentAgent.avatar ? 'avatar' : 'icon'),
+        className: css_className(currentAgent?.avatar ? 'avatar' : 'icon'),
         src: src,
         alt: ""
       }) : (0,jsx_runtime_namespaceObject.jsx)(icon, {
@@ -27319,6 +27265,7 @@ const DeprecatedView = () => {
  // Used by: Client
 
  // Used by: StyleGuide
+// Used by: Client (with custom view)
 
  // Used by: Client