chordia-ui 3.4.2 → 3.4.3

package/dist/UpdatedInteractionRecording.es.js

@@ -1,10 +1,9 @@
-import { jsxs as r, jsx as o, Fragment as ne } from "react/jsx-runtime";
-import { forwardRef as Ee, useRef as H, useState as h, useCallback as oe, useEffect as ie, useImperativeHandle as Ge } from "react";
-import { FileSignal as We, RotateCcw as Me, Pause as ze, Play as He, RotateCw as Pe, ChevronDown as Ae, AudioLines as re, PauseCircle as $e, PlayCircle as Be } from "lucide-react";
-import { T as je } from "./Timeline.es.js";
-function ae(u) {
-  const l = Math.floor(u / 60), D = Math.round(u % 60);
-  return `${l}:${D.toString().padStart(2, "0")}`;
+import { jsxs as i, jsx as r, Fragment as Ge } from "react/jsx-runtime";
+import { forwardRef as Ee, useRef as P, useState as f, useCallback as re, useEffect as oe, 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 ie, PauseCircle as Be, PlayCircle as je } from "lucide-react";
+function $(p) {
+  const d = Math.floor(p / 60), g = Math.round(p % 60);
+  return `${d}:${g.toString().padStart(2, "0")}`;
 }
 const Le = {
   Agent: [
@@ -23,183 +22,185 @@ const Le = {
     { start: 0.6, end: 0.66 },
     { start: 0.74, end: 0.8 }
   ]
-}, C = [
+}, D = [
   { 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 se(u) {
-  if (!u)
+function ae(p) {
+  if (!p)
     return 0;
-  const l = u.split(":").map(Number);
-  return (l[0] || 0) * 60 + (l[1] || 0);
+  const d = p.split(":").map(Number);
+  return (d[0] || 0) * 60 + (d[1] || 0);
 }
 const Ke = Ee(function({
-  audioUrl: l,
-  timelineSegments: D = [],
-  durationSeconds: S = 0,
+  audioUrl: d,
+  timelineSegments: g = [],
+  durationSeconds: R = 0,
   // Parent-managed audio props (optional — if not provided, component manages its own audio)
-  currentTimeSeconds: P,
-  timelinePlaying: A,
-  playbackRate: $,
-  onSeek: T,
-  onTogglePlay: B,
-  onSeekBack: j,
-  onSeekForward: L,
-  onSetPlaybackRate: _,
-  audioRef: X,
+  currentTimeSeconds: se,
+  timelinePlaying: B,
+  playbackRate: le,
+  onSeek: j,
+  onTogglePlay: w,
+  onSeekBack: L,
+  onSeekForward: _,
+  onSetPlaybackRate: X,
+  audioRef: Y,
   // Speaker names
-  agentName: le = "Agent",
-  customerName: ce = "Customer",
+  agentName: T = "Agent",
+  customerName: G = "Customer",
   // Transcript props
-  transcript: g,
-  highlightedTurns: de = /* @__PURE__ */ new Set(),
-  activeTurnIndex: N,
-  activeDemoIndex: he = 1,
-  turnObservations: ue = {},
-  setExpandedSignals: R,
-  onTurnPlayPause: Y
-}, ge) {
-  var te;
-  const q = H(null), c = H(null), v = H(null), [K, f] = h(!1), [E, V] = h(0), [fe, pe] = h(0), [me, ye] = h(1), [F, ve] = h(null), [be, ke] = h(1), [xe, w] = h(!1), [Se, Z] = h(!1), [J, G] = h(he), a = !!X, b = !l, s = l && !a, k = b ? xe : a ? A ?? !1 : K, Fe = b ? F ?? 0 : a ? P ?? 0 : E, W = b ? be : a ? $ ?? 1 : me, M = b ? S || 156 : a ? S : fe || S || 0, z = oe(() => {
+  transcript: y,
+  highlightedTurns: ce = /* @__PURE__ */ new Set(),
+  activeTurnIndex: q,
+  activeDemoIndex: de = 1,
+  turnObservations: he = {},
+  setExpandedSignals: E,
+  onTurnPlayPause: K
+}, ue) {
+  var ne;
+  const V = P(null), h = P(null), k = P(null), [Z, m] = f(!1), [W, J] = f(0), [fe, pe] = f(0), [ge, ye] = f(1), [I, me] = f(null), [ve, be] = f(1), [ke, C] = f(!1), [xe, N] = f(!1), [Q, M] = f(de), s = !!Y, x = !d, l = d && !s, F = x ? ke : s ? B ?? !1 : Z, Fe = x ? I ?? 0 : s ? se ?? 0 : W, z = x ? ve : s ? le ?? 1 : ge, H = x ? R || 156 : s ? R : fe || R || 0, A = re(() => {
     const e = () => {
-      const n = c.current;
-      n && V(n.currentTime), v.current = requestAnimationFrame(e);
+      const t = h.current;
+      t && J(t.currentTime), k.current = requestAnimationFrame(e);
     };
-    v.current = requestAnimationFrame(e);
-  }, []), p = oe(() => {
-    v.current && (cancelAnimationFrame(v.current), v.current = null);
+    k.current = requestAnimationFrame(e);
+  }, []), v = re(() => {
+    k.current && (cancelAnimationFrame(k.current), k.current = null);
   }, []);
-  ie(() => () => p(), [p]), ie(() => {
-    if (!s)
+  oe(() => () => v(), [v]), oe(() => {
+    if (!l)
       return;
-    const e = c.current;
+    const e = h.current;
     if (!e)
       return;
-    const n = () => pe(e.duration || 0), t = () => {
-      f(!1), p();
+    const t = () => pe(e.duration || 0), n = () => {
+      m(!1), v();
     };
-    return e.addEventListener("loadedmetadata", n), e.addEventListener("ended", t), () => {
-      e.removeEventListener("loadedmetadata", n), e.removeEventListener("ended", t);
+    return e.addEventListener("loadedmetadata", t), e.addEventListener("ended", n), () => {
+      e.removeEventListener("loadedmetadata", t), e.removeEventListener("ended", n);
     };
-  }, [s, p]);
+  }, [l, v]);
   const O = (e) => {
-    for (let n = C.length - 1; n >= 0; n--) {
-      const t = se(C[n].time);
-      if (e >= t)
-        return n;
+    for (let t = D.length - 1; t >= 0; t--) {
+      const n = ae(D[t].time);
+      if (e >= n)
+        return t;
     }
     return 0;
-  }, m = (e) => {
-    const t = Math.max(0, Math.min(e, M || 156));
-    if (s) {
-      const i = c.current;
-      i && (i.currentTime = t), V(t);
+  }, b = (e) => {
+    const n = Math.max(0, Math.min(e, H || 156));
+    if (l) {
+      const o = h.current;
+      o && (o.currentTime = n), J(n);
     } else
-      a && T && T(t);
-    ve(t), G(O(t));
-  }, we = () => {
-    if (s) {
-      const e = c.current;
+      s && j && j(n);
+    me(n), M(O(n));
+  }, Se = () => {
+    if (l) {
+      const e = h.current;
       if (!e)
         return;
-      K ? (e.pause(), p(), f(!1)) : e.play().then(() => {
-        f(!0), z();
+      Z ? (e.pause(), v(), m(!1)) : e.play().then(() => {
+        m(!0), A();
       }).catch(() => {
       });
     } else
-      a && B ? B() : w((e) => !e);
+      s && w ? w() : C((e) => !e);
+  }, we = () => {
+    s && L ? L() : b(Math.max(0, (l ? W : I ?? 0) - 10));
   }, Ie = () => {
-    a && j ? j() : m(Math.max(0, (s ? E : F ?? 0) - 10));
-  }, Ce = () => {
-    a && L ? L() : m(Math.min(M || 156, (s ? E : F ?? 0) + 10));
-  }, De = (e) => {
-    if (s) {
-      const n = c.current;
-      n && (n.playbackRate = e), ye(e);
+    s && _ ? _() : b(Math.min(H || 156, (l ? W : I ?? 0) + 10));
+  }, Ce = (e) => {
+    if (l) {
+      const t = h.current;
+      t && (t.playbackRate = e), ye(e);
     } else
-      a && _ && _(e);
-    ke(e), Z(!1);
+      s && X && X(e);
+    be(e), N(!1);
   };
-  Ge(ge, () => ({
+  We(ue, () => ({
     seekTo: (e) => {
-      if (m(e), s) {
-        const t = c.current;
-        t && t.play().then(() => {
-          f(!0), z();
+      if (b(e), s)
+        !B && w && w();
+      else if (l) {
+        const n = h.current;
+        n && n.play().then(() => {
+          m(!0), A();
         }).catch(() => {
         });
       } else
-        w(!0);
-      const n = O(e);
-      G(n), setTimeout(() => {
-        var i;
-        const t = (i = q.current) == null ? void 0 : i.children;
-        t != null && t[n] && t[n].scrollIntoView({ behavior: "smooth", block: "nearest" });
+        C(!0);
+      const t = O(e);
+      M(t), setTimeout(() => {
+        var o;
+        const n = (o = V.current) == null ? void 0 : o.children;
+        n != null && n[t] && n[t].scrollIntoView({ behavior: "smooth", block: "nearest" });
       }, 50);
     }
   }));
-  const Te = (e) => {
-    var n;
-    if (J === e && k) {
-      if (s) {
-        const t = c.current;
-        t && t.pause(), p(), f(!1);
+  const De = (e) => {
+    var t;
+    if (Q === e && F) {
+      if (l) {
+        const n = h.current;
+        n && n.pause(), v(), m(!1);
       }
-      w(!1);
+      C(!1);
     } else {
-      const t = se((n = C[e]) == null ? void 0 : n.time);
-      if (G(e), m(t), s) {
-        const i = c.current;
-        i && (i.currentTime = t, i.play().then(() => {
-          f(!0), z();
+      const n = ae((t = D[e]) == null ? void 0 : t.time);
+      if (M(e), b(n), l) {
+        const o = h.current;
+        o && (o.currentTime = n, o.play().then(() => {
+          m(!0), A();
         }).catch(() => {
         }));
       }
-      w(!0);
+      C(!0);
     }
-  }, Re = (e, n) => {
+  }, Re = (e, t) => {
     if (e == null)
       return;
-    const t = (i) => {
-      const d = Math.floor(i / 6e4), y = Math.floor(i % 6e4 / 1e3);
-      return `${d.toString().padStart(2, "0")}:${y.toString().padStart(2, "0")}`;
+    const n = (o) => {
+      const a = Math.floor(o / 6e4), c = Math.floor(o % 6e4 / 1e3);
+      return `${a.toString().padStart(2, "0")}:${c.toString().padStart(2, "0")}`;
     };
-    return `${t(e)}–${n != null ? t(n) : t(e)}`;
-  }, Q = (te = g == null ? void 0 : g.messages) != null && te.length ? g.messages.map((e, n) => {
-    var t, i;
+    return `${n(e)}–${t != null ? n(t) : n(e)}`;
+  }, U = (ne = y == null ? void 0 : y.messages) != null && ne.length ? y.messages.map((e, t) => {
+    var n, o;
     return {
-      actor: e.actor === "agent" ? ((t = g.actor_map) == null ? void 0 : t.agent) || "Agent" : ((i = g.actor_map) == null ? void 0 : i.customer) || "Customer",
+      actor: e.actor === "agent" ? ((n = y.actor_map) == null ? void 0 : n.agent) || "Agent" : ((o = y.actor_map) == null ? void 0 : o.customer) || "Customer",
       actorType: e.actor === "agent" ? "agent" : "customer",
       text: e.text || "",
       timeRange: Re(e.start ?? e.start_ms, e.end ?? e.end_ms),
-      isHighlighted: de.has(n),
-      highlightColor: k && N === n ? e.actor === "agent" ? "var(--rail-outcome)" : "var(--rail-discovery)" : void 0,
-      observations: (ue[n] || []).map((d) => ({
-        ...d,
+      isHighlighted: ce.has(t),
+      highlightColor: F && q === t ? e.actor === "agent" ? "var(--rail-outcome)" : "var(--rail-discovery)" : void 0,
+      observations: (he[t] || []).map((a) => ({
+        ...a,
         onClick: () => {
-          R == null || R((y) => /* @__PURE__ */ new Set([...y, d.signalKey])), setTimeout(() => {
-            const y = document.getElementById(`signal-${d.signalKey}`);
-            y && y.scrollIntoView({ behavior: "smooth", block: "nearest" });
+          E == null || E((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 = b ? F ?? 0 : Fe, I = M || 156, x = I > 0 ? U / I * 100 : 0, ee = Math.round(U);
-  return /* @__PURE__ */ r("div", { style: {
+  }) : null, ee = x ? I ?? 0 : Fe, u = H || 156, S = u > 0 ? ee / u * 100 : 0, te = Math.round(ee);
+  return /* @__PURE__ */ i("div", { style: {
     display: "flex",
     flexDirection: "column",
     gap: 16
   }, children: [
-    /* @__PURE__ */ r("div", { style: {
+    /* @__PURE__ */ i("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: 16,
       width: "100%"
     }, children: [
-      /* @__PURE__ */ o("div", { style: {
+      /* @__PURE__ */ r("div", { style: {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -208,14 +209,14 @@ const Ke = Ee(function({
         borderRadius: 9999,
         background: "var(--surface-hover, #F3F7F7)",
         flexShrink: 0
-      }, children: /* @__PURE__ */ o(We, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
-      /* @__PURE__ */ o("span", { style: {
+      }, children: /* @__PURE__ */ r(Me, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
+      /* @__PURE__ */ r("span", { style: {
         fontSize: 15,
         fontWeight: 500,
         color: "var(--Grey-Strong, #2E3236)"
       }, children: "Recording" })
     ] }),
-    /* @__PURE__ */ r("div", { style: {
+    /* @__PURE__ */ i("div", { style: {
       display: "flex",
       padding: 24,
       flexDirection: "column",
@@ -225,22 +226,22 @@ const Ke = Ee(function({
       border: "1px solid var(--Grey-absent, #D9D9D9)",
       background: "var(--Grey-White, #FFF)"
     }, children: [
-      /* @__PURE__ */ r("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 16 }, children: [
-        /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 }, children: [
-          /* @__PURE__ */ r("span", { style: {
+      /* @__PURE__ */ i("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 }, children: [
+          /* @__PURE__ */ i("span", { style: {
             fontSize: 14,
             fontWeight: 500,
             color: "var(--Grey-Strong, #2E3236)",
             lineHeight: 1.2
           }, children: [
-            le,
+            T,
             " / ",
-            ce
+            G
           ] }),
-          /* @__PURE__ */ r("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" }),
-            /* @__PURE__ */ o("button", { onClick: Ie, style: { background: "none", border: "none", cursor: "pointer", padding: 0, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ o(Me, { size: 20, color: "#808183", strokeWidth: 1.5 }) }),
-            /* @__PURE__ */ o("button", { onClick: we, style: {
+          /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+            /* @__PURE__ */ r("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Muted, #808183)", lineHeight: 1.2 }, children: "10" }),
+            /* @__PURE__ */ r("button", { onClick: we, style: { background: "none", border: "none", cursor: "pointer", padding: 0, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ r(ze, { size: 20, color: "#808183", strokeWidth: 1.5 }) }),
+            /* @__PURE__ */ r("button", { onClick: Se, style: {
               background: "var(--Grey-Strong, #2E3236)",
               border: "none",
               cursor: "pointer",
@@ -251,15 +252,15 @@ const Ke = Ee(function({
               display: "flex",
               alignItems: "center",
               justifyContent: "center"
-            }, children: k ? /* @__PURE__ */ o(ze, { size: 14, color: "#FFF", fill: "#FFF" }) : /* @__PURE__ */ o(He, { size: 14, color: "#FFF", fill: "#FFF", strokeWidth: 1.5, style: { marginLeft: 2 } }) }),
-            /* @__PURE__ */ o("button", { onClick: Ce, 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" })
+            }, children: F ? /* @__PURE__ */ r(He, { size: 14, color: "#FFF", fill: "#FFF" }) : /* @__PURE__ */ r(Ae, { size: 14, color: "#FFF", fill: "#FFF", strokeWidth: 1.5, style: { marginLeft: 2 } }) }),
+            /* @__PURE__ */ r("button", { onClick: Ie, style: { background: "none", border: "none", cursor: "pointer", padding: 0, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ r(Pe, { size: 20, color: "#808183", strokeWidth: 1.5 }) }),
+            /* @__PURE__ */ r("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Muted, #808183)", lineHeight: 1.2 }, children: "10" })
           ] }),
-          /* @__PURE__ */ r("div", { style: { position: "relative" }, children: [
-            /* @__PURE__ */ r(
+          /* @__PURE__ */ i("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ i(
               "button",
               {
-                onClick: () => Z((e) => !e),
+                onClick: () => N((e) => !e),
                 style: {
                   background: "var(--Grey-White, #FFF)",
                   border: "1px solid var(--Grey-absent, #D9D9D9)",
@@ -279,13 +280,13 @@ const Ke = Ee(function({
                   gap: 4
                 },
                 children: [
-                  W,
+                  z,
                   "x",
-                  /* @__PURE__ */ o(Ae, { size: 12, color: "#808183" })
+                  /* @__PURE__ */ r($e, { size: 12, color: "#808183" })
                 ]
               }
             ),
-            Se && /* @__PURE__ */ o("div", { style: {
+            xe && /* @__PURE__ */ r("div", { style: {
               position: "absolute",
               top: "100%",
               right: 0,
@@ -297,19 +298,19 @@ const Ke = Ee(function({
               zIndex: 10,
               overflow: "hidden",
               minWidth: 80
-            }, children: _e.map((e) => /* @__PURE__ */ r(
+            }, children: _e.map((e) => /* @__PURE__ */ i(
               "button",
               {
-                onClick: () => De(e),
+                onClick: () => Ce(e),
                 style: {
                   display: "block",
                   width: "100%",
                   padding: "8px 12px",
                   border: "none",
-                  background: W === e ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
+                  background: z === e ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
                   cursor: "pointer",
                   fontSize: 13,
-                  fontWeight: W === e ? 600 : 400,
+                  fontWeight: z === e ? 600 : 400,
                   color: "var(--Grey-Strong, #2E3236)",
                   fontFamily: "var(--font-sans)",
                   textAlign: "left"
@@ -323,37 +324,22 @@ const Ke = Ee(function({
             )) })
           ] })
         ] }),
-        l && a ? /* @__PURE__ */ r(ne, { children: [
-          /* @__PURE__ */ o(
-            je,
-            {
-              segments: D,
-              durationSeconds: S,
-              currentTimeSeconds: P,
-              onSeek: T,
-              showControls: !1,
-              hasRecording: !0,
-              timelinePlaying: A,
-              playbackRate: $
-            }
-          ),
-          /* @__PURE__ */ o("audio", { ref: X, preload: "none", style: { display: "none" }, children: /* @__PURE__ */ o("source", { src: l, type: "audio/mpeg" }) })
-        ] }) : /* @__PURE__ */ r("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
-          /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-            /* @__PURE__ */ o("span", { style: {
+        /* @__PURE__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+          /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+            /* @__PURE__ */ r("span", { style: {
               fontSize: 13,
               fontWeight: 600,
-              color: x > 0 ? "var(--Green-Primary, #00925F)" : "var(--Grey-Strong, #2E3236)",
+              color: S > 0 ? "var(--Green-Primary, #00925F)" : "var(--Grey-Strong, #2E3236)",
               fontFamily: "var(--font-sans)",
               lineHeight: 1.2,
               minWidth: 60
-            }, children: ae(ee) }),
-            /* @__PURE__ */ r(
+            }, children: $(te) }),
+            /* @__PURE__ */ i(
               "div",
               {
                 onClick: (e) => {
-                  const n = e.currentTarget.getBoundingClientRect(), t = e.clientX - n.left, i = Math.max(0, Math.min(1, t / n.width));
-                  m(i * I);
+                  const t = e.currentTarget.getBoundingClientRect(), n = e.clientX - t.left, o = Math.max(0, Math.min(1, n / t.width));
+                  b(o * u);
                 },
                 style: {
                   flex: 1,
@@ -364,7 +350,7 @@ const Ke = Ee(function({
                   cursor: "pointer"
                 },
                 children: [
-                  /* @__PURE__ */ o("div", { style: {
+                  /* @__PURE__ */ r("div", { style: {
                     position: "absolute",
                     left: 0,
                     right: 0,
@@ -373,18 +359,18 @@ const Ke = Ee(function({
                     background: "var(--rail-surface-2, #E3E1D7)",
                     pointerEvents: "none"
                   } }),
-                  /* @__PURE__ */ o("div", { style: {
+                  /* @__PURE__ */ r("div", { style: {
                     position: "absolute",
                     left: 0,
                     top: "50%",
                     transform: "translateY(-50%)",
-                    width: `${x}%`,
+                    width: `${S}%`,
                     height: 4,
                     borderRadius: 2,
                     background: "var(--Green-Primary, #00925F)",
                     pointerEvents: "none"
                   } }),
-                  /* @__PURE__ */ o(
+                  /* @__PURE__ */ r(
                     "svg",
                     {
                       width: "16",
@@ -394,12 +380,12 @@ const Ke = Ee(function({
                       xmlns: "http://www.w3.org/2000/svg",
                       style: {
                         position: "absolute",
-                        left: `${x}%`,
+                        left: `${S}%`,
                         top: "50%",
                         transform: "translate(-50%, -50%)",
                         pointerEvents: "none"
                       },
-                      children: /* @__PURE__ */ o(
+                      children: /* @__PURE__ */ r(
                         "path",
                         {
                           d: "M7.875 1C11.6572 1 14.75 4.1191 14.75 8C14.75 11.8809 11.6572 15 7.875 15C4.09284 15 1 11.8809 1 8C1 4.1191 4.09284 1 7.875 1Z",
@@ -409,66 +395,82 @@ const Ke = Ee(function({
                         }
                       )
                     }
-                  )
+                  ),
+                  /* @__PURE__ */ r("span", { style: {
+                    position: "absolute",
+                    right: -48,
+                    fontSize: 13,
+                    fontWeight: 400,
+                    color: "var(--Grey-Muted, #808183)",
+                    fontFamily: "var(--font-sans)",
+                    lineHeight: 1.2,
+                    whiteSpace: "nowrap"
+                  }, children: $(u) })
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ r("div", { style: { position: "relative", paddingBottom: 30, cursor: "pointer" }, children: [
-            ["Agent", "Customer"].map((e, n) => /* @__PURE__ */ r("div", { style: {
-              display: "flex",
-              alignItems: "center",
-              gap: 8,
-              height: 20,
-              marginBottom: n === 0 ? 4 : 0
-            }, children: [
-              /* @__PURE__ */ o("span", { style: {
-                fontSize: 13,
-                fontWeight: 400,
-                color: "var(--Grey-Muted, #808183)",
-                fontFamily: "var(--font-sans)",
-                lineHeight: 1.2,
-                minWidth: 60
-              }, children: e }),
-              /* @__PURE__ */ r(
-                "div",
-                {
-                  onClick: (t) => {
-                    const i = t.currentTarget.getBoundingClientRect(), d = Math.max(0, Math.min(1, (t.clientX - i.left) / i.width));
-                    m(d * I);
-                  },
-                  style: {
-                    flex: 1,
-                    height: 6,
-                    position: "relative",
-                    borderRadius: 3,
-                    cursor: "pointer"
-                  },
-                  children: [
-                    /* @__PURE__ */ o("div", { style: {
-                      position: "absolute",
-                      left: 0,
-                      right: 0,
-                      top: "50%",
-                      transform: "translateY(-50%)",
-                      height: 4,
-                      borderRadius: 2,
-                      background: "var(--rail-surface-2, #E3E1D7)"
-                    } }),
-                    Le[e].map((t, i) => /* @__PURE__ */ o("div", { style: {
-                      position: "absolute",
-                      left: `${t.start * 100}%`,
-                      width: `${(t.end - t.start) * 100}%`,
-                      top: 0,
-                      bottom: 0,
+          /* @__PURE__ */ i("div", { style: { position: "relative", paddingBottom: 30, cursor: "pointer" }, children: [
+            [T, G].map((e, t) => {
+              const n = t === 0, o = g != null && g.length ? g.filter((a) => n ? a.actor === T : a.actor === G).map((a) => ({
+                start: u > 0 ? a.startTime / u : 0,
+                end: u > 0 ? a.endTime / u : 0
+              })) : Le[n ? "Agent" : "Customer"] || [];
+              return /* @__PURE__ */ i("div", { style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                height: 20,
+                marginBottom: t === 0 ? 4 : 0
+              }, children: [
+                /* @__PURE__ */ r("span", { style: {
+                  fontSize: 13,
+                  fontWeight: 400,
+                  color: "var(--Grey-Muted, #808183)",
+                  fontFamily: "var(--font-sans)",
+                  lineHeight: 1.2,
+                  minWidth: 60
+                }, children: e }),
+                /* @__PURE__ */ i(
+                  "div",
+                  {
+                    onClick: (a) => {
+                      const c = a.currentTarget.getBoundingClientRect(), Te = Math.max(0, Math.min(1, (a.clientX - c.left) / c.width));
+                      b(Te * u);
+                    },
+                    style: {
+                      flex: 1,
+                      height: 6,
+                      position: "relative",
                       borderRadius: 3,
-                      background: e === "Agent" ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)"
-                    } }, i))
-                  ]
-                }
-              )
-            ] }, e)),
-            /* @__PURE__ */ r("div", { style: {
+                      cursor: "pointer"
+                    },
+                    children: [
+                      /* @__PURE__ */ r("div", { style: {
+                        position: "absolute",
+                        left: 0,
+                        right: 0,
+                        top: "50%",
+                        transform: "translateY(-50%)",
+                        height: 4,
+                        borderRadius: 2,
+                        background: "var(--rail-surface-2, #E3E1D7)"
+                      } }),
+                      o.map((a, c) => /* @__PURE__ */ r("div", { style: {
+                        position: "absolute",
+                        left: `${a.start * 100}%`,
+                        width: `${(a.end - a.start) * 100}%`,
+                        top: 0,
+                        bottom: 0,
+                        borderRadius: 3,
+                        background: n ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)"
+                      } }, c))
+                    ]
+                  }
+                )
+              ] }, e);
+            }),
+            /* @__PURE__ */ i("div", { style: {
               position: "absolute",
               left: 68,
               /* 60 label + 8 gap */
@@ -477,19 +479,18 @@ const Ke = Ee(function({
               bottom: 0,
               pointerEvents: "none"
             }, children: [
-              /* @__PURE__ */ o("div", { style: {
+              /* @__PURE__ */ r("div", { style: {
                 position: "absolute",
-                left: `${x}%`,
+                left: `${S}%`,
                 top: 0,
                 height: 44,
-                /* spans both rows */
                 transform: "translateX(-50%)",
                 borderLeft: "1.5px dashed var(--Grey-Muted, #808183)",
                 opacity: 0.5
               } }),
-              /* @__PURE__ */ o("div", { style: {
+              /* @__PURE__ */ r("div", { style: {
                 position: "absolute",
-                left: `${x}%`,
+                left: `${S}%`,
                 bottom: 0,
                 transform: "translateX(-50%)",
                 background: "var(--Grey-Strong, #2E3236)",
@@ -500,68 +501,69 @@ const Ke = Ee(function({
                 padding: "4px 6px",
                 borderRadius: 4,
                 whiteSpace: "nowrap"
-              }, children: ae(ee) })
+              }, children: $(te) })
             ] })
           ] }),
-          s && /* @__PURE__ */ o("audio", { ref: c, preload: "auto", style: { display: "none" }, children: /* @__PURE__ */ o("source", { src: l, type: "audio/mpeg" }) })
+          l && /* @__PURE__ */ r("audio", { ref: h, preload: "auto", style: { display: "none" }, children: /* @__PURE__ */ r("source", { src: d, type: "audio/mpeg" }) }),
+          s && d && /* @__PURE__ */ r("audio", { ref: Y, preload: "auto", style: { display: "none" }, children: /* @__PURE__ */ r("source", { src: d, type: "audio/mpeg" }) })
         ] })
       ] }),
-      /* @__PURE__ */ r("div", { style: {
+      /* @__PURE__ */ i("div", { style: {
         width: "100%",
         display: "flex",
         flexDirection: "column",
         gap: 16
       }, children: [
-        /* @__PURE__ */ o("div", { style: {
+        /* @__PURE__ */ r("div", { style: {
           borderBottom: "1px solid var(--Grey-absent, #D9D9D9)",
           paddingBottom: 16
-        }, children: /* @__PURE__ */ o("span", { style: {
+        }, children: /* @__PURE__ */ r("span", { style: {
           fontSize: 14,
           fontWeight: 400,
           color: "var(--Grey-Strong, #2E3236)",
           lineHeight: 1.2
         }, children: "Transcript" }) }),
-        /* @__PURE__ */ o("div", { id: "transcript-container", ref: q, style: {
+        /* @__PURE__ */ r("div", { id: "transcript-container", ref: V, style: {
           display: "flex",
           flexDirection: "column",
           maxHeight: 600,
           overflowY: "auto"
-        }, children: (Q || C.map((e) => ({
+        }, children: (U || D.map((e) => ({
           actor: e.speaker,
           actorType: e.type,
           text: e.text,
           timeRange: e.time
-        }))).map((e, n) => {
-          const t = !!Q, i = t ? k && N === n : n === J && k, d = (e.actorType || e.type) === "customer";
-          return /* @__PURE__ */ r("div", { style: {
+        }))).map((e, t) => {
+          const n = !!U, o = n ? F && q === t : t === Q && F, a = (e.actorType || e.type) === "customer";
+          return /* @__PURE__ */ i("div", { style: {
             display: "flex",
             padding: 16,
             flexDirection: "column",
             alignItems: "flex-start",
             gap: 16,
             alignSelf: "stretch",
-            borderTop: n > 0 ? "1px solid var(--Grey-absent, #D9D9D9)" : "none",
-            background: i ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)"
+            borderTop: t > 0 ? "1px solid var(--Grey-absent, #D9D9D9)" : "none",
+            background: o ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)"
           }, children: [
-            /* @__PURE__ */ r("div", { style: {
+            /* @__PURE__ */ i("div", { style: {
               display: "flex",
               alignItems: "center",
               justifyContent: "space-between",
               width: "100%",
               gap: 8
             }, children: [
-              /* @__PURE__ */ o("span", { style: {
+              /* @__PURE__ */ r("span", { style: {
                 fontSize: 14,
                 fontWeight: 600,
                 lineHeight: 1.2,
-                color: d ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)"
+                color: a ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)"
               }, children: e.actor }),
-              /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-                i && /* @__PURE__ */ r(ne, { children: [
-                  /* @__PURE__ */ o(re, { size: 12, color: "#2E3236" }),
-                  /* @__PURE__ */ o(re, { size: 12, color: "#2E3236" })
+              /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                o && /* @__PURE__ */ i(Ge, { children: [
+                  /* @__PURE__ */ r(ie, { size: 12, color: "#2E3236" }),
+                  /* @__PURE__ */ r(ie, { size: 12, color: "#2E3236" })
                 ] }),
-                /* @__PURE__ */ o("span", { style: {
+                /* @__PURE__ */ r("span", { style: {
                   fontSize: 13,
                   fontWeight: 400,
                   lineHeight: 1.2,
@@ -569,12 +571,12 @@ const Ke = Ee(function({
                 }, children: e.timeRange })
               ] })
             ] }),
-            /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "flex-start", gap: 8, width: "100%" }, children: [
-              /* @__PURE__ */ o(
+            /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "flex-start", gap: 8, width: "100%" }, children: [
+              /* @__PURE__ */ r(
                 "button",
                 {
                   onClick: () => {
-                    t && Y ? Y(e, n) : Te(n);
+                    n && K ? K(e, t) : De(t);
                   },
                   style: {
                     background: "none",
@@ -584,10 +586,10 @@ const Ke = Ee(function({
                     flexShrink: 0,
                     display: "flex"
                   },
-                  children: i ? /* @__PURE__ */ o($e, { size: 17, color: "#2E3236", strokeWidth: 1.5 }) : /* @__PURE__ */ o(Be, { size: 17, color: "#808183", strokeWidth: 1 })
+                  children: o ? /* @__PURE__ */ r(Be, { size: 17, color: "#2E3236", strokeWidth: 1.5 }) : /* @__PURE__ */ r(je, { size: 17, color: "#808183", strokeWidth: 1 })
                 }
               ),
-              /* @__PURE__ */ o("p", { style: {
+              /* @__PURE__ */ r("p", { style: {
                 fontSize: 13,
                 fontWeight: 400,
                 color: "var(--Grey-Strong, #2E3236)",
@@ -596,7 +598,7 @@ const Ke = Ee(function({
                 flex: 1
               }, children: e.text })
             ] })
-          ] }, n);
+          ] }, t);
         }) })
       ] })
     ] })