chordia-ui 3.4.2 → 3.4.3

package/dist/UpdatedInteractionRecording.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"UpdatedInteractionRecording.es.js","sources":["../src/components/UpdatedInteractionDetails/UpdatedInteractionRecording.jsx"],"sourcesContent":["import { useRef, useState, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react';\nimport {\n  Play, Pause, RotateCcw, RotateCw,\n  ChevronDown,\n  AudioLines, PlayCircle, PauseCircle,\n  FileSignal,\n} from 'lucide-react';\nimport Timeline from '../media/Timeline.jsx';\n\nfunction fmtTime(seconds) {\n  const m = Math.floor(seconds / 60);\n  const s = Math.round(seconds % 60);\n  return `${m}:${s.toString().padStart(2, '0')}`;\n}\n\n/* ── Demo data for static preview ── */\nconst DEMO_SEGMENTS = {\n  Agent: [\n    { start: 0, end: 0.08 },\n    { start: 0.18, end: 0.22 },\n    { start: 0.38, end: 0.42 },\n    { start: 0.55, end: 0.58 },\n    { start: 0.68, end: 0.72 },\n    { start: 0.82, end: 0.88 },\n    { start: 0.94, end: 1 },\n  ],\n  Customer: [\n    { start: 0.1, end: 0.16 },\n    { start: 0.24, end: 0.36 },\n    { start: 0.44, end: 0.52 },\n    { start: 0.6, end: 0.66 },\n    { start: 0.74, end: 0.80 },\n  ],\n};\n\nconst DEMO_TRANSCRIPT = [\n  { speaker: 'Agent', type: 'agent', time: '00:04', text: 'Thanks for calling Miles Point S Pensau. This is Steve. How can I help you?' },\n  { speaker: 'Customer', type: 'customer', time: '00:12', text: 'Hi, Steve. This is Sandra with Botai Catering.' },\n  { speaker: 'Agent', type: 'agent', time: '00:18', text: 'Hello. How are you?' },\n  { 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.\" },\n  { speaker: 'Agent', type: 'agent', time: '00:21', text: 'Oh, interesting. Okay. Can you swing by with it one of these days?' },\n];\n\nconst SPEED_OPTIONS = [1, 1.25, 1.5, 2];\n\nfunction parseTimeStr(timeStr) {\n  if (!timeStr) return 0;\n  const parts = timeStr.split(':').map(Number);\n  return (parts[0] || 0) * 60 + (parts[1] || 0);\n}\n\n/* ── Component ── */\nconst UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecording({\n  audioUrl,\n  timelineSegments = [],\n  durationSeconds = 0,\n  // Parent-managed audio props (optional — if not provided, component manages its own audio)\n  currentTimeSeconds: externalCurrentTime,\n  timelinePlaying: externalPlaying,\n  playbackRate: externalRate,\n  onSeek: externalOnSeek,\n  onTogglePlay: externalOnTogglePlay,\n  onSeekBack: externalOnSeekBack,\n  onSeekForward: externalOnSeekForward,\n  onSetPlaybackRate: externalOnSetPlaybackRate,\n  audioRef: externalAudioRef,\n  // Speaker names\n  agentName = 'Agent',\n  customerName = 'Customer',\n  // Transcript props\n  transcript,\n  highlightedTurns = new Set(),\n  activeTurnIndex,\n  activeDemoIndex = 1,\n  turnObservations = {},\n  setExpandedSignals,\n  onTurnPlayPause,\n}, ref) {\n  const scrollRef = useRef(null);\n  const internalAudioRef = useRef(null);\n  const animFrameRef = useRef(null);\n\n  // Internal audio state (used when audioUrl is provided but parent doesn't manage playback)\n  const [internalPlaying, setInternalPlaying] = useState(false);\n  const [internalCurrentTime, setInternalCurrentTime] = useState(0);\n  const [internalDuration, setInternalDuration] = useState(0);\n  const [internalRate, setInternalRate] = useState(1);\n\n  // Demo state (used when no audioUrl)\n  const [demoSeekTime, setDemoSeekTime] = useState(null);\n  const [demoRate, setDemoRate] = useState(1);\n  const [demoPlaying, setDemoPlaying] = useState(false);\n  const [showSpeedMenu, setShowSpeedMenu] = useState(false);\n  const [activeDemoIdx, setActiveDemoIdx] = useState(activeDemoIndex);\n\n  // Determine control mode\n  const parentManaged = !!externalAudioRef;\n  const isDemo = !audioUrl;\n  const selfManaged = audioUrl && !parentManaged;\n\n  // Unified state\n  const activePlaying = isDemo ? demoPlaying : (parentManaged ? (externalPlaying ?? false) : internalPlaying);\n  const activeCurrentTime = isDemo ? (demoSeekTime ?? 0) : (parentManaged ? (externalCurrentTime ?? 0) : internalCurrentTime);\n  const activeRate = isDemo ? demoRate : (parentManaged ? (externalRate ?? 1) : internalRate);\n  const activeDuration = isDemo ? (durationSeconds || 156) : (parentManaged ? durationSeconds : (internalDuration || durationSeconds || 0));\n  const audioRefToUse = parentManaged ? externalAudioRef : internalAudioRef;\n\n  /* ── Internal audio time tracking via requestAnimationFrame ── */\n  const startTimeTracking = useCallback(() => {\n    const tick = () => {\n      const audio = internalAudioRef.current;\n      if (audio) setInternalCurrentTime(audio.currentTime);\n      animFrameRef.current = requestAnimationFrame(tick);\n    };\n    animFrameRef.current = requestAnimationFrame(tick);\n  }, []);\n\n  const stopTimeTracking = useCallback(() => {\n    if (animFrameRef.current) {\n      cancelAnimationFrame(animFrameRef.current);\n      animFrameRef.current = null;\n    }\n  }, []);\n\n  // Cleanup on unmount\n  useEffect(() => () => stopTimeTracking(), [stopTimeTracking]);\n\n  // Wire up internal audio element events\n  useEffect(() => {\n    if (!selfManaged) return;\n    const audio = internalAudioRef.current;\n    if (!audio) return;\n    const onLoaded = () => setInternalDuration(audio.duration || 0);\n    const onEnded = () => { setInternalPlaying(false); stopTimeTracking(); };\n    audio.addEventListener('loadedmetadata', onLoaded);\n    audio.addEventListener('ended', onEnded);\n    return () => {\n      audio.removeEventListener('loadedmetadata', onLoaded);\n      audio.removeEventListener('ended', onEnded);\n    };\n  }, [selfManaged, stopTimeTracking]);\n\n  /* Compute which transcript card matches current playback time */\n  const computeActiveIdx = (timeSec) => {\n    for (let i = DEMO_TRANSCRIPT.length - 1; i >= 0; i--) {\n      const turnTime = parseTimeStr(DEMO_TRANSCRIPT[i].time);\n      if (timeSec >= turnTime) return i;\n    }\n    return 0;\n  };\n\n  /* ── Unified handlers ── */\n  const handleSeek = (timeSeconds) => {\n    const dur = activeDuration || 156;\n    const clamped = Math.max(0, Math.min(timeSeconds, dur));\n\n    if (selfManaged) {\n      const audio = internalAudioRef.current;\n      if (audio) audio.currentTime = clamped;\n      setInternalCurrentTime(clamped);\n    } else if (parentManaged && externalOnSeek) {\n      externalOnSeek(clamped);\n    }\n\n    // Always update demo state for UI\n    setDemoSeekTime(clamped);\n    setActiveDemoIdx(computeActiveIdx(clamped));\n  };\n\n  const handleTogglePlay = () => {\n    if (selfManaged) {\n      const audio = internalAudioRef.current;\n      if (!audio) return;\n      if (internalPlaying) {\n        audio.pause();\n        stopTimeTracking();\n        setInternalPlaying(false);\n      } else {\n        audio.play().then(() => {\n          setInternalPlaying(true);\n          startTimeTracking();\n        }).catch(() => {});\n      }\n    } else if (parentManaged && externalOnTogglePlay) {\n      externalOnTogglePlay();\n    } else {\n      // Demo mode\n      setDemoPlaying((prev) => !prev);\n    }\n  };\n\n  const handleSeekBack = () => {\n    if (parentManaged && externalOnSeekBack) externalOnSeekBack();\n    else {\n      const cur = selfManaged ? internalCurrentTime : (demoSeekTime ?? 0);\n      handleSeek(Math.max(0, cur - 10));\n    }\n  };\n\n  const handleSeekForward = () => {\n    if (parentManaged && externalOnSeekForward) externalOnSeekForward();\n    else {\n      const cur = selfManaged ? internalCurrentTime : (demoSeekTime ?? 0);\n      const dur = activeDuration || 156;\n      handleSeek(Math.min(dur, cur + 10));\n    }\n  };\n\n  const handleSetRate = (rate) => {\n    if (selfManaged) {\n      const audio = internalAudioRef.current;\n      if (audio) audio.playbackRate = rate;\n      setInternalRate(rate);\n    } else if (parentManaged && externalOnSetPlaybackRate) {\n      externalOnSetPlaybackRate(rate);\n    }\n    setDemoRate(rate);\n    setShowSpeedMenu(false);\n  };\n\n  /* Expose seekTo for parent to call via ref (e.g. from Signals \"Show in transcript\") */\n  useImperativeHandle(ref, () => ({\n    seekTo: (timeSec) => {\n      handleSeek(timeSec);\n      if (selfManaged) {\n        const audio = internalAudioRef.current;\n        if (audio) {\n          audio.play().then(() => {\n            setInternalPlaying(true);\n            startTimeTracking();\n          }).catch(() => {});\n        }\n      } else {\n        setDemoPlaying(true);\n      }\n      const idx = computeActiveIdx(timeSec);\n      setActiveDemoIdx(idx);\n      setTimeout(() => {\n        const cards = scrollRef.current?.children;\n        if (cards?.[idx]) {\n          cards[idx].scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n        }\n      }, 50);\n    },\n  }));\n\n  /* Handle transcript card play/pause */\n  const handleDemoTurnPlayPause = (idx) => {\n    if (activeDemoIdx === idx && activePlaying) {\n      if (selfManaged) {\n        const audio = internalAudioRef.current;\n        if (audio) audio.pause();\n        stopTimeTracking();\n        setInternalPlaying(false);\n      }\n      setDemoPlaying(false);\n    } else {\n      const turnTime = parseTimeStr(DEMO_TRANSCRIPT[idx]?.time);\n      setActiveDemoIdx(idx);\n      handleSeek(turnTime);\n      if (selfManaged) {\n        const audio = internalAudioRef.current;\n        if (audio) {\n          audio.currentTime = turnTime;\n          audio.play().then(() => {\n            setInternalPlaying(true);\n            startTimeTracking();\n          }).catch(() => {});\n        }\n      }\n      setDemoPlaying(true);\n    }\n  };\n\n  /* transcript turn builder */\n  const formatTimeRange = (startMs, endMs) => {\n    if (startMs == null) return undefined;\n    const fmt = (ms) => {\n      const minutes = Math.floor(ms / 60000);\n      const seconds = Math.floor((ms % 60000) / 1000);\n      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n    };\n    return `${fmt(startMs)}\\u2013${endMs != null ? fmt(endMs) : fmt(startMs)}`;\n  };\n\n  const turns = transcript?.messages?.length\n    ? transcript.messages.map((m, i) => ({\n        actor: m.actor === 'agent' ? (transcript.actor_map?.agent || 'Agent') : (transcript.actor_map?.customer || 'Customer'),\n        actorType: m.actor === 'agent' ? 'agent' : 'customer',\n        text: m.text || '',\n        timeRange: formatTimeRange(m.start ?? m.start_ms, m.end ?? m.end_ms),\n        isHighlighted: highlightedTurns.has(i),\n        highlightColor: activePlaying && activeTurnIndex === i\n          ? (m.actor === 'agent' ? 'var(--rail-outcome)' : 'var(--rail-discovery)')\n          : undefined,\n        observations: (turnObservations[i] || []).map((obs) => ({\n          ...obs,\n          onClick: () => {\n            setExpandedSignals?.((prev) => new Set([...prev, obs.signalKey]));\n            setTimeout(() => {\n              const el = document.getElementById(`signal-${obs.signalKey}`);\n              if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n            }, 100);\n          },\n        })),\n      }))\n    : null;\n\n  // Computed display values\n  const effectiveTime = isDemo ? (demoSeekTime ?? 0) : activeCurrentTime;\n  const effectiveDuration = activeDuration || 156;\n  const progress = effectiveDuration > 0 ? (effectiveTime / effectiveDuration) * 100 : 0;\n  const displayTime = Math.round(effectiveTime);\n\n  return (\n    <div style={{\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 16,\n    }}>\n      {/* ── \"Recording\" title with icon — outside the card, matches Signals style ── */}\n      <div style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 16,\n        width: '100%',\n      }}>\n        <div style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: 34,\n          height: 34,\n          borderRadius: 9999,\n          background: 'var(--surface-hover, #F3F7F7)',\n          flexShrink: 0,\n        }}>\n          <FileSignal size={20} color=\"#2E3236\" strokeWidth={1.5} />\n        </div>\n        <span style={{\n          fontSize: 15,\n          fontWeight: 500,\n          color: 'var(--Grey-Strong, #2E3236)',\n        }}>\n          Recording\n        </span>\n      </div>\n\n      {/* ── Card with border ── */}\n      <div style={{\n        display: 'flex',\n        padding: 24,\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n        gap: 24,\n        borderRadius: 8,\n        border: '1px solid var(--Grey-absent, #D9D9D9)',\n        background: 'var(--Grey-White, #FFF)',\n      }}>\n\n        {/* ════════════════════════════════════════\n            RECORDING CONTROLS\n            ════════════════════════════════════════ */}\n        <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>\n\n          {/* ── \"Agent / Customer\" + Controls — horizontal, space-between, center ── */}\n          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>\n          <span style={{\n            fontSize: 14, fontWeight: 500,\n            color: 'var(--Grey-Strong, #2E3236)',\n            lineHeight: 1.2,\n          }}>\n            {agentName} / {customerName}\n          </span>\n\n          {/* Controls — horizontal, gap: 12, center */}\n          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>\n            {/* Skip back 10s */}\n            <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--Grey-Muted, #808183)', lineHeight: 1.2 }}>10</span>\n            <button onClick={handleSeekBack} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center' }}>\n              <RotateCcw size={20} color=\"#808183\" strokeWidth={1.5} />\n            </button>\n\n            {/* Play / Pause — 32x32 dark circle */}\n            <button onClick={handleTogglePlay} style={{\n              background: 'var(--Grey-Strong, #2E3236)',\n              border: 'none', cursor: 'pointer',\n              width: 32, height: 32, borderRadius: 48,\n              padding: 0,\n              display: 'flex', alignItems: 'center', justifyContent: 'center',\n            }}>\n              {activePlaying\n                ? <Pause size={14} color=\"#FFF\" fill=\"#FFF\" />\n                : <Play size={14} color=\"#FFF\" fill=\"#FFF\" strokeWidth={1.5} style={{ marginLeft: 2 }} />\n              }\n            </button>\n\n            {/* Skip forward 10s */}\n            <button onClick={handleSeekForward} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center' }}>\n              <RotateCw size={20} color=\"#808183\" strokeWidth={1.5} />\n            </button>\n            <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--Grey-Muted, #808183)', lineHeight: 1.2 }}>10</span>\n          </div>\n\n          {/* Speed pill with dropdown */}\n          <div style={{ position: 'relative' }}>\n            <button\n              onClick={() => setShowSpeedMenu((prev) => !prev)}\n              style={{\n                background: 'var(--Grey-White, #FFF)',\n                border: '1px solid var(--Grey-absent, #D9D9D9)',\n                borderRadius: 20,\n                padding: '0 5px 0 10px',\n                height: 24,\n                minWidth: 56,\n                cursor: 'pointer',\n                fontSize: 13, fontWeight: 400,\n                color: 'var(--Grey-Strong, #2E3236)',\n                fontFamily: 'var(--font-sans)',\n                lineHeight: 1.2,\n                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,\n              }}\n            >\n              {activeRate}x\n              <ChevronDown size={12} color=\"#808183\" />\n            </button>\n\n            {showSpeedMenu && (\n              <div style={{\n                position: 'absolute',\n                top: '100%',\n                right: 0,\n                marginTop: 4,\n                background: 'var(--Grey-White, #FFF)',\n                border: '1px solid var(--Grey-absent, #D9D9D9)',\n                borderRadius: 8,\n                boxShadow: '0 4px 12px rgba(0,0,0,0.1)',\n                zIndex: 10,\n                overflow: 'hidden',\n                minWidth: 80,\n              }}>\n                {SPEED_OPTIONS.map((speed) => (\n                  <button\n                    key={speed}\n                    onClick={() => handleSetRate(speed)}\n                    style={{\n                      display: 'block',\n                      width: '100%',\n                      padding: '8px 12px',\n                      border: 'none',\n                      background: activeRate === speed ? 'var(--surface-hover, #F3F7F7)' : 'var(--Grey-White, #FFF)',\n                      cursor: 'pointer',\n                      fontSize: 13,\n                      fontWeight: activeRate === speed ? 600 : 400,\n                      color: 'var(--Grey-Strong, #2E3236)',\n                      fontFamily: 'var(--font-sans)',\n                      textAlign: 'left',\n                    }}\n                  >\n                    {speed}x\n                  </button>\n                ))}\n              </div>\n            )}\n          </div>\n        </div>\n\n        {/* ── Row 2: Progress bar ── */}\n        {audioUrl && parentManaged ? (\n          <>\n            <Timeline\n              segments={timelineSegments}\n              durationSeconds={durationSeconds}\n              currentTimeSeconds={externalCurrentTime}\n              onSeek={externalOnSeek}\n              showControls={false}\n              hasRecording\n              timelinePlaying={externalPlaying}\n              playbackRate={externalRate}\n            />\n            <audio ref={externalAudioRef} preload=\"none\" style={{ display: 'none' }}>\n              <source src={audioUrl} type=\"audio/mpeg\" />\n            </audio>\n          </>\n        ) : (\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n            {/* Time label + scrubber bar */}\n            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n              <span style={{\n                fontSize: 13, fontWeight: 600,\n                color: progress > 0 ? 'var(--Green-Primary, #00925F)' : 'var(--Grey-Strong, #2E3236)',\n                fontFamily: 'var(--font-sans)',\n                lineHeight: 1.2,\n                minWidth: 60,\n              }}>\n                {fmtTime(displayTime)}\n              </span>\n              <div\n                onClick={(e) => {\n                  const rect = e.currentTarget.getBoundingClientRect();\n                  const clickX = e.clientX - rect.left;\n                  const pct = Math.max(0, Math.min(1, clickX / rect.width));\n                  handleSeek(pct * effectiveDuration);\n                }}\n                style={{\n                  flex: 1, height: 16,\n                  position: 'relative',\n                  display: 'flex', alignItems: 'center',\n                  cursor: 'pointer',\n                }}\n              >\n                {/* Background track — Figma: #E3E1D7, stroke w=4 */}\n                <div style={{\n                  position: 'absolute', left: 0, right: 0,\n                  height: 4, borderRadius: 2,\n                  background: 'var(--rail-surface-2, #E3E1D7)',\n                  pointerEvents: 'none',\n                }} />\n                {/* Played portion — Figma: #00925F, stroke w=4 */}\n                <div style={{\n                  position: 'absolute', left: 0, top: '50%',\n                  transform: 'translateY(-50%)',\n                  width: `${progress}%`,\n                  height: 4, borderRadius: 2,\n                  background: 'var(--Green-Primary, #00925F)',\n                  pointerEvents: 'none',\n                }} />\n                {/* Scrubber handle — Figma ellipse */}\n                <svg\n                  width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  style={{\n                    position: 'absolute',\n                    left: `${progress}%`,\n                    top: '50%',\n                    transform: 'translate(-50%, -50%)',\n                    pointerEvents: 'none',\n                  }}\n                >\n                  <path\n                    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\"\n                    fill=\"#FFF\"\n                    stroke=\"#00925F\"\n                    strokeWidth=\"2\"\n                  />\n                </svg>\n              </div>\n            </div>\n\n            {/* ── Row 3: Speaker timeline bars + playback indicator ── */}\n            <div style={{ position: 'relative', paddingBottom: 30, cursor: 'pointer' }}>\n              {['Agent', 'Customer'].map((speaker, rowIdx) => (\n                <div key={speaker} style={{\n                  display: 'flex', alignItems: 'center', gap: 8,\n                  height: 20,\n                  marginBottom: rowIdx === 0 ? 4 : 0,\n                }}>\n                  <span style={{\n                    fontSize: 13, fontWeight: 400,\n                    color: 'var(--Grey-Muted, #808183)',\n                    fontFamily: 'var(--font-sans)',\n                    lineHeight: 1.2,\n                    minWidth: 60,\n                  }}>\n                    {speaker}\n                  </span>\n                  <div\n                    onClick={(e) => {\n                      const rect = e.currentTarget.getBoundingClientRect();\n                      const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n                      handleSeek(pct * effectiveDuration);\n                    }}\n                    style={{\n                      flex: 1, height: 6,\n                      position: 'relative', borderRadius: 3,\n                      cursor: 'pointer',\n                    }}\n                  >\n                    {/* Thin baseline — Figma: #E3E1D7, stroke w=4 */}\n                    <div style={{\n                      position: 'absolute', left: 0, right: 0,\n                      top: '50%', transform: 'translateY(-50%)',\n                      height: 4, borderRadius: 2,\n                      background: 'var(--rail-surface-2, #E3E1D7)',\n                    }} />\n                    {/* Speech segments */}\n                    {DEMO_SEGMENTS[speaker].map((seg, i) => (\n                      <div key={i} style={{\n                        position: 'absolute',\n                        left: `${seg.start * 100}%`,\n                        width: `${(seg.end - seg.start) * 100}%`,\n                        top: 0, bottom: 0, borderRadius: 3,\n                        background: speaker === 'Agent'\n                          ? 'var(--Grey-Strong, #2E3236)'\n                          : 'var(--Grey-Muted, #808183)',\n                      }} />\n                    ))}\n                  </div>\n                </div>\n              ))}\n\n              {/* ── Playback position: dotted line + time tooltip ── */}\n              <div style={{\n                position: 'absolute',\n                left: 68,   /* 60 label + 8 gap */\n                right: 0,\n                top: 0,\n                bottom: 0,\n                pointerEvents: 'none',\n              }}>\n                {/* Dotted vertical line */}\n                <div style={{\n                  position: 'absolute',\n                  left: `${progress}%`,\n                  top: 0,\n                  height: 44, /* spans both rows */\n                  transform: 'translateX(-50%)',\n                  borderLeft: '1.5px dashed var(--Grey-Muted, #808183)',\n                  opacity: 0.5,\n                }} />\n\n                {/* Time tooltip — Figma: Frame 30, bg=#2E3236, pad 4 6, r=4, 14px/600/#FFF */}\n                <div style={{\n                  position: 'absolute',\n                  left: `${progress}%`,\n                  bottom: 0,\n                  transform: 'translateX(-50%)',\n                  background: 'var(--Grey-Strong, #2E3236)',\n                  color: 'var(--Grey-White, #FFF)',\n                  fontSize: 14, fontWeight: 600,\n                  lineHeight: 1.2,\n                  padding: '4px 6px',\n                  borderRadius: 4,\n                  whiteSpace: 'nowrap',\n                }}>\n                  {fmtTime(displayTime)}\n                </div>\n              </div>\n            </div>\n\n            {/* Hidden audio element for self-managed mode */}\n            {selfManaged && (\n              <audio ref={internalAudioRef} preload=\"auto\" style={{ display: 'none' }}>\n                <source src={audioUrl} type=\"audio/mpeg\" />\n              </audio>\n            )}\n          </div>\n        )}\n      </div>\n\n      {/* ════════════════════════════════════════\n          TRANSCRIPT SECTION\n          ════════════════════════════════════════ */}\n      {/* Figma: Frame 49, vertical, gap: 16 */}\n      <div style={{\n        width: '100%',\n        display: 'flex', flexDirection: 'column', gap: 16,\n      }}>\n        {/* ── Header: Transcript ── */}\n        <div style={{\n          borderBottom: '1px solid var(--Grey-absent, #D9D9D9)',\n          paddingBottom: 16,\n        }}>\n          <span style={{\n            fontSize: 14, fontWeight: 400,\n            color: 'var(--Grey-Strong, #2E3236)',\n            lineHeight: 1.2,\n          }}>\n            Transcript\n          </span>\n        </div>\n\n        {/* ── Cards — V4 style for both real and demo data ── */}\n        <div id=\"transcript-container\" ref={scrollRef} style={{\n          display: 'flex', flexDirection: 'column',\n          maxHeight: 600, overflowY: 'auto',\n        }}>\n          {(turns || DEMO_TRANSCRIPT.map((card) => ({\n            actor: card.speaker,\n            actorType: card.type,\n            text: card.text,\n            timeRange: card.time,\n          }))).map((card, i) => {\n            const isRealData = !!turns;\n            const isActive = isRealData\n              ? (activePlaying && activeTurnIndex === i)\n              : (i === activeDemoIdx && activePlaying);\n            const isCustomer = (card.actorType || card.type) === 'customer';\n\n            return (\n              <div key={i} style={{\n                display: 'flex',\n                padding: 16,\n                flexDirection: 'column',\n                alignItems: 'flex-start',\n                gap: 16,\n                alignSelf: 'stretch',\n                borderTop: i > 0 ? '1px solid var(--Grey-absent, #D9D9D9)' : 'none',\n                background: isActive ? 'var(--surface-hover, #F3F7F7)' : 'var(--Grey-White, #FFF)',\n              }}>\n                {/* Speaker name + time */}\n                <div style={{\n                  display: 'flex', alignItems: 'center',\n                  justifyContent: 'space-between', width: '100%',\n                  gap: 8,\n                }}>\n                  <span style={{\n                    fontSize: 14, fontWeight: 600,\n                    lineHeight: 1.2,\n                    color: isCustomer ? 'var(--Grey-Strong, #2E3236)' : 'var(--Grey-Muted, #808183)',\n                  }}>\n                    {card.actor}\n                  </span>\n                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n                    {isActive && (\n                      <>\n                        <AudioLines size={12} color=\"#2E3236\" />\n                        <AudioLines size={12} color=\"#2E3236\" />\n                      </>\n                    )}\n                    <span style={{\n                      fontSize: 13, fontWeight: 400,\n                      lineHeight: 1.2,\n                      color: 'var(--Grey-Muted, #808183)',\n                    }}>\n                      {card.timeRange}\n                    </span>\n                  </div>\n                </div>\n\n                {/* Play/Pause icon + text */}\n                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, width: '100%' }}>\n                  <button\n                    onClick={() => {\n                      if (isRealData && onTurnPlayPause) {\n                        onTurnPlayPause(card, i);\n                      } else {\n                        handleDemoTurnPlayPause(i);\n                      }\n                    }}\n                    style={{\n                      background: 'none', border: 'none',\n                      cursor: 'pointer', padding: 0,\n                      flexShrink: 0,\n                      display: 'flex',\n                    }}\n                  >\n                    {isActive ? (\n                      <PauseCircle size={17} color=\"#2E3236\" strokeWidth={1.5} />\n                    ) : (\n                      <PlayCircle size={17} color=\"#808183\" strokeWidth={1} />\n                    )}\n                  </button>\n                  <p style={{\n                    fontSize: 13, fontWeight: 400,\n                    color: 'var(--Grey-Strong, #2E3236)',\n                    lineHeight: 1.2,\n                    margin: 0,\n                    flex: 1,\n                  }}>\n                    {card.text}\n                  </p>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n      </div>{/* end card */}\n    </div>\n  );\n});\n\nexport default UpdatedInteractionRecording;\n"],"names":["fmtTime","seconds","m","s","DEMO_SEGMENTS","DEMO_TRANSCRIPT","SPEED_OPTIONS","parseTimeStr","timeStr","parts","UpdatedInteractionRecording","forwardRef","audioUrl","timelineSegments","durationSeconds","externalCurrentTime","externalPlaying","externalRate","externalOnSeek","externalOnTogglePlay","externalOnSeekBack","externalOnSeekForward","externalOnSetPlaybackRate","externalAudioRef","agentName","customerName","transcript","highlightedTurns","activeTurnIndex","activeDemoIndex","turnObservations","setExpandedSignals","onTurnPlayPause","ref","scrollRef","useRef","internalAudioRef","animFrameRef","internalPlaying","setInternalPlaying","useState","internalCurrentTime","setInternalCurrentTime","internalDuration","setInternalDuration","internalRate","setInternalRate","demoSeekTime","setDemoSeekTime","demoRate","setDemoRate","demoPlaying","setDemoPlaying","showSpeedMenu","setShowSpeedMenu","activeDemoIdx","setActiveDemoIdx","parentManaged","isDemo","selfManaged","activePlaying","activeCurrentTime","activeRate","activeDuration","startTimeTracking","useCallback","tick","audio","stopTimeTracking","useEffect","onLoaded","onEnded","computeActiveIdx","timeSec","i","turnTime","handleSeek","timeSeconds","clamped","handleTogglePlay","prev","handleSeekBack","handleSeekForward","handleSetRate","rate","useImperativeHandle","idx","cards","_a","handleDemoTurnPlayPause","formatTimeRange","startMs","endMs","fmt","ms","minutes","turns","_b","obs","el","effectiveTime","effectiveDuration","progress","displayTime","jsxs","jsx","FileSignal","RotateCcw","Pause","Play","RotateCw","ChevronDown","speed","Fragment","Timeline","rect","clickX","pct","speaker","rowIdx","e","seg","card","isRealData","isActive","isCustomer","AudioLines","PauseCircle","PlayCircle"],"mappings":"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"}
+{"version":3,"file":"UpdatedInteractionRecording.es.js","sources":["../src/components/UpdatedInteractionDetails/UpdatedInteractionRecording.jsx"],"sourcesContent":["import { useRef, useState, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react';\nimport {\n  Play, Pause, RotateCcw, RotateCw,\n  ChevronDown,\n  AudioLines, PlayCircle, PauseCircle,\n  FileSignal,\n} from 'lucide-react';\n\nfunction fmtTime(seconds) {\n  const m = Math.floor(seconds / 60);\n  const s = Math.round(seconds % 60);\n  return `${m}:${s.toString().padStart(2, '0')}`;\n}\n\n/* ── Demo data for static preview ── */\nconst DEMO_SEGMENTS = {\n  Agent: [\n    { start: 0, end: 0.08 },\n    { start: 0.18, end: 0.22 },\n    { start: 0.38, end: 0.42 },\n    { start: 0.55, end: 0.58 },\n    { start: 0.68, end: 0.72 },\n    { start: 0.82, end: 0.88 },\n    { start: 0.94, end: 1 },\n  ],\n  Customer: [\n    { start: 0.1, end: 0.16 },\n    { start: 0.24, end: 0.36 },\n    { start: 0.44, end: 0.52 },\n    { start: 0.6, end: 0.66 },\n    { start: 0.74, end: 0.80 },\n  ],\n};\n\nconst DEMO_TRANSCRIPT = [\n  { speaker: 'Agent', type: 'agent', time: '00:04', text: 'Thanks for calling Miles Point S Pensau. This is Steve. How can I help you?' },\n  { speaker: 'Customer', type: 'customer', time: '00:12', text: 'Hi, Steve. This is Sandra with Botai Catering.' },\n  { speaker: 'Agent', type: 'agent', time: '00:18', text: 'Hello. How are you?' },\n  { 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.\" },\n  { speaker: 'Agent', type: 'agent', time: '00:21', text: 'Oh, interesting. Okay. Can you swing by with it one of these days?' },\n];\n\nconst SPEED_OPTIONS = [1, 1.25, 1.5, 2];\n\nfunction parseTimeStr(timeStr) {\n  if (!timeStr) return 0;\n  const parts = timeStr.split(':').map(Number);\n  return (parts[0] || 0) * 60 + (parts[1] || 0);\n}\n\n/* ── Component ── */\nconst UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecording({\n  audioUrl,\n  timelineSegments = [],\n  durationSeconds = 0,\n  // Parent-managed audio props (optional — if not provided, component manages its own audio)\n  currentTimeSeconds: externalCurrentTime,\n  timelinePlaying: externalPlaying,\n  playbackRate: externalRate,\n  onSeek: externalOnSeek,\n  onTogglePlay: externalOnTogglePlay,\n  onSeekBack: externalOnSeekBack,\n  onSeekForward: externalOnSeekForward,\n  onSetPlaybackRate: externalOnSetPlaybackRate,\n  audioRef: externalAudioRef,\n  // Speaker names\n  agentName = 'Agent',\n  customerName = 'Customer',\n  // Transcript props\n  transcript,\n  highlightedTurns = new Set(),\n  activeTurnIndex,\n  activeDemoIndex = 1,\n  turnObservations = {},\n  setExpandedSignals,\n  onTurnPlayPause,\n}, ref) {\n  const scrollRef = useRef(null);\n  const internalAudioRef = useRef(null);\n  const animFrameRef = useRef(null);\n\n  // Internal audio state (used when audioUrl is provided but parent doesn't manage playback)\n  const [internalPlaying, setInternalPlaying] = useState(false);\n  const [internalCurrentTime, setInternalCurrentTime] = useState(0);\n  const [internalDuration, setInternalDuration] = useState(0);\n  const [internalRate, setInternalRate] = useState(1);\n\n  // Demo state (used when no audioUrl)\n  const [demoSeekTime, setDemoSeekTime] = useState(null);\n  const [demoRate, setDemoRate] = useState(1);\n  const [demoPlaying, setDemoPlaying] = useState(false);\n  const [showSpeedMenu, setShowSpeedMenu] = useState(false);\n  const [activeDemoIdx, setActiveDemoIdx] = useState(activeDemoIndex);\n\n  // Determine control mode\n  const parentManaged = !!externalAudioRef;\n  const isDemo = !audioUrl;\n  const selfManaged = audioUrl && !parentManaged;\n\n  // Unified state\n  const activePlaying = isDemo ? demoPlaying : (parentManaged ? (externalPlaying ?? false) : internalPlaying);\n  const activeCurrentTime = isDemo ? (demoSeekTime ?? 0) : (parentManaged ? (externalCurrentTime ?? 0) : internalCurrentTime);\n  const activeRate = isDemo ? demoRate : (parentManaged ? (externalRate ?? 1) : internalRate);\n  const activeDuration = isDemo ? (durationSeconds || 156) : (parentManaged ? durationSeconds : (internalDuration || durationSeconds || 0));\n  const audioRefToUse = parentManaged ? externalAudioRef : internalAudioRef;\n\n  /* ── Internal audio time tracking via requestAnimationFrame ── */\n  const startTimeTracking = useCallback(() => {\n    const tick = () => {\n      const audio = internalAudioRef.current;\n      if (audio) setInternalCurrentTime(audio.currentTime);\n      animFrameRef.current = requestAnimationFrame(tick);\n    };\n    animFrameRef.current = requestAnimationFrame(tick);\n  }, []);\n\n  const stopTimeTracking = useCallback(() => {\n    if (animFrameRef.current) {\n      cancelAnimationFrame(animFrameRef.current);\n      animFrameRef.current = null;\n    }\n  }, []);\n\n  // Cleanup on unmount\n  useEffect(() => () => stopTimeTracking(), [stopTimeTracking]);\n\n  // Wire up internal audio element events\n  useEffect(() => {\n    if (!selfManaged) return;\n    const audio = internalAudioRef.current;\n    if (!audio) return;\n    const onLoaded = () => setInternalDuration(audio.duration || 0);\n    const onEnded = () => { setInternalPlaying(false); stopTimeTracking(); };\n    audio.addEventListener('loadedmetadata', onLoaded);\n    audio.addEventListener('ended', onEnded);\n    return () => {\n      audio.removeEventListener('loadedmetadata', onLoaded);\n      audio.removeEventListener('ended', onEnded);\n    };\n  }, [selfManaged, stopTimeTracking]);\n\n  /* Compute which transcript card matches current playback time */\n  const computeActiveIdx = (timeSec) => {\n    for (let i = DEMO_TRANSCRIPT.length - 1; i >= 0; i--) {\n      const turnTime = parseTimeStr(DEMO_TRANSCRIPT[i].time);\n      if (timeSec >= turnTime) return i;\n    }\n    return 0;\n  };\n\n  /* ── Unified handlers ── */\n  const handleSeek = (timeSeconds) => {\n    const dur = activeDuration || 156;\n    const clamped = Math.max(0, Math.min(timeSeconds, dur));\n\n    if (selfManaged) {\n      const audio = internalAudioRef.current;\n      if (audio) audio.currentTime = clamped;\n      setInternalCurrentTime(clamped);\n    } else if (parentManaged && externalOnSeek) {\n      externalOnSeek(clamped);\n    }\n\n    // Always update demo state for UI\n    setDemoSeekTime(clamped);\n    setActiveDemoIdx(computeActiveIdx(clamped));\n  };\n\n  const handleTogglePlay = () => {\n    if (selfManaged) {\n      const audio = internalAudioRef.current;\n      if (!audio) return;\n      if (internalPlaying) {\n        audio.pause();\n        stopTimeTracking();\n        setInternalPlaying(false);\n      } else {\n        audio.play().then(() => {\n          setInternalPlaying(true);\n          startTimeTracking();\n        }).catch(() => {});\n      }\n    } else if (parentManaged && externalOnTogglePlay) {\n      externalOnTogglePlay();\n    } else {\n      // Demo mode\n      setDemoPlaying((prev) => !prev);\n    }\n  };\n\n  const handleSeekBack = () => {\n    if (parentManaged && externalOnSeekBack) externalOnSeekBack();\n    else {\n      const cur = selfManaged ? internalCurrentTime : (demoSeekTime ?? 0);\n      handleSeek(Math.max(0, cur - 10));\n    }\n  };\n\n  const handleSeekForward = () => {\n    if (parentManaged && externalOnSeekForward) externalOnSeekForward();\n    else {\n      const cur = selfManaged ? internalCurrentTime : (demoSeekTime ?? 0);\n      const dur = activeDuration || 156;\n      handleSeek(Math.min(dur, cur + 10));\n    }\n  };\n\n  const handleSetRate = (rate) => {\n    if (selfManaged) {\n      const audio = internalAudioRef.current;\n      if (audio) audio.playbackRate = rate;\n      setInternalRate(rate);\n    } else if (parentManaged && externalOnSetPlaybackRate) {\n      externalOnSetPlaybackRate(rate);\n    }\n    setDemoRate(rate);\n    setShowSpeedMenu(false);\n  };\n\n  /* Expose seekTo for parent to call via ref (e.g. from Signals \"Show in transcript\") */\n  useImperativeHandle(ref, () => ({\n    seekTo: (timeSec) => {\n      handleSeek(timeSec);\n      if (parentManaged) {\n        // Parent manages audio — seek was already called via handleSeek → externalOnSeek\n        // Now trigger play if not already playing\n        if (!externalPlaying && externalOnTogglePlay) {\n          externalOnTogglePlay();\n        }\n      } else if (selfManaged) {\n        const audio = internalAudioRef.current;\n        if (audio) {\n          audio.play().then(() => {\n            setInternalPlaying(true);\n            startTimeTracking();\n          }).catch(() => {});\n        }\n      } else {\n        setDemoPlaying(true);\n      }\n      const idx = computeActiveIdx(timeSec);\n      setActiveDemoIdx(idx);\n      setTimeout(() => {\n        const cards = scrollRef.current?.children;\n        if (cards?.[idx]) {\n          cards[idx].scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n        }\n      }, 50);\n    },\n  }));\n\n  /* Handle transcript card play/pause */\n  const handleDemoTurnPlayPause = (idx) => {\n    if (activeDemoIdx === idx && activePlaying) {\n      if (selfManaged) {\n        const audio = internalAudioRef.current;\n        if (audio) audio.pause();\n        stopTimeTracking();\n        setInternalPlaying(false);\n      }\n      setDemoPlaying(false);\n    } else {\n      const turnTime = parseTimeStr(DEMO_TRANSCRIPT[idx]?.time);\n      setActiveDemoIdx(idx);\n      handleSeek(turnTime);\n      if (selfManaged) {\n        const audio = internalAudioRef.current;\n        if (audio) {\n          audio.currentTime = turnTime;\n          audio.play().then(() => {\n            setInternalPlaying(true);\n            startTimeTracking();\n          }).catch(() => {});\n        }\n      }\n      setDemoPlaying(true);\n    }\n  };\n\n  /* transcript turn builder */\n  const formatTimeRange = (startMs, endMs) => {\n    if (startMs == null) return undefined;\n    const fmt = (ms) => {\n      const minutes = Math.floor(ms / 60000);\n      const seconds = Math.floor((ms % 60000) / 1000);\n      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n    };\n    return `${fmt(startMs)}\\u2013${endMs != null ? fmt(endMs) : fmt(startMs)}`;\n  };\n\n  const turns = transcript?.messages?.length\n    ? transcript.messages.map((m, i) => ({\n        actor: m.actor === 'agent' ? (transcript.actor_map?.agent || 'Agent') : (transcript.actor_map?.customer || 'Customer'),\n        actorType: m.actor === 'agent' ? 'agent' : 'customer',\n        text: m.text || '',\n        timeRange: formatTimeRange(m.start ?? m.start_ms, m.end ?? m.end_ms),\n        isHighlighted: highlightedTurns.has(i),\n        highlightColor: activePlaying && activeTurnIndex === i\n          ? (m.actor === 'agent' ? 'var(--rail-outcome)' : 'var(--rail-discovery)')\n          : undefined,\n        observations: (turnObservations[i] || []).map((obs) => ({\n          ...obs,\n          onClick: () => {\n            setExpandedSignals?.((prev) => new Set([...prev, obs.signalKey]));\n            setTimeout(() => {\n              const el = document.getElementById(`signal-${obs.signalKey}`);\n              if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n            }, 100);\n          },\n        })),\n      }))\n    : null;\n\n  // Computed display values\n  const effectiveTime = isDemo ? (demoSeekTime ?? 0) : activeCurrentTime;\n  const effectiveDuration = activeDuration || 156;\n  const progress = effectiveDuration > 0 ? (effectiveTime / effectiveDuration) * 100 : 0;\n  const displayTime = Math.round(effectiveTime);\n\n  return (\n    <div style={{\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 16,\n    }}>\n      {/* ── \"Recording\" title with icon — outside the card, matches Signals style ── */}\n      <div style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 16,\n        width: '100%',\n      }}>\n        <div style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: 34,\n          height: 34,\n          borderRadius: 9999,\n          background: 'var(--surface-hover, #F3F7F7)',\n          flexShrink: 0,\n        }}>\n          <FileSignal size={20} color=\"#2E3236\" strokeWidth={1.5} />\n        </div>\n        <span style={{\n          fontSize: 15,\n          fontWeight: 500,\n          color: 'var(--Grey-Strong, #2E3236)',\n        }}>\n          Recording\n        </span>\n      </div>\n\n      {/* ── Card with border ── */}\n      <div style={{\n        display: 'flex',\n        padding: 24,\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n        gap: 24,\n        borderRadius: 8,\n        border: '1px solid var(--Grey-absent, #D9D9D9)',\n        background: 'var(--Grey-White, #FFF)',\n      }}>\n\n        {/* ════════════════════════════════════════\n            RECORDING CONTROLS\n            ════════════════════════════════════════ */}\n        <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>\n\n          {/* ── \"Agent / Customer\" + Controls — horizontal, space-between, center ── */}\n          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>\n          <span style={{\n            fontSize: 14, fontWeight: 500,\n            color: 'var(--Grey-Strong, #2E3236)',\n            lineHeight: 1.2,\n          }}>\n            {agentName} / {customerName}\n          </span>\n\n          {/* Controls — horizontal, gap: 12, center */}\n          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>\n            {/* Skip back 10s */}\n            <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--Grey-Muted, #808183)', lineHeight: 1.2 }}>10</span>\n            <button onClick={handleSeekBack} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center' }}>\n              <RotateCcw size={20} color=\"#808183\" strokeWidth={1.5} />\n            </button>\n\n            {/* Play / Pause — 32x32 dark circle */}\n            <button onClick={handleTogglePlay} style={{\n              background: 'var(--Grey-Strong, #2E3236)',\n              border: 'none', cursor: 'pointer',\n              width: 32, height: 32, borderRadius: 48,\n              padding: 0,\n              display: 'flex', alignItems: 'center', justifyContent: 'center',\n            }}>\n              {activePlaying\n                ? <Pause size={14} color=\"#FFF\" fill=\"#FFF\" />\n                : <Play size={14} color=\"#FFF\" fill=\"#FFF\" strokeWidth={1.5} style={{ marginLeft: 2 }} />\n              }\n            </button>\n\n            {/* Skip forward 10s */}\n            <button onClick={handleSeekForward} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center' }}>\n              <RotateCw size={20} color=\"#808183\" strokeWidth={1.5} />\n            </button>\n            <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--Grey-Muted, #808183)', lineHeight: 1.2 }}>10</span>\n          </div>\n\n          {/* Speed pill with dropdown */}\n          <div style={{ position: 'relative' }}>\n            <button\n              onClick={() => setShowSpeedMenu((prev) => !prev)}\n              style={{\n                background: 'var(--Grey-White, #FFF)',\n                border: '1px solid var(--Grey-absent, #D9D9D9)',\n                borderRadius: 20,\n                padding: '0 5px 0 10px',\n                height: 24,\n                minWidth: 56,\n                cursor: 'pointer',\n                fontSize: 13, fontWeight: 400,\n                color: 'var(--Grey-Strong, #2E3236)',\n                fontFamily: 'var(--font-sans)',\n                lineHeight: 1.2,\n                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,\n              }}\n            >\n              {activeRate}x\n              <ChevronDown size={12} color=\"#808183\" />\n            </button>\n\n            {showSpeedMenu && (\n              <div style={{\n                position: 'absolute',\n                top: '100%',\n                right: 0,\n                marginTop: 4,\n                background: 'var(--Grey-White, #FFF)',\n                border: '1px solid var(--Grey-absent, #D9D9D9)',\n                borderRadius: 8,\n                boxShadow: '0 4px 12px rgba(0,0,0,0.1)',\n                zIndex: 10,\n                overflow: 'hidden',\n                minWidth: 80,\n              }}>\n                {SPEED_OPTIONS.map((speed) => (\n                  <button\n                    key={speed}\n                    onClick={() => handleSetRate(speed)}\n                    style={{\n                      display: 'block',\n                      width: '100%',\n                      padding: '8px 12px',\n                      border: 'none',\n                      background: activeRate === speed ? 'var(--surface-hover, #F3F7F7)' : 'var(--Grey-White, #FFF)',\n                      cursor: 'pointer',\n                      fontSize: 13,\n                      fontWeight: activeRate === speed ? 600 : 400,\n                      color: 'var(--Grey-Strong, #2E3236)',\n                      fontFamily: 'var(--font-sans)',\n                      textAlign: 'left',\n                    }}\n                  >\n                    {speed}x\n                  </button>\n                ))}\n              </div>\n            )}\n          </div>\n        </div>\n\n        {/* ── Row 2: Progress bar (V4 style for all modes) ── */}\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n          {/* Time label + scrubber bar — same layout as speaker rows: 60px label + 8px gap + flex bar */}\n          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n            <span style={{\n              fontSize: 13, fontWeight: 600,\n              color: progress > 0 ? 'var(--Green-Primary, #00925F)' : 'var(--Grey-Strong, #2E3236)',\n              fontFamily: 'var(--font-sans)',\n              lineHeight: 1.2,\n              minWidth: 60,\n            }}>\n              {fmtTime(displayTime)}\n            </span>\n            <div\n              onClick={(e) => {\n                const rect = e.currentTarget.getBoundingClientRect();\n                const clickX = e.clientX - rect.left;\n                const pct = Math.max(0, Math.min(1, clickX / rect.width));\n                handleSeek(pct * effectiveDuration);\n              }}\n              style={{\n                flex: 1, height: 16,\n                position: 'relative',\n                display: 'flex', alignItems: 'center',\n                cursor: 'pointer',\n              }}\n            >\n              {/* Background track */}\n              <div style={{\n                position: 'absolute', left: 0, right: 0,\n                height: 4, borderRadius: 2,\n                background: 'var(--rail-surface-2, #E3E1D7)',\n                pointerEvents: 'none',\n              }} />\n              {/* Played portion */}\n              <div style={{\n                position: 'absolute', left: 0, top: '50%',\n                transform: 'translateY(-50%)',\n                width: `${progress}%`,\n                height: 4, borderRadius: 2,\n                background: 'var(--Green-Primary, #00925F)',\n                pointerEvents: 'none',\n              }} />\n              {/* Scrubber handle */}\n              <svg\n                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                style={{\n                  position: 'absolute',\n                  left: `${progress}%`,\n                  top: '50%',\n                  transform: 'translate(-50%, -50%)',\n                  pointerEvents: 'none',\n                }}\n              >\n                <path\n                  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\"\n                  fill=\"#FFF\"\n                  stroke=\"#00925F\"\n                  strokeWidth=\"2\"\n                />\n              </svg>\n              {/* Duration at end — positioned inside the track so it doesn't affect track width */}\n              <span style={{\n                position: 'absolute',\n                right: -48,\n                fontSize: 13, fontWeight: 400,\n                color: 'var(--Grey-Muted, #808183)',\n                fontFamily: 'var(--font-sans)',\n                lineHeight: 1.2,\n                whiteSpace: 'nowrap',\n              }}>\n                {fmtTime(effectiveDuration)}\n              </span>\n            </div>\n          </div>\n\n          {/* ── Speaker timeline bars + playback indicator ── */}\n          <div style={{ position: 'relative', paddingBottom: 30, cursor: 'pointer' }}>\n            {[agentName, customerName].map((speaker, rowIdx) => {\n              const isAgent = rowIdx === 0;\n              // Build segments from real timelineSegments or fall back to demo\n              const speakerSegments = timelineSegments?.length\n                ? timelineSegments\n                    .filter(s => isAgent ? s.actor === agentName : s.actor === customerName)\n                    .map(s => ({\n                      start: effectiveDuration > 0 ? s.startTime / effectiveDuration : 0,\n                      end: effectiveDuration > 0 ? s.endTime / effectiveDuration : 0,\n                    }))\n                : (DEMO_SEGMENTS[isAgent ? 'Agent' : 'Customer'] || []);\n\n              return (\n                <div key={speaker} style={{\n                  display: 'flex', alignItems: 'center', gap: 8,\n                  height: 20,\n                  marginBottom: rowIdx === 0 ? 4 : 0,\n                }}>\n                  <span style={{\n                    fontSize: 13, fontWeight: 400,\n                    color: 'var(--Grey-Muted, #808183)',\n                    fontFamily: 'var(--font-sans)',\n                    lineHeight: 1.2,\n                    minWidth: 60,\n                  }}>\n                    {speaker}\n                  </span>\n                  <div\n                    onClick={(e) => {\n                      const rect = e.currentTarget.getBoundingClientRect();\n                      const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n                      handleSeek(pct * effectiveDuration);\n                    }}\n                    style={{\n                      flex: 1, height: 6,\n                      position: 'relative', borderRadius: 3,\n                      cursor: 'pointer',\n                    }}\n                  >\n                    {/* Thin baseline */}\n                    <div style={{\n                      position: 'absolute', left: 0, right: 0,\n                      top: '50%', transform: 'translateY(-50%)',\n                      height: 4, borderRadius: 2,\n                      background: 'var(--rail-surface-2, #E3E1D7)',\n                    }} />\n                    {/* Speech segments */}\n                    {speakerSegments.map((seg, i) => (\n                      <div key={i} style={{\n                        position: 'absolute',\n                        left: `${seg.start * 100}%`,\n                        width: `${(seg.end - seg.start) * 100}%`,\n                        top: 0, bottom: 0, borderRadius: 3,\n                        background: isAgent\n                          ? 'var(--Grey-Strong, #2E3236)'\n                          : 'var(--Grey-Muted, #808183)',\n                      }} />\n                    ))}\n                  </div>\n                </div>\n              );\n            })}\n\n            {/* ── Playback position: dotted line + time tooltip ── */}\n            <div style={{\n              position: 'absolute',\n              left: 68,   /* 60 label + 8 gap */\n              right: 0,\n              top: 0,\n              bottom: 0,\n              pointerEvents: 'none',\n            }}>\n              {/* Dotted vertical line */}\n              <div style={{\n                position: 'absolute',\n                left: `${progress}%`,\n                top: 0,\n                height: 44,\n                transform: 'translateX(-50%)',\n                borderLeft: '1.5px dashed var(--Grey-Muted, #808183)',\n                opacity: 0.5,\n              }} />\n\n              {/* Time tooltip */}\n              <div style={{\n                position: 'absolute',\n                left: `${progress}%`,\n                bottom: 0,\n                transform: 'translateX(-50%)',\n                background: 'var(--Grey-Strong, #2E3236)',\n                color: 'var(--Grey-White, #FFF)',\n                fontSize: 14, fontWeight: 600,\n                lineHeight: 1.2,\n                padding: '4px 6px',\n                borderRadius: 4,\n                whiteSpace: 'nowrap',\n              }}>\n                {fmtTime(displayTime)}\n              </div>\n            </div>\n          </div>\n\n          {/* Hidden audio element — only for self-managed mode */}\n          {selfManaged && (\n            <audio ref={internalAudioRef} preload=\"auto\" style={{ display: 'none' }}>\n              <source src={audioUrl} type=\"audio/mpeg\" />\n            </audio>\n          )}\n          {/* Hidden audio element — for parent-managed mode */}\n          {parentManaged && audioUrl && (\n            <audio ref={externalAudioRef} preload=\"auto\" style={{ display: 'none' }}>\n              <source src={audioUrl} type=\"audio/mpeg\" />\n            </audio>\n          )}\n        </div>\n      </div>\n\n      {/* ════════════════════════════════════════\n          TRANSCRIPT SECTION\n          ════════════════════════════════════════ */}\n      {/* Figma: Frame 49, vertical, gap: 16 */}\n      <div style={{\n        width: '100%',\n        display: 'flex', flexDirection: 'column', gap: 16,\n      }}>\n        {/* ── Header: Transcript ── */}\n        <div style={{\n          borderBottom: '1px solid var(--Grey-absent, #D9D9D9)',\n          paddingBottom: 16,\n        }}>\n          <span style={{\n            fontSize: 14, fontWeight: 400,\n            color: 'var(--Grey-Strong, #2E3236)',\n            lineHeight: 1.2,\n          }}>\n            Transcript\n          </span>\n        </div>\n\n        {/* ── Cards — V4 style for both real and demo data ── */}\n        <div id=\"transcript-container\" ref={scrollRef} style={{\n          display: 'flex', flexDirection: 'column',\n          maxHeight: 600, overflowY: 'auto',\n        }}>\n          {(turns || DEMO_TRANSCRIPT.map((card) => ({\n            actor: card.speaker,\n            actorType: card.type,\n            text: card.text,\n            timeRange: card.time,\n          }))).map((card, i) => {\n            const isRealData = !!turns;\n            const isActive = isRealData\n              ? (activePlaying && activeTurnIndex === i)\n              : (i === activeDemoIdx && activePlaying);\n            const isCustomer = (card.actorType || card.type) === 'customer';\n\n            return (\n              <div key={i} style={{\n                display: 'flex',\n                padding: 16,\n                flexDirection: 'column',\n                alignItems: 'flex-start',\n                gap: 16,\n                alignSelf: 'stretch',\n                borderTop: i > 0 ? '1px solid var(--Grey-absent, #D9D9D9)' : 'none',\n                background: isActive ? 'var(--surface-hover, #F3F7F7)' : 'var(--Grey-White, #FFF)',\n              }}>\n                {/* Speaker name + time */}\n                <div style={{\n                  display: 'flex', alignItems: 'center',\n                  justifyContent: 'space-between', width: '100%',\n                  gap: 8,\n                }}>\n                  <span style={{\n                    fontSize: 14, fontWeight: 600,\n                    lineHeight: 1.2,\n                    color: isCustomer ? 'var(--Grey-Strong, #2E3236)' : 'var(--Grey-Muted, #808183)',\n                  }}>\n                    {card.actor}\n                  </span>\n                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n                    {isActive && (\n                      <>\n                        <AudioLines size={12} color=\"#2E3236\" />\n                        <AudioLines size={12} color=\"#2E3236\" />\n                      </>\n                    )}\n                    <span style={{\n                      fontSize: 13, fontWeight: 400,\n                      lineHeight: 1.2,\n                      color: 'var(--Grey-Muted, #808183)',\n                    }}>\n                      {card.timeRange}\n                    </span>\n                  </div>\n                </div>\n\n                {/* Play/Pause icon + text */}\n                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, width: '100%' }}>\n                  <button\n                    onClick={() => {\n                      if (isRealData && onTurnPlayPause) {\n                        onTurnPlayPause(card, i);\n                      } else {\n                        handleDemoTurnPlayPause(i);\n                      }\n                    }}\n                    style={{\n                      background: 'none', border: 'none',\n                      cursor: 'pointer', padding: 0,\n                      flexShrink: 0,\n                      display: 'flex',\n                    }}\n                  >\n                    {isActive ? (\n                      <PauseCircle size={17} color=\"#2E3236\" strokeWidth={1.5} />\n                    ) : (\n                      <PlayCircle size={17} color=\"#808183\" strokeWidth={1} />\n                    )}\n                  </button>\n                  <p style={{\n                    fontSize: 13, fontWeight: 400,\n                    color: 'var(--Grey-Strong, #2E3236)',\n                    lineHeight: 1.2,\n                    margin: 0,\n                    flex: 1,\n                  }}>\n                    {card.text}\n                  </p>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n      </div>{/* end card */}\n    </div>\n  );\n});\n\nexport default UpdatedInteractionRecording;\n"],"names":["fmtTime","seconds","m","s","DEMO_SEGMENTS","DEMO_TRANSCRIPT","SPEED_OPTIONS","parseTimeStr","timeStr","parts","UpdatedInteractionRecording","forwardRef","audioUrl","timelineSegments","durationSeconds","externalCurrentTime","externalPlaying","externalRate","externalOnSeek","externalOnTogglePlay","externalOnSeekBack","externalOnSeekForward","externalOnSetPlaybackRate","externalAudioRef","agentName","customerName","transcript","highlightedTurns","activeTurnIndex","activeDemoIndex","turnObservations","setExpandedSignals","onTurnPlayPause","ref","scrollRef","useRef","internalAudioRef","animFrameRef","internalPlaying","setInternalPlaying","useState","internalCurrentTime","setInternalCurrentTime","internalDuration","setInternalDuration","internalRate","setInternalRate","demoSeekTime","setDemoSeekTime","demoRate","setDemoRate","demoPlaying","setDemoPlaying","showSpeedMenu","setShowSpeedMenu","activeDemoIdx","setActiveDemoIdx","parentManaged","isDemo","selfManaged","activePlaying","activeCurrentTime","activeRate","activeDuration","startTimeTracking","useCallback","tick","audio","stopTimeTracking","useEffect","onLoaded","onEnded","computeActiveIdx","timeSec","i","turnTime","handleSeek","timeSeconds","clamped","handleTogglePlay","prev","handleSeekBack","handleSeekForward","handleSetRate","rate","useImperativeHandle","idx","cards","_a","handleDemoTurnPlayPause","formatTimeRange","startMs","endMs","fmt","ms","minutes","turns","_b","obs","el","effectiveTime","effectiveDuration","progress","displayTime","jsxs","jsx","FileSignal","RotateCcw","Pause","Play","RotateCw","ChevronDown","speed","rect","clickX","pct","speaker","rowIdx","isAgent","speakerSegments","e","seg","card","isRealData","isActive","isCustomer","Fragment","AudioLines","PauseCircle","PlayCircle"],"mappings":"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"}

package/dist/components/UpdatedInteractionDetails.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),k=require("react"),o=require("lucide-react"),fe=require("../UpdatedInteractionRecording.cjs.js");require("../Timeline.cjs.js");const c={strong:"var(--Grey-Strong, #2E3236)",muted:"var(--Grey-Muted, #808183)",absent:"var(--Grey-absent, #D9D9D9)",accent:"var(--rail-orange, #C98A5A)",itemText:"var(--text-item, #3F3F3F)",quoteLine:"var(--border-warm, #B2AEA8)",quoteText:"var(--text-subtle-warm, #767473)",iconBg:"var(--surface-hover, #F3F7F7)"},Ee={effective:"Effective",strong:"Strong",needs_improvement:"Needs Improvement",mixed:"Mixed"},re="updated-coaching-synthesis-keyframes";function Te(){if(typeof document>"u"||document.getElementById(re))return;const t=document.createElement("style");t.id=re,t.textContent=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("react"),r=require("lucide-react"),he=require("../UpdatedInteractionRecording.cjs.js"),c={strong:"var(--Grey-Strong, #2E3236)",muted:"var(--Grey-Muted, #808183)",absent:"var(--Grey-absent, #D9D9D9)",accent:"var(--rail-orange, #C98A5A)",itemText:"var(--text-item, #3F3F3F)",quoteLine:"var(--border-warm, #B2AEA8)",quoteText:"var(--text-subtle-warm, #767473)",iconBg:"var(--surface-hover, #F3F7F7)"},Ne={effective:"Effective",strong:"Strong",needs_improvement:"Needs Improvement",mixed:"Mixed"},le="updated-coaching-synthesis-keyframes";function Ve(){if(typeof document>"u"||document.getElementById(le))return;const t=document.createElement("style");t.id=le,t.textContent=`
     @keyframes updated-coaching-shimmer {
       0% { background-position: -200% 0; }
       100% { background-position: 200% 0; }
@@ -7,5 +7,5 @@
       0%, 100% { opacity: 0.4; }
       50% { opacity: 1; }
     }
-  `,document.head.appendChild(t)}function Le({overall:t}){const n=Ee[t]||(t?t.replace(/_/g," "):"");return e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,flexShrink:0},children:[e.jsx("span",{style:{fontSize:13,fontWeight:400,color:c.strong,fontFamily:"var(--font-sans)",lineHeight:1.2},children:"Overall:"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx(o.ThumbsUp,{size:14,color:c.strong,strokeWidth:1.5}),e.jsx("span",{style:{fontSize:13,fontWeight:600,color:c.strong,fontFamily:"var(--font-sans)",lineHeight:1.2},children:n})]})]})}function Be({item:t}){const n=typeof t=="string"?t:(t==null?void 0:t.text)||"",s=typeof t=="object"?t==null?void 0:t.quote:null;return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:14},children:[e.jsx("div",{style:{fontSize:14,fontWeight:600,color:c.itemText,fontFamily:"var(--font-sans)",lineHeight:1.5},children:n}),s&&e.jsxs("div",{style:{display:"flex",gap:10},children:[e.jsx("div",{style:{width:1,flexShrink:0,alignSelf:"stretch",background:c.quoteLine}}),e.jsxs("div",{style:{fontSize:14,fontWeight:400,color:c.quoteText,fontFamily:"var(--font-sans)",lineHeight:1.5},children:["“",s,"”"]})]})]})}function le({icon:t,label:n,items:s}){return!s||s.length===0?null:e.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:16,borderRadius:12},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16},children:[e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,borderRadius:9999,background:c.iconBg,flexShrink:0},children:t}),e.jsx("span",{style:{fontSize:16,fontWeight:600,color:c.strong,fontFamily:"var(--font-sans)",lineHeight:"normal"},children:n})]}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:24},children:s.map((d,g)=>e.jsx(Be,{item:d},g))})]})}const he=({data:t,loading:n,error:s})=>{var y,x;if(k.useEffect(()=>{Te()},[]),n)return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("div",{style:{width:6,height:6,borderRadius:"50%",background:c.accent,animation:"updated-coaching-pulse 1.5s ease-in-out infinite"}}),e.jsx("span",{style:{fontSize:14,color:c.muted,fontWeight:500},children:"Synthesizing coaching summary..."})]}),[180,260,220].map((S,b)=>e.jsx("div",{style:{height:10,width:S,maxWidth:"100%",borderRadius:4,background:`linear-gradient(90deg, ${c.absent} 25%, var(--shimmer-mid, #ECECEC) 50%, ${c.absent} 75%)`,backgroundSize:"200% 100%",animation:"updated-coaching-shimmer 1.8s ease-in-out infinite",animationDelay:`${b*.2}s`}},b))]});if(s)return e.jsx("div",{style:{fontSize:14,color:c.muted},children:"Unable to generate coaching summary."});if(!t)return null;const d=t.strengths||[],g=t.improvements||[],f=typeof t.one_liner=="string"?t.one_liner:((y=t.one_liner)==null?void 0:y.text)||"",m=typeof t.context=="string"?t.context:((x=t.context)==null?void 0:x.text)||"";return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:16,background:"#FFF"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(o.ShieldCheck,{size:20,color:c.accent,strokeWidth:2}),e.jsx("span",{style:{fontSize:16,fontWeight:600,color:c.strong,fontFamily:"var(--font-sans)",lineHeight:1.2,textTransform:"uppercase"},children:"Coaching Summary"})]}),f&&e.jsx("div",{style:{fontSize:14,fontWeight:500,color:c.strong,fontFamily:"var(--font-sans)",lineHeight:1.5},children:f}),e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:16,justifyContent:"space-between"},children:[m&&e.jsx("div",{style:{fontSize:14,fontWeight:400,color:c.muted,fontFamily:"var(--font-sans)",lineHeight:1.5,flex:1},children:m}),t.overall&&e.jsx(Le,{overall:t.overall})]}),(d.length>0||g.length>0)&&e.jsxs("div",{style:{display:"flex",gap:24,paddingTop:24,borderTop:`1px solid ${c.absent}`},children:[e.jsx(le,{icon:e.jsx(o.TrendingUp,{size:14,color:c.strong,strokeWidth:1.5}),label:"Key Strengths",items:d}),e.jsx(le,{icon:e.jsx(o.Lightbulb,{size:14,color:c.strong,strokeWidth:1.5}),label:"Improvements",items:g})]})]})};function $e(t){const n=Math.floor(t/60),s=Math.round(t%60);return`${n}:${s.toString().padStart(2,"0")}`}const Pe={display:"flex",justifyContent:"space-between",padding:"8px 8px 12px 8px",alignItems:"center",gap:24,fontFamily:"var(--font-sans)",fontSize:13,fontWeight:400,lineHeight:"normal",borderBottom:"1px solid var(--Grey-absent, #D9D9D9)"},ae={display:"flex",flexDirection:"column",flex:"1 0 0",gap:12,minWidth:0},ye=({meta:t={},callPurpose:n={},classification:s={},dimensions:d=[],outcomeQuality:g="Neutral",onMoreDetails:f})=>{const m=t.duration_seconds!=null?$e(t.duration_seconds):null,y=t.message_count,x=n.interaction_driver,S=s.interaction_paradigm,b=[m!=null&&{label:"Duration",value:m},x!=null&&{label:"Driver",value:x},...d.filter((i,p)=>p%2===0).map(i=>({label:i.label||i.key,value:i.value})),{label:"Outcome Quality",value:g}].filter(Boolean),w=[y!=null&&{label:"Messages",value:y},S!=null&&{label:"Paradigm",value:S},...d.filter((i,p)=>p%2===1).map(i=>({label:i.label||i.key,value:i.value})),{label:"More Details",isLink:!0}].filter(Boolean),l=i=>i.isLink?e.jsxs("div",{onClick:f,style:{display:"flex",alignItems:"center",gap:6,padding:"8px 0 8px 0",cursor:"pointer",fontFamily:"var(--font-sans)"},children:[e.jsx(o.ExternalLink,{size:16,color:"#808183",strokeWidth:1.5}),e.jsx("span",{style:{color:"var(--Grey-Strong, #2E3236)",fontSize:13,fontWeight:400},children:i.label})]},i.label):e.jsxs("div",{style:Pe,children:[e.jsx("span",{style:{color:"var(--Grey-Strong, #2E3236)",whiteSpace:"nowrap",flexShrink:0},children:i.label}),e.jsx("span",{style:{color:"var(--Grey-Muted, #808183)",textAlign:"right"},children:i.value})]},i.label);return e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:24,alignSelf:"stretch"},children:[e.jsx("div",{style:ae,children:b.map(i=>l(i))}),e.jsx("div",{style:ae,children:w.map(i=>l(i))})]})},r={strong:"var(--Grey-Strong, #2E3236)",muted:"var(--Grey-Muted, #808183)",absent:"var(--Grey-absent, #D9D9D9)",white:"var(--Grey-White, #FFF)",cardBg:"var(--surface-warm-40, rgba(243, 241, 229, 0.40))"},v=1.2,de=3,ce=t=>t!=null?Math.round(t*100)+"%":"—",ge=t=>{if(t==null)return"—";const n=(t*100).toFixed(1);return t>0?`+${n}pp`:`${n}pp`},xe=({outcomeLift:t,driverLabels:n=[]})=>{var b;if(!t||t.lift==null)return null;const s=t.p_expected,d=t.p_full,g=t.lift_raw??(d!=null&&s!=null?d-s:null),f=t.lift,m=(b=t.interpretation)!=null&&b.lift_band?t.interpretation.lift_band.replace(/_/g," "):f>=0?"Positive":"Negative",y=m.charAt(0).toUpperCase()+m.slice(1),x=n.slice(0,de),S=n.length-de;return e.jsxs("div",{style:{display:"flex",flexDirection:"column",padding:24,gap:24,borderRadius:8,border:`1px solid ${r.absent}`,background:r.cardBg,alignSelf:"stretch"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:32},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:24,alignSelf:"stretch"},children:[e.jsx("span",{style:{fontSize:15,fontWeight:600,color:r.strong,fontFamily:"var(--font-sans)",lineHeight:v},children:"Agent Lift Analysis"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,fontFamily:"var(--font-sans)"},children:[e.jsx("span",{style:{fontSize:13,fontWeight:400,color:r.strong,lineHeight:v},children:"vs. Average Agent:"}),e.jsx("span",{style:{fontSize:14,fontWeight:600,color:r.strong,lineHeight:v},children:ge(f)}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6,paddingLeft:8,borderLeft:`1px solid ${r.absent}`},children:[e.jsx(o.ThumbsUp,{size:14,color:r.strong}),e.jsx("span",{style:{fontSize:13,fontWeight:600,color:r.strong,lineHeight:v},children:y})]})]})]}),e.jsxs("div",{style:{display:"flex",alignItems:"flex-end",gap:24},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:16,alignItems:"center"},children:[e.jsx("span",{style:{fontSize:28,fontWeight:400,color:r.muted,fontFamily:"var(--font-sans)",lineHeight:v},children:ce(s)}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsx("span",{style:{fontSize:13,fontWeight:400,color:r.strong,fontFamily:"var(--font-sans)",lineHeight:v},children:"Expected Outcome"}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:r.muted,fontFamily:"var(--font-sans)",lineHeight:v},children:"Based on call type & difficulty"})]})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:16,alignItems:"center",paddingLeft:24,borderLeft:`1px solid ${r.absent}`},children:[e.jsx("span",{style:{fontSize:28,fontWeight:400,color:r.muted,fontFamily:"var(--font-sans)",lineHeight:v},children:ge(g)}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsx("span",{style:{fontSize:13,fontWeight:400,color:r.strong,fontFamily:"var(--font-sans)",lineHeight:v},children:"Agent Impact"}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:r.muted,fontFamily:"var(--font-sans)",lineHeight:v},children:"Behavior-driven change"})]})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:16,alignItems:"center",paddingLeft:24,borderLeft:`1px solid ${r.absent}`},children:[e.jsx("span",{style:{fontSize:28,fontWeight:400,color:r.strong,fontFamily:"var(--font-sans)",lineHeight:v},children:ce(d)}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsx("span",{style:{fontSize:13,fontWeight:600,color:r.strong,fontFamily:"var(--font-sans)",lineHeight:v},children:"Predicted Outcome"}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:r.muted,fontFamily:"var(--font-sans)",lineHeight:v},children:"With agent behaviors"})]})]})]})]}),n.length>0&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:4,alignSelf:"stretch"},children:[e.jsx("span",{style:{fontSize:12,fontWeight:600,color:r.strong,fontFamily:"var(--font-sans)",lineHeight:v},children:"Key Drivers"}),e.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:4},children:[x.map((w,l)=>e.jsx("div",{style:{display:"flex",padding:8,alignItems:"center",justifyContent:"center",borderRadius:4,border:`1px solid ${r.absent}`,background:r.white},children:e.jsx("span",{style:{fontSize:12,fontWeight:400,color:r.strong,fontFamily:"var(--font-sans)",lineHeight:v,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:200},children:w})},l)),S>0&&e.jsx("div",{style:{display:"flex",padding:8,alignItems:"center",justifyContent:"center",borderRadius:4,border:`1px solid ${r.absent}`,background:r.white},children:e.jsxs("span",{style:{fontSize:12,fontWeight:400,color:r.strong,fontFamily:"var(--font-sans)",lineHeight:v,whiteSpace:"nowrap"},children:["+ ",S]})})]})]})]})},pe=({children:t,size:n=28,onClick:s,title:d})=>{const[g,f]=k.useState(!1);return e.jsx("div",{title:d,onClick:s,onMouseEnter:()=>f(!0),onMouseLeave:()=>f(!1),style:{display:"flex",alignItems:"center",justifyContent:"center",width:n,height:n,borderRadius:9999,background:g?"var(--surface-hover, #F3F7F7)":"transparent",cursor:"pointer",flexShrink:0,transition:"background 0.15s"},children:t})},ue=({signals:t={signals:[],present_count:0,total_signals_evaluated:0},expandedSignals:n=new Set,toggleSignal:s=()=>{},playEvidence:d=()=>{},highlightTurns:g=()=>{},onShowInTranscript:f=()=>{},timelinePlaying:m=!1,currentTimeSeconds:y=0})=>{const x=(t==null?void 0:t.signals)??[],S=(t==null?void 0:t.present_count)??x.length,b=l=>{const i=Math.floor(l/6e4),p=Math.floor(l%6e4/1e3);return`${i.toString().padStart(2,"0")}:${p.toString().padStart(2,"0")}`},w=l=>m&&l.start_ms!=null&&y*1e3>=l.start_ms&&y*1e3<=(l.end_ms??l.start_ms+5e3);return e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-start",alignSelf:"stretch",width:"100%",gap:16},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16,width:"100%"},children:[e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:34,height:34,borderRadius:9999,background:"var(--surface-hover, #F3F7F7)",flexShrink:0},children:e.jsx(o.FileSignal,{size:20,color:"#2E3236",strokeWidth:1.5})}),e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",flex:1},children:[e.jsx("span",{style:{fontSize:15,fontWeight:500,color:"var(--Grey-Strong, #2E3236)"},children:"Signals"}),e.jsxs("span",{style:{fontSize:14,fontWeight:500,color:"var(--Grey-Strong, #2E3236)"},children:[S," Signals Detected"]})]})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignSelf:"stretch",background:"var(--Grey-White, #FFF)",gap:8},children:[x.length===0&&e.jsx("div",{style:{padding:"8px 0",fontSize:14,color:"var(--Grey-Muted, #808183)"},children:"No signals detected."}),x.map((l,i)=>{var D,F,_;const p=l.key??l.id??i,h=n.has(p),C=((D=l.observations)==null?void 0:D.length)??0;return e.jsxs("div",{id:`signal-${p}`,style:{display:"flex",flexDirection:"column",width:"100%",gap:8},children:[e.jsxs("button",{onClick:()=>s(p),style:{display:"flex",padding:"8px 0",alignItems:"center",gap:12,alignSelf:"stretch",width:"100%",background:"none",border:"none",borderBottom:"1px solid var(--Grey-absent, #D9D9D9)",cursor:"pointer"},children:[e.jsxs("span",{style:{flex:1,textAlign:"left",fontSize:14,fontWeight:600,color:"var(--text-dark, #0B0A0A)",lineHeight:1.71},children:[l.display_name||((F=l.key)==null?void 0:F.replace(/_/g," ")),C>0&&e.jsxs("span",{style:{fontWeight:600,color:"var(--text-dark, #0B0A0A)",marginLeft:6},children:["(",C,")"]})]}),h?e.jsx(o.ChevronUp,{size:20,color:"#767473"}):e.jsx(o.ChevronDown,{size:20,color:"#767473"})]}),h&&((_=l.observations)==null?void 0:_.length)>0&&e.jsx("div",{style:{display:"flex",flexDirection:"column",alignSelf:"stretch",gap:0},children:l.observations.map((W,E)=>{var A,G,H;return e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignSelf:"stretch",gap:8},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,padding:"8px 0",justifyContent:"space-between"},children:[e.jsx("span",{style:{flex:1,fontSize:14,fontWeight:400,color:"var(--text-subtle-warm, #767473)",lineHeight:1.5},children:W.reason||W.explanation}),((G=(A=W.evidence)==null?void 0:A[0])==null?void 0:G.start_ms)!=null&&e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,flexShrink:0},children:[e.jsx(pe,{size:28,title:"Show in transcript",onClick:I=>{I.stopPropagation(),f(W.evidence[0].start_ms)},children:e.jsx(o.ScrollText,{size:16,color:"#808183",strokeWidth:1.5})}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1.2,whiteSpace:"nowrap"},children:b(W.evidence[0].start_ms)})]})]}),(H=W.evidence)==null?void 0:H.map((I,T)=>I.text&&e.jsxs("div",{onClick:L=>{L.stopPropagation(),d(I)},onMouseEnter:()=>g(I.turn_ids??[]),onMouseLeave:()=>g([]),style:{display:"flex",alignItems:"center",gap:8,padding:"8px 0",cursor:"pointer"},children:[e.jsx(pe,{size:28,children:e.jsx(o.PlayCircle,{size:17,color:w(I)?"var(--rail-orange, #C98A5A)":"var(--Grey-Muted, #808183)",strokeWidth:1})}),e.jsxs("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2},children:["“",I.text,"”"]})]},T))]},W.key??E)})})]},p)})]})]})},j={strong:"var(--Grey-Strong, #2E3236)",muted:"var(--Grey-Muted, #808183)",absent:"var(--Grey-absent, #D9D9D9)",white:"var(--Grey-White, #FFF)",accent:"var(--rail-orange, #C98A5A)",track:"var(--rail-surface-2, #E3E1D7)",infoIcon:"var(--color-input-border, #ACACAD)"},Ue=({score:t=4,maxScore:n=10})=>{const S=Math.min(Math.round(t/n*5),5),b=180/5,w=p=>{const h=p*Math.PI/180;return{x:121.5+85*Math.cos(h),y:123-85*Math.sin(h)}},l=(p,h)=>{const C=w(p),D=w(h),F=p-h>180?1:0;return`M ${C.x} ${C.y} A 85 85 0 ${F} 1 ${D.x} ${D.y}`},i=2;return e.jsx("svg",{width:243,height:130,viewBox:"0 0 243 130",fill:"none",children:Array.from({length:5},(p,h)=>{const C=180-h*b-(h>0?i/2:0),D=180-(h+1)*b+(h<5-1?i/2:0),F=h<S;return e.jsx("path",{d:l(C,D),stroke:F?j.strong:j.track,strokeWidth:30,strokeLinecap:"butt",fill:"none"},h)})})},Oe=({value:t=0,maxValue:n=5})=>e.jsx("div",{style:{display:"flex",gap:2},children:Array.from({length:n},(s,d)=>e.jsx("div",{style:{width:22,height:6,borderRadius:1,background:d<t?j.strong:j.track}},d))}),qe=({label:t,value:n=0,maxValue:s=5})=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8,padding:8,alignItems:"center"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("span",{style:{fontSize:12,fontWeight:400,color:j.strong,fontFamily:"var(--font-sans)",lineHeight:"normal"},children:t}),e.jsx(o.Info,{size:14,color:j.infoIcon,strokeWidth:1})]}),e.jsx(Oe,{value:n,maxValue:s})]}),ve=({score:t=83,maxScore:n=100,predictedScore:s=4,predictedLabel:d="Predicted Objective",description:g="",legends:f=[{label:"CSAT",value:3},{label:"Resolution",value:4},{label:"Process Adherence",value:5},{label:"Communication",value:3}]})=>{const m=String(s).padStart(2,"0");return e.jsxs("div",{style:{display:"flex",flexDirection:"column",padding:24,borderRadius:8,border:`1px solid ${j.absent}`,background:j.white,alignSelf:"stretch",gap:24},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsx("span",{style:{fontSize:15,fontWeight:600,color:j.strong,fontFamily:"var(--font-sans)",lineHeight:1.2},children:"Compass Score"}),e.jsx("span",{style:{fontSize:14,fontWeight:400,color:j.muted,fontFamily:"var(--font-sans)",lineHeight:"normal"},children:g})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:48,flex:1},children:[e.jsxs("div",{style:{display:"flex",width:243,flexDirection:"column",alignItems:"center",flexShrink:0},children:[e.jsx(Ue,{score:t,maxScore:n}),e.jsxs("svg",{width:"34",height:"35",viewBox:"0 0 34 35",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{marginTop:-24},children:[e.jsx("path",{d:"M16 25.2169C19.958 25.2169 23.1667 22.0083 23.1667 18.0503C23.1667 14.0922 19.958 10.8836 16 10.8836C12.042 10.8836 8.83334 14.0922 8.83334 18.0503C8.83334 22.0083 12.042 25.2169 16 25.2169Z",fill:"var(--rail-orange, #C98A5A)"}),e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M30.4791 11.2328L33.4351 0L21.6888 3.09113C19.9212 2.41855 18.0036 2.05025 16 2.05025C7.16344 2.05025 0 9.2137 0 18.0503C0 26.8868 7.16344 34.0503 16 34.0503C24.8366 34.0503 32 26.8868 32 18.0503C32 15.6119 31.4546 13.301 30.4791 11.2328ZM16 30.5503C22.9036 30.5503 28.5 24.9538 28.5 18.0503C28.5 11.1467 22.9036 5.55025 16 5.55025C9.09644 5.55025 3.5 11.1467 3.5 18.0503C3.5 24.9538 9.09644 30.5503 16 30.5503Z",fill:"var(--rail-orange, #C98A5A)"})]}),e.jsx("div",{style:{fontSize:28,fontWeight:400,color:j.strong,fontFamily:"var(--font-sans)",lineHeight:1,textAlign:"center",marginTop:8},children:t})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8,alignItems:"center",justifyContent:"center",flex:1},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center"},children:[e.jsx("div",{style:{fontSize:28,fontWeight:400,color:j.strong,fontFamily:"var(--font-sans)",lineHeight:1,textAlign:"center"},children:m}),e.jsx("div",{style:{fontSize:14,fontWeight:400,color:j.muted,fontFamily:"var(--font-sans)",lineHeight:1.43,textAlign:"center"},children:d})]}),e.jsx("div",{style:{width:"100%",height:1,background:j.absent}}),f.map((y,x)=>e.jsx(qe,{label:y.label,value:y.value},x))]})]})]})},Ne=[{key:"overview",label:"Overview"},{key:"coaching",label:"Coaching Summary"},{key:"signals",label:"Signals & Recording"},{key:"comments",label:"Comments"}],Ve=({title:t="Wheel Stud Replacement Enquiry",onBack:n,data:s,coachingData:d,audioUrl:g,audioRef:f,currentTimeSeconds:m,timelinePlaying:y,playbackRate:x,timelineSegments:S,onSeek:b,onTogglePlay:w,onSeekBack:l,onSeekForward:i,onSetPlaybackRate:p,agentName:h,customerName:C,transcript:D,activeTurnIndex:F,turnObservations:_,highlightedTurns:W,onTurnPlayPause:E,prevSessionTitle:A,prevSessionDesc:G,nextSessionTitle:H,nextSessionDesc:I,onPreviousSession:T,onNextSession:L})=>{var ie,oe;const[B,me]=k.useState("overview"),[be,O]=k.useState(new Set),[q,je]=k.useState(!1),[N,V]=k.useState(null),$=k.useRef(null),Y=k.useRef(null),Q=k.useRef(null),K=k.useRef(null),Z=k.useRef(null),Se={overview:Y,coaching:Q,signals:K,comments:Z},ke=a=>{me(a);const u=Se[a];u!=null&&u.current&&u.current.scrollIntoView({behavior:"smooth",block:"start"})},we=[{title:"Tire Repair Appointment",date:"11/12/2025, 2:30:00 PM"},{title:"Quote Confirmation",date:"10/1/2025, 9:00:00 AM"},{title:"Automative Repair Enquiry",date:"09/15/2025, 11:45:00 AM"},{title:"Vehicle Inspection Reminder",date:"07/20/2025, 1:00:00 PM"},{title:"Oil Change Service",date:"05/5/2025, 10:00:00 AM"}],Ce=a=>{var z;const u=a/1e3;(z=$.current)!=null&&z.seekTo&&$.current.seekTo(u)},De=a=>{O(u=>{const z=new Set(u);return z.has(a)?z.delete(a):z.add(a),z})},We=(s==null?void 0:s.blocks)||[],R=a=>{var u;return((u=We.find(z=>z.block_id===a))==null?void 0:u.payload)||{}},P=R("interaction-metadata"),X=R("interaction-context"),M=R("interaction-signals"),J=R("interaction-outcome-lift"),Ie=X.call_purpose||{},ze=X.classification||{},ee={duration_seconds:156,message_count:25,...P},te={interaction_driver:"General Information",interaction_direction:"inbound",...Ie},Fe={interaction_paradigm:"Informational",...ze},_e={p_expected:.94,p_full:.83,lift_raw:-.11,lift:.043,interpretation:{lift_band:"positive"},...J},Ae=((ie=J.driver_signal_keys)==null?void 0:ie.map(a=>a.replace(/^sig\./,"").replace(/_/g," ")))||["customer needs fully addressed","call flow expectations set","Opening expectations set","Active listening demonstrated","Resolution confirmed"],Ge=d||{one_liner:"David provided the customer with information on wheel stud replacement and pricing, but did not secure an appointment.",context:"The customer was seeking information on wheel stud replacement for a 2013 Chevy Bolt and was unsure about doing the repair themselves.",strengths:[{text:"Anthony effectively scheduled the appointment and confirmed the details clearly.",quote:"Alright. That is all set up for Saturday, the twenty eighth, at 12:00."},{text:"Handled customer objections well by explaining the need for a separate appointment for alignment.",quote:"I don't have the alignment changeover the weekend. So I would have to set up a separate appointment for the alignment."},{text:"Demonstrated courtesy and professionalism throughout the call.",quote:"Have a great day."}],improvements:[{text:"Close the loop by restating the plan and confirming next steps to ensure customer certainty.",quote:"Alright. That is all set up for Saturday, the twenty eighth, at 12:00."},{text:"Frame solutions positively by leading with what can be done rather than limitations.",quote:"I don't have the alignment changeover the weekend."}],overall:"effective"},He=(oe=M==null?void 0:M.signals)!=null&&oe.length?M:{present_count:9,total_signals_evaluated:146,signals:[{key:"price_estimate_provided",display_name:"Price Estimate Provided",observations:[{key:"obs1",reason:"Evidence shows a price estimate or quote was provided.",evidence:[{start_ms:92e3,end_ms:97e3,text:"From Casper, you're probably looking at, like, a half hour labor plus a stud, so you'd probably be somewhere around $90 or something.",turn_ids:[8]}]}]},{key:"fee_or_cost_discussed",display_name:"Fee or Cost Discussed",observations:[{key:"obs2",reason:"Agent discussed pricing details with the customer."}]},{key:"engagement_budget",display_name:"Engagement Budget Discussed",observations:[{key:"obs3a",reason:"Budget expectations were set."},{key:"obs3b",reason:"Customer confirmed budget range."}]},{key:"projected_revenue",display_name:"Projected Revenue Discussed",observations:[{key:"obs4a",reason:"Revenue projection shared."},{key:"obs4b",reason:"Timeline for revenue discussed."},{key:"obs4c",reason:"Quarterly targets mentioned."}]},{key:"market_analysis",display_name:"Market Analysis Completed",observations:[{key:"obs5a",reason:"Market analysis referenced."},{key:"obs5b",reason:"Competitive landscape discussed."},{key:"obs5c",reason:"Market trends mentioned."},{key:"obs5d",reason:"Regional analysis provided."}]},{key:"target_audience",display_name:"Target Audience Defined",observations:[{key:"obs6a",reason:"Target audience identified."},{key:"obs6b",reason:"Demographics discussed."},{key:"obs6c",reason:"Audience segmentation reviewed."},{key:"obs6d",reason:"Persona mapping completed."},{key:"obs6e",reason:"Channel preferences noted."}]},{key:"concept_approval",display_name:"Concept Approval Received",observations:[{key:"obs7a",reason:"Concept approved by stakeholder."},{key:"obs7b",reason:"Feedback incorporated."},{key:"obs7c",reason:"Sign-off confirmed."},{key:"obs7d",reason:"Revisions requested."},{key:"obs7e",reason:"Final version accepted."},{key:"obs7f",reason:"Timeline approved."}]},{key:"prototype_developed",display_name:"Prototype Developed",observations:[{key:"obs8a",reason:"Prototype shared."},{key:"obs8b",reason:"Testing initiated."},{key:"obs8c",reason:"Feedback collected."},{key:"obs8d",reason:"Iterations completed."},{key:"obs8e",reason:"Usability tested."},{key:"obs8f",reason:"Design finalized."},{key:"obs8g",reason:"Stakeholder demo done."}]},{key:"user_testing",display_name:"User Testing Scheduled",observations:[{key:"obs9a",reason:"Testing sessions planned."},{key:"obs9b",reason:"Participants recruited."},{key:"obs9c",reason:"Test scripts prepared."},{key:"obs9d",reason:"Environment set up."},{key:"obs9e",reason:"Accessibility testing included."},{key:"obs9f",reason:"Results framework defined."},{key:"obs9g",reason:"Timeline confirmed."},{key:"obs9h",reason:"Backup plan discussed."}]}]},ne=h||"Agent",U=C||"Customer",se=8,Re=P.evaluated_dt?new Date(P.evaluated_dt).toLocaleString():"3/29/2026, 8:30:00 AM",Me=te.interaction_direction==="inbound"?"Inbound":"Outbound";return e.jsxs("div",{style:{display:"flex",flexDirection:"column",width:"100%",background:"var(--Grey-White, #FFF)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,padding:"24px 24px 0"},children:[e.jsx("button",{onClick:n,style:{display:"flex",alignItems:"center",justifyContent:"center",background:"none",border:"none",cursor:"pointer",padding:0,flexShrink:0},children:e.jsx(o.ArrowLeft,{size:24,color:"var(--Grey-Strong, #2E3236)"})}),e.jsx("div",{style:{width:1,height:28,background:"var(--Base-absent, #D9D9D9)"}}),e.jsx("h1",{style:{color:"var(--Grey-Strong, #2E3236)",fontSize:24,fontStyle:"normal",fontWeight:400,lineHeight:"normal",margin:0},children:t})]}),e.jsx("div",{style:{display:"flex",alignItems:"flex-start",background:"var(--Grey-White, #FFF)",borderBottom:"1px solid var(--Grey-Faint, #ACADAD)",padding:"0 24px",marginTop:8},children:Ne.map(a=>e.jsx("button",{onClick:()=>ke(a.key),style:{display:"flex",padding:16,alignItems:"center",gap:10,background:"none",border:"none",borderBottom:B===a.key?"3px solid var(--Grey-Strong, #2E3236)":"3px solid transparent",cursor:"pointer",fontSize:15,fontWeight:B===a.key?500:400,color:B===a.key?"var(--Grey-Strong, #2E3236)":"var(--Grey-Muted, #808183)",whiteSpace:"nowrap",transition:"border-color 0.2s ease, color 0.2s ease"},children:a.label},a.key))}),e.jsxs("div",{style:{padding:24,flex:1,overflowY:"auto"},children:[e.jsxs("div",{ref:Y,style:{display:"flex",flexDirection:"column",justifyContent:"flex-end",alignItems:"flex-start",gap:24,alignSelf:"stretch"},children:[e.jsxs("div",{style:{display:"flex",height:40,alignItems:"center",gap:16,alignSelf:"stretch"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,flex:1},children:[e.jsx(o.ClipboardList,{size:24,color:"var(--rail-orange, #C98A5A)",strokeWidth:2}),e.jsx("span",{style:{fontSize:16,fontWeight:600,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2,textTransform:"uppercase"},children:"Overview"})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16,flexShrink:0},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6,padding:"8px 0"},children:[e.jsx(o.CalendarDays,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",lineHeight:1.2},children:Re})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6,padding:"8px 0"},children:[e.jsx(o.PhoneIncoming,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",lineHeight:1.2},children:Me})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16,paddingLeft:16,borderLeft:"1px solid var(--Grey-absent, #D9D9D9)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6,padding:"8px 0"},children:[e.jsx(o.Headset,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",lineHeight:1.2},children:ne})]}),e.jsx(o.Repeat,{size:16,color:"var(--color-input-border, #ACACAD)",strokeWidth:1.5}),e.jsxs("div",{style:{position:"relative"},children:[e.jsxs("button",{onClick:()=>je(a=>!a),style:{display:"flex",alignItems:"center",gap:4,padding:"8px 0",background:"none",border:"none",cursor:"pointer"},children:[e.jsx(o.CircleUser,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5}),e.jsxs("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2},children:[U," (",se," Sessions)"]}),q?e.jsx(o.ChevronUp,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5}):e.jsx(o.ChevronDown,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5})]}),q&&e.jsxs("div",{style:{position:"absolute",top:"100%",right:0,marginTop:4,width:264,background:"var(--Grey-White, #FFF)",borderRadius:4,border:"1px solid var(--Grey-absent, #D9D9D9)",boxShadow:"0 4px 16px rgba(0,0,0,0.12)",zIndex:50,overflow:"hidden"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:8,padding:16},children:[e.jsx(o.CircleUser,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5,style:{marginTop:2,flexShrink:0}}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:4},children:[e.jsx("span",{style:{fontSize:16,fontWeight:600,color:"var(--Grey-Strong, #2E3236)",lineHeight:1},children:U}),e.jsxs("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1},children:[se," Sessions in past"]})]})]}),we.map((a,u)=>e.jsxs("div",{onMouseEnter:()=>V(u),onMouseLeave:()=>V(null),style:{display:"flex",width:264,padding:"12px 16px",justifyContent:"space-between",alignItems:"center",background:N===u?"var(--surface-hover, #F3F7F7)":"var(--Grey-White, #FFF)",borderTop:"1px solid var(--Grey-absent, #D9D9D9)",cursor:"pointer",boxSizing:"border-box",transition:"background 0.15s"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1},children:a.title}),e.jsx("span",{style:{fontSize:12,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1},children:a.date})]}),N===u&&e.jsx(o.ExternalLink,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1,style:{flexShrink:0}})]},u)),e.jsx("div",{style:{padding:16,borderTop:"1px solid var(--Grey-absent, #D9D9D9)",display:"flex",justifyContent:"center"},children:e.jsxs("button",{style:{display:"flex",height:32,padding:"16px 16px 16px 12px",justifyContent:"center",alignItems:"center",gap:6,background:"var(--Grey-White, #FFF)",border:"1px solid var(--Grey-absent, #D9D9D9)",borderRadius:10,cursor:"pointer"},children:[e.jsx(o.History,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5}),e.jsx("span",{style:{fontSize:14,fontWeight:600,color:"var(--Grey-Strong, #2E3236)"},children:"View All Sessions"})]})})]})]})]})]})]}),e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:24,alignSelf:"stretch"},children:[e.jsx("div",{style:{flex:1,minWidth:0},children:e.jsx(ve,{})}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"stretch",justifyContent:"flex-end",gap:24,flex:1,minWidth:0},children:[e.jsx(ye,{meta:ee,callPurpose:te,classification:Fe,outcomeQuality:"Neutral"}),e.jsx(xe,{outcomeLift:_e,driverLabels:Ae})]})]})]}),e.jsx("div",{ref:Q,style:{paddingTop:24},children:e.jsx(he,{data:Ge})}),e.jsxs("div",{ref:K,style:{display:"flex",flexDirection:"column",gap:16,alignSelf:"stretch",paddingTop:24},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(o.FileSignal,{size:24,color:"#C98A5A",strokeWidth:2}),e.jsx("span",{style:{fontSize:16,fontWeight:600,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2,textTransform:"uppercase"},children:"Signals & Recording"})]}),e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:24,alignSelf:"stretch",paddingTop:16,borderTop:"1px solid #D9D9D9"},children:[e.jsx("div",{style:{flex:1,minWidth:0},children:e.jsx(ue,{signals:He,expandedSignals:be,toggleSignal:De,onShowInTranscript:Ce})}),e.jsx("div",{style:{flex:1,minWidth:0},children:e.jsx(fe.UpdatedInteractionRecording,{ref:$,audioUrl:g,durationSeconds:ee.duration_seconds,audioRef:f,agentName:ne,customerName:U.split(" ")[0],currentTimeSeconds:m,timelinePlaying:y,playbackRate:x,timelineSegments:S,onSeek:b,onTogglePlay:w,onSeekBack:l,onSeekForward:i,onSetPlaybackRate:p,transcript:D,activeTurnIndex:F,turnObservations:_,highlightedTurns:W,onTurnPlayPause:E,setExpandedSignals:O})})]})]}),e.jsx("div",{ref:Z,style:{paddingTop:24},children:e.jsx("div",{style:{fontSize:14,color:"var(--Grey-Muted, #808183)",fontFamily:"var(--font-sans)"},children:"No comments yet."})})]}),e.jsxs("div",{style:{display:"flex",position:"sticky",bottom:0,zIndex:10},children:[e.jsxs("button",{onClick:T,style:{display:"flex",alignItems:"center",gap:30,padding:"12px 28px",flex:1,background:"var(--Grey-White, #FFF)",border:"1px solid var(--Grey-absent, #D9D9D9)",cursor:"pointer"},children:[e.jsx(o.ArrowLeft,{size:24,color:"var(--Grey-Muted, #808183)",strokeWidth:2}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:10},children:[e.jsx("span",{style:{fontSize:14,fontWeight:400,color:"#000",lineHeight:1.2,textAlign:"left"},children:A||"Previous Session Title"}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"#000",lineHeight:1.2,opacity:.5,textAlign:"left"},children:G||"Short description of the session"})]})]}),e.jsxs("button",{onClick:L,style:{display:"flex",alignItems:"center",justifyContent:"flex-end",gap:30,padding:"12px 28px",flex:1,background:"var(--Grey-White, #FFF)",border:"1px solid var(--Grey-absent, #D9D9D9)",cursor:"pointer"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:10},children:[e.jsx("span",{style:{fontSize:14,fontWeight:400,color:"#000",lineHeight:1.2,textAlign:"left"},children:H||"Next Session Title"}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"#000",lineHeight:1.2,opacity:.5,textAlign:"left"},children:I||"Short description of the session"})]}),e.jsx(o.ArrowRight,{size:24,color:"var(--Grey-Muted, #808183)",strokeWidth:2})]})]})]})};exports.UpdatedInteractionRecording=fe.UpdatedInteractionRecording;exports.UpdatedCoachingSynthesisCard=he;exports.UpdatedCompassScore=ve;exports.UpdatedInteractionContext=ye;exports.UpdatedInteractionDetails=Ve;exports.UpdatedInteractionScores=xe;exports.UpdatedInteractionSignals=ue;
+  `,document.head.appendChild(t)}function Ye({overall:t}){const n=Ne[t]||(t?t.replace(/_/g," "):"");return e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,flexShrink:0},children:[e.jsx("span",{style:{fontSize:13,fontWeight:400,color:c.strong,fontFamily:"var(--font-sans)",lineHeight:1.2},children:"Overall:"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx(r.ThumbsUp,{size:14,color:c.strong,strokeWidth:1.5}),e.jsx("span",{style:{fontSize:13,fontWeight:600,color:c.strong,fontFamily:"var(--font-sans)",lineHeight:1.2},children:n})]})]})}function Qe({item:t}){const n=typeof t=="string"?t:(t==null?void 0:t.text)||"",i=typeof t=="object"?t==null?void 0:t.quote:null;return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:14},children:[e.jsx("div",{style:{fontSize:14,fontWeight:600,color:c.itemText,fontFamily:"var(--font-sans)",lineHeight:1.5},children:n}),i&&e.jsxs("div",{style:{display:"flex",gap:10},children:[e.jsx("div",{style:{width:1,flexShrink:0,alignSelf:"stretch",background:c.quoteLine}}),e.jsxs("div",{style:{fontSize:14,fontWeight:400,color:c.quoteText,fontFamily:"var(--font-sans)",lineHeight:1.5},children:["“",i,"”"]})]})]})}function ae({icon:t,label:n,items:i}){return!i||i.length===0?null:e.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:16,borderRadius:12},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16},children:[e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,borderRadius:9999,background:c.iconBg,flexShrink:0},children:t}),e.jsx("span",{style:{fontSize:16,fontWeight:600,color:c.strong,fontFamily:"var(--font-sans)",lineHeight:"normal"},children:n})]}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:24},children:i.map((d,p)=>e.jsx(Qe,{item:d},p))})]})}const ye=({data:t,loading:n,error:i})=>{var y,v;if(C.useEffect(()=>{Ve()},[]),n)return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("div",{style:{width:6,height:6,borderRadius:"50%",background:c.accent,animation:"updated-coaching-pulse 1.5s ease-in-out infinite"}}),e.jsx("span",{style:{fontSize:14,color:c.muted,fontWeight:500},children:"Synthesizing coaching summary..."})]}),[180,260,220].map((k,j)=>e.jsx("div",{style:{height:10,width:k,maxWidth:"100%",borderRadius:4,background:`linear-gradient(90deg, ${c.absent} 25%, var(--shimmer-mid, #ECECEC) 50%, ${c.absent} 75%)`,backgroundSize:"200% 100%",animation:"updated-coaching-shimmer 1.8s ease-in-out infinite",animationDelay:`${j*.2}s`}},j))]});if(i)return e.jsx("div",{style:{fontSize:14,color:c.muted},children:"Unable to generate coaching summary."});if(!t)return null;const d=t.strengths||[],p=t.improvements||[],h=typeof t.one_liner=="string"?t.one_liner:((y=t.one_liner)==null?void 0:y.text)||"",u=typeof t.context=="string"?t.context:((v=t.context)==null?void 0:v.text)||"";return e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:16,background:"#FFF"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(r.ShieldCheck,{size:20,color:c.accent,strokeWidth:2}),e.jsx("span",{style:{fontSize:16,fontWeight:600,color:c.strong,fontFamily:"var(--font-sans)",lineHeight:1.2,textTransform:"uppercase"},children:"Coaching Summary"})]}),h&&e.jsx("div",{style:{fontSize:14,fontWeight:500,color:c.strong,fontFamily:"var(--font-sans)",lineHeight:1.5},children:h}),e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:16,justifyContent:"space-between"},children:[u&&e.jsx("div",{style:{fontSize:14,fontWeight:400,color:c.muted,fontFamily:"var(--font-sans)",lineHeight:1.5,flex:1},children:u}),t.overall&&e.jsx(Ye,{overall:t.overall})]}),(d.length>0||p.length>0)&&e.jsxs("div",{style:{display:"flex",gap:24,paddingTop:24,borderTop:`1px solid ${c.absent}`},children:[e.jsx(ae,{icon:e.jsx(r.TrendingUp,{size:14,color:c.strong,strokeWidth:1.5}),label:"Key Strengths",items:d}),e.jsx(ae,{icon:e.jsx(r.Lightbulb,{size:14,color:c.strong,strokeWidth:1.5}),label:"Improvements",items:p})]})]})};function Ke(t){const n=Math.floor(t/60),i=Math.round(t%60);return`${n}:${i.toString().padStart(2,"0")}`}const Ze={display:"flex",justifyContent:"space-between",padding:"8px 8px 12px 8px",alignItems:"center",gap:24,fontFamily:"var(--font-sans)",fontSize:13,fontWeight:400,lineHeight:"normal",borderBottom:"1px solid var(--Grey-absent, #D9D9D9)"},de={display:"flex",flexDirection:"column",flex:"1 0 0",gap:12,minWidth:0},xe=({meta:t={},callPurpose:n={},classification:i={},dimensions:d=[],outcomeQuality:p="Neutral",onMoreDetails:h})=>{const u=t.duration_seconds!=null?Ke(t.duration_seconds):null,y=t.message_count,v=n.interaction_driver,k=i.interaction_paradigm,j=[u!=null&&{label:"Duration",value:u},v!=null&&{label:"Driver",value:v},...d.filter((o,f)=>f%2===0).map(o=>({label:o.label||o.key,value:o.value})),{label:"Outcome Quality",value:p}].filter(Boolean),w=[y!=null&&{label:"Messages",value:y},k!=null&&{label:"Paradigm",value:k},...d.filter((o,f)=>f%2===1).map(o=>({label:o.label||o.key,value:o.value})),{label:"More Details",isLink:!0}].filter(Boolean),a=o=>o.isLink?e.jsxs("div",{onClick:h,style:{display:"flex",alignItems:"center",gap:6,padding:"8px 0 8px 0",cursor:"pointer",fontFamily:"var(--font-sans)"},children:[e.jsx(r.ExternalLink,{size:16,color:"#808183",strokeWidth:1.5}),e.jsx("span",{style:{color:"var(--Grey-Strong, #2E3236)",fontSize:13,fontWeight:400},children:o.label})]},o.label):e.jsxs("div",{style:Ze,children:[e.jsx("span",{style:{color:"var(--Grey-Strong, #2E3236)",whiteSpace:"nowrap",flexShrink:0},children:o.label}),e.jsx("span",{style:{color:"var(--Grey-Muted, #808183)",textAlign:"right"},children:o.value})]},o.label);return e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:24,alignSelf:"stretch"},children:[e.jsx("div",{style:de,children:j.map(o=>a(o))}),e.jsx("div",{style:de,children:w.map(o=>a(o))})]})},l={strong:"var(--Grey-Strong, #2E3236)",muted:"var(--Grey-Muted, #808183)",absent:"var(--Grey-absent, #D9D9D9)",white:"var(--Grey-White, #FFF)",cardBg:"var(--surface-warm-40, rgba(243, 241, 229, 0.40))"},m=1.2,ce=3,ge=t=>t!=null?Math.round(t*100)+"%":"—",pe=t=>{if(t==null)return"—";const n=(t*100).toFixed(1);return t>0?`+${n}pp`:`${n}pp`},ue=({outcomeLift:t,driverLabels:n=[]})=>{var j;if(!t||t.lift==null)return null;const i=t.p_expected,d=t.p_full,p=t.lift_raw??(d!=null&&i!=null?d-i:null),h=t.lift,u=(j=t.interpretation)!=null&&j.lift_band?t.interpretation.lift_band.replace(/_/g," "):h>=0?"Positive":"Negative",y=u.charAt(0).toUpperCase()+u.slice(1),v=n.slice(0,ce),k=n.length-ce;return e.jsxs("div",{style:{display:"flex",flexDirection:"column",padding:24,gap:24,borderRadius:8,border:`1px solid ${l.absent}`,background:l.cardBg,alignSelf:"stretch"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:32},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:24,alignSelf:"stretch"},children:[e.jsx("span",{style:{fontSize:15,fontWeight:600,color:l.strong,fontFamily:"var(--font-sans)",lineHeight:m},children:"Agent Lift Analysis"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,fontFamily:"var(--font-sans)"},children:[e.jsx("span",{style:{fontSize:13,fontWeight:400,color:l.strong,lineHeight:m},children:"vs. Average Agent:"}),e.jsx("span",{style:{fontSize:14,fontWeight:600,color:l.strong,lineHeight:m},children:pe(h)}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6,paddingLeft:8,borderLeft:`1px solid ${l.absent}`},children:[e.jsx(r.ThumbsUp,{size:14,color:l.strong}),e.jsx("span",{style:{fontSize:13,fontWeight:600,color:l.strong,lineHeight:m},children:y})]})]})]}),e.jsxs("div",{style:{display:"flex",alignItems:"flex-end",gap:24},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:16,alignItems:"center"},children:[e.jsx("span",{style:{fontSize:28,fontWeight:400,color:l.muted,fontFamily:"var(--font-sans)",lineHeight:m},children:ge(i)}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsx("span",{style:{fontSize:13,fontWeight:400,color:l.strong,fontFamily:"var(--font-sans)",lineHeight:m},children:"Expected Outcome"}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:l.muted,fontFamily:"var(--font-sans)",lineHeight:m},children:"Based on call type & difficulty"})]})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:16,alignItems:"center",paddingLeft:24,borderLeft:`1px solid ${l.absent}`},children:[e.jsx("span",{style:{fontSize:28,fontWeight:400,color:l.muted,fontFamily:"var(--font-sans)",lineHeight:m},children:pe(p)}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsx("span",{style:{fontSize:13,fontWeight:400,color:l.strong,fontFamily:"var(--font-sans)",lineHeight:m},children:"Agent Impact"}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:l.muted,fontFamily:"var(--font-sans)",lineHeight:m},children:"Behavior-driven change"})]})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:16,alignItems:"center",paddingLeft:24,borderLeft:`1px solid ${l.absent}`},children:[e.jsx("span",{style:{fontSize:28,fontWeight:400,color:l.strong,fontFamily:"var(--font-sans)",lineHeight:m},children:ge(d)}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsx("span",{style:{fontSize:13,fontWeight:600,color:l.strong,fontFamily:"var(--font-sans)",lineHeight:m},children:"Predicted Outcome"}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:l.muted,fontFamily:"var(--font-sans)",lineHeight:m},children:"With agent behaviors"})]})]})]})]}),n.length>0&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:4,alignSelf:"stretch"},children:[e.jsx("span",{style:{fontSize:12,fontWeight:600,color:l.strong,fontFamily:"var(--font-sans)",lineHeight:m},children:"Key Drivers"}),e.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:4},children:[v.map((w,a)=>e.jsx("div",{style:{display:"flex",padding:8,alignItems:"center",justifyContent:"center",borderRadius:4,border:`1px solid ${l.absent}`,background:l.white},children:e.jsx("span",{style:{fontSize:12,fontWeight:400,color:l.strong,fontFamily:"var(--font-sans)",lineHeight:m,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:200},children:w})},a)),k>0&&e.jsx("div",{style:{display:"flex",padding:8,alignItems:"center",justifyContent:"center",borderRadius:4,border:`1px solid ${l.absent}`,background:l.white},children:e.jsxs("span",{style:{fontSize:12,fontWeight:400,color:l.strong,fontFamily:"var(--font-sans)",lineHeight:m,whiteSpace:"nowrap"},children:["+ ",k]})})]})]})]})},fe=({children:t,size:n=28,onClick:i,title:d})=>{const[p,h]=C.useState(!1);return e.jsx("div",{title:d,onClick:i,onMouseEnter:()=>h(!0),onMouseLeave:()=>h(!1),style:{display:"flex",alignItems:"center",justifyContent:"center",width:n,height:n,borderRadius:9999,background:p?"var(--surface-hover, #F3F7F7)":"transparent",cursor:"pointer",flexShrink:0,transition:"background 0.15s"},children:t})},ve=({signals:t={signals:[],present_count:0,total_signals_evaluated:0},expandedSignals:n=new Set,toggleSignal:i=()=>{},playEvidence:d=()=>{},highlightTurns:p=()=>{},onShowInTranscript:h=()=>{},timelinePlaying:u=!1,currentTimeSeconds:y=0})=>{const v=(t==null?void 0:t.signals)??[],k=(t==null?void 0:t.present_count)??v.length,j=a=>{const o=Math.floor(a/6e4),f=Math.floor(a%6e4/1e3);return`${o.toString().padStart(2,"0")}:${f.toString().padStart(2,"0")}`},w=a=>u&&a.start_ms!=null&&y*1e3>=a.start_ms&&y*1e3<=(a.end_ms??a.start_ms+5e3);return e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-start",alignSelf:"stretch",width:"100%",gap:16},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16,width:"100%"},children:[e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:34,height:34,borderRadius:9999,background:"var(--surface-hover, #F3F7F7)",flexShrink:0},children:e.jsx(r.FileSignal,{size:20,color:"#2E3236",strokeWidth:1.5})}),e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",flex:1},children:[e.jsx("span",{style:{fontSize:15,fontWeight:500,color:"var(--Grey-Strong, #2E3236)"},children:"Signals"}),e.jsxs("span",{style:{fontSize:14,fontWeight:500,color:"var(--Grey-Strong, #2E3236)"},children:[k," Signals Detected"]})]})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignSelf:"stretch",background:"var(--Grey-White, #FFF)",gap:8},children:[v.length===0&&e.jsx("div",{style:{padding:"8px 0",fontSize:14,color:"var(--Grey-Muted, #808183)"},children:"No signals detected."}),v.map((a,o)=>{var W,F,M;const f=a.key??a.id??o,x=n.has(f),D=((W=a.observations)==null?void 0:W.length)??0;return e.jsxs("div",{id:`signal-${f}`,style:{display:"flex",flexDirection:"column",width:"100%",gap:8},children:[e.jsxs("button",{onClick:()=>i(f),style:{display:"flex",padding:"8px 0",alignItems:"center",gap:12,alignSelf:"stretch",width:"100%",background:"none",border:"none",borderBottom:"1px solid var(--Grey-absent, #D9D9D9)",cursor:"pointer"},children:[e.jsxs("span",{style:{flex:1,textAlign:"left",fontSize:14,fontWeight:600,color:"var(--text-dark, #0B0A0A)",lineHeight:1.71},children:[a.display_name||((F=a.key)==null?void 0:F.replace(/_/g," ")),D>0&&e.jsxs("span",{style:{fontWeight:600,color:"var(--text-dark, #0B0A0A)",marginLeft:6},children:["(",D,")"]})]}),x?e.jsx(r.ChevronUp,{size:20,color:"#767473"}):e.jsx(r.ChevronDown,{size:20,color:"#767473"})]}),x&&((M=a.observations)==null?void 0:M.length)>0&&e.jsx("div",{style:{display:"flex",flexDirection:"column",alignSelf:"stretch",gap:0},children:a.observations.map((I,E)=>{var _,A,H;return e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignSelf:"stretch",gap:8},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,padding:"8px 0",justifyContent:"space-between"},children:[e.jsx("span",{style:{flex:1,fontSize:14,fontWeight:400,color:"var(--text-subtle-warm, #767473)",lineHeight:1.5},children:I.reason||I.explanation}),((A=(_=I.evidence)==null?void 0:_[0])==null?void 0:A.start_ms)!=null&&e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,flexShrink:0},children:[e.jsx(fe,{size:28,title:"Show in transcript",onClick:z=>{z.stopPropagation(),h(I.evidence[0].start_ms)},children:e.jsx(r.ScrollText,{size:16,color:"#808183",strokeWidth:1.5})}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1.2,whiteSpace:"nowrap"},children:j(I.evidence[0].start_ms)})]})]}),(H=I.evidence)==null?void 0:H.map((z,L)=>z.text&&e.jsxs("div",{onClick:P=>{P.stopPropagation(),d(z)},onMouseEnter:()=>p(z.turn_ids??[]),onMouseLeave:()=>p([]),style:{display:"flex",alignItems:"center",gap:8,padding:"8px 0",cursor:"pointer"},children:[e.jsx(fe,{size:28,children:w(z)?e.jsx(r.PauseCircle,{size:17,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5}):e.jsx(r.PlayCircle,{size:17,color:"var(--Grey-Muted, #808183)",strokeWidth:1})}),e.jsxs("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2},children:["“",z.text,"”"]})]},L))]},I.key??E)})})]},f)})]})]})},S={strong:"var(--Grey-Strong, #2E3236)",muted:"var(--Grey-Muted, #808183)",absent:"var(--Grey-absent, #D9D9D9)",white:"var(--Grey-White, #FFF)",accent:"var(--rail-orange, #C98A5A)",track:"var(--rail-surface-2, #E3E1D7)",infoIcon:"var(--color-input-border, #ACACAD)"},Xe=({score:t=4,maxScore:n=10})=>{const k=Math.min(Math.round(t/n*5),5),j=180/5,w=f=>{const x=f*Math.PI/180;return{x:121.5+85*Math.cos(x),y:123-85*Math.sin(x)}},a=(f,x)=>{const D=w(f),W=w(x),F=f-x>180?1:0;return`M ${D.x} ${D.y} A 85 85 0 ${F} 1 ${W.x} ${W.y}`},o=2;return e.jsx("svg",{width:243,height:130,viewBox:"0 0 243 130",fill:"none",children:Array.from({length:5},(f,x)=>{const D=180-x*j-(x>0?o/2:0),W=180-(x+1)*j+(x<5-1?o/2:0),F=x<k;return e.jsx("path",{d:a(D,W),stroke:F?S.strong:S.track,strokeWidth:30,strokeLinecap:"butt",fill:"none"},x)})})},Je=({value:t=0,maxValue:n=5})=>e.jsx("div",{style:{display:"flex",gap:2},children:Array.from({length:n},(i,d)=>e.jsx("div",{style:{width:22,height:6,borderRadius:1,background:d<t?S.strong:S.track}},d))}),et=({label:t,value:n=0,maxValue:i=5})=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8,padding:8,alignItems:"center"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("span",{style:{fontSize:12,fontWeight:400,color:S.strong,fontFamily:"var(--font-sans)",lineHeight:"normal"},children:t}),e.jsx(r.Info,{size:14,color:S.infoIcon,strokeWidth:1})]}),e.jsx(Je,{value:n,maxValue:i})]}),me=({score:t=83,maxScore:n=100,predictedScore:i=4,predictedLabel:d="Predicted Objective",description:p="",legends:h=[{label:"CSAT",value:3},{label:"Resolution",value:4},{label:"Process Adherence",value:5},{label:"Communication",value:3}]})=>{const u=String(i).padStart(2,"0");return e.jsxs("div",{style:{display:"flex",flexDirection:"column",padding:24,borderRadius:8,border:`1px solid ${S.absent}`,background:S.white,alignSelf:"stretch",gap:24},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsx("span",{style:{fontSize:15,fontWeight:600,color:S.strong,fontFamily:"var(--font-sans)",lineHeight:1.2},children:"Compass Score"}),e.jsx("span",{style:{fontSize:14,fontWeight:400,color:S.muted,fontFamily:"var(--font-sans)",lineHeight:"normal"},children:p})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",gap:48,flex:1},children:[e.jsxs("div",{style:{display:"flex",width:243,flexDirection:"column",alignItems:"center",flexShrink:0},children:[e.jsx(Xe,{score:t,maxScore:n}),e.jsxs("svg",{width:"34",height:"35",viewBox:"0 0 34 35",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{marginTop:-24},children:[e.jsx("path",{d:"M16 25.2169C19.958 25.2169 23.1667 22.0083 23.1667 18.0503C23.1667 14.0922 19.958 10.8836 16 10.8836C12.042 10.8836 8.83334 14.0922 8.83334 18.0503C8.83334 22.0083 12.042 25.2169 16 25.2169Z",fill:"var(--rail-orange, #C98A5A)"}),e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M30.4791 11.2328L33.4351 0L21.6888 3.09113C19.9212 2.41855 18.0036 2.05025 16 2.05025C7.16344 2.05025 0 9.2137 0 18.0503C0 26.8868 7.16344 34.0503 16 34.0503C24.8366 34.0503 32 26.8868 32 18.0503C32 15.6119 31.4546 13.301 30.4791 11.2328ZM16 30.5503C22.9036 30.5503 28.5 24.9538 28.5 18.0503C28.5 11.1467 22.9036 5.55025 16 5.55025C9.09644 5.55025 3.5 11.1467 3.5 18.0503C3.5 24.9538 9.09644 30.5503 16 30.5503Z",fill:"var(--rail-orange, #C98A5A)"})]}),e.jsx("div",{style:{fontSize:28,fontWeight:400,color:S.strong,fontFamily:"var(--font-sans)",lineHeight:1,textAlign:"center",marginTop:8},children:t})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8,alignItems:"center",justifyContent:"center",flex:1},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center"},children:[e.jsx("div",{style:{fontSize:28,fontWeight:400,color:S.strong,fontFamily:"var(--font-sans)",lineHeight:1,textAlign:"center"},children:u}),e.jsx("div",{style:{fontSize:14,fontWeight:400,color:S.muted,fontFamily:"var(--font-sans)",lineHeight:1.43,textAlign:"center"},children:d})]}),e.jsx("div",{style:{width:"100%",height:1,background:S.absent}}),h.map((y,v)=>e.jsx(et,{label:y.label,value:y.value},v))]})]})]})},tt=[{key:"overview",label:"Overview"},{key:"coaching",label:"Coaching Summary"},{key:"signals",label:"Signals & Recording"},{key:"comments",label:"Comments"}],nt=({title:t="Wheel Stud Replacement Enquiry",onBack:n,data:i,coachingData:d,audioUrl:p,audioRef:h,currentTimeSeconds:u,timelinePlaying:y,playbackRate:v,timelineSegments:k,onSeek:j,onTogglePlay:w,onSeekBack:a,onSeekForward:o,onSetPlaybackRate:f,agentName:x,customerName:D,transcript:W,activeTurnIndex:F,turnObservations:M,highlightedTurns:I,onTurnPlayPause:E,onPlayEvidence:_,onHighlightTurns:A,prevSessionTitle:H,prevSessionDesc:z,nextSessionTitle:L,nextSessionDesc:P,onPreviousSession:be,onNextSession:je})=>{var oe,re;const[B,Se]=C.useState("overview"),[ke,O]=C.useState(new Set),[q,Ce]=C.useState(!1),[N,V]=C.useState(null),[we,Y]=C.useState(!1),[De,We]=C.useState(0),G=C.useRef(null),Q=C.useRef(null),K=C.useRef(null),Z=C.useRef(null),X=C.useRef(null),Ie={overview:Q,coaching:K,signals:Z,comments:X},ze=s=>{Se(s);const g=Ie[s];g!=null&&g.current&&g.current.scrollIntoView({behavior:"smooth",block:"start"})},Fe=[{title:"Tire Repair Appointment",date:"11/12/2025, 2:30:00 PM"},{title:"Quote Confirmation",date:"10/1/2025, 9:00:00 AM"},{title:"Automative Repair Enquiry",date:"09/15/2025, 11:45:00 AM"},{title:"Vehicle Inspection Reminder",date:"07/20/2025, 1:00:00 PM"},{title:"Oil Change Service",date:"05/5/2025, 10:00:00 AM"}],_e=s=>{var b;const g=s/1e3;(b=G.current)!=null&&b.seekTo&&G.current.seekTo(g)},Ae=s=>{var g;if(_)_(s);else{const b=s.start_ms??s.startMs;if(b!=null&&((g=G.current)!=null&&g.seekTo)){G.current.seekTo(b/1e3),Y(!0),We(b/1e3);const qe=(s.end_ms??s.endMs??b+5e3)-b;setTimeout(()=>Y(!1),qe)}}},Ge=s=>{A&&A(s)},Me=s=>{O(g=>{const b=new Set(g);return b.has(s)?b.delete(s):b.add(s),b})},He=(i==null?void 0:i.blocks)||[],R=s=>{var g;return((g=He.find(b=>b.block_id===s))==null?void 0:g.payload)||{}},$=R("interaction-metadata"),J=R("interaction-context"),T=R("interaction-signals"),ee=R("interaction-outcome-lift"),Re=J.call_purpose||{},Te=J.classification||{},te={duration_seconds:156,message_count:25,...$},ne={interaction_driver:"General Information",interaction_direction:"inbound",...Re},Ee={interaction_paradigm:"Informational",...Te},Le={p_expected:.94,p_full:.83,lift_raw:-.11,lift:.043,interpretation:{lift_band:"positive"},...ee},Pe=((oe=ee.driver_signal_keys)==null?void 0:oe.map(s=>s.replace(/^sig\./,"").replace(/_/g," ")))||["customer needs fully addressed","call flow expectations set","Opening expectations set","Active listening demonstrated","Resolution confirmed"],Be=d||{one_liner:"David provided the customer with information on wheel stud replacement and pricing, but did not secure an appointment.",context:"The customer was seeking information on wheel stud replacement for a 2013 Chevy Bolt and was unsure about doing the repair themselves.",strengths:[{text:"Anthony effectively scheduled the appointment and confirmed the details clearly.",quote:"Alright. That is all set up for Saturday, the twenty eighth, at 12:00."},{text:"Handled customer objections well by explaining the need for a separate appointment for alignment.",quote:"I don't have the alignment changeover the weekend. So I would have to set up a separate appointment for the alignment."},{text:"Demonstrated courtesy and professionalism throughout the call.",quote:"Have a great day."}],improvements:[{text:"Close the loop by restating the plan and confirming next steps to ensure customer certainty.",quote:"Alright. That is all set up for Saturday, the twenty eighth, at 12:00."},{text:"Frame solutions positively by leading with what can be done rather than limitations.",quote:"I don't have the alignment changeover the weekend."}],overall:"effective"},$e=(re=T==null?void 0:T.signals)!=null&&re.length?T:{present_count:9,total_signals_evaluated:146,signals:[{key:"price_estimate_provided",display_name:"Price Estimate Provided",observations:[{key:"obs1",reason:"Evidence shows a price estimate or quote was provided.",evidence:[{start_ms:92e3,end_ms:97e3,text:"From Casper, you're probably looking at, like, a half hour labor plus a stud, so you'd probably be somewhere around $90 or something.",turn_ids:[8]}]}]},{key:"fee_or_cost_discussed",display_name:"Fee or Cost Discussed",observations:[{key:"obs2",reason:"Agent discussed pricing details with the customer."}]},{key:"engagement_budget",display_name:"Engagement Budget Discussed",observations:[{key:"obs3a",reason:"Budget expectations were set."},{key:"obs3b",reason:"Customer confirmed budget range."}]},{key:"projected_revenue",display_name:"Projected Revenue Discussed",observations:[{key:"obs4a",reason:"Revenue projection shared."},{key:"obs4b",reason:"Timeline for revenue discussed."},{key:"obs4c",reason:"Quarterly targets mentioned."}]},{key:"market_analysis",display_name:"Market Analysis Completed",observations:[{key:"obs5a",reason:"Market analysis referenced."},{key:"obs5b",reason:"Competitive landscape discussed."},{key:"obs5c",reason:"Market trends mentioned."},{key:"obs5d",reason:"Regional analysis provided."}]},{key:"target_audience",display_name:"Target Audience Defined",observations:[{key:"obs6a",reason:"Target audience identified."},{key:"obs6b",reason:"Demographics discussed."},{key:"obs6c",reason:"Audience segmentation reviewed."},{key:"obs6d",reason:"Persona mapping completed."},{key:"obs6e",reason:"Channel preferences noted."}]},{key:"concept_approval",display_name:"Concept Approval Received",observations:[{key:"obs7a",reason:"Concept approved by stakeholder."},{key:"obs7b",reason:"Feedback incorporated."},{key:"obs7c",reason:"Sign-off confirmed."},{key:"obs7d",reason:"Revisions requested."},{key:"obs7e",reason:"Final version accepted."},{key:"obs7f",reason:"Timeline approved."}]},{key:"prototype_developed",display_name:"Prototype Developed",observations:[{key:"obs8a",reason:"Prototype shared."},{key:"obs8b",reason:"Testing initiated."},{key:"obs8c",reason:"Feedback collected."},{key:"obs8d",reason:"Iterations completed."},{key:"obs8e",reason:"Usability tested."},{key:"obs8f",reason:"Design finalized."},{key:"obs8g",reason:"Stakeholder demo done."}]},{key:"user_testing",display_name:"User Testing Scheduled",observations:[{key:"obs9a",reason:"Testing sessions planned."},{key:"obs9b",reason:"Participants recruited."},{key:"obs9c",reason:"Test scripts prepared."},{key:"obs9d",reason:"Environment set up."},{key:"obs9e",reason:"Accessibility testing included."},{key:"obs9f",reason:"Results framework defined."},{key:"obs9g",reason:"Timeline confirmed."},{key:"obs9h",reason:"Backup plan discussed."}]}]},se=x||"Agent",U=D||"Customer",ie=8,Ue=$.evaluated_dt?new Date($.evaluated_dt).toLocaleString():"3/29/2026, 8:30:00 AM",Oe=ne.interaction_direction==="inbound"?"Inbound":"Outbound";return e.jsxs("div",{style:{display:"flex",flexDirection:"column",width:"100%",background:"var(--Grey-White, #FFF)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,padding:"24px 24px 0"},children:[e.jsx("button",{onClick:n,style:{display:"flex",alignItems:"center",justifyContent:"center",background:"none",border:"none",cursor:"pointer",padding:0,flexShrink:0},children:e.jsx(r.ArrowLeft,{size:24,color:"var(--Grey-Strong, #2E3236)"})}),e.jsx("div",{style:{width:1,height:28,background:"var(--Base-absent, #D9D9D9)"}}),e.jsx("h1",{style:{color:"var(--Grey-Strong, #2E3236)",fontSize:24,fontStyle:"normal",fontWeight:400,lineHeight:"normal",margin:0},children:t})]}),e.jsx("div",{style:{display:"flex",alignItems:"flex-start",background:"var(--Grey-White, #FFF)",borderBottom:"1px solid var(--Grey-Faint, #ACADAD)",padding:"0 24px",marginTop:8},children:tt.map(s=>e.jsx("button",{onClick:()=>ze(s.key),style:{display:"flex",padding:16,alignItems:"center",gap:10,background:"none",border:"none",borderBottom:B===s.key?"3px solid var(--Grey-Strong, #2E3236)":"3px solid transparent",cursor:"pointer",fontSize:15,fontWeight:B===s.key?500:400,color:B===s.key?"var(--Grey-Strong, #2E3236)":"var(--Grey-Muted, #808183)",whiteSpace:"nowrap",transition:"border-color 0.2s ease, color 0.2s ease"},children:s.label},s.key))}),e.jsxs("div",{style:{padding:24,flex:1,overflowY:"auto"},children:[e.jsxs("div",{ref:Q,style:{display:"flex",flexDirection:"column",justifyContent:"flex-end",alignItems:"flex-start",gap:24,alignSelf:"stretch"},children:[e.jsxs("div",{style:{display:"flex",height:40,alignItems:"center",gap:16,alignSelf:"stretch"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,flex:1},children:[e.jsx(r.ClipboardList,{size:24,color:"var(--rail-orange, #C98A5A)",strokeWidth:2}),e.jsx("span",{style:{fontSize:16,fontWeight:600,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2,textTransform:"uppercase"},children:"Overview"})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16,flexShrink:0},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6,padding:"8px 0"},children:[e.jsx(r.CalendarDays,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",lineHeight:1.2},children:Ue})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6,padding:"8px 0"},children:[e.jsx(r.PhoneIncoming,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",lineHeight:1.2},children:Oe})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16,paddingLeft:16,borderLeft:"1px solid var(--Grey-absent, #D9D9D9)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6,padding:"8px 0"},children:[e.jsx(r.Headset,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",lineHeight:1.2},children:se})]}),e.jsx(r.Repeat,{size:16,color:"var(--color-input-border, #ACACAD)",strokeWidth:1.5}),e.jsxs("div",{style:{position:"relative"},children:[e.jsxs("button",{onClick:()=>Ce(s=>!s),style:{display:"flex",alignItems:"center",gap:4,padding:"8px 0",background:"none",border:"none",cursor:"pointer"},children:[e.jsx(r.CircleUser,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5}),e.jsxs("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2},children:[U," (",ie," Sessions)"]}),q?e.jsx(r.ChevronUp,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5}):e.jsx(r.ChevronDown,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5})]}),q&&e.jsxs("div",{style:{position:"absolute",top:"100%",right:0,marginTop:4,width:264,background:"var(--Grey-White, #FFF)",borderRadius:4,border:"1px solid var(--Grey-absent, #D9D9D9)",boxShadow:"0 4px 16px rgba(0,0,0,0.12)",zIndex:50,overflow:"hidden"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:8,padding:16},children:[e.jsx(r.CircleUser,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5,style:{marginTop:2,flexShrink:0}}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:4},children:[e.jsx("span",{style:{fontSize:16,fontWeight:600,color:"var(--Grey-Strong, #2E3236)",lineHeight:1},children:U}),e.jsxs("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1},children:[ie," Sessions in past"]})]})]}),Fe.map((s,g)=>e.jsxs("div",{onMouseEnter:()=>V(g),onMouseLeave:()=>V(null),style:{display:"flex",width:264,padding:"12px 16px",justifyContent:"space-between",alignItems:"center",background:N===g?"var(--surface-hover, #F3F7F7)":"var(--Grey-White, #FFF)",borderTop:"1px solid var(--Grey-absent, #D9D9D9)",cursor:"pointer",boxSizing:"border-box",transition:"background 0.15s"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1},children:s.title}),e.jsx("span",{style:{fontSize:12,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1},children:s.date})]}),N===g&&e.jsx(r.ExternalLink,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1,style:{flexShrink:0}})]},g)),e.jsx("div",{style:{padding:16,borderTop:"1px solid var(--Grey-absent, #D9D9D9)",display:"flex",justifyContent:"center"},children:e.jsxs("button",{style:{display:"flex",height:32,padding:"16px 16px 16px 12px",justifyContent:"center",alignItems:"center",gap:6,background:"var(--Grey-White, #FFF)",border:"1px solid var(--Grey-absent, #D9D9D9)",borderRadius:10,cursor:"pointer"},children:[e.jsx(r.History,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1.5}),e.jsx("span",{style:{fontSize:14,fontWeight:600,color:"var(--Grey-Strong, #2E3236)"},children:"View All Sessions"})]})})]})]})]})]})]}),e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:24,alignSelf:"stretch"},children:[e.jsx("div",{style:{flex:1,minWidth:0},children:e.jsx(me,{})}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"stretch",justifyContent:"flex-end",gap:24,flex:1,minWidth:0},children:[e.jsx(xe,{meta:te,callPurpose:ne,classification:Ee,outcomeQuality:"Neutral"}),e.jsx(ue,{outcomeLift:Le,driverLabels:Pe})]})]})]}),e.jsx("div",{ref:K,style:{paddingTop:24},children:e.jsx(ye,{data:Be})}),e.jsxs("div",{ref:Z,style:{display:"flex",flexDirection:"column",gap:16,alignSelf:"stretch",paddingTop:24},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(r.FileSignal,{size:24,color:"#C98A5A",strokeWidth:2}),e.jsx("span",{style:{fontSize:16,fontWeight:600,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2,textTransform:"uppercase"},children:"Signals & Recording"})]}),e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:24,alignSelf:"stretch",paddingTop:16,borderTop:"1px solid #D9D9D9"},children:[e.jsx("div",{style:{flex:1,minWidth:0},children:e.jsx(ve,{signals:$e,expandedSignals:ke,toggleSignal:Me,playEvidence:Ae,highlightTurns:Ge,onShowInTranscript:_e,timelinePlaying:y||we,currentTimeSeconds:u??De})}),e.jsx("div",{style:{flex:1,minWidth:0},children:e.jsx(he.UpdatedInteractionRecording,{ref:G,audioUrl:p,durationSeconds:te.duration_seconds,audioRef:h,agentName:se,customerName:U.split(" ")[0],currentTimeSeconds:u,timelinePlaying:y,playbackRate:v,timelineSegments:k,onSeek:j,onTogglePlay:w,onSeekBack:a,onSeekForward:o,onSetPlaybackRate:f,transcript:W,activeTurnIndex:F,turnObservations:M,highlightedTurns:I,onTurnPlayPause:E,setExpandedSignals:O})})]})]}),e.jsx("div",{ref:X,style:{paddingTop:24},children:e.jsx("div",{style:{fontSize:14,color:"var(--Grey-Muted, #808183)",fontFamily:"var(--font-sans)"},children:"No comments yet."})})]}),e.jsxs("div",{style:{display:"flex",position:"sticky",bottom:0,zIndex:10},children:[e.jsxs("button",{onClick:be,style:{display:"flex",alignItems:"center",gap:30,padding:"12px 28px",flex:1,background:"var(--Grey-White, #FFF)",border:"1px solid var(--Grey-absent, #D9D9D9)",cursor:"pointer"},children:[e.jsx(r.ArrowLeft,{size:24,color:"var(--Grey-Muted, #808183)",strokeWidth:2}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:10},children:[e.jsx("span",{style:{fontSize:14,fontWeight:400,color:"#000",lineHeight:1.2,textAlign:"left"},children:H||"Previous Session Title"}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"#000",lineHeight:1.2,opacity:.5,textAlign:"left"},children:z||"Short description of the session"})]})]}),e.jsxs("button",{onClick:je,style:{display:"flex",alignItems:"center",justifyContent:"flex-end",gap:30,padding:"12px 28px",flex:1,background:"var(--Grey-White, #FFF)",border:"1px solid var(--Grey-absent, #D9D9D9)",cursor:"pointer"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:10},children:[e.jsx("span",{style:{fontSize:14,fontWeight:400,color:"#000",lineHeight:1.2,textAlign:"left"},children:L||"Next Session Title"}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"#000",lineHeight:1.2,opacity:.5,textAlign:"left"},children:P||"Short description of the session"})]}),e.jsx(r.ArrowRight,{size:24,color:"var(--Grey-Muted, #808183)",strokeWidth:2})]})]})]})};exports.UpdatedInteractionRecording=he.UpdatedInteractionRecording;exports.UpdatedCoachingSynthesisCard=ye;exports.UpdatedCompassScore=me;exports.UpdatedInteractionContext=xe;exports.UpdatedInteractionDetails=nt;exports.UpdatedInteractionScores=ue;exports.UpdatedInteractionSignals=ve;
 //# sourceMappingURL=UpdatedInteractionDetails.cjs.js.map