@modochats/widget 0.1.4 → 1.0.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/.github/workflows/build-and-publish.yml +116 -174
- package/.releaserc +60 -0
- package/CHANGELOG.md +8 -0
- package/README.md +191 -191
- package/package.json +79 -76
- package/src/app.ts +117 -117
- package/src/constants/index.ts +21 -21
- package/src/constants/regex.ts +2 -2
- package/src/constants/version.ts +2 -0
- package/src/index.ts +16 -16
- package/src/services/chat/conversation.ts +135 -135
- package/src/services/chat/message-utils.ts +221 -221
- package/src/services/chat/model.ts +139 -139
- package/src/services/chatbot/chatbot.ts +66 -66
- package/src/services/checker.ts +10 -10
- package/src/services/listeners/fn.ts +77 -77
- package/src/services/socket/utils.ts +9 -9
- package/src/services/user/customer-data.ts +78 -78
- package/src/services/voice-chat/model.ts +79 -79
- package/src/services/voice-chat/utils.ts +137 -137
- package/src/tools/fetch.ts +7 -7
- package/src/types/app.ts +17 -17
- package/src/types/conversation.ts +14 -14
- package/src/types/socket.ts +7 -7
- package/src/types/window.ts +12 -12
- package/src/utils/audio.ts +67 -67
- package/src/utils/browser.ts +4 -4
- package/src/utils/fetch.ts +98 -98
- package/src/utils/uuid.ts +13 -13
- package/dist/src/app.d.ts +0 -29
- package/dist/src/app.js +0 -1
- package/dist/src/app.js.map +0 -1
- package/dist/src/constants/index.d.ts +0 -9
- package/dist/src/constants/index.js +0 -1
- package/dist/src/constants/index.js.map +0 -1
- package/dist/src/constants/regex.d.ts +0 -2
- package/dist/src/constants/regex.js +0 -1
- package/dist/src/constants/regex.js.map +0 -1
- package/dist/src/index.d.ts +0 -9
- package/dist/src/index.js +0 -1
- package/dist/src/index.js.map +0 -1
- package/dist/src/models/chatbot.d.ts +0 -23
- package/dist/src/models/chatbot.js +0 -1
- package/dist/src/models/chatbot.js.map +0 -1
- package/dist/src/models/conversation.d.ts +0 -22
- package/dist/src/models/conversation.js +0 -1
- package/dist/src/models/conversation.js.map +0 -1
- package/dist/src/models/customer-data.d.ts +0 -31
- package/dist/src/models/customer-data.js +0 -1
- package/dist/src/models/customer-data.js.map +0 -1
- package/dist/src/models/message-utils.d.ts +0 -12
- package/dist/src/models/message-utils.js +0 -1
- package/dist/src/models/message-utils.js.map +0 -1
- package/dist/src/services/chat/conversation.d.ts +0 -22
- package/dist/src/services/chat/conversation.js +0 -1
- package/dist/src/services/chat/conversation.js.map +0 -1
- package/dist/src/services/chat/message-utils.d.ts +0 -12
- package/dist/src/services/chat/message-utils.js +0 -1
- package/dist/src/services/chat/message-utils.js.map +0 -1
- package/dist/src/services/chat/model.d.ts +0 -27
- package/dist/src/services/chat/model.js +0 -1
- package/dist/src/services/chat/model.js.map +0 -1
- package/dist/src/services/chatbot/chatbot.d.ts +0 -23
- package/dist/src/services/chatbot/chatbot.js +0 -1
- package/dist/src/services/chatbot/chatbot.js.map +0 -1
- package/dist/src/services/checker.d.ts +0 -3
- package/dist/src/services/checker.js +0 -1
- package/dist/src/services/checker.js.map +0 -1
- package/dist/src/services/listeners/adders.d.ts +0 -3
- package/dist/src/services/listeners/adders.js +0 -1
- package/dist/src/services/listeners/adders.js.map +0 -1
- package/dist/src/services/listeners/fn.d.ts +0 -3
- package/dist/src/services/listeners/fn.js +0 -1
- package/dist/src/services/listeners/fn.js.map +0 -1
- package/dist/src/services/socket/utils.d.ts +0 -2
- package/dist/src/services/socket/utils.js +0 -1
- package/dist/src/services/socket/utils.js.map +0 -1
- package/dist/src/services/ui/fn.d.ts +0 -13
- package/dist/src/services/ui/fn.js +0 -1
- package/dist/src/services/ui/fn.js.map +0 -1
- package/dist/src/services/ui/html.d.ts +0 -3
- package/dist/src/services/ui/html.js +0 -1
- package/dist/src/services/ui/html.js.map +0 -1
- package/dist/src/services/user/customer-data.d.ts +0 -31
- package/dist/src/services/user/customer-data.js +0 -1
- package/dist/src/services/user/customer-data.js.map +0 -1
- package/dist/src/services/voice-chat/model.d.ts +0 -12
- package/dist/src/services/voice-chat/model.js +0 -1
- package/dist/src/services/voice-chat/model.js.map +0 -1
- package/dist/src/services/voice-chat/utils.d.ts +0 -9
- package/dist/src/services/voice-chat/utils.js +0 -1
- package/dist/src/services/voice-chat/utils.js.map +0 -1
- package/dist/src/tools/fetch.d.ts +0 -2
- package/dist/src/tools/fetch.js +0 -1
- package/dist/src/tools/fetch.js.map +0 -1
- package/dist/src/types/app.d.ts +0 -17
- package/dist/src/types/app.js +0 -1
- package/dist/src/types/app.js.map +0 -1
- package/dist/src/types/conversation.d.ts +0 -14
- package/dist/src/types/conversation.js +0 -1
- package/dist/src/types/conversation.js.map +0 -1
- package/dist/src/types/socket.d.ts +0 -6
- package/dist/src/types/socket.js +0 -1
- package/dist/src/types/socket.js.map +0 -1
- package/dist/src/types/window.d.ts +0 -9
- package/dist/src/types/window.js +0 -1
- package/dist/src/types/window.js.map +0 -1
- package/dist/src/utils/audio.d.ts +0 -3
- package/dist/src/utils/audio.js +0 -1
- package/dist/src/utils/audio.js.map +0 -1
- package/dist/src/utils/browser.d.ts +0 -2
- package/dist/src/utils/browser.js +0 -1
- package/dist/src/utils/browser.js.map +0 -1
- package/dist/src/utils/fetch.d.ts +0 -18
- package/dist/src/utils/fetch.js +0 -1
- package/dist/src/utils/fetch.js.map +0 -1
- package/dist/src/utils/uuid.d.ts +0 -6
- package/dist/src/utils/uuid.js +0 -1
- package/dist/src/utils/uuid.js.map +0 -1
- package/dist/types/src/app.d.ts +0 -30
- package/dist/types/src/app.d.ts.map +0 -1
- package/dist/types/src/constants/index.d.ts +0 -10
- package/dist/types/src/constants/index.d.ts.map +0 -1
- package/dist/types/src/constants/regex.d.ts +0 -3
- package/dist/types/src/constants/regex.d.ts.map +0 -1
- package/dist/types/src/index.d.ts +0 -10
- package/dist/types/src/index.d.ts.map +0 -1
- package/dist/types/src/models/chatbot.d.ts +0 -24
- package/dist/types/src/models/chatbot.d.ts.map +0 -1
- package/dist/types/src/models/conversation.d.ts +0 -23
- package/dist/types/src/models/conversation.d.ts.map +0 -1
- package/dist/types/src/models/customer-data.d.ts +0 -32
- package/dist/types/src/models/customer-data.d.ts.map +0 -1
- package/dist/types/src/models/message-utils.d.ts +0 -13
- package/dist/types/src/models/message-utils.d.ts.map +0 -1
- package/dist/types/src/services/chat/conversation.d.ts +0 -23
- package/dist/types/src/services/chat/conversation.d.ts.map +0 -1
- package/dist/types/src/services/chat/message-utils.d.ts +0 -13
- package/dist/types/src/services/chat/message-utils.d.ts.map +0 -1
- package/dist/types/src/services/chat/model.d.ts +0 -28
- package/dist/types/src/services/chat/model.d.ts.map +0 -1
- package/dist/types/src/services/chatbot/chatbot.d.ts +0 -24
- package/dist/types/src/services/chatbot/chatbot.d.ts.map +0 -1
- package/dist/types/src/services/checker.d.ts +0 -4
- package/dist/types/src/services/checker.d.ts.map +0 -1
- package/dist/types/src/services/listeners/adders.d.ts +0 -4
- package/dist/types/src/services/listeners/adders.d.ts.map +0 -1
- package/dist/types/src/services/listeners/fn.d.ts +0 -4
- package/dist/types/src/services/listeners/fn.d.ts.map +0 -1
- package/dist/types/src/services/socket/utils.d.ts +0 -3
- package/dist/types/src/services/socket/utils.d.ts.map +0 -1
- package/dist/types/src/services/ui/fn.d.ts +0 -14
- package/dist/types/src/services/ui/fn.d.ts.map +0 -1
- package/dist/types/src/services/ui/html.d.ts +0 -4
- package/dist/types/src/services/ui/html.d.ts.map +0 -1
- package/dist/types/src/services/user/customer-data.d.ts +0 -32
- package/dist/types/src/services/user/customer-data.d.ts.map +0 -1
- package/dist/types/src/services/voice-chat/model.d.ts +0 -13
- package/dist/types/src/services/voice-chat/model.d.ts.map +0 -1
- package/dist/types/src/services/voice-chat/utils.d.ts +0 -10
- package/dist/types/src/services/voice-chat/utils.d.ts.map +0 -1
- package/dist/types/src/tools/fetch.d.ts +0 -3
- package/dist/types/src/tools/fetch.d.ts.map +0 -1
- package/dist/types/src/types/app.d.ts +0 -18
- package/dist/types/src/types/app.d.ts.map +0 -1
- package/dist/types/src/types/conversation.d.ts +0 -15
- package/dist/types/src/types/conversation.d.ts.map +0 -1
- package/dist/types/src/types/socket.d.ts +0 -7
- package/dist/types/src/types/socket.d.ts.map +0 -1
- package/dist/types/src/types/window.d.ts +0 -10
- package/dist/types/src/types/window.d.ts.map +0 -1
- package/dist/types/src/utils/audio.d.ts +0 -4
- package/dist/types/src/utils/audio.d.ts.map +0 -1
- package/dist/types/src/utils/browser.d.ts +0 -3
- package/dist/types/src/utils/browser.d.ts.map +0 -1
- package/dist/types/src/utils/fetch.d.ts +0 -19
- package/dist/types/src/utils/fetch.d.ts.map +0 -1
- package/dist/types/src/utils/uuid.d.ts +0 -7
- package/dist/types/src/utils/uuid.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -1,191 +1,191 @@
|
|
|
1
|
-
# Modo Widget
|
|
2
|
-
|
|
3
|
-
A responsive web chat widget for customer support.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
### NPM
|
|
8
|
-
|
|
9
|
-
Install the package via npm:
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
npm install @modochats/widget
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
Then, import and use in your JavaScript/TypeScript code:
|
|
16
|
-
|
|
17
|
-
```javascript
|
|
18
|
-
import {Widget} from "@modochats/widget";
|
|
19
|
-
|
|
20
|
-
const widget = new Widget("your-public-key", {
|
|
21
|
-
// options
|
|
22
|
-
});
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
### CDN
|
|
26
|
-
|
|
27
|
-
Alternatively, include the script directly from CDN:
|
|
28
|
-
|
|
29
|
-
```html
|
|
30
|
-
<script src="https://cdn.jsdelivr.net/gh/modochats/webcomponent@main/cdn-dist/modo-web-component.min.js"></script>
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
## Features
|
|
34
|
-
|
|
35
|
-
- 🌙 Dark/Light theme support with customizable colors
|
|
36
|
-
- 🌐 RTL (Persian/Farsi) language support
|
|
37
|
-
- 📱 Mobile responsive design
|
|
38
|
-
- 💬 Real-time chat functionality with WebSocket connections
|
|
39
|
-
- 🔗 WebSocket connection status indicator
|
|
40
|
-
- 📝 Markdown message support
|
|
41
|
-
- 🎤 Voice chat capabilities
|
|
42
|
-
- 🖥️ Fullscreen mode option
|
|
43
|
-
- 🎨 Customizable position (left/right), primary and foreground colors
|
|
44
|
-
- 👤 User data management and updates
|
|
45
|
-
- ⚡ TypeScript + Modern JavaScript
|
|
46
|
-
- 🔄 Auto-initialization support
|
|
47
|
-
|
|
48
|
-
## Configuration Options
|
|
49
|
-
|
|
50
|
-
The widget can be customized with the following options:
|
|
51
|
-
|
|
52
|
-
| Option | Type | Default | Description |
|
|
53
|
-
| ----------------- | --------------------- | ----------- | ---------------------------------------------- |
|
|
54
|
-
| `position` | `"left" \| "right"` | `"right"` | Position of the chat widget on the screen |
|
|
55
|
-
| `theme` | `"dark" \| "light"` | `"dark"` | Theme mode (dark or light) |
|
|
56
|
-
| `primaryColor` | `string` | `"#667eea"` | Primary color for the widget |
|
|
57
|
-
| `title` | `string` | `""` | Title displayed in the chat header |
|
|
58
|
-
| `foregroundColor` | `string` | `"#fff"` | Foreground text color |
|
|
59
|
-
| `userData` | `Record<string, any>` | `undefined` | Custom user data object |
|
|
60
|
-
| `autoInit` | `boolean` | `false` | Whether to automatically initialize the widget |
|
|
61
|
-
| `fullScreen` | `boolean` | `false` | Enable fullscreen mode |
|
|
62
|
-
|
|
63
|
-
## Quick Start
|
|
64
|
-
|
|
65
|
-
### Development
|
|
66
|
-
|
|
67
|
-
1. **Install dependencies**
|
|
68
|
-
|
|
69
|
-
```bash
|
|
70
|
-
yarn install
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
2. **Start development server**
|
|
74
|
-
|
|
75
|
-
```bash
|
|
76
|
-
yarn dev:full
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
This runs TypeScript compiler, Rollup bundler, and live server concurrently.
|
|
80
|
-
|
|
81
|
-
3. **Open browser** Navigate to `http://localhost:3000`
|
|
82
|
-
|
|
83
|
-
### Production Build
|
|
84
|
-
|
|
85
|
-
```bash
|
|
86
|
-
yarn build
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
This will:
|
|
90
|
-
|
|
91
|
-
- Compile TypeScript to JavaScript
|
|
92
|
-
- Minify the code
|
|
93
|
-
- Bundle with Rollup
|
|
94
|
-
- Output to `bundle.js`
|
|
95
|
-
|
|
96
|
-
## Project Structure
|
|
97
|
-
|
|
98
|
-
```
|
|
99
|
-
├── src/ # Source code
|
|
100
|
-
│ ├── app.ts # Main application entry
|
|
101
|
-
│ ├── models/ # Data models
|
|
102
|
-
│ ├── services/ # UI and business logic
|
|
103
|
-
│ ├── utils/ # Helper utilities
|
|
104
|
-
│ └── types/ # TypeScript types
|
|
105
|
-
├── temp/ # Development files
|
|
106
|
-
│ ├── css/ # Compiled styles
|
|
107
|
-
│ └── dev.html # Development HTML
|
|
108
|
-
├── scripts/ # Build scripts
|
|
109
|
-
└── bundle.js # Production bundle
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
## Available Scripts
|
|
113
|
-
|
|
114
|
-
| Script | Description |
|
|
115
|
-
| ----------------- | ------------------------------ |
|
|
116
|
-
| `yarn dev:full` | Full development environment |
|
|
117
|
-
| `yarn dev:ts` | TypeScript compiler watch mode |
|
|
118
|
-
| `yarn dev:rollup` | Rollup bundler watch mode |
|
|
119
|
-
| `yarn dev:server` | Live development server |
|
|
120
|
-
| `yarn build` | Production build |
|
|
121
|
-
| `yarn compile` | Compile TypeScript |
|
|
122
|
-
| `yarn minify` | Minify JavaScript |
|
|
123
|
-
|
|
124
|
-
## Usage
|
|
125
|
-
|
|
126
|
-
Include the widget in your HTML:
|
|
127
|
-
|
|
128
|
-
```html
|
|
129
|
-
<!DOCTYPE html>
|
|
130
|
-
<html lang="en">
|
|
131
|
-
<head>
|
|
132
|
-
<meta charset="UTF-8" />
|
|
133
|
-
<title>Your Website</title>
|
|
134
|
-
</head>
|
|
135
|
-
<body>
|
|
136
|
-
<!-- Your website content -->
|
|
137
|
-
|
|
138
|
-
<script src="https://cdn.jsdelivr.net/gh/modochats/webcomponent@main/cdn-dist/modo-web-component.min.js"></script>
|
|
139
|
-
<script>
|
|
140
|
-
// Initialize the chat widget
|
|
141
|
-
const widget = new ModoWidget("your-public-key", {
|
|
142
|
-
position: "right",
|
|
143
|
-
theme: "dark",
|
|
144
|
-
primaryColor: "#667eea",
|
|
145
|
-
title: "Chat with Us",
|
|
146
|
-
foregroundColor: "#ffffff",
|
|
147
|
-
userData: {name: "John Doe", email: "john@example.com"},
|
|
148
|
-
autoInit: true,
|
|
149
|
-
fullScreen: false
|
|
150
|
-
});
|
|
151
|
-
</script>
|
|
152
|
-
</body>
|
|
153
|
-
</html>
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
### Initialization Options
|
|
157
|
-
|
|
158
|
-
Pass configuration options as the second parameter to the `ModoWidget` constructor. All options are optional except the public key.
|
|
159
|
-
|
|
160
|
-
Example with minimal options:
|
|
161
|
-
|
|
162
|
-
```javascript
|
|
163
|
-
const widget = new ModoWidget("your-public-key");
|
|
164
|
-
widget.init(); // Manual initialization if autoInit is false
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
## API Methods
|
|
168
|
-
|
|
169
|
-
Once initialized, you can interact with the widget instance:
|
|
170
|
-
|
|
171
|
-
### Update User Data
|
|
172
|
-
|
|
173
|
-
Update or add custom user data dynamically:
|
|
174
|
-
|
|
175
|
-
```javascript
|
|
176
|
-
await widget.updateUserData({
|
|
177
|
-
name: "Jane Doe",
|
|
178
|
-
email: "jane@example.com"
|
|
179
|
-
});
|
|
180
|
-
```
|
|
181
|
-
|
|
182
|
-
This method merges the new data with existing user data and updates it on the server.
|
|
183
|
-
|
|
184
|
-
## Requirements
|
|
185
|
-
|
|
186
|
-
- Node.js 16+
|
|
187
|
-
- Yarn package manager
|
|
188
|
-
|
|
189
|
-
## License
|
|
190
|
-
|
|
191
|
-
ISC
|
|
1
|
+
# Modo Widget
|
|
2
|
+
|
|
3
|
+
A responsive web chat widget for customer support.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
### NPM
|
|
8
|
+
|
|
9
|
+
Install the package via npm:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @modochats/widget
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Then, import and use in your JavaScript/TypeScript code:
|
|
16
|
+
|
|
17
|
+
```javascript
|
|
18
|
+
import {Widget} from "@modochats/widget";
|
|
19
|
+
|
|
20
|
+
const widget = new Widget("your-public-key", {
|
|
21
|
+
// options
|
|
22
|
+
});
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### CDN
|
|
26
|
+
|
|
27
|
+
Alternatively, include the script directly from CDN:
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<script src="https://cdn.jsdelivr.net/gh/modochats/webcomponent@main/cdn-dist/modo-web-component.min.js"></script>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Features
|
|
34
|
+
|
|
35
|
+
- 🌙 Dark/Light theme support with customizable colors
|
|
36
|
+
- 🌐 RTL (Persian/Farsi) language support
|
|
37
|
+
- 📱 Mobile responsive design
|
|
38
|
+
- 💬 Real-time chat functionality with WebSocket connections
|
|
39
|
+
- 🔗 WebSocket connection status indicator
|
|
40
|
+
- 📝 Markdown message support
|
|
41
|
+
- 🎤 Voice chat capabilities
|
|
42
|
+
- 🖥️ Fullscreen mode option
|
|
43
|
+
- 🎨 Customizable position (left/right), primary and foreground colors
|
|
44
|
+
- 👤 User data management and updates
|
|
45
|
+
- ⚡ TypeScript + Modern JavaScript
|
|
46
|
+
- 🔄 Auto-initialization support
|
|
47
|
+
|
|
48
|
+
## Configuration Options
|
|
49
|
+
|
|
50
|
+
The widget can be customized with the following options:
|
|
51
|
+
|
|
52
|
+
| Option | Type | Default | Description |
|
|
53
|
+
| ----------------- | --------------------- | ----------- | ---------------------------------------------- |
|
|
54
|
+
| `position` | `"left" \| "right"` | `"right"` | Position of the chat widget on the screen |
|
|
55
|
+
| `theme` | `"dark" \| "light"` | `"dark"` | Theme mode (dark or light) |
|
|
56
|
+
| `primaryColor` | `string` | `"#667eea"` | Primary color for the widget |
|
|
57
|
+
| `title` | `string` | `""` | Title displayed in the chat header |
|
|
58
|
+
| `foregroundColor` | `string` | `"#fff"` | Foreground text color |
|
|
59
|
+
| `userData` | `Record<string, any>` | `undefined` | Custom user data object |
|
|
60
|
+
| `autoInit` | `boolean` | `false` | Whether to automatically initialize the widget |
|
|
61
|
+
| `fullScreen` | `boolean` | `false` | Enable fullscreen mode |
|
|
62
|
+
|
|
63
|
+
## Quick Start
|
|
64
|
+
|
|
65
|
+
### Development
|
|
66
|
+
|
|
67
|
+
1. **Install dependencies**
|
|
68
|
+
|
|
69
|
+
```bash
|
|
70
|
+
yarn install
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
2. **Start development server**
|
|
74
|
+
|
|
75
|
+
```bash
|
|
76
|
+
yarn dev:full
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
This runs TypeScript compiler, Rollup bundler, and live server concurrently.
|
|
80
|
+
|
|
81
|
+
3. **Open browser** Navigate to `http://localhost:3000`
|
|
82
|
+
|
|
83
|
+
### Production Build
|
|
84
|
+
|
|
85
|
+
```bash
|
|
86
|
+
yarn build
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
This will:
|
|
90
|
+
|
|
91
|
+
- Compile TypeScript to JavaScript
|
|
92
|
+
- Minify the code
|
|
93
|
+
- Bundle with Rollup
|
|
94
|
+
- Output to `bundle.js`
|
|
95
|
+
|
|
96
|
+
## Project Structure
|
|
97
|
+
|
|
98
|
+
```
|
|
99
|
+
├── src/ # Source code
|
|
100
|
+
│ ├── app.ts # Main application entry
|
|
101
|
+
│ ├── models/ # Data models
|
|
102
|
+
│ ├── services/ # UI and business logic
|
|
103
|
+
│ ├── utils/ # Helper utilities
|
|
104
|
+
│ └── types/ # TypeScript types
|
|
105
|
+
├── temp/ # Development files
|
|
106
|
+
│ ├── css/ # Compiled styles
|
|
107
|
+
│ └── dev.html # Development HTML
|
|
108
|
+
├── scripts/ # Build scripts
|
|
109
|
+
└── bundle.js # Production bundle
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## Available Scripts
|
|
113
|
+
|
|
114
|
+
| Script | Description |
|
|
115
|
+
| ----------------- | ------------------------------ |
|
|
116
|
+
| `yarn dev:full` | Full development environment |
|
|
117
|
+
| `yarn dev:ts` | TypeScript compiler watch mode |
|
|
118
|
+
| `yarn dev:rollup` | Rollup bundler watch mode |
|
|
119
|
+
| `yarn dev:server` | Live development server |
|
|
120
|
+
| `yarn build` | Production build |
|
|
121
|
+
| `yarn compile` | Compile TypeScript |
|
|
122
|
+
| `yarn minify` | Minify JavaScript |
|
|
123
|
+
|
|
124
|
+
## Usage
|
|
125
|
+
|
|
126
|
+
Include the widget in your HTML:
|
|
127
|
+
|
|
128
|
+
```html
|
|
129
|
+
<!DOCTYPE html>
|
|
130
|
+
<html lang="en">
|
|
131
|
+
<head>
|
|
132
|
+
<meta charset="UTF-8" />
|
|
133
|
+
<title>Your Website</title>
|
|
134
|
+
</head>
|
|
135
|
+
<body>
|
|
136
|
+
<!-- Your website content -->
|
|
137
|
+
|
|
138
|
+
<script src="https://cdn.jsdelivr.net/gh/modochats/webcomponent@main/cdn-dist/modo-web-component.min.js"></script>
|
|
139
|
+
<script>
|
|
140
|
+
// Initialize the chat widget
|
|
141
|
+
const widget = new ModoWidget("your-public-key", {
|
|
142
|
+
position: "right",
|
|
143
|
+
theme: "dark",
|
|
144
|
+
primaryColor: "#667eea",
|
|
145
|
+
title: "Chat with Us",
|
|
146
|
+
foregroundColor: "#ffffff",
|
|
147
|
+
userData: {name: "John Doe", email: "john@example.com"},
|
|
148
|
+
autoInit: true,
|
|
149
|
+
fullScreen: false
|
|
150
|
+
});
|
|
151
|
+
</script>
|
|
152
|
+
</body>
|
|
153
|
+
</html>
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### Initialization Options
|
|
157
|
+
|
|
158
|
+
Pass configuration options as the second parameter to the `ModoWidget` constructor. All options are optional except the public key.
|
|
159
|
+
|
|
160
|
+
Example with minimal options:
|
|
161
|
+
|
|
162
|
+
```javascript
|
|
163
|
+
const widget = new ModoWidget("your-public-key");
|
|
164
|
+
widget.init(); // Manual initialization if autoInit is false
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
## API Methods
|
|
168
|
+
|
|
169
|
+
Once initialized, you can interact with the widget instance:
|
|
170
|
+
|
|
171
|
+
### Update User Data
|
|
172
|
+
|
|
173
|
+
Update or add custom user data dynamically:
|
|
174
|
+
|
|
175
|
+
```javascript
|
|
176
|
+
await widget.updateUserData({
|
|
177
|
+
name: "Jane Doe",
|
|
178
|
+
email: "jane@example.com"
|
|
179
|
+
});
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
This method merges the new data with existing user data and updates it on the server.
|
|
183
|
+
|
|
184
|
+
## Requirements
|
|
185
|
+
|
|
186
|
+
- Node.js 16+
|
|
187
|
+
- Yarn package manager
|
|
188
|
+
|
|
189
|
+
## License
|
|
190
|
+
|
|
191
|
+
ISC
|
package/package.json
CHANGED
|
@@ -1,76 +1,79 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@modochats/widget",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "",
|
|
5
|
-
"main": "dist/src/app.js",
|
|
6
|
-
"type": "module",
|
|
7
|
-
"scripts": {
|
|
8
|
-
"dev": "
|
|
9
|
-
"dev:
|
|
10
|
-
"dev:
|
|
11
|
-
"dev:
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
"
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
"
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
"@
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
"
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
"
|
|
47
|
-
},
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
},
|
|
51
|
-
"
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
"url": "https://github.com/modochats/chat-client
|
|
68
|
-
},
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@modochats/widget",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "dist/src/app.js",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"dev:ts": "tsc --watch --noCheck",
|
|
9
|
+
"dev:rollup": "rollup --config rollup.dev.config.js --watch",
|
|
10
|
+
"dev:server": "live-server temp --port=3000 --host=localhost --open=/dev.html",
|
|
11
|
+
"dev": "concurrently \"yarn dev:ts\" \"yarn dev:rollup\" \"yarn dev:server\" --names \"tsc,rollup,server\" --prefix name ",
|
|
12
|
+
"compile": "npx tsc --noCheck",
|
|
13
|
+
"minify": "node scripts/terser-minify.js",
|
|
14
|
+
"rollup": "rollup --config rollup.config.js",
|
|
15
|
+
"build": "npm run compile && npm run minify && npm run rollup",
|
|
16
|
+
"build:cdn": "npm run build && node scripts/create-umd-bundle.js",
|
|
17
|
+
"build:types": "tsc --emitDeclarationOnly --declaration --declarationMap --outDir dist/types"
|
|
18
|
+
},
|
|
19
|
+
"dependencies": {
|
|
20
|
+
"@modochats/chat-client": "^0.3.0",
|
|
21
|
+
"@modochats/voice-client": "^0.2.2",
|
|
22
|
+
"marked": "^16.3.0",
|
|
23
|
+
"ofetch": "^1.5.1",
|
|
24
|
+
"tldts": "^7.0.17"
|
|
25
|
+
},
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"@rollup/plugin-commonjs": "^29.0.0",
|
|
28
|
+
"@rollup/plugin-node-resolve": "^16.0.3",
|
|
29
|
+
"@rollup/plugin-typescript": "^12.3.0",
|
|
30
|
+
"@types/node": "^24.10.1",
|
|
31
|
+
"concurrently": "^9.2.1",
|
|
32
|
+
"live-server": "^1.2.2",
|
|
33
|
+
"rollup": "^4.53.2",
|
|
34
|
+
"terser": "^5.44.1",
|
|
35
|
+
"tsx": "^4.20.6",
|
|
36
|
+
"typescript": "^5.9.3",
|
|
37
|
+
"@semantic-release/changelog": "^6.0.3",
|
|
38
|
+
"@semantic-release/exec": "^6.0.3",
|
|
39
|
+
"@semantic-release/git": "^10.0.1",
|
|
40
|
+
"@semantic-release/github": "^9.2.6",
|
|
41
|
+
"@semantic-release/npm": "^12.0.0",
|
|
42
|
+
"semantic-release": "^23.0.0"
|
|
43
|
+
},
|
|
44
|
+
"imports": {
|
|
45
|
+
"#src/*": "./dist/src/*",
|
|
46
|
+
"#root/*": "./dist/*"
|
|
47
|
+
},
|
|
48
|
+
"engines": {
|
|
49
|
+
"node": ">=16.0.0"
|
|
50
|
+
},
|
|
51
|
+
"publishConfig": {
|
|
52
|
+
"access": "public"
|
|
53
|
+
},
|
|
54
|
+
"homepage": "https://github.com/modochats/webcomponent#readme",
|
|
55
|
+
"keywords": [
|
|
56
|
+
"modo",
|
|
57
|
+
"chat",
|
|
58
|
+
"ai",
|
|
59
|
+
"chatbot",
|
|
60
|
+
"websocket",
|
|
61
|
+
"real-time"
|
|
62
|
+
],
|
|
63
|
+
"author": "Modo Team",
|
|
64
|
+
"license": "MIT",
|
|
65
|
+
"repository": {
|
|
66
|
+
"type": "git",
|
|
67
|
+
"url": "https://github.com/modochats/chat-client"
|
|
68
|
+
},
|
|
69
|
+
"bugs": {
|
|
70
|
+
"url": "https://github.com/modochats/chat-client/issues"
|
|
71
|
+
},
|
|
72
|
+
"exports": {
|
|
73
|
+
".": {
|
|
74
|
+
"types": "./dist/types/src/index.d.ts",
|
|
75
|
+
"import": "./dist/src/index.js"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
"types": "dist/types/src/index.d.ts"
|
|
79
|
+
}
|