@avatarfirst/react 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 +75 -0
- package/dist/index.cjs +1731 -0
- package/dist/index.d.cts +430 -0
- package/dist/index.d.ts +430 -0
- package/dist/index.js +1674 -0
- package/package.json +42 -0
package/README.md
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# @avatarfirst/react
|
|
2
|
+
|
|
3
|
+
React bindings for the AvatarFirst SDK -- hooks, components, and pre-built overlay UIs.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **AvatarProvider / AvatarAgent** -- context providers syncing SDK state to React
|
|
8
|
+
- **AvatarView** -- streaming avatar display with fallback animations
|
|
9
|
+
- **Hooks** -- `useAvatar()`, `useOverlay()`, `useAvatarEvent()`, `useAction()`
|
|
10
|
+
- **Overlay components** -- CardOverlay, FormOverlay, TableOverlay, ProgressOverlay, ConfirmOverlay, ChatOverlay, InsightOverlay
|
|
11
|
+
- **Animations** -- motion variants and overlay animation presets
|
|
12
|
+
- **Utilities** -- `cn()` for className merging
|
|
13
|
+
|
|
14
|
+
## Quickstart
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import { createAvatarAgent, HeyGenAdapter, defineAction } from '@avatarfirst/core'
|
|
18
|
+
import { AvatarAgent, AvatarView, CardOverlay } from '@avatarfirst/react'
|
|
19
|
+
|
|
20
|
+
const agent = createAvatarAgent({
|
|
21
|
+
engine: new HeyGenAdapter(),
|
|
22
|
+
engineConfig: { serverUrl: 'http://localhost:3001' },
|
|
23
|
+
actions: [
|
|
24
|
+
defineAction({
|
|
25
|
+
id: 'welcome',
|
|
26
|
+
name: 'Welcome',
|
|
27
|
+
trigger: { type: 'state', state: 'connected' },
|
|
28
|
+
effect: {
|
|
29
|
+
speak: 'Welcome!',
|
|
30
|
+
overlay: {
|
|
31
|
+
id: 'welcome',
|
|
32
|
+
component: 'card',
|
|
33
|
+
data: { title: 'Hello!' },
|
|
34
|
+
position: 'bottom-center',
|
|
35
|
+
animation: 'slide-up',
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
}),
|
|
39
|
+
],
|
|
40
|
+
})
|
|
41
|
+
|
|
42
|
+
function App() {
|
|
43
|
+
return (
|
|
44
|
+
<AvatarAgent config={agent} overlayComponents={{ card: CardOverlay }}>
|
|
45
|
+
<AvatarView size="fullscreen" />
|
|
46
|
+
</AvatarAgent>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Hooks
|
|
52
|
+
|
|
53
|
+
### `useAvatar()`
|
|
54
|
+
Access avatar state and controls: `state`, `isConnected`, `speak()`, `message()`, `start()`, `stop()`, etc.
|
|
55
|
+
|
|
56
|
+
### `useOverlay(overlayId?)`
|
|
57
|
+
Manage overlays: `overlays`, `isVisible`, `show()`, `hide()`.
|
|
58
|
+
|
|
59
|
+
### `useAvatarEvent(event, handler)`
|
|
60
|
+
Subscribe to engine events reactively.
|
|
61
|
+
|
|
62
|
+
### `useAction()`
|
|
63
|
+
Trigger actions programmatically: `trigger(actionId)`.
|
|
64
|
+
|
|
65
|
+
## Overlay Components
|
|
66
|
+
|
|
67
|
+
| Component | Description |
|
|
68
|
+
|-----------|-------------|
|
|
69
|
+
| `CardOverlay` | Title, items list, action buttons |
|
|
70
|
+
| `FormOverlay` | Dynamic form fields |
|
|
71
|
+
| `TableOverlay` | Tabular data display |
|
|
72
|
+
| `ProgressOverlay` | Step-by-step progress tracker |
|
|
73
|
+
| `ConfirmOverlay` | Yes/No confirmation dialog |
|
|
74
|
+
| `ChatOverlay` | Chat message interface |
|
|
75
|
+
| `InsightOverlay` | AI insights with confidence scores |
|