@livelayer/react 0.2.2 → 0.2.3
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/dist/index.js +1 -1
- package/dist/index.mjs +419 -422
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { Component as Ze, useState as
|
|
2
|
+
import { jsxs as b, jsx as e, Fragment as Qe } from "react/jsx-runtime";
|
|
3
|
+
import { Component as Ze, useState as k, useRef as L, useEffect as S, useCallback as g, useMemo as Se } from "react";
|
|
4
4
|
import { LiveKitSession as et } from "@livelayer/sdk";
|
|
5
5
|
import { createLocalAudioTrack as tt, Track as Oe, createLocalVideoTrack as nt } from "livekit-client";
|
|
6
6
|
class rt extends Ze {
|
|
@@ -18,7 +18,7 @@ class rt extends Ze {
|
|
|
18
18
|
}
|
|
19
19
|
render() {
|
|
20
20
|
var n;
|
|
21
|
-
return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */
|
|
21
|
+
return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ b("div", { className: "ll-error-boundary", role: "alert", children: [
|
|
22
22
|
/* @__PURE__ */ e("p", { className: "ll-error-boundary__title", children: "Widget crashed" }),
|
|
23
23
|
/* @__PURE__ */ e("p", { className: "ll-error-boundary__message", children: ((n = this.state.error) == null ? void 0 : n.message) || "Something went wrong." }),
|
|
24
24
|
/* @__PURE__ */ e(
|
|
@@ -34,25 +34,25 @@ class rt extends Ze {
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
function it(t) {
|
|
37
|
-
const [n, i] =
|
|
38
|
-
R.current = t.onDataMessage,
|
|
39
|
-
const
|
|
37
|
+
const [n, i] = k("idle"), [o, r] = k("idle"), [s, c] = k([]), [m, d] = k(null), [f, h] = k(null), [l, a] = k(null), [C, _] = k(!1), [N, D] = k(null), E = L(null), R = L(t.onDataMessage);
|
|
38
|
+
R.current = t.onDataMessage, S(() => {
|
|
39
|
+
const w = {
|
|
40
40
|
onConnectionStateChange: (y) => {
|
|
41
41
|
i(y), y === "connected" && D(null);
|
|
42
42
|
},
|
|
43
43
|
onAgentStateChange: r,
|
|
44
44
|
onTranscript: (y) => c([...y]),
|
|
45
45
|
onAgentConfig: d,
|
|
46
|
-
onAudioTrack: (y) =>
|
|
47
|
-
onVideoTrack: (y) =>
|
|
48
|
-
onVideoTrackRemoved: () =>
|
|
46
|
+
onAudioTrack: (y) => a(y),
|
|
47
|
+
onVideoTrack: (y) => h(y),
|
|
48
|
+
onVideoTrackRemoved: () => h(null),
|
|
49
49
|
onError: (y) => D(y),
|
|
50
50
|
onDataMessage: (y) => {
|
|
51
51
|
var A;
|
|
52
52
|
(A = R.current) == null || A.call(R, y);
|
|
53
53
|
},
|
|
54
54
|
onResumabilityChange: _
|
|
55
|
-
},
|
|
55
|
+
}, x = new et(
|
|
56
56
|
{
|
|
57
57
|
agentId: t.agentId,
|
|
58
58
|
baseUrl: t.baseUrl,
|
|
@@ -60,11 +60,11 @@ function it(t) {
|
|
|
60
60
|
sessionEndpoint: t.sessionEndpoint,
|
|
61
61
|
sessionBody: t.sessionBody
|
|
62
62
|
},
|
|
63
|
-
|
|
63
|
+
w
|
|
64
64
|
);
|
|
65
|
-
return E.current =
|
|
65
|
+
return E.current = x, i("idle"), r("idle"), c([]), d(null), h(null), a(null), _(!1), D(null), () => {
|
|
66
66
|
var y;
|
|
67
|
-
(y =
|
|
67
|
+
(y = x.destroy) == null || y.call(x), E.current = null;
|
|
68
68
|
};
|
|
69
69
|
}, [
|
|
70
70
|
t.agentId,
|
|
@@ -73,29 +73,29 @@ function it(t) {
|
|
|
73
73
|
t.sessionEndpoint,
|
|
74
74
|
JSON.stringify(t.sessionBody ?? {})
|
|
75
75
|
]);
|
|
76
|
-
const T =
|
|
77
|
-
const
|
|
78
|
-
if (
|
|
76
|
+
const T = g(async () => {
|
|
77
|
+
const w = E.current;
|
|
78
|
+
if (w)
|
|
79
79
|
try {
|
|
80
|
-
await
|
|
81
|
-
} catch (
|
|
82
|
-
throw D(
|
|
80
|
+
await w.connect();
|
|
81
|
+
} catch (x) {
|
|
82
|
+
throw D(x instanceof Error ? x.message : String(x)), x;
|
|
83
83
|
}
|
|
84
|
-
}, []), z =
|
|
85
|
-
const
|
|
86
|
-
|
|
87
|
-
}, []), I =
|
|
88
|
-
var
|
|
89
|
-
return ((
|
|
84
|
+
}, []), z = g(() => {
|
|
85
|
+
const w = E.current;
|
|
86
|
+
w && w.disconnect();
|
|
87
|
+
}, []), I = g(() => {
|
|
88
|
+
var w;
|
|
89
|
+
return ((w = E.current) == null ? void 0 : w.getRoom()) ?? null;
|
|
90
90
|
}, []);
|
|
91
91
|
return {
|
|
92
92
|
connectionState: n,
|
|
93
93
|
agentState: o,
|
|
94
|
-
transcript:
|
|
94
|
+
transcript: s,
|
|
95
95
|
agentConfig: m,
|
|
96
|
-
videoElement:
|
|
97
|
-
audioElement:
|
|
98
|
-
canResume:
|
|
96
|
+
videoElement: f,
|
|
97
|
+
audioElement: l,
|
|
98
|
+
canResume: C,
|
|
99
99
|
error: N,
|
|
100
100
|
connect: T,
|
|
101
101
|
disconnect: z,
|
|
@@ -104,20 +104,20 @@ function it(t) {
|
|
|
104
104
|
};
|
|
105
105
|
}
|
|
106
106
|
function ot() {
|
|
107
|
-
const t =
|
|
108
|
-
const
|
|
109
|
-
if (!
|
|
107
|
+
const t = L(null), n = L(null), i = L(null), o = L(null), r = L(/* @__PURE__ */ new Set()), s = L(null), c = g(() => {
|
|
108
|
+
const l = n.current;
|
|
109
|
+
if (!l) {
|
|
110
110
|
o.current = null;
|
|
111
111
|
return;
|
|
112
112
|
}
|
|
113
|
-
(!
|
|
114
|
-
new ArrayBuffer(
|
|
113
|
+
(!s.current || s.current.length !== l.frequencyBinCount) && (s.current = new Uint8Array(
|
|
114
|
+
new ArrayBuffer(l.frequencyBinCount)
|
|
115
115
|
));
|
|
116
|
-
const
|
|
117
|
-
|
|
118
|
-
let
|
|
119
|
-
for (let N = 0; N <
|
|
120
|
-
const _ =
|
|
116
|
+
const a = s.current;
|
|
117
|
+
l.getByteFrequencyData(a);
|
|
118
|
+
let C = 0;
|
|
119
|
+
for (let N = 0; N < a.length; N++) C += a[N];
|
|
120
|
+
const _ = C / a.length / 255;
|
|
121
121
|
for (const N of r.current)
|
|
122
122
|
try {
|
|
123
123
|
N(_);
|
|
@@ -125,12 +125,12 @@ function ot() {
|
|
|
125
125
|
console.error("[useAudioLevel] subscriber threw:", D);
|
|
126
126
|
}
|
|
127
127
|
o.current = requestAnimationFrame(c);
|
|
128
|
-
}, []), m =
|
|
128
|
+
}, []), m = g(() => {
|
|
129
129
|
if (t.current || typeof window > "u" || typeof AudioContext > "u") return;
|
|
130
|
-
const
|
|
131
|
-
|
|
132
|
-
}, []), d =
|
|
133
|
-
(
|
|
130
|
+
const l = new AudioContext(), a = l.createAnalyser();
|
|
131
|
+
a.fftSize = 64, a.connect(l.destination), t.current = l, n.current = a;
|
|
132
|
+
}, []), d = g(
|
|
133
|
+
(l) => {
|
|
134
134
|
if (m(), !(!t.current || !n.current)) {
|
|
135
135
|
if (i.current) {
|
|
136
136
|
try {
|
|
@@ -140,17 +140,17 @@ function ot() {
|
|
|
140
140
|
i.current = null;
|
|
141
141
|
}
|
|
142
142
|
try {
|
|
143
|
-
const
|
|
144
|
-
|
|
145
|
-
} catch (
|
|
146
|
-
console.warn("[useAudioLevel] createMediaElementSource failed:",
|
|
143
|
+
const a = t.current.createMediaElementSource(l);
|
|
144
|
+
a.connect(n.current), i.current = a;
|
|
145
|
+
} catch (a) {
|
|
146
|
+
console.warn("[useAudioLevel] createMediaElementSource failed:", a);
|
|
147
147
|
return;
|
|
148
148
|
}
|
|
149
149
|
o.current === null && (o.current = requestAnimationFrame(c));
|
|
150
150
|
}
|
|
151
151
|
},
|
|
152
152
|
[m, c]
|
|
153
|
-
),
|
|
153
|
+
), f = g(() => {
|
|
154
154
|
if (o.current !== null && (cancelAnimationFrame(o.current), o.current = null), i.current) {
|
|
155
155
|
try {
|
|
156
156
|
i.current.disconnect();
|
|
@@ -158,11 +158,11 @@ function ot() {
|
|
|
158
158
|
}
|
|
159
159
|
i.current = null;
|
|
160
160
|
}
|
|
161
|
-
}, []),
|
|
162
|
-
r.current.delete(
|
|
161
|
+
}, []), h = g((l) => (r.current.add(l), () => {
|
|
162
|
+
r.current.delete(l);
|
|
163
163
|
}), []);
|
|
164
|
-
return
|
|
165
|
-
if (
|
|
164
|
+
return S(() => () => {
|
|
165
|
+
if (f(), n.current) {
|
|
166
166
|
try {
|
|
167
167
|
n.current.disconnect();
|
|
168
168
|
} catch {
|
|
@@ -176,58 +176,58 @@ function ot() {
|
|
|
176
176
|
}
|
|
177
177
|
t.current = null;
|
|
178
178
|
}
|
|
179
|
-
r.current.clear(),
|
|
180
|
-
}, [
|
|
179
|
+
r.current.clear(), s.current = null;
|
|
180
|
+
}, [f]), { attach: d, detach: f, subscribe: h };
|
|
181
181
|
}
|
|
182
182
|
function lt() {
|
|
183
|
-
const [t, n] =
|
|
184
|
-
if (r.current &&
|
|
183
|
+
const [t, n] = k(!1), [i, o] = k(null), r = L(null), s = L(null), c = g(async (h) => {
|
|
184
|
+
if (r.current && s.current) {
|
|
185
185
|
try {
|
|
186
|
-
await
|
|
186
|
+
await s.current.localParticipant.unpublishTrack(r.current);
|
|
187
187
|
} catch {
|
|
188
188
|
}
|
|
189
189
|
r.current.stop(), r.current = null;
|
|
190
190
|
}
|
|
191
|
-
|
|
191
|
+
s.current = h, o(null);
|
|
192
192
|
try {
|
|
193
|
-
const
|
|
193
|
+
const l = await tt({
|
|
194
194
|
echoCancellation: !0,
|
|
195
195
|
noiseSuppression: !0
|
|
196
196
|
});
|
|
197
|
-
await
|
|
198
|
-
} catch (
|
|
199
|
-
const
|
|
200
|
-
throw o(
|
|
197
|
+
await h.localParticipant.publishTrack(l), r.current = l, n(l.isMuted);
|
|
198
|
+
} catch (l) {
|
|
199
|
+
const a = l instanceof Error && l.name === "NotAllowedError" ? "Enable your microphone to talk with the agent." : "Microphone unavailable. Check browser permissions and try again.";
|
|
200
|
+
throw o(a), l;
|
|
201
201
|
}
|
|
202
|
-
}, []), m =
|
|
203
|
-
const
|
|
204
|
-
|
|
205
|
-
}, []), d =
|
|
206
|
-
const
|
|
207
|
-
if (
|
|
202
|
+
}, []), m = g(() => {
|
|
203
|
+
const h = r.current;
|
|
204
|
+
h && (h.isMuted ? (h.unmute(), n(!1)) : (h.mute(), n(!0)));
|
|
205
|
+
}, []), d = g(() => {
|
|
206
|
+
const h = r.current, l = s.current;
|
|
207
|
+
if (h && l) {
|
|
208
208
|
try {
|
|
209
|
-
|
|
209
|
+
l.localParticipant.unpublishTrack(h);
|
|
210
210
|
} catch {
|
|
211
211
|
}
|
|
212
|
-
|
|
212
|
+
h.stop();
|
|
213
213
|
}
|
|
214
|
-
r.current = null,
|
|
215
|
-
}, []),
|
|
214
|
+
r.current = null, s.current = null, n(!1);
|
|
215
|
+
}, []), f = g(() => o(null), []);
|
|
216
216
|
return {
|
|
217
217
|
isMuted: t,
|
|
218
218
|
micError: i,
|
|
219
219
|
toggleMute: m,
|
|
220
220
|
setupMic: c,
|
|
221
221
|
teardownMic: d,
|
|
222
|
-
clearError:
|
|
222
|
+
clearError: f
|
|
223
223
|
};
|
|
224
224
|
}
|
|
225
225
|
const at = { resolution: { width: 640, height: 480, frameRate: 24 } };
|
|
226
226
|
function st() {
|
|
227
|
-
const [t, n] =
|
|
227
|
+
const [t, n] = k(!1), [i, o] = k(null), [r, s] = k(null), [c, m] = k(""), d = L(null), f = L(null), h = g((E) => {
|
|
228
228
|
d.current = E;
|
|
229
|
-
}, []),
|
|
230
|
-
const E = d.current, R =
|
|
229
|
+
}, []), l = g(() => {
|
|
230
|
+
const E = d.current, R = f.current;
|
|
231
231
|
if (R && E) {
|
|
232
232
|
const T = E.localParticipant.getTrackPublication(Oe.Source.Camera);
|
|
233
233
|
if (T != null && T.track) {
|
|
@@ -239,8 +239,8 @@ function st() {
|
|
|
239
239
|
} else
|
|
240
240
|
R.stop();
|
|
241
241
|
}
|
|
242
|
-
|
|
243
|
-
}, []),
|
|
242
|
+
f.current = null, s(null), n(!1);
|
|
243
|
+
}, []), a = g(async (E) => {
|
|
244
244
|
const R = d.current;
|
|
245
245
|
if (R) {
|
|
246
246
|
o(null);
|
|
@@ -248,9 +248,9 @@ function st() {
|
|
|
248
248
|
const T = { ...at };
|
|
249
249
|
E && (T.deviceId = E);
|
|
250
250
|
const z = await nt(T);
|
|
251
|
-
await R.localParticipant.publishTrack(z),
|
|
251
|
+
await R.localParticipant.publishTrack(z), f.current = z;
|
|
252
252
|
const I = z.attach();
|
|
253
|
-
|
|
253
|
+
s(I), n(!0), E && m(E);
|
|
254
254
|
try {
|
|
255
255
|
R.localParticipant.publishData(
|
|
256
256
|
new TextEncoder().encode(JSON.stringify({ type: "user_camera_on" })),
|
|
@@ -263,36 +263,36 @@ function st() {
|
|
|
263
263
|
o(z);
|
|
264
264
|
}
|
|
265
265
|
}
|
|
266
|
-
}, []),
|
|
267
|
-
t ?
|
|
268
|
-
}, [t, c,
|
|
269
|
-
|
|
270
|
-
}, [
|
|
271
|
-
|
|
272
|
-
}, [
|
|
273
|
-
return
|
|
274
|
-
|
|
266
|
+
}, []), C = g(async () => {
|
|
267
|
+
t ? l() : await a(c || void 0);
|
|
268
|
+
}, [t, c, l, a]), _ = g(async (E) => {
|
|
269
|
+
l(), await a(E);
|
|
270
|
+
}, [l, a]), N = g(() => {
|
|
271
|
+
l(), d.current = null, o(null), m("");
|
|
272
|
+
}, [l]), D = g(() => o(null), []);
|
|
273
|
+
return S(() => () => {
|
|
274
|
+
f.current && f.current.stop();
|
|
275
275
|
}, []), {
|
|
276
276
|
isEnabled: t,
|
|
277
277
|
error: i,
|
|
278
278
|
previewEl: r,
|
|
279
279
|
activeDeviceId: c,
|
|
280
|
-
toggle:
|
|
280
|
+
toggle: C,
|
|
281
281
|
switchDevice: _,
|
|
282
|
-
attachRoom:
|
|
282
|
+
attachRoom: h,
|
|
283
283
|
teardown: N,
|
|
284
284
|
clearError: D
|
|
285
285
|
};
|
|
286
286
|
}
|
|
287
287
|
function ct() {
|
|
288
|
-
const [t, n] =
|
|
289
|
-
c.current =
|
|
290
|
-
}, []), d =
|
|
291
|
-
const
|
|
292
|
-
if (
|
|
288
|
+
const [t, n] = k(!1), [i, o] = k(null), [r, s] = k(null), c = L(null), m = g((a) => {
|
|
289
|
+
c.current = a;
|
|
290
|
+
}, []), d = g(() => s(null), []), f = g(async () => {
|
|
291
|
+
const a = c.current;
|
|
292
|
+
if (a) {
|
|
293
293
|
if (t) {
|
|
294
294
|
try {
|
|
295
|
-
await
|
|
295
|
+
await a.localParticipant.setScreenShareEnabled(!1);
|
|
296
296
|
} catch {
|
|
297
297
|
}
|
|
298
298
|
d(), n(!1);
|
|
@@ -300,15 +300,15 @@ function ct() {
|
|
|
300
300
|
}
|
|
301
301
|
o(null);
|
|
302
302
|
try {
|
|
303
|
-
await
|
|
304
|
-
let
|
|
303
|
+
await a.localParticipant.setScreenShareEnabled(!0);
|
|
304
|
+
let C = 0;
|
|
305
305
|
const _ = () => {
|
|
306
|
-
const N =
|
|
306
|
+
const N = a.localParticipant.getTrackPublication(Oe.Source.ScreenShare);
|
|
307
307
|
if (N != null && N.track) {
|
|
308
308
|
const D = N.track.attach();
|
|
309
|
-
|
|
309
|
+
s(D), n(!0);
|
|
310
310
|
try {
|
|
311
|
-
|
|
311
|
+
a.localParticipant.publishData(
|
|
312
312
|
new TextEncoder().encode(JSON.stringify({ type: "user_screen_share_on" })),
|
|
313
313
|
{ reliable: !0 }
|
|
314
314
|
);
|
|
@@ -316,65 +316,62 @@ function ct() {
|
|
|
316
316
|
}
|
|
317
317
|
return;
|
|
318
318
|
}
|
|
319
|
-
|
|
319
|
+
C++ < 10 ? setTimeout(_, 100) : n(!0);
|
|
320
320
|
};
|
|
321
321
|
_();
|
|
322
|
-
} catch (
|
|
323
|
-
const _ =
|
|
322
|
+
} catch (C) {
|
|
323
|
+
const _ = C instanceof Error ? C.name : "";
|
|
324
324
|
_ !== "NotAllowedError" && _ !== "AbortError" && o("Screen share unavailable. Try again."), n(!1);
|
|
325
325
|
}
|
|
326
326
|
}
|
|
327
|
-
}, [t, d]),
|
|
328
|
-
const
|
|
329
|
-
if (
|
|
327
|
+
}, [t, d]), h = g(() => {
|
|
328
|
+
const a = c.current;
|
|
329
|
+
if (a && t)
|
|
330
330
|
try {
|
|
331
|
-
|
|
331
|
+
a.localParticipant.setScreenShareEnabled(!1);
|
|
332
332
|
} catch {
|
|
333
333
|
}
|
|
334
334
|
d(), n(!1), o(null), c.current = null;
|
|
335
|
-
}, [t, d]),
|
|
336
|
-
return { isEnabled: t, error: i, previewEl: r, toggle:
|
|
335
|
+
}, [t, d]), l = g(() => o(null), []);
|
|
336
|
+
return { isEnabled: t, error: i, previewEl: r, toggle: f, attachRoom: m, teardown: h, clearError: l };
|
|
337
337
|
}
|
|
338
338
|
function dt() {
|
|
339
|
-
const [t, n] =
|
|
339
|
+
const [t, n] = k([]), [i, o] = k([]), r = g(async () => {
|
|
340
340
|
if (!(typeof navigator > "u" || !navigator.mediaDevices))
|
|
341
341
|
try {
|
|
342
|
-
const
|
|
343
|
-
n(
|
|
342
|
+
const s = await navigator.mediaDevices.enumerateDevices();
|
|
343
|
+
n(s.filter((c) => c.kind === "audioinput")), o(s.filter((c) => c.kind === "videoinput"));
|
|
344
344
|
} catch {
|
|
345
345
|
}
|
|
346
346
|
}, []);
|
|
347
|
-
return
|
|
347
|
+
return S(() => {
|
|
348
348
|
if (r(), typeof navigator > "u" || !navigator.mediaDevices) return;
|
|
349
|
-
const
|
|
350
|
-
return navigator.mediaDevices.addEventListener("devicechange",
|
|
349
|
+
const s = () => void r();
|
|
350
|
+
return navigator.mediaDevices.addEventListener("devicechange", s), () => navigator.mediaDevices.removeEventListener("devicechange", s);
|
|
351
351
|
}, [r]), { mics: t, cameras: i, refresh: r };
|
|
352
352
|
}
|
|
353
353
|
function ut(t, n, i = !1) {
|
|
354
|
-
const [o, r] =
|
|
355
|
-
return
|
|
354
|
+
const [o, r] = k(null), [s, c] = k(null), [m, d] = k(!i && !!t);
|
|
355
|
+
return S(() => {
|
|
356
356
|
if (i || !t) {
|
|
357
357
|
d(!1);
|
|
358
358
|
return;
|
|
359
359
|
}
|
|
360
|
-
const
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
if (!b.ok) {
|
|
368
|
-
const _ = await b.json().catch(() => ({}));
|
|
369
|
-
throw new Error(_.error || `HTTP ${b.status}`);
|
|
360
|
+
const f = new AbortController(), h = n || "https://app.livelayer.studio";
|
|
361
|
+
return d(!0), c(null), fetch(`${h}/api/widget/agent/${encodeURIComponent(t)}`, {
|
|
362
|
+
signal: f.signal
|
|
363
|
+
}).then(async (l) => {
|
|
364
|
+
if (!l.ok) {
|
|
365
|
+
const a = await l.json().catch(() => ({}));
|
|
366
|
+
throw new Error(a.error || `HTTP ${l.status}`);
|
|
370
367
|
}
|
|
371
|
-
return
|
|
372
|
-
}).then((
|
|
373
|
-
r(
|
|
374
|
-
}).catch((
|
|
375
|
-
|
|
376
|
-
}), () =>
|
|
377
|
-
}, [t, n, i]), { info: o, error:
|
|
368
|
+
return l.json();
|
|
369
|
+
}).then((l) => {
|
|
370
|
+
f.signal.aborted || (r(l), d(!1));
|
|
371
|
+
}).catch((l) => {
|
|
372
|
+
f.signal.aborted || (c(l instanceof Error ? l.message : "Agent lookup failed"), d(!1));
|
|
373
|
+
}), () => f.abort();
|
|
374
|
+
}, [t, n, i]), { info: o, error: s, loading: m };
|
|
378
375
|
}
|
|
379
376
|
function ht(t) {
|
|
380
377
|
if (typeof window > "u") return null;
|
|
@@ -396,9 +393,9 @@ function mt({
|
|
|
396
393
|
defaultValue: n = "expanded",
|
|
397
394
|
onChange: i
|
|
398
395
|
} = {}) {
|
|
399
|
-
const o = t !== void 0, [r,
|
|
396
|
+
const o = t !== void 0, [r, s] = k(n), c = o ? t : r, m = g(
|
|
400
397
|
(d) => {
|
|
401
|
-
d !== c && (o ||
|
|
398
|
+
d !== c && (o || s(d), i == null || i(d));
|
|
402
399
|
},
|
|
403
400
|
[c, o, i]
|
|
404
401
|
);
|
|
@@ -415,36 +412,36 @@ function vt({
|
|
|
415
412
|
persistKey: o = "ll-widget",
|
|
416
413
|
disablePersistence: r = !1
|
|
417
414
|
} = {}) {
|
|
418
|
-
const
|
|
415
|
+
const s = `${o}:display-mode`, c = L(!1), [m, d] = mt({
|
|
419
416
|
value: t,
|
|
420
417
|
defaultValue: n,
|
|
421
|
-
onChange: (
|
|
422
|
-
t === void 0 && !r && pt(
|
|
418
|
+
onChange: (f) => {
|
|
419
|
+
t === void 0 && !r && pt(s, f), i == null || i(f);
|
|
423
420
|
}
|
|
424
421
|
});
|
|
425
|
-
return
|
|
422
|
+
return S(() => {
|
|
426
423
|
if (c.current || (c.current = !0, r || t !== void 0)) return;
|
|
427
|
-
const
|
|
428
|
-
|
|
424
|
+
const f = gt(ht(s));
|
|
425
|
+
f && f !== m && d(f);
|
|
429
426
|
}, []), [m, d];
|
|
430
427
|
}
|
|
431
428
|
const yt = 640;
|
|
432
429
|
function _t(t = yt) {
|
|
433
|
-
const [n, i] =
|
|
434
|
-
return
|
|
430
|
+
const [n, i] = k(!1);
|
|
431
|
+
return S(() => {
|
|
435
432
|
if (t === !1) {
|
|
436
433
|
i(!1);
|
|
437
434
|
return;
|
|
438
435
|
}
|
|
439
436
|
if (typeof window > "u" || typeof window.matchMedia > "u")
|
|
440
437
|
return;
|
|
441
|
-
const o = `(max-width: ${t - 1}px)`, r = window.matchMedia(o),
|
|
442
|
-
return
|
|
443
|
-
r.removeListener(
|
|
438
|
+
const o = `(max-width: ${t - 1}px)`, r = window.matchMedia(o), s = () => i(r.matches);
|
|
439
|
+
return s(), typeof r.addEventListener == "function" ? (r.addEventListener("change", s), () => r.removeEventListener("change", s)) : (r.addListener(s), () => {
|
|
440
|
+
r.removeListener(s);
|
|
444
441
|
});
|
|
445
442
|
}, [t]), n;
|
|
446
443
|
}
|
|
447
|
-
const Pe = ({ muted: t = !1, className: n }) => t ? /* @__PURE__ */
|
|
444
|
+
const Pe = ({ muted: t = !1, className: n }) => t ? /* @__PURE__ */ b(
|
|
448
445
|
"svg",
|
|
449
446
|
{
|
|
450
447
|
className: n,
|
|
@@ -490,7 +487,7 @@ const Pe = ({ muted: t = !1, className: n }) => t ? /* @__PURE__ */ w(
|
|
|
490
487
|
}
|
|
491
488
|
)
|
|
492
489
|
}
|
|
493
|
-
),
|
|
490
|
+
), Be = ({ className: t }) => /* @__PURE__ */ e(
|
|
494
491
|
"svg",
|
|
495
492
|
{
|
|
496
493
|
className: t,
|
|
@@ -540,7 +537,7 @@ const Pe = ({ muted: t = !1, className: n }) => t ? /* @__PURE__ */ w(
|
|
|
540
537
|
function xt(t) {
|
|
541
538
|
return t === "top-left" || t === "bottom-left" ? "left" : "right";
|
|
542
539
|
}
|
|
543
|
-
const We = "ll-hidden-tab-center-y", Ct = 5,
|
|
540
|
+
const We = "ll-hidden-tab-center-y", Ct = 5, Ue = 16;
|
|
544
541
|
function Nt() {
|
|
545
542
|
if (typeof window > "u") return null;
|
|
546
543
|
try {
|
|
@@ -552,7 +549,7 @@ function Nt() {
|
|
|
552
549
|
return null;
|
|
553
550
|
}
|
|
554
551
|
}
|
|
555
|
-
function
|
|
552
|
+
function $e(t) {
|
|
556
553
|
if (!(typeof window > "u"))
|
|
557
554
|
try {
|
|
558
555
|
window.localStorage.setItem(We, String(t));
|
|
@@ -566,82 +563,82 @@ const Et = ({
|
|
|
566
563
|
onExpand: o,
|
|
567
564
|
label: r = "Open widget"
|
|
568
565
|
}) => {
|
|
569
|
-
const
|
|
570
|
-
(
|
|
571
|
-
if (typeof window > "u") return
|
|
572
|
-
const
|
|
573
|
-
return A < y ? Math.max(y,
|
|
566
|
+
const s = xt(t), c = s === "right" ? "left" : "right", m = n ? 80 : 72, [d, f] = k(null), [h, l] = k(!1), a = L(null), C = L(!1), _ = g(
|
|
567
|
+
(w) => {
|
|
568
|
+
if (typeof window > "u") return w;
|
|
569
|
+
const x = m / 2, y = Ue + x, A = window.innerHeight - Ue - x;
|
|
570
|
+
return A < y ? Math.max(y, w) : Math.max(y, Math.min(A, w));
|
|
574
571
|
},
|
|
575
572
|
[m]
|
|
576
573
|
);
|
|
577
|
-
|
|
578
|
-
const
|
|
579
|
-
|
|
580
|
-
const
|
|
581
|
-
|
|
574
|
+
S(() => {
|
|
575
|
+
const w = Nt();
|
|
576
|
+
f(_(w ?? window.innerHeight / 2));
|
|
577
|
+
const x = () => {
|
|
578
|
+
f((y) => y === null ? null : _(y));
|
|
582
579
|
};
|
|
583
|
-
return window.addEventListener("resize",
|
|
580
|
+
return window.addEventListener("resize", x), () => window.removeEventListener("resize", x);
|
|
584
581
|
}, [_]);
|
|
585
|
-
const N =
|
|
586
|
-
(
|
|
587
|
-
if (!(
|
|
582
|
+
const N = g(
|
|
583
|
+
(w) => {
|
|
584
|
+
if (!(w.pointerType === "mouse" && w.button !== 0) && d !== null) {
|
|
588
585
|
try {
|
|
589
|
-
|
|
586
|
+
w.currentTarget.setPointerCapture(w.pointerId);
|
|
590
587
|
} catch {
|
|
591
588
|
}
|
|
592
|
-
|
|
593
|
-
startClientY:
|
|
589
|
+
a.current = {
|
|
590
|
+
startClientY: w.clientY,
|
|
594
591
|
startCenterY: d,
|
|
595
592
|
moved: !1
|
|
596
593
|
};
|
|
597
594
|
}
|
|
598
595
|
},
|
|
599
596
|
[d]
|
|
600
|
-
), D =
|
|
601
|
-
(
|
|
602
|
-
const
|
|
603
|
-
if (!
|
|
604
|
-
const y =
|
|
605
|
-
!
|
|
597
|
+
), D = g(
|
|
598
|
+
(w) => {
|
|
599
|
+
const x = a.current;
|
|
600
|
+
if (!x) return;
|
|
601
|
+
const y = w.clientY - x.startClientY;
|
|
602
|
+
!x.moved && Math.abs(y) > Ct && (x.moved = !0, l(!0)), x.moved && f(_(x.startCenterY + y));
|
|
606
603
|
},
|
|
607
604
|
[_]
|
|
608
|
-
), E =
|
|
609
|
-
(
|
|
610
|
-
const
|
|
611
|
-
if (
|
|
605
|
+
), E = g(
|
|
606
|
+
(w) => {
|
|
607
|
+
const x = a.current;
|
|
608
|
+
if (x) {
|
|
612
609
|
try {
|
|
613
|
-
|
|
610
|
+
w.currentTarget.releasePointerCapture(w.pointerId);
|
|
614
611
|
} catch {
|
|
615
612
|
}
|
|
616
|
-
|
|
613
|
+
a.current = null, x.moved && (l(!1), C.current = !0, f((y) => (y !== null && $e(y), y)));
|
|
617
614
|
}
|
|
618
615
|
},
|
|
619
616
|
[]
|
|
620
|
-
), R =
|
|
621
|
-
if (
|
|
622
|
-
|
|
617
|
+
), R = g(() => {
|
|
618
|
+
if (C.current) {
|
|
619
|
+
C.current = !1;
|
|
623
620
|
return;
|
|
624
621
|
}
|
|
625
622
|
o();
|
|
626
|
-
}, [o]), T =
|
|
627
|
-
(
|
|
628
|
-
if (
|
|
629
|
-
|
|
630
|
-
const
|
|
631
|
-
|
|
623
|
+
}, [o]), T = g(
|
|
624
|
+
(w) => {
|
|
625
|
+
if (w.key === "ArrowUp" || w.key === "ArrowDown") {
|
|
626
|
+
w.preventDefault();
|
|
627
|
+
const x = w.key === "ArrowUp" ? -8 : 8;
|
|
628
|
+
f((y) => {
|
|
632
629
|
if (y === null) return y;
|
|
633
|
-
const A = _(y +
|
|
634
|
-
return
|
|
630
|
+
const A = _(y + x);
|
|
631
|
+
return $e(A), A;
|
|
635
632
|
});
|
|
636
633
|
}
|
|
637
634
|
},
|
|
638
635
|
[_]
|
|
639
636
|
), z = [
|
|
640
637
|
"ll-hidden",
|
|
641
|
-
`ll-hidden--${
|
|
638
|
+
`ll-hidden--${s}`,
|
|
642
639
|
n ? "ll-hidden--mobile" : "ll-hidden--desktop",
|
|
643
640
|
i ? "ll-hidden--speaking" : null,
|
|
644
|
-
|
|
641
|
+
h ? "is-dragging" : null
|
|
645
642
|
].filter(Boolean).join(" "), I = d === null ? void 0 : { top: `${d - m / 2}px`, transform: "none" };
|
|
646
643
|
return /* @__PURE__ */ e(
|
|
647
644
|
"button",
|
|
@@ -666,31 +663,31 @@ const Et = ({
|
|
|
666
663
|
maxHeight: i = 20,
|
|
667
664
|
minHeight: o = 4,
|
|
668
665
|
className: r,
|
|
669
|
-
barClassName:
|
|
666
|
+
barClassName: s
|
|
670
667
|
}) => {
|
|
671
|
-
const c =
|
|
672
|
-
const
|
|
673
|
-
return Array.from({ length: n }, (
|
|
668
|
+
const c = L(null), m = L([]), d = Se(() => {
|
|
669
|
+
const h = (Math.sqrt(5) - 1) / 2;
|
|
670
|
+
return Array.from({ length: n }, (l, a) => 0.5 + a * h % 1 * 0.5);
|
|
674
671
|
}, [n]);
|
|
675
|
-
|
|
676
|
-
for (let
|
|
677
|
-
const
|
|
678
|
-
if (!
|
|
679
|
-
const _ = Math.max(o,
|
|
680
|
-
|
|
672
|
+
S(() => t.subscribe((l) => {
|
|
673
|
+
for (let a = 0; a < n; a++) {
|
|
674
|
+
const C = m.current[a];
|
|
675
|
+
if (!C) continue;
|
|
676
|
+
const _ = Math.max(o, l * i * d[a]);
|
|
677
|
+
C.style.height = `${_}px`;
|
|
681
678
|
}
|
|
682
679
|
}), [t, n, i, o, d]);
|
|
683
|
-
const
|
|
684
|
-
return /* @__PURE__ */ e("div", { ref: c, className:
|
|
680
|
+
const f = ["ll-waveform", r].filter(Boolean).join(" ");
|
|
681
|
+
return /* @__PURE__ */ e("div", { ref: c, className: f, "aria-hidden": "true", children: Array.from({ length: n }, (h, l) => /* @__PURE__ */ e(
|
|
685
682
|
"div",
|
|
686
683
|
{
|
|
687
|
-
ref: (
|
|
688
|
-
m.current[
|
|
684
|
+
ref: (a) => {
|
|
685
|
+
m.current[l] = a;
|
|
689
686
|
},
|
|
690
|
-
className: ["ll-waveform__bar",
|
|
687
|
+
className: ["ll-waveform__bar", s].filter(Boolean).join(" "),
|
|
691
688
|
style: { height: `${o}px` }
|
|
692
689
|
},
|
|
693
|
-
|
|
690
|
+
l
|
|
694
691
|
)) });
|
|
695
692
|
}, Lt = ({
|
|
696
693
|
position: t,
|
|
@@ -698,18 +695,18 @@ const Et = ({
|
|
|
698
695
|
agentName: i,
|
|
699
696
|
avatarImageUrl: o,
|
|
700
697
|
agentState: r,
|
|
701
|
-
isMuted:
|
|
698
|
+
isMuted: s,
|
|
702
699
|
audioLevel: c,
|
|
703
700
|
onExpand: m,
|
|
704
701
|
onToggleMute: d,
|
|
705
|
-
onClose:
|
|
702
|
+
onClose: f
|
|
706
703
|
}) => n ? /* @__PURE__ */ e(
|
|
707
704
|
"div",
|
|
708
705
|
{
|
|
709
706
|
className: "ll-minimized ll-minimized--mobile",
|
|
710
707
|
role: "region",
|
|
711
708
|
"aria-label": `${i} widget`,
|
|
712
|
-
children: /* @__PURE__ */
|
|
709
|
+
children: /* @__PURE__ */ b(
|
|
713
710
|
"button",
|
|
714
711
|
{
|
|
715
712
|
type: "button",
|
|
@@ -738,24 +735,24 @@ const Et = ({
|
|
|
738
735
|
}
|
|
739
736
|
),
|
|
740
737
|
/* @__PURE__ */ e("span", { className: "ll-minimized__name", children: i }),
|
|
741
|
-
/* @__PURE__ */
|
|
738
|
+
/* @__PURE__ */ b("div", { className: "ll-minimized__controls", children: [
|
|
742
739
|
/* @__PURE__ */ e(
|
|
743
740
|
"span",
|
|
744
741
|
{
|
|
745
742
|
className: "ll-minimized__btn",
|
|
746
743
|
role: "button",
|
|
747
744
|
tabIndex: 0,
|
|
748
|
-
onClick: (
|
|
749
|
-
|
|
745
|
+
onClick: (h) => {
|
|
746
|
+
h.stopPropagation(), d();
|
|
750
747
|
},
|
|
751
|
-
onKeyDown: (
|
|
752
|
-
(
|
|
748
|
+
onKeyDown: (h) => {
|
|
749
|
+
(h.key === "Enter" || h.key === " ") && (h.stopPropagation(), h.preventDefault(), d());
|
|
753
750
|
},
|
|
754
|
-
"aria-label":
|
|
755
|
-
children: /* @__PURE__ */ e(Pe, { muted:
|
|
751
|
+
"aria-label": s ? "Unmute microphone" : "Mute microphone",
|
|
752
|
+
children: /* @__PURE__ */ e(Pe, { muted: s, className: "ll-minimized__icon" })
|
|
756
753
|
}
|
|
757
754
|
),
|
|
758
|
-
/* @__PURE__ */ e(
|
|
755
|
+
/* @__PURE__ */ e(Be, { className: "ll-minimized__icon ll-minimized__icon--expand" })
|
|
759
756
|
] })
|
|
760
757
|
]
|
|
761
758
|
}
|
|
@@ -768,7 +765,7 @@ const Et = ({
|
|
|
768
765
|
"data-position": t,
|
|
769
766
|
role: "region",
|
|
770
767
|
"aria-label": `${i} widget`,
|
|
771
|
-
children: /* @__PURE__ */
|
|
768
|
+
children: /* @__PURE__ */ b("div", { className: "ll-minimized__surface", children: [
|
|
772
769
|
o ? (
|
|
773
770
|
// eslint-disable-next-line @next/next/no-img-element
|
|
774
771
|
/* @__PURE__ */ e(
|
|
@@ -780,19 +777,19 @@ const Et = ({
|
|
|
780
777
|
}
|
|
781
778
|
)
|
|
782
779
|
) : /* @__PURE__ */ e("div", { className: "ll-minimized__avatar ll-minimized__avatar--placeholder" }),
|
|
783
|
-
/* @__PURE__ */
|
|
780
|
+
/* @__PURE__ */ b("div", { className: "ll-minimized__meta", children: [
|
|
784
781
|
/* @__PURE__ */ e("span", { className: "ll-minimized__name", children: i }),
|
|
785
782
|
/* @__PURE__ */ e("span", { className: "ll-minimized__state", children: r === "speaking" ? "Speaking" : r === "thinking" ? "Thinking" : "Listening" })
|
|
786
783
|
] }),
|
|
787
|
-
/* @__PURE__ */
|
|
784
|
+
/* @__PURE__ */ b("div", { className: "ll-minimized__controls", children: [
|
|
788
785
|
/* @__PURE__ */ e(
|
|
789
786
|
"button",
|
|
790
787
|
{
|
|
791
788
|
type: "button",
|
|
792
789
|
className: "ll-minimized__btn",
|
|
793
790
|
onClick: d,
|
|
794
|
-
"aria-label":
|
|
795
|
-
children: /* @__PURE__ */ e(Pe, { muted:
|
|
791
|
+
"aria-label": s ? "Unmute microphone" : "Mute microphone",
|
|
792
|
+
children: /* @__PURE__ */ e(Pe, { muted: s, className: "ll-minimized__icon" })
|
|
796
793
|
}
|
|
797
794
|
),
|
|
798
795
|
/* @__PURE__ */ e(
|
|
@@ -802,7 +799,7 @@ const Et = ({
|
|
|
802
799
|
className: "ll-minimized__btn",
|
|
803
800
|
onClick: m,
|
|
804
801
|
"aria-label": `Expand ${i} widget`,
|
|
805
|
-
children: /* @__PURE__ */ e(
|
|
802
|
+
children: /* @__PURE__ */ e(Be, { className: "ll-minimized__icon" })
|
|
806
803
|
}
|
|
807
804
|
),
|
|
808
805
|
/* @__PURE__ */ e(
|
|
@@ -810,7 +807,7 @@ const Et = ({
|
|
|
810
807
|
{
|
|
811
808
|
type: "button",
|
|
812
809
|
className: "ll-minimized__btn ll-minimized__btn--close",
|
|
813
|
-
onClick:
|
|
810
|
+
onClick: f,
|
|
814
811
|
"aria-label": "Close widget",
|
|
815
812
|
children: /* @__PURE__ */ e(bt, { className: "ll-minimized__icon" })
|
|
816
813
|
}
|
|
@@ -825,8 +822,8 @@ const Et = ({
|
|
|
825
822
|
className: o,
|
|
826
823
|
style: r
|
|
827
824
|
}) => {
|
|
828
|
-
const [
|
|
829
|
-
if (
|
|
825
|
+
const [s, c] = k(!1), m = L(t);
|
|
826
|
+
if (S(() => {
|
|
830
827
|
m.current !== t && (m.current = t, c(!1));
|
|
831
828
|
}, [t]), !t) return null;
|
|
832
829
|
const d = {
|
|
@@ -838,7 +835,7 @@ const Et = ({
|
|
|
838
835
|
objectPosition: "top",
|
|
839
836
|
transition: "opacity 500ms ease, transform 500ms ease",
|
|
840
837
|
transform: i ? "scale(1.02)" : "scale(1)",
|
|
841
|
-
opacity:
|
|
838
|
+
opacity: s ? 1 : 0,
|
|
842
839
|
...r
|
|
843
840
|
};
|
|
844
841
|
return (
|
|
@@ -862,15 +859,15 @@ const Et = ({
|
|
|
862
859
|
agentName: i,
|
|
863
860
|
avatarImageUrl: o,
|
|
864
861
|
idleLoopUrl: r,
|
|
865
|
-
greeting:
|
|
862
|
+
greeting: s,
|
|
866
863
|
branding: c,
|
|
867
864
|
teamMembers: m,
|
|
868
865
|
currentTeamMemberId: d,
|
|
869
|
-
isSwitchingTeamMember:
|
|
870
|
-
teamSwitcherOpen:
|
|
871
|
-
onToggleTeamSwitcher:
|
|
872
|
-
onSelectTeamMember:
|
|
873
|
-
languageMenuOpen:
|
|
866
|
+
isSwitchingTeamMember: f,
|
|
867
|
+
teamSwitcherOpen: h,
|
|
868
|
+
onToggleTeamSwitcher: l,
|
|
869
|
+
onSelectTeamMember: a,
|
|
870
|
+
languageMenuOpen: C,
|
|
874
871
|
onToggleLanguageMenu: _,
|
|
875
872
|
connectionState: N,
|
|
876
873
|
agentState: D,
|
|
@@ -879,13 +876,13 @@ const Et = ({
|
|
|
879
876
|
needsUserGesture: T,
|
|
880
877
|
error: z,
|
|
881
878
|
isMuted: I,
|
|
882
|
-
micError:
|
|
883
|
-
micDevices:
|
|
879
|
+
micError: w,
|
|
880
|
+
micDevices: x,
|
|
884
881
|
isCameraEnabled: y,
|
|
885
882
|
cameraPreviewEl: A,
|
|
886
883
|
cameraDevices: X,
|
|
887
884
|
activeCameraId: ne,
|
|
888
|
-
isScreenShareEnabled:
|
|
885
|
+
isScreenShareEnabled: $,
|
|
889
886
|
screenPreviewEl: j,
|
|
890
887
|
isSpeakerMuted: F,
|
|
891
888
|
allowCamera: re,
|
|
@@ -897,7 +894,7 @@ const Et = ({
|
|
|
897
894
|
onRetry: ke,
|
|
898
895
|
onResumeAudio: xe,
|
|
899
896
|
onToggleMute: Q,
|
|
900
|
-
onToggleCamera:
|
|
897
|
+
onToggleCamera: U,
|
|
901
898
|
onSwitchCameraDevice: ve,
|
|
902
899
|
onToggleScreenShare: Z,
|
|
903
900
|
onToggleSpeaker: G,
|
|
@@ -907,41 +904,41 @@ const Et = ({
|
|
|
907
904
|
onClearMicError: K
|
|
908
905
|
}) => {
|
|
909
906
|
var ye;
|
|
910
|
-
const O = E.length > 0 ? E[E.length - 1] : null, Y = ((m == null ? void 0 : m.length) ?? 0) > 1, ie = N === "connecting" || N === "connected", H = N === "connected", he = N === "idle" || N === "disconnected" || N === "error", pe =
|
|
911
|
-
|
|
912
|
-
const
|
|
913
|
-
|
|
914
|
-
}, [A]),
|
|
915
|
-
const
|
|
916
|
-
|
|
907
|
+
const O = E.length > 0 ? E[E.length - 1] : null, Y = ((m == null ? void 0 : m.length) ?? 0) > 1, ie = N === "connecting" || N === "connected", H = N === "connected", he = N === "idle" || N === "disconnected" || N === "error", pe = L(null), oe = L(null);
|
|
908
|
+
S(() => {
|
|
909
|
+
const u = pe.current;
|
|
910
|
+
u && (u.innerHTML = "", A && (A.style.width = "100%", A.style.height = "100%", A.style.objectFit = "cover", A.style.transform = "scaleX(-1)", u.appendChild(A)));
|
|
911
|
+
}, [A]), S(() => {
|
|
912
|
+
const u = oe.current;
|
|
913
|
+
u && (u.innerHTML = "", j && (j.style.width = "100%", j.style.height = "100%", j.style.objectFit = "contain", u.appendChild(j)));
|
|
917
914
|
}, [j]);
|
|
918
|
-
const [q, le] =
|
|
919
|
-
|
|
920
|
-
if (!q && !ae && !
|
|
921
|
-
const
|
|
922
|
-
le(!1), J(!1),
|
|
915
|
+
const [q, le] = k(!1), [ae, J] = k(!1);
|
|
916
|
+
S(() => {
|
|
917
|
+
if (!q && !ae && !C && !h) return;
|
|
918
|
+
const u = () => {
|
|
919
|
+
le(!1), J(!1), C && _(), h && l();
|
|
923
920
|
};
|
|
924
|
-
return document.addEventListener("click",
|
|
921
|
+
return document.addEventListener("click", u), () => document.removeEventListener("click", u);
|
|
925
922
|
}, [
|
|
926
923
|
q,
|
|
927
924
|
ae,
|
|
928
|
-
|
|
929
|
-
|
|
925
|
+
C,
|
|
926
|
+
h,
|
|
930
927
|
_,
|
|
931
|
-
|
|
928
|
+
l
|
|
932
929
|
]);
|
|
933
|
-
const [se, ce] =
|
|
934
|
-
(
|
|
935
|
-
|
|
930
|
+
const [se, ce] = k(""), B = g(
|
|
931
|
+
(u) => {
|
|
932
|
+
u.preventDefault();
|
|
936
933
|
const W = se.trim();
|
|
937
934
|
W && (ee(W), ce(""));
|
|
938
935
|
},
|
|
939
936
|
[se, ee]
|
|
940
|
-
), p = c.productName || "Live Layer", me = H && (O != null && O.text) ? O.text :
|
|
937
|
+
), p = c.productName || "Live Layer", me = H && (O != null && O.text) ? O.text : s || "", Ce = [
|
|
941
938
|
"ll-expanded",
|
|
942
939
|
n ? "ll-expanded--mobile" : "ll-expanded--desktop"
|
|
943
940
|
].join(" ");
|
|
944
|
-
return /* @__PURE__ */
|
|
941
|
+
return /* @__PURE__ */ b(
|
|
945
942
|
"div",
|
|
946
943
|
{
|
|
947
944
|
className: Ce,
|
|
@@ -950,7 +947,7 @@ const Et = ({
|
|
|
950
947
|
role: "dialog",
|
|
951
948
|
"aria-label": `${i} widget`,
|
|
952
949
|
children: [
|
|
953
|
-
/* @__PURE__ */
|
|
950
|
+
/* @__PURE__ */ b("div", { className: "ll-expanded__bg", children: [
|
|
954
951
|
o ? /* @__PURE__ */ e(
|
|
955
952
|
Mt,
|
|
956
953
|
{
|
|
@@ -972,11 +969,11 @@ const Et = ({
|
|
|
972
969
|
)
|
|
973
970
|
] }),
|
|
974
971
|
/* @__PURE__ */ e("div", { ref: we, className: "ll-expanded__video" }),
|
|
975
|
-
N === "connecting" && /* @__PURE__ */
|
|
972
|
+
N === "connecting" && /* @__PURE__ */ b("div", { className: "ll-expanded__overlay ll-expanded__overlay--connecting", children: [
|
|
976
973
|
/* @__PURE__ */ e("div", { className: "ll-expanded__spinner" }),
|
|
977
|
-
/* @__PURE__ */ e("p", { className: "ll-expanded__overlay-text", children:
|
|
974
|
+
/* @__PURE__ */ e("p", { className: "ll-expanded__overlay-text", children: f ? "Switching..." : "Connecting..." })
|
|
978
975
|
] }),
|
|
979
|
-
T && H && /* @__PURE__ */
|
|
976
|
+
T && H && /* @__PURE__ */ b(
|
|
980
977
|
"button",
|
|
981
978
|
{
|
|
982
979
|
type: "button",
|
|
@@ -988,79 +985,79 @@ const Et = ({
|
|
|
988
985
|
]
|
|
989
986
|
}
|
|
990
987
|
),
|
|
991
|
-
ie ? /* @__PURE__ */
|
|
992
|
-
/* @__PURE__ */
|
|
993
|
-
/* @__PURE__ */
|
|
994
|
-
/* @__PURE__ */
|
|
988
|
+
ie ? /* @__PURE__ */ b("div", { className: "ll-expanded__topbar", children: [
|
|
989
|
+
/* @__PURE__ */ b("div", { className: "ll-expanded__topbar-left", children: [
|
|
990
|
+
/* @__PURE__ */ b("div", { className: "ll-expanded__pill-wrap", children: [
|
|
991
|
+
/* @__PURE__ */ b(
|
|
995
992
|
"button",
|
|
996
993
|
{
|
|
997
994
|
type: "button",
|
|
998
995
|
className: "ll-hpill",
|
|
999
|
-
onClick: (
|
|
1000
|
-
Y && (
|
|
996
|
+
onClick: (u) => {
|
|
997
|
+
Y && (u.stopPropagation(), l());
|
|
1001
998
|
},
|
|
1002
999
|
"aria-haspopup": Y ? "listbox" : void 0,
|
|
1003
|
-
"aria-expanded": Y ?
|
|
1000
|
+
"aria-expanded": Y ? h : void 0,
|
|
1004
1001
|
children: [
|
|
1005
1002
|
/* @__PURE__ */ e("span", { className: "ll-hpill__label", children: i }),
|
|
1006
1003
|
Y && /* @__PURE__ */ e(_e, {})
|
|
1007
1004
|
]
|
|
1008
1005
|
}
|
|
1009
1006
|
),
|
|
1010
|
-
Y &&
|
|
1007
|
+
Y && h && /* @__PURE__ */ e(
|
|
1011
1008
|
"div",
|
|
1012
1009
|
{
|
|
1013
1010
|
className: "ll-hmenu",
|
|
1014
|
-
onClick: (
|
|
1011
|
+
onClick: (u) => u.stopPropagation(),
|
|
1015
1012
|
role: "listbox",
|
|
1016
|
-
children: m == null ? void 0 : m.map((
|
|
1013
|
+
children: m == null ? void 0 : m.map((u) => /* @__PURE__ */ b(
|
|
1017
1014
|
"button",
|
|
1018
1015
|
{
|
|
1019
1016
|
type: "button",
|
|
1020
|
-
className: `ll-hmenu__item ${
|
|
1021
|
-
onClick: () =>
|
|
1017
|
+
className: `ll-hmenu__item ${u.id === d ? "is-active" : ""}`,
|
|
1018
|
+
onClick: () => a(u.id),
|
|
1022
1019
|
role: "option",
|
|
1023
|
-
"aria-selected":
|
|
1020
|
+
"aria-selected": u.id === d,
|
|
1024
1021
|
children: [
|
|
1025
|
-
|
|
1022
|
+
u.avatarImageUrl && /* @__PURE__ */ e(
|
|
1026
1023
|
"img",
|
|
1027
1024
|
{
|
|
1028
|
-
src:
|
|
1025
|
+
src: u.avatarImageUrl,
|
|
1029
1026
|
alt: "",
|
|
1030
1027
|
className: "ll-hmenu__avatar"
|
|
1031
1028
|
}
|
|
1032
1029
|
),
|
|
1033
|
-
/* @__PURE__ */ e("span", { className: "ll-hmenu__name", children:
|
|
1034
|
-
|
|
1030
|
+
/* @__PURE__ */ e("span", { className: "ll-hmenu__name", children: u.name }),
|
|
1031
|
+
u.role && /* @__PURE__ */ e("span", { className: "ll-hmenu__role", children: u.role })
|
|
1035
1032
|
]
|
|
1036
1033
|
},
|
|
1037
|
-
|
|
1034
|
+
u.id
|
|
1038
1035
|
))
|
|
1039
1036
|
}
|
|
1040
1037
|
)
|
|
1041
1038
|
] }),
|
|
1042
|
-
/* @__PURE__ */
|
|
1043
|
-
/* @__PURE__ */
|
|
1039
|
+
/* @__PURE__ */ b("div", { className: "ll-expanded__pill-wrap", children: [
|
|
1040
|
+
/* @__PURE__ */ b(
|
|
1044
1041
|
"button",
|
|
1045
1042
|
{
|
|
1046
1043
|
type: "button",
|
|
1047
1044
|
className: "ll-hpill",
|
|
1048
|
-
onClick: (
|
|
1049
|
-
|
|
1045
|
+
onClick: (u) => {
|
|
1046
|
+
u.stopPropagation(), _();
|
|
1050
1047
|
},
|
|
1051
1048
|
"aria-haspopup": "listbox",
|
|
1052
|
-
"aria-expanded":
|
|
1049
|
+
"aria-expanded": C,
|
|
1053
1050
|
children: [
|
|
1054
1051
|
/* @__PURE__ */ e("span", { className: "ll-hpill__label", children: "English" }),
|
|
1055
1052
|
/* @__PURE__ */ e(_e, {})
|
|
1056
1053
|
]
|
|
1057
1054
|
}
|
|
1058
1055
|
),
|
|
1059
|
-
|
|
1056
|
+
C && /* @__PURE__ */ e(
|
|
1060
1057
|
"div",
|
|
1061
1058
|
{
|
|
1062
1059
|
className: "ll-hmenu",
|
|
1063
|
-
onClick: (
|
|
1060
|
+
onClick: (u) => u.stopPropagation(),
|
|
1064
1061
|
role: "listbox",
|
|
1065
1062
|
children: /* @__PURE__ */ e(
|
|
1066
1063
|
"button",
|
|
@@ -1096,9 +1093,9 @@ const Et = ({
|
|
|
1096
1093
|
)
|
|
1097
1094
|
] }) : (
|
|
1098
1095
|
// Idle-state header with Live Layer product name + minimize/close
|
|
1099
|
-
/* @__PURE__ */
|
|
1096
|
+
/* @__PURE__ */ b("div", { className: "ll-expanded__header ll-expanded__header--idle", children: [
|
|
1100
1097
|
/* @__PURE__ */ e("span", { className: "ll-expanded__brand", children: p }),
|
|
1101
|
-
/* @__PURE__ */
|
|
1098
|
+
/* @__PURE__ */ b("div", { className: "ll-expanded__header-actions", children: [
|
|
1102
1099
|
/* @__PURE__ */ e(
|
|
1103
1100
|
"button",
|
|
1104
1101
|
{
|
|
@@ -1122,7 +1119,7 @@ const Et = ({
|
|
|
1122
1119
|
] })
|
|
1123
1120
|
] })
|
|
1124
1121
|
),
|
|
1125
|
-
he && /* @__PURE__ */
|
|
1122
|
+
he && /* @__PURE__ */ b(
|
|
1126
1123
|
"button",
|
|
1127
1124
|
{
|
|
1128
1125
|
type: "button",
|
|
@@ -1136,49 +1133,49 @@ const Et = ({
|
|
|
1136
1133
|
]
|
|
1137
1134
|
}
|
|
1138
1135
|
),
|
|
1139
|
-
/* @__PURE__ */
|
|
1136
|
+
/* @__PURE__ */ b(
|
|
1140
1137
|
"div",
|
|
1141
1138
|
{
|
|
1142
|
-
className: `ll-expanded__pip ${ie && (y ||
|
|
1139
|
+
className: `ll-expanded__pip ${ie && (y || $) ? "is-visible" : ""}`,
|
|
1143
1140
|
children: [
|
|
1144
1141
|
/* @__PURE__ */ e(
|
|
1145
1142
|
"div",
|
|
1146
1143
|
{
|
|
1147
1144
|
ref: oe,
|
|
1148
|
-
className:
|
|
1145
|
+
className: $ ? "ll-expanded__pip-host" : "ll-expanded__pip-host is-hidden"
|
|
1149
1146
|
}
|
|
1150
1147
|
),
|
|
1151
1148
|
/* @__PURE__ */ e(
|
|
1152
1149
|
"div",
|
|
1153
1150
|
{
|
|
1154
1151
|
ref: pe,
|
|
1155
|
-
className:
|
|
1152
|
+
className: !$ && y ? "ll-expanded__pip-host" : "ll-expanded__pip-host is-hidden"
|
|
1156
1153
|
}
|
|
1157
1154
|
)
|
|
1158
1155
|
]
|
|
1159
1156
|
}
|
|
1160
1157
|
),
|
|
1161
|
-
ie ? /* @__PURE__ */
|
|
1158
|
+
ie ? /* @__PURE__ */ b("div", { className: "ll-expanded__bottom", children: [
|
|
1162
1159
|
me && /* @__PURE__ */ e("div", { className: "ll-expanded__transcript", children: /* @__PURE__ */ e("p", { className: "ll-expanded__transcript-text", children: me }) }),
|
|
1163
|
-
/* @__PURE__ */
|
|
1160
|
+
/* @__PURE__ */ b("div", { className: "ll-toolbar", onClick: (u) => u.stopPropagation(), children: [
|
|
1164
1161
|
P && /* @__PURE__ */ e(
|
|
1165
1162
|
"button",
|
|
1166
1163
|
{
|
|
1167
1164
|
type: "button",
|
|
1168
|
-
className: `ll-tool ${
|
|
1165
|
+
className: `ll-tool ${$ ? "is-on" : ""}`,
|
|
1169
1166
|
onClick: Z,
|
|
1170
|
-
"aria-label":
|
|
1171
|
-
title:
|
|
1167
|
+
"aria-label": $ ? "Stop sharing screen" : "Share screen",
|
|
1168
|
+
title: $ ? "Stop sharing" : "Share screen",
|
|
1172
1169
|
children: /* @__PURE__ */ e(Dt, {})
|
|
1173
1170
|
}
|
|
1174
1171
|
),
|
|
1175
|
-
re && /* @__PURE__ */
|
|
1172
|
+
re && /* @__PURE__ */ b("div", { className: "ll-tool-split", children: [
|
|
1176
1173
|
/* @__PURE__ */ e(
|
|
1177
1174
|
"button",
|
|
1178
1175
|
{
|
|
1179
1176
|
type: "button",
|
|
1180
1177
|
className: `ll-tool ll-tool--left ${y ? "is-on" : ""}`,
|
|
1181
|
-
onClick:
|
|
1178
|
+
onClick: U,
|
|
1182
1179
|
"aria-label": y ? "Turn off camera" : "Turn on camera",
|
|
1183
1180
|
title: y ? "Stop camera" : "Start camera",
|
|
1184
1181
|
children: /* @__PURE__ */ e(Rt, {})
|
|
@@ -1189,8 +1186,8 @@ const Et = ({
|
|
|
1189
1186
|
{
|
|
1190
1187
|
type: "button",
|
|
1191
1188
|
className: `ll-tool ll-tool--right ${y ? "is-on" : ""}`,
|
|
1192
|
-
onClick: (
|
|
1193
|
-
|
|
1189
|
+
onClick: (u) => {
|
|
1190
|
+
u.stopPropagation(), J((W) => !W), le(!1);
|
|
1194
1191
|
},
|
|
1195
1192
|
"aria-label": "Camera devices",
|
|
1196
1193
|
"aria-haspopup": "listbox",
|
|
@@ -1204,13 +1201,13 @@ const Et = ({
|
|
|
1204
1201
|
label: "Camera",
|
|
1205
1202
|
devices: X,
|
|
1206
1203
|
activeId: ne,
|
|
1207
|
-
onPick: (
|
|
1208
|
-
J(!1), ve(
|
|
1204
|
+
onPick: (u) => {
|
|
1205
|
+
J(!1), ve(u);
|
|
1209
1206
|
}
|
|
1210
1207
|
}
|
|
1211
1208
|
)
|
|
1212
1209
|
] }),
|
|
1213
|
-
/* @__PURE__ */
|
|
1210
|
+
/* @__PURE__ */ b("div", { className: "ll-tool-split", children: [
|
|
1214
1211
|
/* @__PURE__ */ e(
|
|
1215
1212
|
"button",
|
|
1216
1213
|
{
|
|
@@ -1227,8 +1224,8 @@ const Et = ({
|
|
|
1227
1224
|
{
|
|
1228
1225
|
type: "button",
|
|
1229
1226
|
className: `ll-tool ll-tool--right ${I ? "is-muted" : ""}`,
|
|
1230
|
-
onClick: (
|
|
1231
|
-
|
|
1227
|
+
onClick: (u) => {
|
|
1228
|
+
u.stopPropagation(), le((W) => !W), J(!1);
|
|
1232
1229
|
},
|
|
1233
1230
|
"aria-label": "Microphone devices",
|
|
1234
1231
|
"aria-haspopup": "listbox",
|
|
@@ -1236,11 +1233,11 @@ const Et = ({
|
|
|
1236
1233
|
children: /* @__PURE__ */ e(_e, {})
|
|
1237
1234
|
}
|
|
1238
1235
|
),
|
|
1239
|
-
q &&
|
|
1236
|
+
q && x.length > 0 && /* @__PURE__ */ e(
|
|
1240
1237
|
Ve,
|
|
1241
1238
|
{
|
|
1242
1239
|
label: "Microphone",
|
|
1243
|
-
devices:
|
|
1240
|
+
devices: x,
|
|
1244
1241
|
activeId: "",
|
|
1245
1242
|
onPick: () => le(!1)
|
|
1246
1243
|
}
|
|
@@ -1258,7 +1255,7 @@ const Et = ({
|
|
|
1258
1255
|
}
|
|
1259
1256
|
)
|
|
1260
1257
|
] }),
|
|
1261
|
-
be && /* @__PURE__ */
|
|
1258
|
+
be && /* @__PURE__ */ b("form", { className: "ll-message-input", onSubmit: B, children: [
|
|
1262
1259
|
/* @__PURE__ */ e(
|
|
1263
1260
|
"input",
|
|
1264
1261
|
{
|
|
@@ -1266,7 +1263,7 @@ const Et = ({
|
|
|
1266
1263
|
className: "ll-message-input__field",
|
|
1267
1264
|
placeholder: "Message...",
|
|
1268
1265
|
value: se,
|
|
1269
|
-
onChange: (
|
|
1266
|
+
onChange: (u) => ce(u.target.value),
|
|
1270
1267
|
"aria-label": "Message the agent"
|
|
1271
1268
|
}
|
|
1272
1269
|
),
|
|
@@ -1291,12 +1288,12 @@ const Et = ({
|
|
|
1291
1288
|
)
|
|
1292
1289
|
] }) : (
|
|
1293
1290
|
// Idle-state footer: start button + greeting
|
|
1294
|
-
|
|
1291
|
+
s && /* @__PURE__ */ e("div", { className: "ll-expanded__bottom ll-expanded__bottom--idle", children: /* @__PURE__ */ e("div", { className: "ll-expanded__transcript", children: /* @__PURE__ */ e("p", { className: "ll-expanded__transcript-text", children: s }) }) })
|
|
1295
1292
|
),
|
|
1296
1293
|
(() => {
|
|
1297
|
-
if (
|
|
1298
|
-
return /* @__PURE__ */
|
|
1299
|
-
/* @__PURE__ */ e("span", { children:
|
|
1294
|
+
if (w && N !== "error")
|
|
1295
|
+
return /* @__PURE__ */ b("div", { className: "ll-expanded__banner", role: "alert", children: [
|
|
1296
|
+
/* @__PURE__ */ e("span", { children: w }),
|
|
1300
1297
|
/* @__PURE__ */ e(
|
|
1301
1298
|
"button",
|
|
1302
1299
|
{
|
|
@@ -1309,9 +1306,9 @@ const Et = ({
|
|
|
1309
1306
|
)
|
|
1310
1307
|
] });
|
|
1311
1308
|
if (!z || N !== "error") return null;
|
|
1312
|
-
let
|
|
1313
|
-
return z === "MIC_PERMISSION_DENIED" ?
|
|
1314
|
-
/* @__PURE__ */ e("span", { children:
|
|
1309
|
+
let u = "Failed to connect", W = "Try again";
|
|
1310
|
+
return z === "MIC_PERMISSION_DENIED" ? u = "Microphone blocked. Allow access to talk." : z === "MIC_NOT_FOUND" ? u = "No microphone found. Plug one in + retry." : z === "MIC_UNAVAILABLE" ? u = "Mic unavailable. Check other apps using it." : z === "AGENT_TIMEOUT" ? u = "Agent didn't pick up. Try again." : z === "CONNECT_FAILED" ? u = "Connection failed. Check your network." : z.length < 80 && (u = z), /* @__PURE__ */ b("div", { className: "ll-expanded__banner ll-expanded__banner--error", role: "alert", children: [
|
|
1311
|
+
/* @__PURE__ */ e("span", { children: u }),
|
|
1315
1312
|
/* @__PURE__ */ e(
|
|
1316
1313
|
"button",
|
|
1317
1314
|
{
|
|
@@ -1331,7 +1328,7 @@ function _e() {
|
|
|
1331
1328
|
return /* @__PURE__ */ e("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": !0, children: /* @__PURE__ */ e("polyline", { points: "6 9 12 15 18 9" }) });
|
|
1332
1329
|
}
|
|
1333
1330
|
function je() {
|
|
1334
|
-
return /* @__PURE__ */
|
|
1331
|
+
return /* @__PURE__ */ b("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", "aria-hidden": !0, children: [
|
|
1335
1332
|
/* @__PURE__ */ e("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
1336
1333
|
/* @__PURE__ */ e("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
1337
1334
|
] });
|
|
@@ -1340,20 +1337,20 @@ function At() {
|
|
|
1340
1337
|
return /* @__PURE__ */ e("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", "aria-hidden": !0, children: /* @__PURE__ */ e("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) });
|
|
1341
1338
|
}
|
|
1342
1339
|
function Dt() {
|
|
1343
|
-
return /* @__PURE__ */
|
|
1340
|
+
return /* @__PURE__ */ b("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
|
|
1344
1341
|
/* @__PURE__ */ e("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
|
|
1345
1342
|
/* @__PURE__ */ e("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
|
|
1346
1343
|
/* @__PURE__ */ e("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
|
|
1347
1344
|
] });
|
|
1348
1345
|
}
|
|
1349
1346
|
function Rt() {
|
|
1350
|
-
return /* @__PURE__ */
|
|
1347
|
+
return /* @__PURE__ */ b("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
|
|
1351
1348
|
/* @__PURE__ */ e("path", { d: "M23 7l-7 5 7 5V7z" }),
|
|
1352
1349
|
/* @__PURE__ */ e("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2" })
|
|
1353
1350
|
] });
|
|
1354
1351
|
}
|
|
1355
1352
|
function Tt({ muted: t }) {
|
|
1356
|
-
return /* @__PURE__ */
|
|
1353
|
+
return /* @__PURE__ */ b("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
|
|
1357
1354
|
/* @__PURE__ */ e("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
|
|
1358
1355
|
/* @__PURE__ */ e("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
|
|
1359
1356
|
/* @__PURE__ */ e("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
|
|
@@ -1361,21 +1358,21 @@ function Tt({ muted: t }) {
|
|
|
1361
1358
|
] });
|
|
1362
1359
|
}
|
|
1363
1360
|
function zt({ muted: t }) {
|
|
1364
|
-
return /* @__PURE__ */
|
|
1361
|
+
return /* @__PURE__ */ b("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
|
|
1365
1362
|
/* @__PURE__ */ e("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
|
|
1366
|
-
t ? /* @__PURE__ */ e("line", { x1: "23", y1: "9", x2: "17", y2: "15" }) : /* @__PURE__ */
|
|
1363
|
+
t ? /* @__PURE__ */ e("line", { x1: "23", y1: "9", x2: "17", y2: "15" }) : /* @__PURE__ */ b(Qe, { children: [
|
|
1367
1364
|
/* @__PURE__ */ e("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" }),
|
|
1368
1365
|
/* @__PURE__ */ e("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })
|
|
1369
1366
|
] })
|
|
1370
1367
|
] });
|
|
1371
1368
|
}
|
|
1372
1369
|
function Pt() {
|
|
1373
|
-
return /* @__PURE__ */
|
|
1370
|
+
return /* @__PURE__ */ b("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
|
|
1374
1371
|
/* @__PURE__ */ e("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
|
|
1375
1372
|
/* @__PURE__ */ e("polyline", { points: "12 5 19 12 12 19" })
|
|
1376
1373
|
] });
|
|
1377
1374
|
}
|
|
1378
|
-
const Ve = ({ label: t, devices: n, activeId: i, onPick: o }) => /* @__PURE__ */
|
|
1375
|
+
const Ve = ({ label: t, devices: n, activeId: i, onPick: o }) => /* @__PURE__ */ b(
|
|
1379
1376
|
"div",
|
|
1380
1377
|
{
|
|
1381
1378
|
className: "ll-device-menu",
|
|
@@ -1383,9 +1380,9 @@ const Ve = ({ label: t, devices: n, activeId: i, onPick: o }) => /* @__PURE__ */
|
|
|
1383
1380
|
role: "listbox",
|
|
1384
1381
|
children: [
|
|
1385
1382
|
/* @__PURE__ */ e("p", { className: "ll-device-menu__label", children: t }),
|
|
1386
|
-
n.map((r,
|
|
1383
|
+
n.map((r, s) => {
|
|
1387
1384
|
const c = i === r.deviceId;
|
|
1388
|
-
return /* @__PURE__ */
|
|
1385
|
+
return /* @__PURE__ */ b(
|
|
1389
1386
|
"button",
|
|
1390
1387
|
{
|
|
1391
1388
|
type: "button",
|
|
@@ -1395,15 +1392,15 @@ const Ve = ({ label: t, devices: n, activeId: i, onPick: o }) => /* @__PURE__ */
|
|
|
1395
1392
|
"aria-selected": c,
|
|
1396
1393
|
children: [
|
|
1397
1394
|
c && /* @__PURE__ */ e("span", { className: "ll-device-menu__dot", children: "●" }),
|
|
1398
|
-
/* @__PURE__ */ e("span", { className: "ll-device-menu__name", children: r.label || `${t} ${
|
|
1395
|
+
/* @__PURE__ */ e("span", { className: "ll-device-menu__name", children: r.label || `${t} ${s + 1}` })
|
|
1399
1396
|
]
|
|
1400
1397
|
},
|
|
1401
|
-
r.deviceId ||
|
|
1398
|
+
r.deviceId || s
|
|
1402
1399
|
);
|
|
1403
1400
|
})
|
|
1404
1401
|
]
|
|
1405
1402
|
}
|
|
1406
|
-
),
|
|
1403
|
+
), Bt = /* @__PURE__ */ new Set([
|
|
1407
1404
|
"agent_state",
|
|
1408
1405
|
"avatar_stream_ready",
|
|
1409
1406
|
"avatar_active",
|
|
@@ -1413,22 +1410,22 @@ const Ve = ({ label: t, devices: n, activeId: i, onPick: o }) => /* @__PURE__ */
|
|
|
1413
1410
|
"idle_warning",
|
|
1414
1411
|
"idle_timeout"
|
|
1415
1412
|
]);
|
|
1416
|
-
function
|
|
1413
|
+
function Ut(t) {
|
|
1417
1414
|
var Ie, Ae, De, Re, Te, ze;
|
|
1418
1415
|
const {
|
|
1419
1416
|
agentId: n,
|
|
1420
1417
|
apiKey: i,
|
|
1421
1418
|
baseUrl: o = "https://app.livelayer.studio",
|
|
1422
1419
|
sessionEndpoint: r,
|
|
1423
|
-
sessionBody:
|
|
1420
|
+
sessionBody: s,
|
|
1424
1421
|
autoConnect: c = !1,
|
|
1425
1422
|
displayMode: m,
|
|
1426
1423
|
defaultDisplayMode: d = "expanded",
|
|
1427
|
-
onDisplayModeChange:
|
|
1428
|
-
position:
|
|
1429
|
-
mobileBreakpoint:
|
|
1430
|
-
persistKey:
|
|
1431
|
-
disablePersistence:
|
|
1424
|
+
onDisplayModeChange: f,
|
|
1425
|
+
position: h = "bottom-right",
|
|
1426
|
+
mobileBreakpoint: l = 640,
|
|
1427
|
+
persistKey: a = "ll-widget",
|
|
1428
|
+
disablePersistence: C = !1,
|
|
1432
1429
|
teamMembers: _,
|
|
1433
1430
|
currentTeamMemberId: N,
|
|
1434
1431
|
onTeamMemberChange: D,
|
|
@@ -1437,13 +1434,13 @@ function Bt(t) {
|
|
|
1437
1434
|
avatarImageUrl: T,
|
|
1438
1435
|
agentName: z,
|
|
1439
1436
|
branding: I = {},
|
|
1440
|
-
allowCamera:
|
|
1441
|
-
allowScreenShare:
|
|
1437
|
+
allowCamera: w = !0,
|
|
1438
|
+
allowScreenShare: x = !0,
|
|
1442
1439
|
allowTyping: y = !0,
|
|
1443
1440
|
onConnect: A,
|
|
1444
1441
|
onDisconnect: X,
|
|
1445
1442
|
onTranscript: ne,
|
|
1446
|
-
onAgentState:
|
|
1443
|
+
onAgentState: $,
|
|
1447
1444
|
onConnectionStateChange: j,
|
|
1448
1445
|
onAgentEvent: F,
|
|
1449
1446
|
onAgentCommand: re,
|
|
@@ -1451,33 +1448,33 @@ function Bt(t) {
|
|
|
1451
1448
|
className: be,
|
|
1452
1449
|
style: we,
|
|
1453
1450
|
zIndex: ge = 2147483647
|
|
1454
|
-
} = t, de = N !== void 0, [ke, xe] =
|
|
1451
|
+
} = t, de = N !== void 0, [ke, xe] = k(() => {
|
|
1455
1452
|
var v;
|
|
1456
1453
|
return N ?? ((v = _ == null ? void 0 : _[0]) == null ? void 0 : v.id);
|
|
1457
|
-
}), Q = de ? N : ke,
|
|
1454
|
+
}), Q = de ? N : ke, U = Se(
|
|
1458
1455
|
() => (_ == null ? void 0 : _.find((v) => v.id === Q)) ?? null,
|
|
1459
1456
|
[_, Q]
|
|
1460
|
-
), ve = (
|
|
1457
|
+
), ve = (U == null ? void 0 : U.agentId) ?? n, [Z, G] = vt({
|
|
1461
1458
|
value: m,
|
|
1462
1459
|
defaultValue: d,
|
|
1463
|
-
onChange:
|
|
1464
|
-
persistKey:
|
|
1465
|
-
disablePersistence:
|
|
1466
|
-
}), ee = _t(
|
|
1460
|
+
onChange: f,
|
|
1461
|
+
persistKey: a,
|
|
1462
|
+
disablePersistence: C
|
|
1463
|
+
}), ee = _t(l), ue = ot(), V = lt(), K = st(), O = ct(), Y = dt(), [ie, H] = k(!1), [he, pe] = k(!1), [oe, q] = k(!1), [le, ae] = k(!1), [J, se] = k(!1), ce = g(
|
|
1467
1464
|
(v) => {
|
|
1468
1465
|
const M = v;
|
|
1469
|
-
!M.type || typeof M.type != "string" || (F == null || F({ eventName: M.type, data: v }),
|
|
1466
|
+
!M.type || typeof M.type != "string" || (F == null || F({ eventName: M.type, data: v }), Bt.has(M.type) || re == null || re(M));
|
|
1470
1467
|
},
|
|
1471
1468
|
[re, F]
|
|
1472
|
-
),
|
|
1469
|
+
), B = it({
|
|
1473
1470
|
agentId: P ? "__controlled__" : ve,
|
|
1474
1471
|
baseUrl: o,
|
|
1475
1472
|
apiKey: i,
|
|
1476
1473
|
sessionEndpoint: r,
|
|
1477
|
-
sessionBody:
|
|
1474
|
+
sessionBody: s,
|
|
1478
1475
|
onDataMessage: P ? void 0 : ce
|
|
1479
1476
|
});
|
|
1480
|
-
|
|
1477
|
+
S(() => {
|
|
1481
1478
|
if (P != null && P.subscribeToDataMessages)
|
|
1482
1479
|
return P.subscribeToDataMessages(ce);
|
|
1483
1480
|
}, [P, ce]);
|
|
@@ -1497,29 +1494,29 @@ function Bt(t) {
|
|
|
1497
1494
|
// Dummy getRoom for shape compatibility — controlled consumers own the Room.
|
|
1498
1495
|
// Internal session's getRoom returns null when no real connect has happened,
|
|
1499
1496
|
// so we reuse its reference for type consistency.
|
|
1500
|
-
getRoom:
|
|
1497
|
+
getRoom: B.getRoom,
|
|
1501
1498
|
isControlled: !0
|
|
1502
1499
|
} : {
|
|
1503
|
-
connectionState:
|
|
1504
|
-
agentState:
|
|
1505
|
-
transcript:
|
|
1506
|
-
videoElement:
|
|
1507
|
-
audioElement:
|
|
1508
|
-
canResume:
|
|
1509
|
-
error:
|
|
1510
|
-
agentConfig:
|
|
1511
|
-
connect:
|
|
1512
|
-
disconnect:
|
|
1513
|
-
getRoom:
|
|
1500
|
+
connectionState: B.connectionState,
|
|
1501
|
+
agentState: B.agentState,
|
|
1502
|
+
transcript: B.transcript,
|
|
1503
|
+
videoElement: B.videoElement,
|
|
1504
|
+
audioElement: B.audioElement,
|
|
1505
|
+
canResume: B.canResume,
|
|
1506
|
+
error: B.error,
|
|
1507
|
+
agentConfig: B.agentConfig,
|
|
1508
|
+
connect: B.connect,
|
|
1509
|
+
disconnect: B.disconnect,
|
|
1510
|
+
getRoom: B.getRoom,
|
|
1514
1511
|
isControlled: !1
|
|
1515
|
-
}, [P,
|
|
1516
|
-
|
|
1512
|
+
}, [P, B]), me = L(null);
|
|
1513
|
+
S(() => {
|
|
1517
1514
|
const v = p.videoElement, M = me.current;
|
|
1518
1515
|
if (!(!v || !M))
|
|
1519
1516
|
return M.appendChild(v), () => {
|
|
1520
1517
|
v.parentNode === M && M.removeChild(v);
|
|
1521
1518
|
};
|
|
1522
|
-
}, [p.videoElement]),
|
|
1519
|
+
}, [p.videoElement]), S(() => {
|
|
1523
1520
|
const v = p.audioElement;
|
|
1524
1521
|
if (!v) return;
|
|
1525
1522
|
ue.attach(v);
|
|
@@ -1529,7 +1526,7 @@ function Bt(t) {
|
|
|
1529
1526
|
}), () => {
|
|
1530
1527
|
ue.detach();
|
|
1531
1528
|
};
|
|
1532
|
-
}, [p.audioElement]),
|
|
1529
|
+
}, [p.audioElement]), S(() => {
|
|
1533
1530
|
if (p.isControlled || p.connectionState !== "connected") return;
|
|
1534
1531
|
const v = p.getRoom();
|
|
1535
1532
|
if (v)
|
|
@@ -1537,11 +1534,11 @@ function Bt(t) {
|
|
|
1537
1534
|
}), K.attachRoom(v), O.attachRoom(v), Y.refresh(), () => {
|
|
1538
1535
|
V.teardownMic(), K.teardown(), O.teardown();
|
|
1539
1536
|
};
|
|
1540
|
-
}, [p.isControlled, p.connectionState]),
|
|
1537
|
+
}, [p.isControlled, p.connectionState]), S(() => {
|
|
1541
1538
|
const v = p.audioElement;
|
|
1542
1539
|
v && (v.muted = J);
|
|
1543
1540
|
}, [p.audioElement, J]);
|
|
1544
|
-
const Ce =
|
|
1541
|
+
const Ce = g((v) => {
|
|
1545
1542
|
const M = p.getRoom();
|
|
1546
1543
|
if (M)
|
|
1547
1544
|
try {
|
|
@@ -1551,21 +1548,21 @@ function Bt(t) {
|
|
|
1551
1548
|
M.localParticipant.publishData(te, { reliable: !0 });
|
|
1552
1549
|
} catch {
|
|
1553
1550
|
}
|
|
1554
|
-
}, [p]), ye =
|
|
1551
|
+
}, [p]), ye = g(() => {
|
|
1555
1552
|
se((v) => !v);
|
|
1556
1553
|
}, []);
|
|
1557
|
-
|
|
1554
|
+
S(() => {
|
|
1558
1555
|
j == null || j(p.connectionState), p.connectionState === "connected" ? A == null || A() : p.connectionState === "disconnected" && (X == null || X());
|
|
1559
|
-
}, [p.connectionState, A, X, j]),
|
|
1556
|
+
}, [p.connectionState, A, X, j]), S(() => {
|
|
1560
1557
|
ne == null || ne(p.transcript);
|
|
1561
|
-
}, [p.transcript, ne]),
|
|
1562
|
-
|
|
1563
|
-
}, [p.agentState,
|
|
1564
|
-
const
|
|
1565
|
-
|
|
1566
|
-
p.isControlled || !c ||
|
|
1558
|
+
}, [p.transcript, ne]), S(() => {
|
|
1559
|
+
$ == null || $(p.agentState);
|
|
1560
|
+
}, [p.agentState, $]);
|
|
1561
|
+
const u = L(!1);
|
|
1562
|
+
S(() => {
|
|
1563
|
+
p.isControlled || !c || u.current || p.connectionState === "idle" && (u.current = !0, p.connect());
|
|
1567
1564
|
}, [c, p.connectionState, p]);
|
|
1568
|
-
const W =
|
|
1565
|
+
const W = g(
|
|
1569
1566
|
(v) => {
|
|
1570
1567
|
const M = _ == null ? void 0 : _.find((te) => te.id === v);
|
|
1571
1568
|
M && (q(!1), v !== Q && (pe(!0), p.disconnect(), de || xe(v), D == null || D(M)));
|
|
@@ -1578,23 +1575,23 @@ function Bt(t) {
|
|
|
1578
1575
|
D
|
|
1579
1576
|
]
|
|
1580
1577
|
);
|
|
1581
|
-
|
|
1578
|
+
S(() => {
|
|
1582
1579
|
he && p.connectionState === "connected" && pe(!1);
|
|
1583
|
-
}, [p.connectionState, he]),
|
|
1580
|
+
}, [p.connectionState, he]), S(() => {
|
|
1584
1581
|
if (!oe) return;
|
|
1585
1582
|
const v = (M) => {
|
|
1586
1583
|
M.key === "Escape" && q(!1);
|
|
1587
1584
|
};
|
|
1588
1585
|
return window.addEventListener("keydown", v), () => window.removeEventListener("keydown", v);
|
|
1589
1586
|
}, [oe]);
|
|
1590
|
-
const Fe = !!T || !!(
|
|
1587
|
+
const Fe = !!T || !!(U != null && U.avatarImageUrl) || p.isControlled, Ne = ut(ve, o, Fe), Ee = (U == null ? void 0 : U.name) ?? z ?? ((Ie = p.agentConfig) == null ? void 0 : Ie.name) ?? ((Ae = Ne.info) == null ? void 0 : Ae.name) ?? "Live Layer", Le = (U == null ? void 0 : U.avatarImageUrl) ?? T ?? ((De = p.agentConfig) == null ? void 0 : De.avatarImageUrl) ?? ((Re = Ne.info) == null ? void 0 : Re.avatarImageUrl) ?? null, Ge = E ?? ((Te = p.agentConfig) == null ? void 0 : Te.idleLoopUrl) ?? ((ze = Ne.info) == null ? void 0 : ze.idleLoopUrl) ?? null, Ke = R ?? null, Ye = g(() => G("expanded"), [G]), He = g(
|
|
1591
1588
|
() => G("minimized"),
|
|
1592
1589
|
[G]
|
|
1593
|
-
), Me =
|
|
1590
|
+
), Me = g(() => G("hidden"), [G]), qe = g(() => {
|
|
1594
1591
|
const v = p.audioElement;
|
|
1595
1592
|
v && v.play().then(() => H(!1)).catch(() => {
|
|
1596
1593
|
});
|
|
1597
|
-
}, [p.audioElement]), Je =
|
|
1594
|
+
}, [p.audioElement]), Je = g(() => {
|
|
1598
1595
|
H(!1), p.connect();
|
|
1599
1596
|
}, [p]), fe = {
|
|
1600
1597
|
...we,
|
|
@@ -1607,18 +1604,18 @@ function Bt(t) {
|
|
|
1607
1604
|
`ll-widget--${ee ? "mobile" : "desktop"}`,
|
|
1608
1605
|
be
|
|
1609
1606
|
].filter(Boolean).join(" ");
|
|
1610
|
-
return /* @__PURE__ */
|
|
1607
|
+
return /* @__PURE__ */ b(
|
|
1611
1608
|
"div",
|
|
1612
1609
|
{
|
|
1613
1610
|
className: Xe,
|
|
1614
1611
|
style: fe,
|
|
1615
1612
|
"data-display-mode": Z,
|
|
1616
|
-
"data-position":
|
|
1613
|
+
"data-position": h,
|
|
1617
1614
|
children: [
|
|
1618
1615
|
Z === "hidden" && /* @__PURE__ */ e(
|
|
1619
1616
|
Et,
|
|
1620
1617
|
{
|
|
1621
|
-
position:
|
|
1618
|
+
position: h,
|
|
1622
1619
|
isMobile: ee,
|
|
1623
1620
|
isSpeaking: p.agentState === "speaking",
|
|
1624
1621
|
onExpand: () => G("expanded"),
|
|
@@ -1628,7 +1625,7 @@ function Bt(t) {
|
|
|
1628
1625
|
Z === "minimized" && /* @__PURE__ */ e(
|
|
1629
1626
|
Lt,
|
|
1630
1627
|
{
|
|
1631
|
-
position:
|
|
1628
|
+
position: h,
|
|
1632
1629
|
isMobile: ee,
|
|
1633
1630
|
agentName: Ee,
|
|
1634
1631
|
avatarImageUrl: Le,
|
|
@@ -1643,7 +1640,7 @@ function Bt(t) {
|
|
|
1643
1640
|
Z === "expanded" && /* @__PURE__ */ e(
|
|
1644
1641
|
It,
|
|
1645
1642
|
{
|
|
1646
|
-
position:
|
|
1643
|
+
position: h,
|
|
1647
1644
|
isMobile: ee,
|
|
1648
1645
|
agentName: Ee,
|
|
1649
1646
|
avatarImageUrl: Le,
|
|
@@ -1668,8 +1665,8 @@ function Bt(t) {
|
|
|
1668
1665
|
isScreenShareEnabled: O.isEnabled,
|
|
1669
1666
|
screenPreviewEl: O.previewEl,
|
|
1670
1667
|
isSpeakerMuted: J,
|
|
1671
|
-
allowCamera:
|
|
1672
|
-
allowScreenShare:
|
|
1668
|
+
allowCamera: w,
|
|
1669
|
+
allowScreenShare: x,
|
|
1673
1670
|
allowTyping: y,
|
|
1674
1671
|
languageMenuOpen: le,
|
|
1675
1672
|
onToggleLanguageMenu: () => ae((v) => !v),
|
|
@@ -1698,7 +1695,7 @@ function Bt(t) {
|
|
|
1698
1695
|
);
|
|
1699
1696
|
}
|
|
1700
1697
|
function Ft(t) {
|
|
1701
|
-
return /* @__PURE__ */ e(rt, { children: /* @__PURE__ */ e(
|
|
1698
|
+
return /* @__PURE__ */ e(rt, { children: /* @__PURE__ */ e(Ut, { ...t }) });
|
|
1702
1699
|
}
|
|
1703
1700
|
const Gt = ({
|
|
1704
1701
|
agentId: t,
|
|
@@ -1706,38 +1703,38 @@ const Gt = ({
|
|
|
1706
1703
|
apiKey: i,
|
|
1707
1704
|
mode: o,
|
|
1708
1705
|
onAgentEvent: r,
|
|
1709
|
-
className:
|
|
1706
|
+
className: s,
|
|
1710
1707
|
style: c
|
|
1711
1708
|
}) => {
|
|
1712
|
-
const m =
|
|
1713
|
-
|
|
1714
|
-
const
|
|
1715
|
-
var
|
|
1716
|
-
const
|
|
1717
|
-
(
|
|
1709
|
+
const m = L(null), d = L(null), f = L(r);
|
|
1710
|
+
f.current = r;
|
|
1711
|
+
const h = g((l) => {
|
|
1712
|
+
var C;
|
|
1713
|
+
const a = l.detail;
|
|
1714
|
+
(C = f.current) == null || C.call(f, a);
|
|
1718
1715
|
}, []);
|
|
1719
|
-
return
|
|
1720
|
-
const
|
|
1721
|
-
if (!
|
|
1722
|
-
const
|
|
1723
|
-
return
|
|
1724
|
-
|
|
1716
|
+
return S(() => {
|
|
1717
|
+
const l = m.current;
|
|
1718
|
+
if (!l) return;
|
|
1719
|
+
const a = document.createElement("livelayer-widget");
|
|
1720
|
+
return a.setAttribute("agent-id", t), n && a.setAttribute("base-url", n), i && a.setAttribute("api-key", i), o && a.setAttribute("mode", o), a.addEventListener("agent-event", h), l.appendChild(a), d.current = a, () => {
|
|
1721
|
+
a.removeEventListener("agent-event", h), l.removeChild(a), d.current = null;
|
|
1725
1722
|
};
|
|
1726
|
-
}, [t]),
|
|
1723
|
+
}, [t]), S(() => {
|
|
1727
1724
|
d.current && (o ? d.current.setAttribute("mode", o) : d.current.removeAttribute("mode"));
|
|
1728
|
-
}, [o]), /* @__PURE__ */ e("div", { ref: m, className:
|
|
1725
|
+
}, [o]), /* @__PURE__ */ e("div", { ref: m, className: s, style: c });
|
|
1729
1726
|
};
|
|
1730
1727
|
function Kt() {
|
|
1731
|
-
const [t, n] =
|
|
1732
|
-
n((
|
|
1733
|
-
const c =
|
|
1728
|
+
const [t, n] = k([]), i = g((r) => {
|
|
1729
|
+
n((s) => {
|
|
1730
|
+
const c = s.findIndex((m) => m.id === r.id);
|
|
1734
1731
|
if (c >= 0) {
|
|
1735
|
-
const m =
|
|
1732
|
+
const m = s.slice();
|
|
1736
1733
|
return m[c] = r, m;
|
|
1737
1734
|
}
|
|
1738
|
-
return [...
|
|
1735
|
+
return [...s, r];
|
|
1739
1736
|
});
|
|
1740
|
-
}, []), o =
|
|
1737
|
+
}, []), o = g(() => n([]), []);
|
|
1741
1738
|
return {
|
|
1742
1739
|
entries: t,
|
|
1743
1740
|
pushSegment: i,
|