@microsoft/omnichannel-chat-widget 1.0.6-main.ffb4e2a → 1.1.1-main.1f4a6a7

package/lib/esm/plugins/createChatTranscript.js

@@ -0,0 +1,543 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/* eslint-disable no-useless-escape */
+
+import { createFileAndDownload } from "../common/utils";
+class TranscriptHTMLBuilder {
+  // eslint-disable-line @typescript-eslint/no-explicit-any
+
+  constructor(options) {
+    var _this$options, _this$options2, _this$options3, _this$options4, _this$options5, _this$options6, _this$options7, _this$options8, _this$options9, _this$options10, _this$options11;
+    _defineProperty(this, "options", void 0);
+    _defineProperty(this, "pageTitle", "Customer Transcript");
+    _defineProperty(this, "attachmentMessage", "The following attachment was uploaded during the conversation: ");
+    _defineProperty(this, "networkOnlineMessage", "Connection restored. Please refresh the page");
+    _defineProperty(this, "networkOfflineMessage", "Network Error. Please make sure you are connected to the internet.");
+    _defineProperty(this, "transcriptBackgroundColor", "#FFF");
+    _defineProperty(this, "agentAvatarBackgroundColor", "#E8E8E8");
+    _defineProperty(this, "agentAvatarFontColor", "#000");
+    _defineProperty(this, "customerAvatarBackgroundColor", "#2266E3");
+    _defineProperty(this, "customerAvatarFontColor", "#FFF");
+    _defineProperty(this, "disableMarkdownMessageFormatting", false);
+    _defineProperty(this, "disableNewLineMarkdownSupport", false);
+    // eslint-disable-line @typescript-eslint/no-explicit-any
+    this.options = options;
+    if (!this.options || !this.options.messages) {
+      this.options.messages = [];
+    }
+    if ((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.pageTitle) {
+      this.pageTitle = this.options.pageTitle;
+    }
+    if ((_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.attachmentMessage) {
+      this.attachmentMessage = this.options.attachmentMessage;
+    }
+    if ((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.networkOnlineMessage) {
+      this.networkOnlineMessage = this.options.networkOnlineMessage;
+    }
+    if ((_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.networkOfflineMessage) {
+      this.networkOfflineMessage = this.options.networkOfflineMessage;
+    }
+    if ((_this$options5 = this.options) !== null && _this$options5 !== void 0 && _this$options5.transcriptBackgroundColor) {
+      this.transcriptBackgroundColor = this.options.transcriptBackgroundColor;
+    }
+    if ((_this$options6 = this.options) !== null && _this$options6 !== void 0 && _this$options6.agentAvatarBackgroundColor) {
+      this.agentAvatarBackgroundColor = this.options.agentAvatarBackgroundColor;
+    }
+    if ((_this$options7 = this.options) !== null && _this$options7 !== void 0 && _this$options7.agentAvatarFontColor) {
+      this.agentAvatarFontColor = this.options.agentAvatarFontColor;
+    }
+    if ((_this$options8 = this.options) !== null && _this$options8 !== void 0 && _this$options8.customerAvatarBackgroundColor) {
+      this.customerAvatarBackgroundColor = this.options.customerAvatarBackgroundColor;
+    }
+    if ((_this$options9 = this.options) !== null && _this$options9 !== void 0 && _this$options9.customerAvatarFontColor) {
+      this.customerAvatarFontColor = this.options.customerAvatarFontColor;
+    }
+    if ((_this$options10 = this.options) !== null && _this$options10 !== void 0 && _this$options10.disableMarkdownMessageFormatting) {
+      this.disableMarkdownMessageFormatting = this.options.disableMarkdownMessageFormatting;
+    }
+    if ((_this$options11 = this.options) !== null && _this$options11 !== void 0 && _this$options11.disableNewLineMarkdownSupport) {
+      this.disableNewLineMarkdownSupport = this.options.disableNewLineMarkdownSupport;
+    }
+  }
+  createTitleElement() {
+    const htmlData = `<title> ${this.pageTitle} </title>`;
+    return htmlData;
+  }
+  createExternalScriptElements() {
+    const htmlData = `
+            <script src="https://cdn.botframework.com/botframework-webchat/4.15.7/webchat.js"><\/script>
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.0/rxjs.umd.min.js" integrity="sha512-v0/YVjBcbjLN6scjmmJN+h86koeB7JhY4/2YeyA5l+rTdtKLv0VbDBNJ32rxJpsaW1QGMd1Z16lsLOSGI38Rbg==" crossorigin="anonymous" referrerpolicy="no-referrer"><\/script>
+            <script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"><\/script>
+            <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"><\/script>
+            <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js" integrity="sha256-hNyljag6giCsjv/yKmxK8/VeHzvMDvc5u8AzmRvm1BI=" crossorigin="anonymous"><\/script>
+        `;
+    return htmlData;
+  }
+  createHeadElement() {
+    const htmlData = `
+            <head>
+                ${this.createTitleElement()}
+                ${this.createExternalScriptElements()}
+                <script>
+                    function shareObservable(observable) {
+                        let observers = [];
+                        let subscription;
+
+                        return new Observable(observer => {
+                            if (!subscription) {
+                                subscription = observable.subscribe({
+                                    complete() {
+                                        observers.forEach(observer => observer.complete());
+                                    },
+                                    error(err) {
+                                        observers.forEach(observer => observer.error(err));
+                                    },
+                                    next(value) {
+                                        observers.forEach(observer => observer.next(value));
+                                    }
+                                });
+                            }
+
+                            observers.push(observer);
+
+                            return () => {
+                                observers = observers.filter(o => o !== observer);
+
+                                if (!observers.length) {
+                                    subscription.unsubscribe();
+                                    subscription = null;
+                                }
+                            };
+                        });
+                    }
+                <\/script>
+                <script>
+                    const messages = ${JSON.stringify(this.options.messages)};
+                    const disableMarkdownMessageFormatting = ${this.disableMarkdownMessageFormatting};
+                    const disableNewLineMarkdownSupport = ${this.disableNewLineMarkdownSupport};
+                <\/script>
+                <script>
+                    class Translator {
+                        static convertTranscriptMessageToActivity(message) {
+                            const {created, isControlMessage, content, tags, from, attachments, amsMetadata, amsReferences} = message;
+                            const activity = {
+                                from: {
+                                    role: 'bot'
+                                },
+                                type: 'message'
+                            };
+
+                            // Ignore control messages
+                            if (isControlMessage) {
+                                return false;
+                            }
+
+                            if (tags) {
+                                const formattedTags = tags.split(',');
+
+                                // Ignore system message
+                                if (formattedTags.includes('system')) {
+                                    return false;
+                                }
+
+                                // Ignore hidden message
+                                if (formattedTags.includes('Hidden')) {
+                                    return false;
+                                }
+                            }
+
+                            // Add C1 user display name
+                            if (from && from.user && from.user.displayName) {
+                                activity.from.name = from.user.displayName;
+                            }
+
+                            // Add C2 user display name
+                            if (from && from.application && from.application.displayName && from.application.displayName === 'Customer') {
+                                activity.from = {
+                                    role: 'user',
+                                    name: from.application.displayName
+                                };
+                            }
+
+                            // Attachments
+                            if (amsReferences && amsMetadata) {
+                                const metadata = JSON.parse(amsMetadata);
+                                const { fileName } = metadata[0];
+                                const text = \`${this.attachmentMessage}\${fileName}\`;
+
+                                if (message.attachments && message.attachments.length > 0 && message.contentUrl) {
+                                    activity.attachments = message.attachments;
+                                    activity.attachments[0].contentUrl = message.contentUrl;
+                                    activity.attachments[0].thumbnailUrl =  message.contentUrl;
+                                };
+
+                                return {
+                                    ...activity,
+                                    text,
+                                    timestamp: created
+                                }
+                            }
+
+                            // Message
+                            if (content) {
+                                // Adaptive card formatting
+                                if (content.includes('"text"') && content.includes('"attachments"') && content.includes('"suggestedActions"')) {
+                                    try {
+                                        const partialActivity = JSON.parse(content);
+                                        return {
+                                            ...activity,
+                                            ...partialActivity,
+                                            timestamp: created
+                                        };
+                                    } catch {
+
+                                    }
+                                }
+                            }
+
+                            return {
+                                ...activity,
+                                text: content,
+                                timestamp: created
+                            };
+                        }
+                    }
+                <\/script>
+                <script>
+                    class TranscriptAdapter {
+                        constructor() {
+                            this.connectionStatus$ = new window.rxjs.BehaviorSubject(0); // Uninitialized
+                            this.activity$ = shareObservable(new Observable((observer) => {
+                                this.activityObserver = observer;
+
+                                this.connectionStatus$.next(1); // Connecting
+                                this.connectionStatus$.next(2); // Online
+
+                                // Retrieve messages
+                                if (messages) {
+                                    setTimeout(() => { // setTimeout is needed due to some WebChat issues
+                                        messages.map((message) => {
+                                            this.activityObserver.next({
+                                                ...Translator.convertTranscriptMessageToActivity(message),
+                                                type: 'message'
+                                            });
+                                        });
+                                    }, 1);
+                                }
+                            }));
+                        }
+                    }
+                <\/script>
+                <style>
+                    body {
+                        margin: 0;
+                    }
+
+                    .message-name {
+                        font-family: Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,sans-serif;
+                        font-weight: 700;
+                        font-size: 10px;
+                    }
+
+                    .message-timestamp {
+                        font-family: Segoe UI,SegoeUI,Helvetica Neue,Helvetica,Arial,sans-serif;
+                        font-weight: 500;
+                        font-size: 10px;
+                    }
+
+                    .avatar {
+                        width: 40px;
+                        height: 40px;
+                        border-radius: 50%;
+                        text-align: center;
+                    }
+
+                    .avatar--bot {
+                        background-color: ${this.agentAvatarBackgroundColor};
+                    }
+
+                    .avatar--user {
+                        background-color: ${this.customerAvatarBackgroundColor};
+                    }
+
+                    .avatar > p {
+                        font-weight: 600;
+                        text-align: center;
+                        line-height: 0.5;
+                        font-family: "Segoe UI", Arial, sans-serif;
+                    }
+
+                    .avatar--bot > p {
+                        color: ${this.agentAvatarFontColor};
+                    }
+
+                    .avatar--user > p {
+                        color: ${this.customerAvatarFontColor};
+                    }
+
+                    .webchat__bubble__content>div.ms_lcw_webchat_adaptive_card {
+                        background-color: #FFF;
+                    }
+
+                    div[class="ac-textBlock"] {
+                        color: #000 !important;
+                    }
+
+                    .ms_lcw_webchat_received_message a:link, .ms_lcw_webchat_received_message a:visited, .ms_lcw_webchat_received_message a:hover, .ms_lcw_webchat_received_message a:active {
+                        color: #FFF;
+                    }
+                <\/style>
+            </head>
+        `;
+    return htmlData;
+  }
+  createBodyElement() {
+    const htmlData = `
+            <body>
+                <script>
+                    if (!navigator.onLine) {
+                        const offlineText = \`${this.networkOfflineMessage}\`;
+                        document.body.innerHTML = offlineText;
+                    }
+
+                    window.addEventListener("online", () => {
+                        document.body.innerHTML = \`${this.networkOnlineMessage} <button onclick="window.location.reload()"> Refresh </button>\`;
+                    });
+                <\/script>
+                <div id="transcript"></div>
+                <script>
+                    const getIconText = (text) => {
+                        if (text) {
+                            const initials = text.split(/\\s/).reduce((response, word) => response += word.slice(0, 1), '');
+                            if (initials.length > 1) {
+                                return initials.substring(0, 2).toUpperCase();
+                            } else {
+                                return text.substring(0, 2).toUpperCase();
+                            }
+                        }
+
+                        return "";
+                    }
+
+                    const activityMiddleware = () => (next) => (...args) => {
+                        const [card] = args;
+
+                        if (card.activity) {
+                            if (card.activity.from && card.activity.from.role === "channel") {
+                                return () => false;
+                            }
+
+                            // Incoming text message
+                            if (card.activity.text && card.activity.from && card.activity.from.role !== "user") {
+                                return (...renderArgs) => (React.createElement(
+                                    'div',
+                                    {className: 'ms_lcw_webchat_received_message'},
+                                    next(...args)(...renderArgs)
+                                ))
+                            }
+                        }
+
+                        return next(...args);
+                    };
+
+                    const activityStatusMiddleware = () => (next) => (...args) => {
+                        const [card] = args;
+                        const {activity} = card;
+
+                        if (activity) {
+                            const {from, timestamp} = activity;
+
+                            const nameElement = React.createElement(
+                                'span',
+                                {className: 'message-name'},
+                                from.name
+                            );
+
+                            const formattedDate = new Date(timestamp);
+                            const formattedTimeString = formattedDate.toLocaleTimeString("en-us", { year: "numeric", month:"numeric", day:"numeric", hour: "2-digit", minute: "2-digit"});
+
+                            const timestampElement = React.createElement(
+                                'span',
+                                {className: 'message-timestamp'},
+                                formattedTimeString
+                            );
+
+                            return from.name && timestamp && React.createElement('span', null, nameElement, ' - ', timestampElement)
+                        }
+
+                        return next(...args);
+                    };
+
+                    const avatarMiddleware = () => (next) => (...args) => {
+                        const [card] = args;
+                        const {fromUser, activity} = card;
+                        const initials = getIconText(activity.from.name);
+
+                        const avatarElement = React.createElement(
+                            "div",
+                            {className: fromUser? "avatar avatar--user": "avatar avatar--bot"},
+                            React.createElement(
+                                "p",
+                                null,
+                                \`\${initials}\`
+                            )
+                        );
+
+                        return avatarElement;
+                    }
+
+                    const attachmentMiddleware = () => (next) => (...args) => {
+                        const [card] = args;
+                        const {activity} = card;
+
+                        if (activity) {
+                            const { activity: { attachments }, attachment } = card;
+
+                            // No attachment
+                            if (!attachments || !attachments.length || !attachment) {
+                                return next(...args);
+                            }
+
+                            let { content, contentType } = attachment || { content: "", contentType: "" };
+
+                            // Adaptive card
+                            if (contentType.startsWith("application/vnd.microsoft.card")) {
+                                const adaptiveCardElement = React.createElement(
+                                    "div",
+                                    {className: 'ms_lcw_webchat_adaptive_card'},
+                                    next(...args)
+                                );
+
+                                return adaptiveCardElement;
+                            }
+                        }
+
+                        return next(...args);
+                    }
+
+                    const createMarkdown = (disableMarkdownMessageFormatting, disableNewLineMarkdownSupport) => {
+                        let markdown;
+                        if (!disableMarkdownMessageFormatting) {
+                            markdown = new window.markdownit(
+                                "default",
+                                {
+                                    html: true,
+                                    linkify: true,
+                                    breaks: (!disableNewLineMarkdownSupport)
+                                }
+                            );
+                        } else {
+                            markdown = new window.markdownit(
+                                "zero",
+                                {
+                                    html: true,
+                                    linkify: true,
+                                    breaks: (!disableNewLineMarkdownSupport)
+                                }
+                            );
+
+                            markdown.enable([
+                                "entity",
+                                "linkify",
+                                "html_block",
+                                "html_inline",
+                                "newline"
+                            ]);
+                        }
+
+                        return markdown;
+                    };
+
+                    const markdown = createMarkdown(disableMarkdownMessageFormatting, disableNewLineMarkdownSupport);
+                    const renderMarkdown = (text) => {
+                        const render = disableNewLineMarkdownSupport? markdown.renderInline.bind(markdown): markdown.render.bind(markdown);
+                        text = render(text);
+                        return text;
+                    };
+
+                    const adapter = new TranscriptAdapter();
+                    const styleOptions = {
+                        hideSendBox: true,
+                        backgroundColor: '${this.transcriptBackgroundColor}',
+                        bubbleBackground: '${this.agentAvatarBackgroundColor}',
+                        bubbleTextColor: '${this.agentAvatarFontColor}',
+                        bubbleBorderRadius: 12,
+                        bubbleNubSize: 1,
+                        bubbleFromUserBackground: '${this.customerAvatarBackgroundColor}',
+                        bubbleFromUserTextColor: '${this.customerAvatarFontColor}',
+                        bubbleFromUserBorderRadius: 12,
+                        bubbleFromUserNubSize: 1,
+                        botAvatarInitials: 'C1',
+                        userAvatarInitials: 'C2'
+                    };
+
+                    window.WebChat.renderWebChat({
+                        directLine: adapter,
+                        styleOptions,
+                        activityMiddleware,
+                        activityStatusMiddleware,
+                        avatarMiddleware,
+                        attachmentMiddleware,
+                        renderMarkdown
+                    },
+                    document.getElementById('transcript'));
+                <\/script>
+            </body>
+        `;
+    return htmlData;
+  }
+  createHTML() {
+    const htmlData = `
+            <html>
+                ${this.createHeadElement()}
+                ${this.createBodyElement()}
+            </html>
+        `;
+    return htmlData;
+  }
+}
+const createChatTranscript = async function (transcript, chatSDK) {
+  let renderAttachments = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  let transcriptOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  // eslint-disable-line @typescript-eslint/no-explicit-any
+  const transcriptMessages = JSON.parse(transcript);
+  const convertBlobToBase64 = async blob => {
+    return new Promise(resolve => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result);
+      reader.readAsDataURL(blob);
+    });
+  };
+  let messages = transcriptMessages;
+  if (renderAttachments) {
+    messages = await Promise.all(transcriptMessages.map(async message => {
+      // eslint-disable-line @typescript-eslint/no-explicit-any
+      const {
+        amsReferences,
+        amsMetadata
+      } = message;
+      if (amsReferences && amsMetadata) {
+        const references = JSON.parse(amsReferences);
+        const metadata = JSON.parse(amsMetadata);
+        const fileMetadata = {
+          id: references[0],
+          type: metadata[0].contentType
+        };
+        const blob = await chatSDK.downloadFileAttachment(fileMetadata);
+        const base64 = await convertBlobToBase64(blob);
+        message.contentUrl = base64;
+      }
+      return message;
+    }));
+  }
+  const options = {
+    ...transcriptOptions,
+    messages
+  };
+  const htmlBuilder = new TranscriptHTMLBuilder(options);
+  const text = htmlBuilder.createHTML();
+  const fileName = `${transcriptOptions.fileName || "transcript"}.html`;
+  createFileAndDownload(fileName, text, "text/html");
+};
+export default createChatTranscript;

package/lib/types/common/Constants.d.ts

@@ -84,6 +84,7 @@ export declare class Constants {
     static readonly SessionCacheSuffix = "session";
     static readonly PopoutCacheSuffix = "popout";
     static readonly LWICheckOnVisibilityTimeout: number;
+    static readonly InitContextParamsRequest = "initContextParamsRequest";
     static readonly InitContextParamsResponse = "initContextParamsResponse";
 }
 export declare const Regex: {
@@ -127,6 +128,7 @@ export declare class HtmlAttributeNames {
     static readonly unorderedList = "UL";
     static readonly div = "div";
     static readonly aTagName = "a";
+    static readonly pTagName = "p";
     static readonly noopenerTag = "noopener";
     static readonly noreferrerTag = "noreferrer";
     static readonly adaptiveCardClassName = "ac-adaptiveCard";

package/lib/types/common/storage/default/defaultClientDataStoreProvider.d.ts

@@ -1,3 +1,4 @@
 import { IContextDataStore } from "../../interfaces/IContextDataStore";
 import { StorageType } from "../../Constants";
+export declare const isCookieAllowed: () => boolean;
 export declare const defaultClientDataStoreProvider: (cacheTtlinMins?: number, storageType?: StorageType) => IContextDataStore;

package/lib/types/common/telemetry/TelemetryConstants.d.ts

@@ -151,6 +151,7 @@ export declare enum TelemetryEvent {
     SetBotAuthProviderHideCard = "SetBotAuthProviderHideCard",
     SetBotAuthProviderDisplayCard = "SetBotAuthProviderDisplayCard",
     SetBotAuthProviderNotFound = "SetBotAuthProviderNotFound",
+    ThirdPartyCookiesBlocked = "ThirdPartyCookiesBlocked",
     ProcessingHTMLTextMiddlewareFailed = "ProcessingHTMLTextMiddlewareFailed",
     ProcessingSanitizationMiddlewareFailed = "ProcessingSanitizationMiddlewareFailed",
     FormatTagsMiddlewareJSONStringifyFailed = "FormatTagsMiddlewareJSONStringifyFailed",

package/lib/types/common/telemetry/definitions/Contracts.d.ts

@@ -5,6 +5,7 @@ export interface BaseContract {
     ConversationId: string;
     ElapsedTimeInMilliseconds?: number;
     OrganizationId: string;
+    OrganizationUrl: string;
     LCWRuntimeId: string;
     CurrentRequestId: string;
     ExceptionDetails?: any;

package/lib/types/common/utils.d.ts

@@ -32,3 +32,4 @@ export declare const getWidgetCacheIdfromProps: (props: any, popoutChat?: boolea
 export declare const debounceLeading: (fn: any, ms?: number) => (...args: any[]) => void;
 export declare const getConversationDetailsCall: (chatSDK: any) => Promise<any>;
 export declare const checkContactIdError: (e: any) => void;
+export declare const createFileAndDownload: (fileName: string, blobData: string, mimeType: string) => void;

package/lib/types/components/draggable/DraggableChatWidget.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+interface IDraggableChatWidgetInternalProps {
+    disabled?: boolean;
+    channel?: string;
+    elementId: string;
+    children: ReactNode;
+}
+declare const DraggableChatWidget: (props: IDraggableChatWidgetInternalProps) => JSX.Element;
+export default DraggableChatWidget;

package/lib/types/components/draggable/DraggableEventEmitter.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+interface IDraggableEventEmitterProps {
+    /**
+     * Unique channel name to send/receive draggable events to prevent event collisions
+     */
+    channel: string;
+    /**
+     * React nodes children
+     */
+    children: ReactNode;
+    /**
+     * HTML element ID of the trigger element to send IDraggableEvent to update the draggable element position
+     */
+    elementId: string;
+    /**
+     * Target window to post IDraggableEvent messages
+     */
+    targetWindow?: Window;
+}
+/**
+ * Trigger component which would send IDraggableEvent to the receiver to update the draggable component position
+ *
+ * @param props IDraggableEventEmitterProps
+ * @returns
+ */
+declare const DraggableEventEmitter: (props: IDraggableEventEmitterProps) => JSX.Element;
+export default DraggableEventEmitter;

package/lib/types/components/draggable/DraggableEventNames.d.ts

@@ -0,0 +1,6 @@
+declare enum DraggableEventNames {
+    DragStart = "DragStart",
+    Dragging = "Dragging",
+    DragEnd = "DragEnd"
+}
+export default DraggableEventNames;

package/lib/types/components/draggable/DraggableEventReceiver.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+import IDraggableEvent from "./IDraggableEvent";
+interface IDraggableEventReceiverProps {
+    /**
+     * Unique channel name to send/receive draggable events to prevent event collisions
+     */
+    channel: string;
+    /**
+     * React nodes children
+     */
+    children: ReactNode;
+    /**
+     * Event handler on receiving draggable events
+     *
+     * @param event Draggable events
+     * @returns
+     */
+    onEvent: (event: IDraggableEvent) => void;
+}
+/**
+ * Component which would listen to DraggableEvent, update the component position or react accordingly.
+ *
+ * @param props IDraggableEventReceiverProps
+ * @returns
+ */
+declare const DraggableEventReceiver: (props: IDraggableEventReceiverProps) => JSX.Element;
+export default DraggableEventReceiver;

package/lib/types/components/draggable/IDraggableElementPosition.d.ts

@@ -0,0 +1,5 @@
+interface IDraggableElementPosition {
+    offsetLeft: number;
+    offsetTop: number;
+}
+export default IDraggableElementPosition;