@zeroweight/react 0.2.29 → 0.2.30
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 +1 -1
- package/dist/LiveKitAvatarProvider.d.ts.map +1 -1
- package/dist/useAvatarSession.d.ts +1 -0
- package/dist/useAvatarSession.d.ts.map +1 -1
- package/dist/zeroweight-renderer-react.cjs.js +4 -4
- package/dist/zeroweight-renderer-react.cjs.js.map +1 -1
- package/dist/zeroweight-renderer-react.es.js +224 -220
- package/dist/zeroweight-renderer-react.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
import { useMemo as
|
|
2
|
-
import { ZeroWeightRenderer as
|
|
3
|
-
import { jsxs as
|
|
4
|
-
import { useVoiceAssistant as
|
|
1
|
+
import { useMemo as be, useRef as m, useState as x, useCallback as S, useEffect as h } from "react";
|
|
2
|
+
import { ZeroWeightRenderer as Se, ActionQueue as xe, VoiceActivityDetector as ke } from "@zeroweight/renderer";
|
|
3
|
+
import { jsxs as k, jsx as r, Fragment as j } from "react/jsx-runtime";
|
|
4
|
+
import { useVoiceAssistant as we, useLocalParticipant as Ae, useIsSpeaking as Te, useDataChannel as Ie, RoomAudioRenderer as Re, LiveKitRoom as Me } from "@livekit/components-react";
|
|
5
5
|
import "@livekit/components-styles";
|
|
6
|
-
import { Loader2 as
|
|
7
|
-
const
|
|
8
|
-
function
|
|
6
|
+
import { Loader2 as q, MicOff as Ce, Mic as Ee, Power as Le, Activity as De } from "lucide-react";
|
|
7
|
+
const ze = 3e4, Pe = 120, Fe = "wss://prod-project-pazuyq69.livekit.cloud", ne = "https://api.zeroweight.ai";
|
|
8
|
+
function Ue(v) {
|
|
9
9
|
const {
|
|
10
10
|
avatarId: a,
|
|
11
11
|
apiKey: n = null,
|
|
12
|
-
api:
|
|
13
|
-
turnOffMicWhenAISpeaking: d = !
|
|
14
|
-
livekitUrl:
|
|
15
|
-
sessionDuration:
|
|
16
|
-
inactivityTimeout:
|
|
17
|
-
} =
|
|
18
|
-
if (
|
|
12
|
+
api: u,
|
|
13
|
+
turnOffMicWhenAISpeaking: d = !0,
|
|
14
|
+
livekitUrl: w = Fe,
|
|
15
|
+
sessionDuration: p = Pe,
|
|
16
|
+
inactivityTimeout: R = ze
|
|
17
|
+
} = v, L = w, M = be(() => {
|
|
18
|
+
if (u) return u;
|
|
19
19
|
const e = n ? { "X-ZW-Api-Key": n } : void 0;
|
|
20
20
|
return {
|
|
21
21
|
getBundle: async (f) => {
|
|
22
|
-
const
|
|
23
|
-
`${
|
|
22
|
+
const T = await fetch(
|
|
23
|
+
`${ne}/avatars/bundle/${encodeURIComponent(
|
|
24
24
|
f
|
|
25
25
|
)}`,
|
|
26
26
|
{ headers: e }
|
|
27
27
|
);
|
|
28
|
-
if (!
|
|
28
|
+
if (!T.ok)
|
|
29
29
|
throw new Error(
|
|
30
|
-
`Failed to fetch avatar bundle (${
|
|
30
|
+
`Failed to fetch avatar bundle (${T.status} ${T.statusText})`
|
|
31
31
|
);
|
|
32
|
-
return
|
|
32
|
+
return T.json();
|
|
33
33
|
},
|
|
34
34
|
getLiveKitToken: async (f) => {
|
|
35
|
-
const
|
|
35
|
+
const T = new URLSearchParams({
|
|
36
36
|
avatar_id: f,
|
|
37
37
|
name: "anonymuous"
|
|
38
38
|
}), c = await fetch(
|
|
39
|
-
`${
|
|
39
|
+
`${ne}/livekit/token?${T.toString()}`,
|
|
40
40
|
{ headers: e }
|
|
41
41
|
);
|
|
42
42
|
if (!c.ok)
|
|
@@ -46,146 +46,149 @@ function Fe(m) {
|
|
|
46
46
|
return c.json();
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
|
-
}, [
|
|
49
|
+
}, [u, n]), s = m(null), y = m(null), i = m(null), b = m(null), [g, C] = x("idle"), [o, z] = x(null), [A, t] = x(
|
|
50
50
|
/* @__PURE__ */ new Set(["listening"])
|
|
51
|
-
), [
|
|
51
|
+
), [l, U] = x({
|
|
52
52
|
listening: { kind: "looped" },
|
|
53
53
|
speaking: { kind: "looped" }
|
|
54
|
-
}), [
|
|
55
|
-
}), [
|
|
54
|
+
}), [F, P] = x(!1), [$, J] = x(null), [K, O] = x(!1), [W, Z] = x(!1), [ae, N] = x(p), E = m(null), V = m(() => {
|
|
55
|
+
}), [oe, X] = x(!1), [se, Y] = x(0.8), D = m(null), B = g === "ready", G = S(() => {
|
|
56
56
|
const e = s.current;
|
|
57
57
|
if (!e) return null;
|
|
58
58
|
let f = e.querySelector("canvas");
|
|
59
|
-
return f || (f = document.createElement("canvas"), f.style.width = "100%", f.style.height = "100%", f.style.display = "block", e.appendChild(f)),
|
|
59
|
+
return f || (f = document.createElement("canvas"), f.style.width = "100%", f.style.height = "100%", f.style.display = "block", e.appendChild(f)), y.current = f, f;
|
|
60
60
|
}, []);
|
|
61
61
|
h(() => {
|
|
62
62
|
let e = !1;
|
|
63
63
|
return (async () => {
|
|
64
|
-
const
|
|
65
|
-
if (!
|
|
66
|
-
const c = new
|
|
64
|
+
const T = G();
|
|
65
|
+
if (!T) return;
|
|
66
|
+
const c = new Se();
|
|
67
67
|
i.current = c;
|
|
68
|
-
const
|
|
69
|
-
c.play(
|
|
68
|
+
const Q = new xe((I, _) => {
|
|
69
|
+
c.play(I, _);
|
|
70
70
|
});
|
|
71
|
-
|
|
72
|
-
e || C(
|
|
73
|
-
}), c.on("dimensions", (
|
|
74
|
-
e ||
|
|
75
|
-
}), c.on("actionLoaded", (
|
|
76
|
-
e ||
|
|
77
|
-
const
|
|
78
|
-
return
|
|
71
|
+
b.current = Q, c.on("stateChanged", (I) => {
|
|
72
|
+
e || C(I);
|
|
73
|
+
}), c.on("dimensions", (I, _) => {
|
|
74
|
+
e || z({ width: I, height: _ });
|
|
75
|
+
}), c.on("actionLoaded", (I) => {
|
|
76
|
+
e || t((_) => {
|
|
77
|
+
const te = new Set(_);
|
|
78
|
+
return te.add(I), te;
|
|
79
79
|
});
|
|
80
80
|
}), c.on("allActionsLoaded", () => {
|
|
81
|
-
e ||
|
|
81
|
+
e || P(!1);
|
|
82
82
|
}), c.on("ready", () => {
|
|
83
|
-
e || (
|
|
83
|
+
e || (U(c.getActionMetadata()), Q.setActionMetadata(c.getActionMetadata()));
|
|
84
84
|
});
|
|
85
85
|
try {
|
|
86
|
-
|
|
87
|
-
const
|
|
88
|
-
if (e || (await c.init(
|
|
89
|
-
|
|
90
|
-
} catch (
|
|
91
|
-
console.error("[useAvatarSession] Init failed:",
|
|
86
|
+
P(!0);
|
|
87
|
+
const I = await M.getBundle(a);
|
|
88
|
+
if (e || (await c.init(T, { payload: I.payload }), e)) return;
|
|
89
|
+
U(c.getActionMetadata()), Q.setActionMetadata(c.getActionMetadata());
|
|
90
|
+
} catch (I) {
|
|
91
|
+
console.error("[useAvatarSession] Init failed:", I);
|
|
92
92
|
}
|
|
93
93
|
})(), () => {
|
|
94
|
-
e = !0, i.current?.destroy(), i.current = null,
|
|
94
|
+
e = !0, i.current?.destroy(), i.current = null, b.current = null;
|
|
95
95
|
};
|
|
96
|
-
}, [a,
|
|
97
|
-
const
|
|
96
|
+
}, [a, G, M]);
|
|
97
|
+
const ee = m(!1);
|
|
98
98
|
h(() => {
|
|
99
|
-
|
|
100
|
-
}, [
|
|
101
|
-
const ce =
|
|
102
|
-
if (!(
|
|
99
|
+
B && i.current && A.has("wave_hand") && !ee.current && (i.current.play("wave_hand", "listening"), ee.current = !0);
|
|
100
|
+
}, [B, A]);
|
|
101
|
+
const ce = S(async () => {
|
|
102
|
+
if (!(K || W)) {
|
|
103
103
|
O(!0);
|
|
104
104
|
try {
|
|
105
105
|
await navigator.mediaDevices.getUserMedia({ audio: !0 });
|
|
106
|
-
const e = await
|
|
107
|
-
|
|
106
|
+
const e = await M.getLiveKitToken(a);
|
|
107
|
+
J(e.token);
|
|
108
108
|
} catch (e) {
|
|
109
109
|
console.error("[useAvatarSession] Failed to connect:", e), O(!1);
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
|
-
}, [
|
|
113
|
-
|
|
114
|
-
}, [
|
|
112
|
+
}, [K, W, a, M]), H = S(() => {
|
|
113
|
+
E.current && (clearInterval(E.current), E.current = null), N(p), D.current && (clearTimeout(D.current), D.current = null), J(null), Z(!1), O(!1), b.current?.forceListening();
|
|
114
|
+
}, [p]);
|
|
115
115
|
h(() => {
|
|
116
|
-
|
|
117
|
-
}, [
|
|
118
|
-
const le =
|
|
119
|
-
|
|
120
|
-
}, []),
|
|
121
|
-
|
|
122
|
-
|
|
116
|
+
V.current = H;
|
|
117
|
+
}, [H]);
|
|
118
|
+
const le = S(() => {
|
|
119
|
+
Z(!0), O(!1);
|
|
120
|
+
}, []), ue = S(() => {
|
|
121
|
+
E.current && clearInterval(E.current), N(p), E.current = setInterval(() => {
|
|
122
|
+
N((e) => e <= 1 ? (clearInterval(E.current), E.current = null, setTimeout(() => V.current(), 0), 0) : e - 1);
|
|
123
123
|
}, 1e3);
|
|
124
|
-
}, [
|
|
125
|
-
const f = Math.floor(e / 60).toString().padStart(2, "0"),
|
|
126
|
-
return `${f}:${
|
|
124
|
+
}, [p]), de = S((e) => {
|
|
125
|
+
const f = Math.floor(e / 60).toString().padStart(2, "0"), T = (e % 60).toString().padStart(2, "0");
|
|
126
|
+
return `${f}:${T}`;
|
|
127
127
|
}, []);
|
|
128
128
|
h(() => () => {
|
|
129
|
-
|
|
129
|
+
E.current && clearInterval(E.current);
|
|
130
130
|
}, []);
|
|
131
|
-
const pe =
|
|
131
|
+
const pe = S(
|
|
132
132
|
(e) => {
|
|
133
133
|
if (!e) {
|
|
134
|
-
|
|
134
|
+
D.current && (clearTimeout(D.current), D.current = null);
|
|
135
135
|
return;
|
|
136
136
|
}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
},
|
|
137
|
+
D.current || (D.current = setTimeout(() => {
|
|
138
|
+
D.current = null, V.current();
|
|
139
|
+
}, R));
|
|
140
140
|
},
|
|
141
|
-
[
|
|
142
|
-
), fe =
|
|
143
|
-
|
|
144
|
-
}, []), ge =
|
|
145
|
-
|
|
146
|
-
}, []), he =
|
|
147
|
-
|
|
148
|
-
}, []), me =
|
|
141
|
+
[R]
|
|
142
|
+
), fe = S(() => {
|
|
143
|
+
X((e) => !e);
|
|
144
|
+
}, []), ge = S((e) => {
|
|
145
|
+
X(e);
|
|
146
|
+
}, []), he = S((e) => {
|
|
147
|
+
Y(e);
|
|
148
|
+
}, []), me = S(() => {
|
|
149
|
+
Y((e) => e > 0 ? 0 : 1);
|
|
150
|
+
}, []), ve = S(() => {
|
|
149
151
|
i.current?.interrupt();
|
|
150
|
-
}, []),
|
|
152
|
+
}, []), ye = S((e) => {
|
|
151
153
|
i.current?.play(e, "listening");
|
|
152
154
|
}, []);
|
|
153
155
|
return {
|
|
154
156
|
containerRef: s,
|
|
155
157
|
renderer: i.current,
|
|
156
|
-
actionQueue:
|
|
158
|
+
actionQueue: b.current,
|
|
157
159
|
rendererState: g,
|
|
158
160
|
avatarDimensions: o,
|
|
159
|
-
loadedActions:
|
|
160
|
-
actionMetadata:
|
|
161
|
-
isLoadingActions:
|
|
162
|
-
isEngineReady:
|
|
163
|
-
token:
|
|
164
|
-
isConnecting:
|
|
165
|
-
isConnected:
|
|
166
|
-
livekitUrl:
|
|
167
|
-
timeRemaining:
|
|
168
|
-
formatTime:
|
|
169
|
-
micMuted:
|
|
161
|
+
loadedActions: A,
|
|
162
|
+
actionMetadata: l,
|
|
163
|
+
isLoadingActions: F,
|
|
164
|
+
isEngineReady: B,
|
|
165
|
+
token: $,
|
|
166
|
+
isConnecting: K,
|
|
167
|
+
isConnected: W,
|
|
168
|
+
livekitUrl: L,
|
|
169
|
+
timeRemaining: ae,
|
|
170
|
+
formatTime: de,
|
|
171
|
+
micMuted: oe,
|
|
170
172
|
volume: se,
|
|
171
173
|
turnOffMicWhenAISpeaking: d,
|
|
172
174
|
connect: ce,
|
|
173
|
-
disconnect:
|
|
175
|
+
disconnect: H,
|
|
174
176
|
toggleMic: fe,
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
177
|
+
setMicMuted: ge,
|
|
178
|
+
setVolume: he,
|
|
179
|
+
toggleVolume: me,
|
|
180
|
+
interrupt: ve,
|
|
181
|
+
runAction: ye,
|
|
182
|
+
startSessionTimer: ue,
|
|
180
183
|
markConnected: le,
|
|
181
184
|
setInactivityActive: pe
|
|
182
185
|
};
|
|
183
186
|
}
|
|
184
|
-
const
|
|
185
|
-
session:
|
|
187
|
+
const _e = ({
|
|
188
|
+
session: v,
|
|
186
189
|
style: a,
|
|
187
190
|
loadingContent: n
|
|
188
|
-
}) => /* @__PURE__ */
|
|
191
|
+
}) => /* @__PURE__ */ k(
|
|
189
192
|
"div",
|
|
190
193
|
{
|
|
191
194
|
style: {
|
|
@@ -215,14 +218,14 @@ const Ue = ({
|
|
|
215
218
|
/* @__PURE__ */ r(
|
|
216
219
|
"div",
|
|
217
220
|
{
|
|
218
|
-
ref:
|
|
221
|
+
ref: v.containerRef,
|
|
219
222
|
style: {
|
|
220
223
|
position: "relative",
|
|
221
224
|
width: "100%",
|
|
222
225
|
height: "100%",
|
|
223
226
|
transition: "all 0.5s ease-in-out"
|
|
224
227
|
},
|
|
225
|
-
children: !
|
|
228
|
+
children: !v.isEngineReady && /* @__PURE__ */ r(
|
|
226
229
|
"div",
|
|
227
230
|
{
|
|
228
231
|
style: {
|
|
@@ -235,7 +238,7 @@ const Ue = ({
|
|
|
235
238
|
backdropFilter: "blur(4px)",
|
|
236
239
|
zIndex: 10
|
|
237
240
|
},
|
|
238
|
-
children: n || /* @__PURE__ */
|
|
241
|
+
children: n || /* @__PURE__ */ k(
|
|
239
242
|
"div",
|
|
240
243
|
{
|
|
241
244
|
style: {
|
|
@@ -246,7 +249,7 @@ const Ue = ({
|
|
|
246
249
|
},
|
|
247
250
|
children: [
|
|
248
251
|
/* @__PURE__ */ r(
|
|
249
|
-
|
|
252
|
+
q,
|
|
250
253
|
{
|
|
251
254
|
style: {
|
|
252
255
|
width: 40,
|
|
@@ -279,7 +282,7 @@ const Ue = ({
|
|
|
279
282
|
)
|
|
280
283
|
]
|
|
281
284
|
}
|
|
282
|
-
),
|
|
285
|
+
), re = {
|
|
283
286
|
flexShrink: 0,
|
|
284
287
|
borderRadius: 9999,
|
|
285
288
|
padding: 16,
|
|
@@ -289,7 +292,7 @@ const Ue = ({
|
|
|
289
292
|
display: "inline-flex",
|
|
290
293
|
alignItems: "center",
|
|
291
294
|
justifyContent: "center"
|
|
292
|
-
},
|
|
295
|
+
}, ie = {
|
|
293
296
|
position: "relative",
|
|
294
297
|
display: "inline-flex",
|
|
295
298
|
alignItems: "center",
|
|
@@ -304,41 +307,41 @@ const Ue = ({
|
|
|
304
307
|
transition: "all 0.3s",
|
|
305
308
|
border: "none",
|
|
306
309
|
cursor: "pointer"
|
|
307
|
-
},
|
|
308
|
-
session:
|
|
310
|
+
}, je = ({
|
|
311
|
+
session: v,
|
|
309
312
|
style: a
|
|
310
313
|
}) => {
|
|
311
314
|
const {
|
|
312
315
|
micMuted: n,
|
|
313
|
-
toggleMic:
|
|
316
|
+
toggleMic: u,
|
|
314
317
|
isConnected: d,
|
|
315
|
-
isConnecting:
|
|
316
|
-
isEngineReady:
|
|
317
|
-
loadedActions:
|
|
318
|
-
connect:
|
|
319
|
-
disconnect:
|
|
320
|
-
} =
|
|
321
|
-
...
|
|
318
|
+
isConnecting: w,
|
|
319
|
+
isEngineReady: p,
|
|
320
|
+
loadedActions: R,
|
|
321
|
+
connect: L,
|
|
322
|
+
disconnect: M
|
|
323
|
+
} = v, [s, y] = x(!1), [i, b] = x(!1), g = p && R.has("listening") && R.has("speaking"), C = n ? {
|
|
324
|
+
...re,
|
|
322
325
|
background: "rgba(239,68,68,0.1)",
|
|
323
326
|
color: "#f87171",
|
|
324
327
|
boxShadow: "inset 0 0 0 1px rgba(239,68,68,0.3)",
|
|
325
328
|
...s ? { background: "rgba(239,68,68,0.2)" } : {}
|
|
326
329
|
} : {
|
|
327
|
-
...
|
|
330
|
+
...re,
|
|
328
331
|
background: s ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.4)",
|
|
329
332
|
color: "#fff",
|
|
330
333
|
boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.1)"
|
|
331
334
|
}, o = d ? {
|
|
332
|
-
...
|
|
335
|
+
...ie,
|
|
333
336
|
background: i ? "rgba(239,68,68,0.22)" : "rgba(239,68,68,0.14)",
|
|
334
337
|
boxShadow: "inset 0 0 0 1px rgba(239,68,68,0.5), 0 0 20px rgba(239,68,68,0.2)"
|
|
335
338
|
} : {
|
|
336
|
-
...
|
|
339
|
+
...ie,
|
|
337
340
|
background: "linear-gradient(to right, #7c3aed, #db2777, #f97316)",
|
|
338
341
|
boxShadow: "0 0 30px rgba(236,72,153,0.3)",
|
|
339
342
|
opacity: i ? 0.9 : 1
|
|
340
343
|
};
|
|
341
|
-
return (
|
|
344
|
+
return (w || !g) && (o.opacity = 0.5, o.cursor = "not-allowed"), /* @__PURE__ */ k(
|
|
342
345
|
"div",
|
|
343
346
|
{
|
|
344
347
|
style: {
|
|
@@ -358,7 +361,7 @@ const Ue = ({
|
|
|
358
361
|
to { transform: rotate(360deg); }
|
|
359
362
|
}
|
|
360
363
|
` }),
|
|
361
|
-
/* @__PURE__ */
|
|
364
|
+
/* @__PURE__ */ k(
|
|
362
365
|
"div",
|
|
363
366
|
{
|
|
364
367
|
style: {
|
|
@@ -375,34 +378,34 @@ const Ue = ({
|
|
|
375
378
|
"button",
|
|
376
379
|
{
|
|
377
380
|
type: "button",
|
|
378
|
-
onClick:
|
|
379
|
-
onMouseEnter: () =>
|
|
380
|
-
onMouseLeave: () =>
|
|
381
|
+
onClick: u,
|
|
382
|
+
onMouseEnter: () => y(!0),
|
|
383
|
+
onMouseLeave: () => y(!1),
|
|
381
384
|
style: C,
|
|
382
385
|
title: n ? "Unmute mic" : "Mute mic",
|
|
383
|
-
children: n ? /* @__PURE__ */ r(Ce, { size: 24 }) : /* @__PURE__ */ r(
|
|
386
|
+
children: n ? /* @__PURE__ */ r(Ce, { size: 24 }) : /* @__PURE__ */ r(Ee, { size: 24 })
|
|
384
387
|
}
|
|
385
388
|
),
|
|
386
389
|
/* @__PURE__ */ r(
|
|
387
390
|
"button",
|
|
388
391
|
{
|
|
389
392
|
type: "button",
|
|
390
|
-
onClick: d ?
|
|
391
|
-
onMouseEnter: () =>
|
|
392
|
-
onMouseLeave: () =>
|
|
393
|
-
disabled: !d && (
|
|
393
|
+
onClick: d ? M : L,
|
|
394
|
+
onMouseEnter: () => b(!0),
|
|
395
|
+
onMouseLeave: () => b(!1),
|
|
396
|
+
disabled: !d && (w || !g),
|
|
394
397
|
style: o,
|
|
395
|
-
children:
|
|
396
|
-
/* @__PURE__ */ r(
|
|
398
|
+
children: w ? /* @__PURE__ */ k(j, { children: [
|
|
399
|
+
/* @__PURE__ */ r(q, { size: 20, style: { animation: "zwr-spin 1s linear infinite" } }),
|
|
397
400
|
/* @__PURE__ */ r("span", { children: "Connecting..." })
|
|
398
|
-
] }) : !d && !g ? /* @__PURE__ */
|
|
399
|
-
/* @__PURE__ */ r(
|
|
401
|
+
] }) : !d && !g ? /* @__PURE__ */ k(j, { children: [
|
|
402
|
+
/* @__PURE__ */ r(q, { size: 20, style: { animation: "zwr-spin 1s linear infinite" } }),
|
|
400
403
|
/* @__PURE__ */ r("span", { children: "Loading Avatar..." })
|
|
401
|
-
] }) : d ? /* @__PURE__ */
|
|
402
|
-
/* @__PURE__ */ r(Ee, { size: 20 }),
|
|
403
|
-
/* @__PURE__ */ r("span", { children: "End Session" })
|
|
404
|
-
] }) : /* @__PURE__ */ x(U, { children: [
|
|
404
|
+
] }) : d ? /* @__PURE__ */ k(j, { children: [
|
|
405
405
|
/* @__PURE__ */ r(Le, { size: 20 }),
|
|
406
|
+
/* @__PURE__ */ r("span", { children: "End Session" })
|
|
407
|
+
] }) : /* @__PURE__ */ k(j, { children: [
|
|
408
|
+
/* @__PURE__ */ r(De, { size: 20 }),
|
|
406
409
|
/* @__PURE__ */ r("span", { children: "Start Session" })
|
|
407
410
|
] })
|
|
408
411
|
}
|
|
@@ -413,10 +416,10 @@ const Ue = ({
|
|
|
413
416
|
]
|
|
414
417
|
}
|
|
415
418
|
);
|
|
416
|
-
},
|
|
417
|
-
session:
|
|
419
|
+
}, Oe = ({
|
|
420
|
+
session: v
|
|
418
421
|
}) => {
|
|
419
|
-
const { isConnected: a, timeRemaining: n, formatTime:
|
|
422
|
+
const { isConnected: a, timeRemaining: n, formatTime: u } = v, d = a && n <= 30, w = a && n > 30 && n <= 60, p = {
|
|
420
423
|
display: "flex",
|
|
421
424
|
alignItems: "center",
|
|
422
425
|
gap: 8,
|
|
@@ -431,7 +434,7 @@ const Ue = ({
|
|
|
431
434
|
borderColor: "rgba(239,68,68,0.4)",
|
|
432
435
|
boxShadow: "0 0 15px rgba(239,68,68,0.3)",
|
|
433
436
|
animation: "zwr-pulse 2s ease-in-out infinite"
|
|
434
|
-
} :
|
|
437
|
+
} : w ? {
|
|
435
438
|
background: "rgba(249,115,22,0.2)",
|
|
436
439
|
borderColor: "rgba(249,115,22,0.3)",
|
|
437
440
|
boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
|
|
@@ -441,14 +444,14 @@ const Ue = ({
|
|
|
441
444
|
boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
|
|
442
445
|
}
|
|
443
446
|
};
|
|
444
|
-
return /* @__PURE__ */
|
|
447
|
+
return /* @__PURE__ */ k(j, { children: [
|
|
445
448
|
/* @__PURE__ */ r("style", { children: `
|
|
446
449
|
@keyframes zwr-pulse {
|
|
447
450
|
0%, 100% { opacity: 1; }
|
|
448
451
|
50% { opacity: 0.5; }
|
|
449
452
|
}
|
|
450
453
|
` }),
|
|
451
|
-
/* @__PURE__ */
|
|
454
|
+
/* @__PURE__ */ k("div", { style: p, children: [
|
|
452
455
|
/* @__PURE__ */ r(
|
|
453
456
|
"div",
|
|
454
457
|
{
|
|
@@ -475,37 +478,37 @@ const Ue = ({
|
|
|
475
478
|
color: "rgba(255,255,255,0.7)",
|
|
476
479
|
textTransform: "uppercase"
|
|
477
480
|
},
|
|
478
|
-
children: a ? `Online ${
|
|
481
|
+
children: a ? `Online ${u(n)}` : "Offline"
|
|
479
482
|
}
|
|
480
483
|
)
|
|
481
484
|
] })
|
|
482
485
|
] });
|
|
483
|
-
},
|
|
484
|
-
session:
|
|
486
|
+
}, $e = ({
|
|
487
|
+
session: v
|
|
485
488
|
}) => {
|
|
486
|
-
const { renderer: a, actionQueue: n, micMuted:
|
|
489
|
+
const { renderer: a, actionQueue: n, micMuted: u, volume: d, setInactivityActive: w, loadedActions: p } = v, { turnOffMicWhenAISpeaking: R, setMicMuted: L } = v, M = m(!1), { state: s, audioTrack: y } = we(), i = Ae(), b = Te(i.localParticipant), g = m(null), C = m(p);
|
|
487
490
|
h(() => {
|
|
488
|
-
C.current =
|
|
489
|
-
}, [
|
|
491
|
+
C.current = p;
|
|
492
|
+
}, [p]), h(() => {
|
|
490
493
|
const t = i.localParticipant;
|
|
491
494
|
if (!a || !t) return;
|
|
492
|
-
const
|
|
493
|
-
return a.onOneshotComplete((
|
|
494
|
-
const P =
|
|
495
|
+
const l = new TextEncoder();
|
|
496
|
+
return a.onOneshotComplete((F) => {
|
|
497
|
+
const P = l.encode(
|
|
495
498
|
JSON.stringify({
|
|
496
499
|
type: "ACTION_FINISHED",
|
|
497
|
-
action:
|
|
500
|
+
action: F
|
|
498
501
|
})
|
|
499
502
|
);
|
|
500
503
|
t.publishData(P, {
|
|
501
504
|
reliable: !0
|
|
502
|
-
}).catch((
|
|
503
|
-
console.error("[LiveKitAvatarProvider] Failed to publish action completion:",
|
|
505
|
+
}).catch(($) => {
|
|
506
|
+
console.error("[LiveKitAvatarProvider] Failed to publish action completion:", $);
|
|
504
507
|
});
|
|
505
508
|
});
|
|
506
509
|
}, [a, i.localParticipant]), h(() => {
|
|
507
510
|
if (!n) return;
|
|
508
|
-
const t = new
|
|
511
|
+
const t = new ke({
|
|
509
512
|
threshold: 8e-3,
|
|
510
513
|
analyseIntervalMs: 30,
|
|
511
514
|
speechStartFrames: 1,
|
|
@@ -522,13 +525,13 @@ const Ue = ({
|
|
|
522
525
|
}, [n]), h(() => {
|
|
523
526
|
const t = g.current;
|
|
524
527
|
if (t)
|
|
525
|
-
if (
|
|
526
|
-
const
|
|
527
|
-
|
|
528
|
+
if (y?.publication?.track) {
|
|
529
|
+
const l = y.publication.track.mediaStreamTrack;
|
|
530
|
+
l && t.start(l);
|
|
528
531
|
} else
|
|
529
532
|
t.stop();
|
|
530
|
-
}, [
|
|
531
|
-
const o =
|
|
533
|
+
}, [y?.publication?.track]);
|
|
534
|
+
const o = m(null), z = m(!1), A = m(!1);
|
|
532
535
|
return h(() => {
|
|
533
536
|
if (!n) return;
|
|
534
537
|
const t = s;
|
|
@@ -536,71 +539,72 @@ const Ue = ({
|
|
|
536
539
|
o.current = null, g.current?.endTurn(), n.setTurnActive(!1);
|
|
537
540
|
}, 500)));
|
|
538
541
|
}, [s, n]), h(() => {
|
|
539
|
-
|
|
540
|
-
|
|
542
|
+
const t = s === "speaking";
|
|
543
|
+
if (!R) {
|
|
544
|
+
z.current = t, A.current = !1;
|
|
541
545
|
return;
|
|
542
546
|
}
|
|
543
|
-
const
|
|
544
|
-
(!
|
|
545
|
-
}, [
|
|
547
|
+
const l = z.current;
|
|
548
|
+
!l && t ? u ? A.current = !1 : (L(!0), A.current = !0) : l && t ? A.current && !u && (A.current = !1) : l && !t && (A.current && L(!1), A.current = !1), z.current = t;
|
|
549
|
+
}, [u, L, s, R]), h(() => () => {
|
|
546
550
|
o.current && clearTimeout(o.current);
|
|
547
|
-
}, []),
|
|
551
|
+
}, []), Ie((t) => {
|
|
548
552
|
try {
|
|
549
|
-
const
|
|
550
|
-
if (
|
|
551
|
-
const P =
|
|
553
|
+
const U = new TextDecoder().decode(t.payload), F = JSON.parse(U);
|
|
554
|
+
if (F.type === "AVATAR_UPDATE") {
|
|
555
|
+
const P = F.action;
|
|
552
556
|
if (!C.current.has(P))
|
|
553
557
|
return;
|
|
554
558
|
n?.dispatch(P);
|
|
555
559
|
}
|
|
556
|
-
} catch (
|
|
557
|
-
console.error("[LiveKitAvatarProvider] Failed to parse data message:",
|
|
560
|
+
} catch (l) {
|
|
561
|
+
console.error("[LiveKitAvatarProvider] Failed to parse data message:", l);
|
|
558
562
|
}
|
|
559
563
|
}), h(() => {
|
|
560
|
-
|
|
561
|
-
}, [
|
|
564
|
+
w(!(s === "speaking") && !b);
|
|
565
|
+
}, [b, w, s]), h(() => {
|
|
562
566
|
if (!n) return;
|
|
563
|
-
const t = !!
|
|
564
|
-
(!t || s === "disconnected") && (g.current?.endTurn(), n.forceListening()),
|
|
565
|
-
}, [
|
|
567
|
+
const t = !!y;
|
|
568
|
+
(!t || s === "disconnected") && (g.current?.endTurn(), n.forceListening()), M.current = t;
|
|
569
|
+
}, [y, s, n]), h(() => {
|
|
566
570
|
const t = i.localParticipant;
|
|
567
|
-
t && t.setMicrophoneEnabled(!
|
|
568
|
-
console.error("[LiveKitAvatarProvider] Failed to set mic state:",
|
|
571
|
+
t && t.setMicrophoneEnabled(!u).catch((l) => {
|
|
572
|
+
console.error("[LiveKitAvatarProvider] Failed to set mic state:", l);
|
|
569
573
|
});
|
|
570
|
-
}, [
|
|
571
|
-
},
|
|
572
|
-
avatarId:
|
|
574
|
+
}, [u, i.localParticipant]), /* @__PURE__ */ r("div", { style: { position: "absolute", bottom: 80, left: 8, right: 8, display: "flex", flexDirection: "column", gap: 8 }, children: /* @__PURE__ */ r(Re, { volume: d }) });
|
|
575
|
+
}, Qe = ({
|
|
576
|
+
avatarId: v,
|
|
573
577
|
apiKey: a,
|
|
574
578
|
api: n,
|
|
575
|
-
turnOffMicWhenAISpeaking:
|
|
579
|
+
turnOffMicWhenAISpeaking: u,
|
|
576
580
|
livekitUrl: d,
|
|
577
|
-
sessionDuration:
|
|
578
|
-
inactivityTimeout:
|
|
579
|
-
style:
|
|
580
|
-
className:
|
|
581
|
-
loadingContent:
|
|
581
|
+
sessionDuration: w,
|
|
582
|
+
inactivityTimeout: p,
|
|
583
|
+
style: R,
|
|
584
|
+
className: L,
|
|
585
|
+
loadingContent: M,
|
|
582
586
|
customControls: s,
|
|
583
|
-
customStatusBadge:
|
|
587
|
+
customStatusBadge: y
|
|
584
588
|
}) => {
|
|
585
|
-
const i =
|
|
586
|
-
avatarId:
|
|
589
|
+
const i = Ue({
|
|
590
|
+
avatarId: v,
|
|
587
591
|
apiKey: a,
|
|
588
592
|
api: n,
|
|
589
|
-
turnOffMicWhenAISpeaking:
|
|
593
|
+
turnOffMicWhenAISpeaking: u,
|
|
590
594
|
livekitUrl: d,
|
|
591
|
-
sessionDuration:
|
|
592
|
-
inactivityTimeout:
|
|
595
|
+
sessionDuration: w,
|
|
596
|
+
inactivityTimeout: p
|
|
593
597
|
}), {
|
|
594
|
-
token:
|
|
598
|
+
token: b,
|
|
595
599
|
isConnected: g,
|
|
596
600
|
avatarDimensions: C,
|
|
597
601
|
disconnect: o,
|
|
598
|
-
startSessionTimer:
|
|
602
|
+
startSessionTimer: z
|
|
599
603
|
} = i;
|
|
600
|
-
return /* @__PURE__ */
|
|
604
|
+
return /* @__PURE__ */ k(
|
|
601
605
|
"section",
|
|
602
606
|
{
|
|
603
|
-
className:
|
|
607
|
+
className: L,
|
|
604
608
|
style: {
|
|
605
609
|
position: "relative",
|
|
606
610
|
display: "flex",
|
|
@@ -615,11 +619,11 @@ const Ue = ({
|
|
|
615
619
|
width: "auto",
|
|
616
620
|
maxWidth: "100%",
|
|
617
621
|
aspectRatio: C ? `${C.width} / ${C.height}` : "3 / 4",
|
|
618
|
-
...
|
|
622
|
+
...R
|
|
619
623
|
},
|
|
620
624
|
children: [
|
|
621
|
-
/* @__PURE__ */ r(
|
|
622
|
-
/* @__PURE__ */
|
|
625
|
+
/* @__PURE__ */ r(_e, { session: i, loadingContent: M }),
|
|
626
|
+
/* @__PURE__ */ k(
|
|
623
627
|
"div",
|
|
624
628
|
{
|
|
625
629
|
style: {
|
|
@@ -633,7 +637,7 @@ const Ue = ({
|
|
|
633
637
|
padding: 16
|
|
634
638
|
},
|
|
635
639
|
children: [
|
|
636
|
-
/* @__PURE__ */
|
|
640
|
+
/* @__PURE__ */ k(
|
|
637
641
|
"div",
|
|
638
642
|
{
|
|
639
643
|
style: {
|
|
@@ -643,28 +647,28 @@ const Ue = ({
|
|
|
643
647
|
justifyContent: "space-between"
|
|
644
648
|
},
|
|
645
649
|
children: [
|
|
646
|
-
|
|
650
|
+
y ? y(i) : /* @__PURE__ */ r(Oe, { session: i }),
|
|
647
651
|
/* @__PURE__ */ r("div", {})
|
|
648
652
|
]
|
|
649
653
|
}
|
|
650
654
|
),
|
|
651
|
-
s ? s(i) : /* @__PURE__ */ r(
|
|
655
|
+
s ? s(i) : /* @__PURE__ */ r(je, { session: i })
|
|
652
656
|
]
|
|
653
657
|
}
|
|
654
658
|
),
|
|
655
|
-
/* @__PURE__ */ r("div", { style: { display: "none" }, children:
|
|
656
|
-
|
|
659
|
+
/* @__PURE__ */ r("div", { style: { display: "none" }, children: b && d && /* @__PURE__ */ r(
|
|
660
|
+
Me,
|
|
657
661
|
{
|
|
658
662
|
serverUrl: d,
|
|
659
|
-
token:
|
|
663
|
+
token: b,
|
|
660
664
|
connect: !0,
|
|
661
665
|
video: !1,
|
|
662
666
|
audio: !0,
|
|
663
667
|
onConnected: () => {
|
|
664
|
-
i.markConnected(),
|
|
668
|
+
i.markConnected(), z();
|
|
665
669
|
},
|
|
666
670
|
onDisconnected: o,
|
|
667
|
-
children: /* @__PURE__ */ r(
|
|
671
|
+
children: /* @__PURE__ */ r($e, { session: i })
|
|
668
672
|
}
|
|
669
673
|
) })
|
|
670
674
|
]
|
|
@@ -672,11 +676,11 @@ const Ue = ({
|
|
|
672
676
|
);
|
|
673
677
|
};
|
|
674
678
|
export {
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
679
|
+
_e as AvatarCanvas,
|
|
680
|
+
je as AvatarControls,
|
|
681
|
+
Oe as AvatarStatusBadge,
|
|
682
|
+
$e as LiveKitAvatarProvider,
|
|
683
|
+
Qe as LiveKitAvatarSession,
|
|
684
|
+
Ue as useAvatarSession
|
|
681
685
|
};
|
|
682
686
|
//# sourceMappingURL=zeroweight-renderer-react.es.js.map
|