@seamly/web-ui 20.3.1 → 20.6.0

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

@@ -129,6 +129,7 @@ const baseState = {
   },
   initialState: {},
   unreadEvents: 0,
+  loadedImageEventIds: [],
   isLoading: false,
   idleDetachCountdown: {
     hasCountdown: false,
@@ -171,7 +172,8 @@ const baseState = {
   },
   currentUploads: []
 };
-const avatar = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxkZWZzLz48cGF0aCBmaWxsPSIjNEE0OEMxIiBkPSJNMCAwSDMyVjMySDB6Ii8+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTExLjE3NSwxMi4yMjJjMC0zLjc5MywyLjE2LTUuNTY1LDQuODI1LTUuNTY1YzIuNjY0LDAsNC44MjYsMS43NzIsNC44MjYsNS41NjUJYzAsMy43OTQtMi4xNjIsNi45MDQtNC44MjYsNi45MDRDMTMuMzM1LDE5LjEyNiwxMS4xNzUsMTYuMDE2LDExLjE3NSwxMi4yMjJ6IE0yNi42NjYsMjMuMDg0Yy0wLjgzNC0xLjU4My00LjIxNi0yLjYyNS01Ljg0MS0yLjY2NwlzLTMuNTM0LDMtNC44MjUsM2MtMS4yOTMsMC0zLjIwMS0zLjA0Mi00LjgyNS0zYy0xLjYyNSwwLjA0Mi01LjAwOCwxLjA4NC01Ljg0MSwyLjY2N0M0LjAwNSwyNS42MDYsNC41ODMsMzIsNC41ODMsMzJIMTZoMTEuNDE2CUMyNy40MTYsMzIsMjcuOTk0LDI1LjYwNiwyNi42NjYsMjMuMDg0eiIvPjwvc3ZnPg==';
+const avatar = 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMiAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjNEE0OEMxIiBkPSJNMTAsMTQuOGMtMS4xLDAtMi0wLjktMi0yczAuOS0yLDItMnMyLDAuOSwyLDJTMTEuMSwxNC44LDEwLDE0Ljh6IE0xNS45LDE0LjhjMS4xLDAsMi0wLjksMi0ycy0wLjktMi0yLTIKCXMtMiwwLjktMiwyUzE0LjgsMTQuOCwxNS45LDE0Ljh6IE0yMS44LDEwLjhjLTEuMSwwLTIsMC45LTIsMnMwLjksMiwyLDJzMi0wLjksMi0yUzIyLjksMTAuOCwyMS44LDEwLjh6IE0yMS4zLDE4LjFIMTAuNwoJQzExLjcsMjMuOSwyMC4yLDIzLjksMjEuMywxOC4xeiIvPgo8L3N2Zz4K';
+const transferAvatar = 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMiAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjNEE0OEMxIiBkPSJNMTAuMSwxNC45Yy0xLjEsMC0yLTAuOS0yLTJzMC45LTIsMi0yczIsMC45LDIsMlMxMS4yLDE0LjksMTAuMSwxNC45eiBNMjEuOSwxMC45Yy0xLjEsMC0yLDAuOS0yLDIKCXMwLjksMiwyLDJzMi0wLjksMi0yUzIzLDEwLjksMjEuOSwxMC45eiBNMjEuNCwxOC4ySDEwLjhDMTEuOCwyNCwyMC4zLDI0LDIxLjQsMTguMnogTTE3LjIsMjUuM2gtMi40Yy0wLjYsMC0xLjIsMC40LTEuNCwxCgljLTUuMS0wLjItOS4yLTQuNC05LjQtOS42YzAuMSwwLDAuMiwwLjEsMC40LDAuMWgwLjFjMC44LDAsMS40LTAuNiwxLjQtMS40di00LjdjMC0wLjgtMC42LTEuNC0xLjQtMS40aDBjLTAuOCwwLTEuNCwwLjYtMS40LDEuNAoJdjIuN3YydjEuMWMwLDUuOSw0LjcsMTAuNiwxMC41LDEwLjhjMC4yLDAuNSwwLjcsMC44LDEuMiwwLjhoMi40YzAuOCwwLDEuNC0wLjYsMS40LTEuNFMxOCwyNS4zLDE3LjIsMjUuM3oiLz4KPC9zdmc+Cg==';
 const participantInfo = {
   participants: {
     agent: {
@@ -272,8 +274,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)(),
@@ -326,7 +327,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: {
@@ -343,6 +344,33 @@ const participantMessage = {
     type: 'participant'
   }
 };
+const participantTransferMessage = {
+  type: 'participant',
+  payload: {
+    fromClient: false,
+    fromHistory: true,
+    id: (0,web_ui_namespaceObject.randomId)(),
+    messageStatus: 'received',
+    participant: {
+      introduction: 'Welcome, you are now chatting with Mrs. Bot 2, give me a minit to read back the chat history.',
+      id: 'agent',
+      avatar: transferAvatar,
+      name: 'Two',
+      service: {
+        expose: {
+          map: {},
+          version: 3
+        },
+        meta: {},
+        name: 'new service',
+        serviceSessionId: (0,web_ui_namespaceObject.randomId)(),
+        settings: {}
+      }
+    },
+    transactionId: (0,web_ui_namespaceObject.randomId)(),
+    type: 'participant'
+  }
+};
 const participantMessageDefaultIcon = {
   type: 'participant',
   payload: {
@@ -352,7 +380,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: {
@@ -380,8 +408,7 @@ const getCustomMessage = ({
     body: {
       type,
       text,
-      data,
-      variables: {}
+      data
     },
     participant: 'agent',
     service: {
@@ -406,8 +433,7 @@ const shortTextMessage = {
   payload: {
     body: {
       text: 'What do you want to do?',
-      type: 'text',
-      variables: {}
+      type: 'text'
     },
     fromClient: false,
     fromHistory: true,
@@ -442,7 +468,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
@@ -471,8 +497,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,
@@ -495,9 +520,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,
@@ -522,24 +546,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,
@@ -564,17 +572,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,
@@ -600,8 +599,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,
@@ -762,8 +760,7 @@ const userMessage = {
   payload: {
     body: {
       text: 'This is what the user typed',
-      type: 'text',
-      variables: {}
+      type: 'text'
     },
     fromClient: true,
     fromHistory: true,
@@ -780,8 +777,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,
@@ -967,7 +980,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'
     }
@@ -985,7 +998,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'
     }
@@ -1163,7 +1176,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, participantTransferMessage, 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,
@@ -1171,7 +1184,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,
@@ -1238,11 +1251,10 @@ 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]
+    }, participantMessage, participantMessageDefaultIcon, participantTransferMessage, newTopicDivider, transcriptInfoMessage, ...[newTranslationDividerStart, newTranslationDividerStop].map(addTranslationData), infoMessage]
   }),
   choicePromptMessages: states_objectSpread(states_objectSpread({
     category: categoryKeys.messages,
@@ -1283,8 +1295,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Long ago when a dialog started',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -1294,8 +1305,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'
         }
       })
     }, {
@@ -1305,8 +1315,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Another message',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -1316,8 +1325,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'And another message',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -1327,8 +1335,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'
         }
       })
     }, {
@@ -1338,8 +1345,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'Another message',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -1349,8 +1355,7 @@ const standardState = {
         id: (0,web_ui_namespaceObject.randomId)(),
         body: {
           text: 'And another message',
-          type: 'text',
-          variables: {}
+          type: 'text'
         }
       })
     }, {
@@ -1360,8 +1365,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'
         }
       })
     }]
@@ -1798,6 +1802,26 @@ const inlineInterface = {
       })
     })
   },
+  minimizedInlineCharacterLimit: {
+    category: categoryKeys.minimizedInline,
+    headingText: 'Inline minimized with limited characters',
+    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
+      }),
+      entryMeta: states_objectSpread(states_objectSpread({}, baseState.entryMeta), {}, {
+        options: {
+          text: {
+            limit: 120
+          }
+        }
+      })
+    })
+  },
   minimizedInlinePrechat: {
     category: categoryKeys.minimizedInline,
     headingText: 'Inline minimized with pre-chat messages',
@@ -1919,7 +1943,7 @@ const newInterface = {
     headingText: 'Suggestions message',
     description: ''
   }, baseState), {}, {
-    events: [{
+    events: [getCustomMessage(shortTextMessage.payload.body), {
       type: 'service_data',
       payload: {
         type: 'suggestion',
@@ -2228,6 +2252,7 @@ function seamly_utils_objectSpread(target) { for (var i = 1; i < arguments.lengt
 function seamly_utils_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 
+
 const eventTypes = {
   info: 'info',
   message: 'message',
@@ -2292,6 +2317,7 @@ const seamly_utils_seamlyActions = {
   CLEAR_EVENTS: 'CLEAR_EVENTS',
   SET_HISTORY: 'SET_HISTORY',
   SET_EVENTS_READ: 'SET_EVENTS_READ',
+  SET_LOADED_IMAGE_EVENT_IDS: 'SET_LOADED_IMAGE_EVENT_IDS',
   ACK_EVENT: 'ACK_EVENT',
   SET_IS_LOADING: 'SET_IS_LOADING',
   CLEAR_PARTICIPANTS: 'CLEAR_PARTICIPANTS',
@@ -2337,6 +2363,7 @@ const {
   CLEAR_EVENTS,
   SET_HISTORY,
   SET_EVENTS_READ,
+  SET_LOADED_IMAGE_EVENT_IDS,
   ACK_EVENT,
   SET_IS_LOADING,
   CLEAR_PARTICIPANTS,
@@ -2390,14 +2417,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) => {
@@ -2547,7 +2576,10 @@ const seamlyStateReducer = (state, action) => {
           // event optimistically.
           payload: seamly_utils_objectSpread(seamly_utils_objectSpread({}, incrementUnread && {
             messageStatus: payload.fromClient ? readStates.read : readStates.received
-          }), payload)
+          }), {}, {
+            // We add a randomid to use as key for mapping of Events to avoid rerendering
+            key: id_randomId()
+          }, payload)
         })]
       });
 
@@ -2576,6 +2608,7 @@ const seamlyStateReducer = (state, action) => {
     case CLEAR_EVENTS:
       return seamly_utils_objectSpread(seamly_utils_objectSpread({}, state), {}, {
         unreadEvents: 0,
+        loadedImageEventIds: [],
         events: []
       });
 
@@ -2595,6 +2628,11 @@ const seamlyStateReducer = (state, action) => {
         })
       });
 
+    case SET_LOADED_IMAGE_EVENT_IDS:
+      return seamly_utils_objectSpread(seamly_utils_objectSpread({}, state), {}, {
+        loadedImageEventIds: [...state.loadedImageEventIds, action.eventId]
+      });
+
     case SET_HISTORY:
       const {
         events: history,
@@ -2772,8 +2810,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:
@@ -2986,7 +3028,7 @@ function createAction(type, identityReducer = payload => ({
 
   action.toString = () => String(type);
 
-  action.match = obj => obj?.type === String(type);
+  action.match = obj => (obj === null || obj === void 0 ? void 0 : obj.type) === String(type);
 
   return action;
 }
@@ -3076,7 +3118,7 @@ function createThunk(type, payloadCreator) {
 }
 function createReducer(domain, handlers = {}, defaultState) {
   const reducer = (state = defaultState, action) => {
-    const typeReducer = handlers?.[action?.type];
+    const typeReducer = handlers === null || handlers === void 0 ? void 0 : handlers[action === null || action === void 0 ? void 0 : action.type];
     return typeReducer ? typeReducer(state, action) : state;
   };
 
@@ -3507,7 +3549,7 @@ function selectors_defineProperty(obj, key, value) { if (key in obj) { Object.de
 
 const selectConfig = createSelector(selectState, config => {
   let newConfig = selectors_objectSpread({
-    visible: config?.layoutMode === 'inline' ? constants_visibilityStates.open : constants_visibilityStates.minimized,
+    visible: (config === null || config === void 0 ? void 0 : config.layoutMode) === 'inline' ? constants_visibilityStates.open : constants_visibilityStates.minimized,
     appContainerClassNames: config.appContainerClassNames || []
   }, config);
 
@@ -3599,6 +3641,8 @@ function hooks_useSelector(selector, deps = []) {
   useLayoutEffect(() => {
     // we subscribe to the store changes
     return store.subscribe(() => {
+      var _selectorRef$current;
+
       const newState = store.getState(); // prevent recalculating if the state hasn't changed
       // if the selector changed, it was already handled synchronously
 
@@ -3607,7 +3651,7 @@ function hooks_useSelector(selector, deps = []) {
       } // calculate the new value based on selector+state
 
 
-      const newValue = selectorRef.current?.(store.getState()); // only if the value changed we update. this saves heaps of re-rendering
+      const newValue = (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 ? void 0 : _selectorRef$current.call(selectorRef, store.getState()); // only if the value changed we update. this saves heaps of re-rendering
 
       if (newValue !== valueRef.current) {
         valueRef.current = newValue;
@@ -3670,7 +3714,9 @@ const selectEventsWithSuggestion = createSelector(seamly_state_hooks_selectState
   events,
   serviceData
 }, config, userHasResponded) => {
-  if (userHasResponded || config.layoutMode === 'inline' || !serviceData.suggestion || !serviceData.suggestion?.body.length) {
+  var _serviceData$suggesti;
+
+  if (userHasResponded || config.layoutMode === 'inline' || !serviceData.suggestion || !((_serviceData$suggesti = serviceData.suggestion) !== null && _serviceData$suggesti !== void 0 && _serviceData$suggesti.body.length)) {
     return events;
   }
 
@@ -3681,10 +3727,12 @@ const selectEventsWithSuggestion = createSelector(seamly_state_hooks_selectState
   return [...events, suggestionsEvent];
 });
 const selectEvents = createSelector(selectEventsWithSuggestion, selectConfig, (events, config) => {
+  var _config$messages;
+
   const {
     enabled,
     threshold
-  } = config?.messages?.timeIndicator ?? {};
+  } = (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;
@@ -3713,12 +3761,15 @@ const seamly_state_hooks_useEvents = () => useSelector(selectEvents, []);
 const useSeamlyIsLoading = () => seamly_state_hooks_useSeamlyStateContext().isLoading;
 const useSeamlyHeaderData = () => seamly_state_hooks_useSeamlyStateContext().headerTitles;
 const seamly_state_hooks_useSeamlyUnreadCount = () => seamly_state_hooks_useSeamlyStateContext().unreadEvents;
+const useLoadedImageEventIds = () => seamly_state_hooks_useSeamlyStateContext().loadedImageEventIds;
 const seamly_state_hooks_useSkiplink = () => seamly_state_hooks_useSeamlyStateContext().skiplinkTargetId;
 const useSeamlyParticipant = participantId => seamly_state_hooks_useSeamlyStateContext().participantInfo.participants[participantId];
 const useSeamlyServiceInfo = () => seamly_state_hooks_useSeamlyStateContext().serviceInfo;
 const selectLastMessageEventId = createSelector(selectEvents, events => {
+  var _filteredEvents;
+
   const filteredEvents = events.filter(event => event.type === 'message');
-  return filteredEvents[filteredEvents.length - 1]?.payload.id;
+  return (_filteredEvents = filteredEvents[filteredEvents.length - 1]) === null || _filteredEvents === void 0 ? void 0 : _filteredEvents.payload.id;
 });
 const useLastMessageEventId = () => useSelector(selectLastMessageEventId);
 const useSeamlyIsHistoryLoaded = () => seamly_state_hooks_useSeamlyStateContext().historyLoaded;
@@ -3735,18 +3786,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();
@@ -3779,7 +3835,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;
@@ -3798,6 +3859,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; }
@@ -3815,6 +3877,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,
@@ -3875,11 +3938,13 @@ const actions_initialize = visibility_utils_createThunk('initialize', async (loc
     api
   }
 }) => {
+  var _api$store$get;
+
   // initialize stored visibility
   const {
     layoutMode
   } = selectConfig(getState());
-  const storedVisibility = api.store.get(StoreKey)?.[layoutMode];
+  const storedVisibility = (_api$store$get = api.store.get(StoreKey)) === null || _api$store$get === void 0 ? void 0 : _api$store$get[layoutMode];
 
   if (storedVisibility) {
     dispatch(setFromStorage(storedVisibility));
@@ -3917,13 +3982,13 @@ class SeamlyBaseError extends Error {
 
     this.originalError = originalError;
 
-    if (originalError?.payload) {
+    if (originalError !== null && originalError !== void 0 && originalError.payload) {
       this.originalEvent = originalError;
       this.originalError = originalError.payload.error;
       this.message = `Event of type ${originalError.payload.type} encountered`;
     }
 
-    if (originalError?.error) {
+    if (originalError !== null && originalError !== void 0 && originalError.error) {
       this.originalError = originalError.error;
     }
   }
@@ -3962,7 +4027,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 (_, {
@@ -3972,8 +4037,10 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
     config
   }
 }) => {
+  var _config$context;
+
   dispatch(initialize(config));
-  let locale = config?.context?.locale;
+  let locale = config === null || config === void 0 ? void 0 : (_config$context = config.context) === null || _config$context === void 0 ? void 0 : _config$context.locale;
 
   try {
     const {
@@ -4000,7 +4067,7 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
       startChatIcon
     }));
 
-    if (agentParticipant?.name) {
+    if (agentParticipant !== null && agentParticipant !== void 0 && agentParticipant.name) {
       dispatch({
         type: seamly_utils_seamlyActions.SET_HEADER_SUB_TITLE,
         title: agentParticipant.name
@@ -4012,18 +4079,22 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
 
   try {
     if (api.hasConversation()) {
+      var _initialState$transla;
+
       const initialState = await api.getConversationIntitialState();
       dispatch({
         type: seamly_utils_seamlyActions.SET_INITIAL_STATE,
         initialState
       });
-      locale = initialState.translation?.locale || locale;
+      locale = ((_initialState$transla = initialState.translation) === null || _initialState$transla === void 0 ? void 0 : _initialState$transla.locale) || locale;
 
       if ('userResponded' in initialState) {
-        dispatch(setHasResponded(initialState.userResponded));
+        dispatch(actions_setHasResponded(initialState.userResponded));
       }
     } else {
-      if (config?.context?.topic) {
+      var _config$context2, _config$context3;
+
+      if (config !== null && config !== void 0 && (_config$context2 = config.context) !== null && _config$context2 !== void 0 && _config$context2.topic) {
         api.send('action', {
           type: seamly_utils_actionTypes.setTopic,
           body: {
@@ -4035,7 +4106,7 @@ const app_actions_initialize = app_utils_createThunk('initialize', async (_, {
         });
       }
 
-      if (config?.context?.translationLocale) {
+      if (config !== null && config !== void 0 && (_config$context3 = config.context) !== null && _config$context3 !== void 0 && _config$context3.translationLocale) {
         locale = config.context.translationLocale;
         api.send('action', {
           type: seamly_utils_actionTypes.setTranslation,
@@ -4081,6 +4152,7 @@ const initialState = {
   events: [],
   initialState: {},
   unreadEvents: 0,
+  loadedImageEventIds: [],
   isLoading: false,
   idleDetachCountdown: {
     hasCountdown: false,
@@ -4142,7 +4214,9 @@ function utils_validate(values, schema = {}) {
       validations = [validations];
     }
 
-    for (let i = 0; i < validations?.length ?? 0; i++) {
+    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;
         break;
@@ -4202,7 +4276,7 @@ const getPropSelector = (propName, orDefault) => (_, props) => props[propName] |
 
 const getState = forms_utils_selectState;
 const selectors_getFormById = createSelector(getState, getPropSelector('formId'), (forms, formId) => forms[formId]);
-const getFormControlsByFormId = createSelector(selectors_getFormById, form => form?.controls || {});
+const getFormControlsByFormId = createSelector(selectors_getFormById, form => (form === null || form === void 0 ? void 0 : form.controls) || {});
 const selectors_getFormValuesByFormId = createSelector(getFormControlsByFormId, controls => {
   const valuesObj = {};
   Object.entries(controls).forEach(([key, {
@@ -4212,8 +4286,16 @@ const selectors_getFormValuesByFormId = createSelector(getFormControlsByFormId,
   });
   return valuesObj;
 });
-const selectors_getControlValueByName = createSelector(getFormControlsByFormId, getPropSelector('name'), (controls, name) => controls[name]?.value);
-const selectors_getControlTouchedByName = createSelector(getFormControlsByFormId, getPropSelector('name'), (controls, name) => controls[name]?.touched);
+const selectors_getControlValueByName = createSelector(getFormControlsByFormId, getPropSelector('name'), (controls, name) => {
+  var _controls$name;
+
+  return (_controls$name = controls[name]) === null || _controls$name === void 0 ? void 0 : _controls$name.value;
+});
+const selectors_getControlTouchedByName = createSelector(getFormControlsByFormId, getPropSelector('name'), (controls, name) => {
+  var _controls$name2;
+
+  return (_controls$name2 = controls[name]) === null || _controls$name2 === void 0 ? void 0 : _controls$name2.touched;
+});
 ;// CONCATENATED MODULE: ./src/javascripts/domains/forms/context.js
 
 const context_FormContext = (0,external_preact_namespaceObject.createContext)({});
@@ -4273,7 +4355,7 @@ function hooks_useFormControl(name) {
     formId,
     name
   }, [formId, name]);
-  const error = errors?.[name];
+  const error = errors === null || errors === void 0 ? void 0 : errors[name];
   const isValid = !error;
   useEffect(() => {
     // Make sure the form is registered
@@ -4325,6 +4407,7 @@ function provider_objectWithoutPropertiesLoose(source, excluded) { if (source ==
 
 
 
+
 function provider_FormProvider(_ref) {
   let {
     children,
@@ -4374,19 +4457,21 @@ function provider_FormProvider(_ref) {
     });
   }, [setExternalErrors]);
   const handleSubmit = useCallback(e => {
+    var _e$submitter;
+
     e.preventDefault(); // If the submitter is set to being aria-disabled, block the submit action
 
-    const ariaDisabled = e.submitter?.ariaDisabled === 'true';
+    const ariaDisabled = ((_e$submitter = e.submitter) === null || _e$submitter === void 0 ? void 0 : _e$submitter.ariaDisabled) === 'true';
     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({
@@ -4443,7 +4528,9 @@ const initialControlState = {
 };
 
 function updateFormControl(state, formId, name, controlState) {
-  const currentControlState = state[formId]?.controls[name] || initialControlState;
+  var _state$formId;
+
+  const currentControlState = ((_state$formId = state[formId]) === null || _state$formId === void 0 ? void 0 : _state$formId.controls[name]) || initialControlState;
   return reducer_objectSpread(reducer_objectSpread({}, state), {}, {
     [formId]: reducer_objectSpread(reducer_objectSpread({}, state[formId]), {}, {
       controls: reducer_objectSpread(reducer_objectSpread({}, state[formId].controls), {}, {
@@ -4471,9 +4558,11 @@ function updateFormControl(state, formId, name, controlState) {
   [deregisterForm]: (state, {
     formId
   }) => {
+    var _newState$formId;
+
     const newState = reducer_objectSpread({}, state);
 
-    if (!newState[formId]?.persistData) {
+    if (!((_newState$formId = newState[formId]) !== null && _newState$formId !== void 0 && _newState$formId.persistData)) {
       delete newState[formId];
     }
 
@@ -4631,6 +4720,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: {},
@@ -4638,7 +4728,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
@@ -5907,6 +5997,7 @@ function hooks_useUserHasResponded() {
 
 
 
+
 const hooks_useVisibility = () => {
   const dispatch = useStoreDispatch();
   const visible = useSelector(Selectors.selectVisibility);
@@ -5922,6 +6013,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 !== null && entry !== void 0 && entry.isIntersecting) || !enabled;
+  const frozen = isVisible && freezeOnceVisible;
+
+  const observerCallback = ([updatedEntry]) => setEntry(updatedEntry);
+
+  useEffect(() => {
+    const node = containerRef === null || containerRef === void 0 ? void 0 : 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; }
 
@@ -5933,7 +6087,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, {
@@ -5945,7 +6100,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
 
@@ -6016,7 +6174,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) => {
@@ -6074,7 +6233,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]);
@@ -6172,11 +6333,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,
@@ -6189,6 +6355,7 @@ const use_seamly_commands_useSeamlyCommands = () => {
     addMessageBubble,
     addUploadBubble,
     addDivider,
+    apiConnected: api.connected,
     apiConfigReady: api.configReady
   };
 };
@@ -6318,11 +6485,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,
@@ -6368,6 +6536,7 @@ const useSeamlyEntry = () => {
 
 
 
+
 const {
   SET_IS_LOADING: use_seamly_chat_SET_IS_LOADING
 } = seamly_utils_seamlyActions;
@@ -6377,28 +6546,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) {
@@ -6447,22 +6619,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;
+    }
+  }, [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;
     }
-  }, [hasConversation, apiConfigReady]);
+  }, [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);
@@ -6472,11 +6656,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);
@@ -6793,19 +6974,21 @@ function hooks_useTranslations() {
 function useTranslatedEventData({
   payload
 } = {}) {
-  const payloadId = payload?.id;
+  var _translatedBody, _translatedBody2, _translatedBody3;
+
+  const payloadId = payload === null || payload === void 0 ? void 0 : payload.id;
   let body;
   let translatedBody;
 
-  switch (payload?.type) {
+  switch (payload === null || payload === void 0 ? void 0 : payload.type) {
     case 'participant':
       body = payload.participant.introduction;
       translatedBody = payload.participant.translatedIntroduction;
       break;
 
     default:
-      body = payload?.body;
-      translatedBody = payload?.translatedBody;
+      body = payload === null || payload === void 0 ? void 0 : payload.body;
+      translatedBody = payload === null || payload === void 0 ? void 0 : payload.translatedBody;
   }
 
   const hasTranslation = !!translatedBody;
@@ -6820,12 +7003,12 @@ function useTranslatedEventData({
       dispatch(Actions.enableEvent(payloadId));
     }
   }, [isTranslated, payloadId, dispatch]);
-  return [hasTranslation && isTranslated ? translatedBody?.data : body, {
+  return [hasTranslation && isTranslated ? (_translatedBody = translatedBody) === null || _translatedBody === void 0 ? void 0 : _translatedBody.data : body, {
     hasTranslation,
     isTranslated: isTranslated && hasTranslation,
     toggleTranslation,
-    translatedBy: translatedBody?.translatedBy,
-    locale: translatedBody?.locale
+    translatedBy: (_translatedBody2 = translatedBody) === null || _translatedBody2 === void 0 ? void 0 : _translatedBody2.translatedBy,
+    locale: (_translatedBody3 = translatedBody) === null || _translatedBody3 === void 0 ? void 0 : _translatedBody3.locale
   }];
 }
 function hooks_useTranslationsContainer() {
@@ -6840,49 +7023,58 @@ function hooks_useLocaleNativeName(locale) {
   const {
     languages
   } = hooks_useTranslations();
-  return useMemo(() => languages?.find(lang => lang.locale === locale)?.nativeName, [locale, languages]);
+  return useMemo(() => {
+    var _languages$find;
+
+    return languages === null || languages === void 0 ? void 0 : (_languages$find = languages.find(lang => lang.locale === locale)) === null || _languages$find === void 0 ? void 0 : _languages$find.nativeName;
+  }, [locale, languages]);
 }
 ;// CONCATENATED MODULE: ./src/javascripts/domains/translations/middleware.js
 
 
 
-function middleware_createMiddleware() {
-  return ({
-    dispatch,
-    getState
-  }) => next => action => {
-    const result = next(action);
+function middleware_createMiddleware({
+  dispatch,
+  getState
+}) {
+  return next => {
+    return action => {
+      var _action$history, _action$history$trans, _action$initialState, _action$initialState$, _action$event, _action$event$payload, _action$event$payload2;
 
-    switch (action.type) {
-      case String(seamlyActions.SET_HISTORY):
-        if (action.history?.translation?.enabled) {
-          dispatch(Actions.enable(action.history.translation.locale));
-        }
+      const result = next(action);
 
-        break;
+      switch (action.type) {
+        case String(seamlyActions.SET_HISTORY):
+          if ((_action$history = action.history) !== null && _action$history !== void 0 && (_action$history$trans = _action$history.translation) !== null && _action$history$trans !== void 0 && _action$history$trans.enabled) {
+            dispatch(Actions.enable(action.history.translation.locale));
+            dispatch(I18nActions.setLocale(action.history.translation.locale));
+          }
 
-      case String(seamlyActions.SET_INITIAL_STATE):
-        if (action.initialState?.translation?.enabled) {
-          dispatch(Actions.enable(action.initialState.translation.locale));
-          dispatch(I18nActions.setLocale(action.locale));
-        }
+          break;
 
-        break;
+        case String(seamlyActions.SET_INITIAL_STATE):
+          if ((_action$initialState = action.initialState) !== null && _action$initialState !== void 0 && (_action$initialState$ = _action$initialState.translation) !== null && _action$initialState$ !== void 0 && _action$initialState$.enabled) {
+            dispatch(Actions.enable(action.initialState.translation.locale));
+            dispatch(I18nActions.setLocale(action.locale));
+          }
 
-      case String(seamlyActions.ADD_EVENT):
-        if (action.event.type === 'info' && action.event?.payload?.body?.subtype === 'new_translation' && action.event.payload.body.translationEnabled) {
-          dispatch(I18nActions.setLocale(action.event.payload.body.translationLocale));
-        }
+          break;
 
-        break;
+        case String(seamlyActions.ADD_EVENT):
+          if (action.event.type === 'info' && ((_action$event = action.event) === null || _action$event === void 0 ? void 0 : (_action$event$payload = _action$event.payload) === null || _action$event$payload === void 0 ? void 0 : (_action$event$payload2 = _action$event$payload.body) === null || _action$event$payload2 === void 0 ? void 0 : _action$event$payload2.subtype) === 'new_translation' && action.event.payload.body.translationEnabled) {
+            dispatch(I18nActions.setLocale(action.event.payload.body.translationLocale));
+          }
 
-      case String(Actions.disable):
-        const initialLocale = I18nSelectors.selectInitialLocale(getState());
-        dispatch(I18nActions.setLocale(initialLocale));
-        break;
-    }
+          break;
 
-    return result;
+        case String(Actions.disable):
+          const initialLocale = I18nSelectors.selectInitialLocale(getState());
+          dispatch(I18nActions.setLocale(initialLocale));
+          break;
+      }
+
+      return result;
+    };
   };
 }
 ;// CONCATENATED MODULE: ./src/javascripts/domains/translations/reducer.js
@@ -6907,7 +7099,9 @@ const translations_reducer_initialState = {
 };
 /* harmony default export */ const translations_reducer = (translations_utils_createReducer({
   [seamly_utils_seamlyActions.SET_FEATURES]: (state, action) => {
-    const feature = action?.features?.translation;
+    var _action$features;
+
+    const feature = action === null || action === void 0 ? void 0 : (_action$features = action.features) === null || _action$features === void 0 ? void 0 : _action$features.translation;
 
     if (!feature) {
       return state;
@@ -7950,7 +8144,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
@@ -8298,6 +8492,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
@@ -8305,7 +8500,7 @@ const StyleGuideApp = ({
         showFaq
       }),
       headerTitles: app_objectSpread(app_objectSpread({}, bareState.headerTitles), {}, {
-        subTitle: agent?.name || bareState.headerTitles.subTitle
+        subTitle: (agent === null || agent === void 0 ? void 0 : agent.name) || bareState.headerTitles.subTitle
       })
     });