@2uinc/frontend-component-xpert-chatbot NPM

xpert-chatbot-frontend

Purpose

The Xpert Chatbot Frontend component library purpose is to: 1. Generate chatbot code bundle (js, css, etc) for clients to import. 2. Centralize code to keep ux & code quality uniform and high 3. Demonstrate chatbot functionality

Keep in mind this does not expose individual parts of the Chatbot as that would increase maintenance.

Code Owners

See #project-xpert-platform via Slack for more info.

Places it's currently deployed

See src/client_configurations folder

Features included

Configurable ux, logos, disclaimer, privacy policy, prompts and chat api endpoint
Chatbot launch button
Proactive message to enage visitors
Chatbot popup screen for main conversation
Network error message if network or api is down
Mobile & desktop responsive design

Tech stack

This project was created with the following:

See package.json for more info.

To view component library demo and develop (entry point `src/demo.jsx`):

Switch the the correct version of node (install nvm if necessary):

nvm use

Install dependencies:

npm i

Start app:

npm start

Go to http://localhost:5173/
Verify all chatbot ux and functionality work as expected since changes can affect them all
Write automated tests to avoid too much manual verification and to make sure existing functionality isn't broken.

<add picture here> <add video here>

To verify components within `/dist` folder via script tag:

Install serve

npm i -g serve

Build && Serve /dist folder

npm run build && serve -s dist

Configure chatbot by providing window.XpertChatbotFrontend.xpertKey or window.XpertChatbotFrontend.configurations within dist/index.html. Client configurations are located in src/client_configurations.
Go to http://localhost:3000/ and verify chatbot works as expected.
Segment.io window.analytics.track function must also be loaded globally for chatbot to appear.
If the chatbot is hidden by a test cookie, perform the following:

Right click page and select Inspect
Select Console tab
Replace following xpert-key placeholder with xpertKey found in src/client_configurations
Execute: document.cookie = "xpert-key-test=1; expires=Thu, 23 Dec 2025 12:00:00 UTC; path=/";
Refresh the page

Verify in dist folder, js file size is below 400kb and css is below 50 kb uncompressed.
These verifications are essential to making sure it integrates with external clients ie Wordpress

To run linter:

npm run lint

To run tests:

npm test

Deployment

We deploy an NPM package to npmjs.org with the name @2uinc/frontend-component-xpert-chatbot To install the package, run the following command:

$ npm install @2uinc/frontend-component-xpert-chatbot

Also add to page head element:

<link rel="stylesheet" href="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.css" />

For clients that don't have React, there's the option to pull the resources from CDN.

CDN

A CDN deployment occurs after the NPM deployment for clients that don't have React. See publishCmd in package.json.

<head>
  <link rel="stylesheet" href="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.css" />

</head>
<body>
  <script defer src="https://chatbot-frontend.prod.ai.2u.com/@latest/index.min.js"></script>
</body>

Beta releases

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:

@2uinc/frontend-component-xpert-chatbot@v{tag-name}

A CDN release will also be created and published to:

https://chatbot-frontend.prod.ai.2u.com/@{tag-name}/index.min.js
https://chatbot-frontend.prod.ai.2u.com/@{tag-name}/index.min.css

classnames focus-trap-react js-cookie lodash.merge react-markdown

@everything-registry/sub-chunk-17

6 days ago

8 days ago

10 days ago

13 days ago

14 days ago

15 days ago

27 days ago

30 days ago

30 days ago

30 days ago

29 days ago

29 days ago

29 days ago

29 days ago

29 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

xpert-chatbot-frontend

Purpose

Code Owners

Places it's currently deployed

Features included

Tech stack

To view component library demo and develop (entry point src/demo.jsx):

To verify components within /dist folder via script tag:

To run linter:

To run tests:

Deployment

CDN

Beta releases

To view component library demo and develop (entry point `src/demo.jsx`):

To verify components within `/dist` folder via script tag: