@seamly/web-ui 20.0.0-beta.6 → 20.0.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);
@@ -17334,7 +17332,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 +17347,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 +17435,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 +17483,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);
@@ -18767,7 +18779,7 @@ class SeamlyUnauthorizedError extends SeamlyBaseError {
 
 
 const handledErrorTypes = [SeamlyGeneralError, SeamlyConfigurationError, SeamlySessionExpiredError, SeamlyOfflineError, SeamlyUnauthorizedError, SeamlyUnavailableError];
-function middleware_createMiddleware({
+function createMiddleware({
   api
 }) {
   return () => next => action => {
@@ -19872,7 +19884,7 @@ function useTranslationsContainer() {
 
 
 
-function translations_middleware_createMiddleware() {
+function middleware_createMiddleware() {
   return ({
     dispatch,
     getState
@@ -22072,26 +22084,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 +22122,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 +27532,8 @@ const Participant = ({
   event
 }) => {
   const {
-    agentIcon
-  } = useConfig().defaults || {};
+    agent
+  } = useParticipants();
   const {
     participant
   } = event.payload;
@@ -27536,7 +27546,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,
@@ -30010,7 +30020,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 +30167,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",
@@ -33810,11 +33818,11 @@ function store_createStore({
       api,
       eventBus,
       config
-    }), createMiddleware(), middleware_createMiddleware({
+    }), createMiddleware({
       api
     }), options_middleware_createMiddleware({
       api
-    }), translations_middleware_createMiddleware()]
+    }), middleware_createMiddleware()]
   });
   return store;
 }
@@ -34179,13 +34187,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 +34200,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",