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

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

@@ -447,9 +447,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,
@@ -1521,6 +1531,22 @@ const hooks_useSelectorWithProps = function useSelectorWithProps(selector, props
 function hooks_useConfig() {
   return useSelector(Selectors.selectConfig);
 }
+function useParticipants() {
+  const {
+    agentParticipant,
+    userParticipant
+  } = useSelector(Selectors.selectConfig);
+  return {
+    agent: agentParticipant,
+    user: userParticipant
+  };
+}
+function useStartChatIcon() {
+  const {
+    startChatIcon
+  } = useSelector(Selectors.selectConfig);
+  return startChatIcon;
+}
 ;// 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; }
 
@@ -1814,7 +1840,10 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
     const {
       features,
       defaultLocale,
-      preChat
+      preChat,
+      agentParticipant,
+      userParticipant,
+      startChatIcon
     } = await api.getConfig();
     dispatch({
       type: seamly_utils_seamlyActions.SET_FEATURES,
@@ -1826,6 +1855,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: seamly_utils_seamlyActions.SET_HEADER_TITLE,
+        title: agentParticipant.name
+      });
+    }
   } catch (e) {
     throw new SeamlyUnavailableError();
   }
@@ -2406,34 +2447,6 @@ const seamly_api_hooks_useSeamlyHasConversation = () => {
 ;// 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/domains/config/middleware.js
-
-
-function createMiddleware() {
-  return ({
-    dispatch
-  }) => next => action => {
-    var _action$config, _action$config$defaul;
-
-    const result = next(action);
-
-    switch (action.type) {
-      case String(Actions.initialize):
-      case String(Actions.update):
-        if (action !== null && action !== void 0 && (_action$config = action.config) !== null && _action$config !== void 0 && (_action$config$defaul = _action$config.defaults) !== null && _action$config$defaul !== void 0 && _action$config$defaul.agentName) {
-          var _action$config2, _action$config2$defau;
-
-          dispatch({
-            type: seamlyActions.SET_HEADER_SUB_TITLE,
-            title: action === null || action === void 0 ? void 0 : (_action$config2 = action.config) === null || _action$config2 === void 0 ? void 0 : (_action$config2$defau = _action$config2.defaults) === null || _action$config2$defau === void 0 ? void 0 : _action$config2$defau.agentName
-          });
-        }
-
-    }
-
-    return result;
-  };
-}
 ;// CONCATENATED MODULE: ./src/javascripts/config.js
 const CSS_NAME = 'cvco';
 const apiVersion = '2';
@@ -2499,7 +2512,7 @@ const config_reducer_initialState = config_reducer_objectSpread(config_reducer_o
   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
@@ -2547,7 +2560,6 @@ const updateState = (state, {
 
 
 
-
 ;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/component-helper-hooks.js
 
 const useSeamlyAppContainerClassNames = () => {
@@ -3726,7 +3738,7 @@ class SeamlyUnauthorizedError extends SeamlyBaseError {
 
 
 const handledErrorTypes = [SeamlyGeneralError, SeamlyConfigurationError, SeamlySessionExpiredError, SeamlyOfflineError, SeamlyUnauthorizedError, SeamlyUnavailableError];
-function middleware_createMiddleware({
+function createMiddleware({
   api
 }) {
   return () => next => action => {
@@ -4700,7 +4712,7 @@ function hooks_useTranslationsContainer() {
 
 
 
-function translations_middleware_createMiddleware() {
+function middleware_createMiddleware() {
   return ({
     dispatch,
     getState
@@ -5842,6 +5854,10 @@ function static_core_objectWithoutPropertiesLoose(source, excluded) { if (source
 
 
 
+
+const {
+  SET_PARTICIPANT: static_core_SET_PARTICIPANT
+} = seamly_utils_seamlyActions;
 const bareApi = {
   send: () => {},
   reset: () => {
@@ -5857,6 +5873,7 @@ const bareApi = {
 const SeamlyTestCore = ({
   state,
   translations,
+  participants = [],
   children
 }) => {
   const liveMsgRef = (0,hooks_namespaceObject.useRef)(() => {});
@@ -5902,8 +5919,15 @@ const SeamlyTestCore = ({
     }
 
     newStore.dispatch(setLocale.fulfilled('en-GB', translations));
+    participants.forEach(participant => {
+      newStore.dispatch({
+        type: static_core_SET_PARTICIPANT,
+        participant,
+        fromClient: participant.id === 'user'
+      });
+    });
     return newStore;
-  }, [state, translations]);
+  }, [state, translations, participants]);
   return state && (0,jsx_runtime_namespaceObject.jsx)(web_ui_namespaceObject.StoreProvider, {
     store: store,
     children: (0,jsx_runtime_namespaceObject.jsx)(web_ui_namespaceObject.SeamlyEventBusContext.Provider, {
@@ -5931,7 +5955,8 @@ const SeamlyTestCore = ({
 const StyleGuideView = ({
   state,
   customComponents = {},
-  translations
+  translations,
+  participants
 }) => {
   const [renderView, setRenderView] = (0,hooks_namespaceObject.useState)(true);
   const {
@@ -5960,10 +5985,12 @@ const StyleGuideView = ({
   return CustomView ? (0,jsx_runtime_namespaceObject.jsx)(static_core, {
     state: state,
     translations: translations,
+    participants: participants,
     children: (0,jsx_runtime_namespaceObject.jsx)(CustomView, {})
   }) : (0,jsx_runtime_namespaceObject.jsx)(static_core, {
     state: state,
     translations: translations,
+    participants: participants,
     children: (0,jsx_runtime_namespaceObject.jsx)(web_ui_namespaceObject.View, {})
   });
 };
@@ -6094,26 +6121,8 @@ const baseState = {
 const avatar = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxkZWZzLz48cGF0aCBmaWxsPSIjNEE0OEMxIiBkPSJNMCAwSDMyVjMySDB6Ii8+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTExLjE3NSwxMi4yMjJjMC0zLjc5MywyLjE2LTUuNTY1LDQuODI1LTUuNTY1YzIuNjY0LDAsNC44MjYsMS43NzIsNC44MjYsNS41NjUJYzAsMy43OTQtMi4xNjIsNi45MDQtNC44MjYsNi45MDRDMTMuMzM1LDE5LjEyNiwxMS4xNzUsMTYuMDE2LDExLjE3NSwxMi4yMjJ6IE0yNi42NjYsMjMuMDg0Yy0wLjgzNC0xLjU4My00LjIxNi0yLjYyNS01Ljg0MS0yLjY2NwlzLTMuNTM0LDMtNC44MjUsM2MtMS4yOTMsMC0zLjIwMS0zLjA0Mi00LjgyNS0zYy0xLjYyNSwwLjA0Mi01LjAwOCwxLjA4NC01Ljg0MSwyLjY2N0M0LjAwNSwyNS42MDYsNC41ODMsMzIsNC41ODMsMzJIMTZoMTEuNDE2CUMyNy40MTYsMzIsMjcuOTk0LDI1LjYwNiwyNi42NjYsMjMuMDg0eiIvPjwvc3ZnPg==';
 const participantInfo = {
   participants: {
-    'e65fa8dc-97ab-4711-8fec-82bae6461aa2': {
-      avatar,
-      id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
-      introduction: "You're now talking to {{name}} gimme a minit",
-      name: 'Mrs. Bot',
-      service: {
-        expose: {
-          map: {},
-          version: 2
-        },
-        meta: {},
-        name: null,
-        service_session_id: null,
-        settings: {}
-      }
-    },
-    'e65fa8dc-97ab-4711-8fec-82bae6461aa3': {
-      id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa3',
-      introduction: "You're now talking to {{name}} gimme a minit",
-      name: 'Mrs. Bot',
+    agent: {
+      id: 'agent',
       service: {
         expose: {
           map: {},
@@ -6125,11 +6134,8 @@ const participantInfo = {
         settings: {}
       }
     },
-    'seamly-client-participant': {
-      avatar,
-      id: 'seamly-client-participant',
-      introduction: null,
-      name: 'User',
+    user: {
+      id: 'user',
       service: {
         expose: {
           map: {},
@@ -6142,7 +6148,7 @@ const participantInfo = {
       }
     }
   },
-  currentAgent: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2'
+  currentAgent: 'agent'
 };
 const newTopicDivider = {
   type: 'info',
@@ -6266,7 +6272,7 @@ const participantMessage = {
     messageStatus: 'received',
     participant: {
       avatar,
-      id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+      id: 'agent',
       introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
@@ -6292,7 +6298,7 @@ const participantMessageDefaultIcon = {
     id: (0,web_ui_namespaceObject.randomId)(),
     messageStatus: 'received',
     participant: {
-      id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa3',
+      id: 'user',
       introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
@@ -6324,7 +6330,7 @@ const getCustomMessage = ({
       data,
       variables: {}
     },
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: {
         additions: {}
@@ -6354,7 +6360,7 @@ const shortTextMessage = {
     fromHistory: true,
     id: (0,web_ui_namespaceObject.randomId)(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: {
         additions: {}
@@ -6393,7 +6399,7 @@ const ctaMessage = {
     fromHistory: true,
     id: 'f5351010-0def-452d-818f-ca22ac61792z',
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: {
         additions: {
@@ -6419,7 +6425,7 @@ const longTextMessage = {
     fromHistory: true,
     id: (0,web_ui_namespaceObject.randomId)(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: {
         additions: {}
@@ -6444,7 +6450,7 @@ const textMessageBoldItalicUnderline = {
     fromHistory: true,
     id: (0,web_ui_namespaceObject.randomId)(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: {
         additions: {
@@ -6486,7 +6492,7 @@ const textMessageWithLinks = {
     fromHistory: true,
     id: (0,web_ui_namespaceObject.randomId)(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: {
         additions: {
@@ -6521,7 +6527,7 @@ const textMessageWithLongLink = {
     fromHistory: true,
     id: 'a964e54e-ea98-46ff-a952-979a47f162c0',
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: {
         additions: {
@@ -6548,7 +6554,7 @@ const textMesageWithBullets = {
     fromHistory: true,
     id: 'f5351010-0def-452d-818f-ca22ac61792a',
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: {
         additions: {
@@ -6576,7 +6582,7 @@ const imageMessage = {
     fromHistory: true,
     id: 'b44ef42c-880c-43ff-b067-499e7f2e81f7',
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: {
         additions: {
@@ -6604,7 +6610,7 @@ const imageMessageWithLightbox = {
     fromHistory: true,
     id: 'b44ef42c-880c-43ff-b067-499e7f2e81f8',
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: {
         additions: {
@@ -6632,7 +6638,7 @@ const videoMessage = {
     fromHistory: true,
     id: (0,web_ui_namespaceObject.randomId)(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: {
         additions: {
@@ -6685,7 +6691,7 @@ const choicePromptMessage = {
     fromHistory: true,
     id: (0,web_ui_namespaceObject.randomId)(),
     messageStatus: 'read',
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     service: {
       meta: {
         additions: {}
@@ -6710,7 +6716,7 @@ const userMessage = {
     fromHistory: true,
     id: (0,web_ui_namespaceObject.randomId)(),
     messageStatus: 'read',
-    participant: 'seamly-client-participant',
+    participant: 'user',
     transactionId: '1cdefea9-7437-4672-bcf8-2c75dc99244c',
     transactionLast: null,
     type: 'text'
@@ -6728,7 +6734,7 @@ const userMessageLong = {
     fromHistory: true,
     id: (0,web_ui_namespaceObject.randomId)(),
     messageStatus: 'read',
-    participant: 'seamly-client-participant',
+    participant: 'user',
     transactionId: '1cdefea9-7437-4672-bcf8-2c75dc99244c',
     transactionLast: null,
     type: 'text'
@@ -6749,7 +6755,7 @@ const fileDownloadAgentMessage = {
   type: 'message',
   payload: states_objectSpread(states_objectSpread({}, fileDownloadPayload), {}, {
     fromClient: false,
-    participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
+    participant: 'agent',
     id: (0,web_ui_namespaceObject.randomId)()
   })
 };
@@ -6765,7 +6771,7 @@ const fileDownloadUserMessage = {
   type: 'message',
   payload: states_objectSpread(states_objectSpread({}, fileDownloadPayload), {}, {
     fromClient: true,
-    participant: 'seamly-client-participant',
+    participant: 'user',
     id: (0,web_ui_namespaceObject.randomId)()
   })
 };
@@ -8071,7 +8077,8 @@ const StyleGuideApp = ({
   config,
   styleGuideConfig,
   translations,
-  headingLevel = 2
+  headingLevel = 2,
+  participants
 }) => {
   const [staticState, setStaticState] = (0,hooks_namespaceObject.useState)(null);
   const [selectedStateDescription, setSelectedStateDescription] = (0,hooks_namespaceObject.useState)('');
@@ -8098,9 +8105,6 @@ const StyleGuideApp = ({
     }
   }, [setStaticState, stateUpdateCallback]);
   const getState = (0,hooks_namespaceObject.useCallback)((layoutMode, feature) => {
-    const {
-      defaults
-    } = config;
     const {
       headingText
     } = mainState[feature];
@@ -8110,9 +8114,7 @@ const StyleGuideApp = ({
       overrideMessages,
       showFaq
     } = bareState.config;
-    const {
-      agentName
-    } = defaults || {};
+    const agent = participants.find(participant => participant.id === 'agent');
 
     const updatedState = app_objectSpread(app_objectSpread({}, bareState), {}, {
       config: app_objectSpread(app_objectSpread(app_objectSpread(app_objectSpread({}, bareState.config), config), {}, {
@@ -8123,12 +8125,12 @@ const StyleGuideApp = ({
         showFaq
       }),
       headerTitles: app_objectSpread(app_objectSpread({}, bareState.headerTitles), {}, {
-        subTitle: agentName || bareState.headerTitles.subTitle
+        subTitle: (agent === null || agent === void 0 ? void 0 : agent.name) || bareState.headerTitles.subTitle
       })
     });
 
     return updatedState;
-  }, [mainState, config]);
+  }, [mainState, participants, config]);
   (0,hooks_namespaceObject.useEffect)(() => {
     // As the modal focus trap disables clicking on elements outside the modal container,
     // we need to hide the modal manually on clicking the overlay as the internal
@@ -8206,7 +8208,8 @@ const StyleGuideApp = ({
         children: showStyleGuide && (0,jsx_runtime_namespaceObject.jsx)(view, {
           customComponents: styleGuideConfig.customComponents,
           translations: translations,
-          state: staticState
+          state: staticState,
+          participants: participants
         })
       })]
     }), (0,jsx_runtime_namespaceObject.jsx)("aside", {
@@ -8267,6 +8270,16 @@ class SeamlyStyleGuideInstance extends web_ui_namespaceObject.Engine {
       translations: `/client/${this.config.api.key}/translations/{version}/{locale}.json`
     };
     const translations = await api.getTranslations(this.config.context.locale || 'en-GB');
+    const {
+      agentParticipant,
+      userParticipant
+    } = await api.getConfig();
+    const participants = [style_guide_engine_objectSpread({
+      id: 'user'
+    }, userParticipant), style_guide_engine_objectSpread({
+      id: 'agent',
+      introduction: 'I am {{name}}'
+    }, agentParticipant)];
 
     const renderConfig = style_guide_engine_objectSpread(style_guide_engine_objectSpread({}, this.config), {}, {
       customComponents: Object.keys(restComponents).length ? restComponents : undefined
@@ -8275,7 +8288,8 @@ class SeamlyStyleGuideInstance extends web_ui_namespaceObject.Engine {
     (0,external_preact_namespaceObject.render)((0,jsx_runtime_namespaceObject.jsx)(app, {
       config: renderConfig,
       styleGuideConfig: this.styleGuideConfig,
-      translations: translations
+      translations: translations,
+      participants: participants
     }), this.parentElement);
   }