chordia-ui 3.4.4 → 3.4.6

package/dist/UpdatedInteractionRecording.es.js

@@ -1,9 +1,9 @@
 import { jsxs as i, jsx as o, Fragment as Ee } from "react/jsx-runtime";
-import { forwardRef as Ge, useRef as P, useState as f, useCallback as te, useEffect as ne, useImperativeHandle as We } from "react";
+import { forwardRef as Ge, useRef as L, useState as f, useCallback as ne, useEffect as _, useImperativeHandle as We } from "react";
 import { FileSignal as Me, RotateCcw as ze, Pause as He, Play as Ae, RotateCw as Pe, ChevronDown as $e, AudioLines as oe, PauseCircle as Be, PlayCircle as je } from "lucide-react";
-function re(g) {
-  const d = Math.floor(g / 60), p = Math.round(g % 60);
-  return `${d}:${p.toString().padStart(2, "0")}`;
+function re(p) {
+  const d = Math.floor(p / 60), y = Math.round(p % 60);
+  return `${d}:${y.toString().padStart(2, "0")}`;
 }
 const Le = {
   Agent: [
@@ -22,144 +22,144 @@ const Le = {
     { start: 0.6, end: 0.66 },
     { start: 0.74, end: 0.8 }
   ]
-}, D = [
+}, E = [
   { speaker: "Agent", type: "agent", time: "00:04", text: "Thanks for calling Miles Point S Pensau. This is Steve. How can I help you?" },
   { speaker: "Customer", type: "customer", time: "00:12", text: "Hi, Steve. This is Sandra with Botai Catering." },
   { speaker: "Agent", type: "agent", time: "00:18", text: "Hello. How are you?" },
   { speaker: "Customer", type: "customer", time: "00:20", text: "I'm doing really good. Hey. I brought my vans in last week, and I call it a beeping van, the one that beeps when you back up. Makes the crunchy noise. So I just took it on Saturday after, I think I had the, the Miles. I picked it up on Saturday morning, and I went to an event. So So I don't know if it's the tire or something, but makes it a little crunchy noise. Sometimes when I do the brake, but only if I turn the wheel too." },
   { speaker: "Agent", type: "agent", time: "00:21", text: "Oh, interesting. Okay. Can you swing by with it one of these days?" }
 ], _e = [1, 1.25, 1.5, 2];
-function ie(g) {
-  if (!g)
+function ie(p) {
+  if (!p)
     return 0;
-  const d = g.split(":").map(Number);
+  const d = p.split(":").map(Number);
   return (d[0] || 0) * 60 + (d[1] || 0);
 }
-const Ke = Ge(function({
+const qe = Ge(function({
   audioUrl: d,
-  timelineSegments: p = [],
-  durationSeconds: R = 0,
+  timelineSegments: y = [],
+  durationSeconds: G = 0,
   // Parent-managed audio props (optional — if not provided, component manages its own audio)
   currentTimeSeconds: ae,
-  timelinePlaying: $,
+  timelinePlaying: X,
   playbackRate: se,
-  onSeek: B,
+  onSeek: V,
   onTogglePlay: S,
-  onSeekBack: j,
-  onSeekForward: L,
-  onSetPlaybackRate: _,
-  audioRef: X,
+  onSeekBack: Y,
+  onSeekForward: q,
+  onSetPlaybackRate: K,
+  audioRef: Z,
   // Speaker names
-  agentName: T = "Agent",
-  customerName: E = "Customer",
+  agentName: W = "Agent",
+  customerName: M = "Customer",
   // Transcript props
-  transcript: y,
+  transcript: m,
   highlightedTurns: le = /* @__PURE__ */ new Set(),
-  activeTurnIndex: Y,
+  activeTurnIndex: w,
   activeDemoIndex: ce = 1,
   turnObservations: de = {},
-  setExpandedSignals: G,
-  onTurnPlayPause: q
+  setExpandedSignals: z,
+  onTurnPlayPause: J
 }, ue) {
-  var ee;
-  const K = P(null), u = P(null), k = P(null), [V, m] = f(!1), [W, Z] = f(0), [he, fe] = f(0), [ge, pe] = f(1), [w, ye] = f(null), [me, ve] = f(1), [be, I] = f(!1), [ke, J] = f(!1), [N, M] = f(ce), s = !!X, x = !d, l = d && !s, F = x ? be : s ? $ ?? !1 : V, xe = x ? w ?? 0 : s ? ae ?? 0 : W, z = x ? me : s ? se ?? 1 : ge, H = x ? R || 156 : s ? R : he || R || 0, A = te(() => {
+  var te;
+  const H = L(null), u = L(null), x = L(null), [N, v] = f(!1), [A, Q] = f(0), [he, fe] = f(0), [ge, pe] = f(1), [I, ye] = f(null), [me, ve] = f(1), [be, C] = f(!1), [ke, O] = f(!1), [D, P] = f(ce), s = !!Z, F = !d, l = d && !s, g = F ? be : s ? X ?? !1 : N, xe = F ? I ?? 0 : s ? ae ?? 0 : A, $ = F ? me : s ? se ?? 1 : ge, B = F ? G || 156 : s ? G : he || G || 0, j = ne(() => {
     const e = () => {
       const t = u.current;
-      t && Z(t.currentTime), k.current = requestAnimationFrame(e);
+      t && Q(t.currentTime), x.current = requestAnimationFrame(e);
     };
-    k.current = requestAnimationFrame(e);
-  }, []), v = te(() => {
-    k.current && (cancelAnimationFrame(k.current), k.current = null);
+    x.current = requestAnimationFrame(e);
+  }, []), b = ne(() => {
+    x.current && (cancelAnimationFrame(x.current), x.current = null);
   }, []);
-  ne(() => () => v(), [v]), ne(() => {
+  _(() => () => b(), [b]), _(() => {
     if (!l)
       return;
     const e = u.current;
     if (!e)
       return;
     const t = () => fe(e.duration || 0), n = () => {
-      m(!1), v();
+      v(!1), b();
     };
     return e.addEventListener("loadedmetadata", t), e.addEventListener("ended", n), () => {
       e.removeEventListener("loadedmetadata", t), e.removeEventListener("ended", n);
     };
-  }, [l, v]);
-  const Q = (e) => {
-    for (let t = D.length - 1; t >= 0; t--) {
-      const n = ie(D[t].time);
+  }, [l, b]);
+  const U = (e) => {
+    for (let t = E.length - 1; t >= 0; t--) {
+      const n = ie(E[t].time);
       if (e >= n)
         return t;
     }
     return 0;
-  }, b = (e) => {
-    const n = Math.max(0, Math.min(e, H || 156));
+  }, k = (e) => {
+    const n = Math.max(0, Math.min(e, B || 156));
     if (l) {
       const r = u.current;
-      r && (r.currentTime = n), Z(n);
+      r && (r.currentTime = n), Q(n);
     } else
-      s && B && B(n);
-    ye(n), M(Q(n));
+      s && V && V(n);
+    ye(n), P(U(n));
   }, Fe = () => {
     if (l) {
       const e = u.current;
       if (!e)
         return;
-      V ? (e.pause(), v(), m(!1)) : e.play().then(() => {
-        m(!0), A();
+      N ? (e.pause(), b(), v(!1)) : e.play().then(() => {
+        v(!0), j();
       }).catch(() => {
       });
     } else
-      s && S ? S() : I((e) => !e);
+      s && S ? S() : C((e) => !e);
   }, Se = () => {
-    s && j ? j() : b(Math.max(0, (l ? W : w ?? 0) - 10));
+    s && Y ? Y() : k(Math.max(0, (l ? A : I ?? 0) - 10));
   }, we = () => {
-    s && L ? L() : b(Math.min(H || 156, (l ? W : w ?? 0) + 10));
+    s && q ? q() : k(Math.min(B || 156, (l ? A : I ?? 0) + 10));
   }, Ie = (e) => {
     if (l) {
       const t = u.current;
       t && (t.playbackRate = e), pe(e);
     } else
-      s && _ && _(e);
-    ve(e), J(!1);
+      s && K && K(e);
+    ve(e), O(!1);
   };
   We(ue, () => ({
     seekTo: (e) => {
-      if (b(e), s)
-        !$ && S && S();
+      if (k(e), s)
+        !X && S && S();
       else if (l) {
         const n = u.current;
         n && n.play().then(() => {
-          m(!0), A();
+          v(!0), j();
         }).catch(() => {
         });
       } else
-        I(!0);
-      const t = Q(e);
-      M(t), setTimeout(() => {
+        C(!0);
+      const t = U(e);
+      P(t), setTimeout(() => {
         var r;
-        const n = (r = K.current) == null ? void 0 : r.children;
+        const n = (r = H.current) == null ? void 0 : r.children;
         n != null && n[t] && n[t].scrollIntoView({ behavior: "smooth", block: "nearest" });
       }, 50);
     }
   }));
   const Ce = (e) => {
     var t;
-    if (N === e && F) {
+    if (D === e && g) {
       if (l) {
         const n = u.current;
-        n && n.pause(), v(), m(!1);
+        n && n.pause(), b(), v(!1);
       }
-      I(!1);
+      C(!1);
     } else {
-      const n = ie((t = D[e]) == null ? void 0 : t.time);
-      if (M(e), b(n), l) {
+      const n = ie((t = E[e]) == null ? void 0 : t.time);
+      if (P(e), k(n), l) {
         const r = u.current;
         r && (r.currentTime = n, r.play().then(() => {
-          m(!0), A();
+          v(!0), j();
         }).catch(() => {
         }));
       }
-      I(!0);
+      C(!0);
     }
   }, De = (e, t) => {
     if (e == null)
@@ -169,26 +169,39 @@ const Ke = Ge(function({
       return `${a.toString().padStart(2, "0")}:${c.toString().padStart(2, "0")}`;
     };
     return `${n(e)}–${t != null ? n(t) : n(e)}`;
-  }, O = (ee = y == null ? void 0 : y.messages) != null && ee.length ? y.messages.map((e, t) => {
+  }, R = (te = m == null ? void 0 : m.messages) != null && te.length ? m.messages.map((e, t) => {
     var n, r;
     return {
-      actor: e.actor === "agent" ? ((n = y.actor_map) == null ? void 0 : n.agent) || "Agent" : ((r = y.actor_map) == null ? void 0 : r.customer) || "Customer",
+      actor: e.actor === "agent" ? ((n = m.actor_map) == null ? void 0 : n.agent) || "Agent" : ((r = m.actor_map) == null ? void 0 : r.customer) || "Customer",
       actorType: e.actor === "agent" ? "agent" : "customer",
       text: e.text || "",
       timeRange: De(e.start ?? e.start_ms, e.end ?? e.end_ms),
       isHighlighted: le.has(t),
-      highlightColor: F && Y === t ? e.actor === "agent" ? "var(--rail-outcome)" : "var(--rail-discovery)" : void 0,
+      highlightColor: g && w === t ? e.actor === "agent" ? "var(--rail-outcome)" : "var(--rail-discovery)" : void 0,
       observations: (de[t] || []).map((a) => ({
         ...a,
         onClick: () => {
-          G == null || G((c) => /* @__PURE__ */ new Set([...c, a.signalKey])), setTimeout(() => {
+          z == null || z((c) => /* @__PURE__ */ new Set([...c, a.signalKey])), setTimeout(() => {
             const c = document.getElementById(`signal-${a.signalKey}`);
             c && c.scrollIntoView({ behavior: "smooth", block: "nearest" });
           }, 100);
         }
       }))
     };
-  }) : null, U = x ? w ?? 0 : xe, h = H || 156, C = h > 0 ? U / h * 100 : 0, Re = Math.round(U);
+  }) : null;
+  _(() => {
+    if (!g)
+      return;
+    const e = R ? w : D;
+    if (e == null || e < 0)
+      return;
+    const t = H.current;
+    if (!t)
+      return;
+    const n = t.children;
+    n != null && n[e] && n[e].scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }, [w, D, g, R]);
+  const ee = F ? I ?? 0 : xe, h = B || 156, T = h > 0 ? ee / h * 100 : 0, Re = Math.round(ee);
   return /* @__PURE__ */ i("div", { style: {
     display: "flex",
     flexDirection: "column",
@@ -234,9 +247,9 @@ const Ke = Ge(function({
             color: "var(--Grey-Strong, #2E3236)",
             lineHeight: 1.2
           }, children: [
-            T,
+            W,
             " / ",
-            E
+            M
           ] }),
           /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
             /* @__PURE__ */ o("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Muted, #808183)", lineHeight: 1.2 }, children: "10" }),
@@ -252,7 +265,7 @@ const Ke = Ge(function({
               display: "flex",
               alignItems: "center",
               justifyContent: "center"
-            }, children: F ? /* @__PURE__ */ o(He, { size: 14, color: "#FFF", fill: "#FFF" }) : /* @__PURE__ */ o(Ae, { size: 14, color: "#FFF", fill: "#FFF", strokeWidth: 1.5, style: { marginLeft: 2 } }) }),
+            }, children: g ? /* @__PURE__ */ o(He, { size: 14, color: "#FFF", fill: "#FFF" }) : /* @__PURE__ */ o(Ae, { size: 14, color: "#FFF", fill: "#FFF", strokeWidth: 1.5, style: { marginLeft: 2 } }) }),
             /* @__PURE__ */ o("button", { onClick: we, style: { background: "none", border: "none", cursor: "pointer", padding: 0, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ o(Pe, { size: 20, color: "#808183", strokeWidth: 1.5 }) }),
             /* @__PURE__ */ o("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Muted, #808183)", lineHeight: 1.2 }, children: "10" })
           ] }),
@@ -260,7 +273,7 @@ const Ke = Ge(function({
             /* @__PURE__ */ i(
               "button",
               {
-                onClick: () => J((e) => !e),
+                onClick: () => O((e) => !e),
                 style: {
                   background: "var(--Grey-White, #FFF)",
                   border: "1px solid var(--Grey-absent, #D9D9D9)",
@@ -280,7 +293,7 @@ const Ke = Ge(function({
                   gap: 4
                 },
                 children: [
-                  z,
+                  $,
                   "x",
                   /* @__PURE__ */ o($e, { size: 12, color: "#808183" })
                 ]
@@ -307,10 +320,10 @@ const Ke = Ge(function({
                   width: "100%",
                   padding: "8px 12px",
                   border: "none",
-                  background: z === e ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
+                  background: $ === e ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
                   cursor: "pointer",
                   fontSize: 13,
-                  fontWeight: z === e ? 600 : 400,
+                  fontWeight: $ === e ? 600 : 400,
                   color: "var(--Grey-Strong, #2E3236)",
                   fontFamily: "var(--font-sans)",
                   textAlign: "left"
@@ -339,7 +352,7 @@ const Ke = Ge(function({
               {
                 onClick: (e) => {
                   const t = e.currentTarget.getBoundingClientRect(), n = e.clientX - t.left, r = Math.max(0, Math.min(1, n / t.width));
-                  b(r * h);
+                  k(r * h);
                 },
                 style: {
                   flex: 1,
@@ -364,7 +377,7 @@ const Ke = Ge(function({
                     left: 0,
                     top: "50%",
                     transform: "translateY(-50%)",
-                    width: `${C}%`,
+                    width: `${T}%`,
                     height: 4,
                     borderRadius: 2,
                     background: "var(--Green-Primary, #00925F)",
@@ -380,7 +393,7 @@ const Ke = Ge(function({
                       xmlns: "http://www.w3.org/2000/svg",
                       style: {
                         position: "absolute",
-                        left: `${C}%`,
+                        left: `${T}%`,
                         top: "50%",
                         transform: "translate(-50%, -50%)",
                         pointerEvents: "none"
@@ -401,8 +414,8 @@ const Ke = Ge(function({
             )
           ] }),
           /* @__PURE__ */ i("div", { style: { position: "relative", paddingBottom: 30, cursor: "pointer" }, children: [
-            [T, E].map((e, t) => {
-              const n = t === 0, r = p != null && p.length ? p.filter((a) => n ? a.actor === T : a.actor === E).map((a) => ({
+            [W, M].map((e, t) => {
+              const n = t === 0, r = y != null && y.length ? y.filter((a) => n ? a.actor === W : a.actor === M).map((a) => ({
                 start: h > 0 ? a.startTime / h : 0,
                 end: h > 0 ? a.endTime / h : 0
               })) : Le[n ? "Agent" : "Customer"] || [];
@@ -426,7 +439,7 @@ const Ke = Ge(function({
                   {
                     onClick: (a) => {
                       const c = a.currentTarget.getBoundingClientRect(), Te = Math.max(0, Math.min(1, (a.clientX - c.left) / c.width));
-                      b(Te * h);
+                      k(Te * h);
                     },
                     style: {
                       flex: 1,
@@ -471,7 +484,7 @@ const Ke = Ge(function({
             }, children: [
               /* @__PURE__ */ o("div", { style: {
                 position: "absolute",
-                left: `${C}%`,
+                left: `${T}%`,
                 top: 0,
                 height: 44,
                 transform: "translateX(-50%)",
@@ -480,7 +493,7 @@ const Ke = Ge(function({
               } }),
               /* @__PURE__ */ o("div", { style: {
                 position: "absolute",
-                left: `${C}%`,
+                left: `${T}%`,
                 bottom: 0,
                 transform: "translateX(-50%)",
                 background: "var(--Grey-Strong, #2E3236)",
@@ -495,7 +508,7 @@ const Ke = Ge(function({
             ] })
           ] }),
           l && /* @__PURE__ */ o("audio", { ref: u, preload: "auto", style: { display: "none" }, children: /* @__PURE__ */ o("source", { src: d, type: "audio/mpeg" }) }),
-          s && d && /* @__PURE__ */ o("audio", { ref: X, preload: "auto", style: { display: "none" }, children: /* @__PURE__ */ o("source", { src: d, type: "audio/mpeg" }) })
+          s && d && /* @__PURE__ */ o("audio", { ref: Z, preload: "auto", style: { display: "none" }, children: /* @__PURE__ */ o("source", { src: d, type: "audio/mpeg" }) })
         ] })
       ] }),
       /* @__PURE__ */ i("div", { style: {
@@ -513,18 +526,18 @@ const Ke = Ge(function({
           color: "var(--Grey-Strong, #2E3236)",
           lineHeight: 1.2
         }, children: "Transcript" }) }),
-        /* @__PURE__ */ o("div", { id: "transcript-container", ref: K, style: {
+        /* @__PURE__ */ o("div", { id: "transcript-container", ref: H, style: {
           display: "flex",
           flexDirection: "column",
           maxHeight: 600,
           overflowY: "auto"
-        }, children: (O || D.map((e) => ({
+        }, children: (R || E.map((e) => ({
           actor: e.speaker,
           actorType: e.type,
           text: e.text,
           timeRange: e.time
         }))).map((e, t) => {
-          const n = !!O, r = n ? F && Y === t : t === N && F, a = (e.actorType || e.type) === "customer";
+          const n = !!R, r = n ? g && w === t : t === D && g, a = (e.actorType || e.type) === "customer";
           return /* @__PURE__ */ i("div", { style: {
             display: "flex",
             padding: 16,
@@ -566,7 +579,7 @@ const Ke = Ge(function({
                 "button",
                 {
                   onClick: () => {
-                    n && q ? q(e, t) : Ce(t);
+                    n && J ? J(e, t) : Ce(t);
                   },
                   style: {
                     background: "none",
@@ -595,6 +608,6 @@ const Ke = Ge(function({
   ] });
 });
 export {
-  Ke as U
+  qe as U
 };
 //# sourceMappingURL=UpdatedInteractionRecording.es.js.map