@seamly/web-ui 24.0.0-beta.1 → 24.0.0-beta.3

package/package.json

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

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

@@ -47,7 +47,14 @@ export default class ConversationConnector {
     try {
       switch (json.type) {
         case 'attach_channel_response':
-          if (!json.payload.success) return
+          if (!json.payload.success) {
+            this.#emitConnectionState({
+              connected: true,
+              ready: false,
+              currentState: 'attach_channel_erred',
+            })
+            return
+          }
           this.#emitConnectionState({
             connected: true,
             ready: true,

package/src/javascripts/api/index.ts

@@ -455,28 +455,30 @@ export default class API {
       ? await this.createConversation()
       : undefined
 
-    this.conversation.connect(
-      `${this.#getUrlPrefix('ws')}${this.URLS.socket?.href}`,
-      this.#config.context.channelName || '',
-      this.getChannelTopic(),
-      this.getAccessToken(),
-    )
+    if (this.URLS.socket) {
+      this.conversation.connect(
+        `${this.#getUrlPrefix('ws')}${this.URLS.socket.href}`,
+        this.#config.context.channelName || '',
+        this.getChannelTopic(),
+        this.getAccessToken(),
+      )
 
-    this.conversation.onConnection(({ connected, ready }) => {
-      this.connected = connected
-      this.#ready = ready
-    })
+      this.conversation.onConnection(({ connected, ready }) => {
+        this.connected = connected
+        this.#ready = ready
+      })
 
-    // Send environment
-    const environment =
-      this.#config.sendEnvironment === true
-        ? this.getEnvironment()
-        : this.#config.sendEnvironment
+      // Send environment
+      const environment =
+        this.#config.sendEnvironment === true
+          ? this.getEnvironment()
+          : this.#config.sendEnvironment
 
-    if (this.#config.sendEnvironment) {
-      this.send('context', {
-        environment,
-      })
+      if (this.#config.sendEnvironment) {
+        this.send('context', {
+          environment,
+        })
+      }
     }
 
     return conversationInitialState

package/src/javascripts/lib/external-api/index.ts

@@ -13,6 +13,7 @@ class ExternalApi {
   constructor(appConfig) {
     this._waitingActions = []
     this._instances = {}
+    this.timeouts = {}
     this.appConfig = appConfig
     this.context = {}
   }
@@ -124,7 +125,7 @@ class ExternalApi {
       this._instances[config.namespace] = instance
       // Clear the context after creating the instance, so we do not reuse it for the next
       this.context = {}
-      instance.render()
+      this.debouncedRender(instance, config.namespace)
     }
   }
 
@@ -158,6 +159,17 @@ class ExternalApi {
     return new Engine(config, this)
   }
 
+  /**
+   * @param {Engine} instance
+   * @param {string} namespace
+   */
+  debouncedRender(instance, namespace) {
+    window.clearTimeout(this.timeouts[namespace])
+    this.timeouts[namespace] = window.setTimeout(() => {
+      instance.render()
+    }, 100)
+  }
+
   destroy(instance) {
     if (!instance) {
       Object.entries(this._instances).forEach(([namespace, _instance]) => {

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

@@ -45,34 +45,10 @@ const SeamlyEventSubscriber = () => {
   const { initCountdown, endCountdown } = useSeamlyIdleDetachCountdown()
   const { emitEvent } = useSeamlyCommands()
 
-  useEffect(() => {
-    if (conversation.socket) {
-      const { onError, onOpen } = conversation
-      onError((err) => {
-        const seamlyOfflineError = new SeamlyOfflineError(err)
-        dispatch(
-          setInterrupt({
-            name: seamlyOfflineError.name,
-            message: seamlyOfflineError.message,
-            langKey: seamlyOfflineError.langKey,
-            originalEvent: seamlyOfflineError.originalEvent,
-            originalError: seamlyOfflineError.originalError,
-          }),
-        )
-
-        dispatch(clearEvents())
-      })
-
-      onOpen(() => {
-        dispatch(clearInterrupt())
-      })
-    }
-  }, [conversation, dispatch])
-
   useEffect(() => {
     if (conversation.socket) {
       conversation.onConnection(({ currentState }) => {
-        if (currentState === 'socket_join_error') {
+        if (currentState === 'attach_channel_erred') {
           const seamlyGeneralError = new SeamlyGeneralError()
           dispatch(
             setInterrupt({
@@ -87,10 +63,30 @@ const SeamlyEventSubscriber = () => {
 
           return true
         }
+
         return false
       })
+
+      conversation.onError((err) => {
+        const seamlyOfflineError = new SeamlyOfflineError(err)
+        dispatch(
+          setInterrupt({
+            name: seamlyOfflineError.name,
+            message: seamlyOfflineError.message,
+            langKey: seamlyOfflineError.langKey,
+            originalEvent: seamlyOfflineError.originalEvent,
+            originalError: seamlyOfflineError.originalError,
+          }),
+        )
+
+        dispatch(clearEvents())
+      })
+
+      conversation.onOpen(() => {
+        dispatch(clearInterrupt())
+      })
     }
-  }, [conversation, dispatch])
+  }, [conversation, conversation.socket, dispatch])
 
   useEffect(() => {
     conversation.onConnection(({ connected }) => {