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

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

@@ -3219,7 +3219,14 @@ 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,
@@ -3941,21 +3948,23 @@ class API {
   async connect() {
     this.connected = false;
     const conversationInitialState = !this.hasConversation() ? await this.createConversation() : undefined;
-    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;
-    });
-
-    // Send environment
-    const environment = this.#config.sendEnvironment === true ? this.getEnvironment() : this.#config.sendEnvironment;
-    if (this.#config.sendEnvironment) {
-      this.send('context', {
-        environment
+    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;
       });
+
+      // Send environment
+      const environment = this.#config.sendEnvironment === true ? this.getEnvironment() : this.#config.sendEnvironment;
+      if (this.#config.sendEnvironment) {
+        this.send('context', {
+          environment
+        });
+      }
     }
     return conversationInitialState;
   }
@@ -3994,7 +4003,7 @@ class API {
     return {
       clientName: "@seamly/web-ui",
       clientVariant: this.#layoutMode,
-      clientVersion: "24.0.0-beta.1",
+      clientVersion: "24.0.0-beta.2",
       currentUrl: window.location.toString(),
       screenResolution: `${window.screen.width}x${window.screen.height}`,
       timezone: getTimeZone(),
@@ -16821,13 +16830,13 @@ const SeamlyEventSubscriber = () => {
         dispatch(clearInterrupt());
       });
     }
-  }, [conversation, dispatch]);
+  }, [conversation, conversation.socket, dispatch]);
   (0,hooks_.useEffect)(() => {
     if (conversation.socket) {
       conversation.onConnection(({
         currentState
       }) => {
-        if (currentState === 'socket_join_error') {
+        if (currentState === 'attach_channel_erred') {
           const seamlyGeneralError = new SeamlyGeneralError();
           dispatch(setInterrupt({
             name: seamlyGeneralError.name,
@@ -16842,7 +16851,7 @@ const SeamlyEventSubscriber = () => {
         return false;
       });
     }
-  }, [conversation, dispatch]);
+  }, [conversation, conversation.socket, dispatch]);
   (0,hooks_.useEffect)(() => {
     conversation.onConnection(({
       connected
@@ -21496,6 +21505,7 @@ class ExternalApi {
   constructor(appConfig) {
     this._waitingActions = [];
     this._instances = {};
+    this.timeouts = {};
     this.appConfig = appConfig;
     this.context = {};
   }
@@ -21605,7 +21615,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);
     }
   }
   handleDestroy(actionObj) {
@@ -21632,6 +21642,17 @@ class ExternalApi {
   createInstance(config) {
     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]) => {