@seamly/web-ui 20.0.0-beta.6 → 20.1.0

package/build/dist/lib/standalone.js

@@ -3164,7 +3164,7 @@ module.exports = entryVirtual('Array').map;
 /***/ 2999:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
-__webpack_require__(9407);
+__webpack_require__(1876);
 var entryVirtual = __webpack_require__(5703);
 
 module.exports = entryVirtual('Array').reduce;
@@ -3172,7 +3172,7 @@ module.exports = entryVirtual('Array').reduce;
 
 /***/ }),
 
-/***/ 1876:
+/***/ 5573:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 __webpack_require__(1490);
@@ -3426,7 +3426,7 @@ module.exports = function (it) {
 /***/ 1060:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
-var reverse = __webpack_require__(1876);
+var reverse = __webpack_require__(5573);
 
 var ArrayPrototype = Array.prototype;
 
@@ -7850,7 +7850,7 @@ $({ target: 'Array', proto: true, forced: !HAS_SPECIES_SUPPORT }, {
 
 /***/ }),
 
-/***/ 9407:
+/***/ 1876:
 /***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
 
 "use strict";
@@ -15833,24 +15833,68 @@ const useSelectorWithProps = function useSelectorWithProps(selector, props, inpu
 function useConfig() {
   return useSelector(selectConfig);
 }
-// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/sort.js
-var sort = __webpack_require__(7302);
-var sort_default = /*#__PURE__*/__webpack_require__.n(sort);
-// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/reverse.js
-var reverse = __webpack_require__(7093);
-var reverse_default = /*#__PURE__*/__webpack_require__.n(reverse);
-// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/find.js
-var find = __webpack_require__(4473);
-var find_default = /*#__PURE__*/__webpack_require__.n(find);
-// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/index-of.js
-var instance_index_of = __webpack_require__(1643);
-var instance_index_of_default = /*#__PURE__*/__webpack_require__.n(instance_index_of);
+function useParticipants() {
+  const {
+    agentParticipant,
+    userParticipant
+  } = useSelector(selectConfig);
+  return {
+    agent: agentParticipant,
+    user: userParticipant
+  };
+}
+function useStartChatIcon() {
+  const {
+    startChatIcon
+  } = useSelector(selectConfig);
+  return startChatIcon;
+}
+;// CONCATENATED MODULE: ./src/javascripts/config.js
+const CSS_NAME = 'cvco';
+const apiVersion = '2';
+const 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 screenReaderDebounceDelaySeconds = 10;
+const activitySendDelay = 15000;
+const maxCharacterWarningLimit = 50;
+const maxCharacterSrDebounceDelay = 300;
+const defaultTransitionTimeMs = 300; // How long to wait before we decide the user isn't typing
+
+const typingTimeout = 2000;
+const defaultConfig = {
+  namespace: 'default',
+  layoutMode: 'window',
+  // "window", "inline" ("sidebar")
+  messages: {
+    agent: {
+      showAvatar: false,
+      // true, "inline"
+      showName: false
+    },
+    user: {
+      showAvatar: false,
+      // true, "inline"
+      showName: false
+    },
+    timeIndicator: {
+      enabled: false,
+      threshold: 3600000 // Default threshold is an hour in milliseconds
+
+    }
+  }
+};
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/set-timeout.js
 var set_timeout = __webpack_require__(3032);
 var set_timeout_default = /*#__PURE__*/__webpack_require__.n(set_timeout);
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/parse-float.js
 var parse_float = __webpack_require__(1238);
 var parse_float_default = /*#__PURE__*/__webpack_require__.n(parse_float);
+// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/index-of.js
+var instance_index_of = __webpack_require__(1643);
+var instance_index_of_default = /*#__PURE__*/__webpack_require__.n(instance_index_of);
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/reduce.js
 var reduce = __webpack_require__(2366);
 var reduce_default = /*#__PURE__*/__webpack_require__.n(reduce);
@@ -16068,6 +16112,15 @@ const omit = (obj, keys) => {
     return accum;
   }, {});
 };
+// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/sort.js
+var sort = __webpack_require__(7302);
+var sort_default = /*#__PURE__*/__webpack_require__.n(sort);
+// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/reverse.js
+var reverse = __webpack_require__(7093);
+var reverse_default = /*#__PURE__*/__webpack_require__.n(reverse);
+// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/find.js
+var find = __webpack_require__(4473);
+var find_default = /*#__PURE__*/__webpack_require__.n(find);
 ;// CONCATENATED MODULE: ./src/javascripts/ui/utils/seamly-utils.js
 
 
@@ -16273,9 +16326,19 @@ const participantReducer = (state, action) => {
       };
 
     case SET_PARTICIPANT:
+      // TODO: a) Styleguide only! b) Should be removed after styleguide overhaul.
+      if (!state) {
+        return {
+          participants: {},
+          currentAgent: ''
+        };
+      }
+
       const {
         participants
-      } = state;
+      } = state || {
+        participants: {}
+      };
       const {
         id,
         avatar,
@@ -16824,71 +16887,6 @@ const seamlyStateReducer = (state, action) => {
       return state;
   }
 };
-;// 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(initialize):
-      case String(update):
-        if (action !== null && action !== void 0 && (_action$config = action.config) !== null && _action$config !== void 0 && (_action$config$defaul = _action$config.defaults) !== null && _action$config$defaul !== void 0 && _action$config$defaul.agentName) {
-          var _action$config2, _action$config2$defau;
-
-          dispatch({
-            type: seamlyActions.SET_HEADER_SUB_TITLE,
-            title: action === null || action === void 0 ? void 0 : (_action$config2 = action.config) === null || _action$config2 === void 0 ? void 0 : (_action$config2$defau = _action$config2.defaults) === null || _action$config2$defau === void 0 ? void 0 : _action$config2$defau.agentName
-          });
-        }
-
-    }
-
-    return result;
-  };
-}
-;// CONCATENATED MODULE: ./src/javascripts/config.js
-const CSS_NAME = 'cvco';
-const apiVersion = '2';
-const 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 screenReaderDebounceDelaySeconds = 10;
-const activitySendDelay = 15000;
-const maxCharacterWarningLimit = 50;
-const maxCharacterSrDebounceDelay = 300;
-const defaultTransitionTimeMs = 300; // How long to wait before we decide the user isn't typing
-
-const typingTimeout = 2000;
-const defaultConfig = {
-  namespace: 'default',
-  layoutMode: 'window',
-  // "window", "inline" ("sidebar")
-  messages: {
-    agent: {
-      showAvatar: false,
-      // true, "inline"
-      showName: false
-    },
-    user: {
-      showAvatar: false,
-      // true, "inline"
-      showName: false
-    },
-    timeIndicator: {
-      enabled: false,
-      threshold: 3600000 // Default threshold is an hour in milliseconds
-
-    }
-  }
-};
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/promise.js
 var promise = __webpack_require__(3476);
 var promise_default = /*#__PURE__*/__webpack_require__.n(promise);
@@ -16979,43 +16977,6 @@ const {
 
 const selectUserHasResponded = createSelector(app_utils_selectState, state => state.userHasResponded);
 
-;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/utils.js
-
-
-const {
-  createAction: visibility_utils_createAction,
-  createActions: utils_createActions,
-  createThunk: visibility_utils_createThunk,
-  createReducer: visibility_utils_createReducer,
-  selectState: visibility_utils_selectState
-} = createDomain('visibility');
-const calculateVisibility = ({
-  hasResponded,
-  previousVisibility,
-  requestedVisibility,
-  config
-}) => {
-  const {
-    defaults,
-    layoutMode,
-    hideOnNoUserResponse
-  } = config;
-  const {
-    visible: defaultVisibility
-  } = defaults || {}; // Requesting open should override the responded check.
-
-  if (layoutMode === 'window' && hideOnNoUserResponse && requestedVisibility !== visibilityStates.open) {
-    return hasResponded ? requestedVisibility || previousVisibility || visibilityStates.open : visibilityStates.hidden;
-  }
-
-  const baseVisibility = visibilityStates.minimized;
-  return requestedVisibility || previousVisibility || defaultVisibility || baseVisibility;
-};
-;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/selectors.js
-
-
-const selectVisibility = createSelector(visibility_utils_selectState, state => state.visibility);
-
 ;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/seamly-state-hooks.js
 
 
@@ -17138,6 +17099,43 @@ const useSeamlyLayoutMode = () => {
     isResolving: !layoutMode
   };
 };
+;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/utils.js
+
+
+const {
+  createAction: visibility_utils_createAction,
+  createActions: utils_createActions,
+  createThunk: visibility_utils_createThunk,
+  createReducer: visibility_utils_createReducer,
+  selectState: visibility_utils_selectState
+} = createDomain('visibility');
+const calculateVisibility = ({
+  hasResponded,
+  previousVisibility,
+  requestedVisibility,
+  config
+}) => {
+  const {
+    defaults,
+    layoutMode,
+    hideOnNoUserResponse
+  } = config;
+  const {
+    visible: defaultVisibility
+  } = defaults || {}; // Requesting open should override the responded check.
+
+  if (layoutMode === 'window' && hideOnNoUserResponse && requestedVisibility !== visibilityStates.open) {
+    return hasResponded ? requestedVisibility || previousVisibility || visibilityStates.open : visibilityStates.hidden;
+  }
+
+  const baseVisibility = visibilityStates.minimized;
+  return requestedVisibility || previousVisibility || defaultVisibility || baseVisibility;
+};
+;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/selectors.js
+
+
+const selectVisibility = createSelector(visibility_utils_selectState, state => state.visibility);
+
 ;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/actions.js
 
 
@@ -17274,6 +17272,7 @@ class SeamlyBaseError extends Error {
     if (originalError !== null && originalError !== void 0 && originalError.payload) {
       this.originalEvent = originalError;
       this.originalError = originalError.payload.error;
+      this.message = `Event of type ${originalError.payload.type} encountered`;
     }
 
     if (originalError !== null && originalError !== void 0 && originalError.error) {
@@ -17334,7 +17333,10 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
     const {
       features,
       defaultLocale,
-      preChat
+      preChat,
+      agentParticipant,
+      userParticipant,
+      startChatIcon
     } = await api.getConfig();
     dispatch({
       type: seamlyActions.SET_FEATURES,
@@ -17346,6 +17348,18 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
       type: 'message',
       payload
     }))));
+    dispatch(update({
+      agentParticipant,
+      userParticipant,
+      startChatIcon
+    }));
+
+    if (agentParticipant !== null && agentParticipant !== void 0 && agentParticipant.name) {
+      dispatch({
+        type: seamlyActions.SET_HEADER_TITLE,
+        title: agentParticipant.name
+      });
+    }
   } catch (e) {
     throw new SeamlyUnavailableError();
   }
@@ -17422,7 +17436,7 @@ const initialState = reducer_objectSpread(reducer_objectSpread({}, defaultConfig
   preChatEvents: []
 });
 
-const configKeys = ['hideOnNoUserResponse', 'showDisclaimer', 'showFaq', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'visible', 'visibilityCallback', 'errorCallback'];
+const configKeys = ['hideOnNoUserResponse', 'showDisclaimer', 'showFaq', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'visible', 'visibilityCallback', 'errorCallback', 'agentParticipant', 'userParticipant', 'startChatIcon'];
 
 const updateState = (state, {
   config
@@ -17470,7 +17484,6 @@ const updateState = (state, {
 
 
 
-
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/flat.js
 var flat = __webpack_require__(6423);
 var flat_default = /*#__PURE__*/__webpack_require__.n(flat);
@@ -18628,34 +18641,6 @@ const useFileUploads = () => {
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/trim.js
 var trim = __webpack_require__(5843);
 var trim_default = /*#__PURE__*/__webpack_require__.n(trim);
-;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/utility-hooks.js
-
-
-
-const useForceUpdate = () => {
-  // This is an escape hatch mentioned in the React docs:
-  // https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
-
-  /* eslint-disable-next-line no-unused-vars */
-  const [ignored, forceUpdate] = hooks_module_p(x => x + 1, 0);
-  return hooks_module_A(() => {
-    set_timeout_default()(() => {
-      forceUpdate();
-    });
-  }, []);
-};
-const useGeneratedId = () => {
-  const [id] = l(() => randomId());
-  return id;
-};
-const useStableCallback = callback => {
-  const callbackRef = hooks_module_s();
-  callbackRef.current = callback;
-  const isFunction = typeof callback === 'function';
-  return hooks_module_d(() => {
-    return isFunction ? (...args) => callbackRef.current(...args) : undefined;
-  }, [isFunction]);
-};
 ;// CONCATENATED MODULE: ./src/javascripts/domains/interrupt/selectors.js
 
 
@@ -18767,7 +18752,7 @@ class SeamlyUnauthorizedError extends SeamlyBaseError {
 
 
 const handledErrorTypes = [SeamlyGeneralError, SeamlyConfigurationError, SeamlySessionExpiredError, SeamlyOfflineError, SeamlyUnauthorizedError, SeamlyUnavailableError];
-function middleware_createMiddleware({
+function createMiddleware({
   api
 }) {
   return () => next => action => {
@@ -18898,20 +18883,48 @@ const visibility_reducer_initialState = {
 
 
 
-;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/use-seamly-commands.js
-
-
-
-
-
-
-
-
-
-
-function use_seamly_commands_ownKeys(object, enumerableOnly) { var keys = keys_default()(object); if ((get_own_property_symbols_default())) { var symbols = get_own_property_symbols_default()(object); if (enumerableOnly) { symbols = filter_default()(symbols).call(symbols, function (sym) { return get_own_property_descriptor_default()(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/utility-hooks.js
 
-function use_seamly_commands_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; for_each_default()(_context = use_seamly_commands_ownKeys(Object(source), true)).call(_context, function (key) { defineProperty_defineProperty(target, key, source[key]); }); } else if ((get_own_property_descriptors_default())) { define_properties_default()(target, get_own_property_descriptors_default()(source)); } else { var _context2; for_each_default()(_context2 = use_seamly_commands_ownKeys(Object(source))).call(_context2, function (key) { define_property_default()(target, key, get_own_property_descriptor_default()(source, key)); }); } } return target; }
+
+
+const useForceUpdate = () => {
+  // This is an escape hatch mentioned in the React docs:
+  // https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
+
+  /* eslint-disable-next-line no-unused-vars */
+  const [ignored, forceUpdate] = hooks_module_p(x => x + 1, 0);
+  return hooks_module_A(() => {
+    set_timeout_default()(() => {
+      forceUpdate();
+    });
+  }, []);
+};
+const useGeneratedId = () => {
+  const [id] = l(() => randomId());
+  return id;
+};
+const useStableCallback = callback => {
+  const callbackRef = hooks_module_s();
+  callbackRef.current = callback;
+  const isFunction = typeof callback === 'function';
+  return hooks_module_d(() => {
+    return isFunction ? (...args) => callbackRef.current(...args) : undefined;
+  }, [isFunction]);
+};
+;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/use-seamly-commands.js
+
+
+
+
+
+
+
+
+
+
+function use_seamly_commands_ownKeys(object, enumerableOnly) { var keys = keys_default()(object); if ((get_own_property_symbols_default())) { var symbols = get_own_property_symbols_default()(object); if (enumerableOnly) { symbols = filter_default()(symbols).call(symbols, function (sym) { return get_own_property_descriptor_default()(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function use_seamly_commands_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; for_each_default()(_context = use_seamly_commands_ownKeys(Object(source), true)).call(_context, function (key) { defineProperty_defineProperty(target, key, source[key]); }); } else if ((get_own_property_descriptors_default())) { define_properties_default()(target, get_own_property_descriptors_default()(source)); } else { var _context2; for_each_default()(_context2 = use_seamly_commands_ownKeys(Object(source))).call(_context2, function (key) { define_property_default()(target, key, get_own_property_descriptor_default()(source, key)); }); } } return target; }
 
 
 
@@ -19872,7 +19885,7 @@ function useTranslationsContainer() {
 
 
 
-function translations_middleware_createMiddleware() {
+function middleware_createMiddleware() {
   return ({
     dispatch,
     getState
@@ -20565,10 +20578,14 @@ function FormProvider(_ref) {
     });
   }, [setExternalErrors]);
   const handleSubmit = hooks_module_A(e => {
-    e.preventDefault();
-    setIsSubmitted(true);
+    var _e$submitter;
 
-    if (validationIsValid) {
+    e.preventDefault(); // If the submitter is set to being aria-disabled, block the submit action
+
+    const ariaDisabled = ((_e$submitter = e.submitter) === null || _e$submitter === void 0 ? void 0 : _e$submitter.ariaDisabled) === 'true';
+    setIsSubmitted(!ariaDisabled);
+
+    if (!ariaDisabled && validationIsValid) {
       onSubmit(values, {
         updateControlValue,
         setError
@@ -20737,6 +20754,201 @@ function updateFormControl(state, formId, name, controlState) {
 
 
 
+;// CONCATENATED MODULE: ./src/javascripts/ui/utils/form-utils.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+function form_utils_ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function form_utils_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context4; _forEachInstanceProperty(_context4 = form_utils_ownKeys(Object(source), true)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context5; _forEachInstanceProperty(_context5 = form_utils_ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const formActions = {
+  REGISTER_FORM: 'REGISTER_FORM',
+  DE_REGISTER_FORM: 'DE_REGISTER_FORM',
+  REGISTER: 'REGISTER',
+  DE_REGISTER: 'DEREGISTER',
+  SET_VALUE: 'SET_VALUE',
+  SET_VALIDITY: 'SET_VALIDITY',
+  SET_STATE: 'SET_STATE',
+  SET_SUBMITTED: 'SET_SUBMITTED',
+  SET_PERSIST_FORM_DATA: 'SET_PERSIST_FORM_DATA'
+};
+const {
+  REGISTER_FORM,
+  DE_REGISTER_FORM,
+  REGISTER,
+  DE_REGISTER,
+  SET_VALUE,
+  SET_VALIDITY,
+  SET_STATE,
+  SET_SUBMITTED,
+  SET_PERSIST_FORM_DATA
+} = formActions;
+const getValidator = (fn, errorText, compareValue = null) => ({
+  fn,
+  errorText,
+  compareValue
+});
+const formReducer = (state, action) => {
+  var _context, _context2, _context3;
+
+  const {
+    formId,
+    name,
+    controlId,
+    value,
+    data,
+    validity,
+    errorText,
+    hasSubmitted,
+    persistData
+  } = action;
+
+  const setControls = controls => form_utils_objectSpread(form_utils_objectSpread({}, state), {}, {
+    [formId]: form_utils_objectSpread(form_utils_objectSpread({}, state[formId]), {}, {
+      controls: form_utils_objectSpread(form_utils_objectSpread({}, state[formId].controls), controls)
+    })
+  });
+
+  switch (action.type) {
+    case REGISTER_FORM:
+      return form_utils_objectSpread({
+        [formId]: {
+          controls: {},
+          validity: true,
+          hasSubmitted: false,
+          persistData: false
+        }
+      }, state);
+
+    case DE_REGISTER_FORM:
+      const removedFormState = form_utils_objectSpread({}, state);
+
+      delete removedFormState[formId];
+      return removedFormState;
+
+    case REGISTER:
+      const {
+        value: existingValue,
+        validity: existingValidity,
+        errorText: existingErrorText
+      } = state[formId].controls[name] || {};
+      return setControls({
+        [name]: {
+          controlId,
+          value: existingValue || value,
+          validity: existingValidity !== false,
+          errorText: existingErrorText || ''
+        }
+      });
+
+    case DE_REGISTER:
+      const relatedForm = state[formId];
+
+      if (!relatedForm) {
+        return state;
+      }
+
+      const newControls = form_utils_objectSpread({}, relatedForm.controls);
+
+      delete newControls[action.name];
+      return form_utils_objectSpread(form_utils_objectSpread({}, state), {}, {
+        [formId]: form_utils_objectSpread(form_utils_objectSpread({}, relatedForm), {}, {
+          controls: newControls
+        })
+      });
+
+    case SET_VALUE:
+      return setControls({
+        [name]: form_utils_objectSpread(form_utils_objectSpread({}, state[formId].controls[name]), {}, {
+          value
+        })
+      });
+
+    case SET_VALIDITY:
+      const newControlValidities = form_utils_objectSpread(form_utils_objectSpread({}, state[formId].controls), {}, {
+        [name]: form_utils_objectSpread(form_utils_objectSpread({}, state[formId].controls[name]), {}, {
+          validity,
+          errorText
+        })
+      });
+
+      return form_utils_objectSpread(form_utils_objectSpread({}, state), {}, {
+        [formId]: form_utils_objectSpread(form_utils_objectSpread({}, state[formId]), {}, {
+          controls: newControlValidities,
+          validity: _everyInstanceProperty(_context = _mapInstanceProperty(_context2 = _Object$keys(newControlValidities)).call(_context2, key => newControlValidities[key].validity)).call(_context, v => v)
+        })
+      });
+
+    case SET_STATE:
+      return form_utils_objectSpread(form_utils_objectSpread({}, state), {}, {
+        [formId]: form_utils_objectSpread(form_utils_objectSpread({}, state[formId]), {}, {
+          controls: _reduceInstanceProperty(_context3 = _Object$keys(data)).call(_context3, (acc, key) => {
+            return form_utils_objectSpread(form_utils_objectSpread({}, acc), {}, {
+              [key]: form_utils_objectSpread(form_utils_objectSpread({}, state[formId].controls[key]), {}, {
+                value: data[key],
+                validity: true,
+                errorText: ''
+              })
+            });
+          }, form_utils_objectSpread({}, state.controls))
+        })
+      });
+
+    case SET_SUBMITTED:
+      return form_utils_objectSpread(form_utils_objectSpread({}, state), {}, {
+        [formId]: form_utils_objectSpread(form_utils_objectSpread({}, state[formId]), {}, {
+          hasSubmitted
+        })
+      });
+
+    case SET_PERSIST_FORM_DATA:
+      return form_utils_objectSpread(form_utils_objectSpread({}, state), {}, {
+        [formId]: form_utils_objectSpread(form_utils_objectSpread({}, state[formId]), {}, {
+          persistData
+        })
+      });
+
+    default:
+      return state;
+  }
+};
+;// CONCATENATED MODULE: ./src/javascripts/ui/utils/validations.js
+
+const validateFileSize = (fileList, maxSize) => {
+  let isValid = true;
+
+  for (let i = 0; i < fileList.length; i++) {
+    if (fileList[i].size > maxSize) {
+      isValid = false;
+    }
+  }
+
+  return isValid;
+};
+const fileListObjectIsNotEmpty = fileListObj => !!(fileListObj !== null && fileListObj !== void 0 && fileListObj.length) > 0;
+/* eslint-disable no-control-regex */
+
+const isEmailString = val => {
+  const regex = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i;
+
+  const trimmedVal = val && trim_default()(val).call(val);
+
+  return !!(trimmedVal && trimmedVal.match(regex));
+};
+/* eslint-enable no-control-regex */
+
+const isNotEmptyString = val => !!val;
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/form-controls/form.js
 
 
@@ -20964,248 +21176,53 @@ function TranslationsOptionsDialogForm({
     var _languages$find;
 
     return languages === null || languages === void 0 ? void 0 : (_languages$find = find_default()(languages).call(languages, lang => lang.locale === currentLocale)) === null || _languages$find === void 0 ? void 0 : _languages$find.nativeName;
-  }, [languages, currentLocale]);
-  const options = hooks_module_d(() => {
-    var _context;
-
-    return [{
-      value: '',
-      label: t('translations.settings.defaultOptionLabel')
-    }, ...map_default()(_context = filter_default()(languages).call(languages, language => language.locale.toLowerCase() !== String(uiLocale).toLowerCase())).call(_context, language => ({
-      value: language.locale,
-      label: language.nativeName
-    }))];
-  }, [t, languages, uiLocale]);
-  return jsxRuntime_module_e(form_controls_form, {
-    noValidate: "true",
-    className: css_className('options__form'),
-    children: [jsxRuntime_module_e("p", {
-      className: css_className('options__description'),
-      id: descriptionId,
-      children: t('translations.settings.description')
-    }), isActive ? jsxRuntime_module_e(d, {
-      children: [jsxRuntime_module_e("h3", {
-        children: t('translations.settings.currentTranslationLabel')
-      }), jsxRuntime_module_e("p", {
-        className: css_className('options__active-language'),
-        children: languageName
-      })]
-    }) : jsxRuntime_module_e(form_controls_select, {
-      name: controlName,
-      type: "text",
-      className: css_className('input__select'),
-      "aria-describedby": descriptionId,
-      labelClass: css_className('label'),
-      labelText: t('translations.settings.inputLabel'),
-      options: options,
-      defaultValue: currentLocale || ''
-    }), jsxRuntime_module_e("div", {
-      className: css_className('options__actions'),
-      children: jsxRuntime_module_e("button", {
-        type: "submit",
-        className: css_className('button', 'button--primary', 'options__submit'),
-        children: isActive ? t('translations.settings.endButtonText') : t('translations.settings.startButtonText')
-      })
-    })]
-  });
-}
-
-/* harmony default export */ var options_dialog_form = (TranslationsOptionsDialogForm);
-;// CONCATENATED MODULE: ./src/javascripts/ui/utils/form-utils.js
-
-
-
-
-
-
-
-
-
-
-
-
-
-function form_utils_ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function form_utils_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context4; _forEachInstanceProperty(_context4 = form_utils_ownKeys(Object(source), true)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context5; _forEachInstanceProperty(_context5 = form_utils_ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-const formActions = {
-  REGISTER_FORM: 'REGISTER_FORM',
-  DE_REGISTER_FORM: 'DE_REGISTER_FORM',
-  REGISTER: 'REGISTER',
-  DE_REGISTER: 'DEREGISTER',
-  SET_VALUE: 'SET_VALUE',
-  SET_VALIDITY: 'SET_VALIDITY',
-  SET_STATE: 'SET_STATE',
-  SET_SUBMITTED: 'SET_SUBMITTED',
-  SET_PERSIST_FORM_DATA: 'SET_PERSIST_FORM_DATA'
-};
-const {
-  REGISTER_FORM,
-  DE_REGISTER_FORM,
-  REGISTER,
-  DE_REGISTER,
-  SET_VALUE,
-  SET_VALIDITY,
-  SET_STATE,
-  SET_SUBMITTED,
-  SET_PERSIST_FORM_DATA
-} = formActions;
-const getValidator = (fn, errorText, compareValue = null) => ({
-  fn,
-  errorText,
-  compareValue
-});
-const formReducer = (state, action) => {
-  var _context, _context2, _context3;
-
-  const {
-    formId,
-    name,
-    controlId,
-    value,
-    data,
-    validity,
-    errorText,
-    hasSubmitted,
-    persistData
-  } = action;
-
-  const setControls = controls => form_utils_objectSpread(form_utils_objectSpread({}, state), {}, {
-    [formId]: form_utils_objectSpread(form_utils_objectSpread({}, state[formId]), {}, {
-      controls: form_utils_objectSpread(form_utils_objectSpread({}, state[formId].controls), controls)
-    })
-  });
-
-  switch (action.type) {
-    case REGISTER_FORM:
-      return form_utils_objectSpread({
-        [formId]: {
-          controls: {},
-          validity: true,
-          hasSubmitted: false,
-          persistData: false
-        }
-      }, state);
-
-    case DE_REGISTER_FORM:
-      const removedFormState = form_utils_objectSpread({}, state);
-
-      delete removedFormState[formId];
-      return removedFormState;
-
-    case REGISTER:
-      const {
-        value: existingValue,
-        validity: existingValidity,
-        errorText: existingErrorText
-      } = state[formId].controls[name] || {};
-      return setControls({
-        [name]: {
-          controlId,
-          value: existingValue || value,
-          validity: existingValidity !== false,
-          errorText: existingErrorText || ''
-        }
-      });
-
-    case DE_REGISTER:
-      const relatedForm = state[formId];
-
-      if (!relatedForm) {
-        return state;
-      }
-
-      const newControls = form_utils_objectSpread({}, relatedForm.controls);
-
-      delete newControls[action.name];
-      return form_utils_objectSpread(form_utils_objectSpread({}, state), {}, {
-        [formId]: form_utils_objectSpread(form_utils_objectSpread({}, relatedForm), {}, {
-          controls: newControls
-        })
-      });
-
-    case SET_VALUE:
-      return setControls({
-        [name]: form_utils_objectSpread(form_utils_objectSpread({}, state[formId].controls[name]), {}, {
-          value
-        })
-      });
-
-    case SET_VALIDITY:
-      const newControlValidities = form_utils_objectSpread(form_utils_objectSpread({}, state[formId].controls), {}, {
-        [name]: form_utils_objectSpread(form_utils_objectSpread({}, state[formId].controls[name]), {}, {
-          validity,
-          errorText
-        })
-      });
-
-      return form_utils_objectSpread(form_utils_objectSpread({}, state), {}, {
-        [formId]: form_utils_objectSpread(form_utils_objectSpread({}, state[formId]), {}, {
-          controls: newControlValidities,
-          validity: _everyInstanceProperty(_context = _mapInstanceProperty(_context2 = _Object$keys(newControlValidities)).call(_context2, key => newControlValidities[key].validity)).call(_context, v => v)
-        })
-      });
-
-    case SET_STATE:
-      return form_utils_objectSpread(form_utils_objectSpread({}, state), {}, {
-        [formId]: form_utils_objectSpread(form_utils_objectSpread({}, state[formId]), {}, {
-          controls: _reduceInstanceProperty(_context3 = _Object$keys(data)).call(_context3, (acc, key) => {
-            return form_utils_objectSpread(form_utils_objectSpread({}, acc), {}, {
-              [key]: form_utils_objectSpread(form_utils_objectSpread({}, state[formId].controls[key]), {}, {
-                value: data[key],
-                validity: true,
-                errorText: ''
-              })
-            });
-          }, form_utils_objectSpread({}, state.controls))
-        })
-      });
-
-    case SET_SUBMITTED:
-      return form_utils_objectSpread(form_utils_objectSpread({}, state), {}, {
-        [formId]: form_utils_objectSpread(form_utils_objectSpread({}, state[formId]), {}, {
-          hasSubmitted
-        })
-      });
-
-    case SET_PERSIST_FORM_DATA:
-      return form_utils_objectSpread(form_utils_objectSpread({}, state), {}, {
-        [formId]: form_utils_objectSpread(form_utils_objectSpread({}, state[formId]), {}, {
-          persistData
-        })
-      });
-
-    default:
-      return state;
-  }
-};
-;// CONCATENATED MODULE: ./src/javascripts/ui/utils/validations.js
-
-const validateFileSize = (fileList, maxSize) => {
-  let isValid = true;
-
-  for (let i = 0; i < fileList.length; i++) {
-    if (fileList[i].size > maxSize) {
-      isValid = false;
-    }
-  }
-
-  return isValid;
-};
-const fileListObjectIsNotEmpty = fileListObj => !!(fileListObj !== null && fileListObj !== void 0 && fileListObj.length) > 0;
-/* eslint-disable no-control-regex */
-
-const isEmailString = val => {
-  const regex = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i;
-
-  const trimmedVal = val && trim_default()(val).call(val);
+  }, [languages, currentLocale]);
+  const options = hooks_module_d(() => {
+    var _context;
 
-  return !!(trimmedVal && trimmedVal.match(regex));
-};
-/* eslint-enable no-control-regex */
+    return [{
+      value: '',
+      label: t('translations.settings.defaultOptionLabel')
+    }, ...map_default()(_context = filter_default()(languages).call(languages, language => language.locale.toLowerCase() !== String(uiLocale).toLowerCase())).call(_context, language => ({
+      value: language.locale,
+      label: language.nativeName
+    }))];
+  }, [t, languages, uiLocale]);
+  return jsxRuntime_module_e(form_controls_form, {
+    noValidate: "true",
+    className: css_className('options__form'),
+    children: [jsxRuntime_module_e("p", {
+      className: css_className('options__description'),
+      id: descriptionId,
+      children: t('translations.settings.description')
+    }), isActive ? jsxRuntime_module_e(d, {
+      children: [jsxRuntime_module_e("h3", {
+        children: t('translations.settings.currentTranslationLabel')
+      }), jsxRuntime_module_e("p", {
+        className: css_className('options__active-language'),
+        children: languageName
+      })]
+    }) : jsxRuntime_module_e(form_controls_select, {
+      name: controlName,
+      type: "text",
+      className: css_className('input__select'),
+      "aria-describedby": descriptionId,
+      labelClass: css_className('label'),
+      labelText: t('translations.settings.inputLabel'),
+      options: options,
+      defaultValue: currentLocale || ''
+    }), jsxRuntime_module_e("div", {
+      className: css_className('options__actions'),
+      children: jsxRuntime_module_e("button", {
+        type: "submit",
+        className: css_className('button', 'button--primary', 'options__submit'),
+        children: isActive ? t('translations.settings.endButtonText') : t('translations.settings.startButtonText')
+      })
+    })]
+  });
+}
 
-const isNotEmptyString = val => !!val;
+/* harmony default export */ var options_dialog_form = (TranslationsOptionsDialogForm);
 ;// CONCATENATED MODULE: ./src/javascripts/domains/translations/components/options-dialog/index.js
 
 
@@ -21837,6 +21854,36 @@ const Interrupt = ({
 };
 
 /* harmony default export */ var interrupt = (Interrupt);
+;// CONCATENATED MODULE: ./src/javascripts/ui/components/layout/privacy-disclaimer.js
+
+
+
+
+
+
+const PrivacyDisclaimer = () => {
+  const {
+    t
+  } = useI18n();
+  const {
+    showDisclaimer
+  } = useConfig();
+  return showDisclaimer && jsxRuntime_module_e("div", {
+    className: css_className('disclaimer'),
+    tabIndex: "0",
+    children: [jsxRuntime_module_e("h2", {
+      className: css_className('disclaimer__title'),
+      children: t('disclaimer.title')
+    }), jsxRuntime_module_e("div", {
+      className: css_className('disclaimer__message'),
+      dangerouslySetInnerHTML: {
+        __html: t('disclaimer.content')
+      }
+    })]
+  });
+};
+
+/* harmony default export */ var privacy_disclaimer = (PrivacyDisclaimer);
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/component-context.js
 
 const ComponentContext = D({});
@@ -22072,26 +22119,26 @@ const Event = ({
 
 
 
+
 const EventParticipant = ({
   eventPayload
 }) => {
+  const {
+    t
+  } = useI18n();
   const {
     fromClient,
     participant: participantId
   } = eventPayload;
   const participant = useSeamlyParticipant(participantId) || {};
   const {
-    messages,
-    defaults
+    messages
   } = useConfig();
-  const participantName = participant && participant.name;
+  const participantName = fromClient ? t('participants.user.name') : participant && participant.name;
   const {
     showAvatar,
     showName
   } = messages[fromClient ? 'user' : 'agent'] || {};
-  const {
-    userName
-  } = defaults || {};
 
   if (!showAvatar && !showName) {
     return null;
@@ -22110,12 +22157,10 @@ const EventParticipant = ({
     }));
   }
 
-  const authorName = fromClient ? userName || participantName : participantName;
-
-  if (showName && authorName) {
+  if (showName) {
     authorInfo.push(jsxRuntime_module_e("span", {
       className: css_className('message__author-name'),
-      children: authorName
+      children: participantName
     }));
   }
 
@@ -27522,8 +27567,8 @@ const Participant = ({
   event
 }) => {
   const {
-    agentIcon
-  } = useConfig().defaults || {};
+    agent
+  } = useParticipants();
   const {
     participant
   } = event.payload;
@@ -27536,7 +27581,7 @@ const Participant = ({
     return null;
   }
 
-  const avatar = participant.avatar || agentIcon;
+  const avatar = participant.avatar || (agent === null || agent === void 0 ? void 0 : agent.avatar);
   return jsxRuntime_module_e(EventDivider, {
     graphicSrc: avatar,
     graphicType: participant.avatar ? 'avatar' : undefined,
@@ -27630,8 +27675,10 @@ const UploadContent = ({
   href: url,
   download: true,
   target: target || undefined,
+  className: css_className(['download', 'download-link']),
   children: children
 }) : jsxRuntime_module_e("span", {
+  className: css_className('download'),
   children: children
 });
 
@@ -27661,22 +27708,19 @@ const Upload = _ref => {
     event: event,
     type: "upload"
   }, props), {}, {
-    children: jsxRuntime_module_e("div", {
-      className: css_className('download'),
+    children: jsxRuntime_module_e(UploadContent, {
+      url: url,
+      target: !fromClient ? '_blank' : undefined,
       children: [jsxRuntime_module_e(icon, {
         name: "download",
         size: "16"
-      }), jsxRuntime_module_e(UploadContent, {
-        url: url,
-        target: !fromClient ? '_blank' : undefined,
-        children: [jsxRuntime_module_e("span", {
-          "aria-hidden": "true",
-          className: css_className('file-download'),
-          children: filename
-        }), jsxRuntime_module_e("span", {
-          className: css_className('visually-hidden'),
-          children: srText
-        })]
+      }), jsxRuntime_module_e("span", {
+        "aria-hidden": "true",
+        className: css_className('file-download'),
+        children: filename
+      }), jsxRuntime_module_e("span", {
+        className: css_className('visually-hidden'),
+        children: srText
       })]
     })
   }));
@@ -27737,95 +27781,6 @@ const Cta = ({
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/fill.js
 var fill = __webpack_require__(4494);
 var fill_default = /*#__PURE__*/__webpack_require__.n(fill);
-;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/carousel-component/components/pagination.js
-
-
-
-
-function CarouselPagination({
-  items,
-  currentIndex,
-  onChange,
-  getItemKey,
-  getItemLabel
-}) {
-  const itemCount = items.length;
-  const handlePaginate = hooks_module_A(event => {
-    const slideIndex = Number(event.target.dataset.item || '0');
-    const nextIndex = Math.min(itemCount - 1, Math.max(0, slideIndex));
-
-    if (nextIndex !== currentIndex) {
-      onChange(nextIndex);
-    }
-  }, [itemCount, currentIndex, onChange]);
-  return jsxRuntime_module_e("div", {
-    className: css_className('carousel-pagination__wrapper'),
-    role: "group",
-    children: jsxRuntime_module_e("ul", {
-      className: css_className('carousel-pagination'),
-      children: map_default()(items).call(items, (item, idx) => {
-        const isActive = currentIndex === idx;
-        return jsxRuntime_module_e("li", {
-          className: css_className('carousel-pagination__item', isActive ? 'is-active' : undefined),
-          children: jsxRuntime_module_e("button", {
-            className: css_className('carousel-pagination__button'),
-            type: "button",
-            onClick: handlePaginate,
-            "data-item": idx,
-            "aria-disabled": isActive ? 'true' : undefined,
-            "aria-label": getItemLabel(item, idx)
-          })
-        }, getItemKey(item, idx, 'pagination-item-'));
-      })
-    })
-  });
-}
-;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/carousel-component/components/controls.js
-
-
-
-
-
-function CarouselControls({
-  items,
-  currentIndex,
-  onChange,
-  children
-}) {
-  const {
-    t
-  } = useI18n();
-  const itemCount = items.length;
-
-  const handlePrevious = () => {
-    onChange((currentIndex - 1 + itemCount) % itemCount);
-  };
-
-  const handleNext = () => {
-    onChange((currentIndex + 1) % itemCount);
-  };
-
-  return jsxRuntime_module_e("div", {
-    className: css_className('carousel-controls'),
-    children: [jsxRuntime_module_e("button", {
-      className: css_className('button', 'button--previous'),
-      "aria-label": t('carousel.controls.previous'),
-      onClick: handlePrevious,
-      children: jsxRuntime_module_e(icon, {
-        name: "arrowLeft",
-        size: "16"
-      })
-    }), children, jsxRuntime_module_e("button", {
-      className: css_className('button', 'button--next'),
-      "aria-label": t('carousel.controls.next'),
-      onClick: handleNext,
-      children: jsxRuntime_module_e(icon, {
-        name: "arrowRight",
-        size: "16"
-      })
-    })]
-  });
-}
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/card-component.js
 
 
@@ -27966,27 +27921,116 @@ function slide_objectSpread(target) { for (var i = 1; i < arguments.length; i++)
 
 
 
-function CarouselMessageSlide({
-  item: slide,
+function CarouselMessageSlide({
+  item: slide,
+  items,
+  index,
+  isActive
+}) {
+  const {
+    t
+  } = useI18n();
+  return jsxRuntime_module_e("div", {
+    className: css_className('carousel-item', `carousel-item--${slide.type}`),
+    role: "group",
+    "aria-roledescription": "slide",
+    "aria-label": t('carousel.slide.label', {
+      index: index + 1,
+      total: items.length
+    }),
+    children: jsxRuntime_module_e(card_component, slide_objectSpread(slide_objectSpread({}, slide), {}, {
+      isCarouselItem: true,
+      hasFocus: isActive
+    }))
+  });
+}
+;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/carousel-component/components/pagination.js
+
+
+
+
+function CarouselPagination({
+  items,
+  currentIndex,
+  onChange,
+  getItemKey,
+  getItemLabel
+}) {
+  const itemCount = items.length;
+  const handlePaginate = hooks_module_A(event => {
+    const slideIndex = Number(event.target.dataset.item || '0');
+    const nextIndex = Math.min(itemCount - 1, Math.max(0, slideIndex));
+
+    if (nextIndex !== currentIndex) {
+      onChange(nextIndex);
+    }
+  }, [itemCount, currentIndex, onChange]);
+  return jsxRuntime_module_e("div", {
+    className: css_className('carousel-pagination__wrapper'),
+    role: "group",
+    children: jsxRuntime_module_e("ul", {
+      className: css_className('carousel-pagination'),
+      children: map_default()(items).call(items, (item, idx) => {
+        const isActive = currentIndex === idx;
+        return jsxRuntime_module_e("li", {
+          className: css_className('carousel-pagination__item', isActive ? 'is-active' : undefined),
+          children: jsxRuntime_module_e("button", {
+            className: css_className('carousel-pagination__button'),
+            type: "button",
+            onClick: handlePaginate,
+            "data-item": idx,
+            "aria-disabled": isActive ? 'true' : undefined,
+            "aria-label": getItemLabel(item, idx)
+          })
+        }, getItemKey(item, idx, 'pagination-item-'));
+      })
+    })
+  });
+}
+;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/carousel-component/components/controls.js
+
+
+
+
+
+function CarouselControls({
   items,
-  index,
-  isActive
+  currentIndex,
+  onChange,
+  children
 }) {
   const {
     t
   } = useI18n();
+  const itemCount = items.length;
+
+  const handlePrevious = () => {
+    onChange((currentIndex - 1 + itemCount) % itemCount);
+  };
+
+  const handleNext = () => {
+    onChange((currentIndex + 1) % itemCount);
+  };
+
   return jsxRuntime_module_e("div", {
-    className: css_className('carousel-item', `carousel-item--${slide.type}`),
-    role: "group",
-    "aria-roledescription": "slide",
-    "aria-label": t('carousel.slide.label', {
-      index: index + 1,
-      total: items.length
-    }),
-    children: jsxRuntime_module_e(card_component, slide_objectSpread(slide_objectSpread({}, slide), {}, {
-      isCarouselItem: true,
-      hasFocus: isActive
-    }))
+    className: css_className('carousel-controls'),
+    children: [jsxRuntime_module_e("button", {
+      className: css_className('button', 'button--previous'),
+      "aria-label": t('carousel.controls.previous'),
+      onClick: handlePrevious,
+      children: jsxRuntime_module_e(icon, {
+        name: "arrowLeft",
+        size: "16"
+      })
+    }), children, jsxRuntime_module_e("button", {
+      className: css_className('button', 'button--next'),
+      "aria-label": t('carousel.controls.next'),
+      onClick: handleNext,
+      children: jsxRuntime_module_e(icon, {
+        name: "arrowRight",
+        size: "16"
+      })
+    })]
   });
 }
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/carousel-component/index.js
@@ -28357,36 +28401,6 @@ const ComponentFilter = ({
 };
 
 /* harmony default export */ var component_filter = (ComponentFilter);
-;// CONCATENATED MODULE: ./src/javascripts/ui/components/layout/privacy-disclaimer.js
-
-
-
-
-
-
-const PrivacyDisclaimer = () => {
-  const {
-    t
-  } = useI18n();
-  const {
-    showDisclaimer
-  } = useConfig();
-  return showDisclaimer && jsxRuntime_module_e("div", {
-    className: css_className('disclaimer'),
-    tabIndex: "0",
-    children: [jsxRuntime_module_e("h2", {
-      className: css_className('disclaimer__title'),
-      children: t('disclaimer.title')
-    }), jsxRuntime_module_e("div", {
-      className: css_className('disclaimer__message'),
-      dangerouslySetInnerHTML: {
-        __html: t('disclaimer.content')
-      }
-    })]
-  });
-};
-
-/* harmony default export */ var privacy_disclaimer = (PrivacyDisclaimer);
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/conversation.js
 
 
@@ -28869,7 +28883,7 @@ function TextEntryForm({
     }), jsxRuntime_module_e("button", {
       className: css_className('button', 'input__submit'),
       type: "submit",
-      disabled: !hasValue || reachedCharacterLimit,
+      "aria-disabled": !hasValue || reachedCharacterLimit ? 'true' : null,
       children: jsxRuntime_module_e(icon, {
         name: "send",
         size: "32",
@@ -29010,9 +29024,9 @@ const UploadToggle = () => {
         children: jsxRuntime_module_e("button", {
           className: css_className(['button', 'button--secondary', 'upload-toggle']),
           ref: uploadButton,
-          disabled: !showUploadButton ? 'true' : null,
+          "aria-disabled": !showUploadButton ? 'true' : null,
           type: "button",
-          onClick: onClickHandler,
+          onClick: showUploadButton ? onClickHandler : null,
           children: jsxRuntime_module_e(icon, {
             name: "file",
             size: "32",
@@ -29887,7 +29901,7 @@ const OptionsButton = () => {
             ref: item => {
               menuItemButtons.current[i] = item;
             },
-            className: css_className(['button', 'button--secondary', ...(available ? [] : ['button--disabled'])]),
+            className: css_className(['button', 'button--secondary']),
             onKeyDown: e => onMenuItemKeyDownHandler(e, i),
             onKeyPress: e => onKeyPressHandler(e, i),
             onClick: () => onMenuItemClickHandler(name, available),
@@ -29904,7 +29918,7 @@ const OptionsButton = () => {
       })
     }), jsxRuntime_module_e("button", {
       type: "button",
-      className: css_className(['button', 'button--secondary', 'chat__options__button', ...(!multiMenu && firstOptionName ? [`chat__options__button--${firstOptionName}`] : []), ...(!multiMenu && !firstOption.available ? ['button--disabled'] : [])]),
+      className: css_className(['button', 'button--secondary', 'chat__options__button', ...(!multiMenu && firstOptionName ? [`chat__options__button--${firstOptionName}`] : [])]),
       id: id,
       onClick: onClickHandler,
       onKeyDown: multiMenu ? onButtonKeyDownHandler : null,
@@ -30010,7 +30024,7 @@ function ChatFrame({
     children: [jsxRuntime_module_e(TranslationsChatStatus, {}), jsxRuntime_module_e("div", {
       className: css_className('chat__container'),
       children: getContent()
-    }), jsxRuntime_module_e(AppOptions, {})]
+    }), isOpen && jsxRuntime_module_e(AppOptions, {})]
   });
 }
 
@@ -30157,18 +30171,16 @@ const InlineView = () => {
 
 
 const ButtonIcon = () => {
+  const startChatIcon = useStartChatIcon();
   const currentAgent = useSeamlyCurrentAgent();
   const {
     hasInterrupt
   } = useInterrupt();
-  const {
-    defaults
-  } = useConfig();
-  const startChatIcon = defaults === null || defaults === void 0 ? void 0 : defaults.startChatIcon;
-  const avatar = currentAgent && !hasInterrupt ? currentAgent.avatar : undefined;
-  return avatar || startChatIcon ? jsxRuntime_module_e("img", {
-    className: css_className(avatar ? 'avatar' : 'icon'),
-    src: avatar || startChatIcon,
+  const isActiveConversation = currentAgent && !hasInterrupt;
+  const src = isActiveConversation ? currentAgent.avatar : startChatIcon;
+  return src ? jsxRuntime_module_e("img", {
+    className: css_className(isActiveConversation ? 'avatar' : 'icon'),
+    src: src,
     alt: ""
   }) : jsxRuntime_module_e(icon, {
     name: "avatar",
@@ -30395,6 +30407,53 @@ const View = () => {
 };
 
 /* harmony default export */ var view = (View);
+;// CONCATENATED MODULE: ./src/javascripts/domains/errors/index.js
+
+
+const {
+  createAction: errors_createAction
+} = createDomain('errors');
+const catchError = errors_createAction('catch-error', error => ({
+  error
+}));
+function errors_createMiddleware({
+  api: seamlyApi
+}) {
+  return ({
+    getState
+  }) => {
+    const handleError = action => {
+      const {
+        errorCallback,
+        namespace,
+        api,
+        layoutMode
+      } = selectConfig(getState());
+      errorCallback === null || errorCallback === void 0 ? void 0 : errorCallback(action.error, {
+        namespace,
+        api,
+        layoutMode,
+        conversationUrl: seamlyApi.getConversationUrl(),
+        action: action.type ? action : undefined
+      });
+    };
+
+    return next => action => {
+      try {
+        if (action.error) {
+          handleError(action);
+        }
+
+        return next(action);
+      } catch (error) {
+        handleError({
+          error
+        });
+        throw error;
+      }
+    };
+  };
+}
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/core/seamly-instance-functions-loader.js
 
 
@@ -31286,53 +31345,6 @@ const SeamlyFileUpload = ({
 };
 
 /* harmony default export */ var seamly_file_upload = (SeamlyFileUpload);
-;// CONCATENATED MODULE: ./src/javascripts/domains/errors/index.js
-
-
-const {
-  createAction: errors_createAction
-} = createDomain('errors');
-const catchError = errors_createAction('catch-error', error => ({
-  error
-}));
-function errors_createMiddleware({
-  api: seamlyApi
-}) {
-  return ({
-    getState
-  }) => {
-    const handleError = action => {
-      const {
-        errorCallback,
-        namespace,
-        api,
-        layoutMode
-      } = selectConfig(getState());
-      errorCallback === null || errorCallback === void 0 ? void 0 : errorCallback(action.error, {
-        namespace,
-        api,
-        layoutMode,
-        conversationUrl: seamlyApi.getConversationUrl(),
-        action: action.type ? action : undefined
-      });
-    };
-
-    return next => action => {
-      try {
-        if (action.error) {
-          handleError(action);
-        }
-
-        return next(action);
-      } catch (error) {
-        handleError({
-          error
-        });
-        throw error;
-      }
-    };
-  };
-}
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/core/seamly-core.js
 
 
@@ -31445,11 +31457,43 @@ function objectStore(key, storageProvider) {
 
   };
 }
-// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/object/get-own-property-names.js
-var get_own_property_names = __webpack_require__(8604);
 // EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/json/stringify.js
 var stringify = __webpack_require__(9340);
 var stringify_default = /*#__PURE__*/__webpack_require__.n(stringify);
+;// CONCATENATED MODULE: ./src/javascripts/lib/store/providers/session-storage.js
+
+
+function store(key) {
+  const KEY = 'cvco.' + key;
+  return {
+    get() {
+      var _context;
+
+      const candidates = [KEY, slice_default()(_context = KEY.split('.')).call(_context, 0, -1).join('.')];
+      let val;
+
+      do {
+        val = sessionStorage.getItem(candidates[0]);
+      } while (candidates.shift() && !val);
+
+      return JSON.parse(val);
+    },
+
+    set(value) {
+      if (!value) {
+        return;
+      }
+
+      sessionStorage.setItem(KEY, stringify_default()(value));
+    }
+
+  };
+}
+// EXTERNAL MODULE: ./src/javascripts/lib/debug.js
+var debug = __webpack_require__(1905);
+var debug_default = /*#__PURE__*/__webpack_require__.n(debug);
+// EXTERNAL MODULE: ./node_modules/@babel/runtime-corejs3/core-js-stable/object/get-own-property-names.js
+var get_own_property_names = __webpack_require__(8604);
 ;// CONCATENATED MODULE: ./node_modules/phoenix/priv/static/phoenix.esm.js
 
 
@@ -32951,9 +32995,6 @@ const splitUrlParams = url => {
 };
 
 /* harmony default export */ var split_url_params = (splitUrlParams);
-// EXTERNAL MODULE: ./src/javascripts/lib/debug.js
-var debug = __webpack_require__(1905);
-var debug_default = /*#__PURE__*/__webpack_require__.n(debug);
 ;// CONCATENATED MODULE: ./src/javascripts/api/producer.js
 
 
@@ -33125,35 +33166,6 @@ class ConversationProducer {
   }
 
 }
-;// CONCATENATED MODULE: ./src/javascripts/lib/store/providers/session-storage.js
-
-
-function store(key) {
-  const KEY = 'cvco.' + key;
-  return {
-    get() {
-      var _context;
-
-      const candidates = [KEY, slice_default()(_context = KEY.split('.')).call(_context, 0, -1).join('.')];
-      let val;
-
-      do {
-        val = sessionStorage.getItem(candidates[0]);
-      } while (candidates.shift() && !val);
-
-      return JSON.parse(val);
-    },
-
-    set(value) {
-      if (!value) {
-        return;
-      }
-
-      sessionStorage.setItem(KEY, stringify_default()(value));
-    }
-
-  };
-}
 ;// CONCATENATED MODULE: ./src/javascripts/api/event-producer.js
 class EventProducer {
   constructor(name) {
@@ -33265,15 +33277,6 @@ function getTimeZone() {
   }
 }
 
-function getEnvironment() {
-  return {
-    screenResolution: `${window.screen.width}x${window.screen.height}`,
-    userAgent: navigator.userAgent,
-    currentUrl: window.location.toString(),
-    timezone: getTimeZone()
-  };
-}
-
 class API {
   /**
    * Creates an instance of API.
@@ -33283,6 +33286,7 @@ class API {
    * @param {string} config.secure Connect securely
    * @param {string} config.externalId Unique visitor identifier (optional)
    * @param {boolean} config.sendEnvironment
+   * @param {string} layoutMode
    * @param {string} namespace
    * @param {Object} [context={ channelName: undefined, variables: undefined, locale: undefined }]
    * @param {string} context.channelName
@@ -33291,6 +33295,7 @@ class API {
    * @memberof API
    */
   constructor({
+    layoutMode,
     namespace,
     config = {},
     context = {}
@@ -33312,6 +33317,7 @@ class API {
     this.connected = false;
     this.configReady = false;
     this.externalId = config.externalId;
+    this.layoutMode = layoutMode;
     this.internalProducer = new EventProducer('API');
     this.internal$ = xstream_default().create(this.internalProducer).flatten();
     this.connection$ = filter_default()(_context = this.internal$).call(_context, event => event.type === 'connection');
@@ -33438,7 +33444,7 @@ class API {
       v: apiVersion
     }).send({
       context: api_objectSpread(api_objectSpread({}, this.config.context), {}, {
-        environment: this.config.sendEnvironment === true ? getEnvironment() : this.config.sendEnvironment
+        environment: this.config.sendEnvironment === true ? this.getEnvironment() : this.config.sendEnvironment
       })
     }).then(({
       body
@@ -33452,7 +33458,7 @@ class API {
       }
 
       if (error.status >= 500) {
-        throw new SeamlyGeneralError();
+        throw new SeamlyGeneralError(error);
       }
 
       throw error;
@@ -33526,7 +33532,7 @@ class API {
 
     if (this.config.sendEnvironment) {
       this.send('context', {
-        environment: this.config.sendEnvironment === true ? getEnvironment() : this.config.sendEnvironment
+        environment: this.config.sendEnvironment === true ? this.getEnvironment() : this.config.sendEnvironment
       }, false);
     }
 
@@ -33656,6 +33662,18 @@ class API {
     return filter_default()(_context5 = this.internal$).call(_context5, event => event.type !== 'connection');
   }
 
+  getEnvironment() {
+    return {
+      clientName: PACKAGE_NAME,
+      clientVariant: this.layoutMode,
+      clientVersion: PACKAGE_VERSION,
+      currentUrl: window.location.toString(),
+      screenResolution: `${window.screen.width}x${window.screen.height}`,
+      timezone: getTimeZone(),
+      userAgent: navigator.userAgent
+    };
+  }
+
 }
 ;// CONCATENATED MODULE: ./node_modules/redux-thunk/es/index.js
 function createThunkMiddleware(extraArgument) {
@@ -33810,11 +33828,11 @@ function store_createStore({
       api,
       eventBus,
       config
-    }), createMiddleware(), middleware_createMiddleware({
+    }), createMiddleware({
       api
     }), options_middleware_createMiddleware({
       api
-    }), translations_middleware_createMiddleware()]
+    }), middleware_createMiddleware()]
   });
   return store;
 }
@@ -33862,6 +33880,7 @@ class Engine {
     this.parentElement = parentElement;
     this.externalApi = externalApi;
     this.api = new API({
+      layoutMode: config.layoutMode,
       namespace: config.namespace,
       config: config.api,
       context: config.context
@@ -34179,13 +34198,8 @@ const AgentInfo = () => {
   const {
     hasInterrupt
   } = useInterrupt();
-  const {
-    defaults
-  } = useConfig();
-  const {
-    startChatIcon
-  } = defaults || {};
-  const avatar = currentAgent && !hasInterrupt ? currentAgent.avatar : null;
+  const startChatIcon = useStartChatIcon();
+  const src = (currentAgent === null || currentAgent === void 0 ? void 0 : currentAgent.avatar) ?? startChatIcon;
   const displaySubtitle = hasInterrupt ? '' : subTitle;
   const classNames = ['message-count'];
 
@@ -34197,13 +34211,13 @@ const AgentInfo = () => {
     classNames.push('message-count__empty');
   }
 
-  return (avatar || displaySubtitle || !isOpen) && jsxRuntime_module_e("div", {
+  return (displaySubtitle || !isOpen) && jsxRuntime_module_e("div", {
     className: css_className('agent-info'),
     children: [jsxRuntime_module_e("div", {
       className: css_className('agent-info__graphic'),
-      children: [avatar || startChatIcon ? jsxRuntime_module_e("img", {
-        className: css_className(avatar ? 'avatar' : 'icon'),
-        src: avatar || startChatIcon,
+      children: [src ? jsxRuntime_module_e("img", {
+        className: css_className(currentAgent !== null && currentAgent !== void 0 && currentAgent.avatar ? 'avatar' : 'icon'),
+        src: src,
         alt: ""
       }) : jsxRuntime_module_e(icon, {
         name: "avatar",