chordia-ui 3.4.3 → 3.4.4

package/dist/UpdatedInteractionRecording.es.js

@@ -1,9 +1,9 @@
-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")}`;
+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: [
@@ -29,64 +29,64 @@ const Le = {
   { 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 ae(p) {
-  if (!p)
+function ie(g) {
+  if (!g)
     return 0;
-  const d = p.split(":").map(Number);
+  const d = g.split(":").map(Number);
   return (d[0] || 0) * 60 + (d[1] || 0);
 }
-const Ke = Ee(function({
+const Ke = Ge(function({
   audioUrl: d,
-  timelineSegments: g = [],
+  timelineSegments: p = [],
   durationSeconds: R = 0,
   // Parent-managed audio props (optional — if not provided, component manages its own audio)
-  currentTimeSeconds: se,
-  timelinePlaying: B,
-  playbackRate: le,
-  onSeek: j,
-  onTogglePlay: w,
-  onSeekBack: L,
-  onSeekForward: _,
-  onSetPlaybackRate: X,
-  audioRef: Y,
+  currentTimeSeconds: ae,
+  timelinePlaying: $,
+  playbackRate: se,
+  onSeek: B,
+  onTogglePlay: S,
+  onSeekBack: j,
+  onSeekForward: L,
+  onSetPlaybackRate: _,
+  audioRef: X,
   // Speaker names
   agentName: T = "Agent",
-  customerName: G = "Customer",
+  customerName: E = "Customer",
   // Transcript props
   transcript: y,
-  highlightedTurns: ce = /* @__PURE__ */ new Set(),
-  activeTurnIndex: q,
-  activeDemoIndex: de = 1,
-  turnObservations: he = {},
-  setExpandedSignals: E,
-  onTurnPlayPause: K
+  highlightedTurns: le = /* @__PURE__ */ new Set(),
+  activeTurnIndex: Y,
+  activeDemoIndex: ce = 1,
+  turnObservations: de = {},
+  setExpandedSignals: G,
+  onTurnPlayPause: q
 }, 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(() => {
+  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 t = h.current;
-      t && J(t.currentTime), k.current = requestAnimationFrame(e);
+      const t = u.current;
+      t && Z(t.currentTime), k.current = requestAnimationFrame(e);
     };
     k.current = requestAnimationFrame(e);
-  }, []), v = re(() => {
+  }, []), v = te(() => {
     k.current && (cancelAnimationFrame(k.current), k.current = null);
   }, []);
-  oe(() => () => v(), [v]), oe(() => {
+  ne(() => () => v(), [v]), ne(() => {
     if (!l)
       return;
-    const e = h.current;
+    const e = u.current;
     if (!e)
       return;
-    const t = () => pe(e.duration || 0), n = () => {
+    const t = () => fe(e.duration || 0), n = () => {
       m(!1), v();
     };
     return e.addEventListener("loadedmetadata", t), e.addEventListener("ended", n), () => {
       e.removeEventListener("loadedmetadata", t), e.removeEventListener("ended", n);
     };
   }, [l, v]);
-  const O = (e) => {
+  const Q = (e) => {
     for (let t = D.length - 1; t >= 0; t--) {
-      const n = ae(D[t].time);
+      const n = ie(D[t].time);
       if (e >= n)
         return t;
     }
@@ -94,101 +94,101 @@ const Ke = Ee(function({
   }, b = (e) => {
     const n = Math.max(0, Math.min(e, H || 156));
     if (l) {
-      const o = h.current;
-      o && (o.currentTime = n), J(n);
+      const r = u.current;
+      r && (r.currentTime = n), Z(n);
     } else
-      s && j && j(n);
-    me(n), M(O(n));
-  }, Se = () => {
+      s && B && B(n);
+    ye(n), M(Q(n));
+  }, Fe = () => {
     if (l) {
-      const e = h.current;
+      const e = u.current;
       if (!e)
         return;
-      Z ? (e.pause(), v(), m(!1)) : e.play().then(() => {
+      V ? (e.pause(), v(), m(!1)) : e.play().then(() => {
         m(!0), A();
       }).catch(() => {
       });
     } else
-      s && w ? w() : C((e) => !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.max(0, (l ? W : I ?? 0) - 10));
-  }, Ie = () => {
-    s && _ ? _() : b(Math.min(H || 156, (l ? W : I ?? 0) + 10));
-  }, Ce = (e) => {
+    s && L ? L() : b(Math.min(H || 156, (l ? W : w ?? 0) + 10));
+  }, Ie = (e) => {
     if (l) {
-      const t = h.current;
-      t && (t.playbackRate = e), ye(e);
+      const t = u.current;
+      t && (t.playbackRate = e), pe(e);
     } else
-      s && X && X(e);
-    be(e), N(!1);
+      s && _ && _(e);
+    ve(e), J(!1);
   };
   We(ue, () => ({
     seekTo: (e) => {
       if (b(e), s)
-        !B && w && w();
+        !$ && S && S();
       else if (l) {
-        const n = h.current;
+        const n = u.current;
         n && n.play().then(() => {
           m(!0), A();
         }).catch(() => {
         });
       } else
-        C(!0);
-      const t = O(e);
+        I(!0);
+      const t = Q(e);
       M(t), setTimeout(() => {
-        var o;
-        const n = (o = V.current) == null ? void 0 : o.children;
+        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 De = (e) => {
+  const Ce = (e) => {
     var t;
-    if (Q === e && F) {
+    if (N === e && F) {
       if (l) {
-        const n = h.current;
+        const n = u.current;
         n && n.pause(), v(), m(!1);
       }
-      C(!1);
+      I(!1);
     } else {
-      const n = ae((t = D[e]) == null ? void 0 : t.time);
+      const n = ie((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(() => {
+        const r = u.current;
+        r && (r.currentTime = n, r.play().then(() => {
           m(!0), A();
         }).catch(() => {
         }));
       }
-      C(!0);
+      I(!0);
     }
-  }, Re = (e, t) => {
+  }, De = (e, t) => {
     if (e == null)
       return;
-    const n = (o) => {
-      const a = Math.floor(o / 6e4), c = Math.floor(o % 6e4 / 1e3);
+    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 `${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;
+  }, O = (ee = y == null ? void 0 : y.messages) != null && ee.length ? y.messages.map((e, t) => {
+    var n, r;
     return {
-      actor: e.actor === "agent" ? ((n = y.actor_map) == null ? void 0 : n.agent) || "Agent" : ((o = y.actor_map) == null ? void 0 : o.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: ce.has(t),
-      highlightColor: F && q === t ? e.actor === "agent" ? "var(--rail-outcome)" : "var(--rail-discovery)" : void 0,
-      observations: (he[t] || []).map((a) => ({
+      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: () => {
-          E == null || E((c) => /* @__PURE__ */ new Set([...c, a.signalKey])), setTimeout(() => {
+          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, ee = x ? I ?? 0 : Fe, u = H || 156, S = u > 0 ? ee / u * 100 : 0, te = Math.round(ee);
+  }) : 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",
@@ -200,7 +200,7 @@ const Ke = Ee(function({
       gap: 16,
       width: "100%"
     }, children: [
-      /* @__PURE__ */ r("div", { style: {
+      /* @__PURE__ */ o("div", { style: {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
@@ -209,8 +209,8 @@ const Ke = Ee(function({
         borderRadius: 9999,
         background: "var(--surface-hover, #F3F7F7)",
         flexShrink: 0
-      }, children: /* @__PURE__ */ r(Me, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
-      /* @__PURE__ */ r("span", { style: {
+      }, children: /* @__PURE__ */ o(Me, { size: 20, color: "#2E3236", strokeWidth: 1.5 }) }),
+      /* @__PURE__ */ o("span", { style: {
         fontSize: 15,
         fontWeight: 500,
         color: "var(--Grey-Strong, #2E3236)"
@@ -236,12 +236,12 @@ const Ke = Ee(function({
           }, children: [
             T,
             " / ",
-            G
+            E
           ] }),
           /* @__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: {
+            /* @__PURE__ */ o("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Muted, #808183)", lineHeight: 1.2 }, children: "10" }),
+            /* @__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",
@@ -252,15 +252,15 @@ const Ke = Ee(function({
               display: "flex",
               alignItems: "center",
               justifyContent: "center"
-            }, 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" })
+            }, 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__ */ i("div", { style: { position: "relative" }, children: [
             /* @__PURE__ */ i(
               "button",
               {
-                onClick: () => N((e) => !e),
+                onClick: () => J((e) => !e),
                 style: {
                   background: "var(--Grey-White, #FFF)",
                   border: "1px solid var(--Grey-absent, #D9D9D9)",
@@ -282,11 +282,11 @@ const Ke = Ee(function({
                 children: [
                   z,
                   "x",
-                  /* @__PURE__ */ r($e, { size: 12, color: "#808183" })
+                  /* @__PURE__ */ o($e, { size: 12, color: "#808183" })
                 ]
               }
             ),
-            xe && /* @__PURE__ */ r("div", { style: {
+            ke && /* @__PURE__ */ o("div", { style: {
               position: "absolute",
               top: "100%",
               right: 0,
@@ -301,7 +301,7 @@ const Ke = Ee(function({
             }, children: _e.map((e) => /* @__PURE__ */ i(
               "button",
               {
-                onClick: () => Ce(e),
+                onClick: () => Ie(e),
                 style: {
                   display: "block",
                   width: "100%",
@@ -326,20 +326,20 @@ const Ke = Ee(function({
         ] }),
         /* @__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: {
+            /* @__PURE__ */ o("span", { style: {
               fontSize: 13,
-              fontWeight: 600,
-              color: S > 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: $(te) }),
+            }, children: re(h) }),
             /* @__PURE__ */ i(
               "div",
               {
                 onClick: (e) => {
-                  const t = e.currentTarget.getBoundingClientRect(), n = e.clientX - t.left, o = Math.max(0, Math.min(1, n / t.width));
-                  b(o * u);
+                  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,
@@ -350,7 +350,7 @@ const Ke = Ee(function({
                   cursor: "pointer"
                 },
                 children: [
-                  /* @__PURE__ */ r("div", { style: {
+                  /* @__PURE__ */ o("div", { style: {
                     position: "absolute",
                     left: 0,
                     right: 0,
@@ -359,18 +359,18 @@ const Ke = Ee(function({
                     background: "var(--rail-surface-2, #E3E1D7)",
                     pointerEvents: "none"
                   } }),
-                  /* @__PURE__ */ r("div", { style: {
+                  /* @__PURE__ */ o("div", { style: {
                     position: "absolute",
                     left: 0,
                     top: "50%",
                     transform: "translateY(-50%)",
-                    width: `${S}%`,
+                    width: `${C}%`,
                     height: 4,
                     borderRadius: 2,
                     background: "var(--Green-Primary, #00925F)",
                     pointerEvents: "none"
                   } }),
-                  /* @__PURE__ */ r(
+                  /* @__PURE__ */ o(
                     "svg",
                     {
                       width: "16",
@@ -380,12 +380,12 @@ const Ke = Ee(function({
                       xmlns: "http://www.w3.org/2000/svg",
                       style: {
                         position: "absolute",
-                        left: `${S}%`,
+                        left: `${C}%`,
                         top: "50%",
                         transform: "translate(-50%, -50%)",
                         pointerEvents: "none"
                       },
-                      children: /* @__PURE__ */ r(
+                      children: /* @__PURE__ */ o(
                         "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",
@@ -395,26 +395,16 @@ 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__ */ 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
+            [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",
@@ -423,7 +413,7 @@ const Ke = Ee(function({
                 height: 20,
                 marginBottom: t === 0 ? 4 : 0
               }, children: [
-                /* @__PURE__ */ r("span", { style: {
+                /* @__PURE__ */ o("span", { style: {
                   fontSize: 13,
                   fontWeight: 400,
                   color: "var(--Grey-Muted, #808183)",
@@ -436,7 +426,7 @@ const Ke = Ee(function({
                   {
                     onClick: (a) => {
                       const c = a.currentTarget.getBoundingClientRect(), Te = Math.max(0, Math.min(1, (a.clientX - c.left) / c.width));
-                      b(Te * u);
+                      b(Te * h);
                     },
                     style: {
                       flex: 1,
@@ -446,7 +436,7 @@ const Ke = Ee(function({
                       cursor: "pointer"
                     },
                     children: [
-                      /* @__PURE__ */ r("div", { style: {
+                      /* @__PURE__ */ o("div", { style: {
                         position: "absolute",
                         left: 0,
                         right: 0,
@@ -456,7 +446,7 @@ const Ke = Ee(function({
                         borderRadius: 2,
                         background: "var(--rail-surface-2, #E3E1D7)"
                       } }),
-                      o.map((a, c) => /* @__PURE__ */ r("div", { style: {
+                      r.map((a, c) => /* @__PURE__ */ o("div", { style: {
                         position: "absolute",
                         left: `${a.start * 100}%`,
                         width: `${(a.end - a.start) * 100}%`,
@@ -479,18 +469,18 @@ const Ke = Ee(function({
               bottom: 0,
               pointerEvents: "none"
             }, children: [
-              /* @__PURE__ */ r("div", { style: {
+              /* @__PURE__ */ o("div", { style: {
                 position: "absolute",
-                left: `${S}%`,
+                left: `${C}%`,
                 top: 0,
                 height: 44,
                 transform: "translateX(-50%)",
                 borderLeft: "1.5px dashed var(--Grey-Muted, #808183)",
                 opacity: 0.5
               } }),
-              /* @__PURE__ */ r("div", { style: {
+              /* @__PURE__ */ o("div", { style: {
                 position: "absolute",
-                left: `${S}%`,
+                left: `${C}%`,
                 bottom: 0,
                 transform: "translateX(-50%)",
                 background: "var(--Grey-Strong, #2E3236)",
@@ -501,11 +491,11 @@ const Ke = Ee(function({
                 padding: "4px 6px",
                 borderRadius: 4,
                 whiteSpace: "nowrap"
-              }, children: $(te) })
+              }, children: re(Re) })
             ] })
           ] }),
-          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" }) })
+          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__ */ i("div", { style: {
@@ -514,27 +504,27 @@ const Ke = Ee(function({
         flexDirection: "column",
         gap: 16
       }, children: [
-        /* @__PURE__ */ r("div", { style: {
+        /* @__PURE__ */ o("div", { style: {
           borderBottom: "1px solid var(--Grey-absent, #D9D9D9)",
           paddingBottom: 16
-        }, children: /* @__PURE__ */ r("span", { style: {
+        }, children: /* @__PURE__ */ o("span", { style: {
           fontSize: 14,
           fontWeight: 400,
           color: "var(--Grey-Strong, #2E3236)",
           lineHeight: 1.2
         }, children: "Transcript" }) }),
-        /* @__PURE__ */ r("div", { id: "transcript-container", ref: V, style: {
+        /* @__PURE__ */ o("div", { id: "transcript-container", ref: K, style: {
           display: "flex",
           flexDirection: "column",
           maxHeight: 600,
           overflowY: "auto"
-        }, children: (U || D.map((e) => ({
+        }, children: (O || D.map((e) => ({
           actor: e.speaker,
           actorType: e.type,
           text: e.text,
           timeRange: e.time
         }))).map((e, t) => {
-          const n = !!U, o = n ? F && q === t : t === Q && F, a = (e.actorType || e.type) === "customer";
+          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,
@@ -543,7 +533,7 @@ const Ke = Ee(function({
             gap: 16,
             alignSelf: "stretch",
             borderTop: t > 0 ? "1px solid var(--Grey-absent, #D9D9D9)" : "none",
-            background: o ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)"
+            background: r ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)"
           }, children: [
             /* @__PURE__ */ i("div", { style: {
               display: "flex",
@@ -552,18 +542,18 @@ const Ke = Ee(function({
               width: "100%",
               gap: 8
             }, children: [
-              /* @__PURE__ */ r("span", { style: {
+              /* @__PURE__ */ o("span", { style: {
                 fontSize: 14,
                 fontWeight: 600,
                 lineHeight: 1.2,
                 color: a ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)"
               }, children: e.actor }),
               /* @__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" })
+                r && /* @__PURE__ */ i(Ee, { children: [
+                  /* @__PURE__ */ o(oe, { size: 12, color: "#2E3236" }),
+                  /* @__PURE__ */ o(oe, { size: 12, color: "#2E3236" })
                 ] }),
-                /* @__PURE__ */ r("span", { style: {
+                /* @__PURE__ */ o("span", { style: {
                   fontSize: 13,
                   fontWeight: 400,
                   lineHeight: 1.2,
@@ -572,11 +562,11 @@ const Ke = Ee(function({
               ] })
             ] }),
             /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "flex-start", gap: 8, width: "100%" }, children: [
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ o(
                 "button",
                 {
                   onClick: () => {
-                    n && K ? K(e, t) : De(t);
+                    n && q ? q(e, t) : Ce(t);
                   },
                   style: {
                     background: "none",
@@ -586,10 +576,10 @@ const Ke = Ee(function({
                     flexShrink: 0,
                     display: "flex"
                   },
-                  children: o ? /* @__PURE__ */ r(Be, { size: 17, color: "#2E3236", strokeWidth: 1.5 }) : /* @__PURE__ */ r(je, { 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__ */ r("p", { style: {
+              /* @__PURE__ */ o("p", { style: {
                 fontSize: 13,
                 fontWeight: 400,
                 color: "var(--Grey-Strong, #2E3236)",