@epam/ai-dial-chat-visualizer-connector - npm Package Compare versions

Comparing version 0.12.0-rc.7 to 0.12.0-rc.8

package.json

@@ -5,5 +5,5 @@ {
   "homepage": "https://epam-rail.com",
-  "version": "0.12.0-rc.7",
+  "version": "0.12.0-rc.8",
   "dependencies": {
-    "@epam/ai-dial-shared": "0.12.0-rc.7"
+    "@epam/ai-dial-shared": "0.12.0-rc.8"
   },
@@ -10,0 +10,0 @@ "type": "module",

README.md

@@ -7,3 +7,3 @@ # DIAL Chat Visualizer Connector
 
-`ChatVisualizerConnector` - class which provides needed methods for the **Visualizer**(rendered in the iframe) to interact with **DIAL Chat** (receive data to visualize). Types for configuration options are `ChatVisualizerConnector` and `AttachmentData`.
+`ChatVisualizerConnector` - class which provides needed methods for the **Visualizer**(rendered in the iframe) to interact with **DIAL Chat** (receive data to visualize).
 
@@ -53,2 +53,15 @@ ## Prerequisites
 
+Futhermore, model or application should send data in **json**-like format which should include layout property. This layout object should have **width** and **height** properties. All other properties could be set to anything you need for your **Visualizer**.
+
+```typescript
+export interface CustomVisualizerDataLayout {
+  width: number;
+  height: number;
+}
+
+export interface CustomVisualizerData {
+  layout: CustomVisualizerDataLayout;
+}
+```
+
 ## To integrate **Visualizer** with _DIAL CHAT_.
@@ -65,5 +78,39 @@
 ```typescript
-import { AttachmentData, ChatVisualizerConnector } from '@epam/ai-dial-chat-visualizer-connector';
+import { AttachmentData, ChatVisualizerConnector, CustomVisualizerDataLayout } from '@epam/ai-dial-chat-visualizer-connector';
 ```
 
+`ChatVisualizerConnector` - class which provides needed methods for the **Visualizer**(rendered in the iframe) to interact with **DIAL Chat** (receive data to visualize).
+Expects following required arguments:
+
+```typescript
+/**
+ * Params for a ChatVisualizerConnector
+ * @param dialHost {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);
+```
+
+`AttachmentData` - interface for the payload you will get from the _DIAL CHAT_
+
+```typescript
+export interface AttachmentData {
+  mimeType: string;
+  visualizerData: CustomVisualizerData;
+}
+```
+
+`CustomVisualizerDataLayout` - interface for the layout you will get from the _DIAL CHAT_.
+Properties **width** and **height** is needed for the proper rendering in the _DIAL CHAT_.
+
+```typescript
+export interface CustomVisualizerDataLayout {
+  width: number;
+  height: number;
+}
+```
+
 3. Set `dialHost` to the _DIAL CHAT_ host you want to connect:
@@ -75,3 +122,3 @@
 
-4. Set `appName` same as `title` in the _DIAL CHAT_ configuration in the `CUSTOM_VISUALIZERS`:
+4. Set `appName` same as `title` in the _DIAL CHAT_ configuration in the `CUSTOM_VISUALIZERS` environmental variable:
 
@@ -121,3 +168,7 @@ ```typescript
 ```typescript
-data.visualizerData as { dataToRender: string; layout: Layout };
+//layout should include width and height properties
+interface YourVisualizerLayout extends CustomVisualizerDataLayout {
+  //any other layout properties expected from the model/application output
+}
+data.visualizerData as { dataToRender: string; layout: YourVisualizerLayout };
 ```
@@ -137,4 +188,5 @@
 
-import { AttachmentData, ChatVisualizerConnector } from '@epam/ai-dial-chat-visualizer-connector';
+import { AttachmentData, ChatVisualizerConnector, CustomVisualizerDataLayout } from '@epam/ai-dial-chat-visualizer-connector';
 
+
 export const Module: FC = () => {
@@ -175,5 +227,5 @@ const [data, setData] = useState<AttachmentData>();
 
-  const typedVisualizerData = React.useMemo(() => {
+  const typedVisualizerData = useMemo(() => {
     return (
-      data?.visualizerData && (data.visualizerData as { dataToRender: string })
+      data?.visualizerData && (data.visualizerData as unknown as { dataToRender: string; layout: YourVisualizerLayout })
     );
@@ -180,0 +232,0 @@ }, [data?.visualizerData]);

src/index.d.ts

 export * from './lib/ChatVisualizerConnector';
+export { type AttachmentData, type CustomVisualizerDataLayout, } from '@epam/ai-dial-shared';

src/lib/ChatVisualizerConnector.d.ts

@@ -1,2 +0,2 @@
-import { VisualizerConnectorRequests } from '@epam/ai-dial-shared';
+import { AttachmentData, VisualizerConnectorRequests } from '@epam/ai-dial-shared';
 interface RequestParams {
@@ -10,6 +10,2 @@ type: VisualizerConnectorRequests;
 }
-export interface AttachmentData {
-    mimeType: string;
-    visualizerData: Record<string, unknown>;
-}
 /**
@@ -16,0 +12,0 @@ * Class which creates connector with DIAL CHAT, allows to interact with it (send/receive data via post messages)

No alert changes

Improved metrics

Total package byte prevSize

24239

increased by7.83%

Number of lines in readme file

250

increased by26.26%

Worsened metrics

Lines of code

115

decreased by-2.54%

Dependency changes

• + Added@epam/ai-dial-shared@0.12.0-rc.8(transitive)

• - Removed@epam/ai-dial-shared@0.12.0-rc.7(transitive)

• Updated@epam/ai-dial-shared@0.12.0-rc.8