@seamly/web-ui 20.0.0-beta.4 → 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
@@ -13537,7 +13549,7 @@ const SuggestionsList = ({
   className: givenClassName,
   suggestions = [],
   onClickSuggestion,
-  hasIcon
+  hasIcon = true
 }) => {
   return (0,jsx_runtime_namespaceObject.jsx)("ul", {
     className: css_className('suggestions__list', givenClassName),
@@ -13697,7 +13709,6 @@ const Suggestions = ({
         className: css_className('suggestions__heading'),
         children: headingText
       }), !!renderedSuggestions.length && (0,jsx_runtime_namespaceObject.jsx)(suggestions_list, {
-        hasIcon: true,
         suggestions: renderedSuggestions,
         onClickSuggestion: handleClick
       }), footerText && !isOpen && (0,jsx_runtime_namespaceObject.jsx)("p", {
@@ -14067,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;
@@ -14105,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
     }));
   }
 
@@ -19466,8 +19475,8 @@ const Participant = ({
   event
 }) => {
   const {
-    agentIcon
-  } = useConfig().defaults || {};
+    agent
+  } = useParticipants();
   const {
     participant
   } = event.payload;
@@ -19480,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,
@@ -21830,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, {})]
   });
 }
 
@@ -21863,7 +21872,6 @@ const AppView = () => {
 
 
 
-
 function PreChatMessages() {
   const {
     preChatEvents,
@@ -21876,19 +21884,15 @@ function PreChatMessages() {
     isOpen
   } = useVisibility();
   const isVisible = !(hasInterrupt || !preChatEvents.length || isOpen);
-  return (0,jsx_runtime_namespaceObject.jsx)(in_out_transition, {
-    isActive: isVisible,
-    transitionStartState: transitionStartStates.notRendered,
-    children: (0,jsx_runtime_namespaceObject.jsx)("ul", {
-      className: css_className('pre-chat-messages', `pre-chat-messages--${layoutMode}`),
-      "aria-hidden": !isVisible,
-      children: preChatEvents.map(event => (0,jsx_runtime_namespaceObject.jsx)("li", {
-        className: css_className('pre-chat-messages__message'),
-        children: (0,jsx_runtime_namespaceObject.jsx)(PreChatMessageEvent, {
-          event: event
-        })
-      }, event.payload.id))
-    })
+  return isVisible && (0,jsx_runtime_namespaceObject.jsx)("ul", {
+    className: css_className('pre-chat-messages', `pre-chat-messages--${layoutMode}`),
+    "aria-hidden": !isVisible,
+    children: preChatEvents.map(event => (0,jsx_runtime_namespaceObject.jsx)("li", {
+      className: css_className('pre-chat-messages__message'),
+      children: (0,jsx_runtime_namespaceObject.jsx)(PreChatMessageEvent, {
+        event: event
+      })
+    }, event.payload.id))
   });
 }
 function PreChatMessageEvent({
@@ -21941,7 +21945,7 @@ const InlineView = () => {
       isActive: !isOpen,
       transitionStartState: transitionStartStates.rendered,
       children: (0,jsx_runtime_namespaceObject.jsxs)("div", {
-        className: css_className('unstarted-wrapper'),
+        className: css_className('unstarted-wrapper', 'unstarted-wrapper--inline'),
         children: [(0,jsx_runtime_namespaceObject.jsx)(PreChatMessages, {}), (0,jsx_runtime_namespaceObject.jsx)(suggestions, {})]
       })
     }), (0,jsx_runtime_namespaceObject.jsx)(in_out_transition, {
@@ -21973,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",
@@ -22110,7 +22112,7 @@ const WindowView = () => {
       transitionStartState: transitionStartStates.notRendered,
       children: (0,jsx_runtime_namespaceObject.jsx)("div", {
         className: css_className('unstarted-wrapper', 'unstarted-wrapper--window', 'unstarted-wrapper--continue'),
-        children: (0,jsx_runtime_namespaceObject.jsx)(splash, {
+        children: (0,jsx_runtime_namespaceObject.jsx)(event_text, {
           event: continueChatEvent
         })
       })
@@ -24646,10 +24648,11 @@ function producer_defineProperty(obj, key, value) { if (key in obj) { Object.def
 
 const log = debug_default()('seamly');
 class ConversationProducer {
-  constructor(url, channelName, accessToken) {
+  constructor(url, channelName, channelTopic, accessToken) {
     this.url = url;
     this.accessToken = accessToken;
     this.channelName = channelName;
+    this.channelTopic = channelTopic;
     this.connect();
     this.socket.onError(err => {
       log('[SOCKET][ERROR]', err);
@@ -24669,7 +24672,7 @@ class ConversationProducer {
     });
     this.channel.on('system', msg => {
       switch (msg.type) {
-        case 'join_conversation_succeeded':
+        case 'attach_channel_succeeded':
           this.emit({
             type: 'connection',
             connected: true,
@@ -24759,8 +24762,9 @@ class ConversationProducer {
       })
     });
     this.socket.connect();
-    this.channel = this.socket.channel(this.channelName, {
-      authorization: `Bearer ${this.accessToken}`
+    this.channel = this.socket.channel(this.channelTopic, {
+      authorization: `Bearer ${this.accessToken}`,
+      channelName: this.channelName
     });
   }
 
@@ -24936,7 +24940,8 @@ class API {
    * @param {string} config.externalId Unique visitor identifier (optional)
    * @param {boolean} config.sendEnvironment
    * @param {string} namespace
-   * @param {Object} [context={ variables: undefined, locale: undefined }]
+   * @param {Object} [context={ channelName: undefined, variables: undefined, locale: undefined }]
+   * @param {string} context.channelName
    * @param {object} context.variables
    * @param {string} context.locale
    * @memberof API
@@ -24954,7 +24959,9 @@ class API {
     };
     this.config = {
       sendEnvironment: config.sendEnvironment ?? true,
-      context
+      context: api_objectSpread(api_objectSpread({}, context), {}, {
+        channelName: context.channelName || 'web'
+      })
     };
     this.connected = false;
     this.configReady = false;
@@ -24994,18 +25001,22 @@ class API {
     return !!this.getConversationUrl();
   }
 
-  getChannelName() {
-    return this.store.get('channelName');
+  getChannelTopic() {
+    // The `channelName` fallback is needed for seamless client upgrades.
+    // TODO: Remove when all clients have been upgraded past v20.
+    return this.store.get('channelTopic') || this.store.get('channelName');
   }
 
-  setChannelName(name) {
-    this.store.set('channelName', name);
+  setChannelTopic(topic) {
+    this.store.set('channelTopic', topic);
   }
 
   clearStore() {
     this.store.delete('accessToken');
-    this.store.delete('conversationUrl');
+    this.store.delete('conversationUrl'); // TODO: Remove `channelName` when all clients have been upgraded past v20.
+
     this.store.delete('channelName');
+    this.store.delete('channelTopic');
   }
 
   getUrlPrefix(protocol) {
@@ -25059,9 +25070,9 @@ class API {
       const initialState = api_objectSpread({}, conversation);
 
       delete initialState.accessToken;
-      delete initialState.channelName;
+      delete initialState.channelTopic;
       this.setAccessToken(conversation.accessToken);
-      this.setChannelName(conversation.channelName);
+      this.setChannelTopic(conversation.channelTopic);
       this.updateUrls(body);
       this.setConversationUrl(this.URLS.conversation);
       return initialState;
@@ -25162,7 +25173,7 @@ class API {
       conversationInitialState = await this.createConversation();
     }
 
-    this.conversationProducer = new ConversationProducer(`${this.getUrlPrefix('ws')}${this.URLS.socket}`, this.getChannelName(), this.getAccessToken());
+    this.conversationProducer = new ConversationProducer(`${this.getUrlPrefix('ws')}${this.URLS.socket}`, this.config.context.channelName, this.getChannelTopic(), this.getAccessToken());
     this.internalProducer.emit(xstream_default().create(this.conversationProducer)); // Send environment
 
     if (this.config.sendEnvironment) {
@@ -25209,7 +25220,7 @@ class API {
       body
     }) => {
       this.updateUrls(body);
-      return omit(body.conversation, ['accessToken', 'channelName']);
+      return omit(body.conversation, ['accessToken', 'channelTopic']);
     }).catch(error => {
       if (error.status === 401) {
         throw new SeamlyUnauthorizedError(error);
@@ -25438,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;
 }
@@ -25478,8 +25489,8 @@ class Engine {
           restConfig = engine_objectWithoutProperties(config, engine_excluded);
 
     this.config = engine_objectSpread(engine_objectSpread({}, restConfig), {}, {
-      showFaq: showFaq !== false,
-      namespace
+      namespace,
+      showFaq: showFaq !== false
     });
     this.namespace = namespace;
     this.parentElement = parentElement;
@@ -25773,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'];
 
@@ -25791,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",