@moveo-ai/web-client 0.88.2 → 0.88.3

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.
Files changed (15) hide show
  1. package/README.md +156 -137
  2. package/dist/iframe.min.js +1 -1
  3. package/dist/iframe.min.js.LICENSE.txt +2 -2
  4. package/dist/iframe.min.js.map +1 -1
  5. package/dist/iframe.v2.min.js +1 -1
  6. package/dist/iframe.v2.min.js.LICENSE.txt +1 -1
  7. package/dist/iframe.v2.min.js.map +1 -1
  8. package/dist/index.html +1 -1
  9. package/dist/preview.css.min.js +1 -1
  10. package/dist/preview.css.min.js.LICENSE.txt +1 -1
  11. package/dist/preview.css.min.js.map +1 -1
  12. package/dist/web-client.min.js +1 -1
  13. package/dist/web-client.min.js.LICENSE.txt +1 -1
  14. package/dist/web-client.min.js.map +1 -1
  15. package/package.json +8 -4
package/README.md CHANGED
@@ -1,203 +1,222 @@
1
- ## Web Client
1
+ # @moveo-ai/web-client
2
2
 
3
- <blockquote>Moveo web-client integration</blockquote>
3
+ [![npm version](https://img.shields.io/npm/v/@moveo-ai/web-client.svg)](https://www.npmjs.com/package/@moveo-ai/web-client)
4
+ [![npm downloads](https://img.shields.io/npm/dm/@moveo-ai/web-client.svg)](https://www.npmjs.com/package/@moveo-ai/web-client)
5
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
6
+
7
+ Embeddable chat widget for integrating [Moveo.ai](https://moveo.ai) AI Agents into your website or application.
4
8
 
5
9
  ![](https://user-images.githubusercontent.com/52110045/147710079-c7da74c3-de6a-47e4-9ef8-83cadd4b1f5f.png)
6
10
 
7
- ## ⭐️ Features
11
+ ## Features
8
12
 
9
13
  ![](https://user-images.githubusercontent.com/52110045/147710060-7ed0eed1-df5e-4f51-ba14-f3fa040a7a7f.png)
10
14
 
11
- ## 📦 Getting Started
15
+ - Real-time chat with AI Agents
16
+ - Customizable appearance and theming
17
+ - Multi-language support (22 languages)
18
+ - File upload and media sharing
19
+ - Mobile-responsive design
20
+ - Secure iframe-based isolation
21
+
22
+ ## Table of Contents
23
+
24
+ - [Quick Start](#quick-start)
25
+ - [Installation](#installation)
26
+ - [Usage](#usage)
27
+ - [API Reference](#api-reference)
28
+ - [Configuration](#configuration)
29
+ - [TypeScript Support](#typescript-support)
30
+ - [Browser Support](#browser-support)
31
+ - [License](#license)
12
32
 
13
- ### Chat Widget Integration
33
+ ## Quick Start
14
34
 
15
- 1. Create an account on https://console.moveo.ai
16
- 2. Create an environment
17
- 3. Create a web integration
18
- 4. Copy the snippet to your website html
19
- 5. Enjoy 🚀
35
+ 1. Create an account at [console.moveo.ai](https://console.moveo.ai)
36
+ 2. Create an environment and web integration
37
+ 3. Copy your integration ID
38
+ 4. Add the widget to your website using one of the methods below
20
39
 
21
- ### Audio Widget Integration
40
+ ## Installation
22
41
 
23
- Add voice calling capabilities to your website:
42
+ ### CDN (Recommended for most websites)
43
+
44
+ Add the script tag to your HTML:
24
45
 
25
46
  ```html
26
- <script src="https://cdn.moveo.ai/audio-client.min.js"></script>
47
+ <script src="https://web.moveo.ai/web-client.min.js"></script>
27
48
  <script>
28
- window.addEventListener('load', async function () {
29
- const controller = await MoveoAudio.init({ integrationId: 'YOUR_INTEGRATION_ID' });
30
- });
49
+ MoveoAI.init({ integrationId: 'YOUR_INTEGRATION_ID' });
31
50
  </script>
32
51
  ```
33
52
 
34
- ## 🛠 Development
35
-
36
- ### Prerequisites
37
-
38
- - Node.js (v16 or higher)
39
- - npm or yarn
40
-
41
- ### Installation
53
+ ### npm (For module bundlers)
42
54
 
43
55
  ```bash
44
- # Install dependencies
45
- npm install
56
+ npm install @moveo-ai/web-client
46
57
  ```
47
58
 
48
- ### Running Locally
49
-
50
- The web-client can be run in different modes depending on your development needs:
51
-
52
- #### Development Mode
59
+ ```typescript
60
+ import MoveoAI from '@moveo-ai/web-client';
53
61
 
54
- ```bash
55
- npm start
62
+ MoveoAI.init({ integrationId: 'YOUR_INTEGRATION_ID' });
56
63
  ```
57
64
 
58
- This starts the webpack dev server on https://localhost:8880 with hot module replacement enabled.
59
-
60
- #### Local Testing with Different Environments
61
-
62
- When running locally, you can specify which Moveo Channels backend to connect to using query parameters:
65
+ **Requirements:** Node.js 18+
63
66
 
64
- - **Development Backend**: Default when running locally
65
- - **Production Backend**: Add `?host=https://channels.moveo.ai` to your URL
66
- - **Custom Backend**: Add `?host=YOUR_BACKEND_URL` to test against different environments
67
+ ## Usage
67
68
 
68
- Example URLs:
69
+ ### Basic
69
70
 
71
+ ```html
72
+ <!DOCTYPE html>
73
+ <html>
74
+ <head>
75
+ <title>My Website</title>
76
+ </head>
77
+ <body>
78
+ <!-- Your website content -->
79
+
80
+ <script src="https://web.moveo.ai/web-client.min.js"></script>
81
+ <script>
82
+ window.addEventListener('load', function () {
83
+ MoveoAI.init({ integrationId: 'YOUR_INTEGRATION_ID' });
84
+ });
85
+ </script>
86
+ </body>
87
+ </html>
70
88
  ```
71
- https://localhost:8880/?integration_id=YOUR_ID&host=https://channels.moveo.ai # Production
72
- https://localhost:8880/?integration_id=YOUR_ID&host=https://dev-channels.moveo.ai # Dev
73
- https://localhost:8880/?integration_id=YOUR_ID # Uses default development backend
74
- ```
75
-
76
- ### Build Commands
77
89
 
78
- ```bash
79
- # Production build (minified)
80
- npm run build
81
-
82
- # Development build (unminified)
83
- npm run build:dev
84
-
85
- # Watch mode for continuous builds
86
- npm run watch
90
+ ### With Configuration Options
91
+
92
+ ```javascript
93
+ MoveoAI.init({
94
+ integrationId: 'YOUR_INTEGRATION_ID',
95
+ context: {
96
+ user_id: 'user-123',
97
+ user_name: 'John Doe',
98
+ user_email: 'john@example.com',
99
+ },
100
+ language: 'en',
101
+ });
87
102
  ```
88
103
 
89
- ### 📦 Library Exports
90
-
91
- The build process generates multiple UMD libraries for different use cases:
104
+ ### Programmatic Control
92
105
 
93
- #### Chat Widget (`MoveoAI`)
106
+ ```javascript
107
+ const controller = MoveoAI.init({ integrationId: 'YOUR_INTEGRATION_ID' });
94
108
 
95
- - **`web-client.min.js`** (40KB) - Loader script for the chat widget
96
- - **`iframe.v2.min.js`** (1.3MB) - Chat widget iframe (v2, current)
97
- - **`iframe.min.js`** (1.2MB) - Chat widget iframe (v1, deprecated)
109
+ // Open the chat widget
110
+ controller.open();
98
111
 
99
- **Usage**:
112
+ // Close the chat widget
113
+ controller.close();
100
114
 
101
- ```html
102
- <script src="https://cdn.moveo.ai/web-client.min.js"></script>
103
- <script>
104
- MoveoAI.init({ integrationId: 'your-id' });
105
- </script>
106
- ```
107
-
108
- #### Audio Widget (`MoveoAudio`)
115
+ // Toggle the widget
116
+ controller.toggle();
109
117
 
110
- - **`audio-client.min.js`** (341KB) - Voice widget with Twilio integration
118
+ // Send a message programmatically
119
+ controller.sendMessage('Hello!');
111
120
 
112
- **Usage**:
121
+ // Update context
122
+ controller.updateContext({ user_id: 'new-user-456' });
113
123
 
114
- ```html
115
- <script src="https://cdn.moveo.ai/audio-client.min.js"></script>
116
- <script>
117
- const controller = await MoveoAudio.init({ integrationId: 'your-id' });
118
- </script>
124
+ // Destroy the widget
125
+ controller.destroy();
119
126
  ```
120
127
 
121
- **Module Bundler Usage** (webpack, vite, etc.):
128
+ ## API Reference
122
129
 
123
- ```typescript
124
- // Chat widget
125
- import MoveoAI from '@moveo-ai/web-client';
126
- MoveoAI.init({ integrationId: 'your-id' });
127
-
128
- // Audio widget
129
- import MoveoAudio, {
130
- AudioController,
131
- AudioConfig,
132
- } from '@moveo-ai/web-client/audio-client.min.js';
133
- const controller: AudioController = await MoveoAudio.init({
134
- integrationId: 'your-id',
135
- });
136
- ```
130
+ ### MoveoAI.init(config)
137
131
 
138
- ### Testing
132
+ Initializes the chat widget.
139
133
 
140
- ```bash
141
- # Run unit tests
142
- npm test
134
+ | Parameter | Type | Required | Description |
135
+ | --------------- | -------- | -------- | ----------------------------------------- |
136
+ | `integrationId` | `string` | Yes | Your Moveo.ai integration ID |
137
+ | `context` | `object` | No | Custom context variables for the AI Agent |
138
+ | `language` | `string` | No | Widget language (ISO 639-1 code) |
143
139
 
144
- # Run E2E tests
145
- npm run test:ci
140
+ **Returns:** `WidgetController` - Controller instance for programmatic control
146
141
 
147
- # Run specific Playwright test
148
- npx playwright test tests/custom-fields.spec.ts
142
+ ### WidgetController Methods
149
143
 
150
- # Run specific Jest test
151
- jest src/components/Header/Header.test.tsx
152
- ```
144
+ | Method | Description |
145
+ | ---------------------------- | -------------------------------- |
146
+ | `open()` | Opens the chat widget |
147
+ | `close()` | Closes the chat widget |
148
+ | `toggle()` | Toggles the widget open/closed |
149
+ | `sendMessage(text: string)` | Sends a message to the agent |
150
+ | `updateContext(ctx: object)` | Updates the conversation context |
151
+ | `destroy()` | Removes the widget from the page |
153
152
 
154
- ### Code Quality
153
+ ## Configuration
155
154
 
156
- ```bash
157
- # Run linters
158
- npm run lint
155
+ ### Context Variables
156
+
157
+ Pass custom data to your AI Agent:
159
158
 
160
- # Auto-fix linting issues
161
- npm run autofix
159
+ ```javascript
160
+ MoveoAI.init({
161
+ integrationId: 'YOUR_INTEGRATION_ID',
162
+ context: {
163
+ // User information
164
+ user_id: 'user-123',
165
+ user_name: 'John Doe',
166
+ user_email: 'john@example.com',
162
167
 
163
- # Format code with Prettier
164
- npm run prettier
168
+ // Custom business data
169
+ subscription_tier: 'premium',
170
+ account_balance: 150.0,
165
171
 
166
- # Type checking
167
- npm run type-check
172
+ // Any custom key-value pairs
173
+ custom_field: 'custom_value',
174
+ },
175
+ });
168
176
  ```
169
177
 
170
- ### Storybook
178
+ ### Supported Languages
171
179
 
172
- ```bash
173
- # Run Storybook development server
174
- npm run storybook
180
+ The widget supports 22 languages including: English, Spanish, French, German, Italian, Portuguese, Dutch, Greek, Arabic, Hebrew, and more.
175
181
 
176
- # Build Storybook for production
177
- npm run build-storybook
182
+ ```javascript
183
+ MoveoAI.init({
184
+ integrationId: 'YOUR_INTEGRATION_ID',
185
+ language: 'es', // Spanish
186
+ });
178
187
  ```
179
188
 
180
- ## 🚀 Deployment
189
+ ## TypeScript Support
181
190
 
182
- ### Current: Cloudflare Pages
191
+ Full TypeScript definitions are included:
183
192
 
184
- The web-client is currently deployed to **Cloudflare Pages**, providing:
193
+ ```typescript
194
+ import MoveoAI, { WidgetController, WidgetConfig } from '@moveo-ai/web-client';
185
195
 
186
- - Global CDN distribution
187
- - Automatic deployments from GitHub
188
- - Preview deployments for pull requests
189
- - Zero-config SSL/TLS
196
+ const config: WidgetConfig = {
197
+ integrationId: 'YOUR_INTEGRATION_ID',
198
+ context: {
199
+ user_id: 'user-123',
200
+ },
201
+ };
202
+
203
+ const controller: WidgetController = MoveoAI.init(config);
204
+ ```
190
205
 
191
- ### Previous: Vercel
206
+ ## Browser Support
192
207
 
193
- The project was originally deployed on Vercel but has been migrated to Cloudflare Pages for improved performance and better integration with our infrastructure.
208
+ - Chrome (latest)
209
+ - Firefox (latest)
210
+ - Safari (latest)
211
+ - Edge (latest)
212
+ - Mobile browsers (iOS Safari, Android Chrome)
194
213
 
195
- ### Deployment Configuration
214
+ ## Support
196
215
 
197
- The production build is automatically deployed when changes are pushed to the `main` branch. Preview deployments are created for pull requests to the `next` branch.
216
+ - Documentation: [docs.moveo.ai](https://docs.moveo.ai)
217
+ - Console: [console.moveo.ai](https://console.moveo.ai)
218
+ - Website: [moveo.ai](https://moveo.ai)
198
219
 
199
- Build settings:
220
+ ## License
200
221
 
201
- - Build command: `npm run build`
202
- - Build output directory: `dist`
203
- - Node version: 16+
222
+ MIT License - see [LICENSE](LICENSE) for details.