@seamly/web-ui 20.0.0-beta.4 → 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
@@ -21530,7 +21542,7 @@ const SuggestionsList = ({
   className: givenClassName,
   suggestions = [],
   onClickSuggestion,
-  hasIcon
+  hasIcon = true
 }) => {
   return jsxRuntime_module_e("ul", {
     className: css_className('suggestions__list', givenClassName),
@@ -21692,7 +21704,6 @@ const Suggestions = ({
         className: css_className('suggestions__heading'),
         children: headingText
       }), !!renderedSuggestions.length && jsxRuntime_module_e(suggestions_list, {
-        hasIcon: true,
         suggestions: renderedSuggestions,
         onClickSuggestion: handleClick
       }), footerText && !isOpen && jsxRuntime_module_e("p", {
@@ -22073,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;
@@ -22111,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
     }));
   }
 
@@ -27523,8 +27532,8 @@ const Participant = ({
   event
 }) => {
   const {
-    agentIcon
-  } = useConfig().defaults || {};
+    agent
+  } = useParticipants();
   const {
     participant
   } = event.payload;
@@ -27537,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,
@@ -30011,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, {})]
   });
 }
 
@@ -30045,7 +30054,6 @@ const AppView = () => {
 
 
 
-
 function PreChatMessages() {
   const {
     preChatEvents,
@@ -30058,19 +30066,15 @@ function PreChatMessages() {
     isOpen
   } = useVisibility();
   const isVisible = !(hasInterrupt || !preChatEvents.length || isOpen);
-  return jsxRuntime_module_e(in_out_transition, {
-    isActive: isVisible,
-    transitionStartState: transitionStartStates.notRendered,
-    children: jsxRuntime_module_e("ul", {
-      className: css_className('pre-chat-messages', `pre-chat-messages--${layoutMode}`),
-      "aria-hidden": !isVisible,
-      children: map_default()(preChatEvents).call(preChatEvents, event => jsxRuntime_module_e("li", {
-        className: css_className('pre-chat-messages__message'),
-        children: jsxRuntime_module_e(PreChatMessageEvent, {
-          event: event
-        })
-      }, event.payload.id))
-    })
+  return isVisible && jsxRuntime_module_e("ul", {
+    className: css_className('pre-chat-messages', `pre-chat-messages--${layoutMode}`),
+    "aria-hidden": !isVisible,
+    children: map_default()(preChatEvents).call(preChatEvents, event => jsxRuntime_module_e("li", {
+      className: css_className('pre-chat-messages__message'),
+      children: jsxRuntime_module_e(PreChatMessageEvent, {
+        event: event
+      })
+    }, event.payload.id))
   });
 }
 function PreChatMessageEvent({
@@ -30131,7 +30135,7 @@ const InlineView = () => {
       isActive: !isOpen,
       transitionStartState: transitionStartStates.rendered,
       children: jsxRuntime_module_e("div", {
-        className: css_className('unstarted-wrapper'),
+        className: css_className('unstarted-wrapper', 'unstarted-wrapper--inline'),
         children: [jsxRuntime_module_e(PreChatMessages, {}), jsxRuntime_module_e(suggestions, {})]
       })
     }), jsxRuntime_module_e(in_out_transition, {
@@ -30163,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",
@@ -30300,7 +30302,7 @@ const WindowView = () => {
       transitionStartState: transitionStartStates.notRendered,
       children: jsxRuntime_module_e("div", {
         className: css_className('unstarted-wrapper', 'unstarted-wrapper--window', 'unstarted-wrapper--continue'),
-        children: jsxRuntime_module_e(splash, {
+        children: jsxRuntime_module_e(event_text, {
           event: continueChatEvent
         })
       })
@@ -32982,10 +32984,11 @@ function producer_objectSpread(target) { for (var i = 1; i < arguments.length; i
 
 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);
@@ -33005,7 +33008,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,
@@ -33095,8 +33098,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
     });
   }
 
@@ -33288,7 +33292,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
@@ -33308,7 +33313,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;
@@ -33348,18 +33355,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) {
@@ -33415,9 +33426,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;
@@ -33518,7 +33529,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) {
@@ -33565,7 +33576,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);
@@ -33807,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;
 }
@@ -33852,8 +33863,8 @@ class Engine {
           restConfig = _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;
@@ -34176,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'];
 
@@ -34194,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",