@seamly/web-ui 20.8.0-alpha.1 → 20.8.0-beta.2

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

@@ -2684,7 +2684,9 @@ const seamly_unavailable_error_1 = __importDefault(__webpack_require__(60));
 
 const actions_1 = __webpack_require__(915);
 
-const actions_2 = __webpack_require__(234);
+const actions_2 = __webpack_require__(59);
+
+const actions_3 = __webpack_require__(234);
 
 const seamly_utils_1 = __webpack_require__(740);
 
@@ -2693,7 +2695,8 @@ exports.initializeApp = (0, toolkit_1.createAsyncThunk)('initializeApp', (_, {
     api,
     config
   },
-  rejectWithValue
+  rejectWithValue,
+  dispatch
 }) => __awaiter(void 0, void 0, void 0, function* () {
   var _a, _b, _c, _d;
 
@@ -2732,6 +2735,7 @@ exports.initializeApp = (0, toolkit_1.createAsyncThunk)('initializeApp', (_, {
         });
       }
 
+      dispatch((0, actions_2.setLocale)(locale));
       return {
         initialState: undefined,
         locale,
@@ -2769,7 +2773,7 @@ exports.resetApp = (0, toolkit_1.createAsyncThunk)('resetApp', (_, {
   dispatch((0, actions_1.resetConfig)());
   yield dispatch((0, actions_1.initializeConfig)());
   yield dispatch((0, exports.initializeApp)());
-  dispatch((0, actions_2.initializeVisibility)());
+  dispatch((0, actions_3.initializeVisibility)());
 }));
 
 /***/ }),
@@ -3055,13 +3059,14 @@ exports.initialConfigState = Object.assign(Object.assign({}, config_1.defaultCon
   connectWhenInView: true,
   showDisclaimer: false,
   showFaq: false,
+  showSuggestions: true,
   customComponents: {},
   defaults: {
     visible: null
   },
   preChatEvents: []
 });
-const configKeys = ['hideOnNoUserResponse', 'connectWhenInView', 'showDisclaimer', 'showFaq', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'visible', 'visibilityCallback', 'errorCallback', 'agentParticipant', 'userParticipant', 'startChatIcon'];
+const configKeys = ['hideOnNoUserResponse', 'connectWhenInView', 'showDisclaimer', 'showFaq', 'showSuggestions', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'visible', 'visibilityCallback', 'errorCallback', 'agentParticipant', 'userParticipant', 'startChatIcon'];
 
 const updateState = (state, config) => {
   const _a = (0, general_utils_1.pick)(config, configKeys),
@@ -3368,11 +3373,9 @@ exports.Yh = exports._B = exports.W_ = void 0;
 
 const toolkit_1 = __webpack_require__(427);
 
-const actions_1 = __webpack_require__(134);
+const actions_1 = __webpack_require__(915);
 
-const actions_2 = __webpack_require__(915);
-
-const actions_3 = __webpack_require__(59);
+const actions_2 = __webpack_require__(59);
 
 const initialState = {
   translations: {
@@ -3410,15 +3413,11 @@ exports.W_ = (0, toolkit_1.createSlice)({
   },
   extraReducers: builder => {
     // Add reducers for additional action types here, and handle loading state as needed
-    builder.addCase(actions_2.initializeConfig.fulfilled, (state, {
+    builder.addCase(actions_1.initializeConfig.fulfilled, (state, {
       payload
     }) => {
       state.initialLocale = payload.locale;
-    }).addCase(actions_1.initializeApp.fulfilled, (state, {
-      payload
-    }) => {
-      state.locale = payload.locale;
-    }).addCase(actions_3.setLocale.fulfilled, (state, {
+    }).addCase(actions_2.setLocale.fulfilled, (state, {
       payload
     }) => {
       if (!(payload === null || payload === void 0 ? void 0 : payload.translations)) {
@@ -3489,15 +3488,14 @@ exports.ZP = exports.EC.reducer;
 /***/ 153:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
-var __webpack_unused_export__;
 
 
 var _a;
 
-__webpack_unused_export__ = ({
+Object.defineProperty(exports, "__esModule", ({
   value: true
-});
-__webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = exports.To = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export__ = exports.Zd = exports.dH = exports.NI = exports.Qv = void 0;
+}));
+exports.stopIdleDetachCountdownCounter = exports.showOption = exports.setUserSelectedOptions = exports.setUserSelectedOption = exports.setUserEntryType = exports.setUploadProgress = exports.setUploadError = exports.setUploadComplete = exports.setServiceEntryMetadata = exports.setServiceDataItem = exports.setSeamlyContainerElement = exports.setParticipant = exports.setLoadedImageEventIds = exports.setIsLoading = exports.setInitialState = exports.setHistory = exports.setHeaderTitle = exports.setHeaderSubTitle = exports.setFeatures = exports.setFeatureEnabledState = exports.setEventsRead = exports.setBlockAutoEntrySwitch = exports.setActiveService = exports.setActiveEntryType = exports.resetHistoryLoadedFlag = exports.registerUpload = exports.initResumeConversationPrompt = exports.initIdleDetachCountdown = exports.hideOption = exports.decrementIdleDetachCountdownCounter = exports.clearResumeConversationPrompt = exports.clearIdleDetachCountdown = exports.clearFeatures = exports.clearEvents = exports.clearAllUploads = exports.addEvent = exports.ackEvent = exports.storeSlice = exports.initialStoreState = exports.mergeHistory = exports.orderHistory = exports.isUnreadMessage = void 0;
 
 const toolkit_1 = __webpack_require__(427);
 
@@ -3516,7 +3514,7 @@ const isUnreadMessage = ({
   payload
 }) => type === seamly_utils_1.eventTypes.message && !payload.fromClient || type === seamly_utils_1.eventTypes.info && payload.type === seamly_utils_1.payloadTypes.text;
 
-exports.Qv = isUnreadMessage;
+exports.isUnreadMessage = isUnreadMessage;
 
 const orderHistory = events => {
   return events.sort(({
@@ -3530,6 +3528,8 @@ const orderHistory = events => {
   }) => occurredAtA - occurredAtB);
 };
 
+exports.orderHistory = orderHistory;
+
 const mergeHistory = (stateEvents, historyEvents) => {
   const newStateEvents = stateEvents.filter(stateEvent => // Deduplicate the event streams, giving events in historyEvents
   // precedence so the server is able to push changes to events.
@@ -3540,10 +3540,10 @@ const mergeHistory = (stateEvents, historyEvents) => {
   // these messages will be shown in the wrong order if not reversed. For
   // the normal merging logic there is no added effect.
   .reverse();
-  return orderHistory([...newHistoryEvents, ...newStateEvents]);
+  return (0, exports.orderHistory)([...newHistoryEvents, ...newStateEvents]);
 };
 
-exports.NI = mergeHistory;
+exports.mergeHistory = mergeHistory;
 
 const participantReducer = (participantInfo, action) => {
   // TODO: a) Styleguide only! b) Should be removed after styleguide overhaul.
@@ -3611,7 +3611,7 @@ const calculateNewEntryMeta = (entryMeta, channelEvent) => {
   });
 };
 
-exports.dH = {
+exports.initialStoreState = {
   events: [],
   initialState: {
     userResponded: false
@@ -3663,9 +3663,9 @@ exports.dH = {
   },
   seamlyContainerElement: null
 };
-exports.Zd = (0, toolkit_1.createSlice)({
+exports.storeSlice = (0, toolkit_1.createSlice)({
   name: 'store',
-  initialState: exports.dH,
+  initialState: exports.initialStoreState,
   reducers: {
     addEvent: (state, action) => {
       var _a, _b;
@@ -3690,7 +3690,7 @@ exports.Zd = (0, toolkit_1.createSlice)({
         });
       }
 
-      const incrementUnread = (0, exports.Qv)(action.payload); // We check for duplicated and ignore them as in some error of the websocket
+      const incrementUnread = (0, exports.isUnreadMessage)(action.payload); // We check for duplicated and ignore them as in some error of the websocket
       // a duplicate join can be active for a while until the server connection
       // times out.
 
@@ -3729,7 +3729,8 @@ exports.Zd = (0, toolkit_1.createSlice)({
       } = payload;
 
       if (matchedEvent) {
-        state.events = orderHistory(state.events.map(m => m.payload.id === matchedEvent.payload.id ? Object.assign(Object.assign({}, m), {
+        state.events = (0, exports.orderHistory)( //@ts-ignore
+        state.events.map(m => m.payload.id === matchedEvent.payload.id ? Object.assign(Object.assign({}, m), {
           payload: Object.assign(Object.assign({}, m.payload), {
             id,
             occurredAt
@@ -3773,7 +3774,7 @@ exports.Zd = (0, toolkit_1.createSlice)({
     }) => {
       var _a;
 
-      const events = (0, exports.NI)(state.events, history);
+      const events = (0, exports.mergeHistory)(state.events, history);
       const mergedParticipants = Object.assign(Object.assign({}, state.participantInfo.participants), participants);
       const lastParticipantEvent = events.slice().reverse().find(m => (m.type === 'message' || m.type === 'participant') && !m.payload.fromClient);
       let lastParticipantId = null;
@@ -3789,9 +3790,11 @@ exports.Zd = (0, toolkit_1.createSlice)({
       }
 
       const {
-        entry,
-        uploads
+        entry
       } = activeServiceSettings;
+      const {
+        upload
+      } = entry.options;
       const historyNewEntryMeta = calculateNewEntryMeta(Object.assign(Object.assign(Object.assign({}, state.entryMeta), entry), {
         active: entry.default || seamly_utils_1.payloadTypes.text,
         options: Object.assign({}, entry && entry.options ? entry.options : {})
@@ -3799,14 +3802,14 @@ exports.Zd = (0, toolkit_1.createSlice)({
       let newFeatures = Object.assign({}, state.options.features);
       const newFeaturesHasUpload = newFeatures.hasOwnProperty(seamly_utils_1.featureKeys.uploads); // Only set uploads if it was initialised by the account config.
 
-      if (newFeaturesHasUpload && lastParticipantEvent.type === 'message') {
+      if (newFeaturesHasUpload && (lastParticipantEvent === null || lastParticipantEvent === void 0 ? void 0 : lastParticipantEvent.type) === 'message') {
         const {
           payload: lastParticipantEventPayload
         } = lastParticipantEvent;
         const entryType = ((_a = lastParticipantEventPayload === null || lastParticipantEventPayload === void 0 ? void 0 : lastParticipantEventPayload.entry) === null || _a === void 0 ? void 0 : _a.type) || {};
         newFeatures = Object.assign(Object.assign({}, newFeatures), {
           uploads: {
-            enabled: !!(uploads && uploads.enabled),
+            enabled: !!(upload && upload.enabled),
             enabledFromEntry: entryType === seamly_utils_1.entryTypes.upload
           }
         });
@@ -3823,7 +3826,7 @@ exports.Zd = (0, toolkit_1.createSlice)({
       state.serviceInfo = Object.assign(Object.assign({}, state.serviceInfo), {
         activeServiceSessionId
       });
-      state.serviceData = serviceData || {};
+      state.serviceData = Object.assign(Object.assign({}, state.serviceData), serviceData);
       state.options = Object.assign(Object.assign({}, state.options), {
         features: newFeatures || {}
       });
@@ -3894,8 +3897,8 @@ exports.Zd = (0, toolkit_1.createSlice)({
     setActiveService: (state, {
       payload
     }) => {
-      if (state.serviceInfo.activeServiceSessionId !== payload.activeServiceSessionId) {
-        state.serviceInfo.activeServiceSessionId = payload.activeServiceSessionId;
+      if (state.serviceInfo.activeServiceSessionId !== payload) {
+        state.serviceInfo.activeServiceSessionId = payload;
       }
     },
     setHeaderTitle: (state, {
@@ -3912,7 +3915,7 @@ exports.Zd = (0, toolkit_1.createSlice)({
       payload
     }) => {
       state.initialState = payload.initialState;
-      state.unreadEvents = exports.dH.unreadEvents;
+      state.unreadEvents = exports.initialStoreState.unreadEvents;
     },
     setServiceDataItem: (state, {
       payload
@@ -4055,7 +4058,7 @@ exports.Zd = (0, toolkit_1.createSlice)({
     }
   },
   extraReducers: builder => {
-    builder.addCase(actions_1.resetApp.pending, () => exports.dH).addCase(actions_2.initializeConfig.fulfilled, (state, {
+    builder.addCase(actions_1.resetApp.pending, () => exports.initialStoreState).addCase(actions_2.initializeConfig.fulfilled, (state, {
       payload
     }) => {
       var _a;
@@ -4071,8 +4074,8 @@ exports.Zd = (0, toolkit_1.createSlice)({
     });
   }
 });
-_a = exports.Zd.actions, __webpack_unused_export__ = _a.ackEvent, __webpack_unused_export__ = _a.addEvent, __webpack_unused_export__ = _a.clearAllUploads, __webpack_unused_export__ = _a.clearEvents, __webpack_unused_export__ = _a.clearFeatures, __webpack_unused_export__ = _a.clearIdleDetachCountdown, __webpack_unused_export__ = _a.clearResumeConversationPrompt, __webpack_unused_export__ = _a.decrementIdleDetachCountdownCounter, __webpack_unused_export__ = _a.hideOption, __webpack_unused_export__ = _a.initIdleDetachCountdown, __webpack_unused_export__ = _a.initResumeConversationPrompt, __webpack_unused_export__ = _a.registerUpload, __webpack_unused_export__ = _a.resetHistoryLoadedFlag, __webpack_unused_export__ = _a.setActiveEntryType, __webpack_unused_export__ = _a.setActiveService, __webpack_unused_export__ = _a.setBlockAutoEntrySwitch, __webpack_unused_export__ = _a.setEventsRead, __webpack_unused_export__ = _a.setFeatureEnabledState, __webpack_unused_export__ = _a.setFeatures, __webpack_unused_export__ = _a.setHeaderSubTitle, __webpack_unused_export__ = _a.setHeaderTitle, __webpack_unused_export__ = _a.setHistory, __webpack_unused_export__ = _a.setInitialState, __webpack_unused_export__ = _a.setIsLoading, __webpack_unused_export__ = _a.setLoadedImageEventIds, exports.To = _a.setParticipant, __webpack_unused_export__ = _a.setSeamlyContainerElement, __webpack_unused_export__ = _a.setServiceDataItem, __webpack_unused_export__ = _a.setServiceEntryMetadata, __webpack_unused_export__ = _a.setUploadComplete, __webpack_unused_export__ = _a.setUploadError, __webpack_unused_export__ = _a.setUploadProgress, __webpack_unused_export__ = _a.setUserEntryType, __webpack_unused_export__ = _a.setUserSelectedOption, __webpack_unused_export__ = _a.setUserSelectedOptions, __webpack_unused_export__ = _a.showOption, __webpack_unused_export__ = _a.stopIdleDetachCountdownCounter;
-exports.ZP = exports.Zd.reducer;
+_a = exports.storeSlice.actions, exports.ackEvent = _a.ackEvent, exports.addEvent = _a.addEvent, exports.clearAllUploads = _a.clearAllUploads, exports.clearEvents = _a.clearEvents, exports.clearFeatures = _a.clearFeatures, exports.clearIdleDetachCountdown = _a.clearIdleDetachCountdown, exports.clearResumeConversationPrompt = _a.clearResumeConversationPrompt, exports.decrementIdleDetachCountdownCounter = _a.decrementIdleDetachCountdownCounter, exports.hideOption = _a.hideOption, exports.initIdleDetachCountdown = _a.initIdleDetachCountdown, exports.initResumeConversationPrompt = _a.initResumeConversationPrompt, exports.registerUpload = _a.registerUpload, exports.resetHistoryLoadedFlag = _a.resetHistoryLoadedFlag, exports.setActiveEntryType = _a.setActiveEntryType, exports.setActiveService = _a.setActiveService, exports.setBlockAutoEntrySwitch = _a.setBlockAutoEntrySwitch, exports.setEventsRead = _a.setEventsRead, exports.setFeatureEnabledState = _a.setFeatureEnabledState, exports.setFeatures = _a.setFeatures, exports.setHeaderSubTitle = _a.setHeaderSubTitle, exports.setHeaderTitle = _a.setHeaderTitle, exports.setHistory = _a.setHistory, exports.setInitialState = _a.setInitialState, exports.setIsLoading = _a.setIsLoading, exports.setLoadedImageEventIds = _a.setLoadedImageEventIds, exports.setParticipant = _a.setParticipant, exports.setSeamlyContainerElement = _a.setSeamlyContainerElement, exports.setServiceDataItem = _a.setServiceDataItem, exports.setServiceEntryMetadata = _a.setServiceEntryMetadata, exports.setUploadComplete = _a.setUploadComplete, exports.setUploadError = _a.setUploadError, exports.setUploadProgress = _a.setUploadProgress, exports.setUserEntryType = _a.setUserEntryType, exports.setUserSelectedOption = _a.setUserSelectedOption, exports.setUserSelectedOptions = _a.setUserSelectedOptions, exports.showOption = _a.showOption, exports.stopIdleDetachCountdownCounter = _a.stopIdleDetachCountdownCounter;
+exports["default"] = exports.storeSlice.reducer;
 
 /***/ }),
 
@@ -4091,18 +4094,54 @@ __webpack_unused_export__ = __webpack_unused_export__ = __webpack_unused_export_
 
 const toolkit_1 = __webpack_require__(427);
 
-const actions_1 = __webpack_require__(134);
+const actions_1 = __webpack_require__(915);
 
-const actions_2 = __webpack_require__(915);
+const slice_1 = __webpack_require__(153);
 
 exports.Z6 = {
   isActive: false,
   currentLocale: undefined,
   isAvailable: false,
   languages: [],
-  originalPayloadIds: [],
-  containerId: (0, toolkit_1.nanoid)()
+  containerId: (0, toolkit_1.nanoid)(),
+  translatedEventGroups: {}
 };
+
+const getLastGroupId = (events, id) => {
+  const eventGroup = [...events].reduce((acc, {
+    payload
+  }, _index, arr) => {
+    var _a;
+
+    if (acc[id]) {
+      // Splice to break early (make the reducer think we are done)
+      // This is needed to avoid events of other groups from being added to the array.
+      // @ts-ignore
+      if ((payload === null || payload === void 0 ? void 0 : payload.type) === 'divider' && ((_a = payload === null || payload === void 0 ? void 0 : payload.body) === null || _a === void 0 ? void 0 : _a.translationEnabled)) {
+        arr.splice(0);
+        return acc;
+      }
+
+      acc[id].push(payload.id);
+    }
+
+    if (payload.id === id) acc[id] = [];
+    return acc;
+  }, {});
+  const [[groupId, eventIds]] = Object.entries(eventGroup);
+  const lastGroupId = events //@ts-ignore
+  .filter(event => {
+    var _a;
+
+    return ((_a = event.payload) === null || _a === void 0 ? void 0 : _a.type) === 'divider';
+  }).map(event => event.payload.id).at(-1);
+  return {
+    lastGroupId,
+    groupId,
+    eventIds
+  };
+};
+
 exports.i$ = (0, toolkit_1.createSlice)({
   name: 'translation',
   initialState: exports.Z6,
@@ -4117,35 +4156,35 @@ exports.i$ = (0, toolkit_1.createSlice)({
       state.isActive = false;
       state.currentLocale = undefined;
     },
-    enableEvent: (state, {
-      payload
-    }) => {
-      if (!state.originalPayloadIds.includes(payload)) {
-        return;
+    enableEventsTranslation: (state, {
+      payload: {
+        events,
+        id
       }
-
-      state.originalPayloadIds = state.originalPayloadIds.filter(id => id !== payload);
-    },
-    disableEvent: (state, {
-      payload
     }) => {
-      if (state.originalPayloadIds.includes(payload)) {
-        return;
+      delete state.translatedEventGroups[id];
+      const {
+        lastGroupId
+      } = getLastGroupId(events, id);
+      state.lastGroupId = lastGroupId;
+    },
+    disableEventsTranslation: (state, {
+      payload: {
+        events,
+        id
       }
-
-      state.originalPayloadIds.push(payload);
+    }) => {
+      const {
+        lastGroupId,
+        groupId,
+        eventIds
+      } = getLastGroupId(events, id);
+      state.lastGroupId = lastGroupId;
+      state.translatedEventGroups[groupId] = eventIds;
     }
   },
   extraReducers: builder => {
-    builder.addCase(actions_1.initializeApp.fulfilled, (state, {
-      payload
-    }) => {
-      var _a, _b;
-
-      if (!((_b = (_a = payload.config) === null || _a === void 0 ? void 0 : _a.context) === null || _b === void 0 ? void 0 : _b.translationLocale)) return;
-      state.isActive = true;
-      state.currentLocale = payload.locale;
-    }).addCase(actions_2.initializeConfig.fulfilled, (state, {
+    builder.addCase(actions_1.initializeConfig.fulfilled, (state, {
       payload
     }) => {
       var _a;
@@ -4154,10 +4193,16 @@ exports.i$ = (0, toolkit_1.createSlice)({
       if (!feature) return;
       state.isAvailable = feature.enabled === true;
       state.languages = feature.languages;
+    }).addCase(slice_1.addEvent, (state, {
+      payload
+    }) => {
+      if (state.translatedEventGroups[state.lastGroupId]) {
+        state.translatedEventGroups[state.lastGroupId].push(payload.payload.id);
+      }
     });
   }
 });
-_a = exports.i$.actions, __webpack_unused_export__ = _a.enableTranslation, __webpack_unused_export__ = _a.disableTranslation, __webpack_unused_export__ = _a.enableEvent, __webpack_unused_export__ = _a.disableEvent;
+_a = exports.i$.actions, __webpack_unused_export__ = _a.enableTranslation, __webpack_unused_export__ = _a.disableTranslation, __webpack_unused_export__ = _a.enableEventsTranslation, __webpack_unused_export__ = _a.disableEventsTranslation;
 exports.ZP = exports.i$.reducer;
 
 /***/ }),
@@ -4532,13 +4577,13 @@ class SeamlyBaseError extends Error {
 
     this.originalError = originalError;
 
-    if (originalError !== null && originalError !== void 0 && originalError.payload) {
+    if (originalError?.payload) {
       this.originalEvent = originalError;
       this.originalError = originalError.payload.error;
       this.message = `Event of type ${originalError.payload.type} encountered`;
     }
 
-    if (originalError !== null && originalError !== void 0 && originalError.error) {
+    if (originalError?.error) {
       this.originalError = originalError.error;
     }
   }
@@ -4741,7 +4786,7 @@ const SeamlyStaticCore = ({
 
     const newStore = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_11__.configureStore)({
       reducer: {
-        state: domains_store_slice__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .ZP,
+        state: domains_store_slice__WEBPACK_IMPORTED_MODULE_6__["default"],
         app: domains_app_slice__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .ZP,
         config: (domains_config_slice__WEBPACK_IMPORTED_MODULE_2___default()),
         i18n: domains_i18n_slice__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .ZP,
@@ -4779,7 +4824,7 @@ const SeamlyStaticCore = ({
     newStore.dispatch((0,domains_i18n_slice__WEBPACK_IMPORTED_MODULE_4__/* .setInitialLocale */ ._B)('en-GB'));
     newStore.dispatch((0,domains_i18n_slice__WEBPACK_IMPORTED_MODULE_4__/* .setTranslations */ .Yh)(translations));
     participants.forEach(participant => {
-      newStore.dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_6__/* .setParticipant */ .To)({
+      newStore.dispatch((0,domains_store_slice__WEBPACK_IMPORTED_MODULE_6__.setParticipant)({
         participant,
         fromClient: participant.id === 'user'
       }));
@@ -4900,7 +4945,8 @@ const baseState = {
     accountConfig: {},
     hideOnNoUserResponse: false,
     showFaq: false,
-    showDisclaimer: false
+    showDisclaimer: false,
+    showSuggestions: true
   },
   initialState: {},
   unreadEvents: 0,
@@ -5019,6 +5065,31 @@ const newTranslationDividerStart = {
     type: 'divider'
   }
 };
+const newTranslationDividerStartTwo = {
+  type: 'info',
+  payload: {
+    body: {
+      language: 'Nederlands',
+      subtype: 'new_translation',
+      text: '[NL] Automatic translation to Dutch started. Please note that automatic translations may contain errors.',
+      translationEnabled: true,
+      translationLocale: 'nl'
+    },
+    fromClient: false,
+    fromHistory: true,
+    id: (0,web_ui_.randomId)(),
+    occurredAt: 1625658300534259,
+    participant: null,
+    service: {
+      meta: {},
+      name: null,
+      serviceSessionId: null
+    },
+    transactionId: null,
+    translatedBody: null,
+    type: 'divider'
+  }
+};
 const newTranslationDividerStop = {
   type: 'info',
   payload: {
@@ -5654,7 +5725,7 @@ const translationsSlice = {
   currentLocale: undefined,
   isAvailable: false,
   languages: [],
-  originalPayloadIds: [],
+  translatedEventGroups: {},
   containerId: (0,web_ui_.randomId)()
 };
 const suggestions = [{
@@ -6549,11 +6620,19 @@ const standardState = {
       payload: states_objectSpread(states_objectSpread({}, choicePromptMessage.payload), {}, {
         id: `${choicePromptMessage.payload.id}XXX`
       })
-    }), longTextMessage, userMessage, textMessageBoldItalicUnderline, newTopicDivider, newTranslationDividerStart, newTranslationDividerStop, imageMessage, fileDownloadAgentMessage, deletedFileDownloadAgentMessage, userMessageLong, videoMessage, textMessageWithLinks, textMessageWithLongLink, imageMessageWithLightbox, fileDownloadUserMessage, emptyUrlFileDownloadUserMessage, textMesageWithBullets, choicePromptMessage, ctaMessage, newTranslationDividerStop, newTranslationDividerStart].map(addTranslationData),
+    }), longTextMessage, userMessage, textMessageBoldItalicUnderline, newTopicDivider, newTranslationDividerStartTwo, newTranslationDividerStop, imageMessage, fileDownloadAgentMessage, deletedFileDownloadAgentMessage, userMessageLong, videoMessage, textMessageWithLinks, textMessageWithLongLink, imageMessageWithLightbox, fileDownloadUserMessage, emptyUrlFileDownloadUserMessage, textMesageWithBullets, choicePromptMessage, ctaMessage, newTranslationDividerStop].map(addTranslationData),
     translations: states_objectSpread(states_objectSpread({}, translationsSlice), {}, {
       currentLocale: 'nl',
       isActive: true,
       isAvailable: true,
+      translatedEventGroups: {
+        [newTranslationDividerStart.payload.id]: [infoMessage, shortTextMessage, states_objectSpread(states_objectSpread({}, choicePromptMessage), {}, {
+          payload: states_objectSpread(states_objectSpread({}, choicePromptMessage.payload), {}, {
+            id: `${choicePromptMessage.payload.id}XXX`
+          })
+        }), longTextMessage, userMessage, textMessageBoldItalicUnderline, newTopicDivider].map(p => p.payload.id),
+        [newTranslationDividerStartTwo.payload.id]: [imageMessage, fileDownloadAgentMessage, deletedFileDownloadAgentMessage, userMessageLong, videoMessage, textMessageWithLinks, textMessageWithLongLink, imageMessageWithLightbox, fileDownloadUserMessage, emptyUrlFileDownloadUserMessage, textMesageWithBullets, choicePromptMessage, ctaMessage].map(p => p.payload.id)
+      },
       languages: [{
         locale: 'nl',
         nativeName: 'Dutch'
@@ -7076,7 +7155,8 @@ const StyleGuideApp = ({
     const bareState = mainState[feature][layoutMode];
     const {
       overrideMessages,
-      showFaq
+      showFaq,
+      showSuggestions
     } = bareState.config;
     const agent = participants.find(participant => participant.id === 'agent');
 
@@ -7087,10 +7167,11 @@ const StyleGuideApp = ({
       }, overrideMessages ? {
         messages: overrideMessages
       } : {}), {}, {
-        showFaq
+        showFaq,
+        showSuggestions
       }),
       headerTitles: app_objectSpread(app_objectSpread({}, bareState.headerTitles), {}, {
-        subTitle: (agent === null || agent === void 0 ? void 0 : agent.name) || bareState.headerTitles.subTitle
+        subTitle: agent?.name || bareState.headerTitles.subTitle
       })
     });
 
@@ -7329,11 +7410,13 @@ function initializeStyleGuideExternalApi(appConfig, styleGuideConfig) {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "selectEventIds": () => (/* binding */ selectEventIds),
 /* harmony export */   "selectEvents": () => (/* binding */ selectEvents),
 /* harmony export */   "selectEventsWithSuggestion": () => (/* binding */ selectEventsWithSuggestion),
 /* harmony export */   "selectState": () => (/* binding */ selectState),
 /* harmony export */   "useEntryTextLimit": () => (/* binding */ useEntryTextLimit),
 /* harmony export */   "useEvents": () => (/* binding */ useEvents),
+/* harmony export */   "useEventsIds": () => (/* binding */ useEventsIds),
 /* harmony export */   "useLastMessageEventId": () => (/* binding */ useLastMessageEventId),
 /* harmony export */   "useLoadedImageEventIds": () => (/* binding */ useLoadedImageEventIds),
 /* harmony export */   "useSeamlyCurrentAgent": () => (/* binding */ useSeamlyCurrentAgent),
@@ -7374,9 +7457,7 @@ const selectEventsWithSuggestion = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_
   events,
   serviceData
 }, config, hasUserResponded) => {
-  var _serviceData$suggesti;
-
-  if (hasUserResponded || config.layoutMode === 'inline' || !(serviceData !== null && serviceData !== void 0 && serviceData.suggestion) || !(serviceData !== null && serviceData !== void 0 && (_serviceData$suggesti = serviceData.suggestion) !== null && _serviceData$suggesti !== void 0 && _serviceData$suggesti.body.length)) {
+  if (hasUserResponded || config.layoutMode === 'inline' || !serviceData?.suggestion || !serviceData?.suggestion?.body.length) {
     return events;
   }
 
@@ -7387,12 +7468,10 @@ const selectEventsWithSuggestion = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_
   return [...events, suggestionsEvent];
 });
 const selectEvents = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_5__.createSelector)(selectEventsWithSuggestion, domains_config_selectors__WEBPACK_IMPORTED_MODULE_0__.selectConfig, (events, config) => {
-  var _config$messages;
-
   const {
     enabled,
     threshold
-  } = (config === null || config === void 0 ? void 0 : (_config$messages = config.messages) === null || _config$messages === void 0 ? void 0 : _config$messages.timeIndicator) ?? {};
+  } = config?.messages?.timeIndicator ?? {};
 
   if (!enabled) {
     return events;
@@ -7418,6 +7497,10 @@ const selectEvents = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_5__.createSele
   return mappedEvents;
 });
 const useEvents = () => (0,react_redux__WEBPACK_IMPORTED_MODULE_4__.useSelector)(selectEvents);
+const selectEventIds = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_5__.createSelector)(selectEvents, events => {
+  return events.map(event => event.payload.id);
+});
+const useEventsIds = () => (0,react_redux__WEBPACK_IMPORTED_MODULE_4__.useSelector)(selectEventIds);
 const useSeamlyIsLoading = () => useSeamlyStateContext().isLoading;
 const useSeamlyHeaderData = () => useSeamlyStateContext().headerTitles;
 const useSeamlyUnreadCount = () => useSeamlyStateContext().unreadEvents;
@@ -7426,10 +7509,8 @@ const useSkiplink = () => useSeamlyStateContext().skiplinkTargetId;
 const useSeamlyParticipant = participantId => useSeamlyStateContext().participantInfo.participants[participantId];
 const useSeamlyServiceInfo = () => useSeamlyStateContext().serviceInfo;
 const selectLastMessageEventId = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_5__.createSelector)(selectEvents, events => {
-  var _filteredEvents;
-
   const filteredEvents = events.filter(event => event.type === 'message');
-  return (_filteredEvents = filteredEvents[filteredEvents.length - 1]) === null || _filteredEvents === void 0 ? void 0 : _filteredEvents.payload.id;
+  return filteredEvents[filteredEvents.length - 1]?.payload.id;
 });
 const useLastMessageEventId = () => (0,react_redux__WEBPACK_IMPORTED_MODULE_4__.useSelector)(selectLastMessageEventId);
 const useSeamlyIsHistoryLoaded = () => useSeamlyStateContext().historyLoaded;