@seamly/web-ui 18.1.1 → 18.3.1

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

@@ -67,45 +67,6 @@ const hooks_namespaceObject = require("preact/hooks");
 function id_randomId() {
   return '_' + (Number(String(Math.random()).slice(2)) + Date.now() + Math.round(performance.now())).toString(36);
 }
-;// CONCATENATED MODULE: ./src/javascripts/config.js
-const CSS_NAME = 'cvco';
-const apiVersion = '2';
-const layoutMode = 'window'; // "window", "inline" ("sidebar"), "modal"
-
-const config_appContainerClassNames = config => [`app--layout-${config.layoutMode}`, `namespace--${config.namespace}`];
-const typing = {
-  timeout: 2000 // How long to wait before we decide the user isn't typing
-
-};
-const config_userParticipantId = 'seamly-client-participant'; // How long to debounce distinct changes in unread messages for before
-// broadcasting to the screen reader. This is done to avoid verbosity.
-
-const unreadScreenReaderWait = 2000;
-const newMessageScreenReaderWait = 1000;
-const config_screenReaderDebounceDelaySeconds = 10;
-const activitySendDelay = 15000;
-const maxCharacterWarningLimit = 50;
-const maxCharacterSrDebounceDelay = 300;
-const config_defaultTransitionTimeMs = 300;
-const config_defaultConfig = {
-  messages: {
-    agent: {
-      showAvatar: false,
-      // true, "inline"
-      showName: false
-    },
-    user: {
-      showAvatar: false,
-      // true, "inline"
-      showName: false
-    },
-    timeIndicator: {
-      enabled: false,
-      threshold: 3600000 // Default threshold is an hour in milliseconds
-
-    }
-  }
-};
 ;// CONCATENATED MODULE: ./src/javascripts/ui/utils/general-utils.js
 function 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; }
 
@@ -290,14 +251,11 @@ const flattenObject = (obj, prefix = '') => Object.keys(obj).reduce((acc, k) =>
   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;
+}, {});
 ;// CONCATENATED MODULE: ./src/javascripts/ui/utils/seamly-utils.js
-const _excluded = (/* unused pure expression or super */ null && (["messages", "typing"])),
-      _excluded2 = (/* unused pure expression or super */ null && (["messages"]));
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function seamly_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; }
 
 function seamly_utils_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { seamly_utils_ownKeys(Object(source), true).forEach(function (key) { seamly_utils_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { seamly_utils_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -305,7 +263,6 @@ function seamly_utils_objectSpread(target) { for (var i = 1; i < arguments.lengt
 function seamly_utils_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 
-
 const eventTypes = {
   info: 'info',
   message: 'message',
@@ -364,13 +321,13 @@ const dividerKeys = {
   new_topic: 'newTopic',
   new_translation: 'newTranslation'
 };
-const seamly_utils_featureKeys = {
+const featureKeys = {
   cobrowsing: 'cobrowsing',
   sendTranscript: 'sendTranscript',
   typingPeekahead: 'typingPeekahead',
   uploads: 'uploads'
 };
-const seamlyActions = {
+const seamly_utils_seamlyActions = {
   ADD_EVENT: 'ADD_EVENT',
   CLEAR_EVENTS: 'CLEAR_EVENTS',
   SET_HISTORY: 'SET_HISTORY',
@@ -381,12 +338,9 @@ const seamlyActions = {
   SET_PARTICIPANT: 'SET_PARTICIPANT',
   SET_HEADER_TITLE: 'SET_HEADER_TITLE',
   SET_HEADER_SUB_TITLE: 'SET_HEADER_SUB_TITLE',
-  SET_INTERRUPT: ' SET_INTERRUPT',
-  CLEAR_INTERRUPT: 'CLEAR_INTERRUPT',
   SET_VISIBILITY: 'SET_VISIBILITY',
   RESET_HISTORY_LOADED_FLAG: 'RESET_HISTORY_LOADED_FLAG',
   SET_ACTIVE_SERVICE: 'SET_ACTIVE_SERVICE',
-  SET_SHOW_DISCLAIMER: 'SET_SHOW_DISCLAIMER',
   INIT_IDLE_DETACH_COUNTDOWN: 'INIT_IDLE_DETACH_COUNTDOWN',
   DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER: 'DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER',
   STOP_IDLE_DETACH_COUNTDOWN_COUNTER: 'STOP_IDLE_DETACH_COUNTDOWN_COUNTER',
@@ -394,7 +348,6 @@ const seamlyActions = {
   INIT_RESUME_CONVERSATION_PROMPT: 'INIT_RESUME_CONVERSATION_PROMPT',
   CLEAR_RESUME_CONVERSATION_PROMPT: 'CLEAR_RESUME_CONVERSATION_PROMPT',
   SET_SERVICE_DATA_ITEM: 'SET_SERVICE_DATA_ITEM',
-  UPDATE_CONFIG: 'UPDATE_CONFIG',
   SET_FEATURES: 'SET_FEATURES',
   SET_FEATURE_ENABLED_STATE: 'SET_FEATURE_ENABLED_STATE',
   CLEAR_FEATURES: 'CLEAR_FEATURES',
@@ -433,12 +386,9 @@ const {
   SET_PARTICIPANT,
   SET_HEADER_TITLE,
   SET_HEADER_SUB_TITLE,
-  SET_INTERRUPT,
-  CLEAR_INTERRUPT,
   SET_VISIBILITY,
   RESET_HISTORY_LOADED_FLAG,
   SET_ACTIVE_SERVICE,
-  SET_SHOW_DISCLAIMER,
   INIT_IDLE_DETACH_COUNTDOWN,
   DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER,
   STOP_IDLE_DETACH_COUNTDOWN_COUNTER,
@@ -446,7 +396,6 @@ const {
   INIT_RESUME_CONVERSATION_PROMPT,
   CLEAR_RESUME_CONVERSATION_PROMPT,
   SET_SERVICE_DATA_ITEM,
-  UPDATE_CONFIG,
   SET_FEATURES,
   SET_FEATURE_ENABLED_STATE,
   CLEAR_FEATURES,
@@ -468,7 +417,7 @@ const {
   RESET_UPLOAD_STATE,
   RESET_ENTRY_STATE,
   SET_SEAMLY_CONTAINER_ELEMENT
-} = seamlyActions;
+} = seamly_utils_seamlyActions;
 const isUnreadMessage = ({
   type,
   payload
@@ -554,25 +503,6 @@ const headerTitlesReducer = (state, action) => {
   }
 };
 
-const interruptReducer = (state, action) => {
-  switch (action.type) {
-    case SET_INTERRUPT:
-      return seamly_utils_objectSpread(seamly_utils_objectSpread({}, state), {}, {
-        hasInterrupt: true,
-        meta: seamly_utils_objectSpread({}, action.interrupt)
-      });
-
-    case CLEAR_INTERRUPT:
-      return seamly_utils_objectSpread(seamly_utils_objectSpread({}, state), {}, {
-        hasInterrupt: false,
-        meta: {}
-      });
-
-    default:
-      return state;
-  }
-};
-
 const calculateNewEntryMeta = (entryMeta, payload) => {
   const {
     entry
@@ -612,7 +542,7 @@ const seamlyStateReducer = (state, action) => {
         type: eventType,
         payload
       } = action.event;
-      const accountHasUploads = state.options.features.hasOwnProperty(seamly_utils_featureKeys.uploads);
+      const accountHasUploads = state.options.features.hasOwnProperty(featureKeys.uploads);
       const newEntryMeta = calculateNewEntryMeta(state.entryMeta, payload);
 
       let newOptions = seamly_utils_objectSpread({}, state.options); // This enabled override of the service enabled value for uploads.
@@ -740,7 +670,7 @@ const seamlyStateReducer = (state, action) => {
       let newFeatures = seamly_utils_objectSpread({}, state.options.features); // Only set cobrowsing if it was initialised by the account config.
 
 
-      if (newFeatures.hasOwnProperty(seamly_utils_featureKeys.cobrowsing)) {
+      if (newFeatures.hasOwnProperty(featureKeys.cobrowsing)) {
         newFeatures = seamly_utils_objectSpread(seamly_utils_objectSpread({}, newFeatures), {}, {
           cobrowsing: {
             enabled: !!(cobrowsing && cobrowsing.enabled)
@@ -748,7 +678,7 @@ const seamlyStateReducer = (state, action) => {
         });
       }
 
-      const newFeaturesHasUpload = newFeatures.hasOwnProperty(seamly_utils_featureKeys.uploads); // Only set uploads if it was initialised by the account config.
+      const newFeaturesHasUpload = newFeatures.hasOwnProperty(featureKeys.uploads); // Only set uploads if it was initialised by the account config.
 
       if (newFeaturesHasUpload) {
         const {
@@ -892,22 +822,6 @@ const seamlyStateReducer = (state, action) => {
         headerTitles: headerTitlesReducer(state.headerTitles, action)
       });
 
-    case SET_INTERRUPT:
-    case CLEAR_INTERRUPT:
-      return seamly_utils_objectSpread(seamly_utils_objectSpread({}, state), {}, {
-        interrupt: interruptReducer(state.interrupt, action)
-      });
-
-    case SET_SHOW_DISCLAIMER:
-      return seamly_utils_objectSpread(seamly_utils_objectSpread({}, state), {}, {
-        showDisclaimer: action.showDisclaimer
-      });
-
-    case UPDATE_CONFIG:
-      return seamly_utils_objectSpread(seamly_utils_objectSpread({}, state), {}, {
-        config: seamly_utils_objectSpread(seamly_utils_objectSpread({}, state.config), action.config)
-      });
-
     case SET_INITIAL_STATE:
       return seamly_utils_objectSpread(seamly_utils_objectSpread({}, state), {}, {
         initialState: action.initialState
@@ -1123,27 +1037,6 @@ const seamlyStateReducer = (state, action) => {
       return state;
   }
 };
-const getSeamlyConfig = config => {
-  const {
-    messages: messagesConfig,
-    typing
-  } = config,
-        rest = _objectWithoutProperties(config, _excluded);
-
-  const {
-    messages: defaultMessagesConfig
-  } = defaultConfig,
-        defaultRest = _objectWithoutProperties(defaultConfig, _excluded2);
-
-  return seamly_utils_objectSpread(seamly_utils_objectSpread({}, defaultRest), {}, {
-    namespace: 'default',
-    visible: config.layoutMode && config.layoutMode === 'inline' ? seamly_utils_visibilityStates.open : seamly_utils_visibilityStates.minimized,
-    layoutMode: defaultLayoutmode,
-    appContainerClassNames,
-    messages: seamly_utils_objectSpread(seamly_utils_objectSpread({}, defaultMessagesConfig), messagesConfig),
-    typing: seamly_utils_objectSpread(seamly_utils_objectSpread({}, defaultTyping), typing)
-  }, rest);
-};
 const seamly_utils_calculateVisibility = ({
   hasResponded,
   previousVisibility,
@@ -1166,14 +1059,12 @@ const seamly_utils_calculateVisibility = ({
   const baseVisibility = layoutMode === 'inline' ? seamly_utils_visibilityStates.open : seamly_utils_visibilityStates.minimized;
   return requestedVisibility || previousVisibility || defaultVisibility || baseVisibility;
 };
-;// CONCATENATED MODULE: ./src/javascripts/ui/store/state-reducer.js
+;// CONCATENATED MODULE: ./src/javascripts/domains/store/state-reducer.js
+// Legacy state reducer. Do not add new features here but extract/create new reducers as needed
 
 
 const initialState = {
   events: [],
-  config: {
-    hideOnNoUserResponse: false
-  },
   initialState: {},
   unreadEvents: 0,
   isLoading: false,
@@ -1194,15 +1085,11 @@ const initialState = {
     title: null,
     subTitle: ''
   },
-  interrupt: {
-    hasInterrupt: false,
-    meta: {}
-  },
   historyLoaded: false,
   skiplinkTargetId: id_randomId(),
   optionsButtonId: id_randomId(),
   cobrowsingContainerId: id_randomId(),
-  showDisclaimer: false,
+  headerCollapseButtonId: id_randomId(),
   serviceData: {},
   options: {
     features: {},
@@ -1267,10 +1154,22 @@ function createActions(baseType, ...args) {
   const create = prefixType(baseType, createAction, SLICE_DELIMITER);
   return handlers.map(handler => create(...handler));
 }
+function createThunk(type, thunkCreator) {
+  const fn = (...args) => {
+    const thunk = thunkCreator(...args);
+    thunk.type = type;
+    return thunk;
+  };
+
+  fn.toString = () => type;
+
+  return fn;
+}
 function createDomain(domain) {
   return {
     createAction: prefixType(domain, createAction, DOMAIN_DELIMITER),
-    createActions: prefixType(domain, createActions, DOMAIN_DELIMITER)
+    createActions: prefixType(domain, createActions, DOMAIN_DELIMITER),
+    createThunk: prefixType(domain, createThunk, DOMAIN_DELIMITER)
   };
 }
 function createReducer(domain, handlers = {}, defaultState) {
@@ -1493,9 +1392,7 @@ function updateFormControl(state, formId, name, controlState) {
     formId,
     persistData
   }) => {
-    var _state$formId2;
-
-    const formState = persistData ? (_state$formId2 = state[formId]) !== null && _state$formId2 !== void 0 ? _state$formId2 : reducer_objectSpread(reducer_objectSpread({}, initialFormState), {}, {
+    const formState = persistData ? state[formId] ?? reducer_objectSpread(reducer_objectSpread({}, initialFormState), {}, {
       persistData
     }) : reducer_objectSpread(reducer_objectSpread({}, initialFormState), {}, {
       persistData
@@ -1600,6 +1497,20 @@ const {
   Provider: context_Provider,
   Consumer
 } = context_StoreContext;
+;// CONCATENATED MODULE: external "preact/jsx-runtime"
+const jsx_runtime_namespaceObject = require("preact/jsx-runtime");
+;// CONCATENATED MODULE: ./src/javascripts/domains/redux/provider.js
+
+
+function StoreProvider({
+  store,
+  children
+}) {
+  return _jsx(Provider, {
+    value: store,
+    children: children
+  });
+}
 ;// CONCATENATED MODULE: ./src/javascripts/domains/redux/hooks.js
 
  // import { arrayContentEquals } from './utils'
@@ -1674,6 +1585,7 @@ const hooks_useSelectorWithProps = function useSelectorWithProps(selector, props
 
 
 
+
 ;// CONCATENATED MODULE: ./src/javascripts/domains/forms/context.js
 
 const context_FormContext = (0,external_preact_namespaceObject.createContext)({});
@@ -1761,10 +1673,8 @@ function hooks_useFormControl(name) {
   }), [isValid, error, touched]);
   return [field, meta];
 }
-;// CONCATENATED MODULE: external "preact/jsx-runtime"
-const jsx_runtime_namespaceObject = require("preact/jsx-runtime");
 ;// CONCATENATED MODULE: ./src/javascripts/domains/forms/provider.js
-const provider_excluded = (/* unused pure expression or super */ null && (["children", "formId", "persistData", "onSubmit", "validationSchema"]));
+const _excluded = (/* unused pure expression or super */ null && (["children", "formId", "persistData", "onSubmit", "validationSchema"]));
 
 function provider_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -1772,9 +1682,9 @@ function provider_objectSpread(target) { for (var i = 1; i < arguments.length; i
 
 function provider_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function provider_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = provider_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-function provider_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 
 
@@ -1791,7 +1701,7 @@ function provider_FormProvider(_ref) {
     onSubmit,
     validationSchema
   } = _ref,
-      props = provider_objectWithoutProperties(_ref, provider_excluded);
+      props = _objectWithoutProperties(_ref, _excluded);
 
   const dispatch = useStoreDispatch();
   const values = useSelectorWithProps(getFormValuesByFormId, {
@@ -1914,7 +1824,7 @@ const translations_reducer_initialState = {
   containerId: id_randomId()
 };
 /* harmony default export */ const translations_reducer = (createReducer('translations', {
-  [seamlyActions.SET_FEATURES]: (state, action) => {
+  [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;
@@ -1928,7 +1838,7 @@ const translations_reducer_initialState = {
       languages: feature.languages || []
     });
   },
-  [seamlyActions.SET_HISTORY]: (state, {
+  [seamly_utils_seamlyActions.SET_HISTORY]: (state, {
     history
   }) => {
     var _history$translation, _history$translation2;
@@ -1938,7 +1848,7 @@ const translations_reducer_initialState = {
       currentLocale: history === null || history === void 0 ? void 0 : (_history$translation2 = history.translation) === null || _history$translation2 === void 0 ? void 0 : _history$translation2.locale
     });
   },
-  [seamlyActions.CLEAR_FEATURES]: () => translations_reducer_initialState,
+  [seamly_utils_seamlyActions.CLEAR_FEATURES]: () => translations_reducer_initialState,
   [enable]: (state, {
     locale
   }) => {
@@ -2016,207 +1926,155 @@ const seamly_api_hooks_useSeamlyHasUserResponded = () => {
   } = seamly_api_hooks_useSeamlyObjectStore();
   return get ? !!get('userResponded') : false;
 };
-;// 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; }
+;// CONCATENATED MODULE: ./src/javascripts/domains/config/actions.js
 
-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; }
+const {
+  createAction: actions_createAction
+} = createDomain('config');
+const initialize = actions_createAction('initialize', config => ({
+  config
+}));
+const update = actions_createAction('update', config => ({
+  config
+}));
+;// CONCATENATED MODULE: ./src/javascripts/config.js
+const CSS_NAME = 'cvco';
+const apiVersion = '2';
+const config_userParticipantId = 'seamly-client-participant'; // How long to debounce distinct changes in unread messages for before
+// broadcasting to the screen reader. This is done to avoid verbosity.
 
-function 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 unreadScreenReaderWait = 2000;
+const newMessageScreenReaderWait = 1000;
+const config_screenReaderDebounceDelaySeconds = 10;
+const activitySendDelay = 15000;
+const maxCharacterWarningLimit = 50;
+const maxCharacterSrDebounceDelay = 300;
+const config_defaultTransitionTimeMs = 300;
+const defaultConfig = {
+  namespace: 'default',
+  layoutMode: 'window',
+  // "window", "inline" ("sidebar"), "modal"
+  messages: {
+    agent: {
+      showAvatar: false,
+      // true, "inline"
+      showName: false
+    },
+    user: {
+      showAvatar: false,
+      // true, "inline"
+      showName: false
+    },
+    timeIndicator: {
+      enabled: false,
+      threshold: 3600000 // Default threshold is an hour in milliseconds
+
+    }
+  },
+  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"];
 
+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; }
 
+function reducer_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-const selectState = state => state.state;
-const seamly_state_hooks_useSeamlyStateContext = () => useSelector(selectState);
-const selectConfig = createSelector(selectState, ({
-  config
-}) => config || {});
-const seamly_state_hooks_useSeamlyConfig = () => useSelector(selectConfig);
-const selectEvents = createSelector(selectState, selectConfig, ({
-  events
-}, config) => {
-  var _config$messages$time, _config$messages;
+function config_reducer_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-  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 : {};
+function config_reducer_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { config_reducer_ownKeys(Object(source), true).forEach(function (key) { config_reducer_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { config_reducer_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-  if (!enabled) {
-    return events;
-  }
+function config_reducer_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-  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 useSeamlyDisclaimerState = () => seamly_state_hooks_useSeamlyStateContext().showDisclaimer;
-const useSeamlyCurrentAgent = () => {
-  const {
-    participants,
-    currentAgent
-  } = seamly_state_hooks_useSeamlyStateContext().participantInfo;
-  return currentAgent ? participants[currentAgent] : null;
-};
-const useSeamlyServiceData = key => seamly_state_hooks_useSeamlyStateContext().serviceData[key];
-const useEntryTextLimit = () => {
-  const {
-    entryMeta: {
-      options: {
-        text
-      }
-    }
-  } = seamly_state_hooks_useSeamlyStateContext();
-  const {
-    limit
-  } = text || {};
-  return {
-    hasLimit: limit != null,
-    limit: limit != null ? limit : null
-  };
-};
-const useSeamlyLayoutMode = () => {
-  const {
-    layoutMode
-  } = seamly_state_hooks_useSeamlyConfig();
-  return {
-    isInline: layoutMode === 'inline',
-    isModal: layoutMode === 'modal',
-    isWindow: layoutMode === 'window',
-    isResolving: !layoutMode
-  };
-};
-;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/use-seamly-dispatch.js
 
-/* harmony default export */ const use_seamly_dispatch = ((/* unused pure expression or super */ null && (useStoreDispatch)));
-;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/focus-helper-hooks.js
 
 
+const config_reducer_initialState = config_reducer_objectSpread(config_reducer_objectSpread({}, defaultConfig), {}, {
+  hideOnNoUserResponse: false,
+  showDisclaimer: false,
+  showFaq: false,
+  customComponents: {},
+  defaults: {}
+});
 
+const configKeys = ['hideOnNoUserResponse', 'showDisclaimer', 'showFaq', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'typing', 'visible', 'visibilityCallback'];
 
+const updateState = (state, {
+  config
+}) => {
+  const _pick = pick(config, configKeys),
+        {
+    messages,
+    typing
+  } = _pick,
+        partialConfig = reducer_objectWithoutProperties(_pick, reducer_excluded);
 
-const {
-  SET_SEAMLY_CONTAINER_ELEMENT: focus_helper_hooks_SET_SEAMLY_CONTAINER_ELEMENT
-} = seamlyActions;
+  let newState = state;
 
-const focusWithRaf = el => {
-  requestAnimationFrame(() => {
-    requestAnimationFrame(() => {
-      const focusEl = typeof el === 'string' ? document.getElementById(el) : el;
-      focusElement(focusEl);
+  if (Object.keys(partialConfig).length > 0) {
+    newState = config_reducer_objectSpread(config_reducer_objectSpread({}, newState), partialConfig);
+  }
+
+  if (messages) {
+    newState = config_reducer_objectSpread(config_reducer_objectSpread({}, newState), {}, {
+      messages: config_reducer_objectSpread(config_reducer_objectSpread({}, newState.messages), messages)
     });
-  });
-};
+  }
 
-const useSeamlyContainerElement = () => {
-  const {
-    seamlyContainerElement
-  } = useSeamlyStateContext();
-  const dispatch = useSeamlyDispatchContext();
-  const setSeamlyContainerElement = useCallback(element => {
-    dispatch({
-      type: focus_helper_hooks_SET_SEAMLY_CONTAINER_ELEMENT,
-      element
+  if (typing) {
+    newState = config_reducer_objectSpread(config_reducer_objectSpread({}, newState), {}, {
+      typing: config_reducer_objectSpread(config_reducer_objectSpread({}, newState.typing), typing)
     });
-  }, [dispatch]);
-  return [seamlyContainerElement, setSeamlyContainerElement];
-};
-const focus_helper_hooks_useElementFocusingById = elementId => useCallback(() => {
-  focusWithRaf(elementId);
-}, [elementId]);
-const focus_helper_hooks_useSkiplinkTargetFocusing = () => {
-  const skiplinkTargetId = useSkiplink();
-  return focus_helper_hooks_useElementFocusingById(skiplinkTargetId);
-};
-const useFocusIfSeamlyContainedFocus = () => {
-  const containerElementRef = useRef(null);
-  const [seamlyContainerElement] = useSeamlyContainerElement();
-  containerElementRef.current = seamlyContainerElement;
-  return useCallback(elementToFocus => {
-    const focusFn = () => {
-      focusWithRaf(elementToFocus);
-    };
+  }
 
-    runIfElementContainsOrHasFocus(containerElementRef.current, focusFn);
-  }, []);
+  return newState;
 };
-;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/component-helper-hooks.js
 
+/* harmony default export */ const config_reducer = (createReducer('config', {
+  [initialize]: (state, action) => {
+    return updateState(state, action);
+  },
+  [update]: (state, action) => {
+    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; }
 
-const useSeamlyAppContainerClassNames = () => {
-  const config = useSeamlyConfig();
-  const {
-    appContainerClassNames
-  } = config;
+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; }
 
-  if (!appContainerClassNames) {
-    return [];
-  }
+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; }
 
-  switch (typeof config.appContainerClassNames) {
-    case 'function':
-      return config.appContainerClassNames(config);
 
-    default:
-      return config.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');
+
+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 classNames;
-};
-const useCobrowsingContainer = () => {
-  const {
-    cobrowsingContainerId: id
-  } = useSeamlyStateContext();
-  const focusContainer = useElementFocusingById(id);
-  return {
-    id,
-    focusContainer
-  };
-};
+  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
@@ -2279,7 +2137,6 @@ const useCobrowsingContainer = () => {
   'fileUpload.srAvailableText': 'File uploads are now available in the chat.',
   'fileUpload.srCompleteText': 'Upload complete.',
   'fileUpload.srFileDownloadText': fileName => `Download file ${fileName}.`,
-  'fileUpload.srFileUnavailableText': fileName => `Download for ${fileName} has expired.`,
   'fileUpload.srFileUploadedText': fileName => `Uploaded file ${fileName}.`,
   'fileUpload.srProgressLabel': fileName => `${fileName} upload progress status`,
   'fileUpload.srStartedText': 'Upload started.',
@@ -2467,16 +2324,19 @@ function i18n_defineProperty(obj, key, value) { if (key in obj) { Object.defineP
 const {
   createAction: i18n_createAction
 } = createDomain('i18n');
-const initI18n = i18n_createAction('init', overrides => ({
+const i18n_initI18n = i18n_createAction('init', overrides => ({
   overrides
-})); // Reducer
+}));
+const i18n_Actions = {
+  initI18n: i18n_initI18n
+}; // Reducer
 
 const defaultState = {
   translations: flattenObject(en),
   overrides: {}
 };
 const Reducer = createReducer('i18n', {
-  [initI18n]: (state, {
+  [i18n_initI18n]: (state, {
     overrides
   }) => {
     return i18n_objectSpread(i18n_objectSpread({}, state), {}, {
@@ -2519,203 +2379,235 @@ function i18n_useI18n() {
     t
   };
 }
-;// 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; }
-
-function seamly_option_hooks_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { seamly_option_hooks_ownKeys(Object(source), true).forEach(function (key) { seamly_option_hooks_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { seamly_option_hooks_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+;// CONCATENATED MODULE: ./src/javascripts/domains/config/middleware.js
 
-function seamly_option_hooks_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 
+function 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
+          });
+        }
 
+    }
 
-const {
-  SET_USER_SELECTED_OPTION: seamly_option_hooks_SET_USER_SELECTED_OPTION,
-  SET_USER_SELECTED_OPTIONS: seamly_option_hooks_SET_USER_SELECTED_OPTIONS,
-  SHOW_OPTION: seamly_option_hooks_SHOW_OPTION,
-  HIDE_OPTION: seamly_option_hooks_HIDE_OPTION
-} = seamlyActions;
-const seamly_option_hooks_useSeamlyOptions = () => {
-  const {
-    t
-  } = useI18n();
-  const {
-    options
-  } = useSeamlyStateContext();
-  const {
-    panelActive,
-    optionActive,
-    userSelectedOptions,
-    features
-  } = options;
-  const {
-    cobrowsing,
-    sendTranscript
-  } = features;
-  const optionsObj = {
-    cobrowsing,
-    sendTranscript
+    return result;
   };
-  const menuOptions = Object.keys(optionsObj).filter(key => {
-    return optionsObj[key];
-  }).map(option => ({
-    name: option,
-    title: t(`options.${option}.menuTitle`),
-    available: optionsObj[option].enabled
-  }));
-  const allowOptionSelection = cobrowsing || sendTranscript;
-  const dispatch = useSeamlyDispatchContext();
+}
+;// 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;
+
   const {
-    get,
-    set
-  } = useSeamlyObjectStore();
-  const initUserSelectedOptions = useCallback(() => {
-    const storedOptions = get('options') || {};
-    dispatch({
-      type: seamly_option_hooks_SET_USER_SELECTED_OPTIONS,
-      options: storedOptions
-    });
-  }, [get, dispatch]);
-  const setUserSelectedOptions = useCallback(optionValues => {
-    dispatch({
-      type: seamly_option_hooks_SET_USER_SELECTED_OPTIONS,
-      options: optionValues
-    });
-    set('options', optionValues);
-  }, [set, dispatch]);
-  const setUserSelectedOption = useCallback((option, value) => {
-    const storedOptions = get('options') || {};
-    set('options', seamly_option_hooks_objectSpread(seamly_option_hooks_objectSpread({}, storedOptions), {}, {
-      [option]: value
-    }));
-    dispatch({
-      type: seamly_option_hooks_SET_USER_SELECTED_OPTION,
-      option,
-      value
-    });
-  }, [dispatch, get, set]);
+    enabled,
+    threshold
+  } = (config === null || config === void 0 ? void 0 : (_config$messages = config.messages) === null || _config$messages === void 0 ? void 0 : _config$messages.timeIndicator) ?? {};
 
-  const showOption = optionName => {
-    dispatch({
-      type: seamly_option_hooks_SHOW_OPTION,
-      optionName
-    });
-  };
+  if (!enabled) {
+    return events;
+  }
 
-  const hideOption = () => {
-    dispatch({
-      type: seamly_option_hooks_HIDE_OPTION
-    });
-  };
+  const mappedEvents = [];
+  let previousEvent = null;
+  events.forEach((event, idx) => {
+    // always add timeIndicator to first message
+    if (idx === 0) {
+      mappedEvents.push(seamly_state_hooks_objectSpread(seamly_state_hooks_objectSpread({}, event), {}, {
+        timeIndicator: event.payload.occurredAt
+      })); // else check if diff is greater than threshold
+    } else {
+      const timeIndicator = previousEvent && microsecondsToMilliseconds(event.payload.occurredAt - previousEvent.payload.occurredAt) >= threshold ? event.payload.occurredAt : undefined;
+      mappedEvents.push(seamly_state_hooks_objectSpread(seamly_state_hooks_objectSpread({}, event), {}, {
+        timeIndicator
+      }));
+    }
 
+    previousEvent = event;
+  });
+  return mappedEvents;
+});
+const seamly_state_hooks_useEvents = () => useSelector(selectEvents, []);
+const useSeamlyIsLoading = () => seamly_state_hooks_useSeamlyStateContext().isLoading;
+const useSeamlyHeaderData = () => seamly_state_hooks_useSeamlyStateContext().headerTitles;
+const seamly_state_hooks_useSeamlyUnreadCount = () => seamly_state_hooks_useSeamlyStateContext().unreadEvents;
+const seamly_state_hooks_useSkiplink = () => seamly_state_hooks_useSeamlyStateContext().skiplinkTargetId;
+const useSeamlyParticipant = participantId => seamly_state_hooks_useSeamlyStateContext().participantInfo.participants[participantId];
+const useSeamlyServiceInfo = () => seamly_state_hooks_useSeamlyStateContext().serviceInfo;
+const selectLastMessageEventId = createSelector(selectEvents, events => {
+  var _filteredEvents;
+
+  const filteredEvents = events.filter(event => event.type === 'message');
+  return (_filteredEvents = filteredEvents[filteredEvents.length - 1]) === null || _filteredEvents === void 0 ? void 0 : _filteredEvents.payload.id;
+});
+const useLastMessageEventId = () => useSelector(selectLastMessageEventId);
+const useSeamlyIsHistoryLoaded = () => seamly_state_hooks_useSeamlyStateContext().historyLoaded;
+const useSeamlyCurrentAgent = () => {
+  const {
+    participants,
+    currentAgent
+  } = seamly_state_hooks_useSeamlyStateContext().participantInfo;
+  return currentAgent ? participants[currentAgent] : null;
+};
+const useSeamlyServiceData = key => seamly_state_hooks_useSeamlyStateContext().serviceData[key];
+const useEntryTextLimit = () => {
+  const {
+    entryMeta: {
+      options: {
+        text
+      }
+    }
+  } = seamly_state_hooks_useSeamlyStateContext();
+  const {
+    limit
+  } = text || {};
   return {
-    allowOptionSelection,
-    userSelectedOptions,
-    features,
-    menuOptions,
-    initUserSelectedOptions,
-    setUserSelectedOptions,
-    setUserSelectedOption,
-    showOption,
-    hideOption,
-    panelActive,
-    optionActive
+    hasLimit: limit != null,
+    limit: limit != null ? limit : null
   };
 };
-const seamly_option_hooks_useOptionButton = () => {
+const useSeamlyLayoutMode = () => {
   const {
-    optionsButtonId: id
-  } = useSeamlyStateContext();
-  const focusButton = useElementFocusingById(id);
+    layoutMode
+  } = useConfig();
   return {
-    id,
-    focusButton
+    isInline: layoutMode === 'inline',
+    isModal: layoutMode === 'modal',
+    isWindow: layoutMode === 'window',
+    isResolving: !layoutMode
   };
 };
-;// CONCATENATED MODULE: ./src/javascripts/api/errors/seamly-offline-error.js
-class seamly_offline_error_SeamlyOfflineError extends Error {
-  constructor(params) {
-    super(params);
+;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/use-seamly-dispatch.js
 
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, seamly_offline_error_SeamlyOfflineError);
-    }
+/* harmony default export */ const use_seamly_dispatch = ((/* unused pure expression or super */ null && (useStoreDispatch)));
+;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/focus-helper-hooks.js
 
-    this.name = 'SeamlyOfflineError';
-    this.langKey = 'errors.seamlyOffline';
-  }
 
-}
-;// CONCATENATED MODULE: ./src/javascripts/api/errors/seamly-general-error.js
-class seamly_general_error_SeamlyGeneralError extends Error {
-  constructor(params) {
-    super(params);
-
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, seamly_general_error_SeamlyGeneralError);
-    }
 
-    this.name = 'SeamlyGeneralError';
-    this.langKey = 'errors.general';
-    this.action = 'reset';
-  }
 
-}
-;// CONCATENATED MODULE: ./src/javascripts/api/errors/seamly-configuration-error.js
-class seamly_configuration_error_SeamlyConfigurationError extends Error {
-  constructor(params) {
-    super(params);
 
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, seamly_configuration_error_SeamlyConfigurationError);
-    }
+const {
+  SET_SEAMLY_CONTAINER_ELEMENT: focus_helper_hooks_SET_SEAMLY_CONTAINER_ELEMENT
+} = seamly_utils_seamlyActions;
 
-    this.name = 'SeamlyConfigurationError';
-    this.langKey = 'errors.configError';
-  }
+const focusWithRaf = el => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const focusEl = typeof el === 'string' ? document.getElementById(el) : el;
+      focusElement(focusEl);
+    });
+  });
+};
 
-}
-;// CONCATENATED MODULE: ./src/javascripts/api/errors/seamly-session-expired-error.js
-class seamly_session_expired_error_SeamlySessionExpiredError extends Error {
-  constructor(params) {
-    super(params);
+const useSeamlyContainerElement = () => {
+  const {
+    seamlyContainerElement
+  } = useSeamlyStateContext();
+  const dispatch = useSeamlyDispatchContext();
+  const setSeamlyContainerElement = useCallback(element => {
+    dispatch({
+      type: focus_helper_hooks_SET_SEAMLY_CONTAINER_ELEMENT,
+      element
+    });
+  }, [dispatch]);
+  return [seamlyContainerElement, setSeamlyContainerElement];
+};
+const focus_helper_hooks_useElementFocusingById = elementId => useCallback(() => {
+  focusWithRaf(elementId);
+}, [elementId]);
+const focus_helper_hooks_useSkiplinkTargetFocusing = () => {
+  const skiplinkTargetId = useSkiplink();
+  return focus_helper_hooks_useElementFocusingById(skiplinkTargetId);
+};
+const useFocusIfSeamlyContainedFocus = () => {
+  const containerElementRef = useRef(null);
+  const [seamlyContainerElement] = useSeamlyContainerElement();
+  containerElementRef.current = seamlyContainerElement;
+  return useCallback(elementToFocus => {
+    const focusFn = () => {
+      focusWithRaf(elementToFocus);
+    };
 
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, seamly_session_expired_error_SeamlySessionExpiredError);
-    }
+    runIfElementContainsOrHasFocus(containerElementRef.current, focusFn);
+  }, []);
+};
+;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/component-helper-hooks.js
 
-    this.name = 'SeamlySessionExpiredError';
-    this.action = 'reset';
-  }
 
-}
-;// CONCATENATED MODULE: ./src/javascripts/api/errors/seamly-unauthorized-error.js
-class seamly_unauthorized_error_SeamlyUnauthorizedError extends Error {
-  constructor(params) {
-    super(params);
 
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, seamly_unauthorized_error_SeamlyUnauthorizedError);
-    }
+const useSeamlyAppContainerClassNames = () => {
+  return useConfig().appContainerClassNames;
+};
+const useSeamlyMessageContainerClassNames = event => {
+  const {
+    fromClient
+  } = event.payload;
+  const classNames = ['message'];
 
-    this.name = 'SeamlyUnauthorizedError';
-    this.langKey = 'errors.general';
-    this.action = 'reset';
+  if (event.type === 'info') {
+    classNames.push('message--source-info');
+  } else if (!fromClient) {
+    classNames.push('message--source-agent');
+  } else {
+    classNames.push('message--source-user');
   }
 
-}
-;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/use-seamly-interrupt.js
-function use_seamly_interrupt_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 use_seamly_interrupt_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { use_seamly_interrupt_ownKeys(Object(source), true).forEach(function (key) { use_seamly_interrupt_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { use_seamly_interrupt_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function use_seamly_interrupt_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+  return 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; }
 
+function seamly_option_hooks_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { seamly_option_hooks_ownKeys(Object(source), true).forEach(function (key) { seamly_option_hooks_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { seamly_option_hooks_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+function seamly_option_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; }
 
 
 
@@ -2724,64 +2616,109 @@ function use_seamly_interrupt_defineProperty(obj, key, value) { if (key in obj)
 
 
 
+const {
+  SET_USER_SELECTED_OPTION: seamly_option_hooks_SET_USER_SELECTED_OPTION,
+  SET_USER_SELECTED_OPTIONS: seamly_option_hooks_SET_USER_SELECTED_OPTIONS,
+  SHOW_OPTION: seamly_option_hooks_SHOW_OPTION,
+  HIDE_OPTION: seamly_option_hooks_HIDE_OPTION
+} = seamly_utils_seamlyActions;
+const seamly_option_hooks_useSeamlyOptions = () => {
+  const {
+    t
+  } = useI18n();
+  const {
+    options
+  } = useSeamlyStateContext();
+  const {
+    panelActive,
+    optionActive,
+    userSelectedOptions,
+    features
+  } = options;
+  const {
+    cobrowsing,
+    sendTranscript
+  } = features;
+  const optionsObj = {
+    cobrowsing,
+    sendTranscript
+  };
+  const menuOptions = Object.keys(optionsObj).filter(key => {
+    return optionsObj[key];
+  }).map(option => ({
+    name: option,
+    title: t(`options.${option}.menuTitle`),
+    available: optionsObj[option].enabled
+  }));
+  const allowOptionSelection = cobrowsing || sendTranscript;
+  const dispatch = useSeamlyDispatchContext();
+  const {
+    get,
+    set
+  } = useSeamlyObjectStore();
+  const initUserSelectedOptions = useCallback(() => {
+    const storedOptions = get('options') || {};
+    dispatch({
+      type: seamly_option_hooks_SET_USER_SELECTED_OPTIONS,
+      options: storedOptions
+    });
+  }, [get, dispatch]);
+  const setUserSelectedOptions = useCallback(optionValues => {
+    dispatch({
+      type: seamly_option_hooks_SET_USER_SELECTED_OPTIONS,
+      options: optionValues
+    });
+    set('options', optionValues);
+  }, [set, dispatch]);
+  const setUserSelectedOption = useCallback((option, value) => {
+    const storedOptions = get('options') || {};
+    set('options', seamly_option_hooks_objectSpread(seamly_option_hooks_objectSpread({}, storedOptions), {}, {
+      [option]: value
+    }));
+    dispatch({
+      type: seamly_option_hooks_SET_USER_SELECTED_OPTION,
+      option,
+      value
+    });
+  }, [dispatch, get, set]);
 
+  const showOption = optionName => {
+    dispatch({
+      type: seamly_option_hooks_SHOW_OPTION,
+      optionName
+    });
+  };
 
-const {
-  SET_INTERRUPT: use_seamly_interrupt_SET_INTERRUPT
-} = seamlyActions;
+  const hideOption = () => {
+    dispatch({
+      type: seamly_option_hooks_HIDE_OPTION
+    });
+  };
 
-const use_seamly_interrupt_useSeamlyInterrupt = () => {
-  const {
-    t
-  } = useI18n();
-  const {
-    hasInterrupt,
-    meta
-  } = useSeamlyStateContext().interrupt;
-  const dispatch = useSeamlyDispatchContext();
+  return {
+    allowOptionSelection,
+    userSelectedOptions,
+    features,
+    menuOptions,
+    initUserSelectedOptions,
+    setUserSelectedOptions,
+    setUserSelectedOption,
+    showOption,
+    hideOption,
+    panelActive,
+    optionActive
+  };
+};
+const seamly_option_hooks_useOptionButton = () => {
   const {
-    setUserSelectedOption
-  } = useSeamlyOptions();
-  const setInterrupt = useCallback(error => {
-    if (!(error instanceof SeamlyOfflineError)) {
-      setUserSelectedOption(featureKeys.cobrowsing, false);
-    }
-
-    if (error instanceof SeamlyGeneralError || error instanceof SeamlyConfigurationError || error instanceof SeamlySessionExpiredError || error instanceof SeamlyOfflineError || error instanceof SeamlyUnauthorizedError) {
-      const {
-        langKey,
-        action
-      } = error;
-      const title = t(`${langKey}.title`);
-      const message = t(`${langKey}.message`);
-      const srText = t(`${langKey}.srText`);
-      const buttonText = t(`${langKey}.buttonText`);
-      dispatch({
-        type: use_seamly_interrupt_SET_INTERRUPT,
-        interrupt: use_seamly_interrupt_objectSpread(use_seamly_interrupt_objectSpread(use_seamly_interrupt_objectSpread(use_seamly_interrupt_objectSpread({}, langKey ? {
-          title,
-          message,
-          srText
-        } : {}), action ? {
-          action
-        } : {}), action && langKey ? {
-          buttonText
-        } : {}), {}, {
-          originalError: error
-        })
-      });
-    } else {
-      throw error;
-    }
-  }, [dispatch, t, setUserSelectedOption]);
+    optionsButtonId: id
+  } = useSeamlyStateContext();
+  const focusButton = useElementFocusingById(id);
   return {
-    hasInterrupt,
-    meta,
-    setInterrupt
+    id,
+    focusButton
   };
 };
-
-/* harmony default export */ const use_seamly_interrupt = ((/* unused pure expression or super */ null && (use_seamly_interrupt_useSeamlyInterrupt)));
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/core/seamly-file-upload-context.js
 
 const seamly_file_upload_context_SeamlyFileUploadContext = (0,external_preact_namespaceObject.createContext)({});
@@ -2800,7 +2737,7 @@ function file_upload_hooks_defineProperty(obj, key, value) { if (key in obj) { O
 
 const {
   CLEAR_ALL_UPLOADS: file_upload_hooks_CLEAR_ALL_UPLOADS
-} = seamlyActions;
+} = seamly_utils_seamlyActions;
 
 const useSeamlyFileUploadContext = () => useContext(SeamlyFileUploadContext);
 
@@ -2895,6 +2832,189 @@ const utility_hooks_useStableCallback = callback => {
     return isFunction ? (...args) => callbackRef.current(...args) : undefined;
   }, [isFunction]);
 };
+;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/actions.js
+
+const {
+  createAction: interrupt_actions_createAction
+} = createDomain('interrupt');
+const set = interrupt_actions_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));
+;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/selectors.js
+
+
+const selectors_selectState = state => state[String(interrupt_reducer)];
+const selectError = createSelector(selectors_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; }
+
+function hooks_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { hooks_ownKeys(Object(source), true).forEach(function (key) { hooks_defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { hooks_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function hooks_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+
+
+
+
+function hooks_useInterrupt() {
+  const {
+    t
+  } = useI18n();
+  const error = useSelector(Selectors.selectError);
+  const hasInterrupt = Boolean(error);
+  const meta = useMemo(() => {
+    if (!error) return {};
+    const {
+      langKey,
+      action
+    } = error;
+    const title = t(`${langKey}.title`);
+    const message = t(`${langKey}.message`);
+    const srText = t(`${langKey}.srText`);
+    const buttonText = t(`${langKey}.buttonText`);
+    return hooks_objectSpread(hooks_objectSpread(hooks_objectSpread(hooks_objectSpread({}, langKey ? {
+      title,
+      message,
+      srText
+    } : {}), action ? {
+      action
+    } : {}), action && langKey ? {
+      buttonText
+    } : {}), {}, {
+      originalError: error
+    });
+  }, [t, error]);
+  return {
+    hasInterrupt,
+    meta,
+    error
+  };
+}
+;// CONCATENATED MODULE: ./src/javascripts/api/errors/seamly-general-error.js
+class SeamlyGeneralError extends Error {
+  constructor(params) {
+    super(params);
+
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, SeamlyGeneralError);
+    }
+
+    this.name = 'SeamlyGeneralError';
+    this.langKey = 'errors.general';
+    this.action = 'reset';
+  }
+
+}
+;// CONCATENATED MODULE: ./src/javascripts/api/errors/seamly-configuration-error.js
+class SeamlyConfigurationError extends Error {
+  constructor(params) {
+    super(params);
+
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, SeamlyConfigurationError);
+    }
+
+    this.name = 'SeamlyConfigurationError';
+    this.langKey = 'errors.configError';
+  }
+
+}
+;// CONCATENATED MODULE: ./src/javascripts/api/errors/seamly-session-expired-error.js
+class SeamlySessionExpiredError extends Error {
+  constructor(params) {
+    super(params);
+
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, SeamlySessionExpiredError);
+    }
+
+    this.name = 'SeamlySessionExpiredError';
+    this.action = 'reset';
+  }
+
+}
+;// CONCATENATED MODULE: ./src/javascripts/api/errors/seamly-offline-error.js
+class SeamlyOfflineError extends Error {
+  constructor(params) {
+    super(params);
+
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, SeamlyOfflineError);
+    }
+
+    this.name = 'SeamlyOfflineError';
+    this.langKey = 'errors.seamlyOffline';
+  }
+
+}
+;// CONCATENATED MODULE: ./src/javascripts/api/errors/seamly-unauthorized-error.js
+class SeamlyUnauthorizedError extends Error {
+  constructor(params) {
+    super(params);
+
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, SeamlyUnauthorizedError);
+    }
+
+    this.name = 'SeamlyUnauthorizedError';
+    this.langKey = 'errors.general';
+    this.action = 'reset';
+  }
+
+}
+;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/middleware.js
+
+
+
+
+
+
+const handledErrorTypes = [SeamlyGeneralError, SeamlyConfigurationError, SeamlySessionExpiredError, SeamlyOfflineError, SeamlyUnauthorizedError];
+function middleware_createMiddleware() {
+  return () => next => action => {
+    if (action.type === String(Actions.set)) {
+      if (!handledErrorTypes.some(ErrorType => action.error instanceof ErrorType)) {
+        throw action.error;
+      }
+    }
+
+    return next(action);
+  };
+}
+;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/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; }
 
@@ -2913,10 +3033,10 @@ 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,
-  CLEAR_INTERRUPT: use_seamly_commands_CLEAR_INTERRUPT,
   SET_IS_LOADING: use_seamly_commands_SET_IS_LOADING,
   CLEAR_PARTICIPANTS: use_seamly_commands_CLEAR_PARTICIPANTS,
   SET_HEADER_SUB_TITLE: use_seamly_commands_SET_HEADER_SUB_TITLE,
@@ -2925,25 +3045,19 @@ const {
   SET_FEATURES: use_seamly_commands_SET_FEATURES,
   RESET_UPLOAD_STATE: use_seamly_commands_RESET_UPLOAD_STATE,
   RESET_ENTRY_STATE: use_seamly_commands_RESET_ENTRY_STATE
-} = seamlyActions;
+} = seamly_utils_seamlyActions;
 
 const use_seamly_commands_useSeamlyCommands = () => {
   const api = useSeamlyApiContext();
-  const seamlyState = useSeamlyStateContext();
+  const appConfig = useConfig();
   const dispatch = useSeamlyDispatchContext();
   const eventBus = useContext(SeamlyEventBusContext);
-  const {
-    setInterrupt
-  } = useSeamlyInterrupt();
   const hasResponded = useSeamlyHasUserResponded();
   const hasConversation = useSeamlyHasConversation();
   const {
     visible: visibility
   } = useSeamlyStateContext();
   const unreadMessageCount = useSeamlyUnreadCount();
-  const {
-    config: appConfig
-  } = seamlyState;
   const emitEvent = useCallback((...args) => {
     eventBus.emit(...args);
   }, [eventBus]);
@@ -2967,9 +3081,7 @@ const use_seamly_commands_useSeamlyCommands = () => {
     dispatch({
       type: use_seamly_commands_CLEAR_EVENTS
     });
-    dispatch({
-      type: use_seamly_commands_CLEAR_INTERRUPT
-    });
+    dispatch(InterruptActions.clear());
     dispatch({
       type: use_seamly_commands_SET_IS_LOADING,
       isLoading: true
@@ -3011,26 +3123,18 @@ const use_seamly_commands_useSeamlyCommands = () => {
         initialState
       });
     } catch (error) {
-      setInterrupt(error);
+      dispatch(InterruptActions.set(error));
     }
-  }, [api, dispatch, appConfig, setInterrupt]);
-  const getMessageBase = useCallback(type => {
-    const {
-      events
-    } = seamlyState;
-    return {
-      type,
-      id: randomId(),
-      transactionId: randomId(),
-      participant: userParticipantId,
-      fromClient: true,
-      // We add a timestamp of 1 greater than the previous timestamp in the
-      // events array to ensure proper sorting should a history fetch be done
-      // prior to receipt of the related ACK.
-      occurredAt: events.length > 0 ? events[events.length - 1].payload.occurredAt + 1 : Date.now(),
-      meta: {}
-    };
-  }, [seamlyState]);
+  }, [api, dispatch, appConfig]);
+  const getMessageBase = useCallback(type => ({
+    type,
+    id: randomId(),
+    transactionId: randomId(),
+    participant: userParticipantId,
+    fromClient: true,
+    occurredAt: Date.now() * 1000,
+    meta: {}
+  }), []);
   const getTextMessageBase = useCallback(bodyText => {
     const base = getMessageBase('text');
     return use_seamly_commands_objectSpread(use_seamly_commands_objectSpread({}, base), {}, {
@@ -3076,7 +3180,7 @@ const use_seamly_commands_useSeamlyCommands = () => {
       }
     });
   }, [dispatch, getTextMessageBase]);
-  const addUploadBubble = useCallback((id, transactionId, occurredAt, contentType, deleteAt, filename, filesize, url) => {
+  const addUploadBubble = useCallback((id, transactionId, occurredAt, contentType, filename, filesize, url) => {
     dispatch({
       type: use_seamly_commands_ADD_EVENT,
       event: {
@@ -3091,7 +3195,6 @@ const use_seamly_commands_useSeamlyCommands = () => {
           meta: {},
           body: {
             contentType,
-            deleteAt,
             filename,
             filesize,
             url
@@ -3164,9 +3267,9 @@ const use_seamly_commands_useSeamlyCommands = () => {
         });
       }
     }).catch(error => {
-      setInterrupt(error);
+      dispatch(InterruptActions.set(error));
     });
-  }, [api, dispatch, setInterrupt]);
+  }, [api, dispatch]);
   return {
     connect,
     start,
@@ -3235,18 +3338,19 @@ function seamly_entry_hooks_defineProperty(obj, key, value) { if (key in obj) {
 
 
 
+
 const {
   SET_BLOCK_AUTO_ENTRY_SWITCH: seamly_entry_hooks_SET_BLOCK_AUTO_ENTRY_SWITCH,
   SET_ACTIVE_ENTRY_TYPE: seamly_entry_hooks_SET_ACTIVE_ENTRY_TYPE,
   SET_USER_ENTRY_TYPE: seamly_entry_hooks_SET_USER_ENTRY_TYPE
-} = seamlyActions;
+} = seamly_utils_seamlyActions;
 const useSeamlyTyping = () => {
   const {
     sendAction
   } = useSeamlyCommands();
   const {
     typing: typingConfig
-  } = useSeamlyConfig();
+  } = useConfig();
   const {
     features
   } = useSeamlyOptions();
@@ -3367,7 +3471,7 @@ function use_seamly_stored_visibility_defineProperty(obj, key, value) { if (key
 const use_seamly_stored_visibility_useSeamlyStoredVisibility = () => {
   const {
     layoutMode
-  } = useSeamlyConfig();
+  } = useConfig();
   const key = 'visibility';
   const {
     get,
@@ -3398,12 +3502,13 @@ const use_seamly_stored_visibility_useSeamlyStoredVisibility = () => {
 
 
 
+
 const {
   SET_VISIBILITY: use_seamly_visibility_SET_VISIBILITY
-} = seamlyActions;
+} = seamly_utils_seamlyActions;
 
 const use_seamly_visibility_useSeamlyVisibility = () => {
-  const config = useSeamlyConfig();
+  const config = useConfig();
   const {
     layoutMode,
     visibilityCallback
@@ -3478,7 +3583,7 @@ const use_seamly_visibility_useSeamlyVisibility = () => {
 
 const {
   SET_IS_LOADING: use_seamly_chat_SET_IS_LOADING
-} = seamlyActions;
+} = seamly_utils_seamlyActions;
 
 const useSeamlyChat = () => {
   const {
@@ -3622,7 +3727,7 @@ const {
   INIT_IDLE_DETACH_COUNTDOWN: use_seamly_idle_detach_countdown_INIT_IDLE_DETACH_COUNTDOWN,
   DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER: use_seamly_idle_detach_countdown_DECREMENT_IDLE_DETACH_COUNTDOWN_COUNTER,
   STOP_IDLE_DETACH_COUNTDOWN_COUNTER: use_seamly_idle_detach_countdown_STOP_IDLE_DETACH_COUNTDOWN_COUNTER
-} = seamlyActions;
+} = seamly_utils_seamlyActions;
 
 const useSeamlyIdleDetachCountdown = () => {
   const dispatch = useSeamlyDispatchContext();
@@ -3764,7 +3869,7 @@ const useSeamlyIdleDetachCountdown = () => {
 
 const {
   CLEAR_RESUME_CONVERSATION_PROMPT: use_seamly_resume_conversation_prompt_CLEAR_RESUME_CONVERSATION_PROMPT
-} = seamlyActions;
+} = seamly_utils_seamlyActions;
 
 const useSeamlyResumeConversationPrompt = () => {
   const dispatch = useSeamlyDispatchContext();
@@ -3832,7 +3937,6 @@ const useSeamlyResumeConversationPrompt = () => {
 
 
 
-
  // This hook isn't used within the core
 // But it is used in implementations
 // and imported directly from this file
@@ -4275,6 +4379,35 @@ function form_Form(_ref) {
 }
 
 /* harmony default export */ const form_controls_form = ((/* unused pure expression or super */ null && (form_Form)));
+;// CONCATENATED MODULE: ./src/javascripts/ui/components/form-controls/error.js
+
+
+
+
+
+function error_Error({
+  id,
+  error
+}) {
+  const [isAvailable, setIsAvailable] = useState(false);
+  useEffect(() => {
+    const timerId = setTimeout(() => setIsAvailable(true), 300); // 300 = magic number, could be less or more
+
+    return () => clearTimeout(timerId); // clear timer if error is mounted+unmounted within 300
+  }, []);
+  return _jsx("div", {
+    "aria-live": "assertive",
+    "aria-atomic": "true",
+    children: isAvailable && error && _jsxs("span", {
+      id: id,
+      className: className('error'),
+      children: [_jsx(Icon, {
+        name: "error",
+        size: "16"
+      }), error]
+    })
+  });
+}
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/form-controls/wrapper.js
 
 
@@ -4300,17 +4433,9 @@ const wrapper_FormControlWrapper = ({
       id: `${id}-content-hint`,
       className: className('input__content-hint'),
       children: contentHint
-    }), _jsx("div", {
-      "aria-live": "assertive",
-      "aria-atomic": "true",
-      children: !validity && _jsxs("span", {
-        id: `${id}-error`,
-        className: className('error'),
-        children: [_jsx(Icon, {
-          name: "error",
-          size: "16"
-        }), errorText]
-      })
+    }), _jsx(Error, {
+      id: `${id}-error`,
+      error: !validity && errorText
     }), children]
   });
 };
@@ -4807,6 +4932,7 @@ function chat_status_ChatStatus({
 
 
 
+
 function TranslationsChatStatus() {
   const {
     t
@@ -4816,7 +4942,7 @@ function TranslationsChatStatus() {
   } = useTranslationsContainer();
   const {
     hasInterrupt
-  } = useSeamlyInterrupt();
+  } = useInterrupt();
   const {
     isActive,
     disableTranslations,
@@ -4856,7 +4982,7 @@ function TranslationsChatStatus() {
 
 
 ;// CONCATENATED MODULE: ./src/javascripts/style-guide/components/static-core.js
-const static_core_excluded = ["translations"];
+const static_core_excluded = ["translations", "interrupt", "config"];
 
 function static_core_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = static_core_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; }
 
@@ -4869,6 +4995,8 @@ function static_core_objectWithoutPropertiesLoose(source, excluded) { if (source
 
 
 
+
+
 const bareApi = {
   send: () => {},
   reset: () => {
@@ -4891,19 +5019,29 @@ const SeamlyTestCore = ({
   const store = (0,hooks_namespaceObject.useMemo)(() => {
     const _ref = state || {},
           {
-      translations: translationsSlice
+      translations: translationsSlice,
+      interrupt: interruptSlice,
+      config: configSlice
     } = _ref,
           restState = static_core_objectWithoutProperties(_ref, static_core_excluded);
 
-    return (0,web_ui_namespaceObject.createReduxStore)({
-      state: stateReducer,
-      [String(reducer)]: reducer,
-      [String(translations_reducer)]: translations_reducer,
-      [String(Reducer)]: Reducer
-    }, {
-      state: restState,
-      translations: translationsSlice
+    const newStore = (0,web_ui_namespaceObject.createReduxStore)({
+      reducers: {
+        state: stateReducer,
+        [String(config_reducer)]: config_reducer,
+        [String(reducer)]: reducer,
+        [String(translations_reducer)]: translations_reducer,
+        [String(Reducer)]: Reducer,
+        [String(interrupt_reducer)]: interrupt_reducer
+      },
+      initialState: {
+        state: restState,
+        [String(translations_reducer)]: translationsSlice,
+        [String(interrupt_reducer)]: interruptSlice
+      }
     });
+    newStore.dispatch(initialize(configSlice || {}));
+    return newStore;
   }, [state]);
   return state && (0,jsx_runtime_namespaceObject.jsx)(web_ui_namespaceObject.StoreProvider, {
     store: store,
@@ -5043,7 +5181,8 @@ const baseState = {
     layoutMode: 'inline',
     accountConfig: {},
     hideOnNoUserResponse: false,
-    showFaq: false
+    showFaq: false,
+    showDisclaimer: false
   },
   initialState: {},
   unreadEvents: 0,
@@ -5066,14 +5205,12 @@ const baseState = {
     subTitle: 'Test subtitle'
   },
   interrupt: {
-    hasInterrupt: false,
-    meta: {}
+    error: undefined
   },
   historyLoaded: false,
   skiplinkTargetId: (0,web_ui_namespaceObject.randomId)(),
   optionsButtonId: (0,web_ui_namespaceObject.randomId)(),
   cobrowseContainerId: (0,web_ui_namespaceObject.randomId)(),
-  showDisclaimer: false,
   serviceData: {},
   options: {
     features: {},
@@ -5370,7 +5507,7 @@ const ctaMessage = {
   type: 'message',
   payload: {
     body: {
-      description: 'More info about our products?',
+      description: 'Thanks for chatting!\n\nMore info about our **products**?',
       buttonLink: 'https://seamly.ai',
       buttonText: 'View website',
       buttonNewTab: true
@@ -5660,7 +5797,8 @@ const choicePromptMessage = {
         type: 'choice'
       }, {
         id: '9fd9a28f-462d-4f07-9661-606dbe3b9466',
-        text: 'Content',
+        category: 'secondary',
+        text: 'Something else',
         type: 'choice'
       }],
       chooseAgain: true,
@@ -5730,7 +5868,6 @@ const fileDownloadPayload = {
   meta: {},
   body: {
     contentType: 'image/jpg',
-    deleteAt: 1000 * (Date.now() + 3600000),
     filename: 'placeholder.jpg',
     filesize: 991078,
     url: 'https://via.placeholder.com/150'
@@ -5747,9 +5884,7 @@ const fileDownloadAgentMessage = {
 
 const deletedFileDownloadAgentMessage = states_objectSpread(states_objectSpread({}, fileDownloadAgentMessage), {}, {
   payload: states_objectSpread(states_objectSpread({}, fileDownloadAgentMessage.payload), {}, {
-    body: states_objectSpread(states_objectSpread({}, fileDownloadAgentMessage.payload.body), {}, {
-      deleteAt: 1000 * (Date.now() - 3600000)
-    }),
+    body: states_objectSpread({}, fileDownloadAgentMessage.payload.body),
     id: (0,web_ui_namespaceObject.randomId)()
   })
 });
@@ -5763,16 +5898,6 @@ const fileDownloadUserMessage = {
   })
 };
 
-const deletedFileDownloadUserMessage = states_objectSpread(states_objectSpread({}, fileDownloadUserMessage), {}, {
-  payload: states_objectSpread(states_objectSpread({
-    id: (0,web_ui_namespaceObject.randomId)()
-  }, fileDownloadUserMessage.payload), {}, {
-    body: states_objectSpread(states_objectSpread({}, fileDownloadUserMessage.payload.body), {}, {
-      deleteAt: 1000 * (Date.now() - 3600000)
-    })
-  })
-});
-
 const emptyUrlFileDownloadUserMessage = states_objectSpread(states_objectSpread({}, fileDownloadUserMessage), {}, {
   payload: states_objectSpread(states_objectSpread({}, fileDownloadUserMessage.payload), {}, {
     id: (0,web_ui_namespaceObject.randomId)(),
@@ -5872,7 +5997,7 @@ const cardAskText = {
         type: 'ask'
       },
       buttonText: 'Ask about pizzas!',
-      description: 'Pizza Margherita is a typical Neapolitan pizza.',
+      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',
       title: 'Pizza Margherita'
     }
@@ -5890,7 +6015,7 @@ const cardNavigate = {
         type: 'navigate'
       },
       buttonText: 'Order now!',
-      description: 'Pizza Margherita is a typical Neapolitan pizza.',
+      description: 'Pizza Margherita is a **typical Neapolitan pizza**.',
       image: 'https://via.placeholder.com/400x200/dee3e5/6a7f8c?text=Margherita',
       title: 'Pizza Margherita'
     }
@@ -5932,7 +6057,7 @@ const standardState = {
       payload: states_objectSpread(states_objectSpread({}, choicePromptMessage.payload), {}, {
         id: `${choicePromptMessage.payload.id}XXX`
       })
-    }), longTextMessage, userMessage, textMessageBoldItalicUnderline, newTopicDivider, imageMessage, fileDownloadAgentMessage, deletedFileDownloadAgentMessage, userMessageLong, videoMessage, textMessageWithLinks, textMessageWithLongLink, imageMessageWithLightbox, fileDownloadUserMessage, deletedFileDownloadUserMessage, emptyUrlFileDownloadUserMessage, textMesageWithBullets, choicePromptMessage, ctaMessage]
+    }), longTextMessage, userMessage, textMessageBoldItalicUnderline, newTopicDivider, imageMessage, fileDownloadAgentMessage, deletedFileDownloadAgentMessage, userMessageLong, videoMessage, textMessageWithLinks, textMessageWithLongLink, imageMessageWithLightbox, fileDownloadUserMessage, emptyUrlFileDownloadUserMessage, textMesageWithBullets, choicePromptMessage, ctaMessage]
   }),
   userMessages: states_objectSpread(states_objectSpread({
     category: categoryKeys.messages,
@@ -5940,7 +6065,7 @@ const standardState = {
     description: ''
   }, baseState), {}, {
     participantInfo,
-    events: [userMessage, userMessageLong, fileDownloadUserMessage, deletedFileDownloadUserMessage, emptyUrlFileDownloadUserMessage]
+    events: [userMessage, userMessageLong, fileDownloadUserMessage, emptyUrlFileDownloadUserMessage]
   }),
   withParticipants: states_objectSpread(states_objectSpread({
     category: categoryKeys.messages,
@@ -6152,12 +6277,7 @@ const standardState = {
     description: ''
   }, baseState), {}, {
     interrupt: {
-      hasInterrupt: true,
-      meta: {
-        title: 'Connection issues',
-        message: 'There might be a problem with your or our network connection. The chat session should resume as soon the connection is available again.',
-        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.'
-      }
+      error: new web_ui_namespaceObject.SeamlyOfflineError()
     }
   }),
   generalErrorInterrupt: states_objectSpread(states_objectSpread({
@@ -6167,14 +6287,7 @@ const standardState = {
     description: ''
   }, baseState), {}, {
     interrupt: {
-      hasInterrupt: true,
-      meta: {
-        title: 'Something went wrong',
-        message: 'Do you want to start a new chat session?',
-        buttonText: 'Restart chat',
-        action: 'reset',
-        srText: 'Something went wrong with the chat session. You can restart the chat.'
-      }
+      error: new web_ui_namespaceObject.SeamlyGeneralError()
     }
   }),
   configErrorInterrupt: states_objectSpread(states_objectSpread({
@@ -6184,12 +6297,7 @@ const standardState = {
     description: ''
   }, baseState), {}, {
     interrupt: {
-      hasInterrupt: true,
-      meta: {
-        title: 'Chat configuration error.',
-        message: 'We are sorry this happened, please retry at a later time.',
-        srText: 'A chat configuration error occurred. Our apologies, please retry at a later time.'
-      }
+      error: new web_ui_namespaceObject.SeamlyConfigurationError()
     }
   }),
   privacyDisclaimer: states_objectSpread(states_objectSpread({
@@ -6199,8 +6307,7 @@ const standardState = {
   }, baseState), {}, {
     config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
       showDisclaimer: true
-    }),
-    showDisclaimer: true
+    })
   }),
   cobrowserBar: states_objectSpread(states_objectSpread({
     category: categoryKeys.features,
@@ -6742,7 +6849,7 @@ const standardState = {
       payload: states_objectSpread(states_objectSpread({}, choicePromptMessage.payload), {}, {
         id: `${choicePromptMessage.payload.id}XXX`
       })
-    }), longTextMessage, userMessage, textMessageBoldItalicUnderline, newTopicDivider, newTranslationDividerStart, newTranslationDividerStop, imageMessage, fileDownloadAgentMessage, deletedFileDownloadAgentMessage, userMessageLong, videoMessage, textMessageWithLinks, textMessageWithLongLink, imageMessageWithLightbox, fileDownloadUserMessage, deletedFileDownloadUserMessage, emptyUrlFileDownloadUserMessage, textMesageWithBullets, choicePromptMessage, ctaMessage].map(addTranslationData),
+    }), longTextMessage, userMessage, textMessageBoldItalicUnderline, newTopicDivider, newTranslationDividerStart, newTranslationDividerStop, imageMessage, fileDownloadAgentMessage, deletedFileDownloadAgentMessage, userMessageLong, videoMessage, textMessageWithLinks, textMessageWithLongLink, imageMessageWithLightbox, fileDownloadUserMessage, emptyUrlFileDownloadUserMessage, textMesageWithBullets, choicePromptMessage, ctaMessage].map(addTranslationData),
     translations: states_objectSpread(states_objectSpread({}, translationsSlice), {}, {
       currentLocale: 'nl',
       isActive: true,
@@ -7002,7 +7109,6 @@ const StyleGuideApp = ({
   }, [setStaticState, stateUpdateCallback]);
   const getState = (0,hooks_namespaceObject.useCallback)((layoutMode, feature) => {
     const {
-      showDisclaimer,
       defaults
     } = config;
     const {
@@ -7019,14 +7125,13 @@ const StyleGuideApp = ({
     } = defaults || {};
 
     const updatedState = app_objectSpread(app_objectSpread({}, bareState), {}, {
-      config: app_objectSpread(app_objectSpread(app_objectSpread(app_objectSpread({}, bareState.config), (0,web_ui_namespaceObject.getSeamlyConfig)(config)), {}, {
+      config: app_objectSpread(app_objectSpread(app_objectSpread(app_objectSpread({}, bareState.config), config), {}, {
         layoutMode: bareState.config.layoutMode
       }, overrideMessages ? {
         messages: overrideMessages
       } : {}), {}, {
         showFaq
       }),
-      showDisclaimer: showDisclaimer != null ? showDisclaimer : bareState.showDisclaimer,
       headerTitles: app_objectSpread(app_objectSpread({}, bareState.headerTitles), {}, {
         subTitle: agentName || bareState.headerTitles.subTitle
       })
@@ -7158,7 +7263,7 @@ class SeamlyStyleGuideInstance extends web_ui_namespaceObject.Engine {
   }
 
   render() {
-    const restComponents = style_guide_engine_objectSpread(style_guide_engine_objectSpread({}, this.customComponents || {}), {}, {
+    const restComponents = style_guide_engine_objectSpread(style_guide_engine_objectSpread({}, this.config.customComponents || {}), {}, {
       view: undefined
     });