chordia-ui 3.4.2 → 3.4.4

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 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 { 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")}`;
 }
 const Le = {
   Agent: [
@@ -23,177 +22,179 @@ 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 ie(g) {
+  if (!g)
     return 0;
-  const l = u.split(":").map(Number);
-  return (l[0] || 0) * 60 + (l[1] || 0);
+  const d = g.split(":").map(Number);
+  return (d[0] || 0) * 60 + (d[1] || 0);
 }
-const Ke = Ee(function({
-  audioUrl: l,
-  timelineSegments: D = [],
-  durationSeconds: S = 0,
+const Ke = Ge(function({
+  audioUrl: d,
+  timelineSegments: p = [],
+  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,
+  currentTimeSeconds: ae,
+  timelinePlaying: $,
+  playbackRate: se,
+  onSeek: B,
+  onTogglePlay: S,
   onSeekBack: j,
   onSeekForward: L,
   onSetPlaybackRate: _,
   audioRef: X,
   // Speaker names
-  agentName: le = "Agent",
-  customerName: ce = "Customer",
+  agentName: T = "Agent",
+  customerName: E = "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: le = /* @__PURE__ */ new Set(),
+  activeTurnIndex: Y,
+  activeDemoIndex: ce = 1,
+  turnObservations: de = {},
+  setExpandedSignals: G,
+  onTurnPlayPause: q
+}, 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(() => {
     const e = () => {
-      const n = c.current;
-      n && V(n.currentTime), v.current = requestAnimationFrame(e);
+      const t = u.current;
+      t && Z(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 = te(() => {
+    k.current && (cancelAnimationFrame(k.current), k.current = null);
   }, []);
-  ie(() => () => p(), [p]), ie(() => {
-    if (!s)
+  ne(() => () => v(), [v]), ne(() => {
+    if (!l)
       return;
-    const e = c.current;
+    const e = u.current;
     if (!e)
       return;
-    const n = () => pe(e.duration || 0), t = () => {
-      f(!1), p();
+    const t = () => fe(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]);
-  const O = (e) => {
-    for (let n = C.length - 1; n >= 0; n--) {
-      const t = se(C[n].time);
-      if (e >= t)
-        return n;
+  }, [l, v]);
+  const Q = (e) => {
+    for (let t = D.length - 1; t >= 0; t--) {
+      const n = ie(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 r = u.current;
+      r && (r.currentTime = n), Z(n);
     } else
-      a && T && T(t);
-    ve(t), G(O(t));
-  }, we = () => {
-    if (s) {
-      const e = c.current;
+      s && B && B(n);
+    ye(n), M(Q(n));
+  }, Fe = () => {
+    if (l) {
+      const e = u.current;
       if (!e)
         return;
-      K ? (e.pause(), p(), f(!1)) : e.play().then(() => {
-        f(!0), z();
+      V ? (e.pause(), v(), m(!1)) : e.play().then(() => {
+        m(!0), A();
       }).catch(() => {
       });
     } else
-      a && B ? B() : w((e) => !e);
-  }, 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 && S ? S() : I((e) => !e);
+  }, Se = () => {
+    s && j ? j() : b(Math.max(0, (l ? W : w ?? 0) - 10));
+  }, we = () => {
+    s && L ? L() : b(Math.min(H || 156, (l ? W : w ?? 0) + 10));
+  }, Ie = (e) => {
+    if (l) {
+      const t = u.current;
+      t && (t.playbackRate = e), pe(e);
     } else
-      a && _ && _(e);
-    ke(e), Z(!1);
+      s && _ && _(e);
+    ve(e), J(!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)
+        !$ && S && S();
+      else if (l) {
+        const n = u.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" });
+        I(!0);
+      const t = Q(e);
+      M(t), setTimeout(() => {
+        var r;
+        const n = (r = K.current) == null ? void 0 : r.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 Ce = (e) => {
+    var t;
+    if (N === e && F) {
+      if (l) {
+        const n = u.current;
+        n && n.pause(), v(), m(!1);
       }
-      w(!1);
+      I(!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 = ie((t = D[e]) == null ? void 0 : t.time);
+      if (M(e), b(n), l) {
+        const r = u.current;
+        r && (r.currentTime = n, r.play().then(() => {
+          m(!0), A();
         }).catch(() => {
         }));
       }
-      w(!0);
+      I(!0);
     }
-  }, Re = (e, n) => {
+  }, De = (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 = (r) => {
+      const a = Math.floor(r / 6e4), c = Math.floor(r % 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)}`;
+  }, O = (ee = y == null ? void 0 : y.messages) != null && ee.length ? y.messages.map((e, t) => {
+    var n, r;
     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" : ((r = y.actor_map) == null ? void 0 : r.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,
+      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,
+      observations: (de[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" });
+          G == null || G((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, U = x ? w ?? 0 : xe, h = H || 156, C = h > 0 ? U / h * 100 : 0, Re = Math.round(U);
+  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,
@@ -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 }) }),
+      }, children: /* @__PURE__ */ o(Me, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
       /* @__PURE__ */ o("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
+            E
           ] }),
-          /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+          /* @__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" }),
-            /* @__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__ */ o("button", { onClick: Se, style: { background: "none", border: "none", cursor: "pointer", padding: 0, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ o(ze, { size: 20, color: "#808183", strokeWidth: 1.5 }) }),
+            /* @__PURE__ */ o("button", { onClick: Fe, 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 }) }),
+            }, 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 } }) }),
+            /* @__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" })
           ] }),
-          /* @__PURE__ */ r("div", { style: { position: "relative" }, children: [
-            /* @__PURE__ */ r(
+          /* @__PURE__ */ i("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ i(
               "button",
               {
-                onClick: () => Z((e) => !e),
+                onClick: () => J((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__ */ o($e, { size: 12, color: "#808183" })
                 ]
               }
             ),
-            Se && /* @__PURE__ */ o("div", { style: {
+            ke && /* @__PURE__ */ o("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: () => Ie(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__ */ i("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+          /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
             /* @__PURE__ */ o("span", { style: {
               fontSize: 13,
-              fontWeight: 600,
-              color: x > 0 ? "var(--Green-Primary, #00925F)" : "var(--Grey-Strong, #2E3236)",
+              fontWeight: 500,
+              color: "var(--Grey-Strong, #2E3236)",
               fontFamily: "var(--font-sans)",
               lineHeight: 1.2,
               minWidth: 60
-            }, children: ae(ee) }),
-            /* @__PURE__ */ r(
+            }, children: re(h) }),
+            /* @__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, r = Math.max(0, Math.min(1, n / t.width));
+                  b(r * h);
                 },
                 style: {
                   flex: 1,
@@ -378,7 +364,7 @@ const Ke = Ee(function({
                     left: 0,
                     top: "50%",
                     transform: "translateY(-50%)",
-                    width: `${x}%`,
+                    width: `${C}%`,
                     height: 4,
                     borderRadius: 2,
                     background: "var(--Green-Primary, #00925F)",
@@ -394,7 +380,7 @@ const Ke = Ee(function({
                       xmlns: "http://www.w3.org/2000/svg",
                       style: {
                         position: "absolute",
-                        left: `${x}%`,
+                        left: `${C}%`,
                         top: "50%",
                         transform: "translate(-50%, -50%)",
                         pointerEvents: "none"
@@ -414,61 +400,67 @@ const Ke = Ee(function({
               }
             )
           ] }),
-          /* @__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, 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) => ({
+                start: h > 0 ? a.startTime / h : 0,
+                end: h > 0 ? a.endTime / h : 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__ */ o("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 * h);
+                    },
+                    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__ */ o("div", { style: {
+                        position: "absolute",
+                        left: 0,
+                        right: 0,
+                        top: "50%",
+                        transform: "translateY(-50%)",
+                        height: 4,
+                        borderRadius: 2,
+                        background: "var(--rail-surface-2, #E3E1D7)"
+                      } }),
+                      r.map((a, c) => /* @__PURE__ */ o("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 */
@@ -479,17 +471,16 @@ const Ke = Ee(function({
             }, children: [
               /* @__PURE__ */ o("div", { style: {
                 position: "absolute",
-                left: `${x}%`,
+                left: `${C}%`,
                 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: {
                 position: "absolute",
-                left: `${x}%`,
+                left: `${C}%`,
                 bottom: 0,
                 transform: "translateX(-50%)",
                 background: "var(--Grey-Strong, #2E3236)",
@@ -500,13 +491,14 @@ const Ke = Ee(function({
                 padding: "4px 6px",
                 borderRadius: 4,
                 whiteSpace: "nowrap"
-              }, children: ae(ee) })
+              }, children: re(Re) })
             ] })
           ] }),
-          s && /* @__PURE__ */ o("audio", { ref: c, preload: "auto", style: { display: "none" }, children: /* @__PURE__ */ o("source", { src: l, type: "audio/mpeg" }) })
+          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" }) })
         ] })
       ] }),
-      /* @__PURE__ */ r("div", { style: {
+      /* @__PURE__ */ i("div", { style: {
         width: "100%",
         display: "flex",
         flexDirection: "column",
@@ -521,29 +513,29 @@ const Ke = Ee(function({
           color: "var(--Grey-Strong, #2E3236)",
           lineHeight: 1.2
         }, children: "Transcript" }) }),
-        /* @__PURE__ */ o("div", { id: "transcript-container", ref: q, style: {
+        /* @__PURE__ */ o("div", { id: "transcript-container", ref: K, style: {
           display: "flex",
           flexDirection: "column",
           maxHeight: 600,
           overflowY: "auto"
-        }, children: (Q || C.map((e) => ({
+        }, children: (O || 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 = !!O, r = n ? F && Y === t : t === N && 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: r ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)"
           }, children: [
-            /* @__PURE__ */ r("div", { style: {
+            /* @__PURE__ */ i("div", { style: {
               display: "flex",
               alignItems: "center",
               justifyContent: "space-between",
@@ -554,12 +546,12 @@ const Ke = Ee(function({
                 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: [
+                r && /* @__PURE__ */ i(Ee, { children: [
+                  /* @__PURE__ */ o(oe, { size: 12, color: "#2E3236" }),
+                  /* @__PURE__ */ o(oe, { size: 12, color: "#2E3236" })
                 ] }),
                 /* @__PURE__ */ o("span", { style: {
                   fontSize: 13,
@@ -569,12 +561,12 @@ const Ke = Ee(function({
                 }, children: e.timeRange })
               ] })
             ] }),
-            /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "flex-start", gap: 8, width: "100%" }, children: [
+            /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "flex-start", gap: 8, width: "100%" }, children: [
               /* @__PURE__ */ o(
                 "button",
                 {
                   onClick: () => {
-                    t && Y ? Y(e, n) : Te(n);
+                    n && q ? q(e, t) : Ce(t);
                   },
                   style: {
                     background: "none",
@@ -584,7 +576,7 @@ 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: r ? /* @__PURE__ */ o(Be, { size: 17, color: "#2E3236", strokeWidth: 1.5 }) : /* @__PURE__ */ o(je, { size: 17, color: "#808183", strokeWidth: 1 })
                 }
               ),
               /* @__PURE__ */ o("p", { style: {
@@ -596,7 +588,7 @@ const Ke = Ee(function({
                 flex: 1
               }, children: e.text })
             ] })
-          ] }, n);
+          ] }, t);
         }) })
       ] })
     ] })