@seamly/web-ui 22.3.4 → 22.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "22.3.4",
+  "version": "22.3.5",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "module": "",

package/src/javascripts/api/conversation-connector.ts

@@ -18,6 +18,17 @@ type ConnectionState = {
   ready: boolean
   currentState: CurrentConnectionState
 }
+
+// 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<Function>()
+
+// 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())
+}
+
 export default class ConversationConnector {
   #connectionListeners: ((_payload: ConnectionState) => boolean | void)[] = []
 
@@ -46,32 +57,17 @@ export default class ConversationConnector {
     this.channelTopic = channelTopic
     const { url: splittedUrl, params } = splitUrlParams(this.url)
 
-    if (!this.socket) {
-      this.socket = new Socket(splittedUrl, {
-        params: { ...params, v: apiVersion },
-        reconnectAfterMs: (tries) => {
-          // Calculate the backoff time based on the number of tries.
-          const backoff = 2 ** tries * 250
-
-          // Limit the backoff time to 10 seconds.
-          return Math.min(backoff, 10000)
-        },
-      })
-    }
+    this.socket = new Socket(splittedUrl, {
+      params: { ...params, v: apiVersion },
+      reconnectAfterMs: (tries) => {
+        // Calculate the backoff time based on the number of tries.
+        const backoff = 2 ** tries * 250
 
-    // 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,
+        // Limit the backoff time to 10 seconds.
+        return Math.min(backoff, 10000)
+      },
     })
 
-    this.start()
-
     this.socket.onError((err) => {
       log('[SOCKET][ERROR]', err)
     })
@@ -80,6 +76,24 @@ export default class ConversationConnector {
       log('[SOCKET]OPEN')
     })
 
+    this.socket.onClose(() => {
+      log('[SOCKET]CLOSE')
+      this.#emitConnectionState({
+        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':
@@ -92,15 +106,6 @@ export default class ConversationConnector {
       }
     })
 
-    this.socket.onClose(() => {
-      log('[SOCKET]CLOSE')
-      this.#emitConnectionState({
-        connected: false,
-        ready: false,
-        currentState: 'socket_closed',
-      })
-    })
-
     this.channel.onClose(() => {
       log('[CHANNEL]CLOSE')
       this.#emitConnectionState({
@@ -184,6 +189,8 @@ export default class ConversationConnector {
       // If we only want to execute the callback once, remove it from the listener
       return !complete
     })
+
+    emitChange()
   }
 
   pushToChannel(
@@ -193,4 +200,13 @@ export default class ConversationConnector {
   ) {
     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: Function) {
+    subscribers.add(callback)
+
+    // Returns a function that removes the callback from the subscribers set.
+    return () => subscribers.delete(callback)
+  }
 }

package/src/javascripts/ui/components/core/seamly-event-subscriber.ts

@@ -4,10 +4,10 @@ import SeamlyOfflineError from 'api/errors/seamly-offline-error'
 import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
 import { SeamlyEventBusContext } from 'ui/components/core/seamly-api-context'
 import {
-  useSeamlyApiContext,
   useSeamlyCommands,
   useSeamlyIdleDetachCountdown,
 } from 'ui/hooks/seamly-hooks'
+import useSeamlyConversation from 'ui/hooks/use-seamly-conversation'
 import { featureKeys } from 'ui/utils/seamly-utils'
 import { setHasResponded } from 'domains/app/slice'
 import { clearInterrupt, setInterrupt } from 'domains/interrupt/slice'
@@ -38,7 +38,7 @@ import { setTranslationProposalPrompt } from 'domains/translations/slice'
 const EMITTABLE_MESSAGE_TYPES = ['text', 'choice_prompt', 'image', 'video']
 
 const SeamlyEventSubscriber = () => {
-  const api = useSeamlyApiContext()
+  const conversation = useSeamlyConversation()
   const syncChannelRef = useRef<number>()
   const messageChannelRef = useRef<number>()
   const dispatch = useAppDispatch()
@@ -48,8 +48,8 @@ const SeamlyEventSubscriber = () => {
   const { emitEvent } = useSeamlyCommands()
 
   useEffect(() => {
-    if (api.connectionInfo && api.conversation.socket) {
-      const { socket } = api.conversation
+    if (conversation.socket) {
+      const { socket } = conversation
       socket.onError((err) => {
         const seamlyOfflineError = new SeamlyOfflineError(err)
         dispatch(
@@ -61,6 +61,7 @@ const SeamlyEventSubscriber = () => {
             originalError: seamlyOfflineError.originalError,
           }),
         )
+
         dispatch(clearEvents())
       })
 
@@ -68,11 +69,11 @@ const SeamlyEventSubscriber = () => {
         dispatch(clearInterrupt())
       })
     }
-  }, [api, api.connectionInfo, api.conversation.socket, dispatch])
+  }, [conversation, dispatch])
 
   useEffect(() => {
-    if (api.connectionInfo && api.conversation.socket) {
-      api.conversation.onConnection(({ currentState }) => {
+    if (conversation.socket) {
+      conversation.onConnection(({ currentState }) => {
         if (currentState === 'join_channel_erred') {
           const seamlyGeneralError = new SeamlyGeneralError()
           dispatch(
@@ -91,251 +92,229 @@ const SeamlyEventSubscriber = () => {
         return false
       })
     }
-  }, [api, api.connectionInfo, api.conversation.channel, dispatch])
+  }, [conversation, dispatch])
 
   useEffect(() => {
-    if (api.connectionInfo) {
-      const updateParticipant = (event: ParticipantEvent) => {
-        if (event.type !== 'participant') {
-          return
-        }
-        const { payload } = event
+    const updateParticipant = (event: ParticipantEvent) => {
+      if (event.type !== 'participant') {
+        return
+      }
+      const { payload } = event
 
-        if (!payload || !payload.participant) {
-          return
-        }
+      if (!payload || !payload.participant) {
+        return
+      }
 
-        const { fromClient, participant } = payload
+      const { fromClient, participant } = payload
 
-        if (
-          !fromClient &&
-          typeof participant !== 'string' &&
-          participant?.name
-        ) {
-          dispatch(setHeaderSubTitle(participant.name))
-        }
+      if (!fromClient && typeof participant !== 'string' && participant?.name) {
+        dispatch(setHeaderSubTitle(participant.name))
+      }
 
-        dispatch(
-          setParticipant({
-            participant,
-            fromClient,
-          }),
-        )
+      dispatch(
+        setParticipant({
+          participant,
+          fromClient,
+        }),
+      )
 
-        if (typeof participant !== 'string' && participant.introduction) {
-          dispatch(addEvent(event))
-        }
+      if (typeof participant !== 'string' && participant.introduction) {
+        dispatch(addEvent(event))
       }
+    }
 
-      api.conversation.onConnection(({ connected }) => {
-        if (!connected) return false
+    conversation.onConnection(({ connected }) => {
+      if (!connected) return false
 
-        const { channel } = api.conversation
+      const { channel } = conversation
 
-        channel.onMessage = (type, payload) => {
-          const event = { type, payload }
+      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 as ChannelEvent))
-                  break
-              }
-              break
-            case 'participant':
-              updateParticipant(event as ParticipantEvent)
-              break
-            case 'service_data':
-              if (payload.persist) {
-                dispatch(setServiceDataItem(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 as ChannelEvent))
+                break
+            }
+            break
+          case 'participant':
+            updateParticipant(event as ParticipantEvent)
+            break
+          case 'service_data':
+            if (payload.persist) {
+              dispatch(setServiceDataItem(payload))
+            }
+            break
+          case 'ack':
+            dispatch(ackEvent(event as AckEvent))
+            break
+          case 'system':
+            if (payload.type === 'service_changed') {
+              const { serviceSettings, ...eventPayload } = payload
+              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 'ack':
-              dispatch(ackEvent(event as AckEvent))
-              break
-            case 'system':
-              if (payload.type === 'service_changed') {
-                const { serviceSettings, ...eventPayload } = payload
-                const { entry, proactiveMessages } = serviceSettings
-                const { upload } = entry.options
 
+              emitEvent('system.serviceChanged', eventPayload)
+            }
+            break
+          case 'info':
+            if (
+              payload.type === 'divider' ||
+              payload.type === 'text' ||
+              payload.type === 'translation'
+            ) {
+              dispatch(addEvent(event as ChannelEvent))
+            }
+            break
+          case 'error':
+            switch (payload.type) {
+              case 'find_conversation_erred':
+                const seamlySessionExpiredError = new SeamlySessionExpiredError(
+                  event,
+                )
                 dispatch(
-                  setFeatureEnabledState({
-                    key: featureKeys.uploads,
-                    enabled: !!(upload && upload.enabled),
+                  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(
-                  setProactiveMessages(proactiveMessages.enabled || false),
+                  setInterrupt({
+                    name: seamlyGeneralError.name,
+                    message: seamlyGeneralError.message,
+                    langKey: seamlyGeneralError.langKey,
+                    originalEvent: seamlyGeneralError.originalEvent,
+                    originalError: seamlyGeneralError.originalError,
+                    action: seamlyGeneralError.action,
+                  }),
                 )
-
-                dispatch(setServiceEntryMetadata(entry))
-                if (payload.serviceSessionId) {
-                  dispatch(setActiveService(payload.serviceSessionId))
-                }
-
-                emitEvent('system.serviceChanged', eventPayload)
-              }
-              break
-            case 'info':
-              if (
-                payload.type === 'divider' ||
-                payload.type === 'text' ||
-                payload.type === 'translation'
-              ) {
-                dispatch(addEvent(event as ChannelEvent))
-              }
-              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
+                break
+            }
         }
 
-        return false
-      })
-    }
-  }, [
-    api,
-    api.connectionInfo,
-    api.conversation.channel,
-    dispatch,
-    emitEvent,
-    endCountdown,
-    eventBus,
-    initCountdown,
-  ])
+        return payload
+      }
 
-  useEffect(() => {
-    if (api.connectionInfo) {
-      api.conversation.onConnection(({ connected }) => {
-        if (!connected) return false
+      return false
+    })
+  }, [conversation, dispatch, emitEvent, endCountdown, eventBus, initCountdown])
 
-        const { channel } = api.conversation
+  useEffect(() => {
+    conversation.onConnection(({ connected }) => {
+      if (!connected) return false
 
-        if (messageChannelRef.current) {
-          channel?.off('message', messageChannelRef.current)
-        }
+      const { channel } = conversation
 
-        messageChannelRef.current = channel.on('message', (payload) => {
-          if (!EMITTABLE_MESSAGE_TYPES.includes(payload.type)) {
-            return payload
-          }
+      if (messageChannelRef.current) {
+        channel.off('message', messageChannelRef.current)
+      }
 
-          // 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
+      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])
 
   useEffect(() => {
-    if (api.connectionInfo) {
-      api.conversation.onConnection(({ connected }) => {
-        if (!connected) return false
+    conversation.onConnection(({ connected }) => {
+      if (!connected) return false
 
-        if (syncChannelRef.current) {
-          api.conversation.channel?.off('sync', syncChannelRef.current)
-        }
+      if (syncChannelRef.current) {
+        conversation.channel.off('sync', syncChannelRef.current)
+      }
 
-        syncChannelRef.current = api.conversation.channel.on(
-          'sync',
-          async (payload: {
-            lastEvent: { id: string; occurredAt: number }
-          }) => {
-            try {
-              const history = await dispatch(getConversation(payload)).unwrap()
-              if (!history) return
-
-              dispatch(setHistory(history))
-            } catch (_e) {
-              // nothing to do, the error is handled in the thunk
-            }
-          },
-        )
+      syncChannelRef.current = conversation.channel.on(
+        'sync',
+        async (payload: { lastEvent: { id: string; occurredAt: number } }) => {
+          try {
+            const history = await dispatch(getConversation(payload)).unwrap()
+            if (!history) return
 
-        return true
-      })
-    }
-  }, [api, api.connectionInfo, api.conversation.channel, dispatch])
+            dispatch(setHistory(history))
+          } catch (_e) {
+            // nothing to do, the error is handled in the thunk
+          }
+        },
+      )
+
+      return true
+    })
+  }, [conversation, dispatch])
 
   return null
 }

package/src/javascripts/ui/hooks/seamly-hooks.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'preact/hooks'
 // Import extracted hooks here for use inside this file
-import { useSeamlyApiContext } from './seamly-api-hooks'
+import useSeamlyConversation from './use-seamly-conversation'
 
 // Export extracted hooks here,
 // although this is a redundant, it prevents a bazillion code changes for now.
@@ -54,11 +54,11 @@ export {
 // and imported directly from this file
 // Please do not remove
 export const useSeamlyEventStream = (nextFn, filterFn) => {
-  const api = useSeamlyApiContext()
+  const conversation = useSeamlyConversation()
 
   useEffect(() => {
-    if (api.connectionInfo && api.conversation?.channel) {
-      const { channel } = api.conversation
+    if (conversation.channel) {
+      const { channel } = conversation
 
       channel.onMessage = (type, payload) => {
         if (!filterFn || filterFn({ type, payload })) {
@@ -68,5 +68,5 @@ export const useSeamlyEventStream = (nextFn, filterFn) => {
         return payload
       }
     }
-  }, [nextFn, filterFn, api.connectionInfo, api.conversation])
+  }, [nextFn, filterFn, conversation])
 }

package/src/javascripts/ui/hooks/use-seamly-conversation.ts

@@ -0,0 +1,13 @@
+import { useSyncExternalStore } from 'preact/compat'
+import ConversationConnector from 'api/conversation-connector'
+import { useSeamlyApiContext } from './seamly-api-hooks'
+
+const useSeamlyConversation = () => {
+  const api = useSeamlyApiContext()
+
+  const getSnapshot = () => api.conversation
+
+  return useSyncExternalStore(ConversationConnector.subscribe, getSnapshot)
+}
+
+export default useSeamlyConversation