@seamly/web-ui 19.1.2 → 20.0.0-beta.2

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

@@ -284,7 +284,8 @@ const payloadTypes = {
   message: 'message',
   countdown: 'countdown',
   upload: 'upload',
-  cta: 'cta'
+  cta: 'cta',
+  splash: 'splash'
 };
 const entryTypes = {
   text: 'text',
@@ -320,7 +321,6 @@ const dividerKeys = {
   new_translation: 'newTranslation'
 };
 const featureKeys = {
-  cobrowsing: 'cobrowsing',
   sendTranscript: 'sendTranscript',
   typingPeekahead: 'typingPeekahead',
   uploads: 'uploads'
@@ -650,7 +650,6 @@ const seamlyStateReducer = (state, action) => {
       }
 
       const {
-        cobrowsing,
         entry,
         uploads
       } = activeServiceSettings;
@@ -659,16 +658,7 @@ const seamlyStateReducer = (state, action) => {
         options: seamly_utils_objectSpread({}, entry && entry.options ? entry.options : {})
       }), events[events.length - 1].payload);
 
-      let newFeatures = seamly_utils_objectSpread({}, state.options.features); // Only set cobrowsing if it was initialised by the account config.
-
-
-      if (newFeatures.hasOwnProperty(featureKeys.cobrowsing)) {
-        newFeatures = seamly_utils_objectSpread(seamly_utils_objectSpread({}, newFeatures), {}, {
-          cobrowsing: {
-            enabled: !!(cobrowsing && cobrowsing.enabled)
-          }
-        });
-      }
+      let newFeatures = seamly_utils_objectSpread({}, state.options.features);
 
       const newFeaturesHasUpload = newFeatures.hasOwnProperty(featureKeys.uploads); // Only set uploads if it was initialised by the account config.
 
@@ -829,8 +819,6 @@ const seamlyStateReducer = (state, action) => {
       });
 
     case SET_FEATURE_ENABLED_STATE:
-      // Only set cobrowsing if it already exists in the object.
-      // Otherwise we may set if for accounts not allowing it at all.
       return state.options.features.hasOwnProperty(action.key) ? seamly_utils_objectSpread(seamly_utils_objectSpread({}, state), {}, {
         options: seamly_utils_objectSpread(seamly_utils_objectSpread({}, state.options), {}, {
           features: seamly_utils_objectSpread(seamly_utils_objectSpread({}, state.options.features), {}, {
@@ -1149,6 +1137,45 @@ const initialize = utils_createAction('initialize', config => ({
 const update = utils_createAction('update', config => ({
   config
 }));
+const setPreChatEvents = utils_createAction('setPreChatEvents', events => ({
+  events
+}));
+;// CONCATENATED MODULE: ./src/javascripts/lib/mutex.js
+function createMutex() {
+  let isRunning = false;
+  const tasks = [];
+
+  const next = async () => {
+    if (!isRunning) {
+      while (tasks.length) {
+        const task = tasks.shift();
+        isRunning = true; // eslint-disable-next-line no-await-in-loop
+
+        await task().catch(() => {});
+        isRunning = false;
+      }
+    }
+  };
+
+  const runExclusively = async task => {
+    const prms = new Promise((resolve, reject) => {
+      tasks.push(async () => {
+        try {
+          resolve(await task());
+        } catch (e) {
+          reject(e);
+        }
+      });
+    });
+    next();
+    return prms;
+  };
+
+  return {
+    next,
+    runExclusively
+  };
+}
 ;// CONCATENATED MODULE: ./node_modules/reselect/es/index.js
 function defaultEqualityCheck(a, b) {
   return a === b;
@@ -1270,6 +1297,43 @@ function createStructuredSelector(selectors) {
     }, {});
   });
 }
+;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/utils.js
+
+const {
+  createAction: i18n_utils_createAction,
+  createThunk: i18n_utils_createThunk,
+  createReducer: i18n_utils_createReducer,
+  selectState: utils_selectState
+} = createDomain('i18n');
+;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/selectors.js
+
+
+const selectTranslations = createSelector(utils_selectState, state => state.translations);
+const selectInitialLocale = createSelector(utils_selectState, state => state.initialLocale);
+const selectLocale = createSelector(utils_selectState, state => state.locale);
+
+;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/actions.js
+
+
+
+const setInitialLocale = i18n_utils_createAction('setInitialLocale', locale => ({
+  locale
+}));
+const mutex = createMutex();
+const setLocale = i18n_utils_createThunk('setLocale', async (locale, {
+  getState,
+  extra: {
+    api
+  }
+}) => {
+  return mutex.runExclusively(() => {
+    if (locale === selectLocale(getState())) {
+      return undefined;
+    }
+
+    return api.getTranslations(locale);
+  });
+});
 ;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/constants.js
 const StoreKey = 'visibility';
 const constants_visibilityStates = {
@@ -1303,6 +1367,56 @@ const selectConfig = createSelector(selectState, config => {
   return newConfig;
 });
 
+;// CONCATENATED MODULE: ./src/javascripts/domains/app/utils.js
+
+const {
+  createAction: app_utils_createAction,
+  createThunk: app_utils_createThunk,
+  createReducer: app_utils_createReducer,
+  selectState: app_utils_selectState
+} = createDomain('app');
+;// CONCATENATED MODULE: ./src/javascripts/domains/app/selectors.js
+
+
+const selectUserHasResponded = createSelector(app_utils_selectState, state => state.userHasResponded);
+
+;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/utils.js
+
+
+const {
+  createAction: visibility_utils_createAction,
+  createActions: utils_createActions,
+  createThunk: visibility_utils_createThunk,
+  createReducer: visibility_utils_createReducer,
+  selectState: visibility_utils_selectState
+} = createDomain('visibility');
+const calculateVisibility = ({
+  hasResponded,
+  previousVisibility,
+  requestedVisibility,
+  config
+}) => {
+  const {
+    defaults,
+    layoutMode,
+    hideOnNoUserResponse
+  } = config;
+  const {
+    visible: defaultVisibility
+  } = defaults || {}; // Requesting open should override the responded check.
+
+  if (layoutMode === 'window' && hideOnNoUserResponse && requestedVisibility !== constants_visibilityStates.open) {
+    return hasResponded ? requestedVisibility || previousVisibility || constants_visibilityStates.open : constants_visibilityStates.hidden;
+  }
+
+  const baseVisibility = constants_visibilityStates.minimized;
+  return requestedVisibility || previousVisibility || defaultVisibility || baseVisibility;
+};
+;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/selectors.js
+
+
+const selectVisibility = createSelector(visibility_utils_selectState, state => state.visibility);
+
 ;// CONCATENATED MODULE: ./src/javascripts/domains/redux/context.js
 
 const context_StoreContext = (0,external_preact_namespaceObject.createContext)(undefined);
@@ -1407,1887 +1521,1830 @@ const hooks_useSelectorWithProps = function useSelectorWithProps(selector, props
 function hooks_useConfig() {
   return useSelector(Selectors.selectConfig);
 }
-;// CONCATENATED MODULE: ./src/javascripts/domains/config/middleware.js
-
-
-function createMiddleware() {
-  return ({
-    dispatch
-  }) => next => action => {
-    var _action$config, _action$config$defaul;
-
-    const result = next(action);
-
-    switch (action.type) {
-      case String(Actions.initialize):
-      case String(Actions.update):
-        if (action !== null && action !== void 0 && (_action$config = action.config) !== null && _action$config !== void 0 && (_action$config$defaul = _action$config.defaults) !== null && _action$config$defaul !== void 0 && _action$config$defaul.agentName) {
-          var _action$config2, _action$config2$defau;
-
-          dispatch({
-            type: seamlyActions.SET_HEADER_SUB_TITLE,
-            title: action === null || action === void 0 ? void 0 : (_action$config2 = action.config) === null || _action$config2 === void 0 ? void 0 : (_action$config2$defau = _action$config2.defaults) === null || _action$config2$defau === void 0 ? void 0 : _action$config2$defau.agentName
-          });
-        }
-
-    }
-
-    return result;
-  };
-}
-;// CONCATENATED MODULE: ./src/javascripts/config.js
-const CSS_NAME = 'cvco';
-const apiVersion = '2';
-const config_userParticipantId = 'seamly-client-participant'; // How long to debounce distinct changes in unread messages for before
-// broadcasting to the screen reader. This is done to avoid verbosity.
-
-const unreadScreenReaderWait = 2000;
-const newMessageScreenReaderWait = 1000;
-const config_screenReaderDebounceDelaySeconds = 10;
-const activitySendDelay = 15000;
-const maxCharacterWarningLimit = 50;
-const maxCharacterSrDebounceDelay = 300;
-const config_defaultTransitionTimeMs = 300; // How long to wait before we decide the user isn't typing
-
-const config_typingTimeout = 2000;
-const defaultConfig = {
-  namespace: 'default',
-  layoutMode: 'window',
-  // "window", "inline" ("sidebar"), "modal"
-  messages: {
-    agent: {
-      showAvatar: false,
-      // true, "inline"
-      showName: false
-    },
-    user: {
-      showAvatar: false,
-      // true, "inline"
-      showName: false
-    },
-    timeIndicator: {
-      enabled: false,
-      threshold: 3600000 // Default threshold is an hour in milliseconds
-
-    }
-  },
-  appContainerClassNames: config => [`app--layout-${config.layoutMode}`, `namespace--${config.namespace}`]
-};
-;// CONCATENATED MODULE: ./src/javascripts/domains/config/reducer.js
-const _excluded = ["messages"];
+;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/seamly-state-hooks.js
+function seamly_state_hooks_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function seamly_state_hooks_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { seamly_state_hooks_ownKeys(Object(source), true).forEach(function (key) { seamly_state_hooks_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { seamly_state_hooks_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function seamly_state_hooks_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 reducer_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function reducer_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { reducer_ownKeys(Object(source), true).forEach(function (key) { reducer_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { reducer_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function reducer_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 seamly_state_hooks_selectState = state => state.state;
+const seamly_state_hooks_useSeamlyStateContext = () => useSelector(seamly_state_hooks_selectState);
+const selectEventsWithSuggestion = createSelector(seamly_state_hooks_selectState, selectConfig, selectUserHasResponded, ({
+  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)) {
+    return events;
+  }
 
-const initialState = reducer_objectSpread(reducer_objectSpread({}, defaultConfig), {}, {
-  hideOnNoUserResponse: false,
-  showDisclaimer: false,
-  showFaq: false,
-  customComponents: {},
-  defaults: {}
+  const suggestionsEvent = {
+    type: 'service_data',
+    payload: serviceData.suggestion
+  };
+  return [...events, suggestionsEvent];
 });
+const selectEvents = createSelector(selectEventsWithSuggestion, selectConfig, (events, config) => {
+  var _config$messages$time, _config$messages;
 
-const configKeys = ['hideOnNoUserResponse', 'showDisclaimer', 'showFaq', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'visible', 'visibilityCallback', 'errorCallback'];
-
-const updateState = (state, {
-  config
-}) => {
-  const _pick = pick(config, configKeys),
-        {
-    messages
-  } = _pick,
-        partialConfig = _objectWithoutProperties(_pick, _excluded);
-
-  let newState = state;
-
-  if (Object.keys(partialConfig).length > 0) {
-    newState = reducer_objectSpread(reducer_objectSpread({}, newState), partialConfig);
-  }
+  const {
+    enabled,
+    threshold
+  } = (_config$messages$time = config === null || config === void 0 ? void 0 : (_config$messages = config.messages) === null || _config$messages === void 0 ? void 0 : _config$messages.timeIndicator) !== null && _config$messages$time !== void 0 ? _config$messages$time : {};
 
-  if (messages) {
-    newState = reducer_objectSpread(reducer_objectSpread({}, newState), {}, {
-      messages: reducer_objectSpread(reducer_objectSpread({}, newState.messages), messages)
-    });
+  if (!enabled) {
+    return events;
   }
 
-  return newState;
-};
-
-/* harmony default export */ const reducer = (utils_createReducer({
-  [initialize]: (state, action) => {
-    return updateState(state, action);
-  },
-  [update]: (state, action) => {
-    return updateState(state, action);
-  }
-}, initialState));
-;// CONCATENATED MODULE: ./src/javascripts/domains/config/index.js
+  const mappedEvents = [];
+  let previousEvent = null;
+  events.forEach((event, idx) => {
+    // always add timeIndicator to first message
+    if (idx === 0) {
+      mappedEvents.push(seamly_state_hooks_objectSpread(seamly_state_hooks_objectSpread({}, event), {}, {
+        timeIndicator: event.payload.occurredAt
+      })); // else check if diff is greater than threshold
+    } else {
+      const timeIndicator = previousEvent && microsecondsToMilliseconds(event.payload.occurredAt - previousEvent.payload.occurredAt) >= threshold ? event.payload.occurredAt : undefined;
+      mappedEvents.push(seamly_state_hooks_objectSpread(seamly_state_hooks_objectSpread({}, event), {}, {
+        timeIndicator
+      }));
+    }
 
+    previousEvent = event;
+  });
+  return mappedEvents;
+});
+const seamly_state_hooks_useEvents = () => useSelector(selectEvents, []);
+const useSeamlyIsLoading = () => seamly_state_hooks_useSeamlyStateContext().isLoading;
+const useSeamlyHeaderData = () => seamly_state_hooks_useSeamlyStateContext().headerTitles;
+const seamly_state_hooks_useSeamlyUnreadCount = () => seamly_state_hooks_useSeamlyStateContext().unreadEvents;
+const seamly_state_hooks_useSkiplink = () => seamly_state_hooks_useSeamlyStateContext().skiplinkTargetId;
+const useSeamlyParticipant = participantId => seamly_state_hooks_useSeamlyStateContext().participantInfo.participants[participantId];
+const useSeamlyServiceInfo = () => seamly_state_hooks_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;
+});
+const useLastMessageEventId = () => useSelector(selectLastMessageEventId);
+const useSeamlyIsHistoryLoaded = () => seamly_state_hooks_useSeamlyStateContext().historyLoaded;
+const useSeamlyCurrentAgent = () => {
+  const {
+    participants,
+    currentAgent
+  } = seamly_state_hooks_useSeamlyStateContext().participantInfo;
+  return currentAgent ? participants[currentAgent] : null;
+};
+const useSeamlyServiceData = key => seamly_state_hooks_useSeamlyStateContext().serviceData[key];
+const useEntryTextLimit = () => {
+  const {
+    entryMeta: {
+      options: {
+        text
+      }
+    }
+  } = seamly_state_hooks_useSeamlyStateContext();
+  const {
+    limit
+  } = text || {};
+  return {
+    hasLimit: limit != null,
+    limit: limit != null ? limit : null
+  };
+};
+const useSeamlyLayoutMode = () => {
+  const {
+    layoutMode
+  } = useConfig();
+  return {
+    isInline: layoutMode === 'inline',
+    isWindow: layoutMode === 'window',
+    isResolving: !layoutMode
+  };
+};
+;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/actions.js
+function actions_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
+function actions_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { actions_ownKeys(Object(source), true).forEach(function (key) { actions_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { actions_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+function actions_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; }
 
 
-;// CONCATENATED MODULE: ./src/javascripts/lib/mutex.js
-function createMutex() {
-  let isRunning = false;
-  const tasks = [];
 
-  const next = async () => {
-    if (!isRunning) {
-      while (tasks.length) {
-        const task = tasks.shift();
-        isRunning = true; // eslint-disable-next-line no-await-in-loop
 
-        await task().catch(() => {});
-        isRunning = false;
-      }
-    }
-  };
 
-  const runExclusively = async task => {
-    const prms = new Promise((resolve, reject) => {
-      tasks.push(async () => {
-        try {
-          resolve(await task());
-        } catch (e) {
-          reject(e);
-        }
-      });
-    });
-    next();
-    return prms;
-  };
 
-  return {
-    next,
-    runExclusively
-  };
-}
-;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/utils.js
 
-const {
-  createAction: i18n_utils_createAction,
-  createThunk: i18n_utils_createThunk,
-  createReducer: i18n_utils_createReducer,
-  selectState: utils_selectState
-} = createDomain('i18n');
-;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/selectors.js
+const setFromStorage = visibility_utils_createAction('setFromStorage', visibility => ({
+  visibility
+}));
+const validVisibilityStates = [constants_visibilityStates.open, constants_visibilityStates.minimized, constants_visibilityStates.hidden];
+const setVisibility = visibility_utils_createThunk('set', (requestedVisibility, {
+  getState,
+  extra: {
+    api,
+    eventBus
+  }
+}) => {
+  const state = getState();
+  const previousVisibility = selectVisibility(state);
+  const hasResponded = selectUserHasResponded(state);
+  const hasConversation = api.hasConversation();
+  const config = selectConfig(state);
+  const {
+    visibilityCallback = calculateVisibility,
+    layoutMode
+  } = config;
+  const {
+    unreadEvents: unreadMessageCount
+  } = seamly_state_hooks_selectState(state);
+  const calculatedVisibility = visibilityCallback({
+    hasConversation,
+    hasResponded,
+    previousVisibility,
+    requestedVisibility,
+    config
+  });
 
+  if (!validVisibilityStates.includes(calculatedVisibility)) {
+    console.error('The visibilityCallback function should return "open", "minimized" or "hidden".');
+    return undefined;
+  }
 
-const selectTranslations = createSelector(utils_selectState, state => state.translations);
-const selectInitialLocale = createSelector(utils_selectState, state => state.initialLocale);
-const selectLocale = createSelector(utils_selectState, state => state.locale);
+  if (previousVisibility === calculatedVisibility) {
+    return undefined;
+  } // Store the user-requested visibility in order to reinitialize after refresh
 
-;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/actions.js
 
+  api.store.set(StoreKey, actions_objectSpread(actions_objectSpread({}, api.store.get(StoreKey) || {}), {}, {
+    [layoutMode]: requestedVisibility
+  }));
 
+  if (requestedVisibility) {
+    eventBus.emit('ui.visible', requestedVisibility, {
+      visibility: requestedVisibility,
+      hasConversation,
+      hasResponded,
+      unreadMessageCount
+    });
+  }
 
-const setInitialLocale = i18n_utils_createAction('setInitialLocale', locale => ({
-  locale
-}));
-const mutex = createMutex();
-const setLocale = i18n_utils_createThunk('setLocale', async (locale, {
+  return calculatedVisibility;
+});
+const actions_initialize = visibility_utils_createThunk('initialize', async (locale, {
+  dispatch,
   getState,
   extra: {
     api
   }
 }) => {
-  return mutex.runExclusively(() => {
-    if (locale === selectLocale(getState())) {
-      return undefined;
-    }
+  var _api$store$get;
 
-    return api.getTranslations(locale);
-  });
+  // 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];
+
+  if (storedVisibility) {
+    dispatch(setFromStorage(storedVisibility));
+  }
+
+  dispatch(setVisibility(constants_visibilityStates.initialize));
 });
-;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+;// CONCATENATED MODULE: ./src/javascripts/api/errors/seamly-unavailable-error.js
+/**
+ * This error is used to alert the user that there's a problem with the connection
+ * when initialising the application because of a connection issue on either the server
+ * or the client side.
+ */
+class SeamlyUnavailableError extends Error {
+  constructor(params) {
+    super(params);
 
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, SeamlyUnavailableError);
+    }
 
-  var _s, _e;
+    this.name = 'SeamlyUnavailableError';
+    this.langKey = 'errors.seamlyUnavailable';
+  }
 
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
+}
+;// CONCATENATED MODULE: ./src/javascripts/api/errors/seamly-base-error.js
+class SeamlyBaseError extends Error {
+  constructor(originalError, ...params) {
+    super(...params);
 
-      if (i && _arr.length === i) break;
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, Object.getPrototypeOf(this));
     }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
+
+    this.originalError = originalError;
+
+    if (originalError !== null && originalError !== void 0 && originalError.payload) {
+      this.originalEvent = originalError;
+      this.originalError = originalError.payload.error;
+    }
+
+    if (originalError !== null && originalError !== void 0 && originalError.error) {
+      this.originalError = originalError.error;
     }
   }
 
-  return _arr;
 }
-;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
+;// CONCATENATED MODULE: ./src/javascripts/api/errors/seamly-session-expired-error.js
 
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
+class SeamlySessionExpiredError extends SeamlyBaseError {
+  constructor(originalError, ...params) {
+    super(originalError, ...params);
+    this.name = 'SeamlySessionExpiredError';
+    this.action = 'reset';
   }
 
-  return arr2;
 }
-;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js
+;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/utils.js
 
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/nonIterableRest.js
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/slicedToArray.js
+const {
+  createAction: interrupt_utils_createAction,
+  createReducer: interrupt_utils_createReducer,
+  selectState: interrupt_utils_selectState
+} = createDomain('interrupt');
+;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/actions.js
 
+const set = interrupt_utils_createAction('set', error => ({
+  error
+}));
+const clear = interrupt_utils_createAction('clear');
+;// CONCATENATED MODULE: ./src/javascripts/domains/app/actions.js
 
 
 
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/classCallCheck.js
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/createClass.js
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
 
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/defineProperty.js
-function defineProperty_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;
-}
-;// CONCATENATED MODULE: ./node_modules/@ultraq/array-utils/array-utils.es.js
-/* 
- * Copyright 2017, Emanuel Rabina (http://www.ultraq.net.nz/)
- * 
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *     http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 
-/**
- * Flattens an array of arrays of infinite depth into a single-dimension array.
- * 
- * > This is now natively in JavaScript as the `flat` method on an Array
- * > instance.  [Check MDN for which browsers have access to this feature](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat).
- * > If you can't use `flat`, then this method will do the job 🙂
- * 
- * @param {Array} array
- * @return {Array} Flattened array.
- */
-function flatten(array) {
-  return array.reduce(function (accumulator, value) {
-    return accumulator.concat(Array.isArray(value) ? flatten(value) : value);
-  }, []);
-}
-/**
- * Creates an array of numbers from the starting value (inclusive) to the end
- * (exclusive), with an optional step (the gap between values).
- * 
- * @param {Number} start
- *   The value to start at, the first item in the returned array.
- * @param {Number} end
- *   The value to end with, the last item in the returned array.
- * @param {Number} [step=1]
- *   The increment/gap between values, defaults to 1.
- * @return {Array} An array encompassing the given range.
- */
 
-function range(start, end) {
-  var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-  return Array.apply(0, Array(Math.ceil((end - start) / step))).map(function (empty, index) {
-    return index * step + start;
-  });
-}
-/**
- * Remove and return the first item from `array` that matches the predicate
- * function.
- * 
- * @param {Array} array
- * @param {Function} predicate
- *   Invoked with the array item.
- * @return {Object} The matching item, or `null` if no match was found.
- */
-
-function remove(array, predicate) {
-  return array.find(function (item, index) {
-    if (predicate(item)) {
-      array.splice(index, 1);
-      return item;
-    }
-  });
-}
-
-//# sourceMappingURL=array-utils.es.js.map
-;// CONCATENATED MODULE: ./node_modules/@ultraq/function-utils/function-utils.es.js
-/**
- * A higher-order function to apply [memoization](https://en.wikipedia.org/wiki/Memoization).
- * 
- * If memoizing a recursive function, then memoize and define the function at
- * the same time so you can make a call to the memoized function, eg:
- * 
- * ```javascript
- * const myFunction = memoize(() => myFunction());
- * ```
- * 
- * @param {Function} func
- * @return {Function} 
- */
-function memoize(func) {
-  var cache = {};
-  return function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    var key = args.length ? args.map(function (arg) {
-      return arg === null ? 'null' : arg === undefined ? 'undefined' : typeof arg === 'function' ? arg.toString() : arg instanceof Date ? arg.toISOString() : JSON.stringify(arg);
-    }).join('|') : '_(no-args)_';
 
-    if (Object.prototype.hasOwnProperty.call(cache, key)) {
-      return cache[key];
-    }
-
-    var result = func.apply(void 0, args);
-    cache[key] = result;
-    return result;
-  };
-}
+const setHasResponded = app_utils_createAction('setHasResponded', hasResponded => ({
+  hasResponded
+}));
+const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
+  dispatch,
+  extra: {
+    api,
+    config
+  }
+}) => {
+  var _config$context;
 
-//# sourceMappingURL=function-utils.es.js.map
-;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/lib/icu-message-formatter.es.js
+  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;
 
+  try {
+    const {
+      features,
+      defaultLocale,
+      preChat
+    } = await api.getConfig();
+    dispatch({
+      type: seamly_utils_seamlyActions.SET_FEATURES,
+      features
+    });
+    locale = locale || defaultLocale;
+    dispatch(setInitialLocale(locale));
+    dispatch(setPreChatEvents(preChat.map(payload => ({
+      type: 'message',
+      payload
+    }))));
+  } catch (e) {
+    throw new SeamlyUnavailableError();
+  }
 
+  try {
+    if (api.hasConversation()) {
+      var _initialState$transla;
 
+      const initialState = await api.getConversationIntitialState();
+      dispatch({
+        type: seamly_utils_seamlyActions.SET_INITIAL_STATE,
+        initialState
+      });
+      locale = ((_initialState$transla = initialState.translation) === null || _initialState$transla === void 0 ? void 0 : _initialState$transla.locale) || locale;
 
+      if ('userResponded' in initialState) {
+        dispatch(setHasResponded(initialState.userResponded));
+      }
+    }
+  } catch (e) {
+    if (e instanceof SeamlySessionExpiredError) {
+      throw e;
+    }
 
+    throw new SeamlyUnavailableError();
+  } finally {
+    await dispatch(setLocale(locale));
+    dispatch(actions_initialize());
+  }
+});
+const actions_reset = app_utils_createThunk('reset', async (config, {
+  dispatch,
+  extra: {
+    api
+  }
+}) => {
+  try {
+    await api.disconnect();
+    await api.clearStore();
+    dispatch(app_actions_initialize());
+  } catch (error) {
+    dispatch(set(error));
+  }
+});
+;// 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
 
 
-/* 
- * Copyright 2019, Emanuel Rabina (http://www.ultraq.net.nz/)
- * 
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *     http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 
-/**
- * Most branch-based type handlers are based around "cases".
- * For example, `select` and `plural` compare compare a value
- * to "case keys" to choose a subtranslation.
- * 
- * This util splits "matches" portions provided to the aforementioned
- * handlers into case strings, and extracts any prepended arguments
- * (for example, `plural` supports an `offset:n` argument used for
- * populating the magic `#` variable).
- * 
- * @param {String} string
- * @return {Object} The `cases` key points to a map of all cases.
- *                  The `arguments` key points to a list of prepended arguments.
- */
-function parseCases(string) {
-  var isWhitespace = function isWhitespace(ch) {
-    return /\s/.test(ch);
-  };
+const initialState = {
+  events: [],
+  initialState: {},
+  unreadEvents: 0,
+  isLoading: false,
+  idleDetachCountdown: {
+    hasCountdown: false,
+    isActive: false
+  },
+  resumeConversationPrompt: false,
+  serviceInfo: {
+    activeServiceSessionId: ''
+  },
+  participantInfo: {
+    participants: {},
+    currentAgent: ''
+  },
+  headerTitles: {
+    title: null,
+    subTitle: ''
+  },
+  historyLoaded: false,
+  skiplinkTargetId: id_randomId(),
+  optionsButtonId: id_randomId(),
+  headerCollapseButtonId: id_randomId(),
+  serviceData: {},
+  options: {
+    features: {},
+    panelActive: false,
+    optionActive: '',
+    userSelectedOptions: {}
+  },
+  showFileUpload: false,
+  currentUploads: [],
+  entryMeta: {
+    default: entryTypes.text,
+    active: entryTypes.text,
+    userSelected: null,
+    blockAutoEntrySwitch: false,
+    options: {},
+    optionsOverride: {}
+  },
+  seamlyContainerElement: null
+};
+function stateReducer(state = initialState, action) {
+  if (action.type === String(app_actions_initialize.pending)) {
+    return initialState;
+  }
 
-  var args = [];
-  var cases = {};
-  var currTermStart = 0;
-  var latestTerm = null;
-  var inTerm = false;
-  var i = 0;
+  return seamlyStateReducer(state, action);
+}
+;// CONCATENATED MODULE: ./src/javascripts/domains/forms/utils.js
 
-  while (i < string.length) {
-    // Term ended
-    if (inTerm && (isWhitespace(string[i]) || string[i] === '{')) {
-      inTerm = false;
-      latestTerm = string.slice(currTermStart, i); // We want to process the opening char again so the case will be properly registered.
+const {
+  createActions: forms_utils_createActions,
+  createReducer: forms_utils_createReducer,
+  selectState: forms_utils_selectState
+} = createDomain('forms');
+function utils_validate(values, schema = {}) {
+  return Object.entries(schema).reduce((errors, [key, validations]) => {
+    if (validations && !Array.isArray(validations)) {
+      // eslint-disable-next-line no-param-reassign
+      validations = [validations];
+    }
 
-      if (string[i] === '{') {
-        i--;
+    for (let i = 0; (_ref = i < ((_validations = validations) === null || _validations === void 0 ? void 0 : _validations.length)) !== null && _ref !== void 0 ? _ref : 0; i++) {
+      var _ref, _validations;
+
+      if (!validations[i].fn(values[key], validations[i].compareValue)) {
+        errors[key] = validations[i].errorText;
+        break;
       }
-    } // New term
-    else if (!inTerm && !isWhitespace(string[i])) {
-      var caseBody = string[i] === '{'; // If there's a previous term, we can either handle a whole
-      // case, or add that as an argument.
+    }
 
-      if (latestTerm && caseBody) {
-        var branchEndIndex = findClosingBracket(string, i);
+    return errors;
+  }, {});
+}
+;// CONCATENATED MODULE: ./src/javascripts/domains/forms/actions.js
 
-        if (branchEndIndex === -1) {
-          throw new Error("Unbalanced curly braces in string: \"".concat(string, "\""));
-        }
+const [registerForm, deregisterForm] = forms_utils_createActions('form', {
+  register: (formId, persistData) => ({
+    formId,
+    persistData
+  }),
+  deregister: formId => ({
+    formId
+  })
+});
+const [registerControl, deregisterControl, updateControlValue, updateControlTouched] = forms_utils_createActions('control', {
+  register: (formId, name) => ({
+    formId,
+    name
+  }),
+  deregister: (formId, name) => ({
+    formId,
+    name
+  }),
+  updateValue: (formId, name, value) => ({
+    formId,
+    name,
+    value
+  }),
+  updateTouched: (formId, name, touched) => ({
+    formId,
+    name,
+    touched
+  })
+});
+;// CONCATENATED MODULE: ./src/javascripts/domains/redux/utils.js
+const arrayContentEquals = (a, b) => {
+  if (a === b) {
+    return true;
+  }
 
-        cases[latestTerm] = string.slice(i + 1, branchEndIndex); // Don't include the braces
+  if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) {
+    return false;
+  }
 
-        i = branchEndIndex; // Will be moved up where needed at end of loop.
+  return a.every((value, idx) => b[idx] === value);
+};
+const getPropSelector = (propName, orDefault) => (_, props) => props[propName] || orDefault;
+;// CONCATENATED MODULE: ./src/javascripts/domains/forms/selectors.js
 
-        latestTerm = null;
-      } else {
-        if (latestTerm) {
-          args.push(latestTerm);
-          latestTerm = null;
-        }
 
-        inTerm = true;
-        currTermStart = i;
-      }
-    }
 
-    i++;
-  }
+const getState = forms_utils_selectState;
+const selectors_getFormById = createSelector(getState, getPropSelector('formId'), (forms, formId) => forms[formId]);
+const getFormControlsByFormId = createSelector(selectors_getFormById, form => (form === null || form === void 0 ? void 0 : form.controls) || {});
+const selectors_getFormValuesByFormId = createSelector(getFormControlsByFormId, controls => {
+  const valuesObj = {};
+  Object.entries(controls).forEach(([key, {
+    value
+  }]) => {
+    valuesObj[key] = value;
+  });
+  return valuesObj;
+});
+const selectors_getControlValueByName = createSelector(getFormControlsByFormId, getPropSelector('name'), (controls, name) => {
+  var _controls$name;
 
-  if (inTerm) {
-    latestTerm = string.slice(currTermStart);
-  }
+  return (_controls$name = controls[name]) === null || _controls$name === void 0 ? void 0 : _controls$name.value;
+});
+const selectors_getControlTouchedByName = createSelector(getFormControlsByFormId, getPropSelector('name'), (controls, name) => {
+  var _controls$name2;
 
-  if (latestTerm) {
-    args.push(latestTerm);
-  }
+  return (_controls$name2 = controls[name]) === null || _controls$name2 === void 0 ? void 0 : _controls$name2.touched;
+});
+;// CONCATENATED MODULE: ./src/javascripts/domains/forms/context.js
 
-  return {
-    args: args,
-    cases: cases
-  };
-}
-/**
- * Finds the index of the matching closing curly bracket, including through
- * strings that could have nested brackets.
- * 
- * @param {String} string
- * @param {Number} fromIndex
- * @return {Number} The index of the matching closing bracket, or -1 if no
- *   closing bracket could be found.
- */
+const context_FormContext = (0,external_preact_namespaceObject.createContext)({});
+/* harmony default export */ const forms_context = ((/* unused pure expression or super */ null && (context_FormContext)));
+const {
+  Provider: forms_context_Provider,
+  Consumer: context_Consumer
+} = context_FormContext;
+;// CONCATENATED MODULE: ./src/javascripts/domains/forms/hooks.js
 
-function findClosingBracket(string, fromIndex) {
-  var depth = 0;
 
-  for (var i = fromIndex + 1; i < string.length; i++) {
-    var char = string.charAt(i);
 
-    if (char === '}') {
-      if (depth === 0) {
-        return i;
-      }
 
-      depth--;
-    } else if (char === '{') {
-      depth++;
-    }
-  }
 
-  return -1;
-}
-/**
- * Split a `{key, type, format}` block into those 3 parts, taking into account
- * nested message syntax that can exist in the `format` part.
- * 
- * @param {String} block
- * @return {Array}
- *   An array with `key`, `type`, and `format` items in that order, if present
- *   in the formatted argument block.
- */
 
-function splitFormattedArgument(block) {
-  return split(block.slice(1, -1), ',', 3);
+function hooks_useFormContext() {
+  return useContext(FormContext);
 }
-/**
- * Like `String.prototype.split()` but where the limit parameter causes the
- * remainder of the string to be grouped together in a final entry.
- * 
- * @private
- * @param {String} string
- * @param {String} separator
- * @param {Number} limit
- * @param {Array} [accumulator=[]]
- * @return {Array}
- */
+function hooks_useForm() {
+  const {
+    handleSubmit,
+    isSubmitted,
+    isValid
+  } = hooks_useFormContext();
+  return {
+    handleSubmit,
+    isSubmitted,
+    isValid
+  };
+}
+function hooks_useValidations(values, validationSchema) {
+  const errors = useMemo(() => validate(values, validationSchema), [values, validationSchema]);
+  return {
+    isValid: Object.keys(errors).length === 0,
+    errors
+  };
+}
+function hooks_useFormControl(name) {
+  const dispatch = useStoreDispatch();
+  const {
+    formId,
+    updateControlValue,
+    updateControlTouched,
+    errors
+  } = hooks_useFormContext();
+  const form = useSelectorWithProps(getFormById, {
+    formId
+  }, [formId]);
+  const isRegistered = !!form;
+  const isRegisteredRef = useRef();
+  isRegisteredRef.current = isRegistered;
+  const value = useSelectorWithProps(getControlValueByName, {
+    formId,
+    name
+  }, [formId, name]);
+  const touched = useSelectorWithProps(getControlTouchedByName, {
+    formId,
+    name
+  }, [formId, name]);
+  const error = errors === null || errors === void 0 ? void 0 : errors[name];
+  const isValid = !error;
+  useEffect(() => {
+    // Make sure the form is registered
+    // Since child useEffect runs before FormProvider useEffect
+    if (isRegisteredRef.current) {
+      dispatch(Actions.registerControl(formId, name));
+    }
+  }, [isRegistered, formId, name, dispatch]);
+  useLayoutEffect(() => {
+    return () => {
+      dispatch(Actions.deregisterControl(formId, name));
+    };
+  }, [isRegistered, formId, name, dispatch]); // preact uses onInput instead of onChange
+
+  const onInput = useCallback(e => updateControlValue(name, e.target.value), [name, updateControlValue]);
+  const onBlur = useCallback(() => {
+    updateControlTouched(name, true);
+  }, [updateControlTouched, name]);
+  const field = useMemo(() => ({
+    name,
+    onInput,
+    onBlur,
+    value
+  }), [name, onInput, onBlur, value]);
+  const meta = useMemo(() => ({
+    isValid,
+    error,
+    touched
+  }), [isValid, error, touched]);
+  return [field, meta];
+}
+;// CONCATENATED MODULE: ./src/javascripts/domains/forms/provider.js
+const _excluded = (/* unused pure expression or super */ null && (["children", "formId", "persistData", "onError", "onSubmit", "validationSchema"]));
 
-function split(string, separator, limit) {
-  var accumulator = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+function provider_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-  if (!string) {
-    return accumulator;
-  }
+function provider_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { provider_ownKeys(Object(source), true).forEach(function (key) { provider_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { provider_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-  if (limit === 1) {
-    accumulator.push(string);
-    return accumulator;
-  }
+function provider_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; }
 
-  var indexOfDelimiter = string.indexOf(separator);
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-  if (indexOfDelimiter === -1) {
-    accumulator.push(string);
-    return accumulator;
-  }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-  var head = string.substring(0, indexOfDelimiter).trim();
-  var tail = string.substring(indexOfDelimiter + separator.length + 1).trim();
-  accumulator.push(head);
-  return split(tail, separator, limit - 1, accumulator);
-}
 
-/**
- * The main class for formatting messages.
- * 
- * @author Emanuel Rabina
- */
 
-var MessageFormatter = /*#__PURE__*/function () {
-  /**
-   * Creates a new formatter that can work using any of the custom type handlers
-   * you register.
-   * 
-   * @param {String} locale
-   * @param {Object} [typeHandlers={}]
-   *   Optional object where the keys are the names of the types to register,
-   *   their values being the functions that will return a nicely formatted
-   *   string for the data and locale they are given.
-   */
-  function MessageFormatter(locale) {
-    var _this = this;
 
-    var typeHandlers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-    _classCallCheck(this, MessageFormatter);
 
-    defineProperty_defineProperty(this, "format", memoize(function (message) {
-      var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      return flatten(_this.process(message, values)).join('');
-    }));
 
-    this.locale = locale;
-    this.typeHandlers = typeHandlers;
-  }
-  /**
-   * Formats an ICU message syntax string using `values` for placeholder data
-   * and any currently-registered type handlers.
-   * 
-   * @param {String} message
-   * @param {Object} [values={}]
-   * @return {String}
-   */
 
+function provider_FormProvider(_ref) {
+  let {
+    children,
+    formId,
+    persistData,
+    onError,
+    onSubmit,
+    validationSchema
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-  _createClass(MessageFormatter, [{
-    key: "process",
-    value:
-    /**
-     * Process an ICU message syntax string using `values` for placeholder data
-     * and any currently-registered type handlers.  The result of this method is
-     * an array of the component parts after they have been processed in turn by
-     * their own type handlers.  This raw output is useful for other renderers,
-     * eg: React where components can be used instead of being forced to return
-     * raw strings.
-     * 
-     * This method is used by {@link MessageFormatter#format} where it acts as a
-     * string renderer.
-     * 
-     * @param {String} message
-     * @param {Object} [values={}]
-     * @return {Array}
-     */
-    function process(message) {
-      var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const dispatch = useStoreDispatch();
+  const values = useSelectorWithProps(getFormValuesByFormId, {
+    formId
+  }, [formId]);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [externalErrors, setExternalErrors] = useState({});
+  const {
+    isValid: validationIsValid,
+    errors: validationErrors
+  } = useValidations(values, validationSchema);
+  const errors = useMemo(() => provider_objectSpread(provider_objectSpread({}, validationErrors), externalErrors), [validationErrors, externalErrors]); // register
 
-      if (!message) {
-        return [];
-      }
+  useLayoutEffect(() => {
+    // register form in redux store
+    dispatch(Actions.registerForm(formId, persistData));
+  }, [formId, persistData, dispatch]); // deregister
 
-      var blockStartIndex = message.indexOf('{');
+  useEffect(() => {
+    return () => {
+      // deregister form from redux store
+      dispatch(Actions.deregisterForm(formId));
+    };
+  }, [formId, persistData, dispatch]);
+  const updateControlValue = useCallback((name, value) => {
+    dispatch(Actions.updateControlValue(formId, name, value));
+  }, [formId, dispatch]);
+  const updateControlTouched = useCallback((name, touched) => {
+    dispatch(Actions.updateControlTouched(formId, name, touched));
+  }, [dispatch, formId]); // Function to manually set an error
 
-      if (blockStartIndex !== -1) {
-        var blockEndIndex = findClosingBracket(message, blockStartIndex);
+  const setError = useCallback((name, error) => {
+    setExternalErrors(val => {
+      return provider_objectSpread(provider_objectSpread({}, val), {}, {
+        [name]: error
+      });
+    });
+  }, [setExternalErrors]);
+  const handleSubmit = useCallback(e => {
+    e.preventDefault();
+    setIsSubmitted(true);
 
-        if (blockEndIndex !== -1) {
-          var block = message.substring(blockStartIndex, blockEndIndex + 1);
+    if (validationIsValid) {
+      onSubmit(values, {
+        updateControlValue,
+        setError
+      });
+    }
+  }, [validationIsValid, onSubmit, values, updateControlValue, setError]); //
 
-          if (block) {
-            var result = [];
-            var head = message.substring(0, blockStartIndex);
+  useEffect(() => {
+    if (onError) {
+      onError({
+        errors,
+        isSubmitted,
+        isValid: Object.keys(errors).length === 0
+      });
+    }
+  }, [isSubmitted, errors, onError]);
+  const contextValue = useMemo(() => ({
+    formId,
+    values,
+    errors,
+    isValid: Object.keys(errors).length === 0,
+    isSubmitted,
+    handleSubmit,
+    validationSchema,
+    updateControlValue,
+    updateControlTouched
+  }), [formId, values, errors, isSubmitted, handleSubmit, validationSchema, updateControlValue, updateControlTouched]);
 
-            if (head) {
-              result.push(head);
-            }
+  if (!formId) {
+    console.error('"formId" is required.');
+    return null;
+  }
 
-            var _splitFormattedArgume = splitFormattedArgument(block),
-                _splitFormattedArgume2 = _slicedToArray(_splitFormattedArgume, 3),
-                key = _splitFormattedArgume2[0],
-                type = _splitFormattedArgume2[1],
-                format = _splitFormattedArgume2[2];
+  if (!onSubmit) {
+    console.error('"onSubmit" is required.');
+    return null;
+  }
 
-            var body = values[key];
+  return _jsx(Provider, provider_objectSpread(provider_objectSpread({}, props), {}, {
+    value: contextValue,
+    children: children
+  }));
+}
+;// CONCATENATED MODULE: ./src/javascripts/domains/forms/reducer.js
+function reducer_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-            if (body === null || body === undefined) {
-              body = '';
-            }
+function reducer_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { reducer_ownKeys(Object(source), true).forEach(function (key) { reducer_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { reducer_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-            var typeHandler = type && this.typeHandlers[type];
-            result.push(typeHandler ? typeHandler(body, format, this.locale, values, this.process.bind(this)) : body);
-            var tail = message.substring(blockEndIndex + 1);
+function reducer_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; }
 
-            if (tail) {
-              result.push(this.process(tail, values));
-            }
 
-            return result;
-          }
-        } else {
-          throw new Error("Unbalanced curly braces in string: \"".concat(message, "\""));
-        }
-      }
 
-      return [message];
-    }
-  }]);
 
-  return MessageFormatter;
-}();
+const reducer_initialState = {};
+const initialFormState = {
+  controls: {}
+};
+const initialControlState = {
+  value: '',
+  touched: false
+};
 
-function icu_message_formatter_es_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function updateFormControl(state, formId, name, controlState) {
+  var _state$formId;
 
-function icu_message_formatter_es_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { icu_message_formatter_es_ownKeys(Object(source), true).forEach(function (key) { defineProperty_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { icu_message_formatter_es_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var pluralFormatter;
-var keyCounter = 0; // All the special keywords that can be used in `plural` blocks for the various branches
+  const currentControlState = ((_state$formId = state[formId]) === null || _state$formId === void 0 ? void 0 : _state$formId.controls[name]) || initialControlState;
+  return reducer_objectSpread(reducer_objectSpread({}, state), {}, {
+    [formId]: reducer_objectSpread(reducer_objectSpread({}, state[formId]), {}, {
+      controls: reducer_objectSpread(reducer_objectSpread({}, state[formId].controls), {}, {
+        [name]: reducer_objectSpread(reducer_objectSpread({}, currentControlState), controlState)
+      })
+    })
+  });
+}
 
-var ONE = 'one';
-var OTHER$1 = 'other';
-/**
- * @private
- * @param {String} caseBody
- * @param {Number} value
- * @return {Object} {caseBody: string, numberValues: object}
- */
+/* harmony default export */ const reducer = (forms_utils_createReducer({
+  // Form handlers
+  [registerForm]: (state, {
+    formId,
+    persistData
+  }) => {
+    var _state$formId2;
 
-function replaceNumberSign(caseBody, value) {
-  var i = 0;
-  var output = '';
-  var numBraces = 0;
-  var numberValues = {};
+    const formState = persistData ? (_state$formId2 = state[formId]) !== null && _state$formId2 !== void 0 ? _state$formId2 : reducer_objectSpread(reducer_objectSpread({}, initialFormState), {}, {
+      persistData
+    }) : reducer_objectSpread(reducer_objectSpread({}, initialFormState), {}, {
+      persistData
+    });
+    return reducer_objectSpread(reducer_objectSpread({}, state), {}, {
+      [formId]: formState
+    });
+  },
+  [deregisterForm]: (state, {
+    formId
+  }) => {
+    var _newState$formId;
+
+    const newState = reducer_objectSpread({}, state);
 
-  while (i < caseBody.length) {
-    if (caseBody[i] === '#' && !numBraces) {
-      var keyParam = "__hashToken".concat(keyCounter++);
-      output += "{".concat(keyParam, ", number}");
-      numberValues[keyParam] = value;
-    } else {
-      output += caseBody[i];
+    if (!((_newState$formId = newState[formId]) !== null && _newState$formId !== void 0 && _newState$formId.persistData)) {
+      delete newState[formId];
     }
 
-    if (caseBody[i] === '{') {
-      numBraces++;
-    } else if (caseBody[i] === '}') {
-      numBraces--;
-    }
+    return newState;
+  },
+  // Form control handlers
+  [registerControl]: (state, {
+    name,
+    formId
+  }) => {
+    return updateFormControl(state, formId, name);
+  },
+  [deregisterControl]: (state, {
+    formId,
+    name
+  }) => {
+    const form = state[formId];
 
-    i++;
-  }
+    if (!form) {
+      return state;
+    }
 
-  return {
-    caseBody: output,
-    numberValues: numberValues
-  };
-}
-/**
- * Handler for `plural` statements within ICU message syntax strings.  Returns
- * a formatted string for the branch that closely matches the current value.
- * 
- * See https://formatjs.io/docs/core-concepts/icu-syntax#plural-format for more
- * details on how the `plural` statement works.
- * 
- * @param {String} value
- * @param {String} matches
- * @param {String} locale
- * @param {String} values
- * @param {Function} format
- * @return {String}
- */
+    if (form.persistData) {
+      return state;
+    }
 
+    const controls = reducer_objectSpread({}, form.controls);
 
-function pluralTypeHandler(value) {
-  var matches = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  var locale = arguments.length > 2 ? arguments[2] : undefined;
-  var values = arguments.length > 3 ? arguments[3] : undefined;
-  var format = arguments.length > 4 ? arguments[4] : undefined;
+    delete controls[name];
+    return reducer_objectSpread(reducer_objectSpread({}, state), {}, {
+      [formId]: reducer_objectSpread(reducer_objectSpread({}, form), {}, {
+        controls
+      })
+    });
+  },
+  [updateControlValue]: (state, {
+    formId,
+    name,
+    value
+  }) => {
+    return updateFormControl(state, formId, name, {
+      value
+    });
+  },
+  [updateControlTouched]: (state, {
+    formId,
+    name,
+    touched
+  }) => {
+    return updateFormControl(state, formId, name, {
+      touched
+    });
+  },
+  [app_actions_initialize.pending]: () => reducer_initialState
+}, reducer_initialState));
+;// CONCATENATED MODULE: ./src/javascripts/domains/forms/index.js
 
-  var _parseCases = parseCases(matches),
-      args = _parseCases.args,
-      cases = _parseCases.cases;
 
-  var intValue = parseInt(value);
-  args.forEach(function (arg) {
-    if (arg.startsWith('offset:')) {
-      intValue -= parseInt(arg.slice('offset:'.length));
-    }
-  });
-  var keywordPossibilities = [];
 
-  if ('PluralRules' in Intl) {
-    // Effectively memoize because instantiation of `Int.*` objects is expensive.
-    if (pluralFormatter === undefined || pluralFormatter.resolvedOptions().locale !== locale) {
-      pluralFormatter = new Intl.PluralRules(locale);
-    }
 
-    var pluralKeyword = pluralFormatter.select(intValue); // Other is always added last with least priority, so we don't want to add it here.
 
-    if (pluralKeyword !== OTHER$1) {
-      keywordPossibilities.push(pluralKeyword);
-    }
-  }
 
-  if (intValue === 1) {
-    keywordPossibilities.push(ONE);
-  }
+;// CONCATENATED MODULE: ./src/javascripts/domains/translations/utils.js
 
-  keywordPossibilities.push("=".concat(intValue), OTHER$1);
+const {
+  createActions: translations_utils_createActions,
+  createReducer: translations_utils_createReducer,
+  selectState: translations_utils_selectState
+} = createDomain('translations');
+;// CONCATENATED MODULE: ./src/javascripts/domains/translations/actions.js
 
-  for (var i = 0; i < keywordPossibilities.length; i++) {
-    var keyword = keywordPossibilities[i];
+const [enable, disable] = translations_utils_createActions('translate', {
+  enable: locale => ({
+    locale
+  }),
+  disable: () => ({})
+});
+const [enableEvent, disableEvent] = translations_utils_createActions('event', {
+  enable: payloadId => ({
+    payloadId
+  }),
+  disable: payloadId => ({
+    payloadId
+  })
+});
+;// CONCATENATED MODULE: ./src/javascripts/domains/translations/selectors.js
 
-    if (keyword in cases) {
-      var _replaceNumberSign = replaceNumberSign(cases[keyword], intValue),
-          caseBody = _replaceNumberSign.caseBody,
-          numberValues = _replaceNumberSign.numberValues;
 
-      return format(caseBody, icu_message_formatter_es_objectSpread(icu_message_formatter_es_objectSpread({}, values), numberValues));
-    }
-  }
 
-  return value;
-}
+const selectors_getState = translations_utils_selectState;
+const getOriginalPayloadIds = createSelector(selectors_getState, state => state.originalPayloadIds);
+const getIsPayloadTranslated = createSelector(getOriginalPayloadIds, getPropSelector('payloadId'), (payloadIds, payloadId) => !payloadIds.includes(payloadId));
+;// CONCATENATED MODULE: ./src/javascripts/ui/components/core/seamly-api-context.js
 
-/* 
- * Copyright 2019, Emanuel Rabina (http://www.ultraq.net.nz/)
- * 
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *     http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var OTHER = 'other';
-/**
- * Handler for `select` statements within ICU message syntax strings.  Returns
- * a formatted string for the branch that closely matches the current value.
- * 
- * See https://formatjs.io/docs/core-concepts/icu-syntax#select-format for more
- * details on how the `select` statement works.
- * 
- * @param {String} value
- * @param {String} matches
- * @param {String} locale
- * @param {String} values
- * @param {Function} format
- * @return {String}
- */
+const seamly_api_context_SeamlyApiContext = (0,external_preact_namespaceObject.createContext)(null);
+const seamly_api_context_SeamlyEventBusContext = (0,external_preact_namespaceObject.createContext)('');
+;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/seamly-api-hooks.js
 
-function selectTypeHandler(value) {
-  var matches = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  var values = arguments.length > 3 ? arguments[3] : undefined;
-  var format = arguments.length > 4 ? arguments[4] : undefined;
 
-  var _parseCases = parseCases(matches),
-      cases = _parseCases.cases;
+const seamly_api_hooks_useSeamlyApiContext = () => useContext(SeamlyApiContext);
+const seamly_api_hooks_useSeamlyObjectStore = () => {
+  const api = seamly_api_hooks_useSeamlyApiContext();
+  return api.store || {};
+};
+const useSeamlyConversationUrl = () => {
+  const {
+    get
+  } = seamly_api_hooks_useSeamlyObjectStore();
 
-  if (value in cases) {
-    return format(cases[value], values);
-  } else if (OTHER in cases) {
-    return format(cases[OTHER], values);
+  if (get) {
+    return get('conversationUrl');
   }
 
-  return value;
-}
-
+  return null;
+};
+const seamly_api_hooks_useSeamlyHasConversation = () => {
+  const url = useSeamlyConversationUrl();
+  return !!url;
+};
+;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/use-seamly-dispatch.js
 
-//# sourceMappingURL=icu-message-formatter.es.js.map
+/* harmony default export */ const use_seamly_dispatch = ((/* unused pure expression or super */ null && (useStoreDispatch)));
+;// CONCATENATED MODULE: ./src/javascripts/domains/config/middleware.js
 
-;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/hooks.js
 
+function createMiddleware() {
+  return ({
+    dispatch
+  }) => next => action => {
+    var _action$config, _action$config$defaul;
 
+    const result = next(action);
 
- // The passed in locale (en-GB) is only used to call Intl.PluralRules.select() in
-// pluralTypeHandler. Since we only use exact plural matches (=0, =1 etc) we can
-// safely use en-GB all the time.
+    switch (action.type) {
+      case String(Actions.initialize):
+      case String(Actions.update):
+        if (action !== null && action !== void 0 && (_action$config = action.config) !== null && _action$config !== void 0 && (_action$config$defaul = _action$config.defaults) !== null && _action$config$defaul !== void 0 && _action$config$defaul.agentName) {
+          var _action$config2, _action$config2$defau;
 
-const formatter = new MessageFormatter('en-GB', {
-  plural: pluralTypeHandler,
-  select: selectTypeHandler
-});
-function hooks_useI18n() {
-  const translations = useSelector(Selectors.selectTranslations);
-  const locale = useSelector(Selectors.selectLocale);
-  const initialLocale = useSelector(Selectors.selectInitialLocale);
-  const t = useCallback((key, values = {}) => {
-    const translation = translations[key];
+          dispatch({
+            type: seamlyActions.SET_HEADER_SUB_TITLE,
+            title: action === null || action === void 0 ? void 0 : (_action$config2 = action.config) === null || _action$config2 === void 0 ? void 0 : (_action$config2$defau = _action$config2.defaults) === null || _action$config2$defau === void 0 ? void 0 : _action$config2$defau.agentName
+          });
+        }
 
-    if (!translation) {
-      return null;
     }
 
-    return formatter.format(translation, values);
-  }, [translations]);
-  return {
-    t,
-    locale,
-    initialLocale
+    return result;
   };
 }
-;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/reducer.js
-function i18n_reducer_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+;// CONCATENATED MODULE: ./src/javascripts/config.js
+const CSS_NAME = 'cvco';
+const apiVersion = '2';
+const config_userParticipantId = 'seamly-client-participant'; // How long to debounce distinct changes in unread messages for before
+// broadcasting to the screen reader. This is done to avoid verbosity.
 
-function i18n_reducer_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { i18n_reducer_ownKeys(Object(source), true).forEach(function (key) { i18n_reducer_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { i18n_reducer_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const unreadScreenReaderWait = 2000;
+const newMessageScreenReaderWait = 1000;
+const config_screenReaderDebounceDelaySeconds = 10;
+const activitySendDelay = 15000;
+const maxCharacterWarningLimit = 50;
+const maxCharacterSrDebounceDelay = 300;
+const config_defaultTransitionTimeMs = 300; // How long to wait before we decide the user isn't typing
 
-function i18n_reducer_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 config_typingTimeout = 2000;
+const defaultConfig = {
+  namespace: 'default',
+  layoutMode: 'window',
+  // "window", "inline" ("sidebar")
+  messages: {
+    agent: {
+      showAvatar: false,
+      // true, "inline"
+      showName: false
+    },
+    user: {
+      showAvatar: false,
+      // true, "inline"
+      showName: false
+    },
+    timeIndicator: {
+      enabled: false,
+      threshold: 3600000 // Default threshold is an hour in milliseconds
 
+    }
+  }
+};
+;// CONCATENATED MODULE: ./src/javascripts/domains/config/reducer.js
+const reducer_excluded = ["messages"];
 
+function reducer_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = reducer_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-const defaultState = {
-  translations: {
-    'errors.configError.message': 'We are sorry this happened, please retry at a later time.',
-    'errors.configError.srText': 'A chat configuration error occurred. Our apologies, please retry at a later time.',
-    'errors.configError.title': 'Chat configuration error.',
-    'errors.general.buttonText': 'Restart chat',
-    'errors.general.message': 'Do you want to start a new chat session?',
-    'errors.general.srText': 'Something went wrong with the chat session. You can restart the chat.',
-    'errors.general.title': 'Something went wrong',
-    'errors.seamlyOffline.message': 'There might be a problem with your or our network connection. The chat session should resume as soon the connection is available again.',
-    'errors.seamlyOffline.srText': 'The chat has connection issues. There might be a problem with your or our network connection. The chat session should resume as soon as the connection is available again.',
-    'errors.seamlyOffline.title': 'Connection issues',
-    'errors.seamlyUnavailable.buttonText': 'Try again',
-    'errors.seamlyUnavailable.message': 'The server could not be reached. Try again in a little while.',
-    'errors.seamlyUnavailable.srText': 'The chat server could not be reached. Try again in a little while.',
-    'errors.seamlyUnavailable.title': 'Server unavailable'
-  },
-  isLoading: false,
-  initialLocale: undefined
-};
-/* harmony default export */ const i18n_reducer = (i18n_utils_createReducer({
-  [setInitialLocale]: (state, {
-    locale
-  }) => i18n_reducer_objectSpread(i18n_reducer_objectSpread({}, state), {}, {
-    initialLocale: locale
-  }),
-  [setLocale.pending]: state => i18n_reducer_objectSpread(i18n_reducer_objectSpread({}, state), {}, {
-    isLoading: true
-  }),
-  [setLocale.fulfilled]: (state, {
-    payload: translations,
-    meta: {
-      arg: locale
-    }
-  }) => {
-    if (!translations) {
-      return i18n_reducer_objectSpread(i18n_reducer_objectSpread({}, state), {}, {
-        isLoading: false
-      });
-    }
+function reducer_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-    return i18n_reducer_objectSpread(i18n_reducer_objectSpread({}, state), {}, {
-      isLoading: false,
-      locale,
-      translations: Object.keys(translations).sort().reduce((accum, key) => i18n_reducer_objectSpread(i18n_reducer_objectSpread({}, accum), {}, {
-        [key]: translations[key]
-      }), {})
-    });
-  },
-  [setLocale.rejected]: state => i18n_reducer_objectSpread(i18n_reducer_objectSpread({}, state), {}, {
-    isLoading: false
-  })
-}, defaultState));
-;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/index.js
+function config_reducer_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
+function config_reducer_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { config_reducer_ownKeys(Object(source), true).forEach(function (key) { config_reducer_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { config_reducer_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+function config_reducer_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; }
 
 
 
-;// CONCATENATED MODULE: ./src/javascripts/domains/app/utils.js
 
-const {
-  createAction: app_utils_createAction,
-  createThunk: app_utils_createThunk,
-  createReducer: app_utils_createReducer,
-  selectState: app_utils_selectState
-} = createDomain('app');
-;// CONCATENATED MODULE: ./src/javascripts/domains/app/selectors.js
 
 
-const selectUserHasResponded = createSelector(app_utils_selectState, state => state.userHasResponded);
 
-;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/utils.js
+const config_reducer_initialState = config_reducer_objectSpread(config_reducer_objectSpread({}, defaultConfig), {}, {
+  hideOnNoUserResponse: false,
+  showDisclaimer: false,
+  showFaq: false,
+  customComponents: {},
+  defaults: {},
+  preChatEvents: []
+});
 
+const configKeys = ['hideOnNoUserResponse', 'showDisclaimer', 'showFaq', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'visible', 'visibilityCallback', 'errorCallback'];
 
-const {
-  createAction: visibility_utils_createAction,
-  createActions: utils_createActions,
-  createThunk: visibility_utils_createThunk,
-  createReducer: visibility_utils_createReducer,
-  selectState: visibility_utils_selectState
-} = createDomain('visibility');
-const calculateVisibility = ({
-  hasResponded,
-  previousVisibility,
-  requestedVisibility,
+const updateState = (state, {
   config
 }) => {
-  const {
-    defaults,
-    layoutMode,
-    hideOnNoUserResponse
-  } = config;
-  const {
-    visible: defaultVisibility
-  } = defaults || {}; // Requesting open should override the responded check.
-
-  if (layoutMode === 'window' && hideOnNoUserResponse && requestedVisibility !== constants_visibilityStates.open) {
-    return hasResponded ? requestedVisibility || previousVisibility || constants_visibilityStates.open : constants_visibilityStates.hidden;
-  }
+  const _pick = pick(config, configKeys),
+        {
+    messages
+  } = _pick,
+        partialConfig = reducer_objectWithoutProperties(_pick, reducer_excluded);
 
-  const baseVisibility = layoutMode === 'inline' ? constants_visibilityStates.open : constants_visibilityStates.minimized;
-  return requestedVisibility || previousVisibility || defaultVisibility || baseVisibility;
-};
-;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/selectors.js
+  let newState = state;
 
+  if (Object.keys(partialConfig).length > 0) {
+    newState = config_reducer_objectSpread(config_reducer_objectSpread({}, newState), partialConfig);
+  }
 
-const selectVisibility = createSelector(visibility_utils_selectState, state => state.visibility);
+  if (messages) {
+    newState = config_reducer_objectSpread(config_reducer_objectSpread({}, newState), {}, {
+      messages: config_reducer_objectSpread(config_reducer_objectSpread({}, newState.messages), messages)
+    });
+  }
 
-;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/seamly-state-hooks.js
-function seamly_state_hooks_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+  return newState;
+};
 
-function seamly_state_hooks_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { seamly_state_hooks_ownKeys(Object(source), true).forEach(function (key) { seamly_state_hooks_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { seamly_state_hooks_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+/* harmony default export */ const config_reducer = (utils_createReducer({
+  [initialize]: (state, action) => {
+    return updateState(state, action);
+  },
+  [update]: (state, action) => {
+    return updateState(state, action);
+  },
+  [app_actions_initialize.pending]: () => config_reducer_initialState,
+  [setPreChatEvents]: (state, {
+    events
+  }) => {
+    return config_reducer_objectSpread(config_reducer_objectSpread({}, state), {}, {
+      preChatEvents: events
+    });
+  }
+}, config_reducer_initialState));
+;// CONCATENATED MODULE: ./src/javascripts/domains/config/index.js
 
-function seamly_state_hooks_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 seamly_state_hooks_selectState = state => state.state;
-const seamly_state_hooks_useSeamlyStateContext = () => useSelector(seamly_state_hooks_selectState);
-const selectEvents = createSelector(seamly_state_hooks_selectState, selectConfig, ({
-  events
-}, config) => {
-  var _config$messages;
+;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/component-helper-hooks.js
 
+const useSeamlyAppContainerClassNames = () => {
+  return useConfig().appContainerClassNames;
+};
+const useSeamlyMessageContainerClassNames = event => {
   const {
-    enabled,
-    threshold
-  } = (config === null || config === void 0 ? void 0 : (_config$messages = config.messages) === null || _config$messages === void 0 ? void 0 : _config$messages.timeIndicator) ?? {};
+    fromClient
+  } = event.payload;
+  const classNames = ['message'];
 
-  if (!enabled) {
-    return events;
+  if (event.type === 'info') {
+    classNames.push('message--source-info');
+  } else if (!fromClient) {
+    classNames.push('message--source-agent');
+  } else {
+    classNames.push('message--source-user');
   }
 
-  const mappedEvents = [];
-  let previousEvent = null;
-  events.forEach((event, idx) => {
-    // always add timeIndicator to first message
-    if (idx === 0) {
-      mappedEvents.push(seamly_state_hooks_objectSpread(seamly_state_hooks_objectSpread({}, event), {}, {
-        timeIndicator: event.payload.occurredAt
-      })); // else check if diff is greater than threshold
-    } else {
-      const timeIndicator = previousEvent && microsecondsToMilliseconds(event.payload.occurredAt - previousEvent.payload.occurredAt) >= threshold ? event.payload.occurredAt : undefined;
-      mappedEvents.push(seamly_state_hooks_objectSpread(seamly_state_hooks_objectSpread({}, event), {}, {
-        timeIndicator
-      }));
-    }
-
-    previousEvent = event;
-  });
-  return mappedEvents;
-});
-const seamly_state_hooks_useEvents = () => useSelector(selectEvents, []);
-const useSeamlyIsLoading = () => seamly_state_hooks_useSeamlyStateContext().isLoading;
-const useSeamlyHeaderData = () => seamly_state_hooks_useSeamlyStateContext().headerTitles;
-const seamly_state_hooks_useSeamlyUnreadCount = () => seamly_state_hooks_useSeamlyStateContext().unreadEvents;
-const seamly_state_hooks_useSkiplink = () => seamly_state_hooks_useSeamlyStateContext().skiplinkTargetId;
-const useSeamlyParticipant = participantId => seamly_state_hooks_useSeamlyStateContext().participantInfo.participants[participantId];
-const useSeamlyServiceInfo = () => seamly_state_hooks_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;
-});
-const useLastMessageEventId = () => useSelector(selectLastMessageEventId);
-const useSeamlyIsHistoryLoaded = () => seamly_state_hooks_useSeamlyStateContext().historyLoaded;
-const useSeamlyCurrentAgent = () => {
-  const {
-    participants,
-    currentAgent
-  } = seamly_state_hooks_useSeamlyStateContext().participantInfo;
-  return currentAgent ? participants[currentAgent] : null;
-};
-const useSeamlyServiceData = key => seamly_state_hooks_useSeamlyStateContext().serviceData[key];
-const useEntryTextLimit = () => {
-  const {
-    entryMeta: {
-      options: {
-        text
-      }
-    }
-  } = seamly_state_hooks_useSeamlyStateContext();
-  const {
-    limit
-  } = text || {};
-  return {
-    hasLimit: limit != null,
-    limit: limit != null ? limit : null
-  };
-};
-const useSeamlyLayoutMode = () => {
-  const {
-    layoutMode
-  } = useConfig();
-  return {
-    isInline: layoutMode === 'inline',
-    isModal: layoutMode === 'modal',
-    isWindow: layoutMode === 'window',
-    isResolving: !layoutMode
-  };
+  return classNames;
 };
-;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/actions.js
-function actions_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function actions_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { actions_ownKeys(Object(source), true).forEach(function (key) { actions_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { actions_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function actions_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; }
-
+;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
 
+  var _s, _e;
 
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
 
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
 
+  return _arr;
+}
+;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
 
-const setFromStorage = visibility_utils_createAction('setFromStorage', visibility => ({
-  visibility
-}));
-const validVisibilityStates = [constants_visibilityStates.open, constants_visibilityStates.minimized, constants_visibilityStates.hidden];
-const setVisibility = visibility_utils_createThunk('set', (requestedVisibility, {
-  getState,
-  extra: {
-    api,
-    eventBus
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
   }
-}) => {
-  const state = getState();
-  const previousVisibility = selectVisibility(state);
-  const hasResponded = selectUserHasResponded(state);
-  const hasConversation = api.hasConversation();
-  const config = selectConfig(state);
-  const {
-    visibilityCallback = calculateVisibility,
-    layoutMode
-  } = config;
-  const {
-    unreadEvents: unreadMessageCount
-  } = seamly_state_hooks_selectState(state);
-  const calculatedVisibility = visibilityCallback({
-    hasConversation,
-    hasResponded,
-    previousVisibility,
-    requestedVisibility,
-    config
-  });
 
-  if (!validVisibilityStates.includes(calculatedVisibility)) {
-    console.error('The visibilityCallback function should return "open", "minimized" or "hidden".');
-    return undefined;
-  }
+  return arr2;
+}
+;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js
 
-  if (previousVisibility === calculatedVisibility) {
-    return undefined;
-  } // Store the user-requested visibility in order to reinitialize after refresh
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/nonIterableRest.js
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/slicedToArray.js
 
 
-  api.store.set(StoreKey, actions_objectSpread(actions_objectSpread({}, api.store.get(StoreKey) || {}), {}, {
-    [layoutMode]: requestedVisibility
-  }));
 
-  if (requestedVisibility) {
-    eventBus.emit('ui.visible', requestedVisibility, {
-      visibility: requestedVisibility,
-      hasConversation,
-      hasResponded,
-      unreadMessageCount
-    });
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/classCallCheck.js
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/createClass.js
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
   }
+}
 
-  return calculatedVisibility;
-});
-const actions_initialize = visibility_utils_createThunk('initialize', async (locale, {
-  dispatch,
-  getState,
-  extra: {
-    api
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/defineProperty.js
+function defineProperty_defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
   }
-}) => {
-  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];
+  return obj;
+}
+;// CONCATENATED MODULE: ./node_modules/@ultraq/array-utils/array-utils.es.js
+/* 
+ * Copyright 2017, Emanuel Rabina (http://www.ultraq.net.nz/)
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
-  if (storedVisibility) {
-    dispatch(setFromStorage(storedVisibility));
-  }
+/**
+ * Flattens an array of arrays of infinite depth into a single-dimension array.
+ * 
+ * > This is now natively in JavaScript as the `flat` method on an Array
+ * > instance.  [Check MDN for which browsers have access to this feature](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat).
+ * > If you can't use `flat`, then this method will do the job 🙂
+ * 
+ * @param {Array} array
+ * @return {Array} Flattened array.
+ */
+function flatten(array) {
+  return array.reduce(function (accumulator, value) {
+    return accumulator.concat(Array.isArray(value) ? flatten(value) : value);
+  }, []);
+}
+/**
+ * Creates an array of numbers from the starting value (inclusive) to the end
+ * (exclusive), with an optional step (the gap between values).
+ * 
+ * @param {Number} start
+ *   The value to start at, the first item in the returned array.
+ * @param {Number} end
+ *   The value to end with, the last item in the returned array.
+ * @param {Number} [step=1]
+ *   The increment/gap between values, defaults to 1.
+ * @return {Array} An array encompassing the given range.
+ */
 
-  dispatch(setVisibility(constants_visibilityStates.initialize));
-});
-;// CONCATENATED MODULE: ./src/javascripts/api/errors/seamly-unavailable-error.js
+function range(start, end) {
+  var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  return Array.apply(0, Array(Math.ceil((end - start) / step))).map(function (empty, index) {
+    return index * step + start;
+  });
+}
 /**
- * This error is used to alert the user that there's a problem with the connection
- * when initialising the application because of a connection issue on either the server
- * or the client side.
+ * Remove and return the first item from `array` that matches the predicate
+ * function.
+ * 
+ * @param {Array} array
+ * @param {Function} predicate
+ *   Invoked with the array item.
+ * @return {Object} The matching item, or `null` if no match was found.
  */
-class SeamlyUnavailableError extends Error {
-  constructor(params) {
-    super(params);
 
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, SeamlyUnavailableError);
+function remove(array, predicate) {
+  return array.find(function (item, index) {
+    if (predicate(item)) {
+      array.splice(index, 1);
+      return item;
     }
-
-    this.name = 'SeamlyUnavailableError';
-    this.langKey = 'errors.seamlyUnavailable';
-  }
-
+  });
 }
-;// CONCATENATED MODULE: ./src/javascripts/api/errors/seamly-base-error.js
-class SeamlyBaseError extends Error {
-  constructor(originalError, ...params) {
-    super(...params);
 
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, Object.getPrototypeOf(this));
+//# sourceMappingURL=array-utils.es.js.map
+;// CONCATENATED MODULE: ./node_modules/@ultraq/function-utils/function-utils.es.js
+/**
+ * A higher-order function to apply [memoization](https://en.wikipedia.org/wiki/Memoization).
+ * 
+ * If memoizing a recursive function, then memoize and define the function at
+ * the same time so you can make a call to the memoized function, eg:
+ * 
+ * ```javascript
+ * const myFunction = memoize(() => myFunction());
+ * ```
+ * 
+ * @param {Function} func
+ * @return {Function} 
+ */
+function memoize(func) {
+  var cache = {};
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
 
-    this.originalError = originalError;
-  }
-
-}
-;// CONCATENATED MODULE: ./src/javascripts/api/errors/seamly-session-expired-error.js
-
-class SeamlySessionExpiredError extends SeamlyBaseError {
-  constructor(originalError, ...params) {
-    super(originalError, ...params);
-    this.name = 'SeamlySessionExpiredError';
-    this.action = 'reset';
-  }
+    var key = args.length ? args.map(function (arg) {
+      return arg === null ? 'null' : arg === undefined ? 'undefined' : typeof arg === 'function' ? arg.toString() : arg instanceof Date ? arg.toISOString() : JSON.stringify(arg);
+    }).join('|') : '_(no-args)_';
+
+    if (Object.prototype.hasOwnProperty.call(cache, key)) {
+      return cache[key];
+    }
 
+    var result = func.apply(void 0, args);
+    cache[key] = result;
+    return result;
+  };
 }
-;// CONCATENATED MODULE: ./src/javascripts/domains/app/actions.js
 
+//# sourceMappingURL=function-utils.es.js.map
+;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/lib/icu-message-formatter.es.js
 
 
 
 
 
 
-const setHasResponded = app_utils_createAction('setHasResponded', hasResponded => ({
-  hasResponded
-}));
-const app_actions_initialize = app_utils_createThunk('initialize', async (config, {
-  dispatch,
-  extra: {
-    api
-  }
-}) => {
-  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;
+/* 
+ * Copyright 2019, Emanuel Rabina (http://www.ultraq.net.nz/)
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 
-  try {
-    const {
-      features,
-      defaultLocale
-    } = await api.getConfig();
-    dispatch({
-      type: seamly_utils_seamlyActions.SET_FEATURES,
-      features
-    });
-    locale = locale || defaultLocale;
-    dispatch(setInitialLocale(locale));
-  } catch (e) {
-    throw new SeamlyUnavailableError();
-  }
+/**
+ * Most branch-based type handlers are based around "cases".
+ * For example, `select` and `plural` compare compare a value
+ * to "case keys" to choose a subtranslation.
+ * 
+ * This util splits "matches" portions provided to the aforementioned
+ * handlers into case strings, and extracts any prepended arguments
+ * (for example, `plural` supports an `offset:n` argument used for
+ * populating the magic `#` variable).
+ * 
+ * @param {String} string
+ * @return {Object} The `cases` key points to a map of all cases.
+ *                  The `arguments` key points to a list of prepended arguments.
+ */
+function parseCases(string) {
+  var isWhitespace = function isWhitespace(ch) {
+    return /\s/.test(ch);
+  };
 
-  try {
-    if (api.hasConversation()) {
-      var _initialState$transla;
+  var args = [];
+  var cases = {};
+  var currTermStart = 0;
+  var latestTerm = null;
+  var inTerm = false;
+  var i = 0;
 
-      const initialState = await api.getConversationIntitialState();
-      dispatch({
-        type: seamly_utils_seamlyActions.SET_INITIAL_STATE,
-        initialState
-      });
-      locale = ((_initialState$transla = initialState.translation) === null || _initialState$transla === void 0 ? void 0 : _initialState$transla.locale) || locale;
+  while (i < string.length) {
+    // Term ended
+    if (inTerm && (isWhitespace(string[i]) || string[i] === '{')) {
+      inTerm = false;
+      latestTerm = string.slice(currTermStart, i); // We want to process the opening char again so the case will be properly registered.
 
-      if ('userResponded' in initialState) {
-        dispatch(setHasResponded(initialState.userResponded));
+      if (string[i] === '{') {
+        i--;
       }
-    }
-  } catch (e) {
-    if (e instanceof SeamlySessionExpiredError) {
-      throw e;
-    }
-
-    throw new SeamlyUnavailableError();
-  } finally {
-    await dispatch(setLocale(locale));
-    dispatch(actions_initialize());
-  }
-});
-const actions_reset = app_utils_createAction('reset', () => {});
-;// CONCATENATED MODULE: ./src/javascripts/domains/app/hooks.js
-
-
-function hooks_useUserHasResponded() {
-  return useSelector(Selectors.selectUserHasResponded);
-}
-;// CONCATENATED MODULE: ./src/javascripts/domains/app/reducer.js
-function app_reducer_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function app_reducer_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { app_reducer_ownKeys(Object(source), true).forEach(function (key) { app_reducer_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { app_reducer_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function app_reducer_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; }
+    } // New term
+    else if (!inTerm && !isWhitespace(string[i])) {
+      var caseBody = string[i] === '{'; // If there's a previous term, we can either handle a whole
+      // case, or add that as an argument.
 
+      if (latestTerm && caseBody) {
+        var branchEndIndex = findClosingBracket(string, i);
 
+        if (branchEndIndex === -1) {
+          throw new Error("Unbalanced curly braces in string: \"".concat(string, "\""));
+        }
 
-const reducer_initialState = {
-  userHasResponded: false
-};
-/* harmony default export */ const app_reducer = (app_utils_createReducer({
-  [setHasResponded]: (state, {
-    hasResponded
-  }) => app_reducer_objectSpread(app_reducer_objectSpread({}, state), {}, {
-    userHasResponded: hasResponded
-  })
-}, reducer_initialState));
-;// CONCATENATED MODULE: ./src/javascripts/domains/app/index.js
+        cases[latestTerm] = string.slice(i + 1, branchEndIndex); // Don't include the braces
 
+        i = branchEndIndex; // Will be moved up where needed at end of loop.
 
+        latestTerm = null;
+      } else {
+        if (latestTerm) {
+          args.push(latestTerm);
+          latestTerm = null;
+        }
 
+        inTerm = true;
+        currTermStart = i;
+      }
+    }
 
+    i++;
+  }
 
-;// CONCATENATED MODULE: ./src/javascripts/domains/store/state-reducer.js
-function state_reducer_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+  if (inTerm) {
+    latestTerm = string.slice(currTermStart);
+  }
 
-function state_reducer_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { state_reducer_ownKeys(Object(source), true).forEach(function (key) { state_reducer_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { state_reducer_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  if (latestTerm) {
+    args.push(latestTerm);
+  }
 
-function state_reducer_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; }
+  return {
+    args: args,
+    cases: cases
+  };
+}
+/**
+ * Finds the index of the matching closing curly bracket, including through
+ * strings that could have nested brackets.
+ * 
+ * @param {String} string
+ * @param {Number} fromIndex
+ * @return {Number} The index of the matching closing bracket, or -1 if no
+ *   closing bracket could be found.
+ */
 
-// Legacy state reducer. Do not add new features here but extract/create new reducers as needed
+function findClosingBracket(string, fromIndex) {
+  var depth = 0;
 
+  for (var i = fromIndex + 1; i < string.length; i++) {
+    var char = string.charAt(i);
 
+    if (char === '}') {
+      if (depth === 0) {
+        return i;
+      }
 
-const state_reducer_initialState = {
-  events: [],
-  initialState: {},
-  unreadEvents: 0,
-  isLoading: false,
-  idleDetachCountdown: {
-    hasCountdown: false,
-    isActive: false
-  },
-  resumeConversationPrompt: false,
-  serviceInfo: {
-    activeServiceSessionId: ''
-  },
-  participantInfo: {
-    participants: {},
-    currentAgent: ''
-  },
-  headerTitles: {
-    title: null,
-    subTitle: ''
-  },
-  historyLoaded: false,
-  skiplinkTargetId: id_randomId(),
-  optionsButtonId: id_randomId(),
-  cobrowsingContainerId: id_randomId(),
-  headerCollapseButtonId: id_randomId(),
-  serviceData: {},
-  options: {
-    features: {},
-    panelActive: false,
-    optionActive: '',
-    userSelectedOptions: {}
-  },
-  showFileUpload: false,
-  currentUploads: [],
-  entryMeta: {
-    default: entryTypes.text,
-    active: entryTypes.text,
-    userSelected: null,
-    blockAutoEntrySwitch: false,
-    options: {},
-    optionsOverride: {}
-  },
-  seamlyContainerElement: null
-};
-function stateReducer(state = state_reducer_initialState, action) {
-  if (action.type === String(actions_reset)) {
-    const {
-      visible
-    } = state;
-    return state_reducer_objectSpread(state_reducer_objectSpread({}, state_reducer_initialState), {}, {
-      visible
-    });
+      depth--;
+    } else if (char === '{') {
+      depth++;
+    }
   }
 
-  return seamlyStateReducer(state, action);
+  return -1;
 }
-;// CONCATENATED MODULE: ./src/javascripts/domains/forms/utils.js
-
-const {
-  createActions: forms_utils_createActions,
-  createReducer: forms_utils_createReducer,
-  selectState: forms_utils_selectState
-} = createDomain('forms');
-function utils_validate(values, schema = {}) {
-  return Object.entries(schema).reduce((errors, [key, validations]) => {
-    if (validations && !Array.isArray(validations)) {
-      // eslint-disable-next-line no-param-reassign
-      validations = [validations];
-    }
+/**
+ * Split a `{key, type, format}` block into those 3 parts, taking into account
+ * nested message syntax that can exist in the `format` part.
+ * 
+ * @param {String} block
+ * @return {Array}
+ *   An array with `key`, `type`, and `format` items in that order, if present
+ *   in the formatted argument block.
+ */
 
-    for (let i = 0; i < ((_validations = validations) === null || _validations === void 0 ? void 0 : _validations.length) ?? 0; i++) {
-      var _validations;
+function splitFormattedArgument(block) {
+  return split(block.slice(1, -1), ',', 3);
+}
+/**
+ * Like `String.prototype.split()` but where the limit parameter causes the
+ * remainder of the string to be grouped together in a final entry.
+ * 
+ * @private
+ * @param {String} string
+ * @param {String} separator
+ * @param {Number} limit
+ * @param {Array} [accumulator=[]]
+ * @return {Array}
+ */
 
-      if (!validations[i].fn(values[key], validations[i].compareValue)) {
-        errors[key] = validations[i].errorText;
-        break;
-      }
-    }
+function split(string, separator, limit) {
+  var accumulator = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
 
-    return errors;
-  }, {});
-}
-;// CONCATENATED MODULE: ./src/javascripts/domains/forms/actions.js
+  if (!string) {
+    return accumulator;
+  }
 
-const [registerForm, deregisterForm] = forms_utils_createActions('form', {
-  register: (formId, persistData) => ({
-    formId,
-    persistData
-  }),
-  deregister: formId => ({
-    formId
-  })
-});
-const [registerControl, deregisterControl, updateControlValue, updateControlTouched] = forms_utils_createActions('control', {
-  register: (formId, name) => ({
-    formId,
-    name
-  }),
-  deregister: (formId, name) => ({
-    formId,
-    name
-  }),
-  updateValue: (formId, name, value) => ({
-    formId,
-    name,
-    value
-  }),
-  updateTouched: (formId, name, touched) => ({
-    formId,
-    name,
-    touched
-  })
-});
-;// CONCATENATED MODULE: ./src/javascripts/domains/redux/utils.js
-const arrayContentEquals = (a, b) => {
-  if (a === b) {
-    return true;
+  if (limit === 1) {
+    accumulator.push(string);
+    return accumulator;
   }
 
-  if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) {
-    return false;
+  var indexOfDelimiter = string.indexOf(separator);
+
+  if (indexOfDelimiter === -1) {
+    accumulator.push(string);
+    return accumulator;
   }
 
-  return a.every((value, idx) => b[idx] === value);
-};
-const getPropSelector = (propName, orDefault) => (_, props) => props[propName] || orDefault;
-;// CONCATENATED MODULE: ./src/javascripts/domains/forms/selectors.js
+  var head = string.substring(0, indexOfDelimiter).trim();
+  var tail = string.substring(indexOfDelimiter + separator.length + 1).trim();
+  accumulator.push(head);
+  return split(tail, separator, limit - 1, accumulator);
+}
 
+/**
+ * The main class for formatting messages.
+ * 
+ * @author Emanuel Rabina
+ */
 
+var MessageFormatter = /*#__PURE__*/function () {
+  /**
+   * Creates a new formatter that can work using any of the custom type handlers
+   * you register.
+   * 
+   * @param {String} locale
+   * @param {Object} [typeHandlers={}]
+   *   Optional object where the keys are the names of the types to register,
+   *   their values being the functions that will return a nicely formatted
+   *   string for the data and locale they are given.
+   */
+  function MessageFormatter(locale) {
+    var _this = this;
 
-const getState = forms_utils_selectState;
-const selectors_getFormById = createSelector(getState, getPropSelector('formId'), (forms, formId) => forms[formId]);
-const getFormControlsByFormId = createSelector(selectors_getFormById, form => (form === null || form === void 0 ? void 0 : form.controls) || {});
-const selectors_getFormValuesByFormId = createSelector(getFormControlsByFormId, controls => {
-  const valuesObj = {};
-  Object.entries(controls).forEach(([key, {
-    value
-  }]) => {
-    valuesObj[key] = value;
-  });
-  return valuesObj;
-});
-const selectors_getControlValueByName = createSelector(getFormControlsByFormId, getPropSelector('name'), (controls, name) => {
-  var _controls$name;
+    var typeHandlers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-  return (_controls$name = controls[name]) === null || _controls$name === void 0 ? void 0 : _controls$name.value;
-});
-const selectors_getControlTouchedByName = createSelector(getFormControlsByFormId, getPropSelector('name'), (controls, name) => {
-  var _controls$name2;
+    _classCallCheck(this, MessageFormatter);
 
-  return (_controls$name2 = controls[name]) === null || _controls$name2 === void 0 ? void 0 : _controls$name2.touched;
-});
-;// CONCATENATED MODULE: ./src/javascripts/domains/forms/context.js
+    defineProperty_defineProperty(this, "format", memoize(function (message) {
+      var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      return flatten(_this.process(message, values)).join('');
+    }));
 
-const context_FormContext = (0,external_preact_namespaceObject.createContext)({});
-/* harmony default export */ const forms_context = ((/* unused pure expression or super */ null && (context_FormContext)));
-const {
-  Provider: forms_context_Provider,
-  Consumer: context_Consumer
-} = context_FormContext;
-;// CONCATENATED MODULE: ./src/javascripts/domains/forms/hooks.js
+    this.locale = locale;
+    this.typeHandlers = typeHandlers;
+  }
+  /**
+   * Formats an ICU message syntax string using `values` for placeholder data
+   * and any currently-registered type handlers.
+   * 
+   * @param {String} message
+   * @param {Object} [values={}]
+   * @return {String}
+   */
 
 
+  _createClass(MessageFormatter, [{
+    key: "process",
+    value:
+    /**
+     * Process an ICU message syntax string using `values` for placeholder data
+     * and any currently-registered type handlers.  The result of this method is
+     * an array of the component parts after they have been processed in turn by
+     * their own type handlers.  This raw output is useful for other renderers,
+     * eg: React where components can be used instead of being forced to return
+     * raw strings.
+     * 
+     * This method is used by {@link MessageFormatter#format} where it acts as a
+     * string renderer.
+     * 
+     * @param {String} message
+     * @param {Object} [values={}]
+     * @return {Array}
+     */
+    function process(message) {
+      var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
+      if (!message) {
+        return [];
+      }
 
+      var blockStartIndex = message.indexOf('{');
 
+      if (blockStartIndex !== -1) {
+        var blockEndIndex = findClosingBracket(message, blockStartIndex);
 
-function hooks_useFormContext() {
-  return useContext(FormContext);
-}
-function hooks_useForm() {
-  const {
-    handleSubmit
-  } = hooks_useFormContext();
-  return {
-    handleSubmit
-  };
-}
-function hooks_useValidations(values, validationSchema) {
-  const errors = useMemo(() => validate(values, validationSchema), [values, validationSchema]);
-  return {
-    isValid: Object.keys(errors).length === 0,
-    errors
-  };
-}
-function hooks_useFormControl(name) {
-  const dispatch = useStoreDispatch();
-  const {
-    formId,
-    updateControlValue,
-    updateControlTouched,
-    errors
-  } = hooks_useFormContext();
-  const form = useSelectorWithProps(getFormById, {
-    formId
-  }, [formId]);
-  const isRegistered = !!form;
-  const isRegisteredRef = useRef();
-  isRegisteredRef.current = isRegistered;
-  const value = useSelectorWithProps(getControlValueByName, {
-    formId,
-    name
-  }, [formId, name]);
-  const touched = useSelectorWithProps(getControlTouchedByName, {
-    formId,
-    name
-  }, [formId, name]);
-  const error = errors === null || errors === void 0 ? void 0 : errors[name];
-  const isValid = !error;
-  useEffect(() => {
-    // Make sure the form is registered
-    // Since child useEffect runs before FormProvider useEffect
-    if (isRegisteredRef.current) {
-      dispatch(Actions.registerControl(formId, name));
-    }
-  }, [isRegistered, formId, name, dispatch]);
-  useLayoutEffect(() => {
-    return () => {
-      dispatch(Actions.deregisterControl(formId, name));
-    };
-  }, [isRegistered, formId, name, dispatch]); // preact uses onInput instead of onChange
+        if (blockEndIndex !== -1) {
+          var block = message.substring(blockStartIndex, blockEndIndex + 1);
 
-  const onInput = useCallback(e => updateControlValue(name, e.target.value), [name, updateControlValue]);
-  const onBlur = useCallback(() => {
-    updateControlTouched(name, true);
-  }, [updateControlTouched, name]);
-  const field = useMemo(() => ({
-    name,
-    onInput,
-    onBlur,
-    value
-  }), [name, onInput, onBlur, value]);
-  const meta = useMemo(() => ({
-    isValid,
-    error,
-    touched
-  }), [isValid, error, touched]);
-  return [field, meta];
-}
-;// CONCATENATED MODULE: ./src/javascripts/domains/forms/provider.js
-const provider_excluded = (/* unused pure expression or super */ null && (["children", "formId", "persistData", "onSubmit", "validationSchema"]));
+          if (block) {
+            var result = [];
+            var head = message.substring(0, blockStartIndex);
+
+            if (head) {
+              result.push(head);
+            }
+
+            var _splitFormattedArgume = splitFormattedArgument(block),
+                _splitFormattedArgume2 = _slicedToArray(_splitFormattedArgume, 3),
+                key = _splitFormattedArgume2[0],
+                type = _splitFormattedArgume2[1],
+                format = _splitFormattedArgume2[2];
 
-function provider_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+            var body = values[key];
 
-function provider_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { provider_ownKeys(Object(source), true).forEach(function (key) { provider_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { provider_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+            if (body === null || body === undefined) {
+              body = '';
+            }
 
-function provider_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; }
+            var typeHandler = type && this.typeHandlers[type];
+            result.push(typeHandler ? typeHandler(body, format, this.locale, values, this.process.bind(this)) : body);
+            var tail = message.substring(blockEndIndex + 1);
 
-function provider_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = provider_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+            if (tail) {
+              result.push(this.process(tail, values));
+            }
 
-function provider_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+            return result;
+          }
+        } else {
+          throw new Error("Unbalanced curly braces in string: \"".concat(message, "\""));
+        }
+      }
 
+      return [message];
+    }
+  }]);
 
+  return MessageFormatter;
+}();
 
+function icu_message_formatter_es_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
+function icu_message_formatter_es_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { icu_message_formatter_es_ownKeys(Object(source), true).forEach(function (key) { defineProperty_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { icu_message_formatter_es_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var pluralFormatter;
+var keyCounter = 0; // All the special keywords that can be used in `plural` blocks for the various branches
 
+var ONE = 'one';
+var OTHER$1 = 'other';
+/**
+ * @private
+ * @param {String} caseBody
+ * @param {Number} value
+ * @return {Object} {caseBody: string, numberValues: object}
+ */
 
+function replaceNumberSign(caseBody, value) {
+  var i = 0;
+  var output = '';
+  var numBraces = 0;
+  var numberValues = {};
 
+  while (i < caseBody.length) {
+    if (caseBody[i] === '#' && !numBraces) {
+      var keyParam = "__hashToken".concat(keyCounter++);
+      output += "{".concat(keyParam, ", number}");
+      numberValues[keyParam] = value;
+    } else {
+      output += caseBody[i];
+    }
 
-function provider_FormProvider(_ref) {
-  let {
-    children,
-    formId,
-    persistData,
-    onSubmit,
-    validationSchema
-  } = _ref,
-      props = provider_objectWithoutProperties(_ref, provider_excluded);
+    if (caseBody[i] === '{') {
+      numBraces++;
+    } else if (caseBody[i] === '}') {
+      numBraces--;
+    }
 
-  const dispatch = useStoreDispatch();
-  const values = useSelectorWithProps(getFormValuesByFormId, {
-    formId
-  }, [formId]);
-  const [isSubmitted, setIsSubmitted] = useState(false);
-  const [externalErrors, setExternalErrors] = useState({});
-  const {
-    isValid: validationIsValid,
-    errors: validationErrors
-  } = useValidations(values, validationSchema);
-  const errors = useMemo(() => provider_objectSpread(provider_objectSpread({}, validationErrors), externalErrors), [validationErrors, externalErrors]); // register
+    i++;
+  }
 
-  useLayoutEffect(() => {
-    // register form in redux store
-    dispatch(Actions.registerForm(formId, persistData));
-  }, [formId, persistData, dispatch]); // deregister
+  return {
+    caseBody: output,
+    numberValues: numberValues
+  };
+}
+/**
+ * Handler for `plural` statements within ICU message syntax strings.  Returns
+ * a formatted string for the branch that closely matches the current value.
+ * 
+ * See https://formatjs.io/docs/core-concepts/icu-syntax#plural-format for more
+ * details on how the `plural` statement works.
+ * 
+ * @param {String} value
+ * @param {String} matches
+ * @param {String} locale
+ * @param {String} values
+ * @param {Function} format
+ * @return {String}
+ */
 
-  useEffect(() => {
-    return () => {
-      // deregister form from redux store
-      dispatch(Actions.deregisterForm(formId));
-    };
-  }, [formId, persistData, dispatch]);
-  const updateControlValue = useCallback((name, value) => {
-    dispatch(Actions.updateControlValue(formId, name, value));
-  }, [formId, dispatch]);
-  const updateControlTouched = useCallback((name, touched) => {
-    dispatch(Actions.updateControlTouched(formId, name, touched));
-  }, [dispatch, formId]); // Function to manually set an error
 
-  const setError = useCallback((name, error) => {
-    setExternalErrors(val => {
-      return provider_objectSpread(provider_objectSpread({}, val), {}, {
-        [name]: error
-      });
-    });
-  }, [setExternalErrors]);
-  const handleSubmit = useCallback(e => {
-    e.preventDefault();
-    setIsSubmitted(true);
+function pluralTypeHandler(value) {
+  var matches = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var locale = arguments.length > 2 ? arguments[2] : undefined;
+  var values = arguments.length > 3 ? arguments[3] : undefined;
+  var format = arguments.length > 4 ? arguments[4] : undefined;
 
-    if (validationIsValid) {
-      onSubmit(values, {
-        updateControlValue,
-        setError
-      });
+  var _parseCases = parseCases(matches),
+      args = _parseCases.args,
+      cases = _parseCases.cases;
+
+  var intValue = parseInt(value);
+  args.forEach(function (arg) {
+    if (arg.startsWith('offset:')) {
+      intValue -= parseInt(arg.slice('offset:'.length));
     }
-  }, [validationIsValid, onSubmit, values, updateControlValue, setError]);
-  const contextValue = useMemo(() => ({
-    formId,
-    values,
-    errors,
-    isValid: Object.keys(errors).length === 0,
-    isSubmitted,
-    handleSubmit,
-    validationSchema,
-    updateControlValue,
-    updateControlTouched
-  }), [formId, values, errors, isSubmitted, handleSubmit, validationSchema, updateControlValue, updateControlTouched]);
+  });
+  var keywordPossibilities = [];
 
-  if (!formId) {
-    console.error('"formId" is required.');
-    return null;
+  if ('PluralRules' in Intl) {
+    // Effectively memoize because instantiation of `Int.*` objects is expensive.
+    if (pluralFormatter === undefined || pluralFormatter.resolvedOptions().locale !== locale) {
+      pluralFormatter = new Intl.PluralRules(locale);
+    }
+
+    var pluralKeyword = pluralFormatter.select(intValue); // Other is always added last with least priority, so we don't want to add it here.
+
+    if (pluralKeyword !== OTHER$1) {
+      keywordPossibilities.push(pluralKeyword);
+    }
   }
 
-  if (!onSubmit) {
-    console.error('"onSubmit" is required.');
-    return null;
+  if (intValue === 1) {
+    keywordPossibilities.push(ONE);
   }
 
-  return _jsx(Provider, provider_objectSpread(provider_objectSpread({}, props), {}, {
-    value: contextValue,
-    children: children
-  }));
-}
-;// CONCATENATED MODULE: ./src/javascripts/domains/forms/reducer.js
-function forms_reducer_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+  keywordPossibilities.push("=".concat(intValue), OTHER$1);
 
-function forms_reducer_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { forms_reducer_ownKeys(Object(source), true).forEach(function (key) { forms_reducer_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { forms_reducer_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  for (var i = 0; i < keywordPossibilities.length; i++) {
+    var keyword = keywordPossibilities[i];
 
-function forms_reducer_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; }
+    if (keyword in cases) {
+      var _replaceNumberSign = replaceNumberSign(cases[keyword], intValue),
+          caseBody = _replaceNumberSign.caseBody,
+          numberValues = _replaceNumberSign.numberValues;
 
+      return format(caseBody, icu_message_formatter_es_objectSpread(icu_message_formatter_es_objectSpread({}, values), numberValues));
+    }
+  }
 
+  return value;
+}
 
-const forms_reducer_initialState = {};
-const initialFormState = {
-  controls: {}
-};
-const initialControlState = {
-  value: '',
-  touched: false
-};
+/* 
+ * Copyright 2019, Emanuel Rabina (http://www.ultraq.net.nz/)
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var OTHER = 'other';
+/**
+ * Handler for `select` statements within ICU message syntax strings.  Returns
+ * a formatted string for the branch that closely matches the current value.
+ * 
+ * See https://formatjs.io/docs/core-concepts/icu-syntax#select-format for more
+ * details on how the `select` statement works.
+ * 
+ * @param {String} value
+ * @param {String} matches
+ * @param {String} locale
+ * @param {String} values
+ * @param {Function} format
+ * @return {String}
+ */
 
-function updateFormControl(state, formId, name, controlState) {
-  var _state$formId;
+function selectTypeHandler(value) {
+  var matches = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  var values = arguments.length > 3 ? arguments[3] : undefined;
+  var format = arguments.length > 4 ? arguments[4] : undefined;
 
-  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), {}, {
-        [name]: forms_reducer_objectSpread(forms_reducer_objectSpread({}, currentControlState), controlState)
-      })
-    })
-  });
-}
+  var _parseCases = parseCases(matches),
+      cases = _parseCases.cases;
 
-/* harmony default export */ const forms_reducer = (forms_utils_createReducer({
-  // Form handlers
-  [registerForm]: (state, {
-    formId,
-    persistData
-  }) => {
-    const formState = persistData ? state[formId] ?? forms_reducer_objectSpread(forms_reducer_objectSpread({}, initialFormState), {}, {
-      persistData
-    }) : forms_reducer_objectSpread(forms_reducer_objectSpread({}, initialFormState), {}, {
-      persistData
-    });
-    return forms_reducer_objectSpread(forms_reducer_objectSpread({}, state), {}, {
-      [formId]: formState
-    });
-  },
-  [deregisterForm]: (state, {
-    formId
-  }) => {
-    var _newState$formId;
+  if (value in cases) {
+    return format(cases[value], values);
+  } else if (OTHER in cases) {
+    return format(cases[OTHER], values);
+  }
 
-    const newState = forms_reducer_objectSpread({}, state);
+  return value;
+}
 
-    if (!((_newState$formId = newState[formId]) !== null && _newState$formId !== void 0 && _newState$formId.persistData)) {
-      delete newState[formId];
-    }
 
-    return newState;
-  },
-  // Form control handlers
-  [registerControl]: (state, {
-    name,
-    formId
-  }) => {
-    return updateFormControl(state, formId, name);
-  },
-  [deregisterControl]: (state, {
-    formId,
-    name
-  }) => {
-    const form = state[formId];
+//# sourceMappingURL=icu-message-formatter.es.js.map
 
-    if (!form) {
-      return state;
-    }
+;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/hooks.js
 
-    if (form.persistData) {
-      return state;
-    }
 
-    const controls = forms_reducer_objectSpread({}, form.controls);
 
-    delete controls[name];
-    return forms_reducer_objectSpread(forms_reducer_objectSpread({}, state), {}, {
-      [formId]: forms_reducer_objectSpread(forms_reducer_objectSpread({}, form), {}, {
-        controls
-      })
-    });
-  },
-  [updateControlValue]: (state, {
-    formId,
-    name,
-    value
-  }) => {
-    return updateFormControl(state, formId, name, {
-      value
-    });
-  },
-  [updateControlTouched]: (state, {
-    formId,
-    name,
-    touched
-  }) => {
-    return updateFormControl(state, formId, name, {
-      touched
-    });
-  }
-}, forms_reducer_initialState));
-;// CONCATENATED MODULE: ./src/javascripts/domains/forms/index.js
+ // The passed in locale (en-GB) is only used to call Intl.PluralRules.select() in
+// pluralTypeHandler. Since we only use exact plural matches (=0, =1 etc) we can
+// safely use en-GB all the time.
+
+const formatter = new MessageFormatter('en-GB', {
+  plural: pluralTypeHandler,
+  select: selectTypeHandler
+});
+function hooks_useI18n() {
+  const translations = useSelector(Selectors.selectTranslations);
+  const locale = useSelector(Selectors.selectLocale);
+  const initialLocale = useSelector(Selectors.selectInitialLocale);
+  const t = useCallback((key, values = {}) => {
+    const translation = translations[key];
 
+    if (!translation) {
+      console.warn(`Translation key: ${key} is missing in locale: ${locale}`);
+      return null;
+    }
 
+    return formatter.format(translation, values);
+  }, [translations, locale]);
+  return {
+    t,
+    locale,
+    initialLocale
+  };
+}
+;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/reducer.js
+function i18n_reducer_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
+function i18n_reducer_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { i18n_reducer_ownKeys(Object(source), true).forEach(function (key) { i18n_reducer_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { i18n_reducer_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+function i18n_reducer_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; }
 
 
-;// CONCATENATED MODULE: ./src/javascripts/domains/translations/utils.js
 
-const {
-  createActions: translations_utils_createActions,
-  createReducer: translations_utils_createReducer,
-  selectState: translations_utils_selectState
-} = createDomain('translations');
-;// CONCATENATED MODULE: ./src/javascripts/domains/translations/actions.js
 
-const [enable, disable] = translations_utils_createActions('translate', {
-  enable: locale => ({
+const defaultState = {
+  translations: {
+    'errors.configError.message': 'We are sorry this happened, please retry at a later time.',
+    'errors.configError.srText': 'A chat configuration error occurred. Our apologies, please retry at a later time.',
+    'errors.configError.title': 'Chat configuration error.',
+    'errors.general.buttonText': 'Restart chat',
+    'errors.general.message': 'Do you want to start a new chat session?',
+    'errors.general.srText': 'Something went wrong with the chat session. You can restart the chat.',
+    'errors.general.title': 'Something went wrong',
+    'errors.seamlyOffline.message': 'There might be a problem with your or our network connection. The chat session should resume as soon the connection is available again.',
+    'errors.seamlyOffline.srText': 'The chat has connection issues. There might be a problem with your or our network connection. The chat session should resume as soon as the connection is available again.',
+    'errors.seamlyOffline.title': 'Connection issues',
+    'errors.seamlyUnavailable.buttonText': 'Try again',
+    'errors.seamlyUnavailable.message': 'The server could not be reached. Try again in a little while.',
+    'errors.seamlyUnavailable.srText': 'The chat server could not be reached. Try again in a little while.',
+    'errors.seamlyUnavailable.title': 'Server unavailable'
+  },
+  isLoading: false,
+  initialLocale: undefined
+};
+/* harmony default export */ const i18n_reducer = (i18n_utils_createReducer({
+  [setInitialLocale]: (state, {
     locale
+  }) => i18n_reducer_objectSpread(i18n_reducer_objectSpread({}, state), {}, {
+    initialLocale: locale
   }),
-  disable: () => ({})
-});
-const [enableEvent, disableEvent] = translations_utils_createActions('event', {
-  enable: payloadId => ({
-    payloadId
+  [setLocale.pending]: state => i18n_reducer_objectSpread(i18n_reducer_objectSpread({}, state), {}, {
+    isLoading: true
   }),
-  disable: payloadId => ({
-    payloadId
-  })
-});
-;// CONCATENATED MODULE: ./src/javascripts/domains/translations/selectors.js
-
-
-
-const selectors_getState = translations_utils_selectState;
-const getOriginalPayloadIds = createSelector(selectors_getState, state => state.originalPayloadIds);
-const getIsPayloadTranslated = createSelector(getOriginalPayloadIds, getPropSelector('payloadId'), (payloadIds, payloadId) => !payloadIds.includes(payloadId));
-;// CONCATENATED MODULE: ./src/javascripts/ui/components/core/seamly-api-context.js
+  [setLocale.fulfilled]: (state, {
+    payload: translations,
+    meta: {
+      arg: locale
+    }
+  }) => {
+    if (!translations) {
+      return i18n_reducer_objectSpread(i18n_reducer_objectSpread({}, state), {}, {
+        isLoading: false
+      });
+    }
 
-const seamly_api_context_SeamlyApiContext = (0,external_preact_namespaceObject.createContext)(null);
-const seamly_api_context_SeamlyEventBusContext = (0,external_preact_namespaceObject.createContext)('');
-;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/seamly-api-hooks.js
+    return i18n_reducer_objectSpread(i18n_reducer_objectSpread({}, state), {}, {
+      isLoading: false,
+      locale,
+      translations: Object.keys(translations).sort().reduce((accum, key) => i18n_reducer_objectSpread(i18n_reducer_objectSpread({}, accum), {}, {
+        [key]: translations[key]
+      }), {})
+    });
+  },
+  [setLocale.rejected]: state => i18n_reducer_objectSpread(i18n_reducer_objectSpread({}, state), {}, {
+    isLoading: false
+  }),
+  [app_actions_initialize.pending]: () => defaultState
+}, defaultState));
+;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/index.js
 
 
-const seamly_api_hooks_useSeamlyApiContext = () => useContext(SeamlyApiContext);
-const seamly_api_hooks_useSeamlyObjectStore = () => {
-  const api = seamly_api_hooks_useSeamlyApiContext();
-  return api.store || {};
-};
-const useSeamlyConversationUrl = () => {
-  const {
-    get
-  } = seamly_api_hooks_useSeamlyObjectStore();
 
-  if (get) {
-    return get('conversationUrl');
-  }
 
-  return null;
-};
-const seamly_api_hooks_useSeamlyHasConversation = () => {
-  const url = useSeamlyConversationUrl();
-  return !!url;
-};
-;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/use-seamly-dispatch.js
 
-/* harmony default export */ const use_seamly_dispatch = ((/* unused pure expression or super */ null && (useStoreDispatch)));
 ;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/focus-helper-hooks.js
 
 
@@ -3339,39 +3396,6 @@ const useFocusIfSeamlyContainedFocus = () => {
     runIfElementContainsOrHasFocus(containerElementRef.current, focusFn);
   }, []);
 };
-;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/component-helper-hooks.js
-
-
-
-const useSeamlyAppContainerClassNames = () => {
-  return useConfig().appContainerClassNames;
-};
-const useSeamlyMessageContainerClassNames = event => {
-  const {
-    fromClient
-  } = event.payload;
-  const classNames = ['message'];
-
-  if (event.type === 'info') {
-    classNames.push('message--source-info');
-  } else if (!fromClient) {
-    classNames.push('message--source-agent');
-  } else {
-    classNames.push('message--source-user');
-  }
-
-  return classNames;
-};
-const useCobrowsingContainer = () => {
-  const {
-    cobrowsingContainerId: id
-  } = useSeamlyStateContext();
-  const focusContainer = useElementFocusingById(id);
-  return {
-    id,
-    focusContainer
-  };
-};
 ;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/seamly-option-hooks.js
 function seamly_option_hooks_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -3602,19 +3626,6 @@ const utility_hooks_useStableCallback = callback => {
     return isFunction ? (...args) => callbackRef.current(...args) : undefined;
   }, [isFunction]);
 };
-;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/utils.js
-
-const {
-  createAction: interrupt_utils_createAction,
-  createReducer: interrupt_utils_createReducer,
-  selectState: interrupt_utils_selectState
-} = createDomain('interrupt');
-;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/actions.js
-
-const set = interrupt_utils_createAction('set', error => ({
-  error
-}));
-const clear = interrupt_utils_createAction('clear');
 ;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/selectors.js
 
 
@@ -3763,7 +3774,7 @@ const handleError = (state, {
   [set]: handleError,
   [app_actions_initialize.rejected]: handleError,
   [clear]: () => interrupt_reducer_initialState,
-  [actions_reset]: () => interrupt_reducer_initialState
+  [app_actions_initialize.pending]: () => interrupt_reducer_initialState
 }, interrupt_reducer_initialState));
 ;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/index.js
 
@@ -3772,8 +3783,13 @@ const handleError = (state, {
 
 
 
-;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/hooks.js
+;// CONCATENATED MODULE: ./src/javascripts/domains/app/hooks.js
+
 
+function hooks_useUserHasResponded() {
+  return useSelector(Selectors.selectUserHasResponded);
+}
+;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/hooks.js
 
 
 
@@ -3783,14 +3799,13 @@ const hooks_useVisibility = () => {
   const dispatch = useStoreDispatch();
   const visible = useSelector(Selectors.selectVisibility);
   const isVisible = visible ? visible !== visibilityStates.hidden : false;
-  const {
-    layoutMode
-  } = useConfig();
-  const isOpen = visible && layoutMode ? visible === visibilityStates.open || layoutMode === 'inline' && visible !== visibilityStates.hidden : false;
+  const isOpen = visible === visibilityStates.open;
+  const isMinimized = visible === visibilityStates.minimized;
   const setVisibility = useCallback(visibility => dispatch(Actions.setVisibility(visibility)), [dispatch]);
   return {
     isVisible,
     isOpen,
+    isMinimized,
     visible,
     setVisibility
   };
@@ -3848,12 +3863,10 @@ function use_seamly_commands_defineProperty(obj, key, value) { if (key in obj) {
 
 
 
+
 const {
   ADD_EVENT: use_seamly_commands_ADD_EVENT,
-  SET_IS_LOADING: use_seamly_commands_SET_IS_LOADING,
-  SET_HEADER_SUB_TITLE: use_seamly_commands_SET_HEADER_SUB_TITLE,
-  SET_INITIAL_STATE: use_seamly_commands_SET_INITIAL_STATE,
-  SET_FEATURES: use_seamly_commands_SET_FEATURES
+  SET_INITIAL_STATE: use_seamly_commands_SET_INITIAL_STATE
 } = seamly_utils_seamlyActions;
 
 const use_seamly_commands_useSeamlyCommands = () => {
@@ -3885,38 +3898,10 @@ const use_seamly_commands_useSeamlyCommands = () => {
       hasResponded,
       unreadMessageCount
     });
-  }, [api, appConfig, emitEvent, hasResponded, hasConversation, visibility, unreadMessageCount]);
-  const reset = useCallback(async () => {
-    dispatch(AppActions.reset());
-    dispatch(InterruptActions.clear());
-    dispatch({
-      type: use_seamly_commands_SET_IS_LOADING,
-      isLoading: true
-    });
-    const {
-      agentName
-    } = appConfig.defaults || {};
-    dispatch({
-      type: use_seamly_commands_SET_HEADER_SUB_TITLE,
-      title: agentName || ''
-    });
-
-    try {
-      const {
-        features
-      } = await api.reset();
-      dispatch({
-        type: use_seamly_commands_SET_FEATURES,
-        features
-      });
-      dispatch({
-        type: use_seamly_commands_SET_INITIAL_STATE,
-        initialState: {}
-      });
-    } catch (error) {
-      dispatch(InterruptActions.set(error));
-    }
-  }, [api, dispatch, appConfig]);
+  }, [api, appConfig, emitEvent, hasResponded, hasConversation, visibility, unreadMessageCount]);
+  const reset = useCallback(async () => {
+    dispatch(AppActions.reset());
+  }, [dispatch]);
   const getMessageBase = useCallback(type => ({
     type,
     id: randomId(),
@@ -4243,6 +4228,7 @@ const useSeamlyEntry = () => {
 
 
 
+
 const {
   SET_IS_LOADING: use_seamly_chat_SET_IS_LOADING
 } = seamly_utils_seamlyActions;
@@ -4251,6 +4237,9 @@ const useSeamlyChat = () => {
   const {
     t
   } = useI18n();
+  const {
+    layoutMode
+  } = useConfig();
   const {
     isOpen,
     isVisible,
@@ -4330,7 +4319,7 @@ const useSeamlyChat = () => {
     // they had been connected before.
     // We also keep track of whether connect was called before to avoid
     // multiple in-flight connection processes.
-    if (!isOpen && !hasConversation || connectCalled.current || !apiConfigReady) {
+    if (layoutMode === 'window' && !isOpen && !hasConversation || connectCalled.current || !apiConfigReady) {
       return;
     }
 
@@ -4348,7 +4337,7 @@ const useSeamlyChat = () => {
       start();
     });
     connectCalled.current = true;
-  }, [isOpen, hasConversation, apiConfigReady, start, connect, dispatch]);
+  }, [isOpen, hasConversation, apiConfigReady, start, connect, dispatch, layoutMode]);
 
   const openChat = () => {
     setVisibility(visibilityStates.open);
@@ -4765,6 +4754,7 @@ function translations_reducer_defineProperty(obj, key, value) { if (key in obj)
 
 
 
+
 const translations_reducer_initialState = {
   isActive: false,
   currentLocale: undefined,
@@ -4824,7 +4814,8 @@ const translations_reducer_initialState = {
     return translations_reducer_objectSpread(translations_reducer_objectSpread({}, state), {}, {
       originalPayloadIds: [...state.originalPayloadIds, payloadId]
     });
-  }
+  },
+  [app_actions_initialize.pending]: () => translations_reducer_initialState
 }, translations_reducer_initialState));
 ;// CONCATENATED MODULE: ./src/javascripts/lib/css.js
 
@@ -4841,7 +4832,14 @@ const css_className = (...classes) => classes.flat().map(c => {
   }
 
   return c;
-}).filter(c => typeof c === 'string').map(c => c.split(' ')).flat().filter(c => c.length).map(c => [CSS_NAME, c].join('-')).join(' ');
+}).filter(c => typeof c === 'string').map(c => c.split(' ')).flat().filter(c => c.length).map(c => {
+  // This rule makes sure the CSS_NAME is not added yet
+  if (c.indexOf(CSS_NAME) > -1) {
+    return c;
+  }
+
+  return [CSS_NAME, c].join('-');
+}).join(' ');
 ;// CONCATENATED MODULE: ./node_modules/raw-loader/dist/cjs.js!./src/icons/avatar_bot-32.svg
 /* harmony default export */ const avatar_bot_32 = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32px\" height=\"32px\" x=\"0px\" y=\"0px\" viewBox=\"0 0 32 32\"><defs/><path fill=\"#003A5D\" d=\"M0,4.717C0,2.112,2.112,0,4.717,0h22.566C29.888,0,32,2.112,32,4.717v22.566C32,29.887,29.888,32,27.283,32 H4.717C2.113,32,0,29.887,0,27.283V4.717z\"/><path fill=\"#FFF\" d=\"M10.103,14.901c-1.107,0-2.004-0.897-2.004-2.004s0.897-2.005,2.004-2.005c1.107,0,2.005,0.897,2.005,2.005 C12.108,14.004,11.211,14.901,10.103,14.901z M16,14.901c1.107,0,2.005-0.897,2.005-2.004S17.108,10.892,16,10.892 c-1.108,0-2.005,0.897-2.005,2.005C13.995,14.004,14.892,14.901,16,14.901z M21.896,10.892c-1.106,0-2.004,0.897-2.004,2.005 c0,1.107,0.896,2.004,2.004,2.004c1.109,0,2.005-0.897,2.005-2.004C23.901,11.789,23.005,10.892,21.896,10.892z M21.408,18.207 H10.783C11.83,23.973,20.361,23.973,21.408,18.207z\"/></svg>");
 ;// CONCATENATED MODULE: ./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_balloon-32.svg
@@ -4869,7 +4867,7 @@ const css_className = (...classes) => classes.flat().map(c => {
 ;// CONCATENATED MODULE: ./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_arrow_right-16.svg
 /* harmony default export */ const icon_arrow_right_16 = ("<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\n<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 16 16\" enable-background=\"new 0 0 16 16\" xml:space=\"preserve\">\n<path fill=\"#5053A4\" d=\"M2.4,8.1c0-0.6,0.4-1,1-1h7L8.1,4.5c-0.4-0.4-0.3-1,0.1-1.4c0.2-0.2,0.4-0.2,0.7-0.2c0.3,0,0.6,0.1,0.8,0.3\n\tl3.7,4.2c0,0,0.1,0.1,0.1,0.2c0,0,0.1,0.1,0.1,0.1c0,0.1,0.1,0.2,0.1,0.3c0,0,0,0,0,0c0,0,0,0,0,0c0,0.1,0,0.3-0.1,0.4\n\tc0,0-0.1,0.1-0.1,0.1c0,0.1-0.1,0.1-0.1,0.2l-3.7,4.1c-0.4,0.4-1,0.4-1.4,0.1c-0.4-0.4-0.4-1-0.1-1.4l2.2-2.4h-7\n\tC2.8,9.1,2.4,8.6,2.4,8.1z\"/>\n</svg>\n");
 ;// CONCATENATED MODULE: ./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_file-32.svg
-/* harmony default export */ const icon_file_32 = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32px\" height=\"32px\" x=\"0px\" y=\"0px\" viewBox=\"0 0 32 32\"><defs/><path fill=\"none\" stroke=\"#4A48C1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" stroke-width=\"2\" d=\"M18.132,11.784v10.039c0,1.15-0.915,2.079-2.048,2.079l0,0c-1.133,0-2.048-0.929-2.048-2.079V8.3c0-2.099,1.675-3.8,3.743-3.8l0,0\tc2.066,0,3.741,1.701,3.741,3.8v13.596c0,3.093-2.475,5.604-5.52,5.604l0,0c-3.048,0-5.519-2.511-5.519-5.604V9.604\"/></svg>");
+/* harmony default export */ const icon_file_32 = ("<svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" x=\"0px\" y=\"0px\" version=\"1.1\" viewBox=\"0 0 32 32\"><path fill=\"#4A48C1\" d=\"M16,28.5c-3.6,0-6.5-3-6.5-6.6V9.6c0-0.6,0.4-1,1-1s1,0.4,1,1v12.3c0,2.5,2,4.6,4.5,4.6\tc2.5,0,4.5-2.1,4.5-4.6V8.3c0-1.5-1.2-2.8-2.7-2.8c-1.5,0-2.7,1.3-2.7,2.8v13.5c0,0.6,0.5,1.1,1,1.1c0.6,0,1-0.5,1-1.1v-10\tc0-0.6,0.4-1,1-1s1,0.4,1,1v10c0,1.7-1.4,3.1-3,3.1s-3-1.4-3-3.1V8.3c0-2.6,2.1-4.8,4.7-4.8c2.6,0,4.7,2.2,4.7,4.8v13.6\tC22.5,25.5,19.6,28.5,16,28.5z\"/></svg>");
 ;// CONCATENATED MODULE: ./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_newtopic-32.svg
 /* harmony default export */ const icon_newtopic_32 = ("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32px\" height=\"32px\" x=\"0px\" y=\"0px\" viewBox=\"0 0 32 32\"><path fill=\"#4A48C1\" d=\"M16,8.593l2.407,4.573l5.093,0.876l-3.604,3.702l0.74,5.115L16,20.574l-4.634,2.285l0.739-5.115L8.5,14.042\tl5.094-0.876L16,8.593z\"/></svg>");
 ;// CONCATENATED MODULE: ./node_modules/raw-loader/dist/cjs.js!./src/icons/icon_newtranslation-16.svg
@@ -5053,6 +5051,7 @@ const in_out_transition_InOutTransition = ({
 
 
 const options_frame_OptionsFrame = ({
+  className: givenClassName,
   children,
   onCancel,
   headingText,
@@ -5095,7 +5094,7 @@ const options_frame_OptionsFrame = ({
     className: className('options', {
       'options--right': position !== 'left',
       'options--left': position === 'left'
-    }),
+    }, givenClassName),
     "aria-labelledby": mainHeadingId,
     tabIndex: "-1",
     ref: container,
@@ -5131,25 +5130,49 @@ const options_frame_OptionsFrame = ({
 
 /* harmony default export */ const options_frame = ((/* unused pure expression or super */ null && (options_frame_OptionsFrame)));
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/form-controls/form.js
+const form_excluded = (/* unused pure expression or super */ null && (["className", "disableValidationClasses"]));
+
 function form_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function form_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { form_ownKeys(Object(source), true).forEach(function (key) { form_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { form_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function form_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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function form_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = form_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function form_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 
 
 
 
 function form_Form(_ref) {
-  let props = _extends({}, _ref);
+  let {
+    className: givenClassName,
+    disableValidationClasses
+  } = _ref,
+      props = form_objectWithoutProperties(_ref, form_excluded);
 
   const {
-    handleSubmit
+    handleSubmit,
+    isValid,
+    isSubmitted
   } = useForm();
+  const formClasses = ['form'];
+
+  if (!disableValidationClasses && isSubmitted) {
+    formClasses.push('form--submitted');
+
+    if (isValid) {
+      formClasses.push('form--valid');
+    } else {
+      formClasses.push('form--invalid');
+    }
+  }
+
   return _jsx("form", form_objectSpread({
-    onSubmit: handleSubmit
+    onSubmit: handleSubmit,
+    className: className([...formClasses, givenClassName])
   }, props));
 }
 
@@ -5171,11 +5194,12 @@ function error_Error({
     return () => clearTimeout(timerId); // clear timer if error is mounted+unmounted within 300
   }, []);
   return _jsx("div", {
+    className: className('error'),
     "aria-live": "assertive",
     "aria-atomic": "true",
     children: isAvailable && error && _jsxs("span", {
       id: id,
-      className: className('error'),
+      className: className('error__message'),
       children: [_jsx(Icon, {
         name: "error",
         size: "16"
@@ -5330,6 +5354,7 @@ function form_TranslationsOptionsDialogForm({
   }, [t, languages, uiLocale]);
   return _jsxs(Form, {
     noValidate: "true",
+    className: className('options__form'),
     children: [_jsx("p", {
       className: className('options__description'),
       id: descriptionId,
@@ -5535,6 +5560,7 @@ const inputName = 'locale';
 function options_dialog_TranslationsOptionsDialog({
   onClose
 }) {
+  const [errorClass, setErrorClass] = useState(undefined);
   const {
     t
   } = useI18n();
@@ -5558,8 +5584,18 @@ function options_dialog_TranslationsOptionsDialog({
       onClose();
       focusContainer();
     }
-  }; // we need a key to fully reset the form when we enable/disable translations
+  };
 
+  const handleError = useCallback(({
+    isValid,
+    isSubmitted
+  }) => {
+    if (isSubmitted && !isValid) {
+      setErrorClass('options--error');
+    } else {
+      setErrorClass(undefined);
+    }
+  }, [setErrorClass]); // we need a key to fully reset the form when we enable/disable translations
 
   const formKeyRef = useRef(0);
   const validationSchema = useMemo(() => {
@@ -5570,6 +5606,7 @@ function options_dialog_TranslationsOptionsDialog({
     };
   }, [isActive, t]);
   return _jsx(OptionsFrame, {
+    className: errorClass,
     onCancel: onClose,
     formName: formName,
     headingText: t('translations.settings.title'),
@@ -5580,6 +5617,7 @@ function options_dialog_TranslationsOptionsDialog({
       onSubmit: handleSubmit,
       formId: formName,
       validationSchema: validationSchema,
+      onError: handleError,
       children: _jsx(TranslationsOptionsDialogForm, {
         controlName: inputName,
         descriptionId: descriptionId
@@ -5762,6 +5800,31 @@ function TranslationsChatStatus() {
 
 
 
+;// CONCATENATED MODULE: ./src/javascripts/domains/app/reducer.js
+function app_reducer_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function app_reducer_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { app_reducer_ownKeys(Object(source), true).forEach(function (key) { app_reducer_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { app_reducer_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function app_reducer_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 app_reducer_initialState = {
+  userHasResponded: false
+};
+/* harmony default export */ const app_reducer = (app_utils_createReducer({
+  [setHasResponded]: (state, {
+    hasResponded
+  }) => app_reducer_objectSpread(app_reducer_objectSpread({}, state), {}, {
+    userHasResponded: hasResponded
+  })
+}, app_reducer_initialState));
+;// CONCATENATED MODULE: ./src/javascripts/domains/app/index.js
+
+
+
+
+
 ;// CONCATENATED MODULE: ./src/javascripts/style-guide/components/static-core.js
 const static_core_excluded = ["translations", "interrupt", "config", "visibility"];
 
@@ -5807,7 +5870,7 @@ const SeamlyTestCore = ({
           {
       translations: translationsSlice,
       interrupt: interruptSlice,
-      config: configSlice,
+      config: configSlice = {},
       visibility: visibilitySlice
     } = _ref,
           restState = static_core_objectWithoutProperties(_ref, static_core_excluded);
@@ -5816,8 +5879,8 @@ const SeamlyTestCore = ({
       reducers: {
         state: stateReducer,
         [String(app_reducer)]: app_reducer,
+        [String(config_reducer)]: config_reducer,
         [String(reducer)]: reducer,
-        [String(forms_reducer)]: forms_reducer,
         [String(translations_reducer)]: translations_reducer,
         [String(i18n_reducer)]: i18n_reducer,
         [String(interrupt_reducer)]: interrupt_reducer,
@@ -5834,7 +5897,12 @@ const SeamlyTestCore = ({
         eventBus: eventBusRef.current
       })]
     });
-    newStore.dispatch(initialize(configSlice || {}));
+    newStore.dispatch(initialize(configSlice));
+
+    if (configSlice.preChatEvents) {
+      newStore.dispatch(setPreChatEvents(configSlice.preChatEvents));
+    }
+
     newStore.dispatch(setLocale.fulfilled('en-GB', translations));
     return newStore;
   }, [state, translations]);
@@ -5846,7 +5914,9 @@ const SeamlyTestCore = ({
         value: liveMsgRef.current,
         children: (0,jsx_runtime_namespaceObject.jsx)(web_ui_namespaceObject.SeamlyApiContext.Provider, {
           value: bareApi,
-          children: children
+          children: (0,jsx_runtime_namespaceObject.jsx)(web_ui_namespaceObject.ComponentFilter, {
+            children: children
+          })
         })
       })
     })
@@ -6007,7 +6077,6 @@ const baseState = {
   historyLoaded: false,
   skiplinkTargetId: (0,web_ui_namespaceObject.randomId)(),
   optionsButtonId: (0,web_ui_namespaceObject.randomId)(),
-  cobrowseContainerId: (0,web_ui_namespaceObject.randomId)(),
   serviceData: {},
   options: {
     features: {},
@@ -6030,7 +6099,7 @@ const participantInfo = {
     'e65fa8dc-97ab-4711-8fec-82bae6461aa2': {
       avatar,
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
-      introduction: "You're now talking to {{name}} gimme a minit",
+      introduction: "You're now talking to Mrs. Bot gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: {
@@ -6045,7 +6114,7 @@ const participantInfo = {
     },
     'e65fa8dc-97ab-4711-8fec-82bae6461aa3': {
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa3',
-      introduction: "You're now talking to {{name}} gimme a minit",
+      introduction: "You're now talking to Mrs. Bot gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: {
@@ -6146,8 +6215,7 @@ const infoMessage = {
   payload: {
     body: {
       text: 'This is a system generated info message',
-      type: 'text',
-      variables: {}
+      type: 'text'
     },
     fromClient: false,
     id: (0,web_ui_namespaceObject.randomId)(),
@@ -6200,7 +6268,7 @@ const participantMessage = {
     participant: {
       avatar,
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
-      introduction: "You're now talking to {{name}} gimme a minit",
+      introduction: "You're now talking to Mrs. Bot gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: {
@@ -6226,7 +6294,7 @@ const participantMessageDefaultIcon = {
     messageStatus: 'received',
     participant: {
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa3',
-      introduction: "You're now talking to {{name}} gimme a minit",
+      introduction: "You're now talking to Mrs. Bot gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: {
@@ -6254,8 +6322,7 @@ const getCustomMessage = ({
     body: {
       type,
       text,
-      data,
-      variables: {}
+      data
     },
     participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
     service: {
@@ -6280,8 +6347,7 @@ const shortTextMessage = {
   payload: {
     body: {
       text: 'What do you want to do?',
-      type: 'text',
-      variables: {}
+      type: 'text'
     },
     fromClient: false,
     fromHistory: true,
@@ -6300,6 +6366,18 @@ const shortTextMessage = {
     type: 'text'
   }
 };
+const splashMessage = {
+  type: 'message',
+  payload: {
+    type: 'splash',
+    id: (0,web_ui_namespaceObject.randomId)(),
+    body: {
+      text: 'Example splash message ✨',
+      type: 'text',
+      variables: {}
+    }
+  }
+};
 const ctaMessage = {
   type: 'message',
   payload: {
@@ -6333,8 +6411,7 @@ const longTextMessage = {
   payload: {
     body: {
       text: 'What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am.',
-      type: 'text',
-      variables: {}
+      type: 'text'
     },
     fromClient: false,
     fromHistory: true,
@@ -6358,8 +6435,7 @@ const textMessageBoldItalicUnderline = {
   payload: {
     body: {
       text: 'Bubble with **bold** *italic* <u>underline</u>',
-      type: 'text',
-      variables: {}
+      type: 'text'
     },
     fromClient: false,
     fromHistory: true,
@@ -6384,24 +6460,8 @@ const textMessageWithLinks = {
   type: 'message',
   payload: {
     body: {
-      text: '{{link_1}} and {{link_2}} embedded in text',
-      type: 'text',
-      variables: {
-        link_1: {
-          id: '1',
-          name: 'Link in same window',
-          newTab: false,
-          type: 'link',
-          url: 'https://google.com'
-        },
-        link_2: {
-          id: '2',
-          name: 'link in new window',
-          newTab: true,
-          type: 'link',
-          url: 'https://google.com'
-        }
-      }
+      text: '<a href="https://google.com" data-link-id="1">Link in same window</a> and <a href="https://google.com" data-link-id="2" target="_blank">link in new window</a> embedded in text',
+      type: 'text'
     },
     fromClient: false,
     fromHistory: true,
@@ -6426,17 +6486,8 @@ const textMessageWithLongLink = {
   type: 'message',
   payload: {
     body: {
-      text: 'Here is a long link {{link_1}} embedded in text',
-      type: 'text',
-      variables: {
-        link_1: {
-          id: '1',
-          name: 'click me click me please click me yoohoooo please please click me here I am click me now what are you waiting for click me now now now now now click meeeeeeeeeeeeee',
-          newTab: false,
-          type: 'link',
-          url: 'https://google.com'
-        }
-      }
+      text: 'Here is a long link <a href="https://google.com" data-link-id="1">click me click me please click me yoohoooo please please click me here I am click me now what are you waiting for click me now now now now now click meeeeeeeeeeeeee</a> embedded in text',
+      type: 'text'
     },
     fromClient: false,
     fromHistory: true,
@@ -6462,8 +6513,7 @@ const textMesageWithBullets = {
   payload: {
     body: {
       text: '<ul>\n<li>Bullets</li>\n<li>bullets</li>\n<li>bullets</li>\n</ul>\n',
-      type: 'text',
-      variables: {}
+      type: 'text'
     },
     fromClient: false,
     fromHistory: true,
@@ -6580,10 +6630,6 @@ const choicePromptMessage = {
         id: '1eff6098-f14f-4683-a2b8-30d1c573d45e',
         text: 'T-Dialog',
         type: 'choice'
-      }, {
-        id: '3555079c-6f60-45e1-82c7-5d5832634a3f',
-        text: 'Escalation - Cobrowser',
-        type: 'choice'
       }, {
         id: 'a8ba3ce8-3324-4e7a-accc-944ff78ac890',
         text: 'Customers',
@@ -6628,8 +6674,7 @@ const userMessage = {
   payload: {
     body: {
       text: 'This is what the user typed',
-      type: 'text',
-      variables: {}
+      type: 'text'
     },
     fromClient: true,
     fromHistory: true,
@@ -6646,8 +6691,7 @@ const userMessageLong = {
   payload: {
     body: {
       text: 'This is what the user typed. And sometimes the user has quite a lot to say and then we get longer lines that need to wrap well and not break the styling so here goes with just such a line right here!!',
-      type: 'text',
-      variables: {}
+      type: 'text'
     },
     fromClient: true,
     fromHistory: true,
@@ -6734,6 +6778,35 @@ const translationsSlice = {
   originalPayloadIds: [],
   containerId: (0,web_ui_namespaceObject.randomId)()
 };
+const suggestions = [{
+  id: '1',
+  question: 'Invoices',
+  categories: ['mixed', 'short']
+}, {
+  id: '2',
+  question: 'Temporary subscription pause',
+  categories: ['mixed', 'medium']
+}, {
+  id: '3',
+  question: 'Cancellation',
+  categories: ['mixed', 'short']
+}, {
+  id: '4',
+  question: 'Apps',
+  categories: ['mixed', 'medium']
+}, {
+  id: '5',
+  question: 'At what date will my subscription end?',
+  categories: ['mixed', 'long']
+}, {
+  id: 'A',
+  question: 'Quotes',
+  categories: ['short']
+}, {
+  id: 'B',
+  question: 'How to get in touch with us',
+  categories: ['long']
+}];
 const categoryKeys = {
   unstarted: 'unstarted',
   messages: 'messages',
@@ -6741,8 +6814,9 @@ const categoryKeys = {
   uploads: 'uploads',
   features: 'features',
   options: 'options',
-  faq: 'faq',
-  minimized: 'minimized',
+  suggestions: 'suggestions',
+  minimizedWindow: 'minimizedWindow',
+  minimizedInline: 'minimizedInline',
   translations: 'translations'
 };
 const categories = {
@@ -6770,14 +6844,18 @@ const categories = {
     heading: 'Options',
     description: ''
   },
-  [categoryKeys.faq]: {
-    heading: 'FAQ',
+  [categoryKeys.suggestions]: {
+    heading: 'Suggestions',
     description: ''
   },
-  [categoryKeys.minimized]: {
+  [categoryKeys.minimizedWindow]: {
     heading: 'Minimized window',
     desciption: ''
   },
+  [categoryKeys.minimizedInline]: {
+    heading: 'Minimized Inline',
+    description: ''
+  },
   [categoryKeys.translations]: {
     heading: 'Translations',
     description: ''
@@ -6850,7 +6928,7 @@ const standardState = {
     serviceInfo: {
       activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35'
     },
-    events: [participantMessage, infoMessage, shortTextMessage, states_objectSpread(states_objectSpread({}, choicePromptMessage), {}, {
+    events: [splashMessage, participantMessage, infoMessage, shortTextMessage, states_objectSpread(states_objectSpread({}, choicePromptMessage), {}, {
       payload: states_objectSpread(states_objectSpread({}, choicePromptMessage.payload), {}, {
         id: `${choicePromptMessage.payload.id}XXX`
       })
@@ -6929,8 +7007,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Long ago when a dialog started',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, participantMessage, participantMessageDefaultIcon, newTopicDivider, transcriptInfoMessage, ...[newTranslationDividerStart, newTranslationDividerStop].map(addTranslationData), infoMessage]
@@ -6974,8 +7051,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Long ago when a dialog started',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -6985,8 +7061,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Above me should be a time indicator showing the full date',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -6996,8 +7071,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Another message',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -7007,8 +7081,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'And another message',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -7018,8 +7091,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Above me should be a time indicator showing "yesterday"',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -7029,8 +7101,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Another message',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -7040,8 +7111,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'And another message',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -7051,8 +7121,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Above me should be a time indicator showing me the dialog continues today',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }]
@@ -7086,6 +7155,19 @@ const standardState = {
       }
     }]
   }),
+  suggestionsMessage: states_objectSpread(states_objectSpread({
+    category: categoryKeys.messages,
+    headingText: 'Suggestions message',
+    description: ''
+  }, baseState), {}, {
+    events: [{
+      type: 'service_data',
+      payload: {
+        type: 'suggestion',
+        body: suggestions
+      }
+    }]
+  }),
   errorWithAction: states_objectSpread(states_objectSpread({
     // Important: This cannot pick up the language files so the text is hard set here.
     category: categoryKeys.errors,
@@ -7120,16 +7202,18 @@ const standardState = {
     headingText: `Chat status bar`,
     description: ''
   }, baseState), {}, {
-    options: {
-      features: {
-        cobrowsing: {
-          enabled: true
-        }
-      },
-      userSelectedOptions: {
-        cobrowsing: true
-      }
-    }
+    translations: states_objectSpread(states_objectSpread({}, translationsSlice), {}, {
+      currentLocale: 'nl',
+      isActive: true,
+      isAvailable: true,
+      languages: [{
+        locale: 'nl',
+        nativeName: 'Dutch'
+      }, {
+        locale: 'en',
+        nativeName: 'English'
+      }]
+    })
   }),
   characterLimit: states_objectSpread(states_objectSpread({
     category: categoryKeys.features,
@@ -7322,7 +7406,7 @@ const standardState = {
   }, baseState), {}, {
     options: states_objectSpread(states_objectSpread({}, baseState.options), {}, {
       features: {
-        cobrowsing: {
+        sendTranscript: {
           enabled: true
         }
       }
@@ -7335,7 +7419,7 @@ const standardState = {
   }, baseState), {}, {
     options: states_objectSpread(states_objectSpread({}, baseState.options), {}, {
       features: {
-        cobrowsing: {
+        sendTranscript: {
           enabled: false
         }
       }
@@ -7373,63 +7457,6 @@ const standardState = {
       }
     })
   }),
-  optionCobrowseOff: states_objectSpread(states_objectSpread({
-    category: categoryKeys.options,
-    headingText: 'Cobrowse option off',
-    description: ''
-  }, baseState), {}, {
-    options: states_objectSpread(states_objectSpread({}, baseState.options), {}, {
-      optionActive: 'cobrowsing',
-      panelActive: true,
-      features: {
-        cobrowsing: {
-          enabled: true
-        },
-        sendTranscript: {
-          enabled: true
-        }
-      }
-    })
-  }),
-  optionCobrowseOn: states_objectSpread(states_objectSpread({
-    category: categoryKeys.options,
-    headingText: 'Cobrowse option on',
-    description: ''
-  }, baseState), {}, {
-    options: states_objectSpread(states_objectSpread({}, baseState.options), {}, {
-      optionActive: 'cobrowsing',
-      panelActive: true,
-      userSelectedOptions: {
-        cobrowsing: true
-      },
-      features: {
-        cobrowsing: {
-          enabled: true
-        },
-        sendTranscript: {
-          enabled: true
-        }
-      }
-    })
-  }),
-  optionCobrowseUnavailable: states_objectSpread(states_objectSpread({
-    category: categoryKeys.options,
-    headingText: 'Cobrowse option unavailable',
-    description: ''
-  }, baseState), {}, {
-    options: states_objectSpread(states_objectSpread({}, baseState.options), {}, {
-      optionActive: 'cobrowsing',
-      panelActive: true,
-      features: {
-        cobrowsing: {
-          enabled: false
-        },
-        sendTranscript: {
-          enabled: true
-        }
-      }
-    })
-  }),
   optionSendTranscript: states_objectSpread(states_objectSpread({
     category: categoryKeys.options,
     headingText: 'Send transcript option',
@@ -7439,149 +7466,12 @@ const standardState = {
       optionActive: 'sendTranscript',
       panelActive: true,
       features: {
-        cobrowsing: {
-          enabled: true
-        },
         sendTranscript: {
           enabled: true
         }
       }
     })
   }),
-  faqEmptyList: states_objectSpread(states_objectSpread({
-    category: categoryKeys.faq,
-    headingText: 'Empty FAQ list',
-    description: ''
-  }, baseState), {}, {
-    config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
-      showFaq: true
-    }),
-    serviceData: {
-      suggestion: {
-        body: []
-      }
-    }
-  }),
-  faqList: states_objectSpread(states_objectSpread({
-    category: categoryKeys.faq,
-    headingText: 'FAQ list',
-    description: ''
-  }, baseState), {}, {
-    config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
-      showFaq: true
-    }),
-    serviceData: {
-      suggestion: {
-        body: [{
-          id: 1,
-          question: 'Lorem ipsum dolor sit amet',
-          categories: ['short']
-        }, {
-          id: 2,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-          categories: ['short']
-        }, {
-          id: 3,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
-          categories: ['short']
-        }]
-      }
-    }
-  }),
-  faqListLong: states_objectSpread(states_objectSpread({
-    category: categoryKeys.faq,
-    headingText: 'Long FAQ list',
-    description: ''
-  }, baseState), {}, {
-    config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
-      showFaq: true
-    }),
-    serviceData: {
-      suggestion: {
-        body: [{
-          id: 1,
-          question: 'Lorem ipsum dolor sit amet',
-          categories: ['long']
-        }, {
-          id: 2,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-          categories: ['long']
-        }, {
-          id: 3,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
-          categories: ['long']
-        }, {
-          id: 4,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed',
-          categories: ['long']
-        }, {
-          id: 5,
-          question: 'Lorem ipsum dolor sit amet',
-          categories: ['long']
-        }, {
-          id: 6,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-          categories: ['long']
-        }, {
-          id: 7,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
-          categories: ['long']
-        }, {
-          id: 8,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed',
-          categories: ['long']
-        }, {
-          id: 9,
-          question: 'Lorem ipsum dolor sit amet',
-          categories: ['long']
-        }, {
-          id: 10,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-          categories: ['long']
-        }, {
-          id: 11,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
-          categories: ['long']
-        }, {
-          id: 12,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed',
-          categories: ['long']
-        }, {
-          id: 13,
-          question: 'Lorem ipsum dolor sit amet',
-          categories: ['long']
-        }, {
-          id: 14,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-          categories: ['long']
-        }, {
-          id: 15,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
-          categories: ['long']
-        }, {
-          id: 16,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed',
-          categories: ['long']
-        }, {
-          id: 17,
-          question: 'Lorem ipsum dolor sit amet',
-          categories: ['long']
-        }, {
-          id: 18,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-          categories: ['long']
-        }, {
-          id: 19,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
-          categories: ['long']
-        }, {
-          id: 20,
-          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed',
-          categories: ['long']
-        }]
-      }
-    }
-  }),
   translationsAvailable: states_objectSpread(states_objectSpread({
     category: categoryKeys.translations,
     headingText: 'Show translations available',
@@ -7605,9 +7495,6 @@ const standardState = {
   }, baseState), {}, {
     options: states_objectSpread(states_objectSpread({}, baseState.options), {}, {
       features: {
-        cobrowsing: {
-          enabled: true
-        },
         sendTranscript: {
           enabled: true
         }
@@ -7670,6 +7557,73 @@ const standardState = {
     })
   })
 };
+const inlineInterface = {
+  minimizedInline: {
+    category: categoryKeys.minimizedInline,
+    headingText: 'Inline minimized',
+    description: '',
+    inline: states_objectSpread(states_objectSpread({}, baseState), {}, {
+      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
+        layoutMode: 'inline'
+      }),
+      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
+        visibility: web_ui_namespaceObject.visibilityStates.minimized
+      })
+    })
+  },
+  minimizedInlinePrechat: {
+    category: categoryKeys.minimizedInline,
+    headingText: 'Inline minimized with pre-chat messages',
+    description: '',
+    inline: states_objectSpread(states_objectSpread({}, baseState), {}, {
+      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
+        layoutMode: 'inline',
+        preChatEvents: [splashMessage]
+      }),
+      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
+        visibility: web_ui_namespaceObject.visibilityStates.minimized
+      })
+    })
+  },
+  minimizedInlinePrechatSuggestions: {
+    category: categoryKeys.minimizedInline,
+    headingText: 'Inline minimized with pre-chat messages & suggestions',
+    description: '',
+    inline: states_objectSpread(states_objectSpread({}, baseState), {}, {
+      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
+        layoutMode: 'inline',
+        preChatEvents: [splashMessage]
+      }),
+      serviceData: {
+        suggestion: {
+          body: suggestions
+        }
+      },
+      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
+        visibility: web_ui_namespaceObject.visibilityStates.minimized
+      })
+    })
+  },
+  inlineWithSuggestions: {
+    category: categoryKeys.suggestions,
+    headingText: 'Suggestions',
+    description: '',
+    inline: states_objectSpread(states_objectSpread({}, baseState), {}, {
+      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
+        layoutMode: 'inline',
+        showFaq: true
+      }),
+      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
+        visibility: web_ui_namespaceObject.visibilityStates.open
+      }),
+      serviceData: {
+        suggestion: {
+          body: suggestions
+        }
+      }
+    })
+  }
+};
 
 const buildStandardState = (layoutModes, customComponentEventBodies = []) => {
   const intermediateState = states_objectSpread(states_objectSpread({}, standardState), customComponentEventBodies.reduce((acc, eventBody) => {
@@ -7716,9 +7670,9 @@ const buildStandardState = (layoutModes, customComponentEventBodies = []) => {
   }, {});
 };
 
-const getStateObj = (layoutModes, customComponentEventBodies) => states_objectSpread(states_objectSpread({}, buildStandardState(layoutModes, customComponentEventBodies)), layoutModes.indexOf('window') !== -1 ? {
-  minimized: {
-    category: categoryKeys.minimized,
+const getStateObj = (layoutModes, customComponentEventBodies) => states_objectSpread(states_objectSpread(states_objectSpread({}, buildStandardState(layoutModes, customComponentEventBodies)), layoutModes.indexOf('window') !== -1 ? {
+  minimizedWindow: {
+    category: categoryKeys.minimizedWindow,
     headingText: 'Unstarted minimized',
     description: '',
     window: states_objectSpread(states_objectSpread({}, baseState), {}, {
@@ -7730,8 +7684,8 @@ const getStateObj = (layoutModes, customComponentEventBodies) => states_objectSp
       })
     })
   },
-  minimizedStarted: {
-    category: categoryKeys.minimized,
+  minimizedWindowStarted: {
+    category: categoryKeys.minimizedWindow,
     headingText: 'Started minimized',
     description: '',
     window: states_objectSpread(states_objectSpread({}, baseState), {}, {
@@ -7745,8 +7699,8 @@ const getStateObj = (layoutModes, customComponentEventBodies) => states_objectSp
       headerTitles
     })
   },
-  minimizedStartedUnread: {
-    category: categoryKeys.minimized,
+  minimizedWindowStartedUnread: {
+    category: categoryKeys.minimizedWindow,
     headingText: 'Minimized with unread messages',
     description: '',
     window: states_objectSpread(states_objectSpread({}, baseState), {}, {
@@ -7760,8 +7714,24 @@ const getStateObj = (layoutModes, customComponentEventBodies) => states_objectSp
       headerTitles,
       unreadEvents: 12
     })
+  },
+  minimizedWindowPrechat: {
+    category: categoryKeys.minimizedWindow,
+    headingText: 'Minimized with pre-chat messages',
+    description: '',
+    window: states_objectSpread(states_objectSpread({}, baseState), {}, {
+      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
+        layoutMode: 'window',
+        preChatEvents: [splashMessage]
+      }),
+      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
+        visibility: web_ui_namespaceObject.visibilityStates.minimized
+      }),
+      participantInfo,
+      headerTitles
+    })
   }
-} : {});
+} : {}), inlineInterface);
 ;// CONCATENATED MODULE: ./src/javascripts/style-guide/components/links.js
 const links_excluded = ["headingText", "descriptionId", "description"];
 
@@ -7906,7 +7876,7 @@ const StyleGuideApp = ({
     customMessageEventBodies
   } = styleGuideConfig;
   const [mainState] = (0,hooks_namespaceObject.useState)(() => {
-    const mainStateObj = getStateObj(styleGuideConfig.showLayoutModes || ['inline', 'window', 'modal'], customMessageEventBodies);
+    const mainStateObj = getStateObj(styleGuideConfig.showLayoutModes || ['inline', 'window'], customMessageEventBodies);
     return Object.keys(mainStateObj).reduce((acc, key) => app_objectSpread(app_objectSpread({}, acc), {}, {
       [key]: app_objectSpread(app_objectSpread({}, mainStateObj[key]), {}, {
         descriptionId: (0,web_ui_namespaceObject.randomId)()