Welcome

Install dependencies

npm i

Use

React Component

You can use the React Component by installing it from npm

npm i --save clever-widget

and importing it where you need it

import Widget from 'clever-widget'

...

	render() {
        return (
            <Widget 
                text={...}
                renderRules={...}
                theme={...}
                events={...}
                ...
            />
        )
    }

The expected props are:

	renderRules,
	events,
	theme,
	text,
	isChatOpen,
	botIsTyping,
	messages,
	sendMessage,
	onOpenChat,
	onCloseChat,
	giveRating

Develop

TODOs

• Use preact and preact-compat to minimize the Widget buid. This is currently not possible as we rely on React.createContext() and React.forwardRef(), which have not been implemented in preact yet. Once these features are available, do the following:
  • npm i --save preact preact-compat
  • Uncomment the resolve part in webpack.production.js

Build Flow

There are 2 module bundlers used.

React Component

Rollup is used to build the Bright Component for use in other Clever projects like clever-web.

To build, run npm run build:component

This will output 3 files to the /build folder:

- cleverwidget.js
- cleverwidget.module.js
- cleverwidget.umd.js

Widget

Webpack is used to build the executable bundle for use as Widget on external websites.

To build, run npm run build:widget

This will output 3 files to the /build folder:

- bundle.js
- index.html
- frame.html
- custom.html

Building both

You can build both by running npm run build

Examples

https://github.com/jaebradley/example-rollup-react-component-npm-package