@microsoft/omnichannel-chat-widget 0.1.0-main.07f52ee

package/README.md

@@ -0,0 +1,235 @@
+# Omnichannel Live Chat Widget UI Components
+
+![Release CI](https://github.com/microsoft/omnichannel-chat-widget/workflows/chat-components-release/badge.svg) [![npm version](https://badge.fury.io/js/%40microsoft%2Fomnichannel-chat-components.svg)](https://badge.fury.io/js/%40microsoft%2Fomnichannel-chat-components.svg) ![npm](https://img.shields.io/npm/dm/@microsoft/omnichannel-chat-components)\
+![Release CI](https://github.com/microsoft/omnichannel-chat-widget/workflows/chat-widget-release/badge.svg) [![npm version](https://badge.fury.io/js/%40microsoft%2Fomnichannel-chat-widget.svg)](https://badge.fury.io/js/%40microsoft%2Fomnichannel-chat-widget.svg) ![npm](https://img.shields.io/npm/dm/@microsoft/omnichannel-chat-widget)
+
+[@microsoft/omnichannel-chat-widget](https://www.npmjs.com/package/@microsoft/omnichannel-chat-widget) is a React-based UI component library which allows you to build your own live chat widget experience using [@microsoft/omnichannel-chat-sdk](https://www.npmjs.com/package/@microsoft/omnichannel-chat-sdk).
+
+## Table of Contents
+
+1. [Introduction](#introduction)
+1. [Installation](#installation)
+1. [Example Usage](#example-usage)
+1. [Components](#components)
+1. [Telemetry](#telemetry)
+1. [Features](#features)
+
+## Introduction
+
+Omnichannel Live Chat Widget UI Components offers a re-usable component-based library to help create a custom chat widget that can be connected to the Dynamics 365 Customer Service experience.
+
+For more information about Live Chat Widget, see [here](https://docs.microsoft.com/en-us/dynamics365/customer-service/set-up-chat-widget).
+
+## Installation
+
+```powershell
+npm i @microsoft/omnichannel-chat-sdk
+npm i @microsoft/omnichannel-chat-widget
+```
+
+or
+
+```powershell
+yarn add @microsoft/omnichannel-chat-sdk
+yarn add @microsoft/omnichannel-chat-widget
+```
+
+The repo also contains the ```@microsoft/omnichannel-chat-components``` package, which is a collection of UI components. The ```@microsoft/omnichannel-chat-widget``` package is an integration of the Chat SDK and the UI components. To install the UI components separately, do
+
+```powershell
+npm i @microsoft/omnichannel-chat-components
+```
+
+or
+
+```powershell
+yarn add @microsoft/omnichannel-chat-components
+```
+
+## Example Usage
+
+The basic example below takes in the ```<LiveChatWidget/>``` component along with the Chat SDK to create a customized Omnichannel chat widget.
+> :warning: The Chat SDK has to be **_initialized_** before being passed in.
+
+```js
+import * as React from "react";
+
+import { LiveChatWidget } from "@microsoft/omnichannel-chat-widget";
+import { OmnichannelChatSDK } from "@microsoft/omnichannel-chat-sdk";
+import ReactDOM from "react-dom";
+//Below version numbers will help us to troubleshoot issues with specific package
+import { version as chatSdkVersion } from "@microsoft/omnichannel-chat-sdk/package.json";
+import { version as chatWidgetVersion } from "../package.json";
+import { version as chatComponentVersion } from "@microsoft/omnichannel-chat-components/package.json";
+
+const render = async () => {
+    const omnichannelConfig = {
+        orgId: "00000000-0000-0000-0000-000000000000", // dummy config
+        orgUrl: "https://www.org-url.com", // dummy config
+        widgetId: "00000000-0000-0000-0000-000000000000" // dummy config
+    };
+    const chatSDK = new OmnichannelChatSDK(omnichannelConfig);
+    await chatSDK.initialize(); // mandatory
+    const chatConfig = await chatSDK.getLiveChatConfig();
+    const liveChatWidgetProps = {
+        styleProps: {
+            generalStyles: {
+                width: "700px",
+                height: "800px"
+            }
+        },
+        headerProps: {
+            controlProps: {
+                hideMinimizeButton: true
+            }
+        },
+        chatSDK: chatSDK, // mandatory
+        chatConfig: chatConfig, // mandatory
+        telemetryConfig: { //mandatory
+            orgId: omnichannelConfig.orgId,
+            orgUrl: omnichannelConfig.orgUrl,
+            appId: omnichannelConfig.widgetId,
+            OCChatSDKVersion: chatSdkVersion,
+            chatComponentVersion: chatComponentVersion,
+            chatWidgetVersion: chatWidgetVersion
+        }
+    };
+
+    ReactDOM.render(
+        <LiveChatWidget {...liveChatWidgetProps}/>,
+        document.getElementById("my-container")
+    );
+};
+
+render();
+```
+
+A sample widget can be found in this repo [here](https://github.com/microsoft/omnichannel-chat-widget/tree/main/chat-widget/sample). To build it, do ```yarn build-sample``` or ```yarn build-sample:dev``` from project root.
+
+## Components
+
+### Stateless UI Components
+
+These are components that are included in the ```@microsoft/omnichannel-chat-components``` package.
+
+| Component |  Usage | Interface |
+| ----- | -------- | ----- |
+| CallingContainerPane | The container for voice and video feature in the chat widget | [ICallingContainerProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/callingcontainer/interfaces/ICallingContainerProps.ts) |
+| ChatButton | The button that appears on the user's portal that is designed to be the entry point for the user to initate chat | [IChatButtonProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/chatbutton/interfaces/IChatButtonProps.ts) |
+| CommandButton | A customizable button component that can be injected to the header and/or footer | [ICommandButtonProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/common/interfaces/ICommandButtonProps.ts)|
+| ConfirmationPane | The default pane used when the Header close button is launched | [IConfirmationPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/confirmationpane/interfaces/IConfirmationPaneProps.ts) |
+| Footer | The bottom container of the chat containing the download transcript, notification sound and email transcript buttons by default. | [IFooterProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/footer/interfaces/IFooterProps.ts) |
+| Header | The top container of the chat containing the default minimize, close and title of the chat widget | [IHeaderProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/header/interfaces/IHeaderProps.ts) |
+| InputValidationPane | A pop-up input pane with validation. In the default widget this is used as part of [EmailTranscriptPane](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-widget/src/components/emailtranscriptpanestateful/interfaces/IEmailTranscriptPaneProps.ts) | [IInputValidationPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/inputvalidationpane/interfaces/IInputValidationPaneProps.ts) |
+| LoadingPane | The default pane used after the chat button is clicked and before the chat loads completely | [ILoadingPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/loadingpane/interfaces/ILoadingPaneProps.ts) |
+| OutOfOfficeHoursPane | The pane that is displayed when the chat is outside of operating hours set on admin side | [IOOOHPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/outofofficehourspane/interfaces/IOOOHPaneProps.ts) |
+| PostChatSurveyPane | The pane that holds the [Customer Voice](https://dynamics.microsoft.com/en-us/customer-voice/overview/) survey which would be used by the customer to input their chat experience, provide user ratings etc. It uses an IFrame to render the survey URL fetched from `getPostChatSurveyContext` call from [OmniChannel ChatSDK](https://github.com/microsoft/omnichannel-chat-sdk#get-postchat-survey). | [IPostChatSurveyPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/postchatsurveypane/interfaces/IPostChatSurveyPaneProps.ts) |
+| PreChatSurveyPane | The pane that holds the form which would be used by the customer to input helpful information for using the Support Chat before starting up the Chat Process. Makes use of [AdaptiveCards](https://adaptivecards.io/) | [IPreChatSurveyPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/prechatsurveypane/interfaces/IPreChatSurveyPaneProps.ts) |
+| ProactiveChatSurveyPane | A pane that holds more information than a normal chat button and can be configured to proactively pop up | [IProactiveChatPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/proactivechatpane/interfaces/IProactiveChatPaneProps.ts) |
+| ReconnectChatPane | The pane that shows up when the customer is re-connecting to the chat to add additional conversation | [IReconnectChatPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/reconnectchatpane/interfaces/IReconnectChatPaneProps.ts) |
+
+> :warning: Because the components extend Microsoft's [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/) components, the base interface for all the ```styleProps``` in the above table is [IStyle](https://github.com/microsoft/fluentui/blob/master/packages/merge-styles/src/IStyle.ts), which extends the [IRawStyleBase](https://docs.microsoft.com/en-us/javascript/api/merge-styles/irawstylebase?view=office-ui-fabric-react-latest) interface, which is the most useful reference.
+
+### Stateful Components
+
+| Component | Default Usage | Interface |
+| ----- | -------- | ----- |
+| LiveChatWidget | The default widget that stitches the UI components with Chat SDK | [ILiveChatWidgetProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-widget/src/components/livechatwidget/interfaces/ILiveChatWidgetProps.ts) |
+
+Some of the interfaces listed in the Stateless table have Stateful counterparts defined in the ```@microsoft/omnichannel-chat-widget``` package. For example, [IConfirmationPaneStatefulProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-widget/src/components/confirmationpanestateful/interfaces/IConfirmationPaneStatefulProps.ts) extends [IConfirmationPaneProps](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-components/src/components/confirmationpane/interfaces/IConfirmationPaneProps.ts) with additional attributes that only makes sense in the stateful context.
+
+### Default Props
+
+For a list of all default props used in the default stateful widget, please see [here](https://github.com/microsoft/omnichannel-chat-widget/blob/main/chat-widget/src/components/livechatwidget/common/defaultProps/dummyDefaultProps.ts). If you want to change a default prop, you need to explicitly set it and parse the object as the argument to ```<LiveChatWidget/>```
+
+### Custom Components
+
+There are two ways to custom the components provided in the library - 1) Replacing components using ComponentOverrides, and 2) Adding custom components in header and footer.
+
+#### ComponentOverrides
+
+Most sub-components and the default panes provided can be overriden. Components have "componentOverrides" as part of props interface, which consists of ReactNodes or strings for each part of the component. For example, the "ProactiveChatPane" component has a close button, and the close button can be overriden by creating a custom react node and setting it to the "closeButton" attribute of "componentOverrides" interface that is part of the props.
+
+```js
+const customButton = (
+    <button style={{
+        background: "green",
+        height: "80px",
+        margin: "30px 15px 0 0",
+        padding: "10px",
+        width: "160px"
+    }}>
+        This is a custom button
+    </button>
+);
+
+const liveChatWidgetProps = {
+    proactiveChatPaneProps: {
+        componentOverrides: {
+            closeButton: customButton
+        };
+    };
+}
+```
+
+#### Custom Components in Header and Footer
+
+Header's and Footer's child components consist of three parts:
+
+1. "leftGroup" - adding child components at the left of the Header/Footer
+1. "middleGroup" - adding child components in the middle of the Header/Footer
+1. "rightGroup" - adding child components at the right of the Header/Footer
+
+By default Header has the header icon and title on the left and minimize and close buttons on the right, and Footer has Download Transcript and Email Transcript buttons on the left and audio notification button on the right. These components can be overriden with [ComponentOverrides](#ComponentOverrides). In addition, other custom child components can be added to both Header and Footer by creating custom react nodes and adding them to attributes "leftGroup", "middleGroup" or "rightGroup" of "controlProps".
+
+```js
+const buttonStyleProps: IButtonStyles = {
+    root: {
+        color: "blue",
+        height: 25,
+        width: 25,
+    }
+};
+
+const calendarIcon: IIconProps = { iconName: "Calendar" };
+const calendarIconButton = <IconButton
+    key="calendarIconButton"
+    iconProps={calendarIcon}
+    styles={buttonStyleProps}
+    title="Calendar">
+</IconButton>;
+
+const emojiIcon: IIconProps = { iconName: "Emoji2" };
+const emojiIconButton = <IconButton
+    key="emojiIconButton"
+    iconProps={emojiIcon}
+    styles={buttonStyleProps}
+    title="Sentiment">
+</IconButton>;
+
+const uploadIcon: IIconProps = { iconName: "Upload" };
+const uploadIconButton = <IconButton
+    key="uploadIconButton"
+    iconProps={uploadIcon}
+    styles={buttonStyleProps}
+    title="Upload">
+</IconButton>;
+
+const customizedFooterProp: IFooterProps = {
+    controlProps: {
+        leftGroup: { children: [uploadIconButton] },
+        middleGroup: { children: [calendarIconButton] },
+        rightGroup: { children: [emojiIconButton] }
+    }
+};
+```
+
+> :pushpin: Note that [WebChat hooks](https://github.com/microsoft/BotFramework-WebChat/blob/main/docs/HOOKS.md) can also be used in any custom components.
+
+## See Also
+
+[Telemetry](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/Telemetry.md)\
+[Create LCW widget with Webpack5 and TypeScript](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/BuildingUsingWebpack5.md)\
+[Omnichannel Features](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/Features.md)\
+[How to Add Visual Regression Tests](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/VisualRegressionTestingGuide.md)\
+[Security](https://github.com/microsoft/omnichannel-chat-widget/blob/main/SECURITY.md)

package/lib/cjs/assets/assets.d.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/assets/icons/archiveIcon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" width="12px" height="12px">
+<path d="M1792 0q27 0 50 10t40 27 28 41 10 50v480q0 45-9 77t-24 58-31 46-31 40-23 44-10 55v992q0 27-10 50t-27 40-41 28-50 10H256V0h1536zM640 128v384h256V128H640zm1024 800q0-31-9-54t-24-44-31-41-31-45-23-58-10-78V128h-512v512H768v128H640V640H512V128H384v1792h384v-128h128v128h768V928zm128-800h-128v480q0 24 4 42t13 33 20 29 27 32q15-17 26-31t20-30 13-33 5-42V128zM640 896h128v128H640V896zm0 256h128v128H640v-128zm0 256h128v128H640v-128zm128 256v128H640v-128h128zm0-768V768h128v128H768zm0 256v-128h128v128H768zm0 256v-128h128v128H768zm0 256v-128h128v128H768z" />
+</svg>

package/lib/cjs/assets/icons/audioIcon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 2048 2048"
+    width="12px"
+    height="12px">
+    <path d="M1792 1408q0 62-29 109t-76 80-104 50-111 17q-54 0-111-17t-103-49-76-80-30-110q0-61 29-109t76-80 104-50 111-17q51 0 100 12t92 39V226L768 450v1214q0 62-29 109t-76 80-104 50-111 17q-54 0-111-17t-103-49-76-80-30-110q0-61 29-109t76-80 104-50 111-17q51 0 100 12t92 39V350L1792 62v1346z" />
+</svg>

package/lib/cjs/assets/icons/blankIcon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 2048 2048"
+    width="12px"
+    height="12px">
+    <path d="M549 0h1243v1755l-293 293H256V293L549 0zm1115 1701V128H603L384 347v1573h1061l219-219z" />
+</svg>

package/lib/cjs/assets/icons/excelIcon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 2048 2048"
+    width="12px"
+    height="12px">
+    <path d="M2048 475v1445q0 27-10 50t-27 40-41 28-50 10H640q-27 0-50-10t-40-27-28-41-10-50v-256H115q-24 0-44-9t-37-25-25-36-9-45V627q0-24 9-44t25-37 36-25 45-9h397V128q0-27 10-50t27-40 41-28 50-10h933q26 0 49 9t42 28l347 347q18 18 27 41t10 50zm-384-256v165h165l-165-165zM261 1424h189q2-4 12-23t25-45 29-55 29-53 23-41 10-17q27 59 60 118t65 116h187l-209-339 205-333H707q-31 57-60 114t-63 112q-29-57-57-113t-57-113H279l199 335-217 337zm379 496h1280V512h-256q-27 0-50-10t-40-27-28-41-10-50V128H640v384h397q24 0 44 9t37 25 25 36 9 45v922q0 24-9 44t-25 37-36 25-45 9H640v256zm640-1024V768h512v128h-512zm0 256v-128h512v128h-512zm0 256v-128h512v128h-512z" />
+</svg>

package/lib/cjs/assets/icons/imageIcon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 2048 2048"
+    width="12px"
+    height="12px">
+    <path d="M256 1920h1536v128H128V0h1115l549 549v91h-640V128H256v1792zM1280 512h293l-293-293v293zm768 256v1024H640V768h1408zM768 896v421l320-319 416 416 160-160 256 256V896H768zm987 768h139l-230-230-69 70 160 160zm-987 0h805l-485-486-320 321v165zm960-512q-26 0-45-19t-19-45q0-26 19-45t45-19q26 0 45 19t19 45q0 26-19 45t-45 19z" />
+</svg>

package/lib/cjs/assets/icons/oneNoteIcon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 2048 2048"
+    width="12px"
+    height="12px">
+    <path d="M1963 128q35 0 60 25t25 60v1622q0 35-25 60t-60 25H597q-35 0-60-25t-25-60v-299H85q-35 0-60-25t-25-60V597q0-35 25-60t60-25h427V213q0-35 25-60t60-25h1366zM389 939l242 420h152V689H635v429L402 689H241v670h148V939zm1531 853v-256h-256v256h256zm0-384v-256h-256v256h256zm0-384V768h-256v256h256zm0-384V256H640v256h299q35 0 60 25t25 60v854q0 35-25 60t-60 25H640v256h896V640h384z" />
+</svg>

package/lib/cjs/assets/icons/pdfIcon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 2048 2048"
+    width="12px"
+    height="12px">
+    <path d="M1920 1664h-128v384H128v-384H0V640h128V0h1243l421 421v219h128v1024zM1408 384h165l-165-165v165zM256 640h1408V512h-384V128H256v512zm1408 1024H256v256h1408v-256zm128-896H128v768h1664V768zM448 896q40 0 75 15t61 41 41 61 15 75q0 40-15 75t-41 61-61 41-75 15h-64v128H256V896h192zm0 256q26 0 45-19t19-45q0-26-19-45t-45-19h-64v128h64zm448-256q53 0 99 20t82 55 55 81 20 100q0 53-20 99t-55 82-81 55-100 20H768V896h128zm0 384q27 0 50-10t40-27 28-41 10-50q0-27-10-50t-27-40-41-28-50-10v256zm384-384h320v128h-192v128h192v128h-192v128h-128V896z" />
+</svg>

package/lib/cjs/assets/icons/powerpointIcon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 2048 2048"
+    width="12px"
+    height="12px">
+    <path d="M2048 475v1445q0 27-10 50t-27 40-41 28-50 10H640q-27 0-50-10t-40-27-28-41-10-50v-256H115q-24 0-44-9t-37-25-25-36-9-45V627q0-24 9-44t25-37 36-25 45-9h397V128q0-27 10-50t27-40 41-28 50-10h933q26 0 49 9t42 28l347 347q18 18 27 41t10 50zm-384-256v165h165l-165-165zM368 752v672h150v-226h100q52 0 97-15t78-46 53-72 20-97q0-56-17-97t-50-67-76-39-97-13H368zm1552 1168V512h-256q-27 0-50-10t-40-27-28-41-10-50V128H640v384h397q24 0 44 9t37 25 25 36 9 45v922q0 24-9 44t-25 37-36 25-45 9H640v256h1280zM1536 640q79 0 149 30t122 82 83 123 30 149h-384V640zm-128 128v384h384q0 80-30 149t-82 122-123 83-149 30q-33 0-65-6t-63-18V792q31-11 63-17t65-7zm-804 300h-86V883h90q47 0 74 20t27 70q0 52-28 73t-77 22z" />
+</svg>

package/lib/cjs/assets/icons/videoIcon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 2048 2048"
+    width="12px"
+    height="12px">
+    <path d="M0 256h2048v1408H0V256zm256 1280v-128H128v128h128zm0-256v-128H128v128h128zm0-256V896H128v128h128zm0-256V640H128v128h128zm0-256V384H128v128h128zm1408 786V384H384v823l411-549 741 878-329-558 137-137 320 457zm256 238v-128h-128v128h128zm0-256v-128h-128v128h128zm0-256V896h-128v128h128zm0-256V640h-128v128h128zm0-256V384h-128v128h128z" />
+</svg>

package/lib/cjs/assets/icons/visioIcon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 2048 2048"
+    width="12px"
+    height="12px">
+    <path d="M2048 475v1445q0 27-10 50t-27 40-41 28-50 10H640q-27 0-50-10t-40-27-28-41-10-50v-256H115q-24 0-44-9t-37-25-25-36-9-45V627q0-24 9-44t25-37 36-25 45-9h397V128q0-27 10-50t27-40 41-28 50-10h933q26 0 49 9t42 28l347 347q18 18 27 41t10 50zm-384-256v165h165l-165-165zM493 1424h163l255-672H745l-147 427q-5 16-10 31t-11 31q-41-123-82-244t-84-245H241l248 662 4 10zm147 496h1280V512h-256q-27 0-50-10t-40-27-28-41-10-50V128H640v384h397q24 0 44 9t37 25 25 36 9 45v922q0 24-9 44t-25 37-36 25-45 9H640v256zm960-1280l192 192-128 128v448h-256v128h-128v-384h128v128h128V960l-128-128 192-192z" />
+</svg>

package/lib/cjs/assets/icons/wordIcon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 2048 2048"
+    width="12px"
+    height="12px">
+    <path d="M2048 475v1445q0 27-10 50t-27 40-41 28-50 10H640q-27 0-50-10t-40-27-28-41-10-50v-256H115q-24 0-44-9t-37-25-25-36-9-45V627q0-24 9-44t25-37 36-25 45-9h397V128q0-27 10-50t27-40 41-28 50-10h933q26 0 49 9t42 28l347 347q18 18 27 41t10 50zm-384-256v165h165l-165-165zM320 1424h161q2-8 9-43t18-83 21-103 22-101 16-76 8-31l7 30q7 30 17 77t23 100 23 103 19 84 10 43h160l148-672H834l-80 438-100-438H502l-96 440-86-440H170l150 672zm320 496h1280V512h-256q-27 0-50-10t-40-27-28-41-10-50V128H640v384h397q24 0 44 9t37 25 25 36 9 45v922q0 24-9 44t-25 37-36 25-45 9H640v256zm640-1024V768h512v128h-512zm0 256v-128h512v128h-512zm0 256v-128h512v128h-512z" />
+</svg>

package/lib/cjs/common/Constants.js

@@ -0,0 +1,305 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WebChatMiddlewareConstants = exports.TranscriptConstants = exports.Regex = exports.MimeTypes = exports.LocaleConstants = exports.HtmlIdNames = exports.HtmlElementSelectors = exports.HtmlClassNames = exports.HtmlAttributeNames = exports.ElementType = exports.Constants = exports.ChatSDKError = void 0;
+
+var _class;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+class Constants {}
+
+exports.Constants = Constants;
+
+_defineProperty(Constants, "systemMessageTag", "system");
+
+_defineProperty(Constants, "userMessageTag", "user");
+
+_defineProperty(Constants, "agentEndConversationMessageTag", "agentendconversation");
+
+_defineProperty(Constants, "receivedMessageClassName", "ms_lcw_webchat_received_message");
+
+_defineProperty(Constants, "sentMessageClassName", "ms_lcw_webchat_sent_message");
+
+_defineProperty(Constants, "webchatChannelId", "webchat");
+
+_defineProperty(Constants, "markdown", "markdown");
+
+_defineProperty(Constants, "actionType", "actionType");
+
+_defineProperty(Constants, "String", "string");
+
+_defineProperty(Constants, "ChatMessagesJson", "chatMessagesJson");
+
+_defineProperty(Constants, "truePascal", "True");
+
+_defineProperty(Constants, "true", "true");
+
+_defineProperty(Constants, "false", "false");
+
+_defineProperty(Constants, "maximumUnreadMessageCount", 99);
+
+_defineProperty(Constants, "widgetStateDataKey", "LcwChatWidgetState");
+
+_defineProperty(Constants, "channelIdKey", "ChannelId-");
+
+_defineProperty(Constants, "ChannelId", "lcw");
+
+_defineProperty(Constants, "CustomerTag", "FromCustomer");
+
+_defineProperty(Constants, "GifContentType", "image/gif");
+
+_defineProperty(Constants, "video", "video");
+
+_defineProperty(Constants, "audio", "audio");
+
+_defineProperty(Constants, "controlsList", "controlsList");
+
+_defineProperty(Constants, "nodownload", "nodownload");
+
+_defineProperty(Constants, "activity", "activity");
+
+_defineProperty(Constants, "payload", "payload");
+
+_defineProperty(Constants, "text", "text");
+
+_defineProperty(Constants, "blank", "_blank");
+
+_defineProperty(Constants, "visitorIdPrefix", "8:");
+
+_defineProperty(Constants, "left", "left");
+
+_defineProperty(Constants, "queuePositionMessageTag", "queueposition");
+
+_defineProperty(Constants, "averageWaitTimeMessageTag", "averagewaittime");
+
+_defineProperty(Constants, "message", "message");
+
+_defineProperty(Constants, "supportedAdaptiveCardContentTypes", ["application/vnd.microsoft.card.adaptive", "application/vnd.microsoft.card.audio", "application/vnd.microsoft.card.hero", "application/vnd.microsoft.card.receipt", "application/vnd.microsoft.card.thumbnail", "application/vnd.microsoft.card.signin", "application/vnd.microsoft.card.oauth"]);
+
+_defineProperty(Constants, "maxUploadFileSize", "500000");
+
+_defineProperty(Constants, "imageRegex", /(\.)(jpeg|jpg|jiff|png|gif|bmp)$/i);
+
+_defineProperty(Constants, "audioMediaRegex", /(\.)(aac|aiff|alac|flac|mp2|mp3|pcm|wav|wma)$/i);
+
+_defineProperty(Constants, "videoMediaRegex", /(\.)(avchd|avi|flv|mpe|mpeg|mpg|mpv|mp4|m4p|m4v|mov|qt|swf|webm|wmv)$/i);
+
+_defineProperty(Constants, "chromeSupportedInlineMediaRegex", /(\.)(aac|mp3|wav|mp4)$/i);
+
+_defineProperty(Constants, "firefoxSupportedInlineMediaRegex", /(\.)(aac|flac|mp3|wav|mp4|mov)$/i);
+
+_defineProperty(Constants, "CallAdded", "callAdded");
+
+_defineProperty(Constants, "LocalVideoStreamAdded", "localVideoStreamAdded");
+
+_defineProperty(Constants, "LocalVideoStreamRemoved", "localVideoStreamRemoved");
+
+_defineProperty(Constants, "RemoteVideoStreamAdded", "remoteVideoStreamAdded");
+
+_defineProperty(Constants, "RemoteVideoStreamRemoved", "remoteVideoStreamRemoved");
+
+_defineProperty(Constants, "CallDisconnected", "callDisconnected");
+
+_defineProperty(Constants, "IncomingCallEnded", "incomingCallEnded");
+
+_defineProperty(Constants, "VoiceVideoInitialize", "voiceVideoInitialize");
+
+_defineProperty(Constants, "VoiceVideoInitializeException", "voiceVideoInitializeOnException");
+
+_defineProperty(Constants, "VoiceVideoLoading", "voiceVideoLoading");
+
+_defineProperty(Constants, "VoiceVideoNotLoaded", "voiceVideoNotLoaded");
+
+_defineProperty(Constants, "VoiceVideoLoadingException", "voiceVideoLoadingOnException");
+
+_defineProperty(Constants, "VoiceVideoAcceptCallException", "voiceVideoAcceptCallOnException");
+
+_defineProperty(Constants, "VoiceVideoAcceptCallWithVideoException", "voiceVideoAcceptCallWithVideoException");
+
+_defineProperty(Constants, "defaultDownloadTranscriptError", "Download transcript failed.");
+
+_defineProperty(Constants, "ProactiveChatInviteTimeoutInMs", 60000);
+
+_defineProperty(Constants, "InputSubmit", "InputSubmit");
+
+_defineProperty(Constants, "ReconnectIdAttributeName", "oc.reconnectid");
+
+_defineProperty(Constants, "redirectPageRequest", "redirectPageRequest");
+
+_defineProperty(Constants, "LiveChatWidget", "LiveChatWidgetNew");
+
+_defineProperty(Constants, "GuidPattern", "xx-x-4m-ym-xxx");
+
+_defineProperty(Constants, "Default", "default");
+
+_defineProperty(Constants, "Zero", "zero");
+
+_defineProperty(Constants, "Title", "title");
+
+_defineProperty(Constants, "Target", "target");
+
+_defineProperty(Constants, "Blank", "_blank");
+
+_defineProperty(Constants, "TargetRelationship", "rel");
+
+_defineProperty(Constants, "TargetRelationshipAttributes", "noopener noreferrer");
+
+_defineProperty(Constants, "OpenLinkIconCssClass", "webchat__markdown__external-link-icon");
+
+_defineProperty(Constants, "internetConnectionTestUrl", "https://ocsdk-prod.azureedge.net/public/connecttest.txt");
+
+_defineProperty(Constants, "internetConnectionTestUrlText", "Omnichannel Connect Test");
+
+const Regex = (_class = class Regex {}, _defineProperty(_class, "EmailRegex", "(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z0-9-]*[a-zA-Z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])"), _class);
+exports.Regex = Regex;
+
+class HtmlIdNames {}
+
+exports.HtmlIdNames = HtmlIdNames;
+
+_defineProperty(HtmlIdNames, "MSLiveChatWidget", "MSLiveChatWidget");
+
+class HtmlClassNames {}
+
+exports.HtmlClassNames = HtmlClassNames;
+
+_defineProperty(HtmlClassNames, "webChatBannerCloseButton", "webchat__toast__dismissButton");
+
+_defineProperty(HtmlClassNames, "webChatBannerExpandButton", "webchat__toaster__expandIcon");
+
+class HtmlElementSelectors {}
+
+exports.HtmlElementSelectors = HtmlElementSelectors;
+
+_defineProperty(HtmlElementSelectors, "sendBoxSelector", "textarea[data-id=\"webchat-sendbox-input\"]");
+
+class HtmlAttributeNames {}
+
+exports.HtmlAttributeNames = HtmlAttributeNames;
+
+_defineProperty(HtmlAttributeNames, "role", "role");
+
+_defineProperty(HtmlAttributeNames, "navigation", "navigation");
+
+_defineProperty(HtmlAttributeNames, "ariaLabel", "aria-label");
+
+_defineProperty(HtmlAttributeNames, "ariaLive", "aria-live");
+
+_defineProperty(HtmlAttributeNames, "ariaDisabled", "aria-disabled");
+
+_defineProperty(HtmlAttributeNames, "form", "form");
+
+_defineProperty(HtmlAttributeNames, "ariaLabelledby", "aria-labelledby");
+
+_defineProperty(HtmlAttributeNames, "tabindex", "tabindex");
+
+_defineProperty(HtmlAttributeNames, "ariaRequired", "aria-required");
+
+_defineProperty(HtmlAttributeNames, "ariaDesribedby", "aria-describedby");
+
+_defineProperty(HtmlAttributeNames, "ariaHidden", "aria-hidden");
+
+_defineProperty(HtmlAttributeNames, "disabled", "disabled");
+
+_defineProperty(HtmlAttributeNames, "hidden", "hidden");
+
+_defineProperty(HtmlAttributeNames, "download", "download");
+
+_defineProperty(HtmlAttributeNames, "href", "href");
+
+_defineProperty(HtmlAttributeNames, "region", "region");
+
+_defineProperty(HtmlAttributeNames, "button", "button");
+
+_defineProperty(HtmlAttributeNames, "input", "Input");
+
+_defineProperty(HtmlAttributeNames, "style", "style");
+
+_defineProperty(HtmlAttributeNames, "head", "head");
+
+_defineProperty(HtmlAttributeNames, "type", "type");
+
+_defineProperty(HtmlAttributeNames, "csstext", "text/css");
+
+_defineProperty(HtmlAttributeNames, "listItem", "LI");
+
+_defineProperty(HtmlAttributeNames, "unorderedList", "UL");
+
+_defineProperty(HtmlAttributeNames, "div", "div");
+
+_defineProperty(HtmlAttributeNames, "aTagName", "a");
+
+_defineProperty(HtmlAttributeNames, "noopenerTag", "noopener");
+
+_defineProperty(HtmlAttributeNames, "noreferrerTag", "noreferrer");
+
+_defineProperty(HtmlAttributeNames, "adaptiveCardClassName", "ac-adaptiveCard");
+
+_defineProperty(HtmlAttributeNames, "adaptiveCardTextBlockClassName", "ac-textBlock");
+
+_defineProperty(HtmlAttributeNames, "adaptiveCardToggleInputClassName", "ac-toggleInput");
+
+class WebChatMiddlewareConstants {}
+
+exports.WebChatMiddlewareConstants = WebChatMiddlewareConstants;
+
+_defineProperty(WebChatMiddlewareConstants, "nextVisibleActivity", "nextVisibleActivity");
+
+_defineProperty(WebChatMiddlewareConstants, "timeBetweenTimestampGroups", 300000);
+
+_defineProperty(WebChatMiddlewareConstants, "maxTextLength", 6000);
+
+_defineProperty(WebChatMiddlewareConstants, "adaptiveCard", "AdaptiveCard");
+
+class MimeTypes {}
+
+exports.MimeTypes = MimeTypes;
+
+_defineProperty(MimeTypes, "UnknownFileType", "application/octet-stream");
+
+class LocaleConstants {}
+
+exports.LocaleConstants = LocaleConstants;
+
+_defineProperty(LocaleConstants, "RTL_LOCALES", ["1025", "1037"]);
+
+let ElementType;
+exports.ElementType = ElementType;
+
+(function (ElementType) {
+  ElementType["CallingContainerSDK"] = "CallingContainerSDK";
+})(ElementType || (exports.ElementType = ElementType = {}));
+
+let ChatSDKError;
+exports.ChatSDKError = ChatSDKError;
+
+(function (ChatSDKError) {
+  ChatSDKError["WidgetUseOutsideOperatingHour"] = "WidgetUseOutsideOperatingHour";
+})(ChatSDKError || (exports.ChatSDKError = ChatSDKError = {}));
+
+class TranscriptConstants {}
+
+exports.TranscriptConstants = TranscriptConstants;
+
+_defineProperty(TranscriptConstants, "ChatTranscriptsBodyColor", "#F5F5F5");
+
+_defineProperty(TranscriptConstants, "TranscriptMessageEmojiMessageType", "http://schema.skype.com/emoji");
+
+_defineProperty(TranscriptConstants, "ChatTranscriptDownloadFile", "ChatTranscripts.html");
+
+_defineProperty(TranscriptConstants, "DefaultFileAttachmentName", "Untitled.txt");
+
+_defineProperty(TranscriptConstants, "CustomerDialogColor", "#E8E8E8");
+
+_defineProperty(TranscriptConstants, "CustomerFontColor", "black");
+
+_defineProperty(TranscriptConstants, "AdaptiveCardType", "adaptivecard");
+
+_defineProperty(TranscriptConstants, "InternalMode", "internal");
+
+_defineProperty(TranscriptConstants, "AgentDialogColor", "#2266E3");
+
+_defineProperty(TranscriptConstants, "AgentFontColor", "white");

package/lib/cjs/common/KeyCodes.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KeyCodes = void 0;
+
+var _class;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const KeyCodes = (_class = class KeyCodes {}, _defineProperty(_class, "ENTER", "Enter"), _defineProperty(_class, "TAB", "Tab"), _class);
+exports.KeyCodes = KeyCodes;