@seamly/web-ui 21.0.2 → 21.0.3-beta.2

package/package.json

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

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

@@ -4,16 +4,21 @@ import debug from 'lib/debug'
 import splitUrlParams from 'lib/split-url-params'
 
 const log = debug('seamly')
-
-type ConnectionState =
+type CurrentConnectionState =
   | 'socket_closed' // Socket is closed.
   | 'channel_closed' // Channel is closed.
   | 'channel_erred' // Errors received from joined channel.
   | 'join_channel_succeeded' // Joined channel succesfully.
   | 'join_channel_erred' // Error on joining channel. This is usefull when you want to restart a chat sessions.
   | 'attach_channel_succeeded' // Attached channel to system.
+
+type ConnectionState = {
+  connected: boolean
+  ready: boolean
+  currentState: CurrentConnectionState
+}
 export default class ConversationConnector {
-  #connectionListeners = []
+  #connectionListeners: ((_payload: ConnectionState) => boolean | void)[] = []
 
   accessToken: string
 
@@ -64,24 +69,40 @@ export default class ConversationConnector {
     this.channel.on('system', (msg) => {
       switch (msg.type) {
         case 'attach_channel_succeeded':
-          this.#emitConnectionState('attach_channel_succeeded')
+          this.#emitConnectionState({
+            connected: true,
+            ready: true,
+            currentState: 'attach_channel_succeeded',
+          })
           break
       }
     })
 
     this.socket.onClose(() => {
       log('[SOCKET]CLOSE')
-      this.#emitConnectionState('socket_closed')
+      this.#emitConnectionState({
+        connected: false,
+        ready: false,
+        currentState: 'socket_closed',
+      })
     })
 
     this.channel.onClose(() => {
       log('[CHANNEL]CLOSE')
-      this.#emitConnectionState('channel_closed')
+      this.#emitConnectionState({
+        connected: false,
+        ready: false,
+        currentState: 'channel_closed',
+      })
     })
 
     this.channel.onError((msg) => {
       log('[CHANNEL][ERROR]', msg)
-      this.#emitConnectionState('channel_erred')
+      this.#emitConnectionState({
+        connected: false,
+        ready: false,
+        currentState: 'channel_erred',
+      })
     })
 
     this.#listenTo(
@@ -102,11 +123,19 @@ export default class ConversationConnector {
       .join()
       .receive('ok', () => {
         log('[CHANNEL][JOIN] OK')
-        this.#emitConnectionState('join_channel_succeeded')
+        this.#emitConnectionState({
+          connected: true,
+          ready: false,
+          currentState: 'join_channel_succeeded',
+        })
       })
       .receive('error', (err) => {
         log('[CHANNEL][JOIN] ERROR', err)
-        this.#emitConnectionState('join_channel_erred')
+        this.#emitConnectionState({
+          connected: false,
+          ready: false,
+          currentState: 'join_channel_erred',
+        })
         // @ts-ignore
         this.channel.socket.disconnect()
       })
@@ -130,13 +159,21 @@ export default class ConversationConnector {
     })
   }
 
-  // eslint-disable-next-line no-unused-vars
-  onConnection(cb: (_payload: ConnectionState) => void) {
+  onConnection(cb: (_payload: ConnectionState) => boolean | void) {
     this.#connectionListeners.push(cb)
   }
 
   #emitConnectionState(payload: ConnectionState) {
-    this.#connectionListeners.forEach((cb) => cb(payload))
+    // Loop in reverse order to enable splicing the array while iterating
+    for (let i = this.#connectionListeners.length - 1; i >= 0; i--) {
+      const callback = this.#connectionListeners[i]
+      const complete = callback(payload)
+
+      // If we only want to execute the callback once, remove it from the listener
+      if (complete) {
+        this.#connectionListeners.splice(i, 1)
+      }
+    }
   }
 
   pushToChannel(

package/src/javascripts/api/index.ts

@@ -382,12 +382,9 @@ export class API {
       this.#getAccessToken(),
     )
 
-    this.conversation.onConnection((connectionState) => {
-      this.connected = [
-        'attach_channel_succeeded',
-        'join_channel_succeeded',
-      ].includes(connectionState)
-      this.#ready = connectionState === 'attach_channel_succeeded'
+    this.conversation.onConnection(({ connected, ready }) => {
+      this.connected = connected
+      this.#ready = ready
     })
 
     // Send environment
@@ -490,13 +487,18 @@ export class API {
   send(command, payload, waitForReady = true) {
     if (!this.connected || (waitForReady && !this.#ready)) {
       // Wait for connection to be made
-      this.conversation?.onConnection((connectionState) => {
-        const connected = connectionState === 'join_channel_succeeded'
-        const ready = connectionState === 'attach_channel_succeeded'
-        if (connected || ready) {
+      this.conversation?.onConnection(({ connected, ready }) => {
+        this.connected = connected
+        this.#ready = ready
+
+        if (waitForReady ? ready : connected) {
           this.send(command, payload, waitForReady)
+          return true
         }
+
+        return false
       })
+
       return
     }
 

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

@@ -76,8 +76,8 @@ const SeamlyEventSubscriber = () => {
   }, [api, api.connectionInfo, api.conversation])
 
   useEffect(() => {
-    api.conversation.onConnection((connectionState) => {
-      if (connectionState === 'join_channel_erred') {
+    api.conversation.onConnection(({ currentState }) => {
+      if (currentState === 'join_channel_erred') {
         const seamlyGeneralError = new SeamlyGeneralError()
         dispatch(
           setInterrupt({

package/src/javascripts/ui/components/view/deprecated-view.js

@@ -1,6 +1,5 @@
 import ChatFrame from 'ui/components/layout/deprecated-chat-frame'
 import { useShowInlineView, useVisibility } from 'domains/visibility/hooks'
-import { useSeamlyChat } from '../../hooks/seamly-hooks'
 import Conversation from '../conversation/conversation'
 import DeprecatedToggleButton from '../entry/deprecated-toggle-button'
 import AgentInfo from '../layout/agent-info'
@@ -15,7 +14,6 @@ const ShowInlineView = ({ children }) => {
 }
 
 const DeprecatedView = () => {
-  useSeamlyChat()
   const { isVisible, openChat, closeChat } = useVisibility()
 
   return (