@microsoft/omnichannel-chat-components 1.2.0-main.ba244dd → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +138 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,138 @@
|
|
|
1
|
-
|
|
1
|
+
# Microsoft Omnichannel Chat Components
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@microsoft/omnichannel-chat-components)
|
|
4
|
+
[](https://www.npmjs.com/package/@microsoft/omnichannel-chat-components)
|
|
5
|
+
[](https://github.com/microsoft/omnichannel-chat-widget/actions/workflows/npm-release.yml)
|
|
6
|
+
|
|
7
|
+
`@microsoft/omnichannel-chat-components` provides the stateless React controls for a Dynamics 365 customer chat experience.
|
|
8
|
+
|
|
9
|
+
Use this package when your application owns the chat state and needs the Microsoft user interface controls.
|
|
10
|
+
|
|
11
|
+
Use [`@microsoft/omnichannel-chat-widget`](https://www.npmjs.com/package/@microsoft/omnichannel-chat-widget) for an integrated widget that connects these controls to the Chat SDK.
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
This release builds and tests with React 18. Install React and ReactDOM in the application.
|
|
16
|
+
|
|
17
|
+
For a production application, pin the exact stable package version:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install --save-exact @microsoft/omnichannel-chat-components@1.2.0 react@18 react-dom@18
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
You can also use Yarn:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
yarn add --exact @microsoft/omnichannel-chat-components@1.2.0 react@18 react-dom@18
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
The package installs Fluent UI version 8 and its other runtime dependencies.
|
|
30
|
+
|
|
31
|
+
## Basic use
|
|
32
|
+
|
|
33
|
+
Initialize the broadcast service one time before you render controls that publish events.
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
import * as React from "react";
|
|
37
|
+
import { createRoot } from "react-dom/client";
|
|
38
|
+
import {
|
|
39
|
+
BroadcastServiceInitialize,
|
|
40
|
+
ChatButton
|
|
41
|
+
} from "@microsoft/omnichannel-chat-components";
|
|
42
|
+
|
|
43
|
+
BroadcastServiceInitialize("customer-chat");
|
|
44
|
+
|
|
45
|
+
function App(): React.ReactElement {
|
|
46
|
+
return (
|
|
47
|
+
<ChatButton
|
|
48
|
+
controlProps={{
|
|
49
|
+
ariaLabel: "Start a chat",
|
|
50
|
+
titleText: "Chat with us",
|
|
51
|
+
subtitleText: "We are online",
|
|
52
|
+
onClick: () => {
|
|
53
|
+
console.log("Start the chat");
|
|
54
|
+
}
|
|
55
|
+
}}
|
|
56
|
+
/>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
createRoot(document.getElementById("root")!).render(<App />);
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
The controls do not start or manage a chat session. Connect their callbacks and broadcast events to your application state.
|
|
64
|
+
|
|
65
|
+
## Exported API
|
|
66
|
+
|
|
67
|
+
The package exports these control groups:
|
|
68
|
+
|
|
69
|
+
| Group | Exports |
|
|
70
|
+
| --- | --- |
|
|
71
|
+
| Chat shell | `Header`, `Footer`, `ChatButton`, `NotificationPane` |
|
|
72
|
+
| Status and forms | `ConfirmationPane`, `InputValidationPane`, `LoadingPane`, `OutOfOfficeHoursPane` |
|
|
73
|
+
| Surveys and proactive chat | `PreChatSurveyPane`, `PostChatSurveyPane`, `ProactiveChatPane`, `ReconnectChatPane` |
|
|
74
|
+
| Calling | `CallingContainer`, `CurrentCall`, `IncomingCall`, `Timer` |
|
|
75
|
+
| Services and utilities | `BroadcastService`, `BroadcastServiceInitialize`, `ElementType`, `encodeComponentString`, `decodeComponentString` |
|
|
76
|
+
| Assets | The package exports the default chat, calling, notification, transcript, and status icons. |
|
|
77
|
+
|
|
78
|
+
Read the [component guide](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/customizations/getstarted.md) for control properties and style examples.
|
|
79
|
+
|
|
80
|
+
The root [component table](https://github.com/microsoft/omnichannel-chat-widget#stateless-ui-components) links each control to its TypeScript interface.
|
|
81
|
+
|
|
82
|
+
Run Storybook locally to examine the available states:
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
yarn install --frozen-lockfile
|
|
86
|
+
yarn storybook
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Package formats
|
|
90
|
+
|
|
91
|
+
The npm package contains these outputs:
|
|
92
|
+
|
|
93
|
+
| Consumer | Entry |
|
|
94
|
+
| --- | --- |
|
|
95
|
+
| ECMAScript modules | `lib/esm/index.js` |
|
|
96
|
+
| CommonJS | `lib/cjs/index.js` |
|
|
97
|
+
| TypeScript declarations | `lib/types/index.d.ts` |
|
|
98
|
+
|
|
99
|
+
Use the package root import. The `exports` map selects the correct JavaScript entry.
|
|
100
|
+
|
|
101
|
+
## Accessibility
|
|
102
|
+
|
|
103
|
+
The controls use semantic HTML, ARIA attributes, focus management, and screen-reader announcements.
|
|
104
|
+
|
|
105
|
+
The repository includes unit, visual, axe, and Microsoft Accessibility Insights coverage. Automated scans do not replace manual assistive-technology tests.
|
|
106
|
+
|
|
107
|
+
## Development
|
|
108
|
+
|
|
109
|
+
The repository uses the Node.js version in [`.nvmrc`](https://github.com/microsoft/omnichannel-chat-widget/blob/main/.nvmrc) and Yarn 1.
|
|
110
|
+
|
|
111
|
+
Run these commands from `chat-components`:
|
|
112
|
+
|
|
113
|
+
```bash
|
|
114
|
+
yarn install --frozen-lockfile
|
|
115
|
+
yarn build
|
|
116
|
+
yarn test:unit
|
|
117
|
+
yarn test:cjs
|
|
118
|
+
yarn build-storybook
|
|
119
|
+
yarn test:visual --forceExit
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## Releases
|
|
123
|
+
|
|
124
|
+
- Read the [Chat Components changelog](https://github.com/microsoft/omnichannel-chat-widget/blob/main/CHANGE_LOG.md#chat-components).
|
|
125
|
+
- Read the [official release procedure](https://github.com/microsoft/omnichannel-chat-widget/blob/main/docs/RELEASING.md).
|
|
126
|
+
- Find published packages on [npm](https://www.npmjs.com/package/@microsoft/omnichannel-chat-components).
|
|
127
|
+
- Find official tags and release assets on [GitHub Releases](https://github.com/microsoft/omnichannel-chat-widget/releases).
|
|
128
|
+
|
|
129
|
+
Official Chat Components tags use `c-v<version>`. Starting with `c-v1.2.0`, each tag publishes the same tarball to npm and GitHub.
|
|
130
|
+
|
|
131
|
+
## Support and security
|
|
132
|
+
|
|
133
|
+
- Use [GitHub Issues](https://github.com/microsoft/omnichannel-chat-widget/issues) for reproducible product defects.
|
|
134
|
+
- Read [SUPPORT.md](https://github.com/microsoft/omnichannel-chat-widget/blob/main/SUPPORT.md) before you request product help.
|
|
135
|
+
- Report vulnerabilities through [SECURITY.md](https://github.com/microsoft/omnichannel-chat-widget/blob/main/SECURITY.md).
|
|
136
|
+
- Obey the [Microsoft Open Source Code of Conduct](https://github.com/microsoft/omnichannel-chat-widget/blob/main/CODE_OF_CONDUCT.md).
|
|
137
|
+
|
|
138
|
+
This project uses the [MIT License](https://github.com/microsoft/omnichannel-chat-widget/blob/main/LICENSE).
|