@lemonsliceai/lemon-slice-widget 1.0.12 → 1.0.13
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 +47 -28
- package/package.json +7 -6
package/README.md
CHANGED
|
@@ -1,39 +1,58 @@
|
|
|
1
|
-
#
|
|
1
|
+
# LemonSlice Agent Widget
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
LemonSlice Agent Widget is an embeddable web component that enables real-time video chat with LemonSlice AI agents. It provides a floating or inline widget that connects users to LemonSlice AI agents via video and audio. The widget is distributed as an npm package and can be embedded in any webpage with a single HTML tag.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
# install dependencies
|
|
7
|
-
pnpm install
|
|
5
|
+
LemonSlice agents are created on [https://lemonslice.com/](https://lemonslice.com/)
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
## How to use it
|
|
8
|
+
``` html
|
|
9
|
+
<lemon-slice-widget agent-id="agent_id"></lemon-slice-widget>
|
|
10
|
+
<script type="module" src="https://unpkg.com/@lemonsliceai/lemon-slice-widget"></script>
|
|
11
|
+
```
|
|
11
12
|
|
|
12
|
-
|
|
13
|
-
pnpm run lint
|
|
13
|
+
## Configuration
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
### Attributes
|
|
16
|
+
|
|
17
|
+
- **`agent-id`** (required): Your LemonSlice agent ID
|
|
18
|
+
- **`inline`**: Display widget inline instead of floating (default: `false`)
|
|
19
|
+
- **`show-minimize-button`**: Show/hide the minimize button (default: `true`)
|
|
20
|
+
- **`initial-state`**: Initial widget state on load - `"minimized"`, `"active"`, or `"hidden"` (default: `"minimized"`)
|
|
21
|
+
- **`controlled-widget-state`**: Dynamically control widget state - `"minimized"`, `"active"`, or `"hidden"`
|
|
22
|
+
- **`controlled-show-minimize-button`**: Dynamically control minimize button visibility - `"true"` or `"false"`
|
|
23
|
+
- **`video-button-color-hex`**: Hex color (with or without `#`) used for the minimized video chat button (default: `#919191`)
|
|
24
|
+
- **`video-button-color-opacity`**: Opacity for the video chat button color in the range `[0, 1]` (default: `0.3`)
|
|
18
25
|
|
|
19
|
-
|
|
26
|
+
### Examples
|
|
20
27
|
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
|
|
28
|
+
```html
|
|
29
|
+
<!-- Start expanded -->
|
|
30
|
+
<lemon-slice-widget agent-id="agent_id" initial-state="active"></lemon-slice-widget>
|
|
24
31
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
npm version minor # 0.X.0
|
|
28
|
-
npm version major # X.0.0
|
|
32
|
+
<!-- Hide minimize button -->
|
|
33
|
+
<lemon-slice-widget agent-id="agent_id" show-minimize-button="false"></lemon-slice-widget>
|
|
29
34
|
|
|
30
|
-
|
|
31
|
-
|
|
35
|
+
<!-- Inline widget -->
|
|
36
|
+
<lemon-slice-widget agent-id="agent_id" inline></lemon-slice-widget>
|
|
37
|
+
|
|
38
|
+
<!-- Custom button color -->
|
|
39
|
+
<lemon-slice-widget
|
|
40
|
+
agent-id="agent_id"
|
|
41
|
+
video-button-color-hex="#FF4FD8"
|
|
42
|
+
video-button-color-opacity="0.8"
|
|
43
|
+
></lemon-slice-widget>
|
|
44
|
+
```
|
|
32
45
|
|
|
33
|
-
|
|
34
|
-
npm publish --access public
|
|
46
|
+
### Dynamic Control
|
|
35
47
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
48
|
+
Control the widget dynamically by updating attributes:
|
|
49
|
+
|
|
50
|
+
```javascript
|
|
51
|
+
const widget = document.querySelector('lemon-slice-widget');
|
|
52
|
+
|
|
53
|
+
// Change widget state
|
|
54
|
+
widget.setAttribute('controlled-widget-state', 'active');
|
|
55
|
+
|
|
56
|
+
// Toggle minimize button
|
|
57
|
+
widget.setAttribute('controlled-show-minimize-button', 'false');
|
|
58
|
+
```
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lemonsliceai/lemon-slice-widget",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.13",
|
|
4
4
|
"type": "module",
|
|
5
|
-
"description": "The
|
|
5
|
+
"description": "The LemonSlice widget",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"source": "./src/index.ts",
|
|
8
8
|
"scripts": {
|
|
9
|
-
"dev": "vite",
|
|
9
|
+
"dev": "vite --host",
|
|
10
|
+
"dev:build": "vite build && vite",
|
|
10
11
|
"lint": "eslint '{src,tests}/**/*.{js,jsx,ts,tsx}'",
|
|
11
12
|
"test": "vitest",
|
|
12
|
-
"test:ui": "vitest --ui",
|
|
13
|
-
"test:coverage": "vitest --coverage",
|
|
14
13
|
"build": "vite build",
|
|
14
|
+
"build:watch": "vite build --watch",
|
|
15
15
|
"preview": "vite preview"
|
|
16
16
|
},
|
|
17
17
|
"eslintConfig": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"build/"
|
|
21
21
|
]
|
|
22
22
|
},
|
|
23
|
-
"author": "
|
|
23
|
+
"author": "LemonSlice AI",
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@ianvs/prettier-plugin-sort-imports": "^4.7.0",
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
"@tailwindcss/vite": "^4.1.16",
|
|
29
29
|
"@testing-library/jest-dom": "^6.9.1",
|
|
30
30
|
"@testing-library/preact": "^3.2.4",
|
|
31
|
+
"@vitejs/plugin-basic-ssl": "^2.1.0",
|
|
31
32
|
"cross-env": "^7.0.3",
|
|
32
33
|
"eslint": "^9.39.1",
|
|
33
34
|
"eslint-config-preact": "^2.0.0",
|