chordia-ui 3.4.0 → 3.4.2

package/dist/UpdatedInteractionRecording.es.js

@@ -1,13 +1,13 @@
-import { jsxs as r, jsx as t, Fragment as X } from "react/jsx-runtime";
-import { forwardRef as ce, useRef as he, useState as p, useImperativeHandle as ge } from "react";
-import { RotateCcw as ue, Pause as pe, Play as fe, RotateCw as me, ChevronDown as ye, AudioLines as N, PauseCircle as ve, PlayCircle as be } from "lucide-react";
-import { a as xe, T as ke } from "./Timeline.es.js";
-function Y(b) {
-  const a = Math.floor(b / 60), x = Math.round(b % 60);
-  return `${a}:${x.toString().padStart(2, "0")}`;
+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")}`;
 }
-const Fe = {
-  David: [
+const Le = {
+  Agent: [
     { start: 0, end: 0.08 },
     { start: 0.18, end: 0.22 },
     { start: 0.38, end: 0.42 },
@@ -23,490 +23,586 @@ const Fe = {
     { start: 0.6, end: 0.66 },
     { start: 0.74, end: 0.8 }
   ]
-}, v = [
-  { speaker: "David", type: "agent", time: "00:04", text: "Thanks for calling Miles Point S Pensau. This is Steve. How can I help you?" },
+}, C = [
+  { 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: "David", type: "agent", time: "00:18", text: "Hello. How are you?" },
+  { 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: "David", type: "agent", time: "00:21", text: "Oh, interesting. Okay. Can you swing by with it one of these days?" }
-], Ie = ce(function({
-  audioUrl: a,
-  timelineSegments: x = [],
-  durationSeconds: g = 0,
-  currentTimeSeconds: G = 0,
-  timelinePlaying: l = !1,
-  playbackRate: k = 1,
-  onSeek: F,
-  onTogglePlay: T,
-  onSeekBack: W,
-  onSeekForward: M,
-  onSetPlaybackRate: R,
-  audioRef: L,
-  transcript: d,
-  highlightedTurns: K = /* @__PURE__ */ new Set(),
-  activeTurnIndex: E,
-  activeDemoIndex: V = 1,
-  turnObservations: Z = {},
-  setExpandedSignals: w,
-  onTurnPlayPause: q
-}, J) {
-  var O;
-  const S = he(null), [f, Q] = p(null), [U, ee] = p(k || 1), [D, m] = p(l), [te, z] = p(!1), [H, C] = p(V), $ = (e) => {
-    for (let n = v.length - 1; n >= 0; n--) {
-      const o = P(v[n].time);
-      if (e >= o)
+  { 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)
+    return 0;
+  const l = u.split(":").map(Number);
+  return (l[0] || 0) * 60 + (l[1] || 0);
+}
+const Ke = Ee(function({
+  audioUrl: l,
+  timelineSegments: D = [],
+  durationSeconds: S = 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,
+  // Speaker names
+  agentName: le = "Agent",
+  customerName: ce = "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(() => {
+    const e = () => {
+      const n = c.current;
+      n && V(n.currentTime), v.current = requestAnimationFrame(e);
+    };
+    v.current = requestAnimationFrame(e);
+  }, []), p = oe(() => {
+    v.current && (cancelAnimationFrame(v.current), v.current = null);
+  }, []);
+  ie(() => () => p(), [p]), ie(() => {
+    if (!s)
+      return;
+    const e = c.current;
+    if (!e)
+      return;
+    const n = () => pe(e.duration || 0), t = () => {
+      f(!1), p();
+    };
+    return e.addEventListener("loadedmetadata", n), e.addEventListener("ended", t), () => {
+      e.removeEventListener("loadedmetadata", n), e.removeEventListener("ended", t);
+    };
+  }, [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;
     }
     return 0;
-  }, P = (e) => {
-    if (!e)
-      return 0;
-    const n = e.split(":").map(Number);
-    return (n[0] || 0) * 60 + (n[1] || 0);
-  }, ne = [1, 1.25, 1.5, 2], B = !a, I = B ? U : k, oe = B ? D : l;
-  ge(J, () => ({
+  }, m = (e) => {
+    const t = Math.max(0, Math.min(e, M || 156));
+    if (s) {
+      const i = c.current;
+      i && (i.currentTime = t), V(t);
+    } else
+      a && T && T(t);
+    ve(t), G(O(t));
+  }, we = () => {
+    if (s) {
+      const e = c.current;
+      if (!e)
+        return;
+      K ? (e.pause(), p(), f(!1)) : e.play().then(() => {
+        f(!0), z();
+      }).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);
+    } else
+      a && _ && _(e);
+    ke(e), Z(!1);
+  };
+  Ge(ge, () => ({
     seekTo: (e) => {
-      c(e), m(!0);
-      const n = $(e);
-      C(n), setTimeout(() => {
+      if (m(e), s) {
+        const t = c.current;
+        t && t.play().then(() => {
+          f(!0), z();
+        }).catch(() => {
+        });
+      } else
+        w(!0);
+      const n = O(e);
+      G(n), setTimeout(() => {
         var i;
-        const o = (i = S.current) == null ? void 0 : i.children;
-        o != null && o[n] && o[n].scrollIntoView({ behavior: "smooth", block: "nearest" });
+        const t = (i = q.current) == null ? void 0 : i.children;
+        t != null && t[n] && t[n].scrollIntoView({ behavior: "smooth", block: "nearest" });
       }, 50);
     }
   }));
-  const c = (e) => {
-    const n = Math.max(0, Math.min(e, g || 156));
-    F && F(n), Q(n), C($(n));
-  }, re = () => {
-    T ? T() : m((e) => !e);
-  }, ie = () => {
-    W ? W() : c(Math.max(0, (f ?? 0) - 10));
-  }, se = () => {
-    M ? M() : c(Math.min(g || 156, (f ?? 0) + 10));
-  }, ae = (e) => {
-    R && R(e), ee(e), z(!1);
-  }, le = (e) => {
+  const Te = (e) => {
     var n;
-    if (H === e && D)
-      m(!1);
-    else {
-      const o = P((n = v[e]) == null ? void 0 : n.time);
-      C(e), m(!0), c(o);
+    if (J === e && k) {
+      if (s) {
+        const t = c.current;
+        t && t.pause(), p(), f(!1);
+      }
+      w(!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();
+        }).catch(() => {
+        }));
+      }
+      w(!0);
     }
-  }, de = (e, n) => {
+  }, Re = (e, n) => {
     if (e == null)
       return;
-    const o = (i) => {
-      const s = Math.floor(i / 6e4), h = Math.floor(i % 6e4 / 1e3);
-      return `${s.toString().padStart(2, "0")}:${h.toString().padStart(2, "0")}`;
+    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")}`;
     };
-    return `${o(e)}–${n != null ? o(n) : o(e)}`;
-  }, j = (O = d == null ? void 0 : d.messages) != null && O.length ? d.messages.map((e, n) => {
-    var o, i;
+    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 {
-      actor: e.actor === "agent" ? ((o = d.actor_map) == null ? void 0 : o.agent) || "Agent" : ((i = d.actor_map) == null ? void 0 : i.customer) || "Customer",
+      actor: e.actor === "agent" ? ((t = g.actor_map) == null ? void 0 : t.agent) || "Agent" : ((i = g.actor_map) == null ? void 0 : i.customer) || "Customer",
       actorType: e.actor === "agent" ? "agent" : "customer",
       text: e.text || "",
-      timeRange: de(e.start ?? e.start_ms, e.end ?? e.end_ms),
-      isHighlighted: K.has(n),
-      highlightColor: l && E === n ? e.actor === "agent" ? "var(--rail-outcome)" : "var(--rail-discovery)" : void 0,
-      observations: (Z[n] || []).map((s) => ({
-        ...s,
+      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,
         onClick: () => {
-          w == null || w((h) => /* @__PURE__ */ new Set([...h, s.signalKey])), setTimeout(() => {
-            const h = document.getElementById(`signal-${s.signalKey}`);
-            h && h.scrollIntoView({ behavior: "smooth", block: "nearest" });
+          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" });
           }, 100);
         }
       }))
     };
-  }) : null, y = g || 156, A = f ?? (g > 0 ? G : 0), u = y > 0 ? A / y * 100 : 0, _ = Math.round(A);
+  }) : 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: {
     display: "flex",
-    padding: 24,
     flexDirection: "column",
-    alignItems: "flex-start",
-    gap: 24,
-    borderRadius: 8,
-    border: "1px solid var(--Grey-absent, #D9D9D9)",
-    background: "var(--Grey-White, #FFF)"
+    gap: 16
   }, 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__ */ t("span", { style: {
-          fontSize: 15,
-          fontWeight: 600,
-          color: "var(--Grey-Strong, #2E3236)",
-          lineHeight: 1.2
-        }, children: "Recording" }),
-        /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", gap: 12, flex: 1, justifyContent: "center" }, children: [
-          /* @__PURE__ */ t("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Muted, #808183)", lineHeight: 1.2 }, children: "10" }),
-          /* @__PURE__ */ t("button", { onClick: ie, style: { background: "none", border: "none", cursor: "pointer", padding: 0, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ t(ue, { size: 20, color: "#808183", strokeWidth: 1.5 }) }),
-          /* @__PURE__ */ t("button", { onClick: re, style: {
-            background: "var(--Grey-Strong, #2E3236)",
-            border: "none",
-            cursor: "pointer",
-            width: 32,
-            height: 32,
-            borderRadius: 48,
-            padding: 0,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }, children: oe ? /* @__PURE__ */ t(pe, { size: 14, color: "#FFF", fill: "#FFF" }) : /* @__PURE__ */ t(fe, { size: 14, color: "#FFF", fill: "#FFF", strokeWidth: 1.5, style: { marginLeft: 2 } }) }),
-          /* @__PURE__ */ t("button", { onClick: se, style: { background: "none", border: "none", cursor: "pointer", padding: 0, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ t(me, { size: 20, color: "#808183", strokeWidth: 1.5 }) }),
-          /* @__PURE__ */ t("span", { style: { fontSize: 13, fontWeight: 400, color: "var(--Grey-Muted, #808183)", lineHeight: 1.2 }, children: "10" })
+    /* @__PURE__ */ r("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 16,
+      width: "100%"
+    }, children: [
+      /* @__PURE__ */ o("div", { style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 34,
+        height: 34,
+        borderRadius: 9999,
+        background: "var(--surface-hover, #F3F7F7)",
+        flexShrink: 0
+      }, children: /* @__PURE__ */ o(We, { 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: {
+      display: "flex",
+      padding: 24,
+      flexDirection: "column",
+      alignItems: "flex-start",
+      gap: 24,
+      borderRadius: 8,
+      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: {
+            fontSize: 14,
+            fontWeight: 500,
+            color: "var(--Grey-Strong, #2E3236)",
+            lineHeight: 1.2
+          }, children: [
+            le,
+            " / ",
+            ce
+          ] }),
+          /* @__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: {
+              background: "var(--Grey-Strong, #2E3236)",
+              border: "none",
+              cursor: "pointer",
+              width: 32,
+              height: 32,
+              borderRadius: 48,
+              padding: 0,
+              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" })
+          ] }),
+          /* @__PURE__ */ r("div", { style: { position: "relative" }, children: [
+            /* @__PURE__ */ r(
+              "button",
+              {
+                onClick: () => Z((e) => !e),
+                style: {
+                  background: "var(--Grey-White, #FFF)",
+                  border: "1px solid var(--Grey-absent, #D9D9D9)",
+                  borderRadius: 20,
+                  padding: "0 5px 0 10px",
+                  height: 24,
+                  minWidth: 56,
+                  cursor: "pointer",
+                  fontSize: 13,
+                  fontWeight: 400,
+                  color: "var(--Grey-Strong, #2E3236)",
+                  fontFamily: "var(--font-sans)",
+                  lineHeight: 1.2,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: 4
+                },
+                children: [
+                  W,
+                  "x",
+                  /* @__PURE__ */ o(Ae, { size: 12, color: "#808183" })
+                ]
+              }
+            ),
+            Se && /* @__PURE__ */ o("div", { style: {
+              position: "absolute",
+              top: "100%",
+              right: 0,
+              marginTop: 4,
+              background: "var(--Grey-White, #FFF)",
+              border: "1px solid var(--Grey-absent, #D9D9D9)",
+              borderRadius: 8,
+              boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+              zIndex: 10,
+              overflow: "hidden",
+              minWidth: 80
+            }, children: _e.map((e) => /* @__PURE__ */ r(
+              "button",
+              {
+                onClick: () => De(e),
+                style: {
+                  display: "block",
+                  width: "100%",
+                  padding: "8px 12px",
+                  border: "none",
+                  background: W === e ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
+                  cursor: "pointer",
+                  fontSize: 13,
+                  fontWeight: W === e ? 600 : 400,
+                  color: "var(--Grey-Strong, #2E3236)",
+                  fontFamily: "var(--font-sans)",
+                  textAlign: "left"
+                },
+                children: [
+                  e,
+                  "x"
+                ]
+              },
+              e
+            )) })
+          ] })
         ] }),
-        /* @__PURE__ */ r("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ r(
-            "button",
+        l && a ? /* @__PURE__ */ r(ne, { children: [
+          /* @__PURE__ */ o(
+            je,
             {
-              onClick: () => z((e) => !e),
-              style: {
-                background: "var(--Grey-White, #FFF)",
-                border: "1px solid var(--Grey-absent, #D9D9D9)",
-                borderRadius: 20,
-                padding: "0 5px 0 10px",
-                height: 24,
-                minWidth: 56,
-                cursor: "pointer",
-                fontSize: 13,
-                fontWeight: 400,
-                color: "var(--Grey-Strong, #2E3236)",
-                fontFamily: "var(--font-sans)",
-                lineHeight: 1.2,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: 4
-              },
-              children: [
-                I,
-                "x",
-                /* @__PURE__ */ t(ye, { size: 12, color: "#808183" })
-              ]
+              segments: D,
+              durationSeconds: S,
+              currentTimeSeconds: P,
+              onSeek: T,
+              showControls: !1,
+              hasRecording: !0,
+              timelinePlaying: A,
+              playbackRate: $
             }
           ),
-          te && /* @__PURE__ */ t("div", { style: {
-            position: "absolute",
-            top: "100%",
-            right: 0,
-            marginTop: 4,
-            background: "var(--Grey-White, #FFF)",
-            border: "1px solid var(--Grey-absent, #D9D9D9)",
-            borderRadius: 8,
-            boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
-            zIndex: 10,
-            overflow: "hidden",
-            minWidth: 80
-          }, children: ne.map((e) => /* @__PURE__ */ r(
-            "button",
-            {
-              onClick: () => ae(e),
-              style: {
-                display: "block",
-                width: "100%",
-                padding: "8px 12px",
-                border: "none",
-                background: I === e ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)",
-                cursor: "pointer",
-                fontSize: 13,
-                fontWeight: I === e ? 600 : 400,
-                color: "var(--Grey-Strong, #2E3236)",
-                fontFamily: "var(--font-sans)",
-                textAlign: "left"
-              },
-              children: [
-                e,
-                "x"
-              ]
-            },
-            e
-          )) })
-        ] })
-      ] }),
-      a ? /* @__PURE__ */ r(X, { children: [
-        /* @__PURE__ */ t(
-          xe,
-          {
-            segments: x,
-            durationSeconds: g,
-            currentTimeSeconds: G,
-            onSeek: F,
-            showControls: !1,
-            hasRecording: !0,
-            timelinePlaying: l,
-            playbackRate: k
-          }
-        ),
-        /* @__PURE__ */ t("audio", { ref: L, preload: "none", style: { display: "none" }, children: /* @__PURE__ */ t("source", { src: a, 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__ */ t("span", { style: {
-            fontSize: 13,
-            fontWeight: 600,
-            color: u > 0 ? "var(--Green-Primary, #00925F)" : "var(--Grey-Strong, #2E3236)",
-            fontFamily: "var(--font-sans)",
-            lineHeight: 1.2,
-            minWidth: 60
-          }, children: Y(_) }),
-          /* @__PURE__ */ r(
-            "div",
-            {
-              onClick: (e) => {
-                const n = e.currentTarget.getBoundingClientRect(), o = e.clientX - n.left, s = Math.max(0, Math.min(1, o / n.width)) * y;
-                c(s);
-              },
-              style: {
-                flex: 1,
-                height: 16,
-                position: "relative",
-                display: "flex",
-                alignItems: "center",
-                cursor: "pointer"
-              },
-              children: [
-                /* @__PURE__ */ t("div", { style: {
-                  position: "absolute",
-                  left: 0,
-                  right: 0,
-                  height: 4,
-                  borderRadius: 2,
-                  background: "var(--rail-surface-2, #E3E1D7)",
-                  pointerEvents: "none"
-                } }),
-                /* @__PURE__ */ t("div", { style: {
-                  position: "absolute",
-                  left: 0,
-                  top: "50%",
-                  transform: "translateY(-50%)",
-                  width: `${u}%`,
-                  height: 4,
-                  borderRadius: 2,
-                  background: "var(--Green-Primary, #00925F)",
-                  pointerEvents: "none"
-                } }),
-                /* @__PURE__ */ t(
-                  "svg",
-                  {
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 16 16",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    style: {
-                      position: "absolute",
-                      left: `${u}%`,
-                      top: "50%",
-                      transform: "translate(-50%, -50%)",
-                      pointerEvents: "none"
-                    },
-                    children: /* @__PURE__ */ t(
-                      "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",
-                        fill: "#FFF",
-                        stroke: "#00925F",
-                        strokeWidth: "2"
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ r("div", { style: { position: "relative", paddingBottom: 30, cursor: "pointer" }, children: [
-          ["David", "Customer"].map((e, n) => /* @__PURE__ */ r("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            height: 20,
-            marginBottom: n === 0 ? 4 : 0
-          }, children: [
-            /* @__PURE__ */ t("span", { style: {
+          /* @__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: {
               fontSize: 13,
-              fontWeight: 400,
-              color: "var(--Grey-Muted, #808183)",
+              fontWeight: 600,
+              color: x > 0 ? "var(--Green-Primary, #00925F)" : "var(--Grey-Strong, #2E3236)",
               fontFamily: "var(--font-sans)",
               lineHeight: 1.2,
               minWidth: 60
-            }, children: e }),
+            }, children: ae(ee) }),
             /* @__PURE__ */ r(
               "div",
               {
-                onClick: (o) => {
-                  const i = o.currentTarget.getBoundingClientRect(), s = Math.max(0, Math.min(1, (o.clientX - i.left) / i.width));
-                  c(s * y);
+                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);
                 },
                 style: {
                   flex: 1,
-                  height: 6,
+                  height: 16,
                   position: "relative",
-                  borderRadius: 3,
+                  display: "flex",
+                  alignItems: "center",
                   cursor: "pointer"
                 },
                 children: [
-                  /* @__PURE__ */ t("div", { style: {
+                  /* @__PURE__ */ o("div", { style: {
                     position: "absolute",
                     left: 0,
                     right: 0,
+                    height: 4,
+                    borderRadius: 2,
+                    background: "var(--rail-surface-2, #E3E1D7)",
+                    pointerEvents: "none"
+                  } }),
+                  /* @__PURE__ */ o("div", { style: {
+                    position: "absolute",
+                    left: 0,
                     top: "50%",
                     transform: "translateY(-50%)",
+                    width: `${x}%`,
                     height: 4,
                     borderRadius: 2,
-                    background: "var(--rail-surface-2, #E3E1D7)"
+                    background: "var(--Green-Primary, #00925F)",
+                    pointerEvents: "none"
                   } }),
-                  Fe[e].map((o, i) => /* @__PURE__ */ t("div", { style: {
-                    position: "absolute",
-                    left: `${o.start * 100}%`,
-                    width: `${(o.end - o.start) * 100}%`,
-                    top: 0,
-                    bottom: 0,
-                    borderRadius: 3,
-                    background: e === "David" ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)"
-                  } }, i))
+                  /* @__PURE__ */ o(
+                    "svg",
+                    {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 16 16",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      style: {
+                        position: "absolute",
+                        left: `${x}%`,
+                        top: "50%",
+                        transform: "translate(-50%, -50%)",
+                        pointerEvents: "none"
+                      },
+                      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",
+                          fill: "#FFF",
+                          stroke: "#00925F",
+                          strokeWidth: "2"
+                        }
+                      )
+                    }
+                  )
                 ]
               }
             )
-          ] }, e)),
-          /* @__PURE__ */ r("div", { style: {
-            position: "absolute",
-            left: 68,
-            /* 60 label + 8 gap */
-            right: 0,
-            top: 0,
-            bottom: 0,
-            pointerEvents: "none"
-          }, children: [
-            /* @__PURE__ */ t("div", { style: {
+          ] }),
+          /* @__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,
+                      borderRadius: 3,
+                      background: e === "Agent" ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)"
+                    } }, i))
+                  ]
+                }
+              )
+            ] }, e)),
+            /* @__PURE__ */ r("div", { style: {
               position: "absolute",
-              left: `${u}%`,
+              left: 68,
+              /* 60 label + 8 gap */
+              right: 0,
               top: 0,
-              height: 44,
-              /* spans both rows */
-              transform: "translateX(-50%)",
-              borderLeft: "1.5px dashed var(--Grey-Muted, #808183)",
-              opacity: 0.5
-            } }),
-            /* @__PURE__ */ t("div", { style: {
-              position: "absolute",
-              left: `${u}%`,
               bottom: 0,
-              transform: "translateX(-50%)",
-              background: "var(--Grey-Strong, #2E3236)",
-              color: "var(--Grey-White, #FFF)",
-              fontSize: 14,
-              fontWeight: 600,
-              lineHeight: 1.2,
-              padding: "4px 6px",
-              borderRadius: 4,
-              whiteSpace: "nowrap"
-            }, children: Y(_) })
-          ] })
+              pointerEvents: "none"
+            }, children: [
+              /* @__PURE__ */ o("div", { style: {
+                position: "absolute",
+                left: `${x}%`,
+                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}%`,
+                bottom: 0,
+                transform: "translateX(-50%)",
+                background: "var(--Grey-Strong, #2E3236)",
+                color: "var(--Grey-White, #FFF)",
+                fontSize: 14,
+                fontWeight: 600,
+                lineHeight: 1.2,
+                padding: "4px 6px",
+                borderRadius: 4,
+                whiteSpace: "nowrap"
+              }, children: ae(ee) })
+            ] })
+          ] }),
+          s && /* @__PURE__ */ o("audio", { ref: c, preload: "auto", style: { display: "none" }, children: /* @__PURE__ */ o("source", { src: l, type: "audio/mpeg" }) })
         ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ r("div", { style: {
-      width: "100%",
-      display: "flex",
-      flexDirection: "column",
-      gap: 16
-    }, children: [
-      /* @__PURE__ */ t("div", { style: {
-        borderBottom: "1px solid var(--Grey-absent, #D9D9D9)",
-        paddingBottom: 16
-      }, children: /* @__PURE__ */ t("span", { style: {
-        fontSize: 14,
-        fontWeight: 400,
-        color: "var(--Grey-Strong, #2E3236)",
-        lineHeight: 1.2
-      }, children: "Transcript" }) }),
-      j ? /* @__PURE__ */ t("div", { id: "transcript-container", ref: S, style: { maxHeight: 600, overflowY: "auto" }, children: /* @__PURE__ */ t(
-        ke,
-        {
-          turns: j,
-          audioUrl: a,
-          activeTurnIndex: E,
-          autoScrollActiveTurn: l,
-          isExternalPlaying: l,
-          onTurnPlayPause: q
-        }
-      ) }) : /* @__PURE__ */ t("div", { ref: S, style: {
+      ] }),
+      /* @__PURE__ */ r("div", { style: {
+        width: "100%",
         display: "flex",
         flexDirection: "column",
-        maxHeight: 600,
-        overflowY: "auto"
-      }, children: v.map((e, n) => {
-        const o = n === H && D, i = e.type === "customer";
-        return /* @__PURE__ */ r("div", { style: {
+        gap: 16
+      }, children: [
+        /* @__PURE__ */ o("div", { style: {
+          borderBottom: "1px solid var(--Grey-absent, #D9D9D9)",
+          paddingBottom: 16
+        }, children: /* @__PURE__ */ o("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: {
           display: "flex",
-          padding: 16,
           flexDirection: "column",
-          alignItems: "flex-start",
-          gap: 16,
-          alignSelf: "stretch",
-          borderTop: n > 0 ? "1px solid var(--Grey-absent, #D9D9D9)" : "none",
-          background: o ? "var(--surface-hover, #F3F7F7)" : "var(--Grey-White, #FFF)"
-        }, children: [
-          /* @__PURE__ */ r("div", { style: {
+          maxHeight: 600,
+          overflowY: "auto"
+        }, children: (Q || C.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: {
             display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            width: "100%",
-            gap: 8
+            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)"
           }, children: [
-            /* @__PURE__ */ t("span", { style: {
-              fontSize: 14,
-              fontWeight: 600,
-              lineHeight: 1.2,
-              color: i ? "var(--Grey-Strong, #2E3236)" : "var(--Grey-Muted, #808183)"
-            }, children: e.speaker }),
-            /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-              o && /* @__PURE__ */ r(X, { children: [
-                /* @__PURE__ */ t(N, { size: 12, color: "#2E3236" }),
-                /* @__PURE__ */ t(N, { size: 12, color: "#2E3236" })
-              ] }),
-              /* @__PURE__ */ t("span", { style: {
+            /* @__PURE__ */ r("div", { style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%",
+              gap: 8
+            }, children: [
+              /* @__PURE__ */ o("span", { style: {
+                fontSize: 14,
+                fontWeight: 600,
+                lineHeight: 1.2,
+                color: d ? "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__ */ o("span", { style: {
+                  fontSize: 13,
+                  fontWeight: 400,
+                  lineHeight: 1.2,
+                  color: "var(--Grey-Muted, #808183)"
+                }, children: e.timeRange })
+              ] })
+            ] }),
+            /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "flex-start", gap: 8, width: "100%" }, children: [
+              /* @__PURE__ */ o(
+                "button",
+                {
+                  onClick: () => {
+                    t && Y ? Y(e, n) : Te(n);
+                  },
+                  style: {
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    padding: 0,
+                    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 })
+                }
+              ),
+              /* @__PURE__ */ o("p", { style: {
                 fontSize: 13,
                 fontWeight: 400,
+                color: "var(--Grey-Strong, #2E3236)",
                 lineHeight: 1.2,
-                color: "var(--Grey-Muted, #808183)"
-              }, children: e.time })
+                margin: 0,
+                flex: 1
+              }, children: e.text })
             ] })
-          ] }),
-          /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "flex-start", gap: 8, width: "100%" }, children: [
-            /* @__PURE__ */ t(
-              "button",
-              {
-                onClick: () => le(n),
-                style: {
-                  background: "none",
-                  border: "none",
-                  cursor: "pointer",
-                  padding: 0,
-                  flexShrink: 0,
-                  display: "flex"
-                },
-                children: o ? /* @__PURE__ */ t(ve, { size: 17, color: "#2E3236", strokeWidth: 1.5 }) : /* @__PURE__ */ t(be, { size: 17, color: "#808183", strokeWidth: 1 })
-              }
-            ),
-            /* @__PURE__ */ t("p", { style: {
-              fontSize: 13,
-              fontWeight: 400,
-              color: "var(--Grey-Strong, #2E3236)",
-              lineHeight: 1.2,
-              margin: 0,
-              flex: 1
-            }, children: e.text })
-          ] })
-        ] }, n);
-      }) })
+          ] }, n);
+        }) })
+      ] })
     ] })
   ] });
 });
 export {
-  Ie as U
+  Ke as U
 };
 //# sourceMappingURL=UpdatedInteractionRecording.es.js.map