@fiction/widget 0.1.56 → 1.0.1
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 +7 -105
- package/dist/widget.css +1 -1
- package/dist/widget.js +3 -3
- package/package.json +25 -12
package/README.md
CHANGED
|
@@ -1,115 +1,17 @@
|
|
|
1
1
|
# Fiction Widget
|
|
2
2
|
|
|
3
|
-
Zero-config contextual digital self
|
|
4
|
-
|
|
5
|
-
## Quick Start
|
|
6
|
-
|
|
7
|
-
```html
|
|
8
|
-
<!-- Place anywhere in your HTML -->
|
|
9
|
-
<fiction-self handle="your-handle"></fiction-self>
|
|
10
|
-
|
|
11
|
-
<!-- Load widget script -->
|
|
12
|
-
<script src="https://unpkg.com/@fiction/widget"></script>
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## Features
|
|
16
|
-
|
|
17
|
-
- **Zero Configuration**: Works out of the box with just a handle
|
|
18
|
-
- **Context Adaptation**: Auto-detects page context and adapts personality
|
|
19
|
-
- **Shadow DOM Isolation**: No CSS conflicts with host page
|
|
20
|
-
- **Lightweight**: < 50KB gzipped
|
|
21
|
-
- **Modern Browser Support**: ES2020+, latest Chrome/Firefox/Safari
|
|
22
|
-
|
|
23
|
-
## Usage Examples
|
|
24
|
-
|
|
25
|
-
### Basic Integration
|
|
26
|
-
```html
|
|
27
|
-
<fiction-self handle="andrew"></fiction-self>
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
### Manual Trigger
|
|
31
|
-
```html
|
|
32
|
-
<fiction-self handle="andrew" trigger="manual"></fiction-self>
|
|
33
|
-
<button onclick="openFictionSelf_andrew()">Chat with Andrew</button>
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
### Context Override
|
|
37
|
-
```html
|
|
38
|
-
<fiction-self handle="andrew" context="sales"></fiction-self>
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
### Custom First Message
|
|
42
|
-
```html
|
|
43
|
-
<fiction-self handle="andrew" first-message="Welcome! How can I help?"></fiction-self>
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
## Attributes
|
|
47
|
-
|
|
48
|
-
| Attribute | Type | Default | Description |
|
|
49
|
-
|-----------|------|---------|-------------|
|
|
50
|
-
| `handle` | string | required | User handle to resolve to agent |
|
|
51
|
-
| `mode` | `slideout` \| `inline` | `slideout` | Display mode |
|
|
52
|
-
| `trigger` | `floating` \| `manual` | `floating` | Trigger type |
|
|
53
|
-
| `context` | string | auto-detected | Override context detection |
|
|
54
|
-
| `first-message` | string | auto-generated | Custom greeting message |
|
|
55
|
-
|
|
56
|
-
## Context Detection
|
|
57
|
-
|
|
58
|
-
The widget automatically detects page context and adapts:
|
|
59
|
-
|
|
60
|
-
- **Pricing pages** → Sales conversation
|
|
61
|
-
- **Careers pages** → Hiring persona
|
|
62
|
-
- **Blog posts** → Technical expert
|
|
63
|
-
- **Contact pages** → Partnership discussion
|
|
64
|
-
- **About pages** → Company story
|
|
65
|
-
- **General pages** → Friendly assistant
|
|
3
|
+
Zero-config contextual digital self. One-line integration: `<fiction-self handle="user"></fiction-self>`
|
|
66
4
|
|
|
67
5
|
## Development
|
|
68
6
|
|
|
69
|
-
### Setup
|
|
70
|
-
```bash
|
|
71
|
-
cd src/widget
|
|
72
|
-
pnpm install
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
### Dev Server
|
|
76
7
|
```bash
|
|
77
|
-
pnpm
|
|
78
|
-
#
|
|
8
|
+
pnpm dev:widget # Hot reload SDK + widget + app (use from root)
|
|
9
|
+
pnpm dev # Standalone widget dev server (from src/widget)
|
|
10
|
+
pnpm build # Production IIFE bundle for CDN
|
|
79
11
|
```
|
|
80
12
|
|
|
81
|
-
|
|
82
|
-
```bash
|
|
83
|
-
pnpm run build
|
|
84
|
-
# Outputs to dist/widget.js
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
### Size Check
|
|
88
|
-
```bash
|
|
89
|
-
pnpm run size
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
## Architecture
|
|
93
|
-
|
|
94
|
-
```
|
|
95
|
-
FictionWidget.vue # Main widget orchestrator
|
|
96
|
-
├── SelfAgentWrapper.vue # Handle→agentId resolver + context
|
|
97
|
-
├── Shadow DOM mounting # Isolation layer
|
|
98
|
-
└── Custom element registration
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
### Build Output
|
|
102
|
-
- `dist/widget.js` - IIFE bundle for CDN
|
|
103
|
-
- Includes Vue 3.6+, styles, and all dependencies
|
|
104
|
-
- Optimized for CDN distribution
|
|
105
|
-
|
|
106
|
-
## Browser Support
|
|
107
|
-
|
|
108
|
-
- Chrome 91+
|
|
109
|
-
- Firefox 90+
|
|
110
|
-
- Safari 14+
|
|
111
|
-
- Edge 91+
|
|
13
|
+
## Testing
|
|
112
14
|
|
|
113
|
-
|
|
15
|
+
Playground (`/playground/widget`) tests **built packages**. Run `pnpm sdk:build && pnpm widget:build` first.
|
|
114
16
|
|
|
115
|
-
|
|
17
|
+
**See `.ai/spec-widget.md` for architecture and CDN usage.**
|