@seamly/web-ui 20.5.0 → 20.7.0

package/build/dist/lib/index.js

@@ -7332,7 +7332,7 @@ function createAction(type, identityReducer = payload => ({
 
   action.toString = () => String(type);
 
-  action.match = obj => obj?.type === String(type);
+  action.match = obj => (obj === null || obj === void 0 ? void 0 : 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?.[action?.type];
+    const typeReducer = handlers === null || handlers === void 0 ? void 0 : handlers[action === null || action === void 0 ? void 0 : 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?.layoutMode === 'inline' ? visibilityStates.open : visibilityStates.minimized,
+    visible: (config === null || config === void 0 ? void 0 : config.layoutMode) === 'inline' ? visibilityStates.open : visibilityStates.minimized,
     appContainerClassNames: config.appContainerClassNames || []
   }, config);
 
@@ -8594,6 +8594,8 @@ 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
 
@@ -8602,7 +8604,7 @@ function hooks_useSelector(selector, deps = []) {
       } // calculate the new value based on selector+state
 
 
-      const newValue = selectorRef.current?.(store.getState()); // only if the value changed we update. this saves heaps of re-rendering
+      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
 
       if (newValue !== valueRef.current) {
         valueRef.current = newValue;
@@ -8877,6 +8879,7 @@ function seamly_utils_objectSpread(target) { for (var i = 1; i < arguments.lengt
 function seamly_utils_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 
+
 const eventTypes = {
   info: 'info',
   message: 'message',
@@ -9168,9 +9171,9 @@ const seamlyStateReducer = (state, action) => {
 
 
       if (accountHasUploads && (eventType === eventTypes.message || eventType === eventTypes.participant) && !payload.fromClient) {
-        const {
-          type: entryType
-        } = payload.entry || {};
+        var _payload$entry;
+
+        const entryType = payload === null || payload === void 0 ? void 0 : (_payload$entry = payload.entry) === null || _payload$entry === void 0 ? void 0 : _payload$entry.type;
         newOptions = seamly_utils_objectSpread(seamly_utils_objectSpread({}, newOptions), {}, {
           features: seamly_utils_objectSpread(seamly_utils_objectSpread({}, newOptions.features), {}, {
             uploads: seamly_utils_objectSpread(seamly_utils_objectSpread({}, newOptions.features.uploads), {}, {
@@ -9200,7 +9203,10 @@ const seamlyStateReducer = (state, action) => {
           // event optimistically.
           payload: seamly_utils_objectSpread(seamly_utils_objectSpread({}, incrementUnread && {
             messageStatus: payload.fromClient ? readStates.read : readStates.received
-          }), payload)
+          }), {}, {
+            // We add a randomid to use as key for mapping of Events to avoid rerendering
+            key: randomId()
+          }, payload)
         })]
       });
 
@@ -9294,12 +9300,9 @@ const seamlyStateReducer = (state, action) => {
       const newFeaturesHasUpload = newFeatures.hasOwnProperty(featureKeys.uploads); // Only set uploads if it was initialised by the account config.
 
       if (newFeaturesHasUpload) {
-        const {
-          payload: lastParticipantEventPayload
-        } = lastParticipantEvent;
-        const {
-          type: entryType
-        } = lastParticipantEventPayload.entry || {};
+        var _lastParticipantEvent, _lastParticipantEvent2;
+
+        const entryType = lastParticipantEvent === null || lastParticipantEvent === void 0 ? void 0 : (_lastParticipantEvent = lastParticipantEvent.payload) === null || _lastParticipantEvent === void 0 ? void 0 : (_lastParticipantEvent2 = _lastParticipantEvent.entry) === null || _lastParticipantEvent2 === void 0 ? void 0 : _lastParticipantEvent2.type;
         newFeatures = seamly_utils_objectSpread(seamly_utils_objectSpread({}, newFeatures), {}, {
           uploads: {
             enabled: !!(uploads && uploads.enabled),
@@ -9755,7 +9758,9 @@ const selectEventsWithSuggestion = createSelector(seamly_state_hooks_selectState
   events,
   serviceData
 }, config, userHasResponded) => {
-  if (userHasResponded || config.layoutMode === 'inline' || !serviceData.suggestion || !serviceData.suggestion?.body.length) {
+  var _serviceData$suggesti;
+
+  if (userHasResponded || config.layoutMode === 'inline' || !serviceData.suggestion || !((_serviceData$suggesti = serviceData.suggestion) !== null && _serviceData$suggesti !== void 0 && _serviceData$suggesti.body.length)) {
     return events;
   }
 
@@ -9766,10 +9771,12 @@ const selectEventsWithSuggestion = createSelector(seamly_state_hooks_selectState
   return [...events, suggestionsEvent];
 });
 const selectEvents = createSelector(selectEventsWithSuggestion, selectConfig, (events, config) => {
+  var _config$messages;
+
   const {
     enabled,
     threshold
-  } = config?.messages?.timeIndicator ?? {};
+  } = (config === null || config === void 0 ? void 0 : (_config$messages = config.messages) === null || _config$messages === void 0 ? void 0 : _config$messages.timeIndicator) ?? {};
 
   if (!enabled) {
     return events;
@@ -9803,8 +9810,10 @@ 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.length - 1]?.payload.id;
+  return (_filteredEvents = filteredEvents[filteredEvents.length - 1]) === null || _filteredEvents === void 0 ? void 0 : _filteredEvents.payload.id;
 });
 const useLastMessageEventId = () => hooks_useSelector(selectLastMessageEventId);
 const useSeamlyIsHistoryLoaded = () => useSeamlyStateContext().historyLoaded;
@@ -9973,11 +9982,13 @@ 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(StoreKey)?.[layoutMode];
+  const storedVisibility = (_api$store$get = api.store.get(StoreKey)) === null || _api$store$get === void 0 ? void 0 : _api$store$get[layoutMode];
 
   if (storedVisibility) {
     dispatch(setFromStorage(storedVisibility));
@@ -10015,13 +10026,13 @@ class SeamlyBaseError extends Error {
 
     this.originalError = originalError;
 
-    if (originalError?.payload) {
+    if (originalError !== null && originalError !== void 0 && originalError.payload) {
       this.originalEvent = originalError;
       this.originalError = originalError.payload.error;
       this.message = `Event of type ${originalError.payload.type} encountered`;
     }
 
-    if (originalError?.error) {
+    if (originalError !== null && originalError !== void 0 && originalError.error) {
       this.originalError = originalError.error;
     }
   }
@@ -10070,8 +10081,10 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
     config
   }
 }) => {
+  var _config$context;
+
   dispatch(initialize(config));
-  let locale = config?.context?.locale;
+  let locale = config === null || config === void 0 ? void 0 : (_config$context = config.context) === null || _config$context === void 0 ? void 0 : _config$context.locale;
 
   try {
     const {
@@ -10098,7 +10111,7 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
       startChatIcon
     }));
 
-    if (agentParticipant?.name) {
+    if (agentParticipant !== null && agentParticipant !== void 0 && agentParticipant.name) {
       dispatch({
         type: seamlyActions.SET_HEADER_SUB_TITLE,
         title: agentParticipant.name
@@ -10110,18 +10123,22 @@ 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.translation?.locale || locale;
+      locale = ((_initialState$transla = initialState.translation) === null || _initialState$transla === void 0 ? void 0 : _initialState$transla.locale) || locale;
 
       if ('userResponded' in initialState) {
         dispatch(setHasResponded(initialState.userResponded));
       }
     } else {
-      if (config?.context?.topic) {
+      var _config$context2, _config$context3;
+
+      if (config !== null && config !== void 0 && (_config$context2 = config.context) !== null && _config$context2 !== void 0 && _config$context2.topic) {
         api.send('action', {
           type: actionTypes.setTopic,
           body: {
@@ -10133,7 +10150,7 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
         });
       }
 
-      if (config?.context?.translationLocale) {
+      if (config !== null && config !== void 0 && (_config$context3 = config.context) !== null && _config$context3 !== void 0 && _config$context3.translationLocale) {
         locale = config.context.translationLocale;
         api.send('action', {
           type: actionTypes.setTranslation,
@@ -11537,13 +11554,13 @@ const useIntersect = ({
 }) => {
   const [entry, setEntry] = (0,hooks_namespaceObject.useState)(null);
   const containerRef = (0,hooks_namespaceObject.useRef)(null);
-  const isVisible = !!entry?.isIntersecting || !enabled;
+  const isVisible = !!(entry !== null && entry !== void 0 && entry.isIntersecting) || !enabled;
   const frozen = isVisible && freezeOnceVisible;
 
   const observerCallback = ([updatedEntry]) => setEntry(updatedEntry);
 
   (0,hooks_namespaceObject.useEffect)(() => {
-    const node = containerRef?.current;
+    const node = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
     const hasIOSupport = !!window.IntersectionObserver;
 
     if (!node && "production" === 'development') {} // Return an arrow function to have a consistent return value
@@ -11802,20 +11819,6 @@ const useSeamlyCommands = () => {
       }
     });
   }, [dispatch]);
-  const sendInfo = (0,hooks_namespaceObject.useCallback)(({
-    type,
-    subtype
-  }) => {
-    const info = {
-      type,
-      subtype,
-      id: randomId(),
-      transactionId: randomId(),
-      participant: userParticipantId,
-      fromClient: true
-    };
-    api.send('info', info);
-  }, [api]);
   const sendAction = (0,hooks_namespaceObject.useCallback)(body => {
     if (!body) {
       return;
@@ -11858,7 +11861,6 @@ const useSeamlyCommands = () => {
     connect,
     start,
     sendMessage,
-    sendInfo,
     sendAction,
     sendContext,
     reset,
@@ -12530,19 +12532,21 @@ function useTranslations() {
 function useTranslatedEventData({
   payload
 } = {}) {
-  const payloadId = payload?.id;
+  var _translatedBody, _translatedBody2, _translatedBody3;
+
+  const payloadId = payload === null || payload === void 0 ? void 0 : payload.id;
   let body;
   let translatedBody;
 
-  switch (payload?.type) {
+  switch (payload === null || payload === void 0 ? void 0 : payload.type) {
     case 'participant':
       body = payload.participant.introduction;
       translatedBody = payload.participant.translatedIntroduction;
       break;
 
     default:
-      body = payload?.body;
-      translatedBody = payload?.translatedBody;
+      body = payload === null || payload === void 0 ? void 0 : payload.body;
+      translatedBody = payload === null || payload === void 0 ? void 0 : payload.translatedBody;
   }
 
   const hasTranslation = !!translatedBody;
@@ -12557,12 +12561,12 @@ function useTranslatedEventData({
       dispatch(enableEvent(payloadId));
     }
   }, [isTranslated, payloadId, dispatch]);
-  return [hasTranslation && isTranslated ? translatedBody?.data : body, {
+  return [hasTranslation && isTranslated ? (_translatedBody = translatedBody) === null || _translatedBody === void 0 ? void 0 : _translatedBody.data : body, {
     hasTranslation,
     isTranslated: isTranslated && hasTranslation,
     toggleTranslation,
-    translatedBy: translatedBody?.translatedBy,
-    locale: translatedBody?.locale
+    translatedBy: (_translatedBody2 = translatedBody) === null || _translatedBody2 === void 0 ? void 0 : _translatedBody2.translatedBy,
+    locale: (_translatedBody3 = translatedBody) === null || _translatedBody3 === void 0 ? void 0 : _translatedBody3.locale
   }];
 }
 function useTranslationsContainer() {
@@ -12577,49 +12581,58 @@ function useLocaleNativeName(locale) {
   const {
     languages
   } = useTranslations();
-  return (0,hooks_namespaceObject.useMemo)(() => languages?.find(lang => lang.locale === locale)?.nativeName, [locale, languages]);
+  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]);
 }
 ;// CONCATENATED MODULE: ./src/javascripts/domains/translations/middleware.js
 
 
 
-function middleware_createMiddleware() {
-  return ({
-    dispatch,
-    getState
-  }) => next => action => {
-    const result = next(action);
+function middleware_createMiddleware({
+  dispatch,
+  getState
+}) {
+  return next => {
+    return action => {
+      var _action$history, _action$history$trans, _action$initialState, _action$initialState$, _action$event, _action$event$payload, _action$event$payload2;
 
-    switch (action.type) {
-      case String(seamlyActions.SET_HISTORY):
-        if (action.history?.translation?.enabled) {
-          dispatch(enable(action.history.translation.locale));
-        }
+      const result = next(action);
 
-        break;
+      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) {
+            dispatch(enable(action.history.translation.locale));
+            dispatch(setLocale(action.history.translation.locale));
+          }
 
-      case String(seamlyActions.SET_INITIAL_STATE):
-        if (action.initialState?.translation?.enabled) {
-          dispatch(enable(action.initialState.translation.locale));
-          dispatch(setLocale(action.locale));
-        }
+          break;
 
-        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) {
+            dispatch(enable(action.initialState.translation.locale));
+            dispatch(setLocale(action.locale));
+          }
 
-      case String(seamlyActions.ADD_EVENT):
-        if (action.event.type === 'info' && action.event?.payload?.body?.subtype === 'new_translation' && action.event.payload.body.translationEnabled) {
-          dispatch(setLocale(action.event.payload.body.translationLocale));
-        }
+          break;
 
-        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) {
+            dispatch(setLocale(action.event.payload.body.translationLocale));
+          }
 
-      case String(disable):
-        const initialLocale = selectInitialLocale(getState());
-        dispatch(setLocale(initialLocale));
-        break;
-    }
+          break;
 
-    return result;
+        case String(disable):
+          const initialLocale = selectInitialLocale(getState());
+          dispatch(setLocale(initialLocale));
+          break;
+      }
+
+      return result;
+    };
   };
 }
 ;// CONCATENATED MODULE: ./src/javascripts/domains/translations/reducer.js
@@ -12644,7 +12657,9 @@ const translations_reducer_initialState = {
 };
 /* harmony default export */ const translations_reducer = (translations_utils_createReducer({
   [seamlyActions.SET_FEATURES]: (state, action) => {
-    const feature = action?.features?.translation;
+    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;
 
     if (!feature) {
       return state;
@@ -12997,7 +13012,9 @@ function validate(values, schema = {}) {
       validations = [validations];
     }
 
-    for (let i = 0; i < validations?.length ?? 0; i++) {
+    for (let i = 0; i < ((_validations = validations) === null || _validations === void 0 ? void 0 : _validations.length) ?? 0; i++) {
+      var _validations;
+
       if (!validations[i].fn(values[key], validations[i].compareValue)) {
         errors[key] = validations[i].errorText;
         break;
@@ -13044,7 +13061,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?.controls || {});
+const getFormControlsByFormId = createSelector(getFormById, form => (form === null || form === void 0 ? void 0 : form.controls) || {});
 const getFormValuesByFormId = createSelector(getFormControlsByFormId, controls => {
   const valuesObj = {};
   Object.entries(controls).forEach(([key, {
@@ -13054,8 +13071,16 @@ const getFormValuesByFormId = createSelector(getFormControlsByFormId, controls =
   });
   return valuesObj;
 });
-const getControlValueByName = createSelector(getFormControlsByFormId, getPropSelector('name'), (controls, name) => controls[name]?.value);
-const getControlTouchedByName = createSelector(getFormControlsByFormId, getPropSelector('name'), (controls, name) => controls[name]?.touched);
+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;
+});
 ;// CONCATENATED MODULE: ./src/javascripts/domains/forms/context.js
 
 const FormContext = (0,external_preact_namespaceObject.createContext)({});
@@ -13115,7 +13140,7 @@ function useFormControl(name) {
     formId,
     name
   }, [formId, name]);
-  const error = errors?.[name];
+  const error = errors === null || errors === void 0 ? void 0 : errors[name];
   const isValid = !error;
   (0,hooks_namespaceObject.useEffect)(() => {
     // Make sure the form is registered
@@ -13217,9 +13242,11 @@ 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?.ariaDisabled === 'true';
+    const ariaDisabled = ((_e$submitter = e.submitter) === null || _e$submitter === void 0 ? void 0 : _e$submitter.ariaDisabled) === 'true';
     setIsSubmitted(!ariaDisabled);
 
     if (!ariaDisabled && validationIsValid) {
@@ -13286,7 +13313,9 @@ const initialControlState = {
 };
 
 function updateFormControl(state, formId, name, controlState) {
-  const currentControlState = state[formId]?.controls[name] || initialControlState;
+  var _state$formId;
+
+  const currentControlState = ((_state$formId = state[formId]) === null || _state$formId === void 0 ? void 0 : _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), {}, {
@@ -13314,9 +13343,11 @@ function updateFormControl(state, formId, name, controlState) {
   [deregisterForm]: (state, {
     formId
   }) => {
+    var _newState$formId;
+
     const newState = forms_reducer_objectSpread({}, state);
 
-    if (!newState[formId]?.persistData) {
+    if (!((_newState$formId = newState[formId]) !== null && _newState$formId !== void 0 && _newState$formId.persistData)) {
       delete newState[formId];
     }
 
@@ -13547,7 +13578,7 @@ const validateFileSize = (fileList, maxSize) => {
 
   return isValid;
 };
-const fileListObjectIsNotEmpty = fileListObj => !!fileListObj?.length > 0;
+const fileListObjectIsNotEmpty = fileListObj => !!(fileListObj !== null && fileListObj !== void 0 && fileListObj.length) > 0;
 /* eslint-disable no-control-regex */
 
 const isEmailString = val => {
@@ -14156,16 +14187,15 @@ const SuggestionsList = ({
 
 
 
-
 
 
 const Suggestions = ({
-  isAside
+  isAside = false
 }) => {
   // generic hooks
   const {
-    layoutMode
-  } = useConfig();
+    isInline
+  } = useSeamlyLayoutMode();
   const {
     t
   } = useI18n();
@@ -14207,11 +14237,20 @@ const Suggestions = ({
   const prevHasSuggestions = (0,hooks_namespaceObject.useRef)(false);
   const previousRenderedSuggestions = (0,hooks_namespaceObject.useRef)([]);
   const hasSuggestions = !!suggestions.length;
-  const hideSuggestions = layoutMode === 'inline' ? (hasResponded || isOpen) && !isAside : hasResponded;
+  const hideSuggestions = isInline ? (hasResponded || isOpen) && !isAside : hasResponded;
   const prevHideSuggestions = (0,hooks_namespaceObject.useRef)(hideSuggestions);
   const showSuggestionsContainer = hasSuggestions && !hideSuggestions;
   const renderedSuggestions = hasSuggestions ? suggestions : previousRenderedSuggestions.current;
-  previousRenderedSuggestions.current = renderedSuggestions; // click handler
+  previousRenderedSuggestions.current = renderedSuggestions;
+  const suggestionsClassNames = (0,hooks_namespaceObject.useMemo)(() => {
+    const classNames = ['suggestions'];
+
+    if (isAside) {
+      classNames.push('suggestions--aside');
+    }
+
+    return css_className(classNames);
+  }, [isAside]); // click handler
 
   const handleClick = (0,hooks_namespaceObject.useCallback)(({
     id,
@@ -14276,7 +14315,7 @@ const Suggestions = ({
     isActive: showSuggestionsContainer,
     transitionStartState: transitionStartStates.notRendered,
     children: (0,jsx_runtime_namespaceObject.jsxs)(ContainerElement, {
-      className: css_className('suggestions'),
+      className: suggestionsClassNames,
       "aria-labelledby": headingText ? sectionId : null,
       ref: containerRef,
       children: [headingText && (0,jsx_runtime_namespaceObject.jsx)("p", {
@@ -14544,11 +14583,13 @@ const timeFormatOptions = {
   minute: 'numeric'
 };
 const useFormattedDate = date => {
+  var _config$context;
+
   const {
     t
   } = useI18n();
   const config = useConfig();
-  const locale = config?.context?.locale ?? [];
+  const locale = (config === null || config === void 0 ? void 0 : (_config$context = config.context) === null || _config$context === void 0 ? void 0 : _config$context.locale) ?? [];
   const eventDate = new Date(date);
   const currentDate = new Date();
   const midnight = new Date(currentDate);
@@ -14920,9 +14961,11 @@ 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?.prompt,
+        body: (_event$payload$body = event.payload.body) === null || _event$payload$body === void 0 ? void 0 : _event$payload$body.prompt,
         translatedBody: event.payload.translatedBody && choice_prompt_objectSpread(choice_prompt_objectSpread({}, event.payload.translatedBody), {}, {
           data: event.payload.translatedBody.data.prompt
         })
@@ -17535,7 +17578,7 @@ const ConversationSuggestions = _ref => {
 
   const hasLastTransactionEvent = (0,hooks_namespaceObject.useMemo)(() => events.some(({
     payload: eventPayload
-  }) => eventPayload?.transactionLast), [events]);
+  }) => eventPayload === null || eventPayload === void 0 ? void 0 : eventPayload.transactionLast), [events]);
   const handleClick = (0,hooks_namespaceObject.useCallback)(({
     id,
     question
@@ -17674,6 +17717,37 @@ const ComponentFilter = ({
 
 
 
+const Events = () => {
+  const events = useEvents();
+  let prevParticipant = null;
+  return events.map(event => {
+    const {
+      type,
+      payload
+    } = event;
+    const {
+      participant,
+      fromClient
+    } = payload;
+    let participantChanged = false;
+
+    if (type !== 'participant') {
+      const currentParticipant = fromClient ? 'seamly-client-participant' : participant;
+
+      if (event.type !== 'info' && prevParticipant !== currentParticipant) {
+        participantChanged = true;
+      }
+
+      prevParticipant = currentParticipant;
+    }
+
+    return (0,jsx_runtime_namespaceObject.jsx)(event_event, {
+      event: event,
+      newParticipant: participantChanged
+    }, event.payload.key || event.payload.id);
+  });
+};
+
 const Conversation = () => {
   const {
     t
@@ -17695,36 +17769,6 @@ const Conversation = () => {
     }
   }, [events, isLoading, isOpen, loadedImageEventIds]);
 
-  const renderEvents = () => {
-    let prevParticipant = null;
-    return events.map(event => {
-      const {
-        type,
-        payload
-      } = event;
-      const {
-        participant,
-        fromClient
-      } = payload;
-      let participantChanged = false;
-
-      if (type !== 'participant') {
-        const currentParticipant = fromClient ? 'seamly-client-participant' : participant;
-
-        if (event.type !== 'info' && prevParticipant !== currentParticipant) {
-          participantChanged = true;
-        }
-
-        prevParticipant = currentParticipant;
-      }
-
-      return (0,jsx_runtime_namespaceObject.jsx)(event_event, {
-        event: event,
-        newParticipant: participantChanged
-      }, event.payload.id);
-    });
-  };
-
   const onClickHandler = e => {
     e.preventDefault();
     focusSkiplinkTarget();
@@ -17744,7 +17788,7 @@ const Conversation = () => {
         children: [(0,jsx_runtime_namespaceObject.jsx)(privacy_disclaimer, {}), (0,jsx_runtime_namespaceObject.jsxs)("ol", {
           className: css_className('conversation'),
           children: [(0,jsx_runtime_namespaceObject.jsx)(component_filter, {
-            children: renderEvents()
+            children: (0,jsx_runtime_namespaceObject.jsx)(Events, {})
           }), isLoading && (0,jsx_runtime_namespaceObject.jsx)(loader, {})]
         })]
       })
@@ -18952,7 +18996,11 @@ const OptionsButton = () => {
   const prevMenuIsOpen = (0,hooks_namespaceObject.useRef)(false);
   const multiMenu = optionsLength > 1;
   const firstOption = menuOptions[0];
-  const firstOptionName = (0,hooks_namespaceObject.useMemo)(() => firstOption?.name?.trim().replace(/\s+/g, ''), [firstOption]);
+  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]);
   (0,hooks_namespaceObject.useEffect)(() => {
     return () => {
       clearTimeout(focusOutDelayTimeoutID.current);
@@ -19621,7 +19669,7 @@ function errors_createMiddleware({
         api,
         layoutMode
       } = selectConfig(getState());
-      errorCallback?.(action.error, {
+      errorCallback === null || errorCallback === void 0 ? void 0 : errorCallback(action.error, {
         namespace,
         api,
         layoutMode,
@@ -19665,7 +19713,11 @@ function useSeamlyInstanceFunction(functionName, fn, deps = []) {
       return undefined;
     }
 
-    const callback = (...args) => callbackRef.current?.(...args);
+    const callback = (...args) => {
+      var _callbackRef$current;
+
+      return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
+    };
 
     eventBus.emit('function.register', functionName, callback);
     return () => eventBus.emit('function.unregister', functionName, callback); // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -19710,12 +19762,12 @@ const SeamlyInstanceFunctionsLoader = () => {
     sendMessage({
       body: text
     });
-  }, [api?.send]);
+  }, [api === null || api === void 0 ? void 0 : api.send]);
   useSeamlyInstanceFunction('setVariables', variables => {
     sendContext({
       variables
     });
-  }, [api?.send]);
+  }, [api === null || api === void 0 ? void 0 : api.send]);
   useSeamlyInstanceFunction('getVisibility', callback => {
     if (callback) {
       callback(currentVisibility.current);
@@ -19731,7 +19783,7 @@ const SeamlyInstanceFunctionsLoader = () => {
 
     onActivityHandler();
     setVisibility(visibilityState);
-  }, [config?.api]);
+  }, [config === null || config === void 0 ? void 0 : config.api]);
   useSeamlyInstanceFunction('sendCustomAction', (actionType, body) => {
     sendAction({
       type: 'custom',
@@ -20649,31 +20701,25 @@ function store(key) {
 // EXTERNAL MODULE: ./src/javascripts/lib/debug.js
 var debug = __webpack_require__(905);
 var debug_default = /*#__PURE__*/__webpack_require__.n(debug);
-;// CONCATENATED MODULE: ./node_modules/phoenix/priv/static/phoenix.esm.js
+;// CONCATENATED MODULE: ./node_modules/phoenix/priv/static/phoenix.mjs
 // js/phoenix/utils.js
-var closure = value => {
+var closure = (value) => {
   if (typeof value === "function") {
     return value;
   } else {
-    let closure2 = function () {
+    let closure2 = function() {
       return value;
     };
-
     return closure2;
   }
-}; // js/phoenix/constants.js
-
+};
 
+// js/phoenix/constants.js
 var globalSelf = typeof self !== "undefined" ? self : null;
 var phxWindow = typeof window !== "undefined" ? window : null;
-var global = globalSelf || phxWindow || void 0;
+var global = globalSelf || phxWindow || global;
 var DEFAULT_VSN = "2.0.0";
-var SOCKET_STATES = {
-  connecting: 0,
-  open: 1,
-  closing: 2,
-  closed: 3
-};
+var SOCKET_STATES = { connecting: 0, open: 1, closing: 2, closed: 3 };
 var DEFAULT_TIMEOUT = 1e4;
 var WS_CLOSE_NORMAL = 1e3;
 var CHANNEL_STATES = {
@@ -20696,35 +20742,31 @@ var TRANSPORTS = {
 };
 var XHR_STATES = {
   complete: 4
-}; // js/phoenix/push.js
+};
 
+// js/phoenix/push.js
 var Push = class {
   constructor(channel, event, payload, timeout) {
     this.channel = channel;
     this.event = event;
-
-    this.payload = payload || function () {
+    this.payload = payload || function() {
       return {};
     };
-
     this.receivedResp = null;
     this.timeout = timeout;
     this.timeoutTimer = null;
     this.recHooks = [];
     this.sent = false;
   }
-
   resend(timeout) {
     this.timeout = timeout;
     this.reset();
     this.send();
   }
-
   send() {
     if (this.hasReceived("timeout")) {
       return;
     }
-
     this.startTimeout();
     this.sent = true;
     this.channel.socket.push({
@@ -20735,19 +20777,13 @@ var Push = class {
       join_ref: this.channel.joinRef()
     });
   }
-
   receive(status, callback) {
     if (this.hasReceived(status)) {
       callback(this.receivedResp.response);
     }
-
-    this.recHooks.push({
-      status,
-      callback
-    });
+    this.recHooks.push({ status, callback });
     return this;
   }
-
   reset() {
     this.cancelRefEvent();
     this.ref = null;
@@ -20755,36 +20791,26 @@ var Push = class {
     this.receivedResp = null;
     this.sent = false;
   }
-
-  matchReceive({
-    status,
-    response,
-    _ref
-  }) {
-    this.recHooks.filter(h => h.status === status).forEach(h => h.callback(response));
+  matchReceive({ status, response, _ref }) {
+    this.recHooks.filter((h) => h.status === status).forEach((h) => h.callback(response));
   }
-
   cancelRefEvent() {
     if (!this.refEvent) {
       return;
     }
-
     this.channel.off(this.refEvent);
   }
-
   cancelTimeout() {
     clearTimeout(this.timeoutTimer);
     this.timeoutTimer = null;
   }
-
   startTimeout() {
     if (this.timeoutTimer) {
       this.cancelTimeout();
     }
-
     this.ref = this.channel.socket.makeRef();
     this.refEvent = this.channel.replyEventName(this.ref);
-    this.channel.on(this.refEvent, payload => {
+    this.channel.on(this.refEvent, (payload) => {
       this.cancelRefEvent();
       this.cancelTimeout();
       this.receivedResp = payload;
@@ -20794,20 +20820,15 @@ var Push = class {
       this.trigger("timeout", {});
     }, this.timeout);
   }
-
   hasReceived(status) {
     return this.receivedResp && this.receivedResp.status === status;
   }
-
   trigger(status, response) {
-    this.channel.trigger(this.refEvent, {
-      status,
-      response
-    });
+    this.channel.trigger(this.refEvent, { status, response });
   }
+};
 
-}; // js/phoenix/timer.js
-
+// js/phoenix/timer.js
 var Timer = class {
   constructor(callback, timerCalc) {
     this.callback = callback;
@@ -20815,12 +20836,10 @@ var Timer = class {
     this.timer = null;
     this.tries = 0;
   }
-
   reset() {
     this.tries = 0;
     clearTimeout(this.timer);
   }
-
   scheduleTimeout() {
     clearTimeout(this.timer);
     this.timer = setTimeout(() => {
@@ -20828,9 +20847,9 @@ var Timer = class {
       this.callback();
     }, this.timerCalc(this.tries + 1));
   }
+};
 
-}; // js/phoenix/channel.js
-
+// js/phoenix/channel.js
 var Channel = class {
   constructor(topic, params, socket) {
     this.state = CHANNEL_STATES.closed;
@@ -20852,7 +20871,6 @@ var Channel = class {
     this.stateChangeRefs.push(this.socket.onError(() => this.rejoinTimer.reset()));
     this.stateChangeRefs.push(this.socket.onOpen(() => {
       this.rejoinTimer.reset();
-
       if (this.isErrored()) {
         this.rejoin();
       }
@@ -20860,42 +20878,40 @@ var Channel = class {
     this.joinPush.receive("ok", () => {
       this.state = CHANNEL_STATES.joined;
       this.rejoinTimer.reset();
-      this.pushBuffer.forEach(pushEvent => pushEvent.send());
+      this.pushBuffer.forEach((pushEvent) => pushEvent.send());
       this.pushBuffer = [];
     });
     this.joinPush.receive("error", () => {
       this.state = CHANNEL_STATES.errored;
-
       if (this.socket.isConnected()) {
         this.rejoinTimer.scheduleTimeout();
       }
     });
     this.onClose(() => {
       this.rejoinTimer.reset();
-      if (this.socket.hasLogger()) this.socket.log("channel", `close ${this.topic} ${this.joinRef()}`);
+      if (this.socket.hasLogger())
+        this.socket.log("channel", `close ${this.topic} ${this.joinRef()}`);
       this.state = CHANNEL_STATES.closed;
       this.socket.remove(this);
     });
-    this.onError(reason => {
-      if (this.socket.hasLogger()) this.socket.log("channel", `error ${this.topic}`, reason);
-
+    this.onError((reason) => {
+      if (this.socket.hasLogger())
+        this.socket.log("channel", `error ${this.topic}`, reason);
       if (this.isJoining()) {
         this.joinPush.reset();
       }
-
       this.state = CHANNEL_STATES.errored;
-
       if (this.socket.isConnected()) {
         this.rejoinTimer.scheduleTimeout();
       }
     });
     this.joinPush.receive("timeout", () => {
-      if (this.socket.hasLogger()) this.socket.log("channel", `timeout ${this.topic} (${this.joinRef()})`, this.joinPush.timeout);
+      if (this.socket.hasLogger())
+        this.socket.log("channel", `timeout ${this.topic} (${this.joinRef()})`, this.joinPush.timeout);
       let leavePush = new Push(this, CHANNEL_EVENTS.leave, closure({}), this.timeout);
       leavePush.send();
       this.state = CHANNEL_STATES.errored;
       this.joinPush.reset();
-
       if (this.socket.isConnected()) {
         this.rejoinTimer.scheduleTimeout();
       }
@@ -20904,7 +20920,6 @@ var Channel = class {
       this.trigger(this.replyEventName(ref), payload);
     });
   }
-
   join(timeout = this.timeout) {
     if (this.joinedOnce) {
       throw new Error("tried to join multiple times. 'join' can only be called a single time per channel instance");
@@ -20915,211 +20930,162 @@ var Channel = class {
       return this.joinPush;
     }
   }
-
   onClose(callback) {
     this.on(CHANNEL_EVENTS.close, callback);
   }
-
   onError(callback) {
-    return this.on(CHANNEL_EVENTS.error, reason => callback(reason));
+    return this.on(CHANNEL_EVENTS.error, (reason) => callback(reason));
   }
-
   on(event, callback) {
     let ref = this.bindingRef++;
-    this.bindings.push({
-      event,
-      ref,
-      callback
-    });
+    this.bindings.push({ event, ref, callback });
     return ref;
   }
-
   off(event, ref) {
-    this.bindings = this.bindings.filter(bind => {
+    this.bindings = this.bindings.filter((bind) => {
       return !(bind.event === event && (typeof ref === "undefined" || ref === bind.ref));
     });
   }
-
   canPush() {
     return this.socket.isConnected() && this.isJoined();
   }
-
   push(event, payload, timeout = this.timeout) {
     payload = payload || {};
-
     if (!this.joinedOnce) {
       throw new Error(`tried to push '${event}' to '${this.topic}' before joining. Use channel.join() before pushing events`);
     }
-
-    let pushEvent = new Push(this, event, function () {
+    let pushEvent = new Push(this, event, function() {
       return payload;
     }, timeout);
-
     if (this.canPush()) {
       pushEvent.send();
     } else {
       pushEvent.startTimeout();
       this.pushBuffer.push(pushEvent);
     }
-
     return pushEvent;
   }
-
   leave(timeout = this.timeout) {
     this.rejoinTimer.reset();
     this.joinPush.cancelTimeout();
     this.state = CHANNEL_STATES.leaving;
-
     let onClose = () => {
-      if (this.socket.hasLogger()) this.socket.log("channel", `leave ${this.topic}`);
+      if (this.socket.hasLogger())
+        this.socket.log("channel", `leave ${this.topic}`);
       this.trigger(CHANNEL_EVENTS.close, "leave");
     };
-
     let leavePush = new Push(this, CHANNEL_EVENTS.leave, closure({}), timeout);
     leavePush.receive("ok", () => onClose()).receive("timeout", () => onClose());
     leavePush.send();
-
     if (!this.canPush()) {
       leavePush.trigger("ok", {});
     }
-
     return leavePush;
   }
-
   onMessage(_event, payload, _ref) {
     return payload;
   }
-
   isMember(topic, event, payload, joinRef) {
     if (this.topic !== topic) {
       return false;
     }
-
     if (joinRef && joinRef !== this.joinRef()) {
-      if (this.socket.hasLogger()) this.socket.log("channel", "dropping outdated message", {
-        topic,
-        event,
-        payload,
-        joinRef
-      });
+      if (this.socket.hasLogger())
+        this.socket.log("channel", "dropping outdated message", { topic, event, payload, joinRef });
       return false;
     } else {
       return true;
     }
   }
-
   joinRef() {
     return this.joinPush.ref;
   }
-
   rejoin(timeout = this.timeout) {
     if (this.isLeaving()) {
       return;
     }
-
     this.socket.leaveOpenTopic(this.topic);
     this.state = CHANNEL_STATES.joining;
     this.joinPush.resend(timeout);
   }
-
   trigger(event, payload, ref, joinRef) {
     let handledPayload = this.onMessage(event, payload, ref, joinRef);
-
     if (payload && !handledPayload) {
       throw new Error("channel onMessage callbacks must return the payload, modified or unmodified");
     }
-
-    let eventBindings = this.bindings.filter(bind => bind.event === event);
-
+    let eventBindings = this.bindings.filter((bind) => bind.event === event);
     for (let i = 0; i < eventBindings.length; i++) {
       let bind = eventBindings[i];
       bind.callback(handledPayload, ref, joinRef || this.joinRef());
     }
   }
-
   replyEventName(ref) {
     return `chan_reply_${ref}`;
   }
-
   isClosed() {
     return this.state === CHANNEL_STATES.closed;
   }
-
   isErrored() {
     return this.state === CHANNEL_STATES.errored;
   }
-
   isJoined() {
     return this.state === CHANNEL_STATES.joined;
   }
-
   isJoining() {
     return this.state === CHANNEL_STATES.joining;
   }
-
   isLeaving() {
     return this.state === CHANNEL_STATES.leaving;
   }
+};
 
-}; // js/phoenix/ajax.js
-
+// js/phoenix/ajax.js
 var Ajax = class {
   static request(method, endPoint, accept, body, timeout, ontimeout, callback) {
     if (global.XDomainRequest) {
       let req = new global.XDomainRequest();
-      this.xdomainRequest(req, method, endPoint, body, timeout, ontimeout, callback);
+      return this.xdomainRequest(req, method, endPoint, body, timeout, ontimeout, callback);
     } else {
       let req = new global.XMLHttpRequest();
-      this.xhrRequest(req, method, endPoint, accept, body, timeout, ontimeout, callback);
+      return this.xhrRequest(req, method, endPoint, accept, body, timeout, ontimeout, callback);
     }
   }
-
   static xdomainRequest(req, method, endPoint, body, timeout, ontimeout, callback) {
     req.timeout = timeout;
     req.open(method, endPoint);
-
     req.onload = () => {
       let response = this.parseJSON(req.responseText);
       callback && callback(response);
     };
-
     if (ontimeout) {
       req.ontimeout = ontimeout;
     }
-
-    req.onprogress = () => {};
-
+    req.onprogress = () => {
+    };
     req.send(body);
+    return req;
   }
-
   static xhrRequest(req, method, endPoint, accept, body, timeout, ontimeout, callback) {
     req.open(method, endPoint, true);
     req.timeout = timeout;
     req.setRequestHeader("Content-Type", accept);
-
-    req.onerror = () => {
-      callback && callback(null);
-    };
-
+    req.onerror = () => callback && callback(null);
     req.onreadystatechange = () => {
       if (req.readyState === XHR_STATES.complete && callback) {
         let response = this.parseJSON(req.responseText);
         callback(response);
       }
     };
-
     if (ontimeout) {
       req.ontimeout = ontimeout;
     }
-
     req.send(body);
+    return req;
   }
-
   static parseJSON(resp) {
     if (!resp || resp === "") {
       return null;
     }
-
     try {
       return JSON.parse(resp);
     } catch (e) {
@@ -21127,186 +21093,168 @@ var Ajax = class {
       return null;
     }
   }
-
   static serialize(obj, parentKey) {
     let queryStr = [];
-
     for (var key in obj) {
       if (!Object.prototype.hasOwnProperty.call(obj, key)) {
         continue;
       }
-
       let paramKey = parentKey ? `${parentKey}[${key}]` : key;
       let paramVal = obj[key];
-
       if (typeof paramVal === "object") {
         queryStr.push(this.serialize(paramVal, paramKey));
       } else {
         queryStr.push(encodeURIComponent(paramKey) + "=" + encodeURIComponent(paramVal));
       }
     }
-
     return queryStr.join("&");
   }
-
   static appendParams(url, params) {
     if (Object.keys(params).length === 0) {
       return url;
     }
-
     let prefix = url.match(/\?/) ? "&" : "?";
     return `${url}${prefix}${this.serialize(params)}`;
   }
+};
 
-}; // js/phoenix/longpoll.js
-
+// js/phoenix/longpoll.js
 var LongPoll = class {
   constructor(endPoint) {
     this.endPoint = null;
     this.token = null;
     this.skipHeartbeat = true;
-
-    this.onopen = function () {};
-
-    this.onerror = function () {};
-
-    this.onmessage = function () {};
-
-    this.onclose = function () {};
-
+    this.reqs = /* @__PURE__ */ new Set();
+    this.onopen = function() {
+    };
+    this.onerror = function() {
+    };
+    this.onmessage = function() {
+    };
+    this.onclose = function() {
+    };
     this.pollEndpoint = this.normalizeEndpoint(endPoint);
     this.readyState = SOCKET_STATES.connecting;
     this.poll();
   }
-
   normalizeEndpoint(endPoint) {
     return endPoint.replace("ws://", "http://").replace("wss://", "https://").replace(new RegExp("(.*)/" + TRANSPORTS.websocket), "$1/" + TRANSPORTS.longpoll);
   }
-
   endpointURL() {
-    return Ajax.appendParams(this.pollEndpoint, {
-      token: this.token
-    });
+    return Ajax.appendParams(this.pollEndpoint, { token: this.token });
   }
-
-  closeAndRetry() {
-    this.close();
+  closeAndRetry(code, reason, wasClean) {
+    this.close(code, reason, wasClean);
     this.readyState = SOCKET_STATES.connecting;
   }
-
   ontimeout() {
     this.onerror("timeout");
-    this.closeAndRetry();
+    this.closeAndRetry(1005, "timeout", false);
+  }
+  isActive() {
+    return this.readyState === SOCKET_STATES.open || this.readyState === SOCKET_STATES.connecting;
   }
-
   poll() {
-    if (!(this.readyState === SOCKET_STATES.open || this.readyState === SOCKET_STATES.connecting)) {
-      return;
-    }
-
-    Ajax.request("GET", this.endpointURL(), "application/json", null, this.timeout, this.ontimeout.bind(this), resp => {
+    this.ajax("GET", null, () => this.ontimeout(), (resp) => {
       if (resp) {
-        var {
-          status,
-          token,
-          messages
-        } = resp;
+        var { status, token, messages } = resp;
         this.token = token;
       } else {
         status = 0;
       }
-
       switch (status) {
         case 200:
-          messages.forEach(msg => {
-            setTimeout(() => {
-              this.onmessage({
-                data: msg
-              });
-            }, 0);
+          messages.forEach((msg) => {
+            setTimeout(() => this.onmessage({ data: msg }), 0);
           });
           this.poll();
           break;
-
         case 204:
           this.poll();
           break;
-
         case 410:
           this.readyState = SOCKET_STATES.open;
-          this.onopen();
+          this.onopen({});
           this.poll();
           break;
-
         case 403:
-          this.onerror();
-          this.close();
+          this.onerror(403);
+          this.close(1008, "forbidden", false);
           break;
-
         case 0:
         case 500:
-          this.onerror();
-          this.closeAndRetry();
+          this.onerror(500);
+          this.closeAndRetry(1011, "internal server error", 500);
           break;
-
         default:
           throw new Error(`unhandled poll status ${status}`);
       }
     });
   }
-
   send(body) {
-    Ajax.request("POST", this.endpointURL(), "application/json", body, this.timeout, this.onerror.bind(this, "timeout"), resp => {
+    this.ajax("POST", body, () => this.onerror("timeout"), (resp) => {
       if (!resp || resp.status !== 200) {
         this.onerror(resp && resp.status);
-        this.closeAndRetry();
+        this.closeAndRetry(1011, "internal server error", false);
       }
     });
   }
-
-  close(_code, _reason) {
+  close(code, reason, wasClean) {
+    for (let req of this.reqs) {
+      req.abort();
+    }
     this.readyState = SOCKET_STATES.closed;
-    this.onclose();
+    let opts = Object.assign({ code: 1e3, reason: void 0, wasClean: true }, { code, reason, wasClean });
+    if (typeof CloseEvent !== "undefined") {
+      this.onclose(new CloseEvent("close", opts));
+    } else {
+      this.onclose(opts);
+    }
   }
+  ajax(method, body, onCallerTimeout, callback) {
+    let req;
+    let ontimeout = () => {
+      this.reqs.delete(req);
+      onCallerTimeout();
+    };
+    req = Ajax.request(method, this.endpointURL(), "application/json", body, this.timeout, ontimeout, (resp) => {
+      this.reqs.delete(req);
+      if (this.isActive()) {
+        callback(resp);
+      }
+    });
+    this.reqs.add(req);
+  }
+};
 
-}; // js/phoenix/presence.js
-
+// js/phoenix/presence.js
 var Presence = class {
   constructor(channel, opts = {}) {
-    let events = opts.events || {
-      state: "presence_state",
-      diff: "presence_diff"
-    };
+    let events = opts.events || { state: "presence_state", diff: "presence_diff" };
     this.state = {};
     this.pendingDiffs = [];
     this.channel = channel;
     this.joinRef = null;
     this.caller = {
-      onJoin: function () {},
-      onLeave: function () {},
-      onSync: function () {}
+      onJoin: function() {
+      },
+      onLeave: function() {
+      },
+      onSync: function() {
+      }
     };
-    this.channel.on(events.state, newState => {
-      let {
-        onJoin,
-        onLeave,
-        onSync
-      } = this.caller;
+    this.channel.on(events.state, (newState) => {
+      let { onJoin, onLeave, onSync } = this.caller;
       this.joinRef = this.channel.joinRef();
       this.state = Presence.syncState(this.state, newState, onJoin, onLeave);
-      this.pendingDiffs.forEach(diff => {
+      this.pendingDiffs.forEach((diff) => {
         this.state = Presence.syncDiff(this.state, diff, onJoin, onLeave);
       });
       this.pendingDiffs = [];
       onSync();
     });
-    this.channel.on(events.diff, diff => {
-      let {
-        onJoin,
-        onLeave,
-        onSync
-      } = this.caller;
-
+    this.channel.on(events.diff, (diff) => {
+      let { onJoin, onLeave, onSync } = this.caller;
       if (this.inPendingSyncState()) {
         this.pendingDiffs.push(diff);
       } else {
@@ -21315,27 +21263,21 @@ var Presence = class {
       }
     });
   }
-
   onJoin(callback) {
     this.caller.onJoin = callback;
   }
-
   onLeave(callback) {
     this.caller.onLeave = callback;
   }
-
   onSync(callback) {
     this.caller.onSync = callback;
   }
-
   list(by) {
     return Presence.list(this.state, by);
   }
-
   inPendingSyncState() {
     return !this.joinRef || this.joinRef !== this.channel.joinRef();
   }
-
   static syncState(currentState, newState, onJoin, onLeave) {
     let state = this.clone(currentState);
     let joins = {};
@@ -21347,18 +21289,15 @@ var Presence = class {
     });
     this.map(newState, (key, newPresence) => {
       let currentPresence = state[key];
-
       if (currentPresence) {
-        let newRefs = newPresence.metas.map(m => m.phx_ref);
-        let curRefs = currentPresence.metas.map(m => m.phx_ref);
-        let joinedMetas = newPresence.metas.filter(m => curRefs.indexOf(m.phx_ref) < 0);
-        let leftMetas = currentPresence.metas.filter(m => newRefs.indexOf(m.phx_ref) < 0);
-
+        let newRefs = newPresence.metas.map((m) => m.phx_ref);
+        let curRefs = currentPresence.metas.map((m) => m.phx_ref);
+        let joinedMetas = newPresence.metas.filter((m) => curRefs.indexOf(m.phx_ref) < 0);
+        let leftMetas = currentPresence.metas.filter((m) => newRefs.indexOf(m.phx_ref) < 0);
         if (joinedMetas.length > 0) {
           joins[key] = newPresence;
           joins[key].metas = joinedMetas;
         }
-
         if (leftMetas.length > 0) {
           leaves[key] = this.clone(currentPresence);
           leaves[key].metas = leftMetas;
@@ -21367,89 +21306,67 @@ var Presence = class {
         joins[key] = newPresence;
       }
     });
-    return this.syncDiff(state, {
-      joins,
-      leaves
-    }, onJoin, onLeave);
+    return this.syncDiff(state, { joins, leaves }, onJoin, onLeave);
   }
-
   static syncDiff(state, diff, onJoin, onLeave) {
-    let {
-      joins,
-      leaves
-    } = this.clone(diff);
-
+    let { joins, leaves } = this.clone(diff);
     if (!onJoin) {
-      onJoin = function () {};
+      onJoin = function() {
+      };
     }
-
     if (!onLeave) {
-      onLeave = function () {};
+      onLeave = function() {
+      };
     }
-
     this.map(joins, (key, newPresence) => {
       let currentPresence = state[key];
       state[key] = this.clone(newPresence);
-
       if (currentPresence) {
-        let joinedRefs = state[key].metas.map(m => m.phx_ref);
-        let curMetas = currentPresence.metas.filter(m => joinedRefs.indexOf(m.phx_ref) < 0);
+        let joinedRefs = state[key].metas.map((m) => m.phx_ref);
+        let curMetas = currentPresence.metas.filter((m) => joinedRefs.indexOf(m.phx_ref) < 0);
         state[key].metas.unshift(...curMetas);
       }
-
       onJoin(key, currentPresence, newPresence);
     });
     this.map(leaves, (key, leftPresence) => {
       let currentPresence = state[key];
-
       if (!currentPresence) {
         return;
       }
-
-      let refsToRemove = leftPresence.metas.map(m => m.phx_ref);
-      currentPresence.metas = currentPresence.metas.filter(p => {
+      let refsToRemove = leftPresence.metas.map((m) => m.phx_ref);
+      currentPresence.metas = currentPresence.metas.filter((p) => {
         return refsToRemove.indexOf(p.phx_ref) < 0;
       });
       onLeave(key, currentPresence, leftPresence);
-
       if (currentPresence.metas.length === 0) {
         delete state[key];
       }
     });
     return state;
   }
-
   static list(presences, chooser) {
     if (!chooser) {
-      chooser = function (key, pres) {
+      chooser = function(key, pres) {
         return pres;
       };
     }
-
     return this.map(presences, (key, presence) => {
       return chooser(key, presence);
     });
   }
-
   static map(obj, func) {
-    return Object.getOwnPropertyNames(obj).map(key => func(key, obj[key]));
+    return Object.getOwnPropertyNames(obj).map((key) => func(key, obj[key]));
   }
-
   static clone(obj) {
     return JSON.parse(JSON.stringify(obj));
   }
+};
 
-}; // js/phoenix/serializer.js
-
+// js/phoenix/serializer.js
 var serializer_default = {
   HEADER_LENGTH: 1,
   META_LENGTH: 4,
-  KINDS: {
-    push: 0,
-    reply: 1,
-    broadcast: 2
-  },
-
+  KINDS: { push: 0, reply: 1, broadcast: 2 },
   encode(msg, callback) {
     if (msg.payload.constructor === ArrayBuffer) {
       return callback(this.binaryEncode(msg));
@@ -21458,30 +21375,16 @@ var serializer_default = {
       return callback(JSON.stringify(payload));
     }
   },
-
   decode(rawPayload, callback) {
     if (rawPayload.constructor === ArrayBuffer) {
       return callback(this.binaryDecode(rawPayload));
     } else {
       let [join_ref, ref, topic, event, payload] = JSON.parse(rawPayload);
-      return callback({
-        join_ref,
-        ref,
-        topic,
-        event,
-        payload
-      });
+      return callback({ join_ref, ref, topic, event, payload });
     }
   },
-
   binaryEncode(message) {
-    let {
-      join_ref,
-      ref,
-      event,
-      topic,
-      payload
-    } = message;
+    let { join_ref, ref, event, topic, payload } = message;
     let metaLength = this.META_LENGTH + join_ref.length + ref.length + topic.length + event.length;
     let header = new ArrayBuffer(this.HEADER_LENGTH + metaLength);
     let view = new DataView(header);
@@ -21491,33 +21394,28 @@ var serializer_default = {
     view.setUint8(offset++, ref.length);
     view.setUint8(offset++, topic.length);
     view.setUint8(offset++, event.length);
-    Array.from(join_ref, char => view.setUint8(offset++, char.charCodeAt(0)));
-    Array.from(ref, char => view.setUint8(offset++, char.charCodeAt(0)));
-    Array.from(topic, char => view.setUint8(offset++, char.charCodeAt(0)));
-    Array.from(event, char => view.setUint8(offset++, char.charCodeAt(0)));
+    Array.from(join_ref, (char) => view.setUint8(offset++, char.charCodeAt(0)));
+    Array.from(ref, (char) => view.setUint8(offset++, char.charCodeAt(0)));
+    Array.from(topic, (char) => view.setUint8(offset++, char.charCodeAt(0)));
+    Array.from(event, (char) => view.setUint8(offset++, char.charCodeAt(0)));
     var combined = new Uint8Array(header.byteLength + payload.byteLength);
     combined.set(new Uint8Array(header), 0);
     combined.set(new Uint8Array(payload), header.byteLength);
     return combined.buffer;
   },
-
   binaryDecode(buffer) {
     let view = new DataView(buffer);
     let kind = view.getUint8(0);
     let decoder = new TextDecoder();
-
     switch (kind) {
       case this.KINDS.push:
         return this.decodePush(buffer, view, decoder);
-
       case this.KINDS.reply:
         return this.decodeReply(buffer, view, decoder);
-
       case this.KINDS.broadcast:
         return this.decodeBroadcast(buffer, view, decoder);
     }
   },
-
   decodePush(buffer, view, decoder) {
     let joinRefSize = view.getUint8(1);
     let topicSize = view.getUint8(2);
@@ -21530,15 +21428,8 @@ var serializer_default = {
     let event = decoder.decode(buffer.slice(offset, offset + eventSize));
     offset = offset + eventSize;
     let data = buffer.slice(offset, buffer.byteLength);
-    return {
-      join_ref: joinRef,
-      ref: null,
-      topic,
-      event,
-      payload: data
-    };
+    return { join_ref: joinRef, ref: null, topic, event, payload: data };
   },
-
   decodeReply(buffer, view, decoder) {
     let joinRefSize = view.getUint8(1);
     let refSize = view.getUint8(2);
@@ -21554,19 +21445,9 @@ var serializer_default = {
     let event = decoder.decode(buffer.slice(offset, offset + eventSize));
     offset = offset + eventSize;
     let data = buffer.slice(offset, buffer.byteLength);
-    let payload = {
-      status: event,
-      response: data
-    };
-    return {
-      join_ref: joinRef,
-      ref,
-      topic,
-      event: CHANNEL_EVENTS.reply,
-      payload
-    };
+    let payload = { status: event, response: data };
+    return { join_ref: joinRef, ref, topic, event: CHANNEL_EVENTS.reply, payload };
   },
-
   decodeBroadcast(buffer, view, decoder) {
     let topicSize = view.getUint8(1);
     let eventSize = view.getUint8(2);
@@ -21576,25 +21457,14 @@ var serializer_default = {
     let event = decoder.decode(buffer.slice(offset, offset + eventSize));
     offset = offset + eventSize;
     let data = buffer.slice(offset, buffer.byteLength);
-    return {
-      join_ref: null,
-      ref: null,
-      topic,
-      event,
-      payload: data
-    };
+    return { join_ref: null, ref: null, topic, event, payload: data };
   }
+};
 
-}; // js/phoenix/socket.js
-
+// js/phoenix/socket.js
 var Socket = class {
   constructor(endPoint, opts = {}) {
-    this.stateChangeCallbacks = {
-      open: [],
-      close: [],
-      error: [],
-      message: []
-    };
+    this.stateChangeCallbacks = { open: [], close: [], error: [], message: [] };
     this.channels = [];
     this.sendBuffer = [];
     this.ref = 0;
@@ -21606,7 +21476,6 @@ var Socket = class {
     this.closeWasClean = false;
     this.binaryType = opts.binaryType || "arraybuffer";
     this.connectClock = 1;
-
     if (this.transport !== LongPoll) {
       this.encode = opts.encode || this.defaultEncoder;
       this.decode = opts.decode || this.defaultDecoder;
@@ -21614,42 +21483,36 @@ var Socket = class {
       this.encode = this.defaultEncoder;
       this.decode = this.defaultDecoder;
     }
-
     let awaitingConnectionOnPageShow = null;
-
     if (phxWindow && phxWindow.addEventListener) {
-      phxWindow.addEventListener("pagehide", _e => {
+      phxWindow.addEventListener("pagehide", (_e) => {
         if (this.conn) {
           this.disconnect();
           awaitingConnectionOnPageShow = this.connectClock;
         }
       });
-      phxWindow.addEventListener("pageshow", _e => {
+      phxWindow.addEventListener("pageshow", (_e) => {
         if (awaitingConnectionOnPageShow === this.connectClock) {
           awaitingConnectionOnPageShow = null;
           this.connect();
         }
       });
     }
-
     this.heartbeatIntervalMs = opts.heartbeatIntervalMs || 3e4;
-
-    this.rejoinAfterMs = tries => {
+    this.rejoinAfterMs = (tries) => {
       if (opts.rejoinAfterMs) {
         return opts.rejoinAfterMs(tries);
       } else {
         return [1e3, 2e3, 5e3][tries - 1] || 1e4;
       }
     };
-
-    this.reconnectAfterMs = tries => {
+    this.reconnectAfterMs = (tries) => {
       if (opts.reconnectAfterMs) {
         return opts.reconnectAfterMs(tries);
       } else {
         return [10, 50, 100, 150, 200, 250, 500, 1e3, 2e3][tries - 1] || 5e3;
       }
     };
-
     this.logger = opts.logger || null;
     this.longpollerTimeout = opts.longpollerTimeout || 2e4;
     this.params = closure(opts.params || {});
@@ -21661,99 +21524,101 @@ var Socket = class {
       this.teardown(() => this.connect());
     }, this.reconnectAfterMs);
   }
-
+  getLongPollTransport() {
+    return LongPoll;
+  }
   replaceTransport(newTransport) {
-    this.disconnect();
+    this.connectClock++;
+    this.closeWasClean = true;
+    this.reconnectTimer.reset();
+    this.sendBuffer = [];
+    if (this.conn) {
+      this.conn.close();
+      this.conn = null;
+    }
     this.transport = newTransport;
   }
-
   protocol() {
     return location.protocol.match(/^https/) ? "wss" : "ws";
   }
-
   endPointURL() {
-    let uri = Ajax.appendParams(Ajax.appendParams(this.endPoint, this.params()), {
-      vsn: this.vsn
-    });
-
+    let uri = Ajax.appendParams(Ajax.appendParams(this.endPoint, this.params()), { vsn: this.vsn });
     if (uri.charAt(0) !== "/") {
       return uri;
     }
-
     if (uri.charAt(1) === "/") {
       return `${this.protocol()}:${uri}`;
     }
-
     return `${this.protocol()}://${location.host}${uri}`;
   }
-
   disconnect(callback, code, reason) {
     this.connectClock++;
     this.closeWasClean = true;
     this.reconnectTimer.reset();
     this.teardown(callback, code, reason);
   }
-
   connect(params) {
-    this.connectClock++;
-
     if (params) {
       console && console.log("passing params to connect is deprecated. Instead pass :params to the Socket constructor");
       this.params = closure(params);
     }
-
     if (this.conn) {
       return;
     }
-
+    this.connectClock++;
     this.closeWasClean = false;
     this.conn = new this.transport(this.endPointURL());
     this.conn.binaryType = this.binaryType;
     this.conn.timeout = this.longpollerTimeout;
-
     this.conn.onopen = () => this.onConnOpen();
-
-    this.conn.onerror = error => this.onConnError(error);
-
-    this.conn.onmessage = event => this.onConnMessage(event);
-
-    this.conn.onclose = event => this.onConnClose(event);
+    this.conn.onerror = (error) => this.onConnError(error);
+    this.conn.onmessage = (event) => this.onConnMessage(event);
+    this.conn.onclose = (event) => this.onConnClose(event);
   }
-
   log(kind, msg, data) {
     this.logger(kind, msg, data);
   }
-
   hasLogger() {
     return this.logger !== null;
   }
-
   onOpen(callback) {
     let ref = this.makeRef();
     this.stateChangeCallbacks.open.push([ref, callback]);
     return ref;
   }
-
   onClose(callback) {
     let ref = this.makeRef();
     this.stateChangeCallbacks.close.push([ref, callback]);
     return ref;
   }
-
   onError(callback) {
     let ref = this.makeRef();
     this.stateChangeCallbacks.error.push([ref, callback]);
     return ref;
   }
-
   onMessage(callback) {
     let ref = this.makeRef();
     this.stateChangeCallbacks.message.push([ref, callback]);
     return ref;
   }
-
+  ping(callback) {
+    if (!this.isConnected()) {
+      return false;
+    }
+    let ref = this.makeRef();
+    let startTime = Date.now();
+    this.push({ topic: "phoenix", event: "heartbeat", payload: {}, ref });
+    let onMsgRef = this.onMessage((msg) => {
+      if (msg.ref === ref) {
+        this.off([onMsgRef]);
+        callback(Date.now() - startTime);
+      }
+    });
+    return true;
+  }
   onConnOpen() {
-    if (this.hasLogger()) this.log("transport", `connected to ${this.endPointURL()}`);
+    if (this.hasLogger())
+      this.log("transport", `connected to ${this.endPointURL()}`);
     this.closeWasClean = false;
     this.establishedConnections++;
     this.flushSendBuffer();
@@ -21761,34 +21626,27 @@ var Socket = class {
     this.resetHeartbeat();
     this.stateChangeCallbacks.open.forEach(([, callback]) => callback());
   }
-
   heartbeatTimeout() {
     if (this.pendingHeartbeatRef) {
       this.pendingHeartbeatRef = null;
-
       if (this.hasLogger()) {
         this.log("transport", "heartbeat timeout. Attempting to re-establish connection");
       }
-
       this.abnormalClose("heartbeat timeout");
     }
   }
-
   resetHeartbeat() {
     if (this.conn && this.conn.skipHeartbeat) {
       return;
     }
-
     this.pendingHeartbeatRef = null;
     clearTimeout(this.heartbeatTimer);
     setTimeout(() => this.sendHeartbeat(), this.heartbeatIntervalMs);
   }
-
   teardown(callback, code, reason) {
     if (!this.conn) {
       return callback && callback();
     }
-
     this.waitForBufferDone(() => {
       if (this.conn) {
         if (code) {
@@ -21797,100 +21655,83 @@ var Socket = class {
           this.conn.close();
         }
       }
-
       this.waitForSocketClosed(() => {
         if (this.conn) {
-          this.conn.onclose = function () {};
-
+          this.conn.onclose = function() {
+          };
           this.conn = null;
         }
-
         callback && callback();
       });
     });
   }
-
   waitForBufferDone(callback, tries = 1) {
     if (tries === 5 || !this.conn || !this.conn.bufferedAmount) {
       callback();
       return;
     }
-
     setTimeout(() => {
       this.waitForBufferDone(callback, tries + 1);
     }, 150 * tries);
   }
-
   waitForSocketClosed(callback, tries = 1) {
     if (tries === 5 || !this.conn || this.conn.readyState === SOCKET_STATES.closed) {
       callback();
       return;
     }
-
     setTimeout(() => {
       this.waitForSocketClosed(callback, tries + 1);
     }, 150 * tries);
   }
-
   onConnClose(event) {
     let closeCode = event && event.code;
-    if (this.hasLogger()) this.log("transport", "close", event);
+    if (this.hasLogger())
+      this.log("transport", "close", event);
     this.triggerChanError();
     clearTimeout(this.heartbeatTimer);
-
     if (!this.closeWasClean && closeCode !== 1e3) {
       this.reconnectTimer.scheduleTimeout();
     }
-
     this.stateChangeCallbacks.close.forEach(([, callback]) => callback(event));
   }
-
   onConnError(error) {
-    if (this.hasLogger()) this.log("transport", error);
+    if (this.hasLogger())
+      this.log("transport", error);
     let transportBefore = this.transport;
     let establishedBefore = this.establishedConnections;
     this.stateChangeCallbacks.error.forEach(([, callback]) => {
       callback(error, transportBefore, establishedBefore);
     });
-
     if (transportBefore === this.transport || establishedBefore > 0) {
       this.triggerChanError();
     }
   }
-
   triggerChanError() {
-    this.channels.forEach(channel => {
+    this.channels.forEach((channel) => {
       if (!(channel.isErrored() || channel.isLeaving() || channel.isClosed())) {
         channel.trigger(CHANNEL_EVENTS.error);
       }
     });
   }
-
   connectionState() {
     switch (this.conn && this.conn.readyState) {
       case SOCKET_STATES.connecting:
         return "connecting";
-
       case SOCKET_STATES.open:
         return "open";
-
       case SOCKET_STATES.closing:
         return "closing";
-
       default:
         return "closed";
     }
   }
-
   isConnected() {
     return this.connectionState() === "open";
   }
-
   remove(channel) {
     this.off(channel.stateChangeRefs);
-    this.channels = this.channels.filter(c => c.joinRef() !== channel.joinRef());
+    this.channels = this.channels.filter((c) => c.joinRef() !== channel.joinRef());
   }
-
   off(refs) {
     for (let key in this.stateChangeCallbacks) {
       this.stateChangeCallbacks[key] = this.stateChangeCallbacks[key].filter(([ref]) => {
@@ -21898,120 +21739,86 @@ var Socket = class {
       });
     }
   }
-
   channel(topic, chanParams = {}) {
     let chan = new Channel(topic, chanParams, this);
     this.channels.push(chan);
     return chan;
   }
-
   push(data) {
     if (this.hasLogger()) {
-      let {
-        topic,
-        event,
-        payload,
-        ref,
-        join_ref
-      } = data;
+      let { topic, event, payload, ref, join_ref } = data;
       this.log("push", `${topic} ${event} (${join_ref}, ${ref})`, payload);
     }
-
     if (this.isConnected()) {
-      this.encode(data, result => this.conn.send(result));
+      this.encode(data, (result) => this.conn.send(result));
     } else {
-      this.sendBuffer.push(() => this.encode(data, result => this.conn.send(result)));
+      this.sendBuffer.push(() => this.encode(data, (result) => this.conn.send(result)));
     }
   }
-
   makeRef() {
     let newRef = this.ref + 1;
-
     if (newRef === this.ref) {
       this.ref = 0;
     } else {
       this.ref = newRef;
     }
-
     return this.ref.toString();
   }
-
   sendHeartbeat() {
     if (this.pendingHeartbeatRef && !this.isConnected()) {
       return;
     }
-
     this.pendingHeartbeatRef = this.makeRef();
-    this.push({
-      topic: "phoenix",
-      event: "heartbeat",
-      payload: {},
-      ref: this.pendingHeartbeatRef
-    });
+    this.push({ topic: "phoenix", event: "heartbeat", payload: {}, ref: this.pendingHeartbeatRef });
     this.heartbeatTimer = setTimeout(() => this.heartbeatTimeout(), this.heartbeatIntervalMs);
   }
-
   abnormalClose(reason) {
     this.closeWasClean = false;
-
     if (this.isConnected()) {
       this.conn.close(WS_CLOSE_NORMAL, reason);
     }
   }
-
   flushSendBuffer() {
     if (this.isConnected() && this.sendBuffer.length > 0) {
-      this.sendBuffer.forEach(callback => callback());
+      this.sendBuffer.forEach((callback) => callback());
       this.sendBuffer = [];
     }
   }
-
   onConnMessage(rawMessage) {
-    this.decode(rawMessage.data, msg => {
-      let {
-        topic,
-        event,
-        payload,
-        ref,
-        join_ref
-      } = msg;
-
+    this.decode(rawMessage.data, (msg) => {
+      let { topic, event, payload, ref, join_ref } = msg;
       if (ref && ref === this.pendingHeartbeatRef) {
         clearTimeout(this.heartbeatTimer);
         this.pendingHeartbeatRef = null;
         setTimeout(() => this.sendHeartbeat(), this.heartbeatIntervalMs);
       }
-
-      if (this.hasLogger()) this.log("receive", `${payload.status || ""} ${topic} ${event} ${ref && "(" + ref + ")" || ""}`, payload);
-
+      if (this.hasLogger())
+        this.log("receive", `${payload.status || ""} ${topic} ${event} ${ref && "(" + ref + ")" || ""}`, payload);
       for (let i = 0; i < this.channels.length; i++) {
         const channel = this.channels[i];
-
         if (!channel.isMember(topic, event, payload, join_ref)) {
           continue;
         }
-
         channel.trigger(event, payload, ref, join_ref);
       }
-
       for (let i = 0; i < this.stateChangeCallbacks.message.length; i++) {
         let [, callback] = this.stateChangeCallbacks.message[i];
         callback(msg);
       }
     });
   }
-
   leaveOpenTopic(topic) {
-    let dupChannel = this.channels.find(c => c.topic === topic && (c.isJoined() || c.isJoining()));
-
+    let dupChannel = this.channels.find((c) => c.topic === topic && (c.isJoined() || c.isJoining()));
     if (dupChannel) {
-      if (this.hasLogger()) this.log("transport", `leaving duplicate topic "${topic}"`);
+      if (this.hasLogger())
+        this.log("transport", `leaving duplicate topic "${topic}"`);
       dupChannel.leave();
     }
   }
-
 };
 
+//# sourceMappingURL=phoenix.mjs.map
+
 ;// CONCATENATED MODULE: ./src/javascripts/lib/split-url-params.js
 function split_url_params_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -22442,6 +22249,8 @@ class API {
 
   async createConversation() {
     try {
+      var _conversation$transla;
+
       const request = client_default().post(`${this.getUrlPrefix('http')}${this.URLS.conversations}`).set('Content-Type', 'application/json').query({
         v: apiVersion
       }) // withCredentials() is necessary to allow browsers to save received
@@ -22464,7 +22273,7 @@ class API {
       this.setChannelTopic(conversation.channelTopic);
       this.updateUrls(body);
       this.setConversationUrl(this.URLS.conversation);
-      this.locale = conversation.translation?.locale;
+      this.locale = (_conversation$transla = conversation.translation) === null || _conversation$transla === void 0 ? void 0 : _conversation$transla.locale;
       this.userResponded = conversation.userResponded;
       return initialState;
     } catch (error) {
@@ -22699,7 +22508,7 @@ class API {
     return {
       clientName: "@seamly/web-ui",
       clientVariant: this.layoutMode,
-      clientVersion: "20.5.0",
+      clientVersion: "20.7.0",
       currentUrl: window.location.toString(),
       screenResolution: `${window.screen.width}x${window.screen.height}`,
       timezone: getTimeZone(),
@@ -22708,6 +22517,37 @@ class API {
   }
 
 }
+;// CONCATENATED MODULE: ./src/javascripts/domains/options/middleware.js
+function middleware_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function middleware_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? middleware_ownKeys(Object(source), !0).forEach(function (key) { middleware_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : middleware_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function middleware_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+
+function options_middleware_createMiddleware({
+  api
+}) {
+  return () => next => action => {
+    const result = next(action);
+
+    switch (action.type) {
+      case seamlyActions.SET_USER_SELECTED_OPTIONS:
+        api.store.set('options', action.options);
+        break;
+
+      case seamlyActions.SET_USER_SELECTED_OPTION:
+        api.store.set('options', middleware_objectSpread(middleware_objectSpread({}, api.store.get('options') || {}), {}, {
+          [action.option]: action.value
+        }));
+        break;
+    }
+
+    return result;
+  };
+}
+;// CONCATENATED MODULE: ./src/javascripts/domains/options/index.js
+
 ;// CONCATENATED MODULE: ./node_modules/redux-thunk/es/index.js
 /** A function that accepts a potential "extra argument" value to be injected later,
  * and returns an instance of the thunk middleware that uses that value
@@ -22741,37 +22581,6 @@ var thunk = createThunkMiddleware(); // Attach the factory function so users can
 
 thunk.withExtraArgument = createThunkMiddleware;
 /* harmony default export */ const es = (thunk);
-;// CONCATENATED MODULE: ./src/javascripts/domains/options/middleware.js
-function middleware_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function middleware_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? middleware_ownKeys(Object(source), !0).forEach(function (key) { middleware_defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : middleware_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function middleware_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-
-function options_middleware_createMiddleware({
-  api
-}) {
-  return () => next => action => {
-    const result = next(action);
-
-    switch (action.type) {
-      case seamlyActions.SET_USER_SELECTED_OPTIONS:
-        api.store.set('options', action.options);
-        break;
-
-      case seamlyActions.SET_USER_SELECTED_OPTION:
-        api.store.set('options', middleware_objectSpread(middleware_objectSpread({}, api.store.get('options') || {}), {}, {
-          [action.option]: action.value
-        }));
-        break;
-    }
-
-    return result;
-  };
-}
-;// CONCATENATED MODULE: ./src/javascripts/domains/options/index.js
-
 ;// CONCATENATED MODULE: ./src/javascripts/domains/store/state-reducer.js
 // Legacy state reducer. Do not add new features here but extract/create new reducers as needed
 
@@ -22870,7 +22679,7 @@ function store_createStore({
       api
     }), options_middleware_createMiddleware({
       api
-    }), middleware_createMiddleware()]
+    }), middleware_createMiddleware]
   });
   return store;
 }
@@ -23208,7 +23017,9 @@ class ExternalApi {
   }
 
   getMergedVariables(userConfig) {
-    return external_api_objectSpread(external_api_objectSpread(external_api_objectSpread({}, this.appConfig.context?.variables || {}), userConfig.context?.variables || {}), this.context.variables || {});
+    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 || {});
   }
 
 }
@@ -23256,7 +23067,7 @@ const AgentInfo = () => {
     hasInterrupt
   } = useInterrupt();
   const startChatIcon = useStartChatIcon();
-  const src = currentAgent?.avatar ?? startChatIcon;
+  const src = (currentAgent === null || currentAgent === void 0 ? void 0 : currentAgent.avatar) ?? startChatIcon;
   const displaySubtitle = hasInterrupt ? '' : subTitle;
   const classNames = ['message-count'];
 
@@ -23273,7 +23084,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?.avatar ? 'avatar' : 'icon'),
+        className: css_className(currentAgent !== null && currentAgent !== void 0 && currentAgent.avatar ? 'avatar' : 'icon'),
         src: src,
         alt: ""
       }) : (0,jsx_runtime_namespaceObject.jsx)(icon, {