@seamly/web-ui 18.3.0-beta.1 → 19.0.0-beta.2

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

@@ -4,18 +4,6 @@
 /******/ 	var __webpack_require__ = {};
 /******/ 	
 /************************************************************************/
-/******/ 	/* webpack/runtime/compat get default export */
-/******/ 	(() => {
-/******/ 		// getDefaultExport function for compatibility with non-harmony modules
-/******/ 		__webpack_require__.n = (module) => {
-/******/ 			var getter = module && module.__esModule ?
-/******/ 				() => (module['default']) :
-/******/ 				() => (module);
-/******/ 			__webpack_require__.d(getter, { a: getter });
-/******/ 			return getter;
-/******/ 		};
-/******/ 	})();
-/******/ 	
 /******/ 	/* webpack/runtime/define property getters */
 /******/ 	(() => {
 /******/ 		// define getter functions for harmony exports
@@ -58,9 +46,6 @@ __webpack_require__.d(__webpack_exports__, {
 const web_ui_namespaceObject = require("@seamly/web-ui");
 ;// CONCATENATED MODULE: external "preact"
 const external_preact_namespaceObject = require("preact");
-;// CONCATENATED MODULE: external "@seamly/web-ui/translations/en"
-const en_namespaceObject = require("@seamly/web-ui/translations/en");
-var en_default = /*#__PURE__*/__webpack_require__.n(en_namespaceObject);
 ;// CONCATENATED MODULE: external "preact/hooks"
 const hooks_namespaceObject = require("preact/hooks");
 ;// CONCATENATED MODULE: ./src/javascripts/lib/id.js
@@ -246,15 +231,14 @@ const getRelativeDate = (date, currentDate) => {
     return date;
   }
 };
-const flattenObject = (obj, prefix = '') => Object.keys(obj).reduce((acc, k) => {
-  const pre = prefix.length ? `${prefix}.` : '';
-  if (typeof obj[k] === 'object' && obj[k] !== null && Object.keys(obj[k]).length > 0) Object.assign(acc, flattenObject(obj[k], pre + k));else acc[pre + k] = obj[k];
-  return acc;
-}, {});
 const pick = (obj, keys) => keys.reduce((accum, key) => {
   if (key in obj) accum[key] = obj[key];
   return accum;
 }, {});
+const omit = (obj, keys) => Object.keys(obj).reduce((accum, key) => {
+  if (!keys.includes(key)) accum[key] = obj[key];
+  return accum;
+}, {});
 ;// CONCATENATED MODULE: ./src/javascripts/ui/utils/seamly-utils.js
 function seamly_utils_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; }
 
@@ -1165,13 +1149,6 @@ function createThunk(type, thunkCreator) {
 
   return fn;
 }
-function createDomain(domain) {
-  return {
-    createAction: prefixType(domain, createAction, DOMAIN_DELIMITER),
-    createActions: prefixType(domain, createActions, DOMAIN_DELIMITER),
-    createThunk: prefixType(domain, createThunk, DOMAIN_DELIMITER)
-  };
-}
 function createReducer(domain, handlers = {}, defaultState) {
   const reducer = (state, action) => {
     if (state === undefined) {
@@ -1187,12 +1164,44 @@ function createReducer(domain, handlers = {}, defaultState) {
 
   return reducer;
 }
-;// CONCATENATED MODULE: ./src/javascripts/domains/forms/actions.js
+function createDomain(domain) {
+  return {
+    createAction: prefixType(domain, createAction, DOMAIN_DELIMITER),
+    createActions: prefixType(domain, createActions, DOMAIN_DELIMITER),
+    createThunk: prefixType(domain, createThunk, DOMAIN_DELIMITER),
+    createReducer: (handlers, defaultState) => createReducer(domain, handlers, defaultState),
+    selectState: state => state[domain]
+  };
+}
+;// CONCATENATED MODULE: ./src/javascripts/domains/forms/utils.js
 
 const {
-  createActions: actions_createActions
+  createActions: utils_createActions,
+  createReducer: utils_createReducer,
+  selectState
 } = createDomain('forms');
-const [registerForm, deregisterForm] = actions_createActions('form', {
+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];
+    }
+
+    for (let i = 0; i < ((_validations = validations) === null || _validations === void 0 ? void 0 : _validations.length) ?? 0; i++) {
+      var _validations;
+
+      if (!validations[i].fn(values[key], validations[i].compareValue)) {
+        errors[key] = validations[i].errorText;
+        break;
+      }
+    }
+
+    return errors;
+  }, {});
+}
+;// CONCATENATED MODULE: ./src/javascripts/domains/forms/actions.js
+
+const [registerForm, deregisterForm] = utils_createActions('form', {
   register: (formId, persistData) => ({
     formId,
     persistData
@@ -1201,7 +1210,7 @@ const [registerForm, deregisterForm] = actions_createActions('form', {
     formId
   })
 });
-const [registerControl, deregisterControl, updateControlValue, updateControlTouched] = actions_createActions('control', {
+const [registerControl, deregisterControl, updateControlValue, updateControlTouched] = utils_createActions('control', {
   register: (formId, name) => ({
     formId,
     name
@@ -1355,121 +1364,11 @@ const arrayContentEquals = (a, b) => {
   return a.every((value, idx) => b[idx] === value);
 };
 const getPropSelector = (propName, orDefault) => (_, props) => props[propName] || orDefault;
-;// 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; }
-
-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 reducer_initialState = {};
-const initialFormState = {
-  controls: {}
-};
-const initialControlState = {
-  value: '',
-  touched: false
-};
-
-function updateFormControl(state, formId, name, controlState) {
-  var _state$formId;
-
-  const currentControlState = ((_state$formId = state[formId]) === null || _state$formId === void 0 ? void 0 : _state$formId.controls[name]) || initialControlState;
-  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)
-      })
-    })
-  });
-}
-
-/* harmony default export */ const reducer = (createReducer('form', {
-  // Form handlers
-  [registerForm]: (state, {
-    formId,
-    persistData
-  }) => {
-    var _state$formId2;
-
-    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);
-
-    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];
-
-    if (!form) {
-      return state;
-    }
-
-    if (form.persistData) {
-      return state;
-    }
-
-    const controls = reducer_objectSpread({}, form.controls);
-
-    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
-    });
-  }
-}, reducer_initialState));
 ;// CONCATENATED MODULE: ./src/javascripts/domains/forms/selectors.js
 
 
 
-const getState = state => state[String(reducer)];
+const getState = 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 => {
@@ -1531,6 +1430,7 @@ function hooks_useSelector(selector, deps = []) {
   const valueRef = useRef(); // instead of accepting a stabilized selector, we stick to the signature
   // of useCallback, as that makes the exposed api much more dev-friendly
   // otherwise you'd have to stabilize selectors externally
+  // eslint-disable-next-line react-hooks/exhaustive-deps
 
   const selectorCb = useCallback(selector, deps); // we're keeping the selector in a ref to compare against
   // we need this both in the store subscription and for
@@ -1780,6 +1680,114 @@ function provider_FormProvider(_ref) {
     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; }
+
+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 reducer_initialState = {};
+const initialFormState = {
+  controls: {}
+};
+const initialControlState = {
+  value: '',
+  touched: false
+};
+
+function updateFormControl(state, formId, name, controlState) {
+  var _state$formId;
+
+  const currentControlState = ((_state$formId = state[formId]) === null || _state$formId === void 0 ? void 0 : _state$formId.controls[name]) || initialControlState;
+  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)
+      })
+    })
+  });
+}
+
+/* harmony default export */ const reducer = (utils_createReducer({
+  // Form handlers
+  [registerForm]: (state, {
+    formId,
+    persistData
+  }) => {
+    const formState = persistData ? state[formId] ?? 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);
+
+    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];
+
+    if (!form) {
+      return state;
+    }
+
+    if (form.persistData) {
+      return state;
+    }
+
+    const controls = reducer_objectSpread({}, form.controls);
+
+    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
+    });
+  }
+}, reducer_initialState));
 ;// CONCATENATED MODULE: ./src/javascripts/domains/forms/index.js
 
 
@@ -1787,18 +1795,22 @@ function provider_FormProvider(_ref) {
 
 
 
-;// CONCATENATED MODULE: ./src/javascripts/domains/translations/actions.js
+;// CONCATENATED MODULE: ./src/javascripts/domains/translations/utils.js
 
 const {
-  createActions: translations_actions_createActions
+  createActions: translations_utils_createActions,
+  createReducer: translations_utils_createReducer,
+  selectState: utils_selectState
 } = createDomain('translations');
-const [enable, disable] = translations_actions_createActions('translate', {
+;// CONCATENATED MODULE: ./src/javascripts/domains/translations/actions.js
+
+const [enable, disable] = translations_utils_createActions('translate', {
   enable: locale => ({
     locale
   }),
   disable: () => ({})
 });
-const [enableEvent, disableEvent] = translations_actions_createActions('event', {
+const [enableEvent, disableEvent] = translations_utils_createActions('event', {
   enable: payloadId => ({
     payloadId
   }),
@@ -1806,96 +1818,14 @@ const [enableEvent, disableEvent] = translations_actions_createActions('event',
     payloadId
   })
 });
-;// CONCATENATED MODULE: ./src/javascripts/domains/translations/reducer.js
-function translations_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/domains/translations/selectors.js
 
-function translations_reducer_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { translations_reducer_ownKeys(Object(source), true).forEach(function (key) { translations_reducer_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { translations_reducer_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function translations_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 translations_reducer_initialState = {
-  isActive: false,
-  currentLocale: undefined,
-  isAvailable: false,
-  languages: [],
-  originalPayloadIds: [],
-  containerId: id_randomId()
-};
-/* harmony default export */ const translations_reducer = (createReducer('translations', {
-  [seamly_utils_seamlyActions.SET_FEATURES]: (state, action) => {
-    var _action$features;
-
-    const feature = action === null || action === void 0 ? void 0 : (_action$features = action.features) === null || _action$features === void 0 ? void 0 : _action$features.translation;
-
-    if (!feature) {
-      return state;
-    }
-
-    return translations_reducer_objectSpread(translations_reducer_objectSpread({}, state), {}, {
-      isAvailable: feature.enabled === true,
-      languages: feature.languages || []
-    });
-  },
-  [seamly_utils_seamlyActions.SET_HISTORY]: (state, {
-    history
-  }) => {
-    var _history$translation, _history$translation2;
-
-    return translations_reducer_objectSpread(translations_reducer_objectSpread({}, state), {}, {
-      isActive: history === null || history === void 0 ? void 0 : (_history$translation = history.translation) === null || _history$translation === void 0 ? void 0 : _history$translation.enabled,
-      currentLocale: history === null || history === void 0 ? void 0 : (_history$translation2 = history.translation) === null || _history$translation2 === void 0 ? void 0 : _history$translation2.locale
-    });
-  },
-  [seamly_utils_seamlyActions.CLEAR_FEATURES]: () => translations_reducer_initialState,
-  [enable]: (state, {
-    locale
-  }) => {
-    return translations_reducer_objectSpread(translations_reducer_objectSpread({}, state), {}, {
-      isActive: true,
-      currentLocale: locale
-    });
-  },
-  [disable]: state => {
-    return translations_reducer_objectSpread(translations_reducer_objectSpread({}, state), {}, {
-      isActive: false,
-      currentLocale: undefined
-    });
-  },
-  [enableEvent]: (state, {
-    payloadId
-  }) => {
-    if (!state.originalPayloadIds.includes(payloadId)) {
-      return state;
-    }
-
-    return translations_reducer_objectSpread(translations_reducer_objectSpread({}, state), {}, {
-      originalPayloadIds: state.originalPayloadIds.filter(id => id !== payloadId)
-    });
-  },
-  [disableEvent]: (state, {
-    payloadId
-  }) => {
-    if (state.originalPayloadIds.includes(payloadId)) {
-      return state;
-    }
-
-    return translations_reducer_objectSpread(translations_reducer_objectSpread({}, state), {}, {
-      originalPayloadIds: [...state.originalPayloadIds, payloadId]
-    });
-  }
-}, translations_reducer_initialState));
-;// CONCATENATED MODULE: ./src/javascripts/domains/translations/selectors.js
-
-
-
-const selectors_getState = state => state[String(translations_reducer)];
-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
+const selectors_getState = 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
 
 const seamly_api_context_SeamlyApiContext = (0,external_preact_namespaceObject.createContext)(null);
 const seamly_api_context_SeamlyEventBusContext = (0,external_preact_namespaceObject.createContext)('');
@@ -1922,23 +1852,81 @@ const seamly_api_hooks_useSeamlyHasConversation = () => {
   const url = useSeamlyConversationUrl();
   return !!url;
 };
-const seamly_api_hooks_useSeamlyHasUserResponded = () => {
-  const {
-    get
-  } = seamly_api_hooks_useSeamlyObjectStore();
-  return get ? !!get('userResponded') : false;
-};
-;// CONCATENATED MODULE: ./src/javascripts/domains/config/actions.js
+;// CONCATENATED MODULE: ./src/javascripts/domains/config/utils.js
 
 const {
-  createAction: actions_createAction
+  createAction: utils_createAction,
+  createThunk: utils_createThunk,
+  createReducer: config_utils_createReducer,
+  selectState: config_utils_selectState
 } = createDomain('config');
-const initialize = actions_createAction('initialize', config => ({
+;// CONCATENATED MODULE: ./src/javascripts/domains/config/actions.js
+
+const initialize = utils_createAction('initialize', config => ({
   config
 }));
-const update = actions_createAction('update', config => ({
+const update = utils_createAction('update', config => ({
   config
 }));
+;// CONCATENATED MODULE: ./src/javascripts/domains/config/selectors.js
+function selectors_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 selectors_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { selectors_ownKeys(Object(source), true).forEach(function (key) { selectors_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { selectors_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function selectors_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 selectConfig = createSelector(config_utils_selectState, config => {
+  let newConfig = selectors_objectSpread({
+    visible: (config === null || config === void 0 ? void 0 : config.layoutMode) === 'inline' ? seamly_utils_visibilityStates.open : seamly_utils_visibilityStates.minimized,
+    appContainerClassNames: config.appContainerClassNames || []
+  }, config);
+
+  if (typeof newConfig.appContainerClassNames === 'function') {
+    newConfig = selectors_objectSpread(selectors_objectSpread({}, newConfig), {}, {
+      appContainerClassNames: newConfig.appContainerClassNames(newConfig)
+    });
+  }
+
+  return newConfig;
+});
+
+;// CONCATENATED MODULE: ./src/javascripts/domains/config/hooks.js
+
+
+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';
@@ -1951,7 +1939,9 @@ const config_screenReaderDebounceDelaySeconds = 10;
 const activitySendDelay = 15000;
 const maxCharacterWarningLimit = 50;
 const maxCharacterSrDebounceDelay = 300;
-const config_defaultTransitionTimeMs = 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',
@@ -1973,14 +1963,10 @@ const defaultConfig = {
 
     }
   },
-  typing: {
-    timeout: 2000 // How long to wait before we decide the user isn't typing
-
-  },
   appContainerClassNames: config => [`app--layout-${config.layoutMode}`, `namespace--${config.namespace}`]
 };
 ;// CONCATENATED MODULE: ./src/javascripts/domains/config/reducer.js
-const reducer_excluded = ["messages", "typing"];
+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; }
 
@@ -2005,15 +1991,14 @@ const config_reducer_initialState = config_reducer_objectSpread(config_reducer_o
   defaults: {}
 });
 
-const configKeys = ['hideOnNoUserResponse', 'showDisclaimer', 'showFaq', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'typing', 'visible', 'visibilityCallback'];
+const configKeys = ['hideOnNoUserResponse', 'showDisclaimer', 'showFaq', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'visible', 'visibilityCallback'];
 
 const updateState = (state, {
   config
 }) => {
   const _pick = pick(config, configKeys),
         {
-    messages,
-    typing
+    messages
   } = _pick,
         partialConfig = reducer_objectWithoutProperties(_pick, reducer_excluded);
 
@@ -2029,16 +2014,10 @@ const updateState = (state, {
     });
   }
 
-  if (typing) {
-    newState = config_reducer_objectSpread(config_reducer_objectSpread({}, newState), {}, {
-      typing: config_reducer_objectSpread(config_reducer_objectSpread({}, newState.typing), typing)
-    });
-  }
-
   return newState;
 };
 
-/* harmony default export */ const config_reducer = (createReducer('config', {
+/* harmony default export */ const config_reducer = (config_utils_createReducer({
   [initialize]: (state, action) => {
     return updateState(state, action);
   },
@@ -2046,448 +2025,80 @@ const updateState = (state, {
     return updateState(state, action);
   }
 }, config_reducer_initialState));
-;// CONCATENATED MODULE: ./src/javascripts/domains/config/selectors.js
-function selectors_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 selectors_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { selectors_ownKeys(Object(source), true).forEach(function (key) { selectors_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { selectors_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function selectors_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/config/index.js
 
-const selectState = state => state[String(config_reducer)];
-const selectConfig = createSelector(selectState, config => {
-  let newConfig = selectors_objectSpread({
-    visible: (config === null || config === void 0 ? void 0 : config.layoutMode) === 'inline' ? seamly_utils_visibilityStates.open : seamly_utils_visibilityStates.minimized,
-    appContainerClassNames: config.appContainerClassNames || []
-  }, config);
 
-  if (typeof newConfig.appContainerClassNames === 'function') {
-    newConfig = selectors_objectSpread(selectors_objectSpread({}, newConfig), {}, {
-      appContainerClassNames: newConfig.appContainerClassNames(newConfig)
-    });
-  }
 
-  return newConfig;
-});
-;// CONCATENATED MODULE: ./src/javascripts/domains/config/hooks.js
 
 
-function hooks_useConfig() {
-  return useSelector(Selectors.selectConfig);
-}
-;// CONCATENATED MODULE: ./translations/en.js
-// Please note: All texts containing the string 'srText' are short for
-// Screen Reader Text. These texts are invisible on screen but broadcast
-// to screen readers. Avoid undue verbosity, but ensure that a user who cannot
-// see the screen will get both the message content as well as the context
-// in which the message occurred if not already clear from the current
-// position of the keyboard focus.
-// Example: An error occurs in the chat window and this error has an 'srText'
-// entry. Because the error could occur while the user is NOT chatting in the window,
-// add context such as "Something went wrong with the chat session" as just saying
-// "Something went wrong" would not be clear enough for users who cannot see the
-// source of the error on screen.
-/* harmony default export */ const en = ({
-  'carousel.controls.next': 'Next',
-  'carousel.controls.previous': 'Previous',
-  'carousel.slide.label': ({
-    index,
-    total
-  }) => `${index} of ${total}`,
-  'dateTime.srText': ({
-    date,
-    time
-  }) => `Messages starting ${date} at ${time}:`,
-  'dateTime.today': 'Today',
-  'dateTime.yesterday': 'Yesterday',
-  'disclaimer.content': 'This chat session will be saved to help us improve our service delivery.',
-  'disclaimer.title': 'Privacy disclaimer',
-  'dividerKeys.newTopic': 'New topic started.',
-  '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',
-  'faq.headingText': 'Suggested topics',
-  'faq.srAvailableText': 'Suggested topics are available in the chat.',
-  'faq.srUnavailableText': 'Suggested topics are no longer available in the chat.',
-  'faq.srUpdatedText': 'There are new suggested topics in the chat.',
-  'fileUpload.cancelButtonText': 'Cancel upload',
-  'fileUpload.contentHint': size => `Select a file of maximum ${size}`,
-  'fileUpload.errors.general': 'Something went wrong with the upload. Please cancel the upload and try again.',
-  'fileUpload.errors.noFile': 'Please select a file to upload',
-  'fileUpload.errors.tooLarge': 'The selected file is too large, please upload a smaller file',
-  'fileUpload.errors.unavailable': 'Uploading files is no longer possible. Please cancel the upload and try again later.',
-  'fileUpload.errors.virusFound': 'The selected file is unsafe, please upload a different file.',
-  'fileUpload.errors.wrongType': 'The selected file type is not supported. Please cancel the upload and upload a different file.',
-  'fileUpload.fileUnavailableText': 'This download link has expired',
-  'fileUpload.labelText': 'Select file',
-  'fileUpload.selectedText': fileName => {
-    if (fileName) {
-      return fileName;
-    } else {
-      return 'No file selected';
-    }
-  },
-  'fileUpload.srAvailableText': 'File uploads are now available in the chat.',
-  'fileUpload.srCompleteText': 'Upload complete.',
-  'fileUpload.srFileDownloadText': fileName => `Download file ${fileName}.`,
-  'fileUpload.srFileUploadedText': fileName => `Uploaded file ${fileName}.`,
-  'fileUpload.srProgressLabel': fileName => `${fileName} upload progress status`,
-  'fileUpload.srStartedText': 'Upload started.',
-  'fileUpload.srUnavailableText': 'File uploads in the chat are no longer available.',
-  'fileUpload.toggleButtonText': 'Upload files',
-  'fileUpload.uploadButtonText': 'Upload file',
-  'header.collapseApp': 'collapse chat',
-  'header.title': 'You\'re talking to',
-  'idleDetachWarning.continueButton': 'Continue conversation',
-  'idleDetachWarning.countdownText': 'Your conversation will automatically end in:',
-  'idleDetachWarning.countdownTimer': ({
-    minutes,
-    seconds
-  }) => {
-    switch (minutes) {
-      case 1:
-        switch (seconds) {
-          case 1:
-            return '1 minute, 1 second';
 
-          case 0:
-            return '1 minute';
+;// 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; }
 
-          default:
-            return `1 minute, ${seconds} seconds`;
-        }
+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; }
 
-      case 0:
-        switch (seconds) {
-          case 1:
-            return '1 second';
+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; }
 
-          case 0:
-          default:
-            return `${seconds} seconds`;
-        }
 
-      default:
-        switch (seconds) {
-          case 1:
-            return `${minutes} minutes, 1 second`;
 
-          case 0:
-            return `${minutes} minutes`;
 
-          default:
-            return `${minutes} minutes, ${seconds} seconds`;
-        }
 
-    }
-  },
-  'idleDetachWarning.countdownTitle': 'Are you still there?',
-  'idleDetachWarning.detachButton': 'End conversation',
-  'idleDetachWarning.notifyTransferText': 'Your conversation is being ended.',
-  'idleDetachWarning.srCountDownStoppedText': 'Automatic conversation ending prevented. Welcome back.',
-  'info.cobrowsing.cobrowsingEnded': 'Screen sharing has ended',
-  'info.cobrowsing.cobrowsingStarted': 'Screen sharing is now enabled. The agent can see the page you\'re currently on',
-  'info.sendTranscript.accepted': ({
-    emailAddress
-  }) => `A transcript will be sent to ${emailAddress}`,
-  'input.inputLabel': limit => {
-    if (limit) {
-      return `Your message (max. ${limit} characters)`;
-    }
+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;
 
-    return 'Your message';
-  },
-  'input.inputPlaceholder': limit => {
-    if (limit) {
-      return `Your message (max. ${limit} characters)`;
-    }
+  const {
+    enabled,
+    threshold
+  } = (config === null || config === void 0 ? void 0 : (_config$messages = config.messages) === null || _config$messages === void 0 ? void 0 : _config$messages.timeIndicator) ?? {};
 
-    return 'Your message';
-  },
-  'input.sendMessage': 'Send',
-  'input.srCharacterLimitText': limit => {
-    switch (limit) {
-      case 1:
-        return '1 character remaining.';
-
-      case 0:
-      default:
-        return `${limit} characters remaining.`;
-    }
-  },
-  'lightbox.closeLabel': 'Close',
-  'lightbox.heading': 'Enlarged chat image',
-  'message.choicePrompts.cancelChooseAgain': 'Cancel choice change',
-  'message.choicePrompts.chooseAgain': 'Change your choice',
-  'message.image.srTextEnlargeButtonLabel': ({
-    description
-  }) => `Enlarge ${description}`,
-  'message.srNewEventCount': ({
-    newCount
-  }) => {
-    switch (newCount) {
-      case 1:
-        return `There is 1 new chat message.`;
+  if (!enabled) {
+    return events;
+  }
 
-      case 0:
-      default:
-        return `There are ${newCount} new chat messages.`;
+  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
+      }));
     }
-  },
-  'message.srTextUnreadCount': ({
-    unreadCount
-  }) => {
-    switch (unreadCount) {
-      case 1:
-        return `There is 1 new unread chat message.`;
 
-      case 0:
-      default:
-        return `There are ${unreadCount} new unread chat messages.`;
-    }
-  },
-  'options.cancelButtonText': 'Cancel',
-  'options.cobrowsing.cobrowsingActiveText': 'Sharing screen',
-  'options.cobrowsing.cobrowsingUnavailable': 'Screen sharing is currently unavailable.',
-  'options.cobrowsing.description': 'This allows the agent to see the page you\'re currently on. Nothing else is shared.',
-  'options.cobrowsing.labelTurnOff': 'Turn screen sharing off',
-  'options.cobrowsing.labelTurnOn': 'Turn screen sharing on',
-  'options.cobrowsing.menuTitle': 'Screen sharing',
-  'options.cobrowsing.srCobrowsingAvailable': 'Screen sharing is now available.',
-  'options.cobrowsing.srStartedCobrowsingText': 'Screen sharing has been started.',
-  'options.cobrowsing.srStopCobrowsingText': 'Stop screen sharing',
-  'options.cobrowsing.srStoppedCobrowsingText': 'Screen sharing has been stopped.',
-  'options.cobrowsing.stopCobrowsingText': 'Stop',
-  'options.cobrowsing.title': 'Share my screen',
-  'options.openButtonText': 'Options',
-  'options.saveButtonText': 'Save',
-  'options.sendTranscript.description': 'Enter the email address you would like to send the chat transcript to.',
-  'options.sendTranscript.invalidEmailText': 'Please enter a valid email address',
-  'options.sendTranscript.label': 'Email address',
-  'options.sendTranscript.menuTitle': 'Send transcript',
-  'options.sendTranscript.noEmailText': 'Please enter an email address',
-  'options.sendTranscript.sendButtonText': 'Send',
-  'options.sendTranscript.title': 'Send chat transcript',
-  'options.unavailableText': 'unavailable',
-  'resumeConversationPrompt.continueButton': 'Resume conversation',
-  'resumeConversationPrompt.detachButton': 'Ask new question',
-  'resumeConversationPrompt.title': name => `Would you like to continue the conversation with ${name}?`,
-  skiplinkText: 'Skip to chat input',
-  'toggleButton.resumeTitle': 'Resume chat with',
-  'toggleButton.subtitle': 'Start a chat with us',
-  'toggleButton.title': 'Have a question?',
-  'translations.divider.restartButtonText': 'Start again',
-  'translations.divider.startText': language => `Translating to ${language}`,
-  'translations.divider.stopText': language => `Translating to ${language} ended`,
-  'translations.settings.cancelButtonText': 'Cancel',
-  'translations.settings.currentTranslationLabel': 'Currently translating to',
-  'translations.settings.defaultOptionLabel': 'Choose language',
-  'translations.settings.description': 'Automatic translations might contain errors.',
-  'translations.settings.endButtonText': 'Stop translating',
-  'translations.settings.inputLabel': 'Translate chat to',
-  'translations.settings.noLocaleText': 'Choose a language to translate to',
-  'translations.settings.openButtonText': 'Translation',
-  'translations.settings.startButtonText': 'Start translating',
-  'translations.settings.title': 'Translation',
-  'translations.status.label': language => `Translating to ${language}`,
-  'translations.status.srStopText': 'Stop translating',
-  'translations.status.stopText': 'Stop',
-  'translations.toggle.hideButtonText': 'Show original',
-  'translations.toggle.showButtonText': 'Show translation',
-  'window.srModalLayoutLabel': 'Chat window',
-  'window.srTexts.onClose': 'The chat is closed.',
-  'window.srTexts.onHistoryLoad': 'Chat history has been loaded.',
-  'window.srTexts.onLoad': 'Chat is available on this page.',
-  'window.srTexts.onOpen': 'The chat is opened.'
+    previousEvent = event;
+  });
+  return mappedEvents;
 });
-;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/index.js
-function i18n_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_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { i18n_ownKeys(Object(source), true).forEach(function (key) { i18n_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { i18n_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function i18n_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; }
-
-
-
-
-
-
- // Actions
-
-const {
-  createAction: i18n_createAction
-} = createDomain('i18n');
-const i18n_initI18n = i18n_createAction('init', overrides => ({
-  overrides
-}));
-const i18n_Actions = {
-  initI18n: i18n_initI18n
-}; // Reducer
+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 defaultState = {
-  translations: flattenObject(en),
-  overrides: {}
-};
-const Reducer = createReducer('i18n', {
-  [i18n_initI18n]: (state, {
-    overrides
-  }) => {
-    return i18n_objectSpread(i18n_objectSpread({}, state), {}, {
-      overrides: overrides ? flattenObject(overrides) : undefined
-    });
-  }
-}, defaultState); // Selectors
-
-const i18n_getState = state => state[String(Reducer)];
-const getTranslations = createSelector(i18n_getState, state => state.translations);
-const getOverrides = createSelector(i18n_getState, state => state.overrides || {});
-const getCombinedTranslations = createSelector(getTranslations, getOverrides, (translations, overrides) => {
-  const overrideKeys = Object.keys(overrides);
-
-  if (overrideKeys.length === 0) {
-    return translations;
-  }
-
-  const defaultKeys = Object.keys(translations);
-  defaultKeys.forEach(key => {
-    if (overrideKeys.indexOf(key) === -1) {
-      console.error('Seamly: Missing translation key:', key);
-    }
-  });
-  return i18n_objectSpread(i18n_objectSpread({}, translations), overrides);
-}); // Hooks
-
-function i18n_useI18n() {
-  const translations = useSelector(getCombinedTranslations);
-  const t = useCallback((key, values = {}) => {
-    const translation = translations[key];
-
-    if (typeof translation === 'function') {
-      return translation(values);
-    } else {
-      return translation;
-    }
-  }, [translations]);
-  return {
-    t
-  };
-}
-;// CONCATENATED MODULE: ./src/javascripts/domains/config/middleware.js
-
-
-
-function createMiddleware() {
-  return ({
-    dispatch
-  }) => next => action => {
-    var _action$config, _action$config2, _action$config2$defau;
-
-    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.translations) {
-          dispatch(initI18n(action.config.translations));
-        }
-
-        if (action !== null && action !== void 0 && (_action$config2 = action.config) !== null && _action$config2 !== void 0 && (_action$config2$defau = _action$config2.defaults) !== null && _action$config2$defau !== void 0 && _action$config2$defau.agentName) {
-          var _action$config3, _action$config3$defau;
-
-          dispatch({
-            type: seamlyActions.SET_HEADER_SUB_TITLE,
-            title: action === null || action === void 0 ? void 0 : (_action$config3 = action.config) === null || _action$config3 === void 0 ? void 0 : (_action$config3$defau = _action$config3.defaults) === null || _action$config3$defau === void 0 ? void 0 : _action$config3$defau.agentName
-          });
-        }
-
-    }
-
-    return result;
-  };
-}
-;// CONCATENATED MODULE: ./src/javascripts/domains/config/index.js
-
-
-
-
-
-
-;// 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 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 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$time, _config$messages;
-
-  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 (!enabled) {
-    return events;
-  }
-
-  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 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 = () => {
@@ -2568,42 +2179,894 @@ const useFocusIfSeamlyContainedFocus = () => {
       focusWithRaf(elementToFocus);
     };
 
-    runIfElementContainsOrHasFocus(containerElementRef.current, focusFn);
-  }, []);
+    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/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,
+  createActions: i18n_utils_createActions,
+  createThunk: i18n_utils_createThunk,
+  createReducer: i18n_utils_createReducer,
+  selectState: i18n_utils_selectState
+} = createDomain('i18n');
+;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/selectors.js
+
+
+const selectTranslations = createSelector(i18n_utils_selectState, state => state.translations);
+const selectInitialLocale = createSelector(i18n_utils_selectState, state => state.initialLocale);
+const selectLocale = createSelector(i18n_utils_selectState, state => state.locale);
+
+;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/actions.js
+
+
+
+const setInitialLocale = i18n_utils_createAction('setInitialLocale', locale => ({
+  locale
+}));
+const [setLocaleStart, setLocaleResolve, setLocaleReject] = i18n_utils_createActions('setLocale', {
+  start: locale => ({
+    locale
+  }),
+  resolve: (locale, translations) => ({
+    locale,
+    translations
+  }),
+  reject: (locale, error) => ({
+    locale,
+    error
+  })
+});
+const mutex = createMutex();
+const setLocale = i18n_utils_createThunk('setLocale', locale => async (dispatch, getState, {
+  api
+}) => {
+  await mutex.runExclusively(async () => {
+    const currentLocale = selectLocale(getState());
+
+    if (currentLocale === locale) {
+      return;
+    }
+
+    dispatch(setLocaleStart(locale));
+
+    try {
+      const translations = await api.getTranslations(locale);
+      dispatch(setLocaleResolve(locale, translations));
+    } catch (error) {
+      dispatch(setLocaleReject(locale, error));
+    }
+  });
+});
+;// 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;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+
+  return arr2;
+}
+;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.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
+
+
+
+
+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;
+  };
+}
+
+//# sourceMappingURL=function-utils.es.js.map
+;// CONCATENATED MODULE: ./node_modules/@ultraq/icu-message-formatter/lib/icu-message-formatter.es.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.
+ */
+
+/**
+ * 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);
+  };
+
+  var args = [];
+  var cases = {};
+  var currTermStart = 0;
+  var latestTerm = null;
+  var inTerm = false;
+  var i = 0;
+
+  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 (string[i] === '{') {
+        i--;
+      }
+    } // 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, "\""));
+        }
+
+        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++;
+  }
+
+  if (inTerm) {
+    latestTerm = string.slice(currTermStart);
+  }
+
+  if (latestTerm) {
+    args.push(latestTerm);
+  }
+
+  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.
+ */
+
+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);
+}
+/**
+ * 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 split(string, separator, limit) {
+  var accumulator = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+
+  if (!string) {
+    return accumulator;
+  }
+
+  if (limit === 1) {
+    accumulator.push(string);
+    return accumulator;
+  }
+
+  var indexOfDelimiter = string.indexOf(separator);
+
+  if (indexOfDelimiter === -1) {
+    accumulator.push(string);
+    return accumulator;
+  }
+
+  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}
+   */
+
+
+  _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);
+
+        if (blockEndIndex !== -1) {
+          var block = message.substring(blockStartIndex, blockEndIndex + 1);
+
+          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];
+
+            var body = values[key];
+
+            if (body === null || body === undefined) {
+              body = '';
+            }
+
+            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);
+
+            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;
+}();
+
+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];
+    }
+
+    if (caseBody[i] === '{') {
+      numBraces++;
+    } else if (caseBody[i] === '}') {
+      numBraces--;
+    }
+
+    i++;
+  }
+
+  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}
+ */
+
+
+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;
+
+  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);
+  }
+
+  keywordPossibilities.push("=".concat(intValue), OTHER$1);
+
+  for (var i = 0; i < keywordPossibilities.length; i++) {
+    var keyword = keywordPossibilities[i];
+
+    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;
+}
+
+/* 
+ * 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 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;
+
+  if (value in cases) {
+    return format(cases[value], values);
+  } else if (OTHER in cases) {
+    return format(cases[OTHER], values);
+  }
+
+  return value;
+}
+
+
+//# sourceMappingURL=icu-message-formatter.es.js.map
+
+;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/hooks.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) {
+      return null;
+    }
+
+    return formatter.format(translation, values);
+  }, [translations]);
+  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; }
+
+
+
+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'
+  },
+  isLoading: false,
+  initialLocale: undefined
 };
-;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/component-helper-hooks.js
+/* harmony default export */ const i18n_reducer = (i18n_utils_createReducer({
+  [setInitialLocale]: (state, {
+    locale
+  }) => i18n_reducer_objectSpread(i18n_reducer_objectSpread({}, state), {}, {
+    initialLocale: locale
+  }),
+  [setLocaleStart]: state => i18n_reducer_objectSpread(i18n_reducer_objectSpread({}, state), {}, {
+    isLoading: true
+  }),
+  [setLocaleResolve]: (state, {
+    locale,
+    translations
+  }) => {
+    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]
+      }), {})
+    });
+  },
+  [setLocaleReject]: state => i18n_reducer_objectSpread(i18n_reducer_objectSpread({}, state), {}, {
+    isLoading: false
+  })
+}, defaultState));
+;// CONCATENATED MODULE: ./src/javascripts/domains/i18n/index.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; }
 
@@ -2834,46 +3297,26 @@ const utility_hooks_useStableCallback = callback => {
     return isFunction ? (...args) => callbackRef.current(...args) : undefined;
   }, [isFunction]);
 };
-;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/actions.js
+;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/utils.js
 
 const {
-  createAction: interrupt_actions_createAction
+  createAction: interrupt_utils_createAction,
+  createReducer: interrupt_utils_createReducer,
+  selectState: interrupt_utils_selectState
 } = createDomain('interrupt');
-const set = interrupt_actions_createAction('set', error => ({
+;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/actions.js
+
+const set = interrupt_utils_createAction('set', error => ({
   error
 }));
-const clear = interrupt_actions_createAction('clear');
-;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/reducer.js
-function interrupt_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 interrupt_reducer_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { interrupt_reducer_ownKeys(Object(source), true).forEach(function (key) { interrupt_reducer_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { interrupt_reducer_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function interrupt_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 interrupt_reducer_initialState = {
-  error: undefined
-};
-/* harmony default export */ const interrupt_reducer = (createReducer('interrupt', {
-  [set]: (state, {
-    error
-  }) => {
-    return interrupt_reducer_objectSpread(interrupt_reducer_objectSpread({}, state), {}, {
-      error
-    });
-  },
-  [clear]: () => {
-    return interrupt_reducer_initialState;
-  }
-}, interrupt_reducer_initialState));
+const clear = interrupt_utils_createAction('clear');
 ;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/selectors.js
 
 
-const selectors_selectState = state => state[String(interrupt_reducer)];
-const selectError = createSelector(selectors_selectState, ({
+const selectError = createSelector(interrupt_utils_selectState, ({
   error
 }) => error);
+
 ;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/hooks.js
 function 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; }
 
@@ -3010,6 +3453,30 @@ function middleware_createMiddleware() {
     return next(action);
   };
 }
+;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/reducer.js
+function interrupt_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 interrupt_reducer_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { interrupt_reducer_ownKeys(Object(source), true).forEach(function (key) { interrupt_reducer_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { interrupt_reducer_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function interrupt_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 interrupt_reducer_initialState = {
+  error: undefined
+};
+/* harmony default export */ const interrupt_reducer = (interrupt_utils_createReducer({
+  [set]: (state, {
+    error
+  }) => {
+    return interrupt_reducer_objectSpread(interrupt_reducer_objectSpread({}, state), {}, {
+      error
+    });
+  },
+  [clear]: () => {
+    return interrupt_reducer_initialState;
+  }
+}, interrupt_reducer_initialState));
 ;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/index.js
 
 
@@ -3017,6 +3484,100 @@ function middleware_createMiddleware() {
 
 
 
+;// 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/actions.js
+
+
+
+
+
+const setHasResponded = app_utils_createAction('setHasResponded', hasResponded => ({
+  hasResponded
+}));
+const actions_initialize = app_utils_createThunk('initialize', config => async (dispatch, getState, {
+  api
+}) => {
+  try {
+    var _config$context;
+
+    dispatch(initialize(config));
+    const {
+      features,
+      defaultLocale
+    } = await api.getConfig();
+    dispatch({
+      type: seamly_utils_seamlyActions.SET_FEATURES,
+      features
+    });
+    let locale = (config === null || config === void 0 ? void 0 : (_config$context = config.context) === null || _config$context === void 0 ? void 0 : _config$context.locale) || defaultLocale;
+    dispatch(setInitialLocale(locale));
+
+    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 (error) {
+      dispatch(set(error));
+    }
+
+    await dispatch(setLocale(locale));
+  } catch (error) {
+    dispatch(set(error));
+  }
+});
+;// CONCATENATED MODULE: ./src/javascripts/domains/app/selectors.js
+
+
+const selectUserHasResponded = createSelector(app_utils_selectState, state => state.userHasResponded);
+
+;// 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; }
+
+
+
+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/ui/hooks/use-seamly-commands.js
 function use_seamly_commands_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; }
 
@@ -3036,6 +3597,7 @@ function use_seamly_commands_defineProperty(obj, key, value) { if (key in obj) {
 
 
 
+
 const {
   ADD_EVENT: use_seamly_commands_ADD_EVENT,
   CLEAR_EVENTS: use_seamly_commands_CLEAR_EVENTS,
@@ -3054,7 +3616,7 @@ const use_seamly_commands_useSeamlyCommands = () => {
   const appConfig = useConfig();
   const dispatch = useSeamlyDispatchContext();
   const eventBus = useContext(SeamlyEventBusContext);
-  const hasResponded = useSeamlyHasUserResponded();
+  const hasResponded = useUserHasResponded();
   const hasConversation = useSeamlyHasConversation();
   const {
     visible: visibility
@@ -3080,10 +3642,10 @@ const use_seamly_commands_useSeamlyCommands = () => {
     });
   }, [api, appConfig, emitEvent, hasResponded, hasConversation, visibility, unreadMessageCount]);
   const reset = useCallback(async () => {
+    dispatch(InterruptActions.clear());
     dispatch({
       type: use_seamly_commands_CLEAR_EVENTS
     });
-    dispatch(InterruptActions.clear());
     dispatch({
       type: use_seamly_commands_SET_IS_LOADING,
       isLoading: true
@@ -3109,20 +3671,16 @@ const use_seamly_commands_useSeamlyCommands = () => {
     });
 
     try {
-      const {
-        accountConfig = {},
-        initialState = {}
-      } = await api.reset();
       const {
         features
-      } = accountConfig || {};
+      } = await api.reset();
       dispatch({
         type: use_seamly_commands_SET_FEATURES,
         features
       });
       dispatch({
         type: use_seamly_commands_SET_INITIAL_STATE,
-        initialState
+        initialState: {}
       });
     } catch (error) {
       dispatch(InterruptActions.set(error));
@@ -3350,24 +3908,21 @@ const useSeamlyTyping = () => {
   const {
     sendAction
   } = useSeamlyCommands();
-  const {
-    typing: typingConfig
-  } = useConfig();
   const {
     features
   } = useSeamlyOptions();
   const {
     typingPeekahead
   } = features || {};
-  const typingTimeout = useRef(null);
-  const sendEndTypingTimeout = useRef(null);
+  const typingTimerId = useRef(null);
+  const sendEndTypingTimerId = useRef(null);
   const isTyping = useRef(false);
-  const typingInterval = useRef(null);
+  const typingIntervalId = useRef(null);
   useEffect(() => {
     return () => {
-      clearInterval(typingInterval.current);
-      clearTimeout(typingTimeout.current);
-      clearTimeout(sendEndTypingTimeout.current);
+      clearInterval(typingIntervalId.current);
+      clearTimeout(typingTimerId.current);
+      clearTimeout(sendEndTypingTimerId.current);
     };
   }, []);
 
@@ -3387,32 +3942,28 @@ const useSeamlyTyping = () => {
       return;
     }
 
-    if (!typingConfig) {
-      return;
-    }
-
     isTyping.current = true;
 
-    if (!typingInterval.current) {
+    if (!typingIntervalId.current) {
       sendTypingState(true, e.target.value);
-      typingInterval.current = setInterval(() => {
+      typingIntervalId.current = setInterval(() => {
         if (!isTyping.current) {
-          clearInterval(typingInterval.current);
-          typingInterval.current = null;
+          clearInterval(typingIntervalId.current);
+          typingIntervalId.current = null;
         } else if (typingPeekahead && typingPeekahead.enabled) {
           sendTypingState(true, e.target.value);
         }
-      }, typingConfig.timeout);
+      }, typingTimeout);
     }
 
-    clearTimeout(typingTimeout.current);
-    clearTimeout(sendEndTypingTimeout.current);
-    typingTimeout.current = setTimeout(() => {
+    clearTimeout(typingTimerId.current);
+    clearTimeout(sendEndTypingTimerId.current);
+    typingTimerId.current = setTimeout(() => {
       isTyping.current = false;
     }, 300);
-    sendEndTypingTimeout.current = setTimeout(() => {
+    sendEndTypingTimerId.current = setTimeout(() => {
       sendTypingState(false, e.target.value);
-    }, typingConfig.timeout);
+    }, typingTimeout);
   };
 };
 const useSeamlyEntry = () => {
@@ -3505,6 +4056,7 @@ const use_seamly_stored_visibility_useSeamlyStoredVisibility = () => {
 
 
 
+
 const {
   SET_VISIBILITY: use_seamly_visibility_SET_VISIBILITY
 } = seamly_utils_seamlyActions;
@@ -3523,7 +4075,7 @@ const use_seamly_visibility_useSeamlyVisibility = () => {
   } = useSeamlyCommands();
   const dispatch = useSeamlyDispatchContext();
   const [storedVisibility, setStoredVisibility] = useSeamlyStoredVisibility();
-  const hasResponded = useSeamlyHasUserResponded();
+  const hasResponded = useUserHasResponded();
   const hasConversation = useSeamlyHasConversation();
   const unreadMessageCount = useSeamlyUnreadCount();
   const isVisible = visible ? visible !== visibilityStates.hidden : false;
@@ -4053,6 +4605,123 @@ function hooks_useTranslationsContainer() {
     focusContainer
   };
 }
+;// CONCATENATED MODULE: ./src/javascripts/domains/translations/middleware.js
+
+
+
+function translations_middleware_createMiddleware() {
+  return ({
+    dispatch,
+    getState
+  }) => next => action => {
+    var _action$history, _action$history$trans, _action$initialState, _action$initialState$, _action$event, _action$event$payload, _action$event$payload2;
+
+    const result = next(action);
+
+    switch (action.type) {
+      case String(seamlyActions.SET_HISTORY):
+        if ((_action$history = action.history) !== null && _action$history !== void 0 && (_action$history$trans = _action$history.translation) !== null && _action$history$trans !== void 0 && _action$history$trans.enabled) {
+          dispatch(Actions.enable(action.history.translation.locale));
+        }
+
+        break;
+
+      case String(seamlyActions.SET_INITIAL_STATE):
+        if ((_action$initialState = action.initialState) !== null && _action$initialState !== void 0 && (_action$initialState$ = _action$initialState.translation) !== null && _action$initialState$ !== void 0 && _action$initialState$.enabled) {
+          dispatch(Actions.enable(action.initialState.translation.locale));
+          dispatch(I18nActions.setLocale(action.locale));
+        }
+
+        break;
+
+      case String(seamlyActions.ADD_EVENT):
+        if (action.event.type === 'info' && ((_action$event = action.event) === null || _action$event === void 0 ? void 0 : (_action$event$payload = _action$event.payload) === null || _action$event$payload === void 0 ? void 0 : (_action$event$payload2 = _action$event$payload.body) === null || _action$event$payload2 === void 0 ? void 0 : _action$event$payload2.subtype) === 'new_translation' && action.event.payload.body.translationEnabled) {
+          dispatch(I18nActions.setLocale(action.event.payload.body.translationLocale));
+        }
+
+        break;
+
+      case String(Actions.disable):
+        const initialLocale = I18nSelectors.selectInitialLocale(getState());
+        dispatch(I18nActions.setLocale(initialLocale));
+        break;
+    }
+
+    return result;
+  };
+}
+;// CONCATENATED MODULE: ./src/javascripts/domains/translations/reducer.js
+function translations_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 translations_reducer_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { translations_reducer_ownKeys(Object(source), true).forEach(function (key) { translations_reducer_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { translations_reducer_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function translations_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 translations_reducer_initialState = {
+  isActive: false,
+  currentLocale: undefined,
+  isAvailable: false,
+  languages: [],
+  originalPayloadIds: [],
+  containerId: id_randomId()
+};
+/* harmony default export */ const translations_reducer = (translations_utils_createReducer({
+  [seamly_utils_seamlyActions.SET_FEATURES]: (state, action) => {
+    var _action$features;
+
+    const feature = action === null || action === void 0 ? void 0 : (_action$features = action.features) === null || _action$features === void 0 ? void 0 : _action$features.translation;
+
+    if (!feature) {
+      return state;
+    }
+
+    return translations_reducer_objectSpread(translations_reducer_objectSpread({}, state), {}, {
+      isAvailable: feature.enabled === true,
+      languages: feature.languages || []
+    });
+  },
+  [seamly_utils_seamlyActions.CLEAR_FEATURES]: () => translations_reducer_initialState,
+  [enable]: (state, {
+    locale
+  }) => {
+    return translations_reducer_objectSpread(translations_reducer_objectSpread({}, state), {}, {
+      isActive: true,
+      currentLocale: locale
+    });
+  },
+  [disable]: state => {
+    return translations_reducer_objectSpread(translations_reducer_objectSpread({}, state), {}, {
+      isActive: false,
+      currentLocale: undefined
+    });
+  },
+  [enableEvent]: (state, {
+    payloadId
+  }) => {
+    if (!state.originalPayloadIds.includes(payloadId)) {
+      return state;
+    }
+
+    return translations_reducer_objectSpread(translations_reducer_objectSpread({}, state), {}, {
+      originalPayloadIds: state.originalPayloadIds.filter(id => id !== payloadId)
+    });
+  },
+  [disableEvent]: (state, {
+    payloadId
+  }) => {
+    if (state.originalPayloadIds.includes(payloadId)) {
+      return state;
+    }
+
+    return translations_reducer_objectSpread(translations_reducer_objectSpread({}, state), {}, {
+      originalPayloadIds: [...state.originalPayloadIds, payloadId]
+    });
+  }
+}, translations_reducer_initialState));
 ;// CONCATENATED MODULE: ./src/javascripts/lib/css.js
 
 /**
@@ -4538,6 +5207,9 @@ function form_TranslationsOptionsDialogForm({
     languages,
     currentLocale
   } = useTranslations();
+  const {
+    locale: uiLocale
+  } = useI18n();
   const languageName = useMemo(() => {
     var _languages$find;
 
@@ -4547,11 +5219,11 @@ function form_TranslationsOptionsDialogForm({
     return [{
       value: '',
       label: t('translations.settings.defaultOptionLabel')
-    }, ...languages.map(language => ({
+    }, ...languages.filter(language => language.locale.toLowerCase() !== String(uiLocale).toLowerCase()).map(language => ({
       value: language.locale,
       label: language.nativeName
     }))];
-  }, [t, languages]);
+  }, [t, languages, uiLocale]);
   return _jsxs(Form, {
     noValidate: "true",
     children: [_jsx("p", {
@@ -4969,7 +5641,9 @@ function TranslationsChatStatus() {
   return _jsx(ChatStatus, {
     type: "translations",
     id: id,
-    label: t('translations.status.label', languageName),
+    label: t('translations.status.label', {
+      language: languageName
+    }),
     onButtonClick: handleClickStop,
     buttonText: t('translations.status.stopText'),
     srButtonText: t('translations.status.srStopText')
@@ -4983,6 +5657,7 @@ function TranslationsChatStatus() {
 
 
 
+
 ;// CONCATENATED MODULE: ./src/javascripts/style-guide/components/static-core.js
 const static_core_excluded = ["translations", "interrupt", "config"];
 
@@ -4999,6 +5674,7 @@ function static_core_objectWithoutPropertiesLoose(source, excluded) { if (source
 
 
 
+
 const bareApi = {
   send: () => {},
   reset: () => {
@@ -5012,6 +5688,7 @@ const bareApi = {
 
 const SeamlyTestCore = ({
   state,
+  translations,
   children
 }) => {
   const liveMsgRef = (0,hooks_namespaceObject.useRef)(() => {});
@@ -5030,10 +5707,11 @@ const SeamlyTestCore = ({
     const newStore = (0,web_ui_namespaceObject.createReduxStore)({
       reducers: {
         state: stateReducer,
+        [String(app_reducer)]: app_reducer,
         [String(config_reducer)]: config_reducer,
         [String(reducer)]: reducer,
         [String(translations_reducer)]: translations_reducer,
-        [String(Reducer)]: Reducer,
+        [String(i18n_reducer)]: i18n_reducer,
         [String(interrupt_reducer)]: interrupt_reducer
       },
       initialState: {
@@ -5043,8 +5721,9 @@ const SeamlyTestCore = ({
       }
     });
     newStore.dispatch(initialize(configSlice || {}));
+    newStore.dispatch(setLocaleResolve('en-GB', translations));
     return newStore;
-  }, [state]);
+  }, [state, translations]);
   return state && (0,jsx_runtime_namespaceObject.jsx)(web_ui_namespaceObject.StoreProvider, {
     store: store,
     children: (0,jsx_runtime_namespaceObject.jsx)(web_ui_namespaceObject.SeamlyEventBusContext.Provider, {
@@ -5696,7 +6375,7 @@ const imageMessage = {
       description: 'Plaatje',
       isZoomable: false,
       type: 'image',
-      url: 'https://via.placeholder.com/150'
+      url: 'https://developers.seamly.ai/clients/web-ui/static/photos/image-square-small.jpg'
     },
     fromClient: false,
     fromHistory: true,
@@ -5724,7 +6403,7 @@ const imageMessageWithLightbox = {
       description: 'Plaatje',
       isZoomable: true,
       type: 'image',
-      url: 'https://via.placeholder.com/150'
+      url: 'https://developers.seamly.ai/clients/web-ui/static/photos/image-portrait.jpg'
     },
     fromClient: false,
     fromHistory: true,
@@ -5872,7 +6551,7 @@ const fileDownloadPayload = {
     contentType: 'image/jpg',
     filename: 'placeholder.jpg',
     filesize: 991078,
-    url: 'https://via.placeholder.com/150'
+    url: 'https://developers.seamly.ai/clients/web-ui/static/photos/image-square-small.jpg'
   }
 };
 const fileDownloadAgentMessage = {
@@ -6000,7 +6679,7 @@ const cardAskText = {
       },
       buttonText: 'Ask about pizzas!',
       description: 'Pizza Margherita is a **typical Neapolitan pizza**.\n\nIt is made with San Marzano tomatoes, mozzarella cheese, fresh basil, salt, and extra-virgin olive oil.',
-      image: 'https://via.placeholder.com/400x200/dee3e5/6a7f8c?text=Margherita',
+      image: 'https://developers.seamly.ai/clients/web-ui/static/photos/card-square.jpg',
       title: 'Pizza Margherita'
     }
   }
@@ -6018,7 +6697,7 @@ const cardNavigate = {
       },
       buttonText: 'Order now!',
       description: 'Pizza Margherita is a **typical Neapolitan pizza**.',
-      image: 'https://via.placeholder.com/400x200/dee3e5/6a7f8c?text=Margherita',
+      image: 'https://developers.seamly.ai/clients/web-ui/static/photos/card-landscape.jpg',
       title: 'Pizza Margherita'
     }
   }
@@ -6034,7 +6713,7 @@ const cardTopic = {
         type: 'topic'
       },
       buttonText: 'Set topic! (title & description optional)',
-      image: 'https://via.placeholder.com/400x200/dee3e5/6a7f8c?text=Margherita'
+      image: 'https://developers.seamly.ai/clients/web-ui/static/photos/card-portrait.jpg'
     }
   }
 };
@@ -6311,9 +6990,9 @@ const standardState = {
       showDisclaimer: true
     })
   }),
-  cobrowserBar: states_objectSpread(states_objectSpread({
+  chatStatusBar: states_objectSpread(states_objectSpread({
     category: categoryKeys.features,
-    headingText: `Cobrowse bar`,
+    headingText: `Chat status bar`,
     description: ''
   }, baseState), {}, {
     options: {
@@ -7084,6 +7763,7 @@ function app_defineProperty(obj, key, value) { if (key in obj) { Object.definePr
 const StyleGuideApp = ({
   config,
   styleGuideConfig,
+  translations,
   headingLevel = 2
 }) => {
   const [staticState, setStaticState] = (0,hooks_namespaceObject.useState)(null);
@@ -7215,7 +7895,7 @@ const StyleGuideApp = ({
       }), (0,jsx_runtime_namespaceObject.jsx)("div", {
         children: showStyleGuide && (0,jsx_runtime_namespaceObject.jsx)(view, {
           customComponents: styleGuideConfig.customComponents,
-          translations: config.translations,
+          translations: translations,
           state: staticState
         })
       })]
@@ -7252,7 +7932,6 @@ function style_guide_engine_objectWithoutPropertiesLoose(source, excluded) { if
 
 
 
-
 class SeamlyStyleGuideInstance extends web_ui_namespaceObject.Engine {
   constructor(_ref, externalApi) {
     let {
@@ -7264,23 +7943,28 @@ class SeamlyStyleGuideInstance extends web_ui_namespaceObject.Engine {
     this.styleGuideConfig = styleGuideConfig || {};
   }
 
-  render() {
+  async render() {
     const restComponents = style_guide_engine_objectSpread(style_guide_engine_objectSpread({}, this.config.customComponents || {}), {}, {
       view: undefined
     });
 
+    const api = new web_ui_namespaceObject.API({
+      namespace: this.config.namespace,
+      config: this.config.api
+    });
+    api.URLS = {
+      translations: `/client/${this.config.api.key}/translations/{version}/{locale}.json`
+    };
+    const translations = await api.getTranslations(this.config.context.locale || 'en-GB');
+
     const renderConfig = style_guide_engine_objectSpread(style_guide_engine_objectSpread({}, this.config), {}, {
-      customComponents: Object.keys(restComponents).length ? restComponents : undefined,
-      translations: this.config.translations || style_guide_engine_objectSpread(style_guide_engine_objectSpread({}, (en_default())), {}, {
-        disclaimer: style_guide_engine_objectSpread(style_guide_engine_objectSpread({}, (en_default()).disclaimer), {}, {
-          content: 'This chat session will be saved to help us improve our service delivery. <a href="https://seamly.ai/">More information</a>'
-        })
-      })
+      customComponents: Object.keys(restComponents).length ? restComponents : undefined
     });
 
     (0,external_preact_namespaceObject.render)((0,jsx_runtime_namespaceObject.jsx)(app, {
       config: renderConfig,
-      styleGuideConfig: this.styleGuideConfig
+      styleGuideConfig: this.styleGuideConfig,
+      translations: translations
     }), this.parentElement);
   }