@flowengage/react-chatbot 0.1.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 +207 -0
- package/dist/favicon.svg +1 -0
- package/dist/flowengage-embed.js +334 -0
- package/dist/flowengage-react-chatbot.cjs +325 -0
- package/dist/flowengage-react-chatbot.css +3 -0
- package/dist/flowengage-react-chatbot.mjs +21305 -0
- package/dist/icons.svg +24 -0
- package/dist/react-chatbot.css +3 -0
- package/package.json +63 -0
package/README.md
ADDED
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
# @flowengage/react-chatbot
|
|
2
|
+
|
|
3
|
+
Embeddable AI-powered customer support chat widget — built by [FlowEngage](https://flowengage.com).
|
|
4
|
+
Add live chat, AI assistant, and agent handoff to any site in minutes. All you need is your **Site ID**.
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install @flowengage/react-chatbot
|
|
12
|
+
# or
|
|
13
|
+
yarn add @flowengage/react-chatbot
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
> **Peer dependencies**: React 18+ and ReactDOM 18+ must already be installed in your project.
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Quick Start — React / Next.js / Vite
|
|
21
|
+
|
|
22
|
+
### 1. Wrap your app with the provider
|
|
23
|
+
|
|
24
|
+
```jsx
|
|
25
|
+
// app.jsx (or _app.tsx in Next.js, main.jsx in Vite, etc.)
|
|
26
|
+
import { FlowEngageProvider, FlowEngageWidget } from '@flowengage/react-chatbot';
|
|
27
|
+
import '@flowengage/react-chatbot/styles.css';
|
|
28
|
+
|
|
29
|
+
export default function App() {
|
|
30
|
+
return (
|
|
31
|
+
<FlowEngageProvider siteId="YOUR_SITE_ID">
|
|
32
|
+
{/* your existing app content */}
|
|
33
|
+
<YourApp />
|
|
34
|
+
|
|
35
|
+
{/* drop the widget anywhere inside the provider */}
|
|
36
|
+
<FlowEngageWidget />
|
|
37
|
+
</FlowEngageProvider>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
That's it. The widget will bootstrap itself, connect to FlowEngage's backend, load chat history, and enable live agent handoff — all automatically.
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## Props
|
|
47
|
+
|
|
48
|
+
### `<FlowEngageProvider>`
|
|
49
|
+
|
|
50
|
+
| Prop | Type | Required | Description |
|
|
51
|
+
|------|------|----------|-------------|
|
|
52
|
+
| `siteId` | `string` | ✅ | Your Site ID from the FlowEngage dashboard |
|
|
53
|
+
| `language` | `string` | ❌ | ISO 639-1 language code (default: `"en"`) |
|
|
54
|
+
|
|
55
|
+
### `<FlowEngageWidget>`
|
|
56
|
+
|
|
57
|
+
No props required. It reads all state from the nearest `FlowEngageProvider`.
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Using the `useFlowEngage` Hook
|
|
62
|
+
|
|
63
|
+
Access the full widget context in any child component:
|
|
64
|
+
|
|
65
|
+
```jsx
|
|
66
|
+
import { useFlowEngage } from '@flowengage/react-chatbot';
|
|
67
|
+
|
|
68
|
+
function MyCustomButton() {
|
|
69
|
+
const { openWidget, isOpen, chatHistory } = useFlowEngage();
|
|
70
|
+
|
|
71
|
+
return (
|
|
72
|
+
<button onClick={openWidget}>
|
|
73
|
+
Chat ({chatHistory.length} messages)
|
|
74
|
+
</button>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Available context values
|
|
80
|
+
|
|
81
|
+
| Value | Type | Description |
|
|
82
|
+
|-------|------|-------------|
|
|
83
|
+
| `status` | `"booting" \| "ready" \| "error"` | Widget boot status |
|
|
84
|
+
| `isOpen` | `boolean` | Whether the chat panel is open |
|
|
85
|
+
| `chatHistory` | `Message[]` | Full chat history array |
|
|
86
|
+
| `isHumanHandled` | `boolean` | Whether a live agent has taken over |
|
|
87
|
+
| `agentName` | `string \| null` | Active agent's name |
|
|
88
|
+
| `agentHeadshot` | `string \| null` | Active agent's avatar URL |
|
|
89
|
+
| `isAgentTyping` | `boolean` | Agent typing indicator |
|
|
90
|
+
| `isLoading` | `boolean` | Waiting for AI response |
|
|
91
|
+
| `isVoiceMode` | `boolean` | Voice mode active |
|
|
92
|
+
| `isRateLimited` | `boolean` | Rate limit hit |
|
|
93
|
+
| `language` | `string` | Current language |
|
|
94
|
+
| `openWidget()` | `function` | Open the chat panel |
|
|
95
|
+
| `closeWidget()` | `function` | Close the chat panel |
|
|
96
|
+
| `toggleWidget()` | `function` | Toggle the panel |
|
|
97
|
+
| `sendMessage(msg, category?)` | `function` | Send a message |
|
|
98
|
+
| `setVoiceMode(bool)` | `function` | Toggle voice mode |
|
|
99
|
+
| `notifyRouteChange()` | `function` | Notify tracker of SPA route change |
|
|
100
|
+
|
|
101
|
+
---
|
|
102
|
+
|
|
103
|
+
## Script Tag / CDN (No Framework Required)
|
|
104
|
+
|
|
105
|
+
For plain HTML sites or any non-React app, use the self-contained embed script:
|
|
106
|
+
|
|
107
|
+
### Option A — Auto-init via `data` attribute (recommended)
|
|
108
|
+
|
|
109
|
+
```html
|
|
110
|
+
<script
|
|
111
|
+
src="https://cdn.flowengage.com/flowengage-embed.js"
|
|
112
|
+
data-site-id="YOUR_SITE_ID">
|
|
113
|
+
</script>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### Option B — Manual init
|
|
117
|
+
|
|
118
|
+
```html
|
|
119
|
+
<script src="https://cdn.flowengage.com/flowengage-embed.js"></script>
|
|
120
|
+
<script>
|
|
121
|
+
FlowEngage.init({ siteId: 'YOUR_SITE_ID' });
|
|
122
|
+
</script>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Option C — With language
|
|
126
|
+
|
|
127
|
+
```html
|
|
128
|
+
<script>
|
|
129
|
+
FlowEngage.init({ siteId: 'YOUR_SITE_ID', language: 'ar' });
|
|
130
|
+
</script>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
### Programmatic control
|
|
134
|
+
|
|
135
|
+
```js
|
|
136
|
+
// Remove the widget at any time
|
|
137
|
+
FlowEngage.destroy();
|
|
138
|
+
|
|
139
|
+
// Re-initialize
|
|
140
|
+
FlowEngage.init({ siteId: 'YOUR_SITE_ID' });
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
145
|
+
## Multi-language Support
|
|
146
|
+
|
|
147
|
+
The widget UI and AI responses can be localized. Pass a language code to the provider or the embed script:
|
|
148
|
+
|
|
149
|
+
```jsx
|
|
150
|
+
<FlowEngageProvider siteId="YOUR_SITE_ID" language="fr">
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
Supported languages depend on your FlowEngage tenant configuration.
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
## SPA Route Tracking
|
|
158
|
+
|
|
159
|
+
The widget automatically tracks page views and session duration.
|
|
160
|
+
For client-side routing (React Router, Next.js App Router, etc.), notify the tracker on route changes:
|
|
161
|
+
|
|
162
|
+
```jsx
|
|
163
|
+
import { useFlowEngage } from '@flowengage/react-chatbot';
|
|
164
|
+
import { useEffect } from 'react';
|
|
165
|
+
import { useLocation } from 'react-router-dom';
|
|
166
|
+
|
|
167
|
+
function RouteTracker() {
|
|
168
|
+
const { notifyRouteChange } = useFlowEngage();
|
|
169
|
+
const location = useLocation();
|
|
170
|
+
|
|
171
|
+
useEffect(() => {
|
|
172
|
+
notifyRouteChange();
|
|
173
|
+
}, [location.pathname]);
|
|
174
|
+
|
|
175
|
+
return null;
|
|
176
|
+
}
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
## How It Works
|
|
182
|
+
|
|
183
|
+
```
|
|
184
|
+
Your App
|
|
185
|
+
└── <FlowEngageProvider siteId="...">
|
|
186
|
+
│
|
|
187
|
+
├── Boot: GET /api/widget/bootstrap → validates siteId, returns config
|
|
188
|
+
├── Start: POST /api/ai/chat → loads chat history
|
|
189
|
+
├── Chat: Socket.IO → real-time messages & agent handoff
|
|
190
|
+
└── Track: Socket.IO events → visitor session, page views
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
All backend URLs are managed internally by FlowEngage. You never configure them.
|
|
194
|
+
|
|
195
|
+
---
|
|
196
|
+
|
|
197
|
+
## Getting Your Site ID
|
|
198
|
+
|
|
199
|
+
1. Log in to the [FlowEngage Dashboard](https://app.flowengage.com)
|
|
200
|
+
2. Navigate to **Settings → Sites**
|
|
201
|
+
3. Copy the **Site ID** for your website
|
|
202
|
+
|
|
203
|
+
---
|
|
204
|
+
|
|
205
|
+
## License
|
|
206
|
+
|
|
207
|
+
MIT © FlowEngage
|
package/dist/favicon.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
|