@epam/ai-dial-chat-visualizer-connector 0.40.0-rc.8 → 0.40.0

package/README.md

@@ -83,13 +83,16 @@ Expects following required arguments:
 ```typescript
 /**
  * Params for a ChatVisualizerConnector
- * @param dialHost {string} DIAL CHAT host
+ * @param dialHost {string | string[]} DIAL CHAT host
  * @param appName {string} name of the Visualizer same as in config
  * @param dataCallback {(visualizerData: AttachmentData) => void} callback to get data that will be used in the Visualizer
  */
 
-//instance example
-new ChatVisualizerConnector(dialHost, appName, setData);
+//instance example with single host
+new ChatVisualizerConnector('https://hosted-dial-chat-domain.com', 'CUSTOM_VISUALIZER', setData);
+
+//instance example with multiple hosts
+new ChatVisualizerConnector(['https://hosted-dial-chat-domain.com', 'https://backup-dial-chat-domain.com'], 'CUSTOM_VISUALIZER', setData);
 ```
 
 `AttachmentData` - interface for the payload you will get from the _DIAL CHAT_
@@ -118,6 +121,12 @@ export interface CustomVisualizerDataLayout {
 const dialHost = 'https://hosted-dial-chat-domain.com';
 ```
 
+Or (new):
+
+```typescript
+const dialHost = ['https://hosted-dial-chat-domain.com', 'https://backup-dial-chat-domain.com'];
+```
+
 4. Set `appName` same as `title` in the _DIAL CHAT_ configuration in the `CUSTOM_VISUALIZERS` environmental variable:
 
 ```typescript
@@ -176,9 +185,19 @@ data.visualizerData as { dataToRender: string; layout: YourVisualizerLayout };
 <div>{typedVisualizerData.dataToRender}</div>
 ```
 
-### Full React code example to connect your custom visualizer
+### Sending to a particular host when multiple were passed
 
-`Module.tsx`
+```typescript
+chatVisualizerConnector.current?.send({
+  type: VisualizerConnectorEvents.sendMessage,
+  payload: { message: 'hello from visualizer' },
+  dialHost: 'https://hosted-dial-chat-domain.com',
+});
+```
+
+If `dialHost` is **not** provided in `send(...)`, the connector will send the message to **all** hosts passed in the constructor.
+
+### Full React code example to connect your custom visualizer
 
 ```typescript
 
@@ -192,8 +211,11 @@ export const Module: FC = () => {
     null
   );
 
-  //DIAL CHAT host
-  const dialHost = 'https://hosted-dial-chat-domain.com';
+  //DIAL CHAT host (one or multiple)
+  const dialHost = [
+    'https://hosted-dial-chat-domain.com',
+    'https://backup-dial-chat-domain.com'
+  ];
 
   //Visualizer title. Should be same as in the DIAL CHAT configuration in CUSTOM_VISUALIZERS
   const appName = 'CUSTOM_VISUALIZER';

package/index.esm.js

@@ -38,12 +38,18 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 class ChatVisualizerConnector {
     /**
      * Creates a ChatVisualizerConnector
-     * @param dialHost {string} DIAL CHAT host
+     * @param dialHost {string | string[]} DIAL CHAT host(s)
      * @param appName {string} name of the Visualizer same as in config
      * @param dataCallback {(visualizerData: AttachmentData) => void} callback to get data that will be used in the Visualizer
      */
     constructor(dialHost, appName, dataCallback) {
-        this.dialHost = dialHost;
+        const hosts = Array.isArray(dialHost) ? dialHost : [dialHost];
+        if (!hosts.length) {
+            throw new Error('[ChatVisualizerConnector] No dial host(s) provided');
+        }
+        this.dialHosts = hosts;
+        // keep old field for backward compatibility
+        this.dialHost = hosts[0];
         this.appName = appName;
         this.dataCallback = dataCallback;
         this.postMessageListener = this.postMessageListener.bind(this);
@@ -53,16 +59,19 @@ class ChatVisualizerConnector {
      * Sends the post message to the DIAL Chat
      * @param type Visualizer Event name
      * @param payload Event payload
-     * @param dialHost host of the DIAL Chat
+     * @param dialHost host of the DIAL Chat (optional) — if provided, message goes ONLY to this host
      */
-    send({ type, payload, dialHost = this.dialHost, }) {
+    send({ type, payload, dialHost, }) {
         if (!(window === null || window === void 0 ? void 0 : window.parent)) {
             throw new Error(`[${this.appName}] There is no parent window to send requests`);
         }
-        window.parent.postMessage({
-            type: `${this.appName}/${type}`,
-            payload,
-        }, dialHost);
+        const targets = dialHost ? [dialHost] : this.dialHosts;
+        for (const target of targets) {
+            window.parent.postMessage({
+                type: `${this.appName}/${type}`,
+                payload,
+            }, target);
+        }
     }
     /**
      * Sends response via postMessage to the DIAL CHAT to notify it data received
@@ -77,9 +86,10 @@ class ChatVisualizerConnector {
         }, dialHost);
     }
     postMessageListener(event) {
-        if (event.origin !== this.dialHost)
+        // accept messages only from known hosts
+        if (!this.dialHosts.includes(event.origin))
             return;
-        //check if there is a payload
+        // check if there is a payload
         if (typeof event.data.payload !== 'object' || event.data.payload === null)
             return;
         if (event.data.type ===

package/package.json

@@ -2,9 +2,9 @@
   "name": "@epam/ai-dial-chat-visualizer-connector",
   "description": "Package for custom visualizer to connect with DIAL Chat",
   "homepage": "https://dialx.ai",
-  "version": "0.40.0-rc.8",
+  "version": "0.40.0",
   "dependencies": {
-    "@epam/ai-dial-shared": "0.40.0-rc.8"
+    "@epam/ai-dial-shared": "0.40.0"
   },
   "type": "module",
   "bugs": {

package/src/lib/ChatVisualizerConnector.d.ts

@@ -12,20 +12,26 @@ export interface PostMessageRequestParams extends RequestParams {
  */
 export declare class ChatVisualizerConnector {
     protected dialHost: string;
+    /**
+     * List of allowed/target hosts.
+     * All outgoing messages (without explicit dialHost) will be sent to each of them.
+     * All incoming messages must originate from one of them.
+     */
+    protected dialHosts: string[];
     protected appName: string;
     protected dataCallback: (visualizerData: AttachmentData) => void;
     /**
      * Creates a ChatVisualizerConnector
-     * @param dialHost {string} DIAL CHAT host
+     * @param dialHost {string | string[]} DIAL CHAT host(s)
      * @param appName {string} name of the Visualizer same as in config
      * @param dataCallback {(visualizerData: AttachmentData) => void} callback to get data that will be used in the Visualizer
      */
-    constructor(dialHost: string, appName: string, dataCallback: (visualizerData: AttachmentData) => void);
+    constructor(dialHost: string | string[], appName: string, dataCallback: (visualizerData: AttachmentData) => void);
     /**
      * Sends the post message to the DIAL Chat
      * @param type Visualizer Event name
      * @param payload Event payload
-     * @param dialHost host of the DIAL Chat
+     * @param dialHost host of the DIAL Chat (optional) — if provided, message goes ONLY to this host
      */
     send({ type, payload, dialHost, }: {
         type: VisualizerConnectorEvents;