Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@epam/ai-dial-chat-visualizer-connector
Advanced tools
Package for custom visualizer to connect with Dial Chat
DIAL Chat Visualizer Connector is a library for connecting custom visualizers - applications which could visualize some special type data (for example plot data for the Plotly).
ChatVisualizerConnector
- class which provides needed methods for the Visualizer(rendered in the iframe) to interact with DIAL Chat (receive data to visualize).
For security reason your Dial Chat application should configure sources where your custom visualizers hosted:
ALLOWED_IFRAME_SOURCES
- list of allowed iframe sources in <source> <source>
format.Note: For development purposes you can set *
ALLOWED_IFRAME_SOURCES=http://localhost:8000
Moreover, it needs to be configured some Visualizer properties:
CUSTOM_VISUALIZERS
- list of the objects with custom visualizers properties. This properties are : { title, description, icon, contentType, url }
.interface CustomVisualizer {
title: string;
description: string;
icon: string;
contentType: string;
url: string;
}
CUSTOM_VISUALIZERS=[
{
"title":"CUSTOM_VISUALIZER", // Visualizer title
"description": "CUSTOM VISUALIZER to render images", // Short description for the Visualizer
"icon":"data:image/svg+xml;base64,some-base64-image", // Icon for the Visualizer
"contentType":"image/png,image/jpg", // List of MIME types that Visualizer could render separated by ","
"url":"http://localhost:8000" // Visualizer host
},
{
//Other Visualizer
}
]
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.
export interface CustomVisualizerDataLayout {
width: number;
height: number;
}
export interface CustomVisualizerData {
layout: CustomVisualizerDataLayout;
}
npm i @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:
/**
* 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
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.
export interface CustomVisualizerDataLayout {
width: number;
height: number;
}
dialHost
to the DIAL CHAT host you want to connect:const dialHost = 'https://hosted-dial-chat-domain.com';
appName
same as title
in the DIAL CHAT configuration in the CUSTOM_VISUALIZERS
environmental variable:const appName = 'CUSTOM_VISUALIZER';
ChatVisualizerConnector
in your code.ChatVisualizerConnector:
//Here you store your data which you get from the DIAL CHAT
const [data, setData] = useState<AttachmentData>();
const chatVisualizerConnector = useRef<ChatVisualizerConnector | null>(null);
useEffect(() => {
if (!chatVisualizerConnector.current && dialHost && appName) {
chatVisualizerConnector.current = new ChatVisualizerConnector(dialHost, appName, setData);
return () => {
chatVisualizerConnector.current?.destroy();
chatVisualizerConnector.current = null;
};
}
}, [appName, dialHost]);
sendReady()
to the DIAL CHAT to inform that your Visualizer is ready (this action will hide loader). Then you could do some preparation (login, etc.) and, after that, send 'READY TO INTERACT' event via sendReadyToInteract()
to inform DIAL CHAT that Visualizer is ready to receive data.useEffect(() => {
if (appName && dialHost) {
chatVisualizerConnector.current?.sendReady();
//Make some actions if needed
chatVisualizerConnector.current?.sendReadyToInteract();
}
}, [dialHost, appName]);
Note: Data send by model/application from DIAL CHAT should be the same type as you expect.
//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 };
<div>{typedVisualizerData.dataToRender}</div>
Module.tsx
import { AttachmentData, ChatVisualizerConnector, CustomVisualizerDataLayout } from '@epam/ai-dial-chat-visualizer-connector';
export const Module: FC = () => {
const [data, setData] = useState<AttachmentData>();
const chatVisualizerConnector = useRef<ChatVisualizerConnector | null>(
null
);
//DIAL CHAT host
const dialHost = 'https://hosted-dial-chat-domain.com';
//Visualizer title. Should be same as in the DIAL CHAT configuration in CUSTOM_VISUALIZERS
const appName = 'CUSTOM_VISUALIZER';
useEffect(() => {
if (!chatVisualizerConnector.current && dialHost && appName) {
chatVisualizerConnector.current = new ChatVisualizerConnector(
dialHost,
appName,
setData
);
return () => {
chatVisualizerConnector.current?.destroy();
chatVisualizerConnector.current = null;
};
}
}, [appName, dialHost]);
useEffect(() => {
if (appName && dialHost) {
chatVisualizerConnector.current?.sendReady();
chatVisualizerConnector.current?.sendReadyToInteract();
}
}, [dialHost, appName]);
const typedVisualizerData = useMemo(() => {
return (
data?.visualizerData && (data.visualizerData as unknown as { dataToRender: string; layout: YourVisualizerLayout })
);
}, [data?.visualizerData]);
return (
<div>
{!!typedVisualizerData?.dataToRender && (
<div>
{typedVisualizerData.dataToRender}
</div>
)}
</div>
);
};
index.ts
//...other imports
import { Module } from "./Module.tsx";
const root = createRoot(document.getElementById("root"));
root.render(<Module />);
FAQs
Package for custom visualizer to connect with Dial Chat
The npm package @epam/ai-dial-chat-visualizer-connector receives a total of 1,091 weekly downloads. As such, @epam/ai-dial-chat-visualizer-connector popularity was classified as popular.
We found that @epam/ai-dial-chat-visualizer-connector demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.