@seamly/web-ui 22.3.4 → 22.3.5-beta.1

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

@@ -1983,6 +1983,14 @@ var _ConversationConnector_instances, _ConversationConnector_connectionListeners
 
 
 const log = debug_default()('seamly');
+// Subscribers set which are used to subscribe to changes in the conversation.
+// Needs to be outside of the ConversationConnector class so its not recreated for each instance.
+const subscribers = new Set();
+// Syncs the lifecycle of the conversation with Preact. Each subscriber will fetch the latest value from the conversation if needed.
+const emitChange = () => {
+  // Call the callback function for each subscriber
+  subscribers.forEach(callback => callback());
+};
 class ConversationConnector {
   constructor() {
     _ConversationConnector_instances.add(this);
@@ -1998,35 +2006,37 @@ class ConversationConnector {
         url: splittedUrl,
         params
       } = split_url_params(this.url);
-      if (!this.socket) {
-        this.socket = new Socket(splittedUrl, {
-          params: Object.assign(Object.assign({}, params), {
-            v: apiVersion
-          }),
-          reconnectAfterMs: tries => {
-            // Calculate the backoff time based on the number of tries.
-            const backoff = Math.pow(2, tries) * 250;
-            // Limit the backoff time to 10 seconds.
-            return Math.min(backoff, 10000);
-          }
-        });
-      }
-      // Checks if the socket is not already connected before attempting a connection.
-      // This prevents multiple connection attempts during server reconnects, network switches or SPA route changes.
-      if (!this.socket.isConnected()) {
-        this.socket.connect();
-      }
-      this.channel = this.socket.channel(this.channelTopic, {
-        authorization: `Bearer ${this.accessToken}`,
-        channelName: this.channelName
+      this.socket = new Socket(splittedUrl, {
+        params: Object.assign(Object.assign({}, params), {
+          v: apiVersion
+        }),
+        reconnectAfterMs: tries => {
+          // Calculate the backoff time based on the number of tries.
+          const backoff = Math.pow(2, tries) * 250;
+          // Limit the backoff time to 10 seconds.
+          return Math.min(backoff, 10000);
+        }
       });
-      this.start();
       this.socket.onError(err => {
         log('[SOCKET][ERROR]', err);
       });
       this.socket.onOpen(() => {
         log('[SOCKET]OPEN');
       });
+      this.socket.onClose(() => {
+        log('[SOCKET]CLOSE');
+        __classPrivateFieldGet(this, _ConversationConnector_instances, "m", _ConversationConnector_emitConnectionState).call(this, {
+          connected: false,
+          ready: false,
+          currentState: 'socket_closed'
+        });
+      });
+      this.socket.connect();
+      this.channel = this.socket.channel(this.channelTopic, {
+        authorization: `Bearer ${this.accessToken}`,
+        channelName: this.channelName
+      });
+      this.start();
       this.channel.on('system', msg => {
         switch (msg.type) {
           case 'attach_channel_succeeded':
@@ -2038,14 +2048,6 @@ class ConversationConnector {
             break;
         }
       });
-      this.socket.onClose(() => {
-        log('[SOCKET]CLOSE');
-        __classPrivateFieldGet(this, _ConversationConnector_instances, "m", _ConversationConnector_emitConnectionState).call(this, {
-          connected: false,
-          ready: false,
-          currentState: 'socket_closed'
-        });
-      });
       this.channel.onClose(() => {
         log('[CHANNEL]CLOSE');
         __classPrivateFieldGet(this, _ConversationConnector_instances, "m", _ConversationConnector_emitConnectionState).call(this, {
@@ -2099,6 +2101,13 @@ class ConversationConnector {
   pushToChannel(command, payload, timeout = 10000) {
     this.channel.push(command, payload, timeout);
   }
+  // Adds a callback function to the subscribers set and returns a method to unsubscribe from the store.
+  // This method is used to sync the state with the lifecycle of Preact.
+  static subscribe(callback) {
+    subscribers.add(callback);
+    // Returns a function that removes the callback from the subscribers set.
+    return () => subscribers.delete(callback);
+  }
 }
 _ConversationConnector_connectionListeners = new WeakMap(), _ConversationConnector_instances = new WeakSet(), _ConversationConnector_listenTo = function _ConversationConnector_listenTo(...types) {
   types.forEach(type => {
@@ -2112,6 +2121,7 @@ _ConversationConnector_connectionListeners = new WeakMap(), _ConversationConnect
     // If we only want to execute the callback once, remove it from the listener
     return !complete;
   }), "f");
+  emitChange();
 };
 /* harmony default export */ const conversation_connector = (ConversationConnector);
 ;// CONCATENATED MODULE: ./src/javascripts/api/index.ts
@@ -2631,7 +2641,7 @@ _API_ready = new WeakMap(), _API_externalId = new WeakMap(), _API_conversationAu
   return {
     clientName: "@seamly/web-ui",
     clientVariant: api_classPrivateFieldGet(this, _API_layoutMode, "f"),
-    clientVersion: "22.3.4",
+    clientVersion: "22.3.5-beta.1",
     currentUrl: window.location.toString(),
     screenResolution: `${window.screen.width}x${window.screen.height}`,
     timezone: getTimeZone(),
@@ -8771,9 +8781,9 @@ const useShowInlineView = () => {
 ;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/seamly-api-hooks.ts
 
 
-const seamly_api_hooks_useSeamlyApiContext = () => (0,hooks_.useContext)(SeamlyApiContext);
+const useSeamlyApiContext = () => (0,hooks_.useContext)(SeamlyApiContext);
 const useSeamlyObjectStore = () => {
-  const api = seamly_api_hooks_useSeamlyApiContext();
+  const api = useSeamlyApiContext();
   return api.store;
 };
 const useSeamlyConversationUrl = () => {
@@ -8786,7 +8796,7 @@ const useSeamlyConversationUrl = () => {
   return null;
 };
 const useSeamlyHasConversation = () => {
-  const api = seamly_api_hooks_useSeamlyApiContext();
+  const api = useSeamlyApiContext();
   const hasConversation = (0,hooks_.useCallback)(() => {
     return api.hasConversation();
   }, [api]);
@@ -8810,7 +8820,7 @@ const useSeamlyHasConversation = () => {
 
 
 const useSeamlyCommands = () => {
-  const api = seamly_api_hooks_useSeamlyApiContext();
+  const api = useSeamlyApiContext();
   const appConfig = useConfig();
   const dispatch = useDispatch();
   const eventBus = (0,hooks_.useContext)(SeamlyEventBusContext);
@@ -9939,6 +9949,18 @@ const useSeamlyMessageContainerClassNames = event => {
   }
   return classNames;
 };
+;// CONCATENATED MODULE: external "preact/compat"
+const compat_namespaceObject = require("preact/compat");
+;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/use-seamly-conversation.ts
+
+
+
+const use_seamly_conversation_useSeamlyConversation = () => {
+  const api = useSeamlyApiContext();
+  const getSnapshot = () => api.conversation;
+  return (0,compat_namespaceObject.useSyncExternalStore)(conversation_connector.subscribe, getSnapshot);
+};
+/* harmony default export */ const use_seamly_conversation = (use_seamly_conversation_useSeamlyConversation);
 ;// CONCATENATED MODULE: ./src/javascripts/ui/hooks/focus-helper-hooks.js
 
 
@@ -10379,12 +10401,12 @@ const useStableCallback = callback => {
 // and imported directly from this file
 // Please do not remove
 const useSeamlyEventStream = (nextFn, filterFn) => {
-  const api = useSeamlyApiContext();
+  const conversation = useSeamlyConversation();
   useEffect(() => {
-    if (api.connectionInfo && api.conversation?.channel) {
+    if (conversation.channel) {
       const {
         channel
-      } = api.conversation;
+      } = conversation;
       channel.onMessage = (type, payload) => {
         if (!filterFn || filterFn({
           type,
@@ -10398,7 +10420,7 @@ const useSeamlyEventStream = (nextFn, filterFn) => {
         return payload;
       };
     }
-  }, [nextFn, filterFn, api.connectionInfo, api.conversation]);
+  }, [nextFn, filterFn, conversation]);
 };
 ;// CONCATENATED MODULE: ./src/javascripts/domains/translations/selectors.ts
 
@@ -13979,9 +14001,10 @@ var seamly_event_subscriber_rest = undefined && undefined.__rest || function (s,
 
 
 
+
 const EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video'];
 const SeamlyEventSubscriber = () => {
-  const api = seamly_api_hooks_useSeamlyApiContext();
+  const conversation = use_seamly_conversation();
   const syncChannelRef = (0,hooks_.useRef)();
   const messageChannelRef = (0,hooks_.useRef)();
   const dispatch = useAppDispatch();
@@ -13995,10 +14018,10 @@ const SeamlyEventSubscriber = () => {
     emitEvent
   } = use_seamly_commands();
   (0,hooks_.useEffect)(() => {
-    if (api.connectionInfo && api.conversation.socket) {
+    if (conversation.socket) {
       const {
         socket
-      } = api.conversation;
+      } = conversation;
       socket.onError(err => {
         const seamlyOfflineError = new SeamlyOfflineError(err);
         dispatch(setInterrupt({
@@ -14014,10 +14037,10 @@ const SeamlyEventSubscriber = () => {
         dispatch(clearInterrupt());
       });
     }
-  }, [api, api.connectionInfo, api.conversation.socket, dispatch]);
+  }, [conversation, dispatch]);
   (0,hooks_.useEffect)(() => {
-    if (api.connectionInfo && api.conversation.socket) {
-      api.conversation.onConnection(({
+    if (conversation.socket) {
+      conversation.onConnection(({
         currentState
       }) => {
         if (currentState === 'join_channel_erred') {
@@ -14035,217 +14058,210 @@ const SeamlyEventSubscriber = () => {
         return false;
       });
     }
-  }, [api, api.connectionInfo, api.conversation.channel, dispatch]);
+  }, [conversation, dispatch]);
   (0,hooks_.useEffect)(() => {
-    if (api.connectionInfo) {
-      const updateParticipant = event => {
-        if (event.type !== 'participant') {
-          return;
-        }
-        const {
+    const updateParticipant = event => {
+      if (event.type !== 'participant') {
+        return;
+      }
+      const {
+        payload
+      } = event;
+      if (!payload || !payload.participant) {
+        return;
+      }
+      const {
+        fromClient,
+        participant
+      } = payload;
+      if (!fromClient && typeof participant !== 'string' && (participant === null || participant === void 0 ? void 0 : participant.name)) {
+        dispatch(setHeaderSubTitle(participant.name));
+      }
+      dispatch(setParticipant({
+        participant,
+        fromClient
+      }));
+      if (typeof participant !== 'string' && participant.introduction) {
+        dispatch(addEvent(event));
+      }
+    };
+    conversation.onConnection(({
+      connected
+    }) => {
+      if (!connected) return false;
+      const {
+        channel
+      } = conversation;
+      channel.onMessage = (type, payload) => {
+        const event = {
+          type,
           payload
-        } = event;
-        if (!payload || !payload.participant) {
-          return;
-        }
-        const {
-          fromClient,
-          participant
-        } = payload;
-        if (!fromClient && typeof participant !== 'string' && (participant === null || participant === void 0 ? void 0 : participant.name)) {
-          dispatch(setHeaderSubTitle(participant.name));
-        }
-        dispatch(setParticipant({
-          participant,
-          fromClient
-        }));
-        if (typeof participant !== 'string' && participant.introduction) {
-          dispatch(addEvent(event));
-        }
-      };
-      api.conversation.onConnection(({
-        connected
-      }) => {
-        if (!connected) return false;
-        const {
-          channel
-        } = api.conversation;
-        channel.onMessage = (type, payload) => {
-          const event = {
-            type,
-            payload
-          };
-          switch (type) {
-            case 'ui':
-              if (payload.state && payload.state.hasOwnProperty('loading')) {
-                dispatch(setIsLoading(payload.state.loading));
-              }
-              switch (payload.type) {
-                case 'idle_detach_countdown':
-                  initCountdown(payload.body.duration);
-                  break;
-                case 'idle_detach_countdown_elapsed':
-                  endCountdown(undefined, true);
-                  break;
-                case 'resume_conversation_prompt':
-                  dispatch(initResumeConversationPrompt());
-                  break;
-                case 'translation_proposal':
-                  dispatch(setTranslationProposalPrompt(payload.body));
-                  break;
-                case 'user_first_response':
-                  dispatch(setHasResponded(true));
-                  // @ts-ignore
-                  eventBus.emit('system.userFirstResponse', payload.body);
-                  break;
-              }
-              break;
-            case 'message':
-              updateParticipant(payload);
-              switch (payload.type) {
-                case 'text':
-                case 'choice_prompt':
-                case 'splash':
-                case 'image':
-                case 'upload':
-                case 'video':
-                case 'cta':
-                case 'custom':
-                case 'carousel':
-                case 'card':
-                  if (payload.service && payload.service.serviceSessionId) {
-                    dispatch(setActiveService(payload.service.serviceSessionId));
-                  }
-                  dispatch(addEvent(event));
-                  break;
-              }
-              break;
-            case 'participant':
-              updateParticipant(event);
-              break;
-            case 'service_data':
-              if (payload.persist) {
-                dispatch(setServiceDataItem(payload));
-              }
-              break;
-            case 'ack':
-              dispatch(ackEvent(event));
-              break;
-            case 'system':
-              if (payload.type === 'service_changed') {
-                const {
-                    serviceSettings
-                  } = payload,
-                  eventPayload = seamly_event_subscriber_rest(payload, ["serviceSettings"]);
-                const {
-                  entry,
-                  proactiveMessages
-                } = serviceSettings;
-                const {
-                  upload
-                } = entry.options;
-                dispatch(setFeatureEnabledState({
-                  key: featureKeys.uploads,
-                  enabled: !!(upload && upload.enabled)
-                }));
-                dispatch(setProactiveMessages(proactiveMessages.enabled || false));
-                dispatch(setServiceEntryMetadata(entry));
-                if (payload.serviceSessionId) {
-                  dispatch(setActiveService(payload.serviceSessionId));
+        };
+        switch (type) {
+          case 'ui':
+            if (payload.state && payload.state.hasOwnProperty('loading')) {
+              dispatch(setIsLoading(payload.state.loading));
+            }
+            switch (payload.type) {
+              case 'idle_detach_countdown':
+                initCountdown(payload.body.duration);
+                break;
+              case 'idle_detach_countdown_elapsed':
+                endCountdown(undefined, true);
+                break;
+              case 'resume_conversation_prompt':
+                dispatch(initResumeConversationPrompt());
+                break;
+              case 'translation_proposal':
+                dispatch(setTranslationProposalPrompt(payload.body));
+                break;
+              case 'user_first_response':
+                dispatch(setHasResponded(true));
+                // @ts-ignore
+                eventBus.emit('system.userFirstResponse', payload.body);
+                break;
+            }
+            break;
+          case 'message':
+            updateParticipant(payload);
+            switch (payload.type) {
+              case 'text':
+              case 'choice_prompt':
+              case 'splash':
+              case 'image':
+              case 'upload':
+              case 'video':
+              case 'cta':
+              case 'custom':
+              case 'carousel':
+              case 'card':
+                if (payload.service && payload.service.serviceSessionId) {
+                  dispatch(setActiveService(payload.service.serviceSessionId));
                 }
-                emitEvent('system.serviceChanged', eventPayload);
-              }
-              break;
-            case 'info':
-              if (payload.type === 'divider' || payload.type === 'text' || payload.type === 'translation') {
                 dispatch(addEvent(event));
+                break;
+            }
+            break;
+          case 'participant':
+            updateParticipant(event);
+            break;
+          case 'service_data':
+            if (payload.persist) {
+              dispatch(setServiceDataItem(payload));
+            }
+            break;
+          case 'ack':
+            dispatch(ackEvent(event));
+            break;
+          case 'system':
+            if (payload.type === 'service_changed') {
+              const {
+                  serviceSettings
+                } = payload,
+                eventPayload = seamly_event_subscriber_rest(payload, ["serviceSettings"]);
+              const {
+                entry,
+                proactiveMessages
+              } = serviceSettings;
+              const {
+                upload
+              } = entry.options;
+              dispatch(setFeatureEnabledState({
+                key: featureKeys.uploads,
+                enabled: !!(upload && upload.enabled)
+              }));
+              dispatch(setProactiveMessages(proactiveMessages.enabled || false));
+              dispatch(setServiceEntryMetadata(entry));
+              if (payload.serviceSessionId) {
+                dispatch(setActiveService(payload.serviceSessionId));
               }
-              break;
-            case 'error':
-              switch (payload.type) {
-                case 'find_conversation_erred':
-                  const seamlySessionExpiredError = new SeamlySessionExpiredError(event);
-                  dispatch(setInterrupt({
-                    name: seamlySessionExpiredError.name,
-                    action: seamlySessionExpiredError.action,
-                    message: seamlySessionExpiredError.message,
-                    originalEvent: seamlySessionExpiredError.originalEvent,
-                    originalError: seamlySessionExpiredError.originalError
-                  }));
-                  break;
-                case 'conversation_erred':
-                case 'attach_channel_erred':
-                  const seamlyGeneralError = new SeamlyGeneralError(event);
-                  dispatch(setInterrupt({
-                    name: seamlyGeneralError.name,
-                    message: seamlyGeneralError.message,
-                    langKey: seamlyGeneralError.langKey,
-                    originalEvent: seamlyGeneralError.originalEvent,
-                    originalError: seamlyGeneralError.originalError,
-                    action: seamlyGeneralError.action
-                  }));
-                  break;
-              }
-          }
-          return payload;
-        };
-        return false;
-      });
-    }
-  }, [api, api.connectionInfo, api.conversation.channel, dispatch, emitEvent, endCountdown, eventBus, initCountdown]);
-  (0,hooks_.useEffect)(() => {
-    if (api.connectionInfo) {
-      api.conversation.onConnection(({
-        connected
-      }) => {
-        if (!connected) return false;
-        const {
-          channel
-        } = api.conversation;
-        if (messageChannelRef.current) {
-          channel === null || channel === void 0 ? void 0 : channel.off('message', messageChannelRef.current);
+              emitEvent('system.serviceChanged', eventPayload);
+            }
+            break;
+          case 'info':
+            if (payload.type === 'divider' || payload.type === 'text' || payload.type === 'translation') {
+              dispatch(addEvent(event));
+            }
+            break;
+          case 'error':
+            switch (payload.type) {
+              case 'find_conversation_erred':
+                const seamlySessionExpiredError = new SeamlySessionExpiredError(event);
+                dispatch(setInterrupt({
+                  name: seamlySessionExpiredError.name,
+                  action: seamlySessionExpiredError.action,
+                  message: seamlySessionExpiredError.message,
+                  originalEvent: seamlySessionExpiredError.originalEvent,
+                  originalError: seamlySessionExpiredError.originalError
+                }));
+                break;
+              case 'conversation_erred':
+              case 'attach_channel_erred':
+                const seamlyGeneralError = new SeamlyGeneralError(event);
+                dispatch(setInterrupt({
+                  name: seamlyGeneralError.name,
+                  message: seamlyGeneralError.message,
+                  langKey: seamlyGeneralError.langKey,
+                  originalEvent: seamlyGeneralError.originalEvent,
+                  originalError: seamlyGeneralError.originalError,
+                  action: seamlyGeneralError.action
+                }));
+                break;
+            }
         }
-        messageChannelRef.current = channel.on('message', payload => {
-          if (!EMITTABLE_MESSAGE_TYPES.includes(payload.type)) {
-            return payload;
-          }
-          // This check dedupes the sending of messages via
-          // the bus if a duplicate connection exists in an
-          // error situation.
-          if (payload.id !== prevEmittedEventId.current) {
-            // @ts-ignore
-            eventBus.emit('message', payload);
-          }
-          prevEmittedEventId.current = payload.id;
+        return payload;
+      };
+      return false;
+    });
+  }, [conversation, dispatch, emitEvent, endCountdown, eventBus, initCountdown]);
+  (0,hooks_.useEffect)(() => {
+    conversation.onConnection(({
+      connected
+    }) => {
+      if (!connected) return false;
+      const {
+        channel
+      } = conversation;
+      if (messageChannelRef.current) {
+        channel.off('message', messageChannelRef.current);
+      }
+      messageChannelRef.current = channel.on('message', payload => {
+        if (!EMITTABLE_MESSAGE_TYPES.includes(payload.type)) {
           return payload;
-        });
-        return true;
+        }
+        // This check dedupes the sending of messages via
+        // the bus if a duplicate connection exists in an
+        // error situation.
+        if (payload.id !== prevEmittedEventId.current) {
+          // @ts-ignore
+          eventBus.emit('message', payload);
+        }
+        prevEmittedEventId.current = payload.id;
+        return payload;
       });
-    }
-  }, [api, api.connectionInfo, api.conversation.channel, eventBus]);
+      return true;
+    });
+  }, [conversation, eventBus]);
   (0,hooks_.useEffect)(() => {
-    if (api.connectionInfo) {
-      api.conversation.onConnection(({
-        connected
-      }) => {
-        var _a;
-        if (!connected) return false;
-        if (syncChannelRef.current) {
-          (_a = api.conversation.channel) === null || _a === void 0 ? void 0 : _a.off('sync', syncChannelRef.current);
+    conversation.onConnection(({
+      connected
+    }) => {
+      if (!connected) return false;
+      if (syncChannelRef.current) {
+        conversation.channel.off('sync', syncChannelRef.current);
+      }
+      syncChannelRef.current = conversation.channel.on('sync', payload => seamly_event_subscriber_awaiter(void 0, void 0, void 0, function* () {
+        try {
+          const history = yield dispatch(getConversation(payload)).unwrap();
+          if (!history) return;
+          dispatch(setHistory(history));
+        } catch (_e) {
+          // nothing to do, the error is handled in the thunk
         }
-        syncChannelRef.current = api.conversation.channel.on('sync', payload => seamly_event_subscriber_awaiter(void 0, void 0, void 0, function* () {
-          try {
-            const history = yield dispatch(getConversation(payload)).unwrap();
-            if (!history) return;
-            dispatch(setHistory(history));
-          } catch (_e) {
-            // nothing to do, the error is handled in the thunk
-          }
-        }));
-        return true;
-      });
-    }
-  }, [api, api.connectionInfo, api.conversation.channel, dispatch]);
+      }));
+      return true;
+    });
+  }, [conversation, dispatch]);
   return null;
 };
 /* harmony default export */ const seamly_event_subscriber = (SeamlyEventSubscriber);
@@ -14297,7 +14313,7 @@ const toBase64 = (file) => new Promise((resolve, reject) => {
 const SeamlyFileUpload = ({ children }) => {
     const { t } = useI18n();
     const dispatch = useDispatch();
-    const api = seamly_api_hooks_useSeamlyApiContext();
+    const api = useSeamlyApiContext();
     const { addUploadBubble } = use_seamly_commands();
     const addImageToSessionStorage = (0,hooks_.useCallback)((file, fileId) => seamly_file_upload_awaiter(void 0, void 0, void 0, function* () {
         dispatch(startProcessingImage(fileId));
@@ -14452,7 +14468,7 @@ const SeamlyInstanceFunctionsLoader = () => {
   } = useVisibility();
   const currentVisibility = (0,hooks_.useRef)(visible);
   const eventBus = (0,hooks_.useContext)(SeamlyEventBusContext);
-  const api = seamly_api_hooks_useSeamlyApiContext();
+  const api = useSeamlyApiContext();
   const unreadCount = useSeamlyUnreadCount();
   const previousUnreadCount = (0,hooks_.useRef)(null);
   const previousVisibilityState = (0,hooks_.useRef)(null);
@@ -15052,7 +15068,7 @@ const useEntryAbortTransaction = () => {
 
 function AbortTransactionButton() {
     const { abortTransaction, clearEntryAbortTransaction } = useEntryAbortTransaction();
-    const api = seamly_api_hooks_useSeamlyApiContext();
+    const api = useSeamlyApiContext();
     if (!abortTransaction)
         return null;
     const handleAbortTransaction = () => {
@@ -15075,8 +15091,6 @@ function AbortTransactionButton() {
             ]), type: "button", onClick: handleAbortTransaction, children: abortTransaction.label }) }));
 }
 
-;// CONCATENATED MODULE: external "preact/compat"
-const compat_namespaceObject = require("preact/compat");
 ;// CONCATENATED MODULE: ./src/javascripts/ui/components/conversation/event/chat-scroll/chat-scroll-context.ts
 
 const ChatScrollContext = (0,external_preact_.createContext)(null);