@seamly/web-ui 20.4.0 → 20.5.0

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

@@ -273,8 +273,7 @@ const infoMessage = {
   payload: {
     body: {
       text: 'This is a system generated info message',
-      type: 'text',
-      variables: {}
+      type: 'text'
     },
     fromClient: false,
     id: (0,web_ui_namespaceObject.randomId)(),
@@ -327,7 +326,7 @@ const participantMessage = {
     participant: {
       avatar,
       id: 'agent',
-      introduction: "You're now talking to {{name}} gimme a minit",
+      introduction: "You're now talking to Mrs. Bot gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: {
@@ -353,7 +352,7 @@ const participantMessageDefaultIcon = {
     messageStatus: 'received',
     participant: {
       id: 'user',
-      introduction: "You're now talking to {{name}} gimme a minit",
+      introduction: "You're now talking to Mrs. Bot gimme a minit",
       name: 'Mrs. Bot',
       service: {
         expose: {
@@ -381,8 +380,7 @@ const getCustomMessage = ({
     body: {
       type,
       text,
-      data,
-      variables: {}
+      data
     },
     participant: 'agent',
     service: {
@@ -407,8 +405,7 @@ const shortTextMessage = {
   payload: {
     body: {
       text: 'What do you want to do?',
-      type: 'text',
-      variables: {}
+      type: 'text'
     },
     fromClient: false,
     fromHistory: true,
@@ -443,7 +440,7 @@ const ctaMessage = {
   type: 'message',
   payload: {
     body: {
-      description: 'Thanks for chatting!\n\nMore info about our **products**?',
+      description: 'Thanks for chatting!\n\nMore info about our <strong>products</strong>?',
       buttonLink: 'https://seamly.ai',
       buttonText: 'View website',
       buttonNewTab: true
@@ -472,8 +469,7 @@ 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',
-      variables: {}
+      type: 'text'
     },
     fromClient: false,
     fromHistory: true,
@@ -496,9 +492,8 @@ const textMessageBoldItalicUnderline = {
   type: 'message',
   payload: {
     body: {
-      text: 'Bubble with **bold** *italic* <u>underline</u>',
-      type: 'text',
-      variables: {}
+      text: 'Bubble with <strong>bold</strong> <em>italic</em> <u>underline</u>',
+      type: 'text'
     },
     fromClient: false,
     fromHistory: true,
@@ -523,24 +518,8 @@ const textMessageWithLinks = {
   type: 'message',
   payload: {
     body: {
-      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'
-        }
-      }
+      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'
     },
     fromClient: false,
     fromHistory: true,
@@ -565,17 +544,8 @@ const textMessageWithLongLink = {
   type: 'message',
   payload: {
     body: {
-      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'
-        }
-      }
+      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'
     },
     fromClient: false,
     fromHistory: true,
@@ -601,8 +571,7 @@ const textMesageWithBullets = {
   payload: {
     body: {
       text: '<ul>\n<li>Bullets</li>\n<li>bullets</li>\n<li>bullets</li>\n</ul>\n',
-      type: 'text',
-      variables: {}
+      type: 'text'
     },
     fromClient: false,
     fromHistory: true,
@@ -763,8 +732,7 @@ const userMessage = {
   payload: {
     body: {
       text: 'This is what the user typed',
-      type: 'text',
-      variables: {}
+      type: 'text'
     },
     fromClient: true,
     fromHistory: true,
@@ -781,8 +749,24 @@ 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',
-      variables: {}
+      type: 'text'
+    },
+    fromClient: true,
+    fromHistory: true,
+    id: (0,web_ui_namespaceObject.randomId)(),
+    messageStatus: 'read',
+    participant: 'user',
+    transactionId: '1cdefea9-7437-4672-bcf8-2c75dc99244c',
+    transactionLast: null,
+    type: 'text'
+  }
+};
+const userMessageWithLinks = {
+  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'
     },
     fromClient: true,
     fromHistory: true,
@@ -968,7 +952,7 @@ const cardAskText = {
         type: 'ask'
       },
       buttonText: 'Ask about pizzas!',
-      description: 'Pizza Margherita is a **typical Neapolitan pizza**.\n\nIt is made with San Marzano tomatoes, mozzarella cheese, fresh basil, salt, and extra-virgin olive oil.',
+      description: 'Pizza Margherita is a <strong>typical Neapolitan pizza</strong>.\n\nIt is made with San Marzano tomatoes, mozzarella cheese, fresh basil, salt, and extra-virgin olive oil.',
       image: 'https://developers.seamly.ai/clients/web-ui/static/photos/card-square.jpg',
       title: 'Pizza Margherita'
     }
@@ -986,7 +970,7 @@ const cardNavigate = {
         type: 'navigate'
       },
       buttonText: 'Order now!',
-      description: 'Pizza Margherita is a **typical Neapolitan pizza**.',
+      description: 'Pizza Margherita is a <strong>typical Neapolitan pizza</strong>.',
       image: 'https://developers.seamly.ai/clients/web-ui/static/photos/card-landscape.jpg',
       title: 'Pizza Margherita'
     }
@@ -1164,7 +1148,7 @@ const standardState = {
       payload: states_objectSpread(states_objectSpread({}, choicePromptMessage.payload), {}, {
         id: `${choicePromptMessage.payload.id}XXX`
       })
-    }), longTextMessage, userMessage, textMessageBoldItalicUnderline, newTopicDivider, imageMessage, fileDownloadAgentMessage, deletedFileDownloadAgentMessage, userMessageLong, videoMessage, textMessageWithLinks, textMessageWithLongLink, imageMessageWithLightbox, fileDownloadUserMessage, emptyUrlFileDownloadUserMessage, textMesageWithBullets, choicePromptMessage, ctaMessage]
+    }), longTextMessage, userMessage, textMessageBoldItalicUnderline, userMessageWithLinks, newTopicDivider, imageMessage, fileDownloadAgentMessage, deletedFileDownloadAgentMessage, userMessageLong, videoMessage, textMessageWithLinks, textMessageWithLongLink, imageMessageWithLightbox, fileDownloadUserMessage, emptyUrlFileDownloadUserMessage, textMesageWithBullets, choicePromptMessage, ctaMessage]
   }),
   userMessages: states_objectSpread(states_objectSpread({
     category: categoryKeys.messages,
@@ -1172,7 +1156,7 @@ const standardState = {
     description: ''
   }, baseState), {}, {
     participantInfo,
-    events: [userMessage, userMessageLong, fileDownloadUserMessage, emptyUrlFileDownloadUserMessage]
+    events: [userMessage, userMessageLong, fileDownloadUserMessage, emptyUrlFileDownloadUserMessage, userMessageWithLinks]
   }),
   withParticipants: states_objectSpread(states_objectSpread({
     category: categoryKeys.messages,
@@ -1239,8 +1223,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Long ago when a dialog started',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, participantMessage, participantMessageDefaultIcon, newTopicDivider, transcriptInfoMessage, ...[newTranslationDividerStart, newTranslationDividerStop].map(addTranslationData), infoMessage]
@@ -1284,8 +1267,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Long ago when a dialog started',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -1295,8 +1277,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Above me should be a time indicator showing the full date',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -1306,8 +1287,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Another message',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -1317,8 +1297,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'And another message',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -1328,8 +1307,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Above me should be a time indicator showing "yesterday"',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -1339,8 +1317,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Another message',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -1350,8 +1327,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'And another message',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -1361,8 +1337,7 @@ 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',
-          variables: {}
+          type: 'text'
         }
       })
     }]
@@ -1940,7 +1915,7 @@ const newInterface = {
     headingText: 'Suggestions message',
     description: ''
   }, baseState), {}, {
-    events: [{
+    events: [getCustomMessage(shortTextMessage.payload.body), {
       type: 'service_data',
       payload: {
         type: 'suggestion',
@@ -2413,14 +2388,16 @@ const orderHistory = events => {
 };
 
 const mergeHistory = (stateEvents, historyEvents) => {
-  const newHistoryEvents = historyEvents.filter(historyEvent => // Deduplicate the event streams
-  !stateEvents.find(stateEvent => stateEvent.payload.id === historyEvent.payload.id) && // Remove all non displayable participant messages
+  const newStateEvents = stateEvents.filter(stateEvent => // Deduplicate the event streams, giving events in historyEvents
+  // precedence so the server is able to push changes to events.
+  !historyEvents.some(historyEvent => historyEvent.payload.id === stateEvent.payload.id));
+  const newHistoryEvents = historyEvents.filter(historyEvent => // Remove all non displayable participant messages
   !(historyEvent.type === 'participant' && !historyEvent.payload.participant.introduction)) // Reverse is done here because the server sends the history in the order
   // newest to oldest. In the case of exactly the same occurredAt timestamps
   // 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, ...stateEvents]);
+  return orderHistory([...newHistoryEvents, ...newStateEvents]);
 };
 
 const participantReducer = (state, action) => {
@@ -2801,8 +2778,12 @@ const seamlyStateReducer = (state, action) => {
       });
 
     case SET_INITIAL_STATE:
+      const {
+        initialState
+      } = action;
       return seamly_utils_objectSpread(seamly_utils_objectSpread({}, state), {}, {
-        initialState: action.initialState
+        initialState,
+        unreadEvents: initialState.unreadMessageCount
       });
 
     case SET_SERVICE_DATA_ITEM:
@@ -3765,18 +3746,23 @@ const useEntryTextLimit = () => {
     entryMeta: {
       options: {
         text
+      },
+      optionsOverride: {
+        text: overrideText
       }
     }
   } = seamly_state_hooks_useSeamlyStateContext();
   const {
     limit
-  } = text || {};
+  } = overrideText || text || {
+    limit: null
+  };
   return {
-    hasLimit: limit != null,
-    limit: limit != null ? limit : null
+    hasLimit: limit !== null,
+    limit: limit !== null ? limit : null
   };
 };
-const useSeamlyLayoutMode = () => {
+const seamly_state_hooks_useSeamlyLayoutMode = () => {
   const {
     layoutMode
   } = useConfig();
@@ -3809,7 +3795,12 @@ const calculateVisibility = ({
   } = config;
   const {
     visible: defaultVisibility
-  } = defaults || {}; // Requesting open should override the responded check.
+  } = defaults || {}; // The app layout should always be open by default.
+
+  if (layoutMode === 'app' && !previousVisibility) {
+    return constants_visibilityStates.open;
+  } // Requesting open should override the responded check.
+
 
   if (layoutMode === 'window' && hideOnNoUserResponse && requestedVisibility !== constants_visibilityStates.open) {
     return hasResponded ? requestedVisibility || previousVisibility || constants_visibilityStates.open : constants_visibilityStates.hidden;
@@ -3828,6 +3819,7 @@ const calculateVisibility = ({
 
 
 const selectVisibility = createSelector(visibility_utils_selectState, state => state.visibility);
+const selectors_selectShowInlineView = createSelector(visibility_utils_selectState, state => state.showInlineView);
 
 ;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/actions.js
 function actions_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -3845,6 +3837,7 @@ function actions_defineProperty(obj, key, value) { if (key in obj) { Object.defi
 const setFromStorage = visibility_utils_createAction('setFromStorage', visibility => ({
   visibility
 }));
+const setShowInlineView = visibility_utils_createAction('setShowInlineView');
 const validVisibilityStates = [constants_visibilityStates.open, constants_visibilityStates.minimized, constants_visibilityStates.hidden];
 const setVisibility = visibility_utils_createThunk('set', (requestedVisibility, {
   getState,
@@ -3992,7 +3985,7 @@ const clear = interrupt_utils_createAction('clear');
 
 
 
-const setHasResponded = app_utils_createAction('setHasResponded', hasResponded => ({
+const actions_setHasResponded = app_utils_createAction('setHasResponded', hasResponded => ({
   hasResponded
 }));
 const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
@@ -4050,7 +4043,7 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
       locale = initialState.translation?.locale || locale;
 
       if ('userResponded' in initialState) {
-        dispatch(setHasResponded(initialState.userResponded));
+        dispatch(actions_setHasResponded(initialState.userResponded));
       }
     } else {
       if (config?.context?.topic) {
@@ -4356,6 +4349,7 @@ function provider_objectWithoutPropertiesLoose(source, excluded) { if (source ==
 
 
 
+
 function provider_FormProvider(_ref) {
   let {
     children,
@@ -4411,13 +4405,13 @@ function provider_FormProvider(_ref) {
     setIsSubmitted(!ariaDisabled);
 
     if (!ariaDisabled && validationIsValid) {
+      dispatch(setHasResponded(true));
       onSubmit(values, {
         updateControlValue,
         setError
       });
     }
-  }, [validationIsValid, onSubmit, values, updateControlValue, setError]); //
-
+  }, [validationIsValid, dispatch, onSubmit, values, updateControlValue, setError]);
   useEffect(() => {
     if (onError) {
       onError({
@@ -4662,6 +4656,7 @@ function config_reducer_defineProperty(obj, key, value) { if (key in obj) { Obje
 
 const config_reducer_initialState = config_reducer_objectSpread(config_reducer_objectSpread({}, defaultConfig), {}, {
   hideOnNoUserResponse: false,
+  connectWhenInView: true,
   showDisclaimer: false,
   showFaq: false,
   customComponents: {},
@@ -4669,7 +4664,7 @@ const config_reducer_initialState = config_reducer_objectSpread(config_reducer_o
   preChatEvents: []
 });
 
-const configKeys = ['hideOnNoUserResponse', 'showDisclaimer', 'showFaq', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'visible', 'visibilityCallback', 'errorCallback', 'agentParticipant', 'userParticipant', 'startChatIcon'];
+const configKeys = ['hideOnNoUserResponse', 'connectWhenInView', 'showDisclaimer', 'showFaq', 'namespace', 'customComponents', 'defaults', 'layoutMode', 'api', 'zIndex', 'context', 'appContainerClassNames', 'messages', 'visible', 'visibilityCallback', 'errorCallback', 'agentParticipant', 'userParticipant', 'startChatIcon'];
 
 const updateState = (state, {
   config
@@ -5938,6 +5933,7 @@ function hooks_useUserHasResponded() {
 
 
 
+
 const hooks_useVisibility = () => {
   const dispatch = useStoreDispatch();
   const visible = useSelector(Selectors.selectVisibility);
@@ -5953,6 +5949,69 @@ const hooks_useVisibility = () => {
     setVisibility
   };
 };
+/**
+ * Custom hook which enables initializing of IntersectionObserver on any node ref.
+ * @param {object} options Hook options.
+ * @param {boolean=} options.freezeOnceVisible Stops observing when the root element is visible.
+ * @param {boolean=} options.enabled Determines if useIntersect is enabled.
+ */
+
+const useIntersect = ({
+  freezeOnceVisible = false,
+  enabled = true
+}) => {
+  const [entry, setEntry] = useState(null);
+  const containerRef = useRef(null);
+  const isVisible = !!entry?.isIntersecting || !enabled;
+  const frozen = isVisible && freezeOnceVisible;
+
+  const observerCallback = ([updatedEntry]) => setEntry(updatedEntry);
+
+  useEffect(() => {
+    const node = containerRef?.current;
+    const hasIOSupport = !!window.IntersectionObserver;
+
+    if (!node && "production" === 'development') {} // Return an arrow function to have a consistent return value
+
+
+    if (!hasIOSupport || frozen || !node || !enabled) return () => undefined;
+    const observerOptions = {
+      threshold: 0,
+      root: null,
+      rootMargin: '0%'
+    };
+    const observer = new IntersectionObserver(observerCallback, observerOptions);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [enabled, frozen]);
+  return {
+    isVisible,
+    containerRef
+  };
+};
+
+const useShowInlineView = () => {
+  const dispatch = useStoreDispatch();
+  const {
+    connectWhenInView
+  } = useConfig();
+  const showInlineView = useSelector(Selectors.selectShowInlineView);
+  const {
+    containerRef,
+    isVisible
+  } = useIntersect({
+    enabled: connectWhenInView,
+    freezeOnceVisible: true
+  });
+  useEffect(() => {
+    if (!isVisible) return;
+    dispatch(Actions.setShowInlineView());
+  }, [dispatch, isVisible]);
+  return {
+    containerRef,
+    showInlineView
+  };
+};
 ;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/reducer.js
 function visibility_reducer_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -5964,7 +6023,8 @@ function visibility_reducer_defineProperty(obj, key, value) { if (key in obj) {
 
 
 const visibility_reducer_initialState = {
-  visibility: constants_visibilityStates.initialize
+  visibility: constants_visibilityStates.initialize,
+  showInlineView: false
 };
 /* harmony default export */ const visibility_reducer = (visibility_utils_createReducer({
   [setFromStorage]: (state, {
@@ -5976,7 +6036,10 @@ const visibility_reducer_initialState = {
     payload: visibility
   }) => visibility ? visibility_reducer_objectSpread(visibility_reducer_objectSpread({}, state), {}, {
     visibility
-  }) : state
+  }) : state,
+  [setShowInlineView]: state => visibility_reducer_objectSpread(visibility_reducer_objectSpread({}, state), {}, {
+    showInlineView: true
+  })
 }, visibility_reducer_initialState));
 ;// CONCATENATED MODULE: ./src/javascripts/domains/visibility/index.js
 
@@ -6047,7 +6110,8 @@ const use_seamly_commands_useSeamlyCommands = () => {
   const hasResponded = useUserHasResponded();
   const hasConversation = useSeamlyHasConversation();
   const {
-    visible: visibility
+    visible: visibility,
+    setVisibility
   } = useVisibility();
   const unreadMessageCount = useSeamlyUnreadCount();
   const emitEvent = useCallback((...args) => {
@@ -6105,7 +6169,9 @@ const use_seamly_commands_useSeamlyCommands = () => {
       type: use_seamly_commands_ADD_EVENT,
       event: {
         type: 'message',
-        payload: message
+        payload: use_seamly_commands_objectSpread(use_seamly_commands_objectSpread({}, message), {}, {
+          optimisticallyInjected: true
+        })
       }
     });
   }, [api, dispatch, emitEvent, getTextMessageBase]);
@@ -6203,11 +6269,16 @@ const use_seamly_commands_useSeamlyCommands = () => {
           type: use_seamly_commands_SET_INITIAL_STATE,
           initialState
         });
+
+        if (initialState.userResponded) {
+          dispatch(AppActions.setHasResponded(initialState.userResponded));
+          setVisibility(visibilityStates.open);
+        }
       }
     }).catch(error => {
       dispatch(InterruptActions.set(error));
     });
-  }, [api, dispatch]);
+  }, [api, dispatch, setVisibility]);
   return {
     connect,
     start,
@@ -6220,6 +6291,7 @@ const use_seamly_commands_useSeamlyCommands = () => {
     addMessageBubble,
     addUploadBubble,
     addDivider,
+    apiConnected: api.connected,
     apiConfigReady: api.configReady
   };
 };
@@ -6349,11 +6421,12 @@ const useSeamlyEntry = () => {
     default: defaultEntry,
     active,
     userSelected,
-    options: entryOptions
+    options: entryOptions,
+    optionsOverride: entryOptionsOverride
   } = useSeamlyStateContext().entryMeta;
   const dispatch = useSeamlyDispatchContext();
   const activeEntry = userSelected || active || defaultEntry;
-  const activeEntryOptions = entryOptions[activeEntry] || {};
+  const activeEntryOptions = entryOptionsOverride[activeEntry] || entryOptions[activeEntry] || {};
   const setBlockAutoEntrySwitch = useCallback(value => {
     dispatch({
       type: seamly_entry_hooks_SET_BLOCK_AUTO_ENTRY_SWITCH,
@@ -6399,6 +6472,7 @@ const useSeamlyEntry = () => {
 
 
 
+
 const {
   SET_IS_LOADING: use_seamly_chat_SET_IS_LOADING
 } = seamly_utils_seamlyActions;
@@ -6408,28 +6482,31 @@ const useSeamlyChat = () => {
     t
   } = useI18n();
   const {
-    layoutMode
-  } = useConfig();
+    isInline,
+    isWindow
+  } = useSeamlyLayoutMode();
   const {
     isOpen,
     isVisible,
     setVisibility
   } = useVisibility();
+  const showInlineView = useSelector(selectShowInlineView);
   const dispatch = useSeamlyDispatchContext();
   const events = useEvents();
   const spinnerTimeout = useRef(null);
   const {
     start,
     connect,
-    apiConfigReady
+    apiConfigReady,
+    apiConnected
   } = useSeamlyCommands();
   const hasConversation = useSeamlyHasConversation();
   const prevIsOpen = useRef(null);
   const prevIsVisible = useRef(null);
+  const startCalled = useRef(false);
   const {
     sendAssertive
   } = useLiveRegion();
-  const connectCalled = useRef(false);
   const hasEvents = events.length > 0;
   useEffect(() => {
     if (isVisible) {
@@ -6478,22 +6555,34 @@ const useSeamlyChat = () => {
     }
   }, [hasEvents, dispatch]);
   useEffect(() => {
-    // This is needed to reset the ref to allow connect to happen again.
+    // This is needed to reset the ref to allow connect and start to happen again.
     // Mostly due to Interrupt situations and a reset being called.
-    if (!hasConversation || !apiConfigReady) {
-      connectCalled.current = false;
+    if (!apiConfigReady || !apiConnected) {
+      startCalled.current = false;
     }
-  }, [hasConversation, apiConfigReady]);
+  }, [apiConfigReady, apiConnected]);
+  const connectAndStart = useCallback(async () => {
+    // We don't connect if we are already connected to the api to avoid multiple in-flight connection processes.
+    if (!apiConnected) {
+      await connect();
+    } // We only start a conversation when the chat interface is either 'open' or if using the inline view if it's 'open' or 'minimized'.
+
+
+    if (isOpen || isVisible && isInline) {
+      start();
+      startCalled.current = true;
+    }
+  }, [apiConnected, connect, isInline, isOpen, isVisible, start]);
   useEffect(() => {
-    // We don't connect minimised or hidden window interfaces unless
-    // they had been connected before.
-    // We also keep track of whether connect was called before to avoid
-    // multiple in-flight connection processes.
-    if (layoutMode === 'window' && !isOpen && !hasConversation || connectCalled.current || !apiConfigReady) {
+    // We dont't connect or start when the apiConfig is not ready yet.
+    // We also keep track of whether start has been called to avoid multiple in-flight connection processes.
+    // We check if the window view is not open and no conversation is started yet.
+    // Lastly we check if the inline view is not scrolled in to view.
+    if (!apiConfigReady || startCalled.current || isWindow && !isOpen && !hasConversation || isInline && !showInlineView) {
       return;
     }
 
-    if (hasConversation) {
+    if (hasConversation && isOpen) {
       // We deactivate the extra startup loading spinner when a conversation is available
       // We also stop setting the loading indicator in the first place to avoid a flash.
       clearTimeout(spinnerTimeout.current);
@@ -6503,11 +6592,8 @@ const useSeamlyChat = () => {
       });
     }
 
-    connect().then(() => {
-      start();
-    });
-    connectCalled.current = true;
-  }, [isOpen, hasConversation, apiConfigReady, start, connect, dispatch, layoutMode]);
+    connectAndStart();
+  }, [apiConfigReady, connectAndStart, dispatch, hasConversation, isInline, isOpen, isWindow, showInlineView]);
 
   const openChat = () => {
     setVisibility(visibilityStates.open);
@@ -7981,7 +8067,7 @@ const app_reducer_initialState = {
   userHasResponded: false
 };
 /* harmony default export */ const app_reducer = (app_utils_createReducer({
-  [setHasResponded]: (state, {
+  [actions_setHasResponded]: (state, {
     hasResponded
   }) => app_reducer_objectSpread(app_reducer_objectSpread({}, state), {}, {
     userHasResponded: hasResponded
@@ -8329,6 +8415,7 @@ const StyleGuideApp = ({
 
     const updatedState = app_objectSpread(app_objectSpread({}, bareState), {}, {
       config: app_objectSpread(app_objectSpread(app_objectSpread(app_objectSpread({}, bareState.config), config), {}, {
+        showDisclaimer: bareState.config.showDisclaimer || config.showDisclaimer,
         layoutMode: bareState.config.layoutMode
       }, overrideMessages ? {
         messages: overrideMessages