@2uinc/frontend-component-xpert-chatbot 1.0.5
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 +117 -0
- package/dist/lib/index.min.js +9836 -0
- package/package.json +105 -0
package/README.md
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
# xpert-chatbot-frontend
|
|
2
|
+
|
|
3
|
+
## Purpose
|
|
4
|
+
|
|
5
|
+
The Xpert Chatbot Frontend component library purpose is to:
|
|
6
|
+
1. Generate chatbot code bundle (js, css, etc) for clients to import.
|
|
7
|
+
2. Centralize code to keep ux & code quality uniform and high
|
|
8
|
+
3. Demonstrate chatbot functionality
|
|
9
|
+
|
|
10
|
+
***Keep in mind this does not expose individual parts of the Chatbot as that would increase maintenance.***
|
|
11
|
+
|
|
12
|
+
## Code Owners
|
|
13
|
+
|
|
14
|
+
See `#project-xpert-platform` via Slack for more info.
|
|
15
|
+
|
|
16
|
+
## Places it's currently deployed
|
|
17
|
+
See `src/client_configurations` folder
|
|
18
|
+
|
|
19
|
+
## Features included
|
|
20
|
+
- Configurable ux, logos, disclaimer, privacy policy, prompts and chat api endpoint
|
|
21
|
+
- Chatbot launch button
|
|
22
|
+
- Proactive message to enage visitors
|
|
23
|
+
- Chatbot popup screen for disclaimer and main conversation
|
|
24
|
+
- Network error message if network or api is down
|
|
25
|
+
- Mobile & desktop responsive design
|
|
26
|
+
|
|
27
|
+
## Tech stack
|
|
28
|
+
|
|
29
|
+
This project was created with the following:
|
|
30
|
+
- [React](https://react.dev/)
|
|
31
|
+
- [Vite](https://vitejs.dev/)
|
|
32
|
+
|
|
33
|
+
See `package.json` for more info.
|
|
34
|
+
|
|
35
|
+
## To view component library demo and develop (entry point `src/demo.jsx`):
|
|
36
|
+
1. Install dependencies:
|
|
37
|
+
```
|
|
38
|
+
npm i
|
|
39
|
+
```
|
|
40
|
+
2. Start app:
|
|
41
|
+
```
|
|
42
|
+
npm start
|
|
43
|
+
```
|
|
44
|
+
3. Go to `http://localhost:5173/`
|
|
45
|
+
4. Verify all chatbot ux and functionality work as expected since changes can affect them all
|
|
46
|
+
5. Write automated tests to avoid too much manual verification and to make sure existing functionality isn't broken.
|
|
47
|
+
|
|
48
|
+
`
|
|
49
|
+
<add picture here>
|
|
50
|
+
<add video here>
|
|
51
|
+
`
|
|
52
|
+
|
|
53
|
+
## To verify components within `/dist` folder via script tag:
|
|
54
|
+
1. Install serve
|
|
55
|
+
```
|
|
56
|
+
npm i -g serve
|
|
57
|
+
```
|
|
58
|
+
2. Serve `/dist` folder
|
|
59
|
+
```
|
|
60
|
+
serve -s dist
|
|
61
|
+
```
|
|
62
|
+
3. Configure chatbot by providing `window.XpertChatbotFrontend.xpertKey` or `window.XpertChatbotFrontend.configurations` within `dist/index.html`. Client configurations are located in `src/client_configurations`.
|
|
63
|
+
4. Go to `http://localhost:3000/` and verify chatbot works as expected.
|
|
64
|
+
5. Segment.io `window.analytics.track` function must also be loaded globally for chatbot to appear.
|
|
65
|
+
6. If the chatbot is hidden by a test cookie, perform the following:
|
|
66
|
+
- Right click page and select Inspect
|
|
67
|
+
- Select Console tab
|
|
68
|
+
- Replace following `xpert-key` placeholder with `xpertKey` found in `src/client_configurations`
|
|
69
|
+
- Execute: `document.cookie = "xpert-key-test=1; expires=Thu, 23 Dec 2025 12:00:00 UTC; path=/";`
|
|
70
|
+
- Refresh the page
|
|
71
|
+
7. Verify in `dist` folder, js file size is below 400kb and css is below 50 kb uncompressed.
|
|
72
|
+
8. These verifications are essential to making sure it integrates with external clients ie Wordpress
|
|
73
|
+
|
|
74
|
+
## To run linter:
|
|
75
|
+
|
|
76
|
+
```
|
|
77
|
+
npm run lint
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## To run tests:
|
|
81
|
+
|
|
82
|
+
```
|
|
83
|
+
npm test
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## Deployment
|
|
87
|
+
We deploy an NPM package to npmjs.org with the name `@2uinc/frontend-component-xpert-chatbot`
|
|
88
|
+
To install the package, run the following command:
|
|
89
|
+
|
|
90
|
+
```
|
|
91
|
+
$ npm install @2uinc/frontend-component-xpert-chatbot
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
For clients that don't have React, there's the option to pull the resources from CDN.
|
|
95
|
+
```
|
|
96
|
+
<head>
|
|
97
|
+
<link rel="stylesheet href="https://chatbot-frontend.prod.ai.2u.com/@latest/index.css.js" />
|
|
98
|
+
|
|
99
|
+
<script type="importmap">
|
|
100
|
+
{
|
|
101
|
+
"imports": {
|
|
102
|
+
"react": "https://cdn.jsdelivr.net/npm/react@17.0.2/+esm",
|
|
103
|
+
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/+esm"
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
</script>
|
|
107
|
+
</head>
|
|
108
|
+
<body>
|
|
109
|
+
<div id="xpert-chatbot-container"></div>
|
|
110
|
+
...
|
|
111
|
+
<script type="module" defer src="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.js"></script>
|
|
112
|
+
</body>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
##### NOTE:
|
|
116
|
+
Make sure you have a div with the ID `xpert-chatbot-container` for React to render into.
|
|
117
|
+
|