@seamly/web-ui 20.0.0-beta.2 → 20.0.0-beta.5

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

@@ -1553,12 +1553,12 @@ const selectEventsWithSuggestion = createSelector(seamly_state_hooks_selectState
   return [...events, suggestionsEvent];
 });
 const selectEvents = createSelector(selectEventsWithSuggestion, selectConfig, (events, config) => {
-  var _config$messages$time, _config$messages;
+  var _config$messages;
 
   const {
     enabled,
     threshold
-  } = (_config$messages$time = config === null || config === void 0 ? void 0 : (_config$messages = config.messages) === null || _config$messages === void 0 ? void 0 : _config$messages.timeIndicator) !== null && _config$messages$time !== void 0 ? _config$messages$time : {};
+  } = (config === null || config === void 0 ? void 0 : (_config$messages = config.messages) === null || _config$messages === void 0 ? void 0 : _config$messages.timeIndicator) ?? {};
 
   if (!enabled) {
     return events;
@@ -1940,8 +1940,8 @@ function utils_validate(values, schema = {}) {
       validations = [validations];
     }
 
-    for (let i = 0; (_ref = i < ((_validations = validations) === null || _validations === void 0 ? void 0 : _validations.length)) !== null && _ref !== void 0 ? _ref : 0; i++) {
-      var _ref, _validations;
+    for (let i = 0; i < ((_validations = validations) === null || _validations === void 0 ? void 0 : _validations.length) ?? 0; i++) {
+      var _validations;
 
       if (!validations[i].fn(values[key], validations[i].compareValue)) {
         errors[key] = validations[i].errorText;
@@ -2267,9 +2267,7 @@ function updateFormControl(state, formId, name, controlState) {
     formId,
     persistData
   }) => {
-    var _state$formId2;
-
-    const formState = persistData ? (_state$formId2 = state[formId]) !== null && _state$formId2 !== void 0 ? _state$formId2 : reducer_objectSpread(reducer_objectSpread({}, initialFormState), {}, {
+    const formState = persistData ? state[formId] ?? reducer_objectSpread(reducer_objectSpread({}, initialFormState), {}, {
       persistData
     }) : reducer_objectSpread(reducer_objectSpread({}, initialFormState), {}, {
       persistData
@@ -5687,7 +5685,7 @@ function TranslationsOptionButton() {
       })
     }), _jsxs("button", {
       type: "button",
-      className: className(['button', 'button--secondary', 'app__options__button']),
+      className: className(['button', 'button--secondary', 'chat__options__button']),
       id: toggleButtonId,
       onClick: handleToggleClick,
       onKeyDown: handleToggleKeyDown,
@@ -6099,7 +6097,7 @@ const participantInfo = {
     'e65fa8dc-97ab-4711-8fec-82bae6461aa2': {
       avatar,
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
-      introduction: "You're now talking to Mrs. Bot gimme a minit",
+      introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: {
@@ -6114,7 +6112,7 @@ const participantInfo = {
     },
     'e65fa8dc-97ab-4711-8fec-82bae6461aa3': {
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa3',
-      introduction: "You're now talking to Mrs. Bot gimme a minit",
+      introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: {
@@ -6215,7 +6213,8 @@ const infoMessage = {
   payload: {
     body: {
       text: 'This is a system generated info message',
-      type: 'text'
+      type: 'text',
+      variables: {}
     },
     fromClient: false,
     id: (0,web_ui_namespaceObject.randomId)(),
@@ -6268,7 +6267,7 @@ const participantMessage = {
     participant: {
       avatar,
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
-      introduction: "You're now talking to Mrs. Bot gimme a minit",
+      introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: {
@@ -6294,7 +6293,7 @@ const participantMessageDefaultIcon = {
     messageStatus: 'received',
     participant: {
       id: 'e65fa8dc-97ab-4711-8fec-82bae6461aa3',
-      introduction: "You're now talking to Mrs. Bot gimme a minit",
+      introduction: "You're now talking to {{name}} gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: {
@@ -6322,7 +6321,8 @@ const getCustomMessage = ({
     body: {
       type,
       text,
-      data
+      data,
+      variables: {}
     },
     participant: 'e65fa8dc-97ab-4711-8fec-82bae6461aa2',
     service: {
@@ -6347,7 +6347,8 @@ const shortTextMessage = {
   payload: {
     body: {
       text: 'What do you want to do?',
-      type: 'text'
+      type: 'text',
+      variables: {}
     },
     fromClient: false,
     fromHistory: true,
@@ -6411,7 +6412,8 @@ const longTextMessage = {
   payload: {
     body: {
       text: 'What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am. What do you want to do? This is a really long message from a bot that has a lot to say about a lot of things. Currently I am contemplating my own bot existence and constantly asking myself who I am.',
-      type: 'text'
+      type: 'text',
+      variables: {}
     },
     fromClient: false,
     fromHistory: true,
@@ -6435,7 +6437,8 @@ const textMessageBoldItalicUnderline = {
   payload: {
     body: {
       text: 'Bubble with **bold** *italic* <u>underline</u>',
-      type: 'text'
+      type: 'text',
+      variables: {}
     },
     fromClient: false,
     fromHistory: true,
@@ -6460,8 +6463,24 @@ const textMessageWithLinks = {
   type: 'message',
   payload: {
     body: {
-      text: '<a href="https://google.com" data-link-id="1">Link in same window</a> and <a href="https://google.com" data-link-id="2" target="_blank">link in new window</a> embedded in text',
-      type: 'text'
+      text: '{{link_1}} and {{link_2}} embedded in text',
+      type: 'text',
+      variables: {
+        link_1: {
+          id: '1',
+          name: 'Link in same window',
+          newTab: false,
+          type: 'link',
+          url: 'https://google.com'
+        },
+        link_2: {
+          id: '2',
+          name: 'link in new window',
+          newTab: true,
+          type: 'link',
+          url: 'https://google.com'
+        }
+      }
     },
     fromClient: false,
     fromHistory: true,
@@ -6486,8 +6505,17 @@ const textMessageWithLongLink = {
   type: 'message',
   payload: {
     body: {
-      text: 'Here is a long link <a href="https://google.com" data-link-id="1">click me click me please click me yoohoooo please please click me here I am click me now what are you waiting for click me now now now now now click meeeeeeeeeeeeee</a> embedded in text',
-      type: 'text'
+      text: 'Here is a long link {{link_1}} embedded in text',
+      type: 'text',
+      variables: {
+        link_1: {
+          id: '1',
+          name: 'click me click me please click me yoohoooo please please click me here I am click me now what are you waiting for click me now now now now now click meeeeeeeeeeeeee',
+          newTab: false,
+          type: 'link',
+          url: 'https://google.com'
+        }
+      }
     },
     fromClient: false,
     fromHistory: true,
@@ -6513,7 +6541,8 @@ const textMesageWithBullets = {
   payload: {
     body: {
       text: '<ul>\n<li>Bullets</li>\n<li>bullets</li>\n<li>bullets</li>\n</ul>\n',
-      type: 'text'
+      type: 'text',
+      variables: {}
     },
     fromClient: false,
     fromHistory: true,
@@ -6674,7 +6703,8 @@ const userMessage = {
   payload: {
     body: {
       text: 'This is what the user typed',
-      type: 'text'
+      type: 'text',
+      variables: {}
     },
     fromClient: true,
     fromHistory: true,
@@ -6691,7 +6721,8 @@ const userMessageLong = {
   payload: {
     body: {
       text: 'This is what the user typed. And sometimes the user has quite a lot to say and then we get longer lines that need to wrap well and not break the styling so here goes with just such a line right here!!',
-      type: 'text'
+      type: 'text',
+      variables: {}
     },
     fromClient: true,
     fromHistory: true,
@@ -6812,6 +6843,7 @@ const categoryKeys = {
   messages: 'messages',
   errors: 'errors',
   uploads: 'uploads',
+  faq: 'faq',
   features: 'features',
   options: 'options',
   suggestions: 'suggestions',
@@ -6836,6 +6868,10 @@ const categories = {
     heading: 'File uploads',
     description: ''
   },
+  [categoryKeys.faq]: {
+    heading: 'FAQ',
+    description: ''
+  },
   [categoryKeys.features]: {
     heading: 'Other features',
     description: ''
@@ -6911,6 +6947,142 @@ const cardTopic = {
     }
   }
 };
+const faq = {
+  faqEmptyList: states_objectSpread(states_objectSpread({
+    category: categoryKeys.faq,
+    headingText: 'Empty FAQ list',
+    description: ''
+  }, baseState), {}, {
+    config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
+      showFaq: true
+    }),
+    serviceData: {
+      suggestion: {
+        body: []
+      }
+    }
+  }),
+  faqList: states_objectSpread(states_objectSpread({
+    category: categoryKeys.faq,
+    headingText: 'FAQ list',
+    description: ''
+  }, baseState), {}, {
+    config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
+      showFaq: true
+    }),
+    serviceData: {
+      suggestion: {
+        body: [{
+          id: 1,
+          question: 'Lorem ipsum dolor sit amet',
+          categories: ['short']
+        }, {
+          id: 2,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+          categories: ['short']
+        }, {
+          id: 3,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
+          categories: ['short']
+        }]
+      }
+    }
+  }),
+  faqListLong: states_objectSpread(states_objectSpread({
+    category: categoryKeys.faq,
+    headingText: 'Long FAQ list',
+    description: ''
+  }, baseState), {}, {
+    config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
+      showFaq: true
+    }),
+    serviceData: {
+      suggestion: {
+        body: [{
+          id: 1,
+          question: 'Lorem ipsum dolor sit amet',
+          categories: ['long']
+        }, {
+          id: 2,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+          categories: ['long']
+        }, {
+          id: 3,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
+          categories: ['long']
+        }, {
+          id: 4,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed',
+          categories: ['long']
+        }, {
+          id: 5,
+          question: 'Lorem ipsum dolor sit amet',
+          categories: ['long']
+        }, {
+          id: 6,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+          categories: ['long']
+        }, {
+          id: 7,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
+          categories: ['long']
+        }, {
+          id: 8,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed',
+          categories: ['long']
+        }, {
+          id: 9,
+          question: 'Lorem ipsum dolor sit amet',
+          categories: ['long']
+        }, {
+          id: 10,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+          categories: ['long']
+        }, {
+          id: 11,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
+          categories: ['long']
+        }, {
+          id: 12,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed',
+          categories: ['long']
+        }, {
+          id: 13,
+          question: 'Lorem ipsum dolor sit amet',
+          categories: ['long']
+        }, {
+          id: 14,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+          categories: ['long']
+        }, {
+          id: 15,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
+          categories: ['long']
+        }, {
+          id: 16,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed',
+          categories: ['long']
+        }, {
+          id: 17,
+          question: 'Lorem ipsum dolor sit amet',
+          categories: ['long']
+        }, {
+          id: 18,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+          categories: ['long']
+        }, {
+          id: 19,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
+          categories: ['long']
+        }, {
+          id: 20,
+          question: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed',
+          categories: ['long']
+        }]
+      }
+    }
+  })
+};
 const standardState = {
   base: states_objectSpread(states_objectSpread({
     category: categoryKeys.unstarted,
@@ -6928,7 +7100,7 @@ const standardState = {
     serviceInfo: {
       activeServiceSessionId: '3942159e-9878-469e-9120-f44fd6be0f35'
     },
-    events: [splashMessage, participantMessage, infoMessage, shortTextMessage, states_objectSpread(states_objectSpread({}, choicePromptMessage), {}, {
+    events: [participantMessage, infoMessage, shortTextMessage, states_objectSpread(states_objectSpread({}, choicePromptMessage), {}, {
       payload: states_objectSpread(states_objectSpread({}, choicePromptMessage.payload), {}, {
         id: `${choicePromptMessage.payload.id}XXX`
       })
@@ -7007,7 +7179,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Long ago when a dialog started',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }, participantMessage, participantMessageDefaultIcon, newTopicDivider, transcriptInfoMessage, ...[newTranslationDividerStart, newTranslationDividerStop].map(addTranslationData), infoMessage]
@@ -7051,7 +7224,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Long ago when a dialog started',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }, {
@@ -7061,7 +7235,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Above me should be a time indicator showing the full date',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }, {
@@ -7071,7 +7246,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Another message',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }, {
@@ -7081,7 +7257,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'And another message',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }, {
@@ -7091,7 +7268,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Above me should be a time indicator showing "yesterday"',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }, {
@@ -7101,7 +7279,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Another message',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }, {
@@ -7111,7 +7290,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'And another message',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }, {
@@ -7121,7 +7301,8 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Above me should be a time indicator showing me the dialog continues today',
-          type: 'text'
+          type: 'text',
+          variables: {}
         }
       })
     }]
@@ -7155,19 +7336,6 @@ const standardState = {
       }
     }]
   }),
-  suggestionsMessage: states_objectSpread(states_objectSpread({
-    category: categoryKeys.messages,
-    headingText: 'Suggestions message',
-    description: ''
-  }, baseState), {}, {
-    events: [{
-      type: 'service_data',
-      payload: {
-        type: 'suggestion',
-        body: suggestions
-      }
-    }]
-  }),
   errorWithAction: states_objectSpread(states_objectSpread({
     // Important: This cannot pick up the language files so the text is hard set here.
     category: categoryKeys.errors,
@@ -7622,11 +7790,92 @@ const inlineInterface = {
         }
       }
     })
+  },
+  minimizedInlineWithError: {
+    category: categoryKeys.minimizedInline,
+    headingText: 'Inline minimized with error',
+    description: '',
+    inline: states_objectSpread(states_objectSpread({}, baseState), {}, {
+      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
+        layoutMode: 'inline'
+      }),
+      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
+        visibility: web_ui_namespaceObject.visibilityStates.minimized
+      }),
+      interrupt: {
+        error: new web_ui_namespaceObject.SeamlyOfflineError()
+      }
+    })
+  }
+};
+const standardWindowStates = {
+  minimizedWindow: {
+    category: categoryKeys.minimizedWindow,
+    headingText: 'Unstarted minimized',
+    description: '',
+    window: states_objectSpread(states_objectSpread({}, baseState), {}, {
+      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
+        layoutMode: 'window'
+      }),
+      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
+        visibility: web_ui_namespaceObject.visibilityStates.minimized
+      })
+    })
+  },
+  minimizedWindowStarted: {
+    category: categoryKeys.minimizedWindow,
+    headingText: 'Started minimized',
+    description: '',
+    window: states_objectSpread(states_objectSpread({}, baseState), {}, {
+      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
+        layoutMode: 'window'
+      }),
+      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
+        visibility: web_ui_namespaceObject.visibilityStates.minimized
+      }),
+      participantInfo,
+      headerTitles
+    })
+  },
+  minimizedWindowStartedUnread: {
+    category: categoryKeys.minimizedWindow,
+    headingText: 'Minimized with unread messages',
+    description: '',
+    window: states_objectSpread(states_objectSpread({}, baseState), {}, {
+      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
+        layoutMode: 'window'
+      }),
+      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
+        visibility: web_ui_namespaceObject.visibilityStates.minimized
+      }),
+      participantInfo,
+      headerTitles,
+      unreadEvents: 12
+    })
   }
 };
+const newInterface = {
+  suggestionsMessage: states_objectSpread(states_objectSpread({
+    category: categoryKeys.messages,
+    headingText: 'Suggestions message',
+    description: ''
+  }, baseState), {}, {
+    events: [{
+      type: 'service_data',
+      payload: {
+        type: 'suggestion',
+        body: suggestions
+      }
+    }]
+  })
+};
 
-const buildStandardState = (layoutModes, customComponentEventBodies = []) => {
-  const intermediateState = states_objectSpread(states_objectSpread({}, standardState), customComponentEventBodies.reduce((acc, eventBody) => {
+const buildStandardState = (layoutModes, customComponentEventBodies = [], isNewInterface) => {
+  const intermediateState = states_objectSpread(states_objectSpread(states_objectSpread({}, isNewInterface ? states_objectSpread(states_objectSpread({}, standardState), {}, {
+    fullConversation: states_objectSpread(states_objectSpread({}, standardState.fullConversation), {}, {
+      events: [splashMessage, ...standardState.fullConversation.events]
+    })
+  }) : standardState), isNewInterface ? newInterface : faq), customComponentEventBodies.reduce((acc, eventBody) => {
     const {
       key,
       headingText,
@@ -7670,51 +7919,8 @@ const buildStandardState = (layoutModes, customComponentEventBodies = []) => {
   }, {});
 };
 
-const getStateObj = (layoutModes, customComponentEventBodies) => states_objectSpread(states_objectSpread(states_objectSpread({}, buildStandardState(layoutModes, customComponentEventBodies)), layoutModes.indexOf('window') !== -1 ? {
-  minimizedWindow: {
-    category: categoryKeys.minimizedWindow,
-    headingText: 'Unstarted minimized',
-    description: '',
-    window: states_objectSpread(states_objectSpread({}, baseState), {}, {
-      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
-        layoutMode: 'window'
-      }),
-      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
-        visibility: web_ui_namespaceObject.visibilityStates.minimized
-      })
-    })
-  },
-  minimizedWindowStarted: {
-    category: categoryKeys.minimizedWindow,
-    headingText: 'Started minimized',
-    description: '',
-    window: states_objectSpread(states_objectSpread({}, baseState), {}, {
-      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
-        layoutMode: 'window'
-      }),
-      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
-        visibility: web_ui_namespaceObject.visibilityStates.minimized
-      }),
-      participantInfo,
-      headerTitles
-    })
-  },
-  minimizedWindowStartedUnread: {
-    category: categoryKeys.minimizedWindow,
-    headingText: 'Minimized with unread messages',
-    description: '',
-    window: states_objectSpread(states_objectSpread({}, baseState), {}, {
-      config: states_objectSpread(states_objectSpread({}, baseState.config), {}, {
-        layoutMode: 'window'
-      }),
-      visibility: states_objectSpread(states_objectSpread({}, baseState.visibility), {}, {
-        visibility: web_ui_namespaceObject.visibilityStates.minimized
-      }),
-      participantInfo,
-      headerTitles,
-      unreadEvents: 12
-    })
-  },
+const getDeprecatedStateObj = (layoutModes, customComponentEventBodies) => states_objectSpread(states_objectSpread({}, buildStandardState(layoutModes, customComponentEventBodies)), layoutModes.indexOf('window') !== -1 ? standardWindowStates : {});
+const getStateObj = (layoutModes, customComponentEventBodies) => states_objectSpread(states_objectSpread(states_objectSpread({}, buildStandardState(layoutModes, customComponentEventBodies, true)), layoutModes.indexOf('window') !== -1 ? states_objectSpread(states_objectSpread({}, standardWindowStates), {}, {
   minimizedWindowPrechat: {
     category: categoryKeys.minimizedWindow,
     headingText: 'Minimized with pre-chat messages',
@@ -7731,7 +7937,7 @@ const getStateObj = (layoutModes, customComponentEventBodies) => states_objectSp
       headerTitles
     })
   }
-} : {}), inlineInterface);
+}) : {}), inlineInterface);
 ;// CONCATENATED MODULE: ./src/javascripts/style-guide/components/links.js
 const links_excluded = ["headingText", "descriptionId", "description"];
 
@@ -7875,8 +8081,9 @@ const StyleGuideApp = ({
     stateUpdateCallback,
     customMessageEventBodies
   } = styleGuideConfig;
+  const stateObjFunc = config.isDeprecated ? getDeprecatedStateObj : getStateObj;
   const [mainState] = (0,hooks_namespaceObject.useState)(() => {
-    const mainStateObj = getStateObj(styleGuideConfig.showLayoutModes || ['inline', 'window'], customMessageEventBodies);
+    const mainStateObj = stateObjFunc(styleGuideConfig.showLayoutModes || ['inline', 'window'], customMessageEventBodies);
     return Object.keys(mainStateObj).reduce((acc, key) => app_objectSpread(app_objectSpread({}, acc), {}, {
       [key]: app_objectSpread(app_objectSpread({}, mainStateObj[key]), {}, {
         descriptionId: (0,web_ui_namespaceObject.randomId)()
@@ -8053,7 +8260,8 @@ class SeamlyStyleGuideInstance extends web_ui_namespaceObject.Engine {
 
     const api = new web_ui_namespaceObject.API({
       namespace: this.config.namespace,
-      config: this.config.api
+      config: this.config.api,
+      context: this.config.context
     });
     api.URLS = {
       translations: `/client/${this.config.api.key}/translations/{version}/{locale}.json`