@2uinc/frontend-component-xpert-chatbot 1.10.0 → 1.10.1
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 +30 -128
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,141 +1,43 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
|
+
<h1 align="center">Xpert Chatbot Frontend (XCF) 🤖</h1>
|
|
3
|
+
<strong align="center">
|
|
4
|
+
Increase engagement and revenue with our AI chatbot component.
|
|
5
|
+
</strong>
|
|
6
|
+
<p>
|
|
7
|
+
This project allows teams to
|
|
8
|
+
ship a chatbot to production faster and on a stable foundation based
|
|
9
|
+
on the experience of the <a href="https://app.slack.com/client/T02MT3PP1/C04TBCSHGDB">Xpert Platform Team</a>.
|
|
10
|
+
</p>
|
|
11
|
+
</div>
|
|
2
12
|
|
|
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
|
-
|
|
18
|
-
See `src/client_configurations` folder
|
|
19
|
-
|
|
20
|
-
## Features included
|
|
21
|
-
|
|
22
|
-
- Configurable ux, logos, disclaimer, privacy policy, prompts and chat api endpoint
|
|
23
|
-
- Chatbot launch button
|
|
24
|
-
- Proactive message to enage visitors
|
|
25
|
-
- Chatbot popup screen for main conversation
|
|
26
|
-
- Network error message if network or api is down
|
|
27
|
-
- Mobile & desktop responsive design
|
|
28
|
-
|
|
29
|
-
## Tech stack
|
|
30
|
-
|
|
31
|
-
This project was created with the following:
|
|
32
|
-
- [React](https://react.dev/)
|
|
33
|
-
- [Vite](https://vitejs.dev/)
|
|
34
|
-
|
|
35
|
-
See `package.json` for more info.
|
|
36
|
-
|
|
37
|
-
## To view component library demo and develop (entry point `src/demo.jsx`):
|
|
38
|
-
|
|
39
|
-
1. Switch the the correct version of node (install nvm if necessary):
|
|
40
|
-
```
|
|
41
|
-
nvm use
|
|
42
13
|
```
|
|
43
|
-
2. Install dependencies:
|
|
44
|
-
```
|
|
45
|
-
npm i
|
|
46
|
-
```
|
|
47
|
-
3. Start app:
|
|
48
|
-
```
|
|
49
|
-
npm start
|
|
50
|
-
```
|
|
51
|
-
4. Go to `http://localhost:5173/`
|
|
52
|
-
5. Verify all chatbot ux and functionality work as expected since changes can affect them all
|
|
53
|
-
6. Write automated tests to avoid too much manual verification and to make sure existing functionality isn't broken.
|
|
54
|
-
|
|
55
|
-
`
|
|
56
|
-
<add picture here>
|
|
57
|
-
<add video here>
|
|
58
|
-
`
|
|
59
|
-
|
|
60
|
-
## To verify components within `/dist` folder via script tag:
|
|
61
|
-
|
|
62
|
-
1. Install serve
|
|
63
|
-
```
|
|
64
|
-
npm i -g serve
|
|
65
|
-
```
|
|
66
|
-
2. Build && Serve `/dist` folder
|
|
67
|
-
```
|
|
68
|
-
npm run build && serve -s dist
|
|
69
|
-
```
|
|
70
|
-
3. Configure chatbot by providing `window.XpertChatbotFrontend.xpertKey` or `window.XpertChatbotFrontend.configurations` within `dist/index.html`. Client configurations are located in `src/client_configurations`.
|
|
71
|
-
4. Go to `http://localhost:3000/` and verify chatbot works as expected.
|
|
72
|
-
5. Segment.io `window.analytics.track` function must also be loaded globally for chatbot to appear.
|
|
73
|
-
6. If the chatbot is hidden by a test cookie, perform the following:
|
|
74
|
-
- Right click page and select Inspect
|
|
75
|
-
- Select Console tab
|
|
76
|
-
- Replace following `xpert-key` placeholder with `xpertKey` found in `src/client_configurations`
|
|
77
|
-
- Execute: `document.cookie = "xpert-key-test=1; expires=Thu, 23 Dec 2025 12:00:00 UTC; path=/";`
|
|
78
|
-
- Refresh the page
|
|
79
|
-
7. Verify in `dist` folder, js file size is below 400kb and css is below 50 kb uncompressed.
|
|
80
|
-
8. These verifications are essential to making sure it integrates with external clients ie Wordpress
|
|
81
|
-
|
|
82
|
-
## To run linter:
|
|
83
|
-
|
|
84
|
-
```
|
|
85
|
-
npm run lint
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
## To run tests:
|
|
89
|
-
|
|
90
|
-
```
|
|
91
|
-
npm test
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
## Deployment
|
|
95
|
-
|
|
96
|
-
We deploy an NPM package to npmjs.org with the name `@2uinc/frontend-component-xpert-chatbot`
|
|
97
|
-
To install the package, run the following command:
|
|
98
|
-
|
|
99
|
-
```
|
|
100
|
-
$ npm install @2uinc/frontend-component-xpert-chatbot
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
Also add to page head element:
|
|
104
|
-
|
|
105
|
-
```
|
|
106
|
-
<link rel="stylesheet" href="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.css" />
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
For clients that don't have React, there's the option to pull the resources from CDN.
|
|
110
|
-
|
|
111
|
-
### CDN
|
|
112
|
-
|
|
113
|
-
A CDN deployment occurs after the NPM deployment for clients that don't have React. See `publishCmd` in package.json.
|
|
114
|
-
|
|
115
|
-
```
|
|
116
|
-
<head>
|
|
117
|
-
<link rel="stylesheet" href="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.css" />
|
|
118
|
-
|
|
119
|
-
</head>
|
|
120
14
|
<body>
|
|
15
|
+
<script>
|
|
16
|
+
window.XpertChatbotFrontend = {
|
|
17
|
+
xpertKey: 'test-chatbot',
|
|
18
|
+
};
|
|
19
|
+
</script>
|
|
20
|
+
<head>
|
|
21
|
+
<link rel="stylesheet" href="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.css" />
|
|
22
|
+
</head>
|
|
121
23
|
<script defer src="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.js"></script>
|
|
122
24
|
</body>
|
|
123
25
|
```
|
|
124
26
|
|
|
27
|
+
<img src="docs/assets/edx.png" alt="edx Marketplace launch button" width="250">
|
|
28
|
+
<img src="docs/assets/edx-screen.png" alt="edx Marketplace screen" width="250">
|
|
125
29
|
|
|
30
|
+
[Please check out February 6, 2024 presentation](https://docs.google.com/presentation/d/1-ucC8vn2cO11QzOuSRpA90UJw-pp-Gs6L98Ft86fPuk/edit#slide=id.g2b1f78010d1_0_260)
|
|
126
31
|
|
|
127
|
-
##
|
|
128
|
-
|
|
129
|
-
To create a beta release for testing, make a PR to the `beta` branch. Once the PR is merged, a new beta release will be created and published to npmjs.org with the name:
|
|
32
|
+
## Docs
|
|
130
33
|
|
|
131
|
-
|
|
132
|
-
@2uinc/frontend-component-xpert-chatbot@v{tag-name}
|
|
133
|
-
```
|
|
34
|
+
[Please read the docs](./docs).
|
|
134
35
|
|
|
135
|
-
|
|
36
|
+
## Support
|
|
136
37
|
|
|
137
|
-
|
|
138
|
-
https://
|
|
139
|
-
https://
|
|
140
|
-
|
|
38
|
+
- 🆘 Join the
|
|
39
|
+
[discussion or share ideas on Slack](https://app.slack.com/client/T02MT3PP1/C04TBCSHGDB) `#project-xpert-platform`.
|
|
40
|
+
- 🐛 Open a [GitHub issue](https://github.com/2uinc/frontend-component-xpert-chatbot/issues) to
|
|
41
|
+
report a bug.
|
|
141
42
|
|
|
43
|
+
## Thanks!
|