chordia-ui 3.5.0 → 3.5.2

package/dist/UpdatedInteractionRecording.es.js

@@ -1,9 +1,9 @@
-import { jsxs as s, jsx as o, Fragment as ze } from "react/jsx-runtime";
-import { forwardRef as He, useRef as X, useState as u, useCallback as re, useEffect as Y, useImperativeHandle as Ae } from "react";
-import { FilePlay as Be, RotateCcw as Pe, Pause as $e, Play as je, RotateCw as Le, ChevronDown as _e, AudioLines as ie, PauseCircle as Xe, PlayCircle as Ye } from "lucide-react";
-function se(m) {
-  const d = Math.floor(m / 60), v = Math.round(m % 60);
-  return `${d}:${v.toString().padStart(2, "0")}`;
+import { jsxs as a, jsx as o, Fragment as ze } from "react/jsx-runtime";
+import { forwardRef as He, useRef as Y, useState as g, useCallback as re, useEffect as q, useImperativeHandle as Ae } from "react";
+import { FilePlay as Be, RotateCcw as Pe, Pause as $e, Play as Le, RotateCw as je, ChevronDown as _e, AudioLines as ie, PauseCircle as Xe, PlayCircle as Ye } from "lucide-react";
+function se(v) {
+  const u = Math.floor(v / 60), b = Math.round(v % 60);
+  return `${u}:${b.toString().padStart(2, "0")}`;
 }
 const qe = {
   Agent: [
@@ -22,125 +22,125 @@ const qe = {
     { start: 0.6, end: 0.66 },
     { start: 0.74, end: 0.8 }
   ]
-}, M = [
+}, z = [
   { 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?" }
 ], Ke = [1, 1.25, 1.5, 2];
-function ae(m) {
-  if (!m)
+function ae(v) {
+  if (!v)
     return 0;
-  const d = m.split(":").map(Number);
-  return (d[0] || 0) * 60 + (d[1] || 0);
+  const u = v.split(":").map(Number);
+  return (u[0] || 0) * 60 + (u[1] || 0);
 }
 const Ne = He(function({
-  audioUrl: d,
-  timelineSegments: v = [],
-  durationSeconds: z = 0,
+  audioUrl: u,
+  timelineSegments: b = [],
+  durationSeconds: H = 0,
   // Parent-managed audio props (optional — if not provided, component manages its own audio)
   currentTimeSeconds: le,
-  timelinePlaying: q,
+  timelinePlaying: K,
   playbackRate: ce,
-  onSeek: K,
-  onTogglePlay: S,
-  onSeekBack: V,
-  onSeekForward: Z,
-  onSetPlaybackRate: J,
-  audioRef: N,
+  onSeek: V,
+  onTogglePlay: C,
+  onSeekBack: Z,
+  onSeekForward: J,
+  onSetPlaybackRate: N,
+  audioRef: Q,
   // Speaker names
-  agentName: H = "Agent",
-  customerName: A = "Customer",
+  agentName: A = "Agent",
+  customerName: B = "Customer",
   // Transcript props
   transcript: h,
   highlightedTurns: de = /* @__PURE__ */ new Set(),
-  activeTurnIndex: C,
-  activeDemoIndex: he = 1,
-  turnObservations: ue = {},
-  setExpandedSignals: B,
-  onTurnPlayPause: Q
+  activeTurnIndex: w,
+  activeDemoIndex: ue = 1,
+  turnObservations: he = {},
+  setExpandedSignals: P,
+  onTurnPlayPause: O
 }, ge) {
-  var ne;
-  const w = X(null), g = X(null), T = X(null), [O, b] = u(!1), [P, U] = u(0), [fe, pe] = u(0), [ye, me] = u(1), [R, ve] = u(null), [be, ke] = u(1), [xe, I] = u(!1), [Te, ee] = u(!1), [D, E] = u(he), [Fe, Se] = u(null), l = !!N, F = !d, c = d && !l, y = F ? xe : l ? q ?? !1 : O, Ce = F ? R ?? 0 : l ? le ?? 0 : P, $ = F ? be : l ? ce ?? 1 : ye, j = F ? z || 156 : l ? z : fe || z || 0, L = re(() => {
+  var oe;
+  const R = Y(null), f = Y(null), F = Y(null), [U, k] = g(!1), [$, ee] = g(0), [fe, pe] = g(0), [ye, me] = g(1), [I, ve] = g(null), [be, ke] = g(1), [xe, D] = g(!1), [Te, te] = g(!1), [E, G] = g(ue), [Fe, Se] = g(null), c = !!Q, S = !u, d = u && !c, y = S ? xe : c ? K ?? !1 : U, Ce = S ? I ?? 0 : c ? le ?? 0 : $, L = S ? be : c ? ce ?? 1 : ye, j = S ? H || 156 : c ? H : fe || H || 0, _ = re(() => {
     const e = () => {
-      const t = g.current;
-      t && U(t.currentTime), T.current = requestAnimationFrame(e);
+      const t = f.current;
+      t && ee(t.currentTime), F.current = requestAnimationFrame(e);
     };
-    T.current = requestAnimationFrame(e);
-  }, []), k = re(() => {
-    T.current && (cancelAnimationFrame(T.current), T.current = null);
+    F.current = requestAnimationFrame(e);
+  }, []), x = re(() => {
+    F.current && (cancelAnimationFrame(F.current), F.current = null);
   }, []);
-  Y(() => () => k(), [k]), Y(() => {
-    if (!c)
+  q(() => () => x(), [x]), q(() => {
+    if (!d)
       return;
-    const e = g.current;
+    const e = f.current;
     if (!e)
       return;
     const t = () => pe(e.duration || 0), n = () => {
-      b(!1), k();
+      k(!1), x();
     };
     return e.addEventListener("loadedmetadata", t), e.addEventListener("ended", n), () => {
       e.removeEventListener("loadedmetadata", t), e.removeEventListener("ended", n);
     };
-  }, [c, k]);
-  const _ = (e) => {
-    for (let t = M.length - 1; t >= 0; t--) {
-      const n = ae(M[t].time);
+  }, [d, x]);
+  const X = (e) => {
+    for (let t = z.length - 1; t >= 0; t--) {
+      const n = ae(z[t].time);
       if (e >= n)
         return t;
     }
     return 0;
-  }, x = (e) => {
+  }, T = (e) => {
     const n = Math.max(0, Math.min(e, j || 156));
-    if (c) {
-      const r = g.current;
-      r && (r.currentTime = n), U(n);
+    if (d) {
+      const r = f.current;
+      r && (r.currentTime = n), ee(n);
     } else
-      l && K && K(n);
-    ve(n), E(_(n));
+      c && V && V(n);
+    ve(n), G(X(n));
   }, we = () => {
-    if (c) {
-      const e = g.current;
+    if (d) {
+      const e = f.current;
       if (!e)
         return;
-      O ? (e.pause(), k(), b(!1)) : e.play().then(() => {
-        b(!0), L();
+      U ? (e.pause(), x(), k(!1)) : e.play().then(() => {
+        k(!0), _();
       }).catch(() => {
       });
     } else
-      l && S ? S() : I((e) => !e);
+      c && C ? C() : D((e) => !e);
   }, Re = () => {
-    l && V ? V() : x(Math.max(0, (c ? P : R ?? 0) - 10));
+    c && Z ? Z() : T(Math.max(0, (d ? $ : I ?? 0) - 10));
   }, Ie = () => {
-    l && Z ? Z() : x(Math.min(j || 156, (c ? P : R ?? 0) + 10));
+    c && J ? J() : T(Math.min(j || 156, (d ? $ : I ?? 0) + 10));
   }, De = (e) => {
-    if (c) {
-      const t = g.current;
+    if (d) {
+      const t = f.current;
       t && (t.playbackRate = e), me(e);
     } else
-      l && J && J(e);
-    ke(e), ee(!1);
+      c && N && N(e);
+    ke(e), te(!1);
   };
   Ae(ge, () => ({
     seekTo: (e) => {
-      if (x(e), l)
-        !q && S && S();
-      else if (c) {
-        const n = g.current;
+      if (T(e), c)
+        !K && C && C();
+      else if (d) {
+        const n = f.current;
         n && n.play().then(() => {
-          b(!0), L();
+          k(!0), _();
         }).catch(() => {
         });
       } else
-        I(!0);
-      const t = _(e);
-      E(t), setTimeout(() => {
-        var i;
-        const n = w.current, r = (i = n == null ? void 0 : n.children) == null ? void 0 : i[t];
+        D(!0);
+      const t = X(e);
+      G(t), setTimeout(() => {
+        var s;
+        const n = R.current, r = (s = n == null ? void 0 : n.children) == null ? void 0 : s[t];
         if (n && r) {
-          const a = n.getBoundingClientRect().top, oe = r.getBoundingClientRect().top - a + n.scrollTop;
-          n.scrollTo({ top: oe - 20, behavior: "smooth" });
+          const i = n.getBoundingClientRect().top, m = r.getBoundingClientRect().top - i + n.scrollTop;
+          n.scrollTo({ top: m - 20, behavior: "smooth" });
         }
       }, 50);
     },
@@ -151,20 +151,20 @@ const Ne = He(function({
       if ((n = h == null ? void 0 : h.messages) != null && n.length) {
         const r = h.messages;
         t = 0;
-        for (let i = r.length - 1; i >= 0; i--) {
-          const a = (r[i].start ?? r[i].start_ms ?? 0) / 1e3;
-          if (e >= a) {
-            t = i;
+        for (let s = r.length - 1; s >= 0; s--) {
+          const i = (r[s].start ?? r[s].start_ms ?? 0) / 1e3;
+          if (e >= i) {
+            t = s;
             break;
           }
         }
       } else
-        t = _(e);
-      E(t), Se(t), setTimeout(() => {
-        var a;
-        const r = w.current, i = (a = r == null ? void 0 : r.children) == null ? void 0 : a[t];
-        if (r && i) {
-          const p = r.getBoundingClientRect().top, Me = i.getBoundingClientRect().top - p + r.scrollTop;
+        t = X(e);
+      G(t), Se(t), setTimeout(() => {
+        var i;
+        const r = R.current, s = (i = r == null ? void 0 : r.children) == null ? void 0 : i[t];
+        if (r && s) {
+          const l = r.getBoundingClientRect().top, Me = s.getBoundingClientRect().top - l + r.scrollTop;
           r.scrollTo({ top: Me - 20, behavior: "smooth" });
         }
       }, 50);
@@ -172,32 +172,32 @@ const Ne = He(function({
   }));
   const Ee = (e) => {
     var t;
-    if (D === e && y) {
-      if (c) {
-        const n = g.current;
-        n && n.pause(), k(), b(!1);
+    if (E === e && y) {
+      if (d) {
+        const n = f.current;
+        n && n.pause(), x(), k(!1);
       }
-      I(!1);
+      D(!1);
     } else {
-      const n = ae((t = M[e]) == null ? void 0 : t.time);
-      if (E(e), x(n), c) {
-        const r = g.current;
+      const n = ae((t = z[e]) == null ? void 0 : t.time);
+      if (G(e), T(n), d) {
+        const r = f.current;
         r && (r.currentTime = n, r.play().then(() => {
-          b(!0), L();
+          k(!0), _();
         }).catch(() => {
         }));
       }
-      I(!0);
+      D(!0);
     }
   }, Ge = (e, t) => {
     if (e == null)
       return;
     const n = (r) => {
-      const i = Math.floor(r / 6e4), a = Math.floor(r % 6e4 / 1e3);
-      return `${i.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}`;
+      const s = Math.floor(r / 6e4), i = Math.floor(r % 6e4 / 1e3);
+      return `${s.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}`;
     };
     return `${n(e)}–${t != null ? n(t) : n(e)}`;
-  }, G = (ne = h == null ? void 0 : h.messages) != null && ne.length ? h.messages.map((e, t) => {
+  }, W = (oe = h == null ? void 0 : h.messages) != null && oe.length ? h.messages.map((e, t) => {
     var n, r;
     return {
       actor: e.actor === "agent" ? ((n = h.actor_map) == null ? void 0 : n.agent) || "Agent" : ((r = h.actor_map) == null ? void 0 : r.customer) || "Customer",
@@ -205,41 +205,41 @@ const Ne = He(function({
       text: e.text || "",
       timeRange: Ge(e.start ?? e.start_ms, e.end ?? e.end_ms),
       isHighlighted: de.has(t),
-      highlightColor: y && C === t ? e.actor === "agent" ? "var(--rail-outcome)" : "var(--rail-discovery)" : void 0,
-      observations: (ue[t] || []).map((i) => ({
-        ...i,
+      highlightColor: y && w === t ? e.actor === "agent" ? "var(--rail-outcome)" : "var(--rail-discovery)" : void 0,
+      observations: (he[t] || []).map((s) => ({
+        ...s,
         onClick: () => {
-          B == null || B((a) => /* @__PURE__ */ new Set([...a, i.signalKey])), setTimeout(() => {
-            const a = document.getElementById(`signal-${i.signalKey}`);
-            a && a.scrollIntoView({ behavior: "smooth", block: "nearest" });
+          P == null || P((i) => /* @__PURE__ */ new Set([...i, s.signalKey])), setTimeout(() => {
+            const i = document.getElementById(`signal-${s.signalKey}`);
+            i && i.scrollIntoView({ behavior: "smooth", block: "nearest" });
           }, 100);
         }
       }))
     };
   }) : null;
-  Y(() => {
+  q(() => {
     var r;
     if (!y)
       return;
-    const e = G ? C : D;
+    const e = W ? w : E;
     if (e == null || e < 0)
       return;
-    const t = w.current;
+    const t = R.current;
     if (!t)
       return;
     const n = (r = t.children) == null ? void 0 : r[e];
     if (n) {
-      const i = t.getBoundingClientRect().top, p = n.getBoundingClientRect().top - i + t.scrollTop;
-      t.scrollTo({ top: p - 20, behavior: "smooth" });
+      const s = t.getBoundingClientRect().top, l = n.getBoundingClientRect().top - s + t.scrollTop;
+      t.scrollTo({ top: l - 20, behavior: "smooth" });
     }
-  }, [C, D, y, G]);
-  const te = F ? R ?? 0 : Ce, f = j || 156, W = f > 0 ? te / f * 100 : 0, We = Math.round(te);
-  return /* @__PURE__ */ s("div", { style: {
+  }, [w, E, y, W]);
+  const ne = S ? I ?? 0 : Ce, p = j || 156, M = p > 0 ? ne / p * 100 : 0, We = Math.round(ne);
+  return /* @__PURE__ */ a("div", { style: {
     display: "flex",
     flexDirection: "column",
     gap: 16
   }, children: [
-    /* @__PURE__ */ s("div", { style: {
+    /* @__PURE__ */ a("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: 16,
@@ -261,7 +261,7 @@ const Ne = He(function({
         color: "var(--Grey-Strong, #2E3236)"
       }, children: "Recording" })
     ] }),
-    /* @__PURE__ */ s("div", { style: {
+    /* @__PURE__ */ a("div", { style: {
       display: "flex",
       padding: 24,
       flexDirection: "column",
@@ -271,19 +271,19 @@ const Ne = He(function({
       border: "1px solid var(--Grey-absent, #D9D9D9)",
       background: "var(--Grey-White, #FFF)"
     }, children: [
-      /* @__PURE__ */ s("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 16 }, children: [
-        /* @__PURE__ */ s("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 }, children: [
-          /* @__PURE__ */ s("span", { style: {
+      /* @__PURE__ */ a("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 }, children: [
+          /* @__PURE__ */ a("span", { style: {
             fontSize: 14,
             fontWeight: 500,
             color: "var(--Grey-Strong, #2E3236)",
             lineHeight: 1.2
           }, children: [
-            H,
+            A,
             " / ",
-            A
+            B
           ] }),
-          /* @__PURE__ */ s("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+          /* @__PURE__ */ a("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: Re, 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("button", { onClick: we, style: {
@@ -297,15 +297,15 @@ const Ne = He(function({
               display: "flex",
               alignItems: "center",
               justifyContent: "center"
-            }, children: y ? /* @__PURE__ */ o($e, { size: 14, color: "#FFF", fill: "#FFF" }) : /* @__PURE__ */ o(je, { size: 14, color: "#FFF", fill: "#FFF", strokeWidth: 1.5, style: { marginLeft: 2 } }) }),
-            /* @__PURE__ */ o("button", { onClick: Ie, style: { background: "none", border: "none", cursor: "pointer", padding: 0, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ o(Le, { size: 20, color: "#808183", strokeWidth: 1.5 }) }),
+            }, children: y ? /* @__PURE__ */ o($e, { size: 14, color: "#FFF", fill: "#FFF" }) : /* @__PURE__ */ o(Le, { size: 14, color: "#FFF", fill: "#FFF", strokeWidth: 1.5, style: { marginLeft: 2 } }) }),
+            /* @__PURE__ */ o("button", { onClick: Ie, style: { background: "none", border: "none", cursor: "pointer", padding: 0, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ o(je, { 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__ */ s("div", { style: { position: "relative" }, children: [
-            /* @__PURE__ */ s(
+          /* @__PURE__ */ a("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ a(
               "button",
               {
-                onClick: () => ee((e) => !e),
+                onClick: () => te((e) => !e),
                 style: {
                   background: "var(--Grey-White, #FFF)",
                   border: "1px solid var(--Grey-absent, #D9D9D9)",
@@ -325,7 +325,7 @@ const Ne = He(function({
                   gap: 4
                 },
                 children: [
-                  $,
+                  L,
                   "x",
                   /* @__PURE__ */ o(_e, { size: 12, color: "#808183" })
                 ]
@@ -343,7 +343,7 @@ const Ne = He(function({
               zIndex: 10,
               overflow: "hidden",
               minWidth: 80
-            }, children: Ke.map((e) => /* @__PURE__ */ s(
+            }, children: Ke.map((e) => /* @__PURE__ */ a(
               "button",
               {
                 onClick: () => De(e),
@@ -352,10 +352,10 @@ const Ne = He(function({
                   width: "100%",
                   padding: "8px 12px",
                   border: "none",
-                  background: $ === e ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
+                  background: L === e ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
                   cursor: "pointer",
                   fontSize: 13,
-                  fontWeight: $ === e ? 600 : 400,
+                  fontWeight: L === e ? 600 : 400,
                   color: "var(--Grey-Strong, #2E3236)",
                   fontFamily: "var(--font-sans)",
                   textAlign: "left"
@@ -369,8 +369,8 @@ const Ne = He(function({
             )) })
           ] })
         ] }),
-        /* @__PURE__ */ s("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
-          /* @__PURE__ */ s("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+          /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
             /* @__PURE__ */ o("span", { style: {
               fontSize: 13,
               fontWeight: 500,
@@ -378,13 +378,13 @@ const Ne = He(function({
               fontFamily: "var(--font-sans)",
               lineHeight: 1.2,
               minWidth: 60
-            }, children: se(f) }),
-            /* @__PURE__ */ s(
+            }, children: se(p) }),
+            /* @__PURE__ */ a(
               "div",
               {
                 onClick: (e) => {
                   const t = e.currentTarget.getBoundingClientRect(), n = e.clientX - t.left, r = Math.max(0, Math.min(1, n / t.width));
-                  x(r * f);
+                  T(r * p);
                 },
                 style: {
                   flex: 1,
@@ -409,7 +409,7 @@ const Ne = He(function({
                     left: 0,
                     top: "50%",
                     transform: "translateY(-50%)",
-                    width: `${W}%`,
+                    width: `${M}%`,
                     height: 4,
                     borderRadius: 2,
                     background: "var(--Green-Primary, #00925F)",
@@ -425,7 +425,7 @@ const Ne = He(function({
                       xmlns: "http://www.w3.org/2000/svg",
                       style: {
                         position: "absolute",
-                        left: `${W}%`,
+                        left: `${M}%`,
                         top: "50%",
                         transform: "translate(-50%, -50%)",
                         pointerEvents: "none"
@@ -445,13 +445,16 @@ const Ne = He(function({
               }
             )
           ] }),
-          /* @__PURE__ */ s("div", { style: { position: "relative", paddingBottom: 30, cursor: "pointer" }, children: [
-            [H, A].map((e, t) => {
-              const n = t === 0, r = v != null && v.length ? v.filter((i) => n ? i.actor === H : i.actor === A).map((i) => ({
-                start: f > 0 ? i.startTime / f : 0,
-                end: f > 0 ? i.endTime / f : 0
+          /* @__PURE__ */ a("div", { style: { position: "relative", paddingBottom: 30, cursor: "pointer" }, children: [
+            [A, B].map((e, t) => {
+              const n = t === 0, r = (i) => {
+                const l = (i.actor || "").toLowerCase(), m = (i.actorRole || i.role || i.type || "").toLowerCase();
+                return n ? l === A.toLowerCase() || l === "agent" || m === "agent" : l === B.toLowerCase() || l === "customer" || m === "customer";
+              }, s = b != null && b.length ? b.filter(r).map((i) => ({
+                start: p > 0 ? i.startTime / p : 0,
+                end: p > 0 ? i.endTime / p : 0
               })) : qe[n ? "Agent" : "Customer"] || [];
-              return /* @__PURE__ */ s("div", { style: {
+              return /* @__PURE__ */ a("div", { style: {
                 display: "flex",
                 alignItems: "center",
                 gap: 8,
@@ -466,12 +469,12 @@ const Ne = He(function({
                   lineHeight: 1.2,
                   minWidth: 60
                 }, children: e }),
-                /* @__PURE__ */ s(
+                /* @__PURE__ */ a(
                   "div",
                   {
                     onClick: (i) => {
-                      const a = i.currentTarget.getBoundingClientRect(), p = Math.max(0, Math.min(1, (i.clientX - a.left) / a.width));
-                      x(p * f);
+                      const l = i.currentTarget.getBoundingClientRect(), m = Math.max(0, Math.min(1, (i.clientX - l.left) / l.width));
+                      T(m * p);
                     },
                     style: {
                       flex: 1,
@@ -491,7 +494,7 @@ const Ne = He(function({
                         borderRadius: 2,
                         background: "var(--rail-surface-2, #E3E1D7)"
                       } }),
-                      r.map((i, a) => /* @__PURE__ */ o("div", { style: {
+                      s.map((i, l) => /* @__PURE__ */ o("div", { style: {
                         position: "absolute",
                         left: `${i.start * 100}%`,
                         width: `${(i.end - i.start) * 100}%`,
@@ -499,13 +502,13 @@ const Ne = He(function({
                         bottom: 0,
                         borderRadius: 3,
                         background: n ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)"
-                      } }, a))
+                      } }, l))
                     ]
                   }
                 )
               ] }, e);
             }),
-            /* @__PURE__ */ s("div", { style: {
+            /* @__PURE__ */ a("div", { style: {
               position: "absolute",
               left: 68,
               /* 60 label + 8 gap */
@@ -516,7 +519,7 @@ const Ne = He(function({
             }, children: [
               /* @__PURE__ */ o("div", { style: {
                 position: "absolute",
-                left: `${W}%`,
+                left: `${M}%`,
                 top: 0,
                 height: 44,
                 transform: "translateX(-50%)",
@@ -525,7 +528,7 @@ const Ne = He(function({
               } }),
               /* @__PURE__ */ o("div", { style: {
                 position: "absolute",
-                left: `${W}%`,
+                left: `${M}%`,
                 bottom: 0,
                 transform: "translateX(-50%)",
                 background: "var(--Grey-Strong, #2E3236)",
@@ -539,11 +542,11 @@ const Ne = He(function({
               }, children: se(We) })
             ] })
           ] }),
-          c && /* @__PURE__ */ o("audio", { ref: g, preload: "auto", style: { display: "none" }, children: /* @__PURE__ */ o("source", { src: d, type: "audio/mpeg" }) }),
-          l && d && /* @__PURE__ */ o("audio", { ref: N, preload: "auto", style: { display: "none" }, children: /* @__PURE__ */ o("source", { src: d, type: "audio/mpeg" }) })
+          d && /* @__PURE__ */ o("audio", { ref: f, preload: "auto", style: { display: "none" }, children: /* @__PURE__ */ o("source", { src: u, type: "audio/mpeg" }) }),
+          c && u && /* @__PURE__ */ o("audio", { ref: Q, preload: "auto", style: { display: "none" }, children: /* @__PURE__ */ o("source", { src: u, type: "audio/mpeg" }) })
         ] })
       ] }),
-      /* @__PURE__ */ s("div", { style: {
+      /* @__PURE__ */ a("div", { style: {
         width: "100%",
         display: "flex",
         flexDirection: "column",
@@ -558,19 +561,19 @@ const Ne = He(function({
           color: "var(--Grey-Strong, #2E3236)",
           lineHeight: 1.2
         }, children: "Transcript" }) }),
-        /* @__PURE__ */ o("div", { id: "transcript-container", ref: w, style: {
+        /* @__PURE__ */ o("div", { id: "transcript-container", ref: R, style: {
           display: "flex",
           flexDirection: "column",
           maxHeight: 600,
           overflowY: "auto"
-        }, children: (G || M.map((e) => ({
+        }, children: (W || z.map((e) => ({
           actor: e.speaker,
           actorType: e.type,
           text: e.text,
           timeRange: e.time
         }))).map((e, t) => {
-          const n = !!G, r = Fe === t, i = n ? y && C === t : t === D && y, a = i || r, p = (e.actorType || e.type) === "customer";
-          return /* @__PURE__ */ s("div", { style: {
+          const n = !!W, r = Fe === t, s = n ? y && w === t : t === E && y, i = s || r, l = (e.actorType || e.type) === "customer";
+          return /* @__PURE__ */ a("div", { style: {
             display: "flex",
             padding: 16,
             flexDirection: "column",
@@ -578,9 +581,9 @@ const Ne = He(function({
             gap: 16,
             alignSelf: "stretch",
             borderTop: t > 0 ? "1px solid var(--Grey-absent, #D9D9D9)" : "none",
-            background: a ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)"
+            background: i ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)"
           }, children: [
-            /* @__PURE__ */ s("div", { style: {
+            /* @__PURE__ */ a("div", { style: {
               display: "flex",
               alignItems: "center",
               justifyContent: "space-between",
@@ -591,10 +594,10 @@ const Ne = He(function({
                 fontSize: 14,
                 fontWeight: 600,
                 lineHeight: 1.2,
-                color: p ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)"
+                color: l ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)"
               }, children: e.actor }),
-              /* @__PURE__ */ s("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-                i && /* @__PURE__ */ s(ze, { children: [
+              /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                s && /* @__PURE__ */ a(ze, { children: [
                   /* @__PURE__ */ o(ie, { size: 12, color: "#2E3236" }),
                   /* @__PURE__ */ o(ie, { size: 12, color: "#2E3236" })
                 ] }),
@@ -606,12 +609,12 @@ const Ne = He(function({
                 }, children: e.timeRange })
               ] })
             ] }),
-            /* @__PURE__ */ s("div", { style: { display: "flex", alignItems: "flex-start", gap: 8, width: "100%" }, children: [
+            /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "flex-start", gap: 8, width: "100%" }, children: [
               /* @__PURE__ */ o(
                 "button",
                 {
                   onClick: () => {
-                    n && Q ? Q(e, t) : Ee(t);
+                    n && O ? O(e, t) : Ee(t);
                   },
                   style: {
                     background: "none",
@@ -621,7 +624,7 @@ const Ne = He(function({
                     flexShrink: 0,
                     display: "flex"
                   },
-                  children: i ? /* @__PURE__ */ o(Xe, { size: 17, color: "#2E3236", strokeWidth: 1.5 }) : /* @__PURE__ */ o(Ye, { size: 17, color: "#808183", strokeWidth: 1 })
+                  children: s ? /* @__PURE__ */ o(Xe, { size: 17, color: "#2E3236", strokeWidth: 1.5 }) : /* @__PURE__ */ o(Ye, { size: 17, color: "#808183", strokeWidth: 1 })
                 }
               ),
               /* @__PURE__ */ o("p", { style: {