chordia-ui 3.4.0 → 3.4.2

package/dist/TranscriptCard.es.js

@@ -0,0 +1,474 @@
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { useEffect as E, useState as A, useRef as B } from "react";
+import { Pause as W, Play as z } from "lucide-react";
+const H = {
+  customer: {
+    label: "Customer",
+    railColor: "var(--rail-discovery)",
+    cardBg: "var(--card-customer)",
+    cardBgHighlight: "rgba(94, 136, 176, 0.12)",
+    borderColor: "var(--border-subtle)"
+  },
+  agent: {
+    label: "Agent",
+    railColor: "var(--rail-outcome)",
+    cardBg: "var(--card-agent)",
+    cardBgHighlight: "rgba(107, 124, 147, 0.10)",
+    borderColor: "var(--border-subtle)"
+  },
+  assistant: {
+    label: "AI Assistant",
+    railColor: "var(--rail-purple)",
+    cardBg: "var(--card-assistant)",
+    cardBgHighlight: "rgba(155, 122, 168, 0.10)",
+    borderColor: "var(--border-subtle)"
+  },
+  system: {
+    label: "System",
+    railColor: "var(--text-faint)",
+    cardBg: "transparent",
+    cardBgHighlight: "transparent",
+    borderColor: "transparent"
+  }
+}, L = "conversation-turn-keyframes";
+function F() {
+  if (typeof document > "u" || document.getElementById(L))
+    return;
+  const i = document.createElement("style");
+  i.id = L, i.textContent = `
+    @keyframes turn-playing-pulse {
+      0%, 100% { opacity: 0.4; }
+      50% { opacity: 0.9; }
+    }
+  `, document.head.appendChild(i);
+}
+function I({
+  role: i = "agent",
+  text: l,
+  actorLabel: s,
+  actorRailColor: v,
+  actionKicker: m,
+  toolBadges: g,
+  streaming: c = !1,
+  meta: b,
+  timeRange: x,
+  isHighlighted: h = !1,
+  highlightRailColor: r,
+  observations: n,
+  onObservationClick: y,
+  children: R
+}) {
+  E(() => {
+    F();
+  }, []);
+  const d = H[i] || H.agent, w = s || d.label, C = v || d.railColor, T = h || c;
+  return i === "system" ? /* @__PURE__ */ t(
+    "div",
+    {
+      style: {
+        textAlign: "center",
+        padding: "6px 0",
+        flexShrink: 0,
+        fontSize: "var(--text-sm, 11px)",
+        color: "var(--text-faint, rgba(30,33,37,0.36))",
+        fontWeight: 500,
+        letterSpacing: "0.02em"
+      },
+      children: l
+    }
+  ) : /* @__PURE__ */ f(
+    "div",
+    {
+      style: {
+        position: "relative",
+        padding: "10px 14px 10px 18px",
+        borderRadius: 10,
+        overflow: "hidden",
+        flexShrink: 0,
+        background: T ? d.cardBgHighlight : d.cardBg,
+        border: `1px solid ${c ? C : d.borderColor}`,
+        boxShadow: c ? `0 0 8px ${d.cardBgHighlight}` : "none",
+        transition: "background 0.2s, border-color 0.2s, box-shadow 0.2s"
+      },
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: "var(--rail-width-thin, 4px)",
+              backgroundColor: C,
+              borderRadius: "10px 0 0 10px"
+            }
+          }
+        ),
+        /* @__PURE__ */ f(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+              gap: 8,
+              marginBottom: 4
+            },
+            children: [
+              /* @__PURE__ */ f("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+                m ? /* @__PURE__ */ t(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "var(--text-xs-plus, 10.5px)",
+                      fontWeight: 650,
+                      textTransform: "uppercase",
+                      letterSpacing: "var(--tracking-label, 0.16em)",
+                      color: C
+                    },
+                    children: m
+                  }
+                ) : null,
+                /* @__PURE__ */ t(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "var(--text-xs-plus, 10.5px)",
+                      fontWeight: 650,
+                      textTransform: "uppercase",
+                      letterSpacing: "var(--tracking-label, 0.16em)",
+                      color: "var(--text-faint, rgba(30,33,37,0.36))"
+                    },
+                    children: w
+                  }
+                )
+              ] }),
+              g && g.length > 0 ? /* @__PURE__ */ t("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, flexShrink: 0, justifyContent: "flex-end" }, children: g.map((e, a) => {
+                const o = e.pending, p = !o && e.success === !1;
+                return /* @__PURE__ */ f(
+                  "span",
+                  {
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 5,
+                      fontSize: "var(--text-xs, 10px)",
+                      padding: "2px 8px 2px 6px",
+                      borderRadius: 999,
+                      background: "var(--paper, rgba(255,255,255,0.78))",
+                      border: "1px solid var(--border-subtle, rgba(52,58,64,0.08))",
+                      color: "var(--text-faint, rgba(30,33,37,0.36))",
+                      fontWeight: 500,
+                      fontFamily: "var(--font-fira-code, var(--font-mono, monospace))",
+                      letterSpacing: "0.01em",
+                      lineHeight: 1.4,
+                      whiteSpace: "nowrap"
+                    },
+                    children: [
+                      /* @__PURE__ */ t(
+                        "span",
+                        {
+                          style: {
+                            width: 5,
+                            height: 5,
+                            borderRadius: "50%",
+                            backgroundColor: o ? "var(--rail-discovery, #5E88B0)" : p ? "var(--rail-compliance, #C98A5A)" : "var(--text-xfaint, rgba(30,33,37,0.28))",
+                            flexShrink: 0
+                          }
+                        }
+                      ),
+                      e.name
+                    ]
+                  },
+                  a
+                );
+              }) }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ f(
+          "div",
+          {
+            style: {
+              fontSize: "var(--text-md, 13px)",
+              lineHeight: "var(--leading-normal, 1.5)",
+              color: c ? "var(--text-strong, rgba(30,33,37,0.92))" : "var(--text-base, rgba(30,33,37,0.78))",
+              fontWeight: c ? 550 : 400
+            },
+            children: [
+              l,
+              c ? /* @__PURE__ */ t(
+                "span",
+                {
+                  style: {
+                    display: "inline-block",
+                    width: 6,
+                    height: 14,
+                    background: C,
+                    marginLeft: 2,
+                    borderRadius: 1,
+                    animation: "cursorBlink 0.8s ease-in-out infinite",
+                    verticalAlign: "text-bottom"
+                  }
+                }
+              ) : null
+            ]
+          }
+        ),
+        x || R || n && n.length > 0 ? /* @__PURE__ */ f("div", { style: { marginTop: 6, display: "flex", alignItems: "center", gap: 6 }, children: [
+          R,
+          x ? /* @__PURE__ */ t(
+            "span",
+            {
+              style: {
+                fontSize: "var(--text-sm, 11px)",
+                padding: "2px 8px",
+                borderRadius: 999,
+                border: "1px solid var(--border, rgba(52,58,64,0.12))",
+                background: "var(--timestamp-bg, rgba(255,255,255,0.70))",
+                color: "var(--text-muted, rgba(30,33,37,0.56))",
+                fontFamily: "var(--font-mono, monospace)"
+              },
+              children: x
+            }
+          ) : null,
+          n && n.length > 0 ? /* @__PURE__ */ t("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginLeft: "auto" }, children: n.map((e, a) => /* @__PURE__ */ f(
+            "span",
+            {
+              onClick: e.onClick || (y ? () => y(e) : void 0),
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 4,
+                fontSize: "var(--text-xs, 10px)",
+                padding: "2px 8px",
+                borderRadius: 999,
+                background: `color-mix(in srgb, ${e.color || "var(--state-present)"} 12%, transparent)`,
+                border: `1px solid color-mix(in srgb, ${e.color || "var(--state-present)"} 25%, transparent)`,
+                color: e.color || "var(--state-present)",
+                fontWeight: 550,
+                lineHeight: 1.4,
+                whiteSpace: "nowrap",
+                cursor: e.onClick || y ? "pointer" : "default",
+                transition: "background 0.15s"
+              },
+              title: e.reason || e.label,
+              children: [
+                /* @__PURE__ */ t("span", { style: {
+                  width: 4,
+                  height: 4,
+                  borderRadius: "50%",
+                  backgroundColor: e.color || "var(--state-present)",
+                  flexShrink: 0,
+                  opacity: 0.7
+                } }),
+                e.label
+              ]
+            },
+            a
+          )) }) : null
+        ] }) : null,
+        b ? /* @__PURE__ */ t(
+          "div",
+          {
+            style: {
+              marginTop: 6,
+              fontSize: "var(--text-xs-plus, 10.5px)",
+              color: "var(--text-faint, rgba(30,33,37,0.36))",
+              fontFamily: "var(--font-mono, monospace)"
+            },
+            children: b
+          }
+        ) : null,
+        T && r ? /* @__PURE__ */ t(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              right: 8,
+              top: 8,
+              bottom: 8,
+              width: 6,
+              borderRadius: 4,
+              backgroundColor: r,
+              opacity: 0.7,
+              animation: "turn-playing-pulse 1.5s ease-in-out infinite"
+            }
+          }
+        ) : null
+      ]
+    }
+  );
+}
+const $ = (i) => {
+  const [l, s] = i.split("–").map((v) => {
+    const [m, g] = v.split(":").map(Number);
+    return m * 60 + g;
+  });
+  return { start: l, end: s };
+}, j = (i) => ({
+  customer: "customer",
+  agent: "agent",
+  third_party: "agent",
+  system: "system",
+  assistant: "assistant"
+})[i] || "agent";
+function M({
+  turns: i,
+  audioUrl: l,
+  activeTurnIndex: s = -1,
+  autoScrollActiveTurn: v = !1,
+  isExternalPlaying: m = !1,
+  onTurnPlayPause: g
+}) {
+  const [c, b] = A(null), [x, h] = A(!1), r = B(null), n = B(null), y = B([]), R = B(null), d = B(-1), w = typeof g == "function", C = m !== void 0;
+  E(() => {
+    if (l)
+      return r.current = new Audio(l), r.current.preload = "auto", () => {
+        r.current && (r.current.pause(), r.current = null);
+      };
+  }, [l]), E(() => () => {
+    r.current && (r.current.pause(), n.current && r.current.removeEventListener("timeupdate", n.current));
+  }, []), E(() => {
+    if (!v || s < 0)
+      return;
+    const e = R.current, a = y.current[s];
+    if (!a || !e)
+      return;
+    const o = e.getBoundingClientRect(), p = a.getBoundingClientRect(), u = 12, S = p.top >= o.top + u && p.bottom <= o.bottom - 8;
+    if (!(d.current === s) || !S) {
+      const P = p.top - o.top + e.scrollTop;
+      e.scrollTop = Math.max(P - u, 0);
+    }
+    d.current = s;
+  }, [s, v]);
+  const T = (e, a) => {
+    if (w) {
+      g(i[a], a);
+      return;
+    }
+    if (c === a && x)
+      r.current && (r.current.pause(), n.current && (r.current.removeEventListener("timeupdate", n.current), n.current = null)), h(!1);
+    else {
+      const o = c;
+      if (b(a), l && r.current) {
+        const { start: p, end: u } = $(e);
+        o !== null && o !== a && (r.current.pause(), n.current && (r.current.removeEventListener("timeupdate", n.current), n.current = null));
+        const S = () => {
+          if (r.current) {
+            if (r.current.currentTime = p, u) {
+              const k = () => {
+                r.current && r.current.currentTime >= u && (r.current.pause(), h(!1), b(null), n.current && (r.current.removeEventListener("timeupdate", n.current), n.current = null));
+              };
+              n.current = k, r.current.addEventListener("timeupdate", k);
+            }
+            r.current.play().then(() => h(!0)).catch((k) => {
+              k && k.name === "AbortError" || (h(!1), b(null));
+            });
+          }
+        };
+        r.current.readyState >= 2 ? S() : (r.current.addEventListener("loadedmetadata", S, { once: !0 }), r.current.load());
+      } else
+        h(!0);
+    }
+  };
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      ref: R,
+      className: "custom-thin-scrollbar-library",
+      style: {
+        maxHeight: 560,
+        overflowY: "auto",
+        scrollBehavior: "smooth",
+        border: "1px solid var(--border, rgba(52,58,64,0.12))",
+        // borderRadius: "var(--radius-lg, 12px)",
+        borderRadius: "12px 0px 0px 12px",
+        background: "var(--paper-elevated, rgba(255,255,255,0.82))",
+        padding: 16
+      },
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            style: {
+              fontSize: "var(--text-xs-plus, 10.5px)",
+              fontWeight: 650,
+              textTransform: "uppercase",
+              letterSpacing: "var(--tracking-label, 0.16em)",
+              color: "var(--text-faint, rgba(30,33,37,0.36))",
+              marginBottom: 12
+            },
+            children: "Transcript"
+          }
+        ),
+        /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: i.map((e, a) => {
+          const o = w || C ? !!m && s === a : c === a && x, p = !!e.isHighlighted || o, u = j(e.actorType);
+          return /* @__PURE__ */ t(
+            "div",
+            {
+              ref: (S) => {
+                y.current[a] = S;
+              },
+              children: /* @__PURE__ */ t(
+                I,
+                {
+                  role: u,
+                  text: e.text,
+                  actorLabel: e.actor,
+                  actorRailColor: e.actorColor,
+                  timeRange: e.timeRange,
+                  isHighlighted: p,
+                  highlightRailColor: o ? e.highlightColor || (u === "agent" ? "var(--rail-outcome)" : "var(--rail-discovery)") : e.highlightColor,
+                  toolBadges: e.toolBadges,
+                  observations: e.observations,
+                  onObservationClick: e.onObservationClick,
+                  children: e.timeRange ? /* @__PURE__ */ t(
+                    "button",
+                    {
+                      onClick: () => T(e.timeRange, a),
+                      style: {
+                        width: 24,
+                        height: 24,
+                        borderRadius: "50%",
+                        border: "1px solid var(--border, rgba(52,58,64,0.12))",
+                        background: o ? "var(--rail-discovery, #5E88B0)" : "var(--paper, rgba(255,255,255,0.78))",
+                        display: "inline-flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        cursor: "pointer",
+                        padding: 0,
+                        transition: "all 0.15s"
+                      },
+                      "aria-label": o ? `Pause segment ${e.timeRange}` : `Play segment ${e.timeRange}`,
+                      children: o ? /* @__PURE__ */ t(
+                        W,
+                        {
+                          style: { width: 12, height: 12, color: "var(--paper, #fff)", fill: "var(--paper, #fff)" },
+                          strokeWidth: 0
+                        }
+                      ) : /* @__PURE__ */ t(
+                        z,
+                        {
+                          style: { width: 12, height: 12, color: "var(--text-muted, rgba(30,33,37,0.56))", fill: "var(--text-muted, rgba(30,33,37,0.56))", marginLeft: 1 },
+                          strokeWidth: 0
+                        }
+                      )
+                    }
+                  ) : null
+                }
+              )
+            },
+            a
+          );
+        }) })
+      ]
+    }
+  );
+}
+export {
+  I as C,
+  M as T
+};
+//# sourceMappingURL=TranscriptCard.es.js.map

package/dist/TranscriptCard.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TranscriptCard.es.js","sources":["../src/components/media/ConversationTurn.jsx","../src/components/media/TranscriptCard.jsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect } from \"react\";\n\n/**\n * Actor configuration — rail color + subtle card tint per role.\n * Colors reference CSS custom properties from the Chordia design system.\n */\nconst ACTOR_DEFAULTS = {\n  customer: {\n    label: \"Customer\",\n    railColor: \"var(--rail-discovery)\",\n    cardBg: \"var(--card-customer)\",\n    cardBgHighlight: \"rgba(94, 136, 176, 0.12)\",\n    borderColor: \"var(--border-subtle)\",\n  },\n  agent: {\n    label: \"Agent\",\n    railColor: \"var(--rail-outcome)\",\n    cardBg: \"var(--card-agent)\",\n    cardBgHighlight: \"rgba(107, 124, 147, 0.10)\",\n    borderColor: \"var(--border-subtle)\",\n  },\n  assistant: {\n    label: \"AI Assistant\",\n    railColor: \"var(--rail-purple)\",\n    cardBg: \"var(--card-assistant)\",\n    cardBgHighlight: \"rgba(155, 122, 168, 0.10)\",\n    borderColor: \"var(--border-subtle)\",\n  },\n  system: {\n    label: \"System\",\n    railColor: \"var(--text-faint)\",\n    cardBg: \"transparent\",\n    cardBgHighlight: \"transparent\",\n    borderColor: \"transparent\",\n  },\n};\n\n/**\n * ConversationTurn Component\n * Displays a single turn in a live conversation stream.\n * Uses the TranscriptCard design language: left actor rail, uppercase label,\n * subtle per-actor card tinting.\n *\n * @param {Object} props\n * @param {string} props.role - \"customer\" | \"agent\" | \"assistant\" | \"system\"\n * @param {string} props.text - Message content\n * @param {string} [props.actorLabel] - Override the default actor label\n * @param {string} [props.actorRailColor] - Override the rail color for this turn\n * @param {string} [props.actionKicker] - NBA action label above message\n * @param {Array}  [props.toolBadges] - [{name, success, pending}] tool call results\n * @param {boolean} [props.streaming] - Whether this message is actively streaming\n * @param {string} [props.meta] - Timing info, turn number, etc.\n * @param {string} [props.timeRange] - Time range label (e.g., \"00:03–00:07\")\n * @param {boolean} [props.isHighlighted] - Extra emphasis on this turn\n * @param {string} [props.highlightRailColor] - Color for the right highlight rail (when highlighted)\n * @param {React.ReactNode} [props.children] - Additional content below the message text\n */\nconst KEYFRAMES_ID = \"conversation-turn-keyframes\";\nfunction ensureKeyframes() {\n  if (typeof document === \"undefined\") return;\n  if (document.getElementById(KEYFRAMES_ID)) return;\n  const style = document.createElement(\"style\");\n  style.id = KEYFRAMES_ID;\n  style.textContent = `\n    @keyframes turn-playing-pulse {\n      0%, 100% { opacity: 0.4; }\n      50% { opacity: 0.9; }\n    }\n  `;\n  document.head.appendChild(style);\n}\n\nexport default function ConversationTurn({\n  role = \"agent\",\n  text,\n  actorLabel,\n  actorRailColor,\n  actionKicker,\n  toolBadges,\n  streaming = false,\n  meta,\n  timeRange,\n  isHighlighted = false,\n  highlightRailColor,\n  observations,\n  onObservationClick,\n  children,\n}) {\n  useEffect(() => { ensureKeyframes(); }, []);\n  const actor = ACTOR_DEFAULTS[role] || ACTOR_DEFAULTS.agent;\n  const label = actorLabel || actor.label;\n  const railColor = actorRailColor || actor.railColor;\n  const highlighted = isHighlighted || streaming;\n\n  // System messages: minimal centered text, no card\n  if (role === \"system\") {\n    return (\n      <div\n        style={{\n          textAlign: \"center\",\n          padding: \"6px 0\",\n          flexShrink: 0,\n          fontSize: \"var(--text-sm, 11px)\",\n          color: \"var(--text-faint, rgba(30,33,37,0.36))\",\n          fontWeight: 500,\n          letterSpacing: \"0.02em\",\n        }}\n      >\n        {text}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        padding: \"10px 14px 10px 18px\",\n        borderRadius: 10,\n        overflow: \"hidden\",\n        flexShrink: 0,\n        background: highlighted ? actor.cardBgHighlight : actor.cardBg,\n        border: `1px solid ${streaming ? railColor : actor.borderColor}`,\n        boxShadow: streaming\n          ? `0 0 8px ${actor.cardBgHighlight}`\n          : \"none\",\n        transition: \"background 0.2s, border-color 0.2s, box-shadow 0.2s\",\n      }}\n    >\n      {/* Left actor rail */}\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          top: 0,\n          bottom: 0,\n          width: \"var(--rail-width-thin, 4px)\",\n          backgroundColor: railColor,\n          borderRadius: \"10px 0 0 10px\",\n        }}\n      />\n\n      {/* Header row: actor label left, tool badges right */}\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"flex-start\",\n          justifyContent: \"space-between\",\n          gap: 8,\n          marginBottom: 4,\n        }}\n      >\n        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 2 }}>\n          {/* Action kicker (NBA label) */}\n          {actionKicker ? (\n            <div\n              style={{\n                fontSize: \"var(--text-xs-plus, 10.5px)\",\n                fontWeight: 650,\n                textTransform: \"uppercase\",\n                letterSpacing: \"var(--tracking-label, 0.16em)\",\n                color: railColor,\n              }}\n            >\n              {actionKicker}\n            </div>\n          ) : null}\n\n          {/* Actor label */}\n          <div\n            style={{\n              fontSize: \"var(--text-xs-plus, 10.5px)\",\n              fontWeight: 650,\n              textTransform: \"uppercase\",\n              letterSpacing: \"var(--tracking-label, 0.16em)\",\n              color: \"var(--text-faint, rgba(30,33,37,0.36))\",\n            }}\n          >\n            {label}\n          </div>\n        </div>\n\n        {/* Tool badges — top right pills, uniform neutral with status dot */}\n        {toolBadges && toolBadges.length > 0 ? (\n          <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 4, flexShrink: 0, justifyContent: \"flex-end\" }}>\n            {toolBadges.map((t, i) => {\n              const isPending = t.pending;\n              const isError = !isPending && t.success === false;\n              // Dot color only — rail colors for categorization, not judgment\n              const dotColor = isPending\n                ? \"var(--rail-discovery, #5E88B0)\"\n                : isError\n                ? \"var(--rail-compliance, #C98A5A)\"\n                : \"var(--text-xfaint, rgba(30,33,37,0.28))\";\n\n              return (\n                <span\n                  key={i}\n                  style={{\n                    display: \"inline-flex\",\n                    alignItems: \"center\",\n                    gap: 5,\n                    fontSize: \"var(--text-xs, 10px)\",\n                    padding: \"2px 8px 2px 6px\",\n                    borderRadius: 999,\n                    background: \"var(--paper, rgba(255,255,255,0.78))\",\n                    border: \"1px solid var(--border-subtle, rgba(52,58,64,0.08))\",\n                    color: \"var(--text-faint, rgba(30,33,37,0.36))\",\n                    fontWeight: 500,\n                    fontFamily: \"var(--font-fira-code, var(--font-mono, monospace))\",\n                    letterSpacing: \"0.01em\",\n                    lineHeight: 1.4,\n                    whiteSpace: \"nowrap\",\n                  }}\n                >\n                  <span\n                    style={{\n                      width: 5,\n                      height: 5,\n                      borderRadius: \"50%\",\n                      backgroundColor: dotColor,\n                      flexShrink: 0,\n                    }}\n                  />\n                  {t.name}\n                </span>\n              );\n            })}\n          </div>\n        ) : null}\n      </div>\n\n      {/* Message text */}\n      <div\n        style={{\n          fontSize: \"var(--text-md, 13px)\",\n          lineHeight: \"var(--leading-normal, 1.5)\",\n          color: streaming\n            ? \"var(--text-strong, rgba(30,33,37,0.92))\"\n            : \"var(--text-base, rgba(30,33,37,0.78))\",\n          fontWeight: streaming ? 550 : 400,\n        }}\n      >\n        {text}\n        {streaming ? (\n          <span\n            style={{\n              display: \"inline-block\",\n              width: 6,\n              height: 14,\n              background: railColor,\n              marginLeft: 2,\n              borderRadius: 1,\n              animation: \"cursorBlink 0.8s ease-in-out infinite\",\n              verticalAlign: \"text-bottom\",\n            }}\n          />\n        ) : null}\n      </div>\n\n      {/* Time range + play button + observation pills — single row */}\n      {timeRange || children || (observations && observations.length > 0) ? (\n        <div style={{ marginTop: 6, display: \"flex\", alignItems: \"center\", gap: 6 }}>\n          {children}\n          {timeRange ? (\n            <span\n              style={{\n                fontSize: \"var(--text-sm, 11px)\",\n                padding: \"2px 8px\",\n                borderRadius: 999,\n                border: \"1px solid var(--border, rgba(52,58,64,0.12))\",\n                background: \"var(--timestamp-bg, rgba(255,255,255,0.70))\",\n                color: \"var(--text-muted, rgba(30,33,37,0.56))\",\n                fontFamily: \"var(--font-mono, monospace)\",\n              }}\n            >\n              {timeRange}\n            </span>\n          ) : null}\n          {observations && observations.length > 0 ? (\n            <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 4, marginLeft: \"auto\" }}>\n              {observations.map((obs, i) => (\n                <span\n                  key={i}\n                  onClick={obs.onClick || (onObservationClick ? () => onObservationClick(obs) : undefined)}\n                  style={{\n                    display: \"inline-flex\",\n                    alignItems: \"center\",\n                    gap: 4,\n                    fontSize: \"var(--text-xs, 10px)\",\n                    padding: \"2px 8px\",\n                    borderRadius: 999,\n                    background: `color-mix(in srgb, ${obs.color || \"var(--state-present)\"} 12%, transparent)`,\n                    border: `1px solid color-mix(in srgb, ${obs.color || \"var(--state-present)\"} 25%, transparent)`,\n                    color: obs.color || \"var(--state-present)\",\n                    fontWeight: 550,\n                    lineHeight: 1.4,\n                    whiteSpace: \"nowrap\",\n                    cursor: obs.onClick || onObservationClick ? \"pointer\" : \"default\",\n                    transition: \"background 0.15s\",\n                  }}\n                  title={obs.reason || obs.label}\n                >\n                  <span style={{\n                    width: 4, height: 4, borderRadius: \"50%\",\n                    backgroundColor: obs.color || \"var(--state-present)\",\n                    flexShrink: 0, opacity: 0.7,\n                  }} />\n                  {obs.label}\n                </span>\n              ))}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n\n      {/* Meta / timestamp */}\n      {meta ? (\n        <div\n          style={{\n            marginTop: 6,\n            fontSize: \"var(--text-xs-plus, 10.5px)\",\n            color: \"var(--text-faint, rgba(30,33,37,0.36))\",\n            fontFamily: \"var(--font-mono, monospace)\",\n          }}\n        >\n          {meta}\n        </div>\n      ) : null}\n\n      {/* Right highlight rail (used by TranscriptCard for active/highlighted turns) */}\n      {highlighted && highlightRailColor ? (\n        <div\n          style={{\n            position: \"absolute\",\n            right: 8,\n            top: 8,\n            bottom: 8,\n            width: 6,\n            borderRadius: 4,\n            backgroundColor: highlightRailColor,\n            opacity: 0.7,\n            animation: \"turn-playing-pulse 1.5s ease-in-out infinite\",\n          }}\n        />\n      ) : null}\n    </div>\n  );\n}\n","\"use client\";\n\nimport React, { useState, useRef, useEffect } from \"react\";\nimport { Play, Pause } from \"lucide-react\";\nimport ConversationTurn from \"./ConversationTurn\";\n\n/**\n * Helper function to parse time range string (e.g., \"00:03–00:07\") to seconds\n */\nconst parseTimeRange = (timeRange) => {\n  const [start, end] = timeRange.split(\"–\").map((time) => {\n    const [minutes, seconds] = time.split(\":\").map(Number);\n    return minutes * 60 + seconds;\n  });\n  return { start, end };\n};\n\n/**\n * Map TranscriptCard actorType values to ConversationTurn role values.\n * ConversationTurn uses: \"customer\" | \"agent\" | \"assistant\" | \"system\"\n * TranscriptCard uses: \"customer\" | \"agent\" | \"third_party\" | \"system\"\n */\nconst mapActorTypeToRole = (actorType) => {\n  const map = {\n    customer: \"customer\",\n    agent: \"agent\",\n    third_party: \"agent\",\n    system: \"system\",\n    assistant: \"assistant\",\n  };\n  return map[actorType] || \"agent\";\n};\n\n/**\n * TranscriptCard Component\n * Displays a complete transcript with multiple turns, audio playback,\n * highlighting, and per-turn play buttons. Composes ConversationTurn\n * for individual turn rendering.\n *\n * @param {Object} props - Component props\n * @param {Array} props.turns - Array of transcript turn objects\n * @param {string} props.turns[].actor - Display name (e.g., \"Agent\", \"Customer\")\n * @param {string} props.turns[].actorType - \"agent\" | \"customer\" | \"third_party\" | \"system\" | \"assistant\"\n * @param {string} [props.turns[].actorColor] - Override rail color for this turn\n * @param {string} props.turns[].text - Transcript text\n * @param {string} [props.turns[].timeRange] - Time range (e.g., \"00:03–00:07\")\n * @param {boolean} [props.turns[].isHighlighted] - Whether this turn is highlighted\n * @param {string} [props.turns[].highlightColor] - Color for the right highlight rail\n * @param {Array} [props.turns[].toolBadges] - Tool badge data [{name, success, pending}]\n * @param {string} [props.audioUrl] - Audio URL for segment playback\n * @param {number} [props.activeTurnIndex=-1] - Index of the externally active turn\n * @param {boolean} [props.autoScrollActiveTurn=false] - Auto-scroll to active turn\n * @param {boolean} [props.isExternalPlaying=false] - External playback state\n * @param {Function} [props.onTurnPlayPause] - External playback handler (turn, index) => void\n */\nexport default function TranscriptCard({\n  turns,\n  audioUrl,\n  activeTurnIndex = -1,\n  autoScrollActiveTurn = false,\n  isExternalPlaying = false,\n  onTurnPlayPause,\n}) {\n  const [playingSegment, setPlayingSegment] = useState(null);\n  const [isPlaying, setIsPlaying] = useState(false);\n  const audioRef = useRef(null);\n  const endTimeListenerRef = useRef(null);\n  const turnRefs = useRef([]);\n  const containerRef = useRef(null);\n  const lastAutoScrolledIndexRef = useRef(-1);\n  const useExternalPlaybackControl = typeof onTurnPlayPause === \"function\";\n  const hasExternalPlaybackState = isExternalPlaying !== undefined;\n\n  // Initialize audio element\n  useEffect(() => {\n    if (audioUrl) {\n      audioRef.current = new Audio(audioUrl);\n      audioRef.current.preload = \"auto\";\n      return () => {\n        if (audioRef.current) {\n          audioRef.current.pause();\n          audioRef.current = null;\n        }\n      };\n    }\n  }, [audioUrl]);\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      if (audioRef.current) {\n        audioRef.current.pause();\n        if (endTimeListenerRef.current) {\n          audioRef.current.removeEventListener(\"timeupdate\", endTimeListenerRef.current);\n        }\n      }\n    };\n  }, []);\n\n  // Auto-scroll to active turn\n  useEffect(() => {\n    if (!autoScrollActiveTurn || activeTurnIndex < 0) return;\n    const container = containerRef.current;\n    const activeNode = turnRefs.current[activeTurnIndex];\n    if (!activeNode || !container) return;\n\n    const containerRect = container.getBoundingClientRect();\n    const activeRect = activeNode.getBoundingClientRect();\n    const topPadding = 12;\n    const isFullyVisible =\n      activeRect.top >= containerRect.top + topPadding &&\n      activeRect.bottom <= containerRect.bottom - 8;\n    const didScrollForThisTurn = lastAutoScrolledIndexRef.current === activeTurnIndex;\n\n    if (!didScrollForThisTurn || !isFullyVisible) {\n      const activeTopInContainer = activeRect.top - containerRect.top + container.scrollTop;\n      container.scrollTop = Math.max(activeTopInContainer - topPadding, 0);\n    }\n    lastAutoScrolledIndexRef.current = activeTurnIndex;\n  }, [activeTurnIndex, autoScrollActiveTurn]);\n\n  const handlePlayPause = (timeRange, index) => {\n    if (useExternalPlaybackControl) {\n      onTurnPlayPause(turns[index], index);\n      return;\n    }\n\n    if (playingSegment === index && isPlaying) {\n      // Pause current segment\n      if (audioRef.current) {\n        audioRef.current.pause();\n        if (endTimeListenerRef.current) {\n          audioRef.current.removeEventListener(\"timeupdate\", endTimeListenerRef.current);\n          endTimeListenerRef.current = null;\n        }\n      }\n      setIsPlaying(false);\n    } else {\n      // Start/switch segment\n      const previousSegment = playingSegment;\n      setPlayingSegment(index);\n\n      if (audioUrl && audioRef.current) {\n        const { start, end } = parseTimeRange(timeRange);\n\n        if (previousSegment !== null && previousSegment !== index) {\n          audioRef.current.pause();\n          if (endTimeListenerRef.current) {\n            audioRef.current.removeEventListener(\"timeupdate\", endTimeListenerRef.current);\n            endTimeListenerRef.current = null;\n          }\n        }\n\n        const playSegment = () => {\n          if (!audioRef.current) return;\n          audioRef.current.currentTime = start;\n\n          if (end) {\n            const checkEndTime = () => {\n              if (audioRef.current && audioRef.current.currentTime >= end) {\n                audioRef.current.pause();\n                setIsPlaying(false);\n                setPlayingSegment(null);\n                if (endTimeListenerRef.current) {\n                  audioRef.current.removeEventListener(\"timeupdate\", endTimeListenerRef.current);\n                  endTimeListenerRef.current = null;\n                }\n              }\n            };\n            endTimeListenerRef.current = checkEndTime;\n            audioRef.current.addEventListener(\"timeupdate\", checkEndTime);\n          }\n\n          audioRef.current.play()\n            .then(() => setIsPlaying(true))\n            .catch((err) => {\n              // Ignore AbortError which occurs when play() is interrupted by pause()\n              if (err && err.name === \"AbortError\") {\n                return;\n              }\n              setIsPlaying(false);\n              setPlayingSegment(null);\n            });\n        };\n\n        if (audioRef.current.readyState >= 2) {\n          playSegment();\n        } else {\n          audioRef.current.addEventListener(\"loadedmetadata\", playSegment, { once: true });\n          audioRef.current.load();\n        }\n      } else {\n        setIsPlaying(true);\n      }\n    }\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"custom-thin-scrollbar-library\"\n      style={{\n        maxHeight: 560,\n        overflowY: \"auto\",\n        scrollBehavior: \"smooth\",\n        border: \"1px solid var(--border, rgba(52,58,64,0.12))\",\n        // borderRadius: \"var(--radius-lg, 12px)\",\n        borderRadius: \"12px 0px 0px 12px\",\n        background: \"var(--paper-elevated, rgba(255,255,255,0.82))\",\n        padding: 16,\n      }}\n    >\n      {/* Section label */}\n      <div\n        style={{\n          fontSize: \"var(--text-xs-plus, 10.5px)\",\n          fontWeight: 650,\n          textTransform: \"uppercase\",\n          letterSpacing: \"var(--tracking-label, 0.16em)\",\n          color: \"var(--text-faint, rgba(30,33,37,0.36))\",\n          marginBottom: 12,\n        }}\n      >\n        Transcript\n      </div>\n\n      {/* Turns */}\n      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n        {turns.map((turn, index) => {\n          const isTurnPlaying = (useExternalPlaybackControl || hasExternalPlaybackState)\n            ? Boolean(isExternalPlaying) && activeTurnIndex === index\n            : playingSegment === index && isPlaying;\n          const isTurnHighlighted = Boolean(turn.isHighlighted) || isTurnPlaying;\n          const role = mapActorTypeToRole(turn.actorType);\n\n          return (\n            <div\n              key={index}\n              ref={(el) => { turnRefs.current[index] = el; }}\n            >\n              <ConversationTurn\n                role={role}\n                text={turn.text}\n                actorLabel={turn.actor}\n                actorRailColor={turn.actorColor}\n                timeRange={turn.timeRange}\n                isHighlighted={isTurnHighlighted}\n                highlightRailColor={isTurnPlaying \n                  ? (turn.highlightColor || (role === 'agent' ? 'var(--rail-outcome)' : 'var(--rail-discovery)'))\n                  : turn.highlightColor}\n                toolBadges={turn.toolBadges}\n                observations={turn.observations}\n                onObservationClick={turn.onObservationClick}\n              >\n                {/* Play/pause button — rendered inline left of time range */}\n                {turn.timeRange ? (\n                    <button\n                      onClick={() => handlePlayPause(turn.timeRange, index)}\n                      style={{\n                        width: 24,\n                        height: 24,\n                        borderRadius: \"50%\",\n                        border: \"1px solid var(--border, rgba(52,58,64,0.12))\",\n                        background: isTurnPlaying\n                          ? \"var(--rail-discovery, #5E88B0)\"\n                          : \"var(--paper, rgba(255,255,255,0.78))\",\n                        display: \"inline-flex\",\n                        alignItems: \"center\",\n                        justifyContent: \"center\",\n                        cursor: \"pointer\",\n                        padding: 0,\n                        transition: \"all 0.15s\",\n                      }}\n                      aria-label={isTurnPlaying ? `Pause segment ${turn.timeRange}` : `Play segment ${turn.timeRange}`}\n                    >\n                      {isTurnPlaying ? (\n                        <Pause\n                          style={{ width: 12, height: 12, color: \"var(--paper, #fff)\", fill: \"var(--paper, #fff)\" }}\n                          strokeWidth={0}\n                        />\n                      ) : (\n                        <Play\n                          style={{ width: 12, height: 12, color: \"var(--text-muted, rgba(30,33,37,0.56))\", fill: \"var(--text-muted, rgba(30,33,37,0.56))\", marginLeft: 1 }}\n                          strokeWidth={0}\n                        />\n                      )}\n                    </button>\n                ) : null}\n              </ConversationTurn>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"names":["ACTOR_DEFAULTS","KEYFRAMES_ID","ensureKeyframes","style","ConversationTurn","role","text","actorLabel","actorRailColor","actionKicker","toolBadges","streaming","meta","timeRange","isHighlighted","highlightRailColor","observations","onObservationClick","children","useEffect","actor","label","railColor","highlighted","jsx","jsxs","t","i","isPending","isError","obs","parseTimeRange","start","end","time","minutes","seconds","mapActorTypeToRole","actorType","TranscriptCard","turns","audioUrl","activeTurnIndex","autoScrollActiveTurn","isExternalPlaying","onTurnPlayPause","playingSegment","setPlayingSegment","useState","isPlaying","setIsPlaying","audioRef","useRef","endTimeListenerRef","turnRefs","containerRef","lastAutoScrolledIndexRef","useExternalPlaybackControl","hasExternalPlaybackState","container","activeNode","containerRect","activeRect","topPadding","isFullyVisible","activeTopInContainer","handlePlayPause","index","previousSegment","playSegment","checkEndTime","err","turn","isTurnPlaying","isTurnHighlighted","el","Pause","Play"],"mappings":"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"}

package/dist/UpdatedInteractionRecording.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),a=require("react"),s=require("lucide-react"),X=require("./Timeline.cjs.js");function q(v){const l=Math.floor(v/60),b=Math.round(v%60);return`${l}:${b.toString().padStart(2,"0")}`}const de={David:[{start:0,end:.08},{start:.18,end:.22},{start:.38,end:.42},{start:.55,end:.58},{start:.68,end:.72},{start:.82,end:.88},{start:.94,end:1}],Customer:[{start:.1,end:.16},{start:.24,end:.36},{start:.44,end:.52},{start:.6,end:.66},{start:.74,end:.8}]},x=[{speaker:"David",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:"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?"}],ce=a.forwardRef(function({audioUrl:l,timelineSegments:b=[],durationSeconds:g=0,currentTimeSeconds:I=0,timelinePlaying:d=!1,playbackRate:j=1,onSeek:k,onTogglePlay:G,onSeekBack:R,onSeekForward:T,onSetPlaybackRate:W,audioRef:L,transcript:c,highlightedTurns:N=new Set,activeTurnIndex:M,activeDemoIndex:Y=1,turnObservations:K={},setExpandedSignals:S,onTurnPlayPause:V},Z){var O;const F=a.useRef(null),[f,J]=a.useState(null),[Q,U]=a.useState(j||1),[w,y]=a.useState(d),[ee,E]=a.useState(!1),[z,D]=a.useState(Y),H=t=>{for(let n=x.length-1;n>=0;n--){const o=$(x[n].time);if(t>=o)return n}return 0},$=t=>{if(!t)return 0;const n=t.split(":").map(Number);return(n[0]||0)*60+(n[1]||0)},te=[1,1.25,1.5,2],P=!l,C=P?Q:j,ne=P?w:d;a.useImperativeHandle(Z,()=>({seekTo:t=>{h(t),y(!0);const n=H(t);D(n),setTimeout(()=>{var r;const o=(r=F.current)==null?void 0:r.children;o!=null&&o[n]&&o[n].scrollIntoView({behavior:"smooth",block:"nearest"})},50)}}));const h=t=>{const n=Math.max(0,Math.min(t,g||156));k&&k(n),J(n),D(H(n))},oe=()=>{G?G():y(t=>!t)},re=()=>{R?R():h(Math.max(0,(f??0)-10))},ie=()=>{T?T():h(Math.min(g||156,(f??0)+10))},se=t=>{W&&W(t),U(t),E(!1)},ae=t=>{var n;if(z===t&&w)y(!1);else{const o=$((n=x[t])==null?void 0:n.time);D(t),y(!0),h(o)}},le=(t,n)=>{if(t==null)return;const o=r=>{const i=Math.floor(r/6e4),u=Math.floor(r%6e4/1e3);return`${i.toString().padStart(2,"0")}:${u.toString().padStart(2,"0")}`};return`${o(t)}–${n!=null?o(n):o(t)}`},A=(O=c==null?void 0:c.messages)!=null&&O.length?c.messages.map((t,n)=>{var o,r;return{actor:t.actor==="agent"?((o=c.actor_map)==null?void 0:o.agent)||"Agent":((r=c.actor_map)==null?void 0:r.customer)||"Customer",actorType:t.actor==="agent"?"agent":"customer",text:t.text||"",timeRange:le(t.start??t.start_ms,t.end??t.end_ms),isHighlighted:N.has(n),highlightColor:d&&M===n?t.actor==="agent"?"var(--rail-outcome)":"var(--rail-discovery)":void 0,observations:(K[n]||[]).map(i=>({...i,onClick:()=>{S==null||S(u=>new Set([...u,i.signalKey])),setTimeout(()=>{const u=document.getElementById(`signal-${i.signalKey}`);u&&u.scrollIntoView({behavior:"smooth",block:"nearest"})},100)}}))}}):null,m=g||156,B=f??(g>0?I:0),p=m>0?B/m*100:0,_=Math.round(B);return e.jsxs("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:[e.jsxs("div",{style:{width:"100%",display:"flex",flexDirection:"column",gap:16},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:24},children:[e.jsx("span",{style:{fontSize:15,fontWeight:600,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2},children:"Recording"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,flex:1,justifyContent:"center"},children:[e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1.2},children:"10"}),e.jsx("button",{onClick:re,style:{background:"none",border:"none",cursor:"pointer",padding:0,display:"flex",alignItems:"center"},children:e.jsx(s.RotateCcw,{size:20,color:"#808183",strokeWidth:1.5})}),e.jsx("button",{onClick:oe,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:ne?e.jsx(s.Pause,{size:14,color:"#FFF",fill:"#FFF"}):e.jsx(s.Play,{size:14,color:"#FFF",fill:"#FFF",strokeWidth:1.5,style:{marginLeft:2}})}),e.jsx("button",{onClick:ie,style:{background:"none",border:"none",cursor:"pointer",padding:0,display:"flex",alignItems:"center"},children:e.jsx(s.RotateCw,{size:20,color:"#808183",strokeWidth:1.5})}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1.2},children:"10"})]}),e.jsxs("div",{style:{position:"relative"},children:[e.jsxs("button",{onClick:()=>E(t=>!t),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:[C,"x",e.jsx(s.ChevronDown,{size:12,color:"#808183"})]}),ee&&e.jsx("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:te.map(t=>e.jsxs("button",{onClick:()=>se(t),style:{display:"block",width:"100%",padding:"8px 12px",border:"none",background:C===t?"var(--surface-hover, #F3F7F7)":"var(--Grey-White, #FFF)",cursor:"pointer",fontSize:13,fontWeight:C===t?600:400,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",textAlign:"left"},children:[t,"x"]},t))})]})]}),l?e.jsxs(e.Fragment,{children:[e.jsx(X.Timeline,{segments:b,durationSeconds:g,currentTimeSeconds:I,onSeek:k,showControls:!1,hasRecording:!0,timelinePlaying:d,playbackRate:j}),e.jsx("audio",{ref:L,preload:"none",style:{display:"none"},children:e.jsx("source",{src:l,type:"audio/mpeg"})})]}):e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("span",{style:{fontSize:13,fontWeight:600,color:p>0?"var(--Green-Primary, #00925F)":"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",lineHeight:1.2,minWidth:60},children:q(_)}),e.jsxs("div",{onClick:t=>{const n=t.currentTarget.getBoundingClientRect(),o=t.clientX-n.left,i=Math.max(0,Math.min(1,o/n.width))*m;h(i)},style:{flex:1,height:16,position:"relative",display:"flex",alignItems:"center",cursor:"pointer"},children:[e.jsx("div",{style:{position:"absolute",left:0,right:0,height:4,borderRadius:2,background:"var(--rail-surface-2, #E3E1D7)",pointerEvents:"none"}}),e.jsx("div",{style:{position:"absolute",left:0,top:"50%",transform:"translateY(-50%)",width:`${p}%`,height:4,borderRadius:2,background:"var(--Green-Primary, #00925F)",pointerEvents:"none"}}),e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{position:"absolute",left:`${p}%`,top:"50%",transform:"translate(-50%, -50%)",pointerEvents:"none"},children:e.jsx("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.jsxs("div",{style:{position:"relative",paddingBottom:30,cursor:"pointer"},children:[["David","Customer"].map((t,n)=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,height:20,marginBottom:n===0?4:0},children:[e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",fontFamily:"var(--font-sans)",lineHeight:1.2,minWidth:60},children:t}),e.jsxs("div",{onClick:o=>{const r=o.currentTarget.getBoundingClientRect(),i=Math.max(0,Math.min(1,(o.clientX-r.left)/r.width));h(i*m)},style:{flex:1,height:6,position:"relative",borderRadius:3,cursor:"pointer"},children:[e.jsx("div",{style:{position:"absolute",left:0,right:0,top:"50%",transform:"translateY(-50%)",height:4,borderRadius:2,background:"var(--rail-surface-2, #E3E1D7)"}}),de[t].map((o,r)=>e.jsx("div",{style:{position:"absolute",left:`${o.start*100}%`,width:`${(o.end-o.start)*100}%`,top:0,bottom:0,borderRadius:3,background:t==="David"?"var(--Grey-Strong, #2E3236)":"var(--Grey-Muted, #808183)"}},r))]})]},t)),e.jsxs("div",{style:{position:"absolute",left:68,right:0,top:0,bottom:0,pointerEvents:"none"},children:[e.jsx("div",{style:{position:"absolute",left:`${p}%`,top:0,height:44,transform:"translateX(-50%)",borderLeft:"1.5px dashed var(--Grey-Muted, #808183)",opacity:.5}}),e.jsx("div",{style:{position:"absolute",left:`${p}%`,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:q(_)})]})]})]})]}),e.jsxs("div",{style:{width:"100%",display:"flex",flexDirection:"column",gap:16},children:[e.jsx("div",{style:{borderBottom:"1px solid var(--Grey-absent, #D9D9D9)",paddingBottom:16},children:e.jsx("span",{style:{fontSize:14,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2},children:"Transcript"})}),A?e.jsx("div",{id:"transcript-container",ref:F,style:{maxHeight:600,overflowY:"auto"},children:e.jsx(X.TranscriptCard,{turns:A,audioUrl:l,activeTurnIndex:M,autoScrollActiveTurn:d,isExternalPlaying:d,onTurnPlayPause:V})}):e.jsx("div",{ref:F,style:{display:"flex",flexDirection:"column",maxHeight:600,overflowY:"auto"},children:x.map((t,n)=>{const o=n===z&&w,r=t.type==="customer";return e.jsxs("div",{style:{display:"flex",padding:16,flexDirection:"column",alignItems:"flex-start",gap:16,alignSelf:"stretch",borderTop:n>0?"1px solid var(--Grey-absent, #D9D9D9)":"none",background:o?"var(--surface-hover, #F3F7F7)":"var(--Grey-White, #FFF)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",gap:8},children:[e.jsx("span",{style:{fontSize:14,fontWeight:600,lineHeight:1.2,color:r?"var(--Grey-Strong, #2E3236)":"var(--Grey-Muted, #808183)"},children:t.speaker}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[o&&e.jsxs(e.Fragment,{children:[e.jsx(s.AudioLines,{size:12,color:"#2E3236"}),e.jsx(s.AudioLines,{size:12,color:"#2E3236"})]}),e.jsx("span",{style:{fontSize:13,fontWeight:400,lineHeight:1.2,color:"var(--Grey-Muted, #808183)"},children:t.time})]})]}),e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:8,width:"100%"},children:[e.jsx("button",{onClick:()=>ae(n),style:{background:"none",border:"none",cursor:"pointer",padding:0,flexShrink:0,display:"flex"},children:o?e.jsx(s.PauseCircle,{size:17,color:"#2E3236",strokeWidth:1.5}):e.jsx(s.PlayCircle,{size:17,color:"#808183",strokeWidth:1})}),e.jsx("p",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2,margin:0,flex:1},children:t.text})]})]},n)})})]})]})});exports.UpdatedInteractionRecording=ce;
+"use strict";const t=require("react/jsx-runtime"),r=require("react"),c=require("lucide-react"),we=require("./Timeline.cjs.js");function te(h){const l=Math.floor(h/60),I=Math.round(h%60);return`${l}:${I.toString().padStart(2,"0")}`}const Re={Agent:[{start:0,end:.08},{start:.18,end:.22},{start:.38,end:.42},{start:.55,end:.58},{start:.68,end:.72},{start:.82,end:.88},{start:.94,end:1}],Customer:[{start:.1,end:.16},{start:.24,end:.36},{start:.44,end:.52},{start:.6,end:.66},{start:.74,end:.8}]},R=[{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?"}],Ie=[1,1.25,1.5,2];function ne(h){if(!h)return 0;const l=h.split(":").map(Number);return(l[0]||0)*60+(l[1]||0)}const Ce=r.forwardRef(function({audioUrl:l,timelineSegments:I=[],durationSeconds:k=0,currentTimeSeconds:z,timelinePlaying:H,playbackRate:A,onSeek:C,onTogglePlay:P,onSeekBack:$,onSeekForward:B,onSetPlaybackRate:L,audioRef:_,agentName:ie="Agent",customerName:oe="Customer",transcript:g,highlightedTurns:re=new Set,activeTurnIndex:q,activeDemoIndex:se=1,turnObservations:ae={},setExpandedSignals:D,onTurnPlayPause:X},le){var ee;const N=r.useRef(null),d=r.useRef(null),x=r.useRef(null),[Y,f]=r.useState(!1),[T,K]=r.useState(0),[ce,de]=r.useState(0),[ue,he]=r.useState(1),[S,ge]=r.useState(null),[fe,pe]=r.useState(1),[ye,F]=r.useState(!1),[me,V]=r.useState(!1),[Z,E]=r.useState(se),s=!!_,v=!l,a=l&&!s,b=v?ye:s?H??!1:Y,xe=v?S??0:s?z??0:T,G=v?fe:s?A??1:ue,W=v?k||156:s?k:ce||k||0,M=r.useCallback(()=>{const e=()=>{const i=d.current;i&&K(i.currentTime),x.current=requestAnimationFrame(e)};x.current=requestAnimationFrame(e)},[]),p=r.useCallback(()=>{x.current&&(cancelAnimationFrame(x.current),x.current=null)},[]);r.useEffect(()=>()=>p(),[p]),r.useEffect(()=>{if(!a)return;const e=d.current;if(!e)return;const i=()=>de(e.duration||0),n=()=>{f(!1),p()};return e.addEventListener("loadedmetadata",i),e.addEventListener("ended",n),()=>{e.removeEventListener("loadedmetadata",i),e.removeEventListener("ended",n)}},[a,p]);const J=e=>{for(let i=R.length-1;i>=0;i--){const n=ne(R[i].time);if(e>=n)return i}return 0},y=e=>{const n=Math.max(0,Math.min(e,W||156));if(a){const o=d.current;o&&(o.currentTime=n),K(n)}else s&&C&&C(n);ge(n),E(J(n))},ve=()=>{if(a){const e=d.current;if(!e)return;Y?(e.pause(),p(),f(!1)):e.play().then(()=>{f(!0),M()}).catch(()=>{})}else s&&P?P():F(e=>!e)},be=()=>{s&&$?$():y(Math.max(0,(a?T:S??0)-10))},je=()=>{s&&B?B():y(Math.min(W||156,(a?T:S??0)+10))},ke=e=>{if(a){const i=d.current;i&&(i.playbackRate=e),he(e)}else s&&L&&L(e);pe(e),V(!1)};r.useImperativeHandle(le,()=>({seekTo:e=>{if(y(e),a){const n=d.current;n&&n.play().then(()=>{f(!0),M()}).catch(()=>{})}else F(!0);const i=J(e);E(i),setTimeout(()=>{var o;const n=(o=N.current)==null?void 0:o.children;n!=null&&n[i]&&n[i].scrollIntoView({behavior:"smooth",block:"nearest"})},50)}}));const Se=e=>{var i;if(Z===e&&b){if(a){const n=d.current;n&&n.pause(),p(),f(!1)}F(!1)}else{const n=ne((i=R[e])==null?void 0:i.time);if(E(e),y(n),a){const o=d.current;o&&(o.currentTime=n,o.play().then(()=>{f(!0),M()}).catch(()=>{}))}F(!0)}},Fe=(e,i)=>{if(e==null)return;const n=o=>{const u=Math.floor(o/6e4),m=Math.floor(o%6e4/1e3);return`${u.toString().padStart(2,"0")}:${m.toString().padStart(2,"0")}`};return`${n(e)}–${i!=null?n(i):n(e)}`},O=(ee=g==null?void 0:g.messages)!=null&&ee.length?g.messages.map((e,i)=>{var n,o;return{actor:e.actor==="agent"?((n=g.actor_map)==null?void 0:n.agent)||"Agent":((o=g.actor_map)==null?void 0:o.customer)||"Customer",actorType:e.actor==="agent"?"agent":"customer",text:e.text||"",timeRange:Fe(e.start??e.start_ms,e.end??e.end_ms),isHighlighted:re.has(i),highlightColor:b&&q===i?e.actor==="agent"?"var(--rail-outcome)":"var(--rail-discovery)":void 0,observations:(ae[i]||[]).map(u=>({...u,onClick:()=>{D==null||D(m=>new Set([...m,u.signalKey])),setTimeout(()=>{const m=document.getElementById(`signal-${u.signalKey}`);m&&m.scrollIntoView({behavior:"smooth",block:"nearest"})},100)}}))}}):null,Q=v?S??0:xe,w=W||156,j=w>0?Q/w*100:0,U=Math.round(Q);return t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:16},children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16,width:"100%"},children:[t.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:34,height:34,borderRadius:9999,background:"var(--surface-hover, #F3F7F7)",flexShrink:0},children:t.jsx(c.FileSignal,{size:20,color:"#2E3236",strokeWidth:1.5})}),t.jsx("span",{style:{fontSize:15,fontWeight:500,color:"var(--Grey-Strong, #2E3236)"},children:"Recording"})]}),t.jsxs("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:[t.jsxs("div",{style:{width:"100%",display:"flex",flexDirection:"column",gap:16},children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:24},children:[t.jsxs("span",{style:{fontSize:14,fontWeight:500,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2},children:[ie," / ",oe]}),t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12},children:[t.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1.2},children:"10"}),t.jsx("button",{onClick:be,style:{background:"none",border:"none",cursor:"pointer",padding:0,display:"flex",alignItems:"center"},children:t.jsx(c.RotateCcw,{size:20,color:"#808183",strokeWidth:1.5})}),t.jsx("button",{onClick:ve,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:b?t.jsx(c.Pause,{size:14,color:"#FFF",fill:"#FFF"}):t.jsx(c.Play,{size:14,color:"#FFF",fill:"#FFF",strokeWidth:1.5,style:{marginLeft:2}})}),t.jsx("button",{onClick:je,style:{background:"none",border:"none",cursor:"pointer",padding:0,display:"flex",alignItems:"center"},children:t.jsx(c.RotateCw,{size:20,color:"#808183",strokeWidth:1.5})}),t.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1.2},children:"10"})]}),t.jsxs("div",{style:{position:"relative"},children:[t.jsxs("button",{onClick:()=>V(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:[G,"x",t.jsx(c.ChevronDown,{size:12,color:"#808183"})]}),me&&t.jsx("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:Ie.map(e=>t.jsxs("button",{onClick:()=>ke(e),style:{display:"block",width:"100%",padding:"8px 12px",border:"none",background:G===e?"var(--surface-hover, #F3F7F7)":"var(--Grey-White, #FFF)",cursor:"pointer",fontSize:13,fontWeight:G===e?600:400,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",textAlign:"left"},children:[e,"x"]},e))})]})]}),l&&s?t.jsxs(t.Fragment,{children:[t.jsx(we.Timeline,{segments:I,durationSeconds:k,currentTimeSeconds:z,onSeek:C,showControls:!1,hasRecording:!0,timelinePlaying:H,playbackRate:A}),t.jsx("audio",{ref:_,preload:"none",style:{display:"none"},children:t.jsx("source",{src:l,type:"audio/mpeg"})})]}):t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[t.jsx("span",{style:{fontSize:13,fontWeight:600,color:j>0?"var(--Green-Primary, #00925F)":"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",lineHeight:1.2,minWidth:60},children:te(U)}),t.jsxs("div",{onClick:e=>{const i=e.currentTarget.getBoundingClientRect(),n=e.clientX-i.left,o=Math.max(0,Math.min(1,n/i.width));y(o*w)},style:{flex:1,height:16,position:"relative",display:"flex",alignItems:"center",cursor:"pointer"},children:[t.jsx("div",{style:{position:"absolute",left:0,right:0,height:4,borderRadius:2,background:"var(--rail-surface-2, #E3E1D7)",pointerEvents:"none"}}),t.jsx("div",{style:{position:"absolute",left:0,top:"50%",transform:"translateY(-50%)",width:`${j}%`,height:4,borderRadius:2,background:"var(--Green-Primary, #00925F)",pointerEvents:"none"}}),t.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{position:"absolute",left:`${j}%`,top:"50%",transform:"translate(-50%, -50%)",pointerEvents:"none"},children:t.jsx("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"})})]})]}),t.jsxs("div",{style:{position:"relative",paddingBottom:30,cursor:"pointer"},children:[["Agent","Customer"].map((e,i)=>t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,height:20,marginBottom:i===0?4:0},children:[t.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",fontFamily:"var(--font-sans)",lineHeight:1.2,minWidth:60},children:e}),t.jsxs("div",{onClick:n=>{const o=n.currentTarget.getBoundingClientRect(),u=Math.max(0,Math.min(1,(n.clientX-o.left)/o.width));y(u*w)},style:{flex:1,height:6,position:"relative",borderRadius:3,cursor:"pointer"},children:[t.jsx("div",{style:{position:"absolute",left:0,right:0,top:"50%",transform:"translateY(-50%)",height:4,borderRadius:2,background:"var(--rail-surface-2, #E3E1D7)"}}),Re[e].map((n,o)=>t.jsx("div",{style:{position:"absolute",left:`${n.start*100}%`,width:`${(n.end-n.start)*100}%`,top:0,bottom:0,borderRadius:3,background:e==="Agent"?"var(--Grey-Strong, #2E3236)":"var(--Grey-Muted, #808183)"}},o))]})]},e)),t.jsxs("div",{style:{position:"absolute",left:68,right:0,top:0,bottom:0,pointerEvents:"none"},children:[t.jsx("div",{style:{position:"absolute",left:`${j}%`,top:0,height:44,transform:"translateX(-50%)",borderLeft:"1.5px dashed var(--Grey-Muted, #808183)",opacity:.5}}),t.jsx("div",{style:{position:"absolute",left:`${j}%`,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:te(U)})]})]}),a&&t.jsx("audio",{ref:d,preload:"auto",style:{display:"none"},children:t.jsx("source",{src:l,type:"audio/mpeg"})})]})]}),t.jsxs("div",{style:{width:"100%",display:"flex",flexDirection:"column",gap:16},children:[t.jsx("div",{style:{borderBottom:"1px solid var(--Grey-absent, #D9D9D9)",paddingBottom:16},children:t.jsx("span",{style:{fontSize:14,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2},children:"Transcript"})}),t.jsx("div",{id:"transcript-container",ref:N,style:{display:"flex",flexDirection:"column",maxHeight:600,overflowY:"auto"},children:(O||R.map(e=>({actor:e.speaker,actorType:e.type,text:e.text,timeRange:e.time}))).map((e,i)=>{const n=!!O,o=n?b&&q===i:i===Z&&b,u=(e.actorType||e.type)==="customer";return t.jsxs("div",{style:{display:"flex",padding:16,flexDirection:"column",alignItems:"flex-start",gap:16,alignSelf:"stretch",borderTop:i>0?"1px solid var(--Grey-absent, #D9D9D9)":"none",background:o?"var(--surface-hover, #F3F7F7)":"var(--Grey-White, #FFF)"},children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",gap:8},children:[t.jsx("span",{style:{fontSize:14,fontWeight:600,lineHeight:1.2,color:u?"var(--Grey-Strong, #2E3236)":"var(--Grey-Muted, #808183)"},children:e.actor}),t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[o&&t.jsxs(t.Fragment,{children:[t.jsx(c.AudioLines,{size:12,color:"#2E3236"}),t.jsx(c.AudioLines,{size:12,color:"#2E3236"})]}),t.jsx("span",{style:{fontSize:13,fontWeight:400,lineHeight:1.2,color:"var(--Grey-Muted, #808183)"},children:e.timeRange})]})]}),t.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:8,width:"100%"},children:[t.jsx("button",{onClick:()=>{n&&X?X(e,i):Se(i)},style:{background:"none",border:"none",cursor:"pointer",padding:0,flexShrink:0,display:"flex"},children:o?t.jsx(c.PauseCircle,{size:17,color:"#2E3236",strokeWidth:1.5}):t.jsx(c.PlayCircle,{size:17,color:"#808183",strokeWidth:1})}),t.jsx("p",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2,margin:0,flex:1},children:e.text})]})]},i)})})]})]})]})});exports.UpdatedInteractionRecording=Ce;
 //# sourceMappingURL=UpdatedInteractionRecording.cjs.js.map