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

package/build/dist/lib/index.debug.min.js.LICENSE.txt

@@ -450,10 +450,6 @@
   !*** ./node_modules/superagent/lib/response-base.js ***!
   \******************************************************/
 
-/*!******************************************************!*\
-  !*** ./src/javascripts/domains/config/middleware.js ***!
-  \******************************************************/
-
 /*!******************************************************!*\
   !*** ./src/javascripts/domains/interrupt/actions.js ***!
   \******************************************************/

package/build/dist/lib/index.js

@@ -8170,6 +8170,59 @@ const useSelectorWithProps = function useSelectorWithProps(selector, props, inpu
 function useConfig() {
   return useSelector(selectConfig);
 }
+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
+
+    }
+  }
+};
 ;// CONCATENATED MODULE: ./src/javascripts/ui/utils/general-utils.js
 function general_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; }
 
@@ -8544,9 +8597,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,
@@ -9089,71 +9152,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
-
-    }
-  }
-};
 ;// CONCATENATED MODULE: ./src/javascripts/lib/mutex.js
 function createMutex() {
   let isRunning = false;
@@ -9570,7 +9568,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,
@@ -9582,6 +9583,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();
   }
@@ -9654,7 +9667,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
@@ -9702,7 +9715,6 @@ const updateState = (state, {
 
 
 
-
 ;// CONCATENATED MODULE: ./src/javascripts/lib/css.js
 
 /**
@@ -10934,7 +10946,7 @@ class SeamlyUnauthorizedError extends SeamlyBaseError {
 
 
 const handledErrorTypes = [SeamlyGeneralError, SeamlyConfigurationError, SeamlySessionExpiredError, SeamlyOfflineError, SeamlyUnauthorizedError, SeamlyUnavailableError];
-function middleware_createMiddleware({
+function createMiddleware({
   api
 }) {
   return () => next => action => {
@@ -11976,7 +11988,7 @@ function useTranslationsContainer() {
 
 
 
-function translations_middleware_createMiddleware() {
+function middleware_createMiddleware() {
   return ({
     dispatch,
     getState
@@ -14066,26 +14078,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;
@@ -14104,12 +14116,10 @@ const EventParticipant = ({
     }));
   }
 
-  const authorName = fromClient ? userName || participantName : participantName;
-
-  if (showName && authorName) {
+  if (showName) {
     authorInfo.push((0,jsx_runtime_namespaceObject.jsx)("span", {
       className: css_className('message__author-name'),
-      children: authorName
+      children: participantName
     }));
   }
 
@@ -19465,8 +19475,8 @@ const Participant = ({
   event
 }) => {
   const {
-    agentIcon
-  } = useConfig().defaults || {};
+    agent
+  } = useParticipants();
   const {
     participant
   } = event.payload;
@@ -19479,7 +19489,7 @@ const Participant = ({
     return null;
   }
 
-  const avatar = participant.avatar || agentIcon;
+  const avatar = participant.avatar || (agent === null || agent === void 0 ? void 0 : agent.avatar);
   return (0,jsx_runtime_namespaceObject.jsx)(EventDivider, {
     graphicSrc: avatar,
     graphicType: participant.avatar ? 'avatar' : undefined,
@@ -21829,7 +21839,7 @@ function ChatFrame({
     children: [(0,jsx_runtime_namespaceObject.jsx)(TranslationsChatStatus, {}), (0,jsx_runtime_namespaceObject.jsx)("div", {
       className: css_className('chat__container'),
       children: getContent()
-    }), (0,jsx_runtime_namespaceObject.jsx)(AppOptions, {})]
+    }), isOpen && (0,jsx_runtime_namespaceObject.jsx)(AppOptions, {})]
   });
 }
 
@@ -21967,18 +21977,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 ? (0,jsx_runtime_namespaceObject.jsx)("img", {
-    className: css_className(avatar ? 'avatar' : 'icon'),
-    src: avatar || startChatIcon,
+  const isActiveConversation = currentAgent && !hasInterrupt;
+  const src = isActiveConversation ? currentAgent.avatar : startChatIcon;
+  return src ? (0,jsx_runtime_namespaceObject.jsx)("img", {
+    className: css_className(isActiveConversation ? 'avatar' : 'icon'),
+    src: src,
     alt: ""
   }) : (0,jsx_runtime_namespaceObject.jsx)(icon, {
     name: "avatar",
@@ -25441,11 +25449,11 @@ function store_createStore({
       api,
       eventBus,
       config
-    }), createMiddleware(), middleware_createMiddleware({
+    }), createMiddleware({
       api
     }), options_middleware_createMiddleware({
       api
-    }), translations_middleware_createMiddleware()]
+    }), middleware_createMiddleware()]
   });
   return store;
 }
@@ -25776,13 +25784,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'];
 
@@ -25794,13 +25797,13 @@ const AgentInfo = () => {
     classNames.push('message-count__empty');
   }
 
-  return (avatar || displaySubtitle || !isOpen) && (0,jsx_runtime_namespaceObject.jsxs)("div", {
+  return (displaySubtitle || !isOpen) && (0,jsx_runtime_namespaceObject.jsxs)("div", {
     className: css_className('agent-info'),
     children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
       className: css_className('agent-info__graphic'),
-      children: [avatar || startChatIcon ? (0,jsx_runtime_namespaceObject.jsx)("img", {
-        className: css_className(avatar ? 'avatar' : 'icon'),
-        src: avatar || startChatIcon,
+      children: [src ? (0,jsx_runtime_namespaceObject.jsx)("img", {
+        className: css_className(currentAgent !== null && currentAgent !== void 0 && currentAgent.avatar ? 'avatar' : 'icon'),
+        src: src,
         alt: ""
       }) : (0,jsx_runtime_namespaceObject.jsx)(icon, {
         name: "avatar",