chordia-ui 3.4.0 → 3.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Timeline.cjs.js +1 -6
- package/dist/Timeline.cjs.js.map +1 -1
- package/dist/Timeline.es.js +129 -597
- package/dist/Timeline.es.js.map +1 -1
- package/dist/TranscriptCard.cjs.js +7 -0
- package/dist/TranscriptCard.cjs.js.map +1 -0
- package/dist/TranscriptCard.es.js +474 -0
- package/dist/TranscriptCard.es.js.map +1 -0
- package/dist/UpdatedInteractionRecording.cjs.js +1 -1
- package/dist/UpdatedInteractionRecording.cjs.js.map +1 -1
- package/dist/UpdatedInteractionRecording.es.js +516 -420
- package/dist/UpdatedInteractionRecording.es.js.map +1 -1
- package/dist/components/UpdatedInteractionDetails.cjs.js +2 -2
- package/dist/components/UpdatedInteractionDetails.cjs.js.map +1 -1
- package/dist/components/UpdatedInteractionDetails.es.js +304 -285
- package/dist/components/UpdatedInteractionDetails.es.js.map +1 -1
- package/dist/components/media.cjs.js +1 -1
- package/dist/components/media.cjs.js.map +1 -1
- package/dist/components/media.es.js +9 -8
- package/dist/components/media.es.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs2.js +1 -1
- package/dist/index.cjs2.js.map +1 -1
- package/dist/index.cjs3.js +2 -2
- package/dist/index.cjs3.js.map +1 -1
- package/dist/index.es.js +53 -52
- package/dist/index.es.js.map +1 -1
- package/dist/index.es2.js +1 -1
- package/dist/index.es2.js.map +1 -1
- package/dist/index.es3.js +11 -4
- package/dist/index.es3.js.map +1 -1
- package/dist/pages/interactionDetails.cjs.js +2 -2
- package/dist/pages/interactionDetails.cjs.js.map +1 -1
- package/dist/pages/interactionDetails.es.js +17 -16
- package/dist/pages/interactionDetails.es.js.map +1 -1
- package/package.json +1 -1
- package/src/components/UpdatedInteractionDetails/UpdatedInteractionDetails.jsx +125 -107
- package/src/components/UpdatedInteractionDetails/UpdatedInteractionRecording.jsx +342 -178
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UpdatedInteractionRecording.es.js","sources":["../src/components/UpdatedInteractionDetails/UpdatedInteractionRecording.jsx"],"sourcesContent":["import { useRef, useState, forwardRef, useImperativeHandle } from 'react';\nimport {\n Play, Pause, RotateCcw, RotateCw,\n ChevronDown,\n AudioLines, PlayCircle, PauseCircle,\n} from 'lucide-react';\nimport Timeline from '../media/Timeline.jsx';\nimport TranscriptCard from '../media/TranscriptCard.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 David: [\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: 'David', 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: 'David', 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: 'David', type: 'agent', time: '00:21', text: 'Oh, interesting. Okay. Can you swing by with it one of these days?' },\n];\n\n/* ── Component ── */\nconst UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecording({\n audioUrl,\n timelineSegments = [],\n durationSeconds = 0,\n currentTimeSeconds = 0,\n timelinePlaying = false,\n playbackRate = 1,\n onSeek,\n onTogglePlay,\n onSeekBack,\n onSeekForward,\n onSetPlaybackRate,\n audioRef,\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 [demoSeekTime, setDemoSeekTime] = useState(null);\n const [demoRate, setDemoRate] = useState(playbackRate || 1);\n const [demoPlaying, setDemoPlaying] = useState(timelinePlaying);\n const [showSpeedMenu, setShowSpeedMenu] = useState(false);\n const [activeDemoIdx, setActiveDemoIdx] = useState(activeDemoIndex);\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 const 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 const SPEED_OPTIONS = [1, 1.25, 1.5, 2];\n const isDemo = !audioUrl;\n const activeRate = isDemo ? demoRate : playbackRate;\n const activePlaying = isDemo ? demoPlaying : timelinePlaying;\n\n /* Expose seekTo for parent to call via ref */\n useImperativeHandle(ref, () => ({\n seekTo: (timeSec) => {\n handleSeek(timeSec);\n setDemoPlaying(true);\n // Scroll to matching transcript card\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 seek — updates local demo state or calls parent onSeek */\n const handleSeek = (timeSeconds) => {\n const clamped = Math.max(0, Math.min(timeSeconds, durationSeconds || 156));\n if (onSeek) onSeek(clamped);\n setDemoSeekTime(clamped);\n setActiveDemoIdx(computeActiveIdx(clamped));\n };\n\n const handleTogglePlay = () => {\n if (onTogglePlay) onTogglePlay();\n else setDemoPlaying((prev) => !prev);\n };\n\n const handleSeekBack = () => {\n if (onSeekBack) onSeekBack();\n else handleSeek(Math.max(0, (demoSeekTime ?? 0) - 10));\n };\n\n const handleSeekForward = () => {\n if (onSeekForward) onSeekForward();\n else {\n const demoDur = durationSeconds || 156;\n handleSeek(Math.min(demoDur, (demoSeekTime ?? 0) + 10));\n }\n };\n\n const handleSetRate = (rate) => {\n if (onSetPlaybackRate) onSetPlaybackRate(rate);\n setDemoRate(rate);\n setShowSpeedMenu(false);\n };\n\n /* Handle transcript card play/pause */\n const handleDemoTurnPlayPause = (idx) => {\n if (activeDemoIdx === idx && demoPlaying) {\n setDemoPlaying(false);\n } else {\n const turnTime = parseTimeStr(DEMO_TRANSCRIPT[idx]?.time);\n setActiveDemoIdx(idx);\n setDemoPlaying(true);\n handleSeek(turnTime);\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: timelinePlaying && 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 const demoDuration = durationSeconds || 156;\n const effectiveTime = demoSeekTime != null ? demoSeekTime : (durationSeconds > 0 ? currentTimeSeconds : 0);\n const progress = demoDuration > 0 ? (effectiveTime / demoDuration) * 100 : 0;\n const demoCurrentTime = Math.round(effectiveTime);\n\n return (\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 SECTION\n ════════════════════════════════════════ */}\n <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>\n\n {/* ── Row 1: Title + Controls — Figma: Frame 35, horizontal, space-between, center ── */}\n <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>\n <span style={{\n fontSize: 15, fontWeight: 600,\n color: 'var(--Grey-Strong, #2E3236)',\n lineHeight: 1.2,\n }}>\n Recording\n </span>\n\n {/* Frame 34: controls — horizontal, gap: 12, center */}\n <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, justifyContent: 'center' }}>\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 ? (\n <>\n <Timeline\n segments={timelineSegments}\n durationSeconds={durationSeconds}\n currentTimeSeconds={currentTimeSeconds}\n onSeek={onSeek}\n showControls={false}\n hasRecording\n timelinePlaying={timelinePlaying}\n playbackRate={playbackRate}\n />\n <audio ref={audioRef} 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(demoCurrentTime)}\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 const seekTime = pct * demoDuration;\n handleSeek(seekTime);\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 {['David', '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 * demoDuration);\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 === 'David'\n ? 'var(--Grey-Strong, #2E3236)'\n : 'var(--Grey-Muted, #808183)',\n }} />\n ))}\n </div>\n </div>\n ))}\n\n {/* ── Playback position: dotted line + avatar + 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(demoCurrentTime)}\n </div>\n </div>\n </div>\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 ── */}\n {turns ? (\n <div id=\"transcript-container\" ref={scrollRef} style={{ maxHeight: 600, overflowY: 'auto' }}>\n <TranscriptCard\n turns={turns}\n audioUrl={audioUrl}\n activeTurnIndex={activeTurnIndex}\n autoScrollActiveTurn={timelinePlaying}\n isExternalPlaying={timelinePlaying}\n onTurnPlayPause={onTurnPlayPause}\n />\n </div>\n ) : (\n <div ref={scrollRef} style={{\n display: 'flex', flexDirection: 'column',\n maxHeight: 600, overflowY: 'auto',\n }}>\n {DEMO_TRANSCRIPT.map((card, i) => {\n const isActive = i === activeDemoIdx && demoPlaying;\n const isCustomer = 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 {/* Frame 40: Speaker name + time — horizontal, space-between, center */}\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.speaker}\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.time}\n </span>\n </div>\n </div>\n\n {/* Frame 39: Play/Pause icon + text — horizontal, gap: 8 */}\n <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, width: '100%' }}>\n <button\n onClick={() => handleDemoTurnPlayPause(i)}\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 )}\n </div>\n </div>\n );\n});\n\nexport default UpdatedInteractionRecording;\n"],"names":["fmtTime","seconds","m","s","DEMO_SEGMENTS","DEMO_TRANSCRIPT","UpdatedInteractionRecording","forwardRef","audioUrl","timelineSegments","durationSeconds","currentTimeSeconds","timelinePlaying","playbackRate","onSeek","onTogglePlay","onSeekBack","onSeekForward","onSetPlaybackRate","audioRef","transcript","highlightedTurns","activeTurnIndex","activeDemoIndex","turnObservations","setExpandedSignals","onTurnPlayPause","ref","scrollRef","useRef","demoSeekTime","setDemoSeekTime","useState","demoRate","setDemoRate","demoPlaying","setDemoPlaying","showSpeedMenu","setShowSpeedMenu","activeDemoIdx","setActiveDemoIdx","computeActiveIdx","timeSec","i","turnTime","parseTimeStr","timeStr","parts","SPEED_OPTIONS","isDemo","activeRate","activePlaying","useImperativeHandle","handleSeek","idx","cards","_a","timeSeconds","clamped","handleTogglePlay","prev","handleSeekBack","handleSeekForward","handleSetRate","rate","handleDemoTurnPlayPause","formatTimeRange","startMs","endMs","fmt","ms","minutes","turns","_b","obs","el","demoDuration","effectiveTime","progress","demoCurrentTime","jsxs","jsx","RotateCcw","Pause","Play","RotateCw","ChevronDown","speed","Fragment","Timeline","rect","clickX","seekTime","speaker","rowIdx","e","pct","seg","TranscriptCard","card","isActive","isCustomer","AudioLines","PauseCircle","PlayCircle"],"mappings":"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"}
|
|
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":";;;;AASA,SAASA,GAAQC,GAAS;AACxB,QAAMC,IAAI,KAAK,MAAMD,IAAU,EAAE,GAC3BE,IAAI,KAAK,MAAMF,IAAU,EAAE;AAC1B,SAAA,GAAGC,CAAC,IAAIC,EAAE,WAAW,SAAS,GAAG,GAAG,CAAC;AAC9C;AAGA,MAAMC,KAAgB;AAAA,EACpB,OAAO;AAAA,IACL,EAAE,OAAO,GAAG,KAAK,KAAK;AAAA,IACtB,EAAE,OAAO,MAAM,KAAK,KAAK;AAAA,IACzB,EAAE,OAAO,MAAM,KAAK,KAAK;AAAA,IACzB,EAAE,OAAO,MAAM,KAAK,KAAK;AAAA,IACzB,EAAE,OAAO,MAAM,KAAK,KAAK;AAAA,IACzB,EAAE,OAAO,MAAM,KAAK,KAAK;AAAA,IACzB,EAAE,OAAO,MAAM,KAAK,EAAE;AAAA,EACxB;AAAA,EACA,UAAU;AAAA,IACR,EAAE,OAAO,KAAK,KAAK,KAAK;AAAA,IACxB,EAAE,OAAO,MAAM,KAAK,KAAK;AAAA,IACzB,EAAE,OAAO,MAAM,KAAK,KAAK;AAAA,IACzB,EAAE,OAAO,KAAK,KAAK,KAAK;AAAA,IACxB,EAAE,OAAO,MAAM,KAAK,IAAK;AAAA,EAC3B;AACF,GAEMC,IAAkB;AAAA,EACtB,EAAE,SAAS,SAAS,MAAM,SAAS,MAAM,SAAS,MAAM,8EAA8E;AAAA,EACtI,EAAE,SAAS,YAAY,MAAM,YAAY,MAAM,SAAS,MAAM,iDAAiD;AAAA,EAC/G,EAAE,SAAS,SAAS,MAAM,SAAS,MAAM,SAAS,MAAM,sBAAsB;AAAA,EAC9E,EAAE,SAAS,YAAY,MAAM,YAAY,MAAM,SAAS,MAAM,gbAAgb;AAAA,EAC9e,EAAE,SAAS,SAAS,MAAM,SAAS,MAAM,SAAS,MAAM,qEAAqE;AAC/H,GAEMC,KAAgB,CAAC,GAAG,MAAM,KAAK,CAAC;AAEtC,SAASC,GAAaC,GAAS;AAC7B,MAAI,CAACA;AAAgB,WAAA;AACrB,QAAMC,IAAQD,EAAQ,MAAM,GAAG,EAAE,IAAI,MAAM;AAC3C,UAAQC,EAAM,CAAC,KAAK,KAAK,MAAMA,EAAM,CAAC,KAAK;AAC7C;AAGM,MAAAC,KAA8BC,GAAW,SAAqC;AAAA,EAClF,UAAAC;AAAA,EACA,kBAAAC,IAAmB,CAAC;AAAA,EACpB,iBAAAC,IAAkB;AAAA;AAAA,EAElB,oBAAoBC;AAAA,EACpB,iBAAiBC;AAAA,EACjB,cAAcC;AAAA,EACd,QAAQC;AAAA,EACR,cAAcC;AAAA,EACd,YAAYC;AAAA,EACZ,eAAeC;AAAA,EACf,mBAAmBC;AAAA,EACnB,UAAUC;AAAA;AAAA,EAEV,WAAAC,KAAY;AAAA,EACZ,cAAAC,KAAe;AAAA;AAAA,EAEf,YAAAC;AAAA,EACA,kBAAAC,yBAAuB,IAAI;AAAA,EAC3B,iBAAAC;AAAA,EACA,iBAAAC,KAAkB;AAAA,EAClB,kBAAAC,KAAmB,CAAC;AAAA,EACpB,oBAAAC;AAAA,EACA,iBAAAC;AACF,GAAGC,IAAK;;AACA,QAAAC,IAAYC,EAAO,IAAI,GACvBC,IAAmBD,EAAO,IAAI,GAC9BE,IAAeF,EAAO,IAAI,GAG1B,CAACG,GAAiBC,CAAkB,IAAIC,EAAS,EAAK,GACtD,CAACC,GAAqBC,CAAsB,IAAIF,EAAS,CAAC,GAC1D,CAACG,IAAkBC,EAAmB,IAAIJ,EAAS,CAAC,GACpD,CAACK,IAAcC,EAAe,IAAIN,EAAS,CAAC,GAG5C,CAACO,GAAcC,EAAe,IAAIR,EAAS,IAAI,GAC/C,CAACS,IAAUC,EAAW,IAAIV,EAAS,CAAC,GACpC,CAACW,IAAaC,CAAc,IAAIZ,EAAS,EAAK,GAC9C,CAACa,IAAeC,CAAgB,IAAId,EAAS,EAAK,GAClD,CAACe,GAAeC,CAAgB,IAAIhB,EAASX,EAAe,GAG5D4B,IAAgB,CAAC,CAAClC,GAClBmC,IAAS,CAAC9C,GACV+C,IAAc/C,KAAY,CAAC6C,GAG3BG,IAAgBF,IAASP,KAAeM,IAAiBzC,KAAmB,KAASsB,GACrFuB,KAAoBH,IAAUX,KAAgB,IAAMU,IAAiB1C,KAAuB,IAAK0B,GACjGqB,IAAaJ,IAAST,KAAYQ,IAAiBxC,KAAgB,IAAK4B,IACxEkB,IAAiBL,IAAU5C,KAAmB,MAAQ2C,IAAgB3C,IAAmB6B,MAAoB7B,KAAmB,GAIhIkD,IAAoBC,GAAY,MAAM;AAC1C,UAAMC,IAAO,MAAM;AACjB,YAAMC,IAAQ/B,EAAiB;AAC3B,MAAA+B,KAAOzB,EAAuByB,EAAM,WAAW,GACtC9B,EAAA,UAAU,sBAAsB6B,CAAI;AAAA,IAAA;AAEtC,IAAA7B,EAAA,UAAU,sBAAsB6B,CAAI;AAAA,EACnD,GAAG,CAAE,CAAA,GAECE,IAAmBH,GAAY,MAAM;AACzC,IAAI5B,EAAa,YACf,qBAAqBA,EAAa,OAAO,GACzCA,EAAa,UAAU;AAAA,EAE3B,GAAG,CAAE,CAAA;AAGL,EAAAgC,GAAU,MAAM,MAAMD,EAAoB,GAAA,CAACA,CAAgB,CAAC,GAG5DC,GAAU,MAAM;AACd,QAAI,CAACV;AAAa;AAClB,UAAMQ,IAAQ/B,EAAiB;AAC/B,QAAI,CAAC+B;AAAO;AACZ,UAAMG,IAAW,MAAM1B,GAAoBuB,EAAM,YAAY,CAAC,GACxDI,IAAU,MAAM;AAAE,MAAAhC,EAAmB,EAAK,GAAoB6B;IAAA;AAC9D,WAAAD,EAAA,iBAAiB,kBAAkBG,CAAQ,GAC3CH,EAAA,iBAAiB,SAASI,CAAO,GAChC,MAAM;AACL,MAAAJ,EAAA,oBAAoB,kBAAkBG,CAAQ,GAC9CH,EAAA,oBAAoB,SAASI,CAAO;AAAA,IAAA;AAAA,EAC5C,GACC,CAACZ,GAAaS,CAAgB,CAAC;AAG5B,QAAAI,IAAmB,CAACC,MAAY;AACpC,aAASC,IAAIrE,EAAgB,SAAS,GAAGqE,KAAK,GAAGA,KAAK;AACpD,YAAMC,IAAWpE,GAAaF,EAAgBqE,CAAC,EAAE,IAAI;AACrD,UAAID,KAAWE;AAAiB,eAAAD;AAAA,IAClC;AACO,WAAA;AAAA,EAAA,GAIHE,IAAa,CAACC,MAAgB;AAE5B,UAAAC,IAAU,KAAK,IAAI,GAAG,KAAK,IAAID,GADzBd,KAAkB,GACuB,CAAC;AAEtD,QAAIJ,GAAa;AACf,YAAMQ,IAAQ/B,EAAiB;AAC3B,MAAA+B,MAAOA,EAAM,cAAcW,IAC/BpC,EAAuBoC,CAAO;AAAA,IAAA;AAChC,MAAWrB,KAAiBvC,KAC1BA,EAAe4D,CAAO;AAIxB,IAAA9B,GAAgB8B,CAAO,GACNtB,EAAAgB,EAAiBM,CAAO,CAAC;AAAA,EAAA,GAGtCC,KAAmB,MAAM;AAC7B,QAAIpB,GAAa;AACf,YAAMQ,IAAQ/B,EAAiB;AAC/B,UAAI,CAAC+B;AAAO;AACZ,MAAI7B,KACF6B,EAAM,MAAM,GACKC,KACjB7B,EAAmB,EAAK,KAElB4B,EAAA,OAAO,KAAK,MAAM;AACtB,QAAA5B,EAAmB,EAAI,GACLyB;MAAA,CACnB,EAAE,MAAM,MAAM;AAAA,MAAA,CAAE;AAAA,IACnB;AACF,MAAWP,KAAiBtC,IACLA,MAGNiC,EAAA,CAAC4B,MAAS,CAACA,CAAI;AAAA,EAChC,GAGIC,KAAiB,MAAM;AAC3B,IAAIxB,KAAiBrC,IAAuCA,MAG1DwD,EAAW,KAAK,IAAI,IADRjB,IAAclB,IAAuBM,KAAgB,KACpC,EAAE,CAAC;AAAA,EAClC,GAGImC,KAAoB,MAAM;AAC9B,IAAIzB,KAAiBpC,IAA6CA,MAIhEuD,EAAW,KAAK,IADJb,KAAkB,MADlBJ,IAAclB,IAAuBM,KAAgB,KAElC,EAAE,CAAC;AAAA,EACpC,GAGIoC,KAAgB,CAACC,MAAS;AAC9B,QAAIzB,GAAa;AACf,YAAMQ,IAAQ/B,EAAiB;AAC3B,MAAA+B,MAAOA,EAAM,eAAeiB,IAChCtC,GAAgBsC,CAAI;AAAA,IAAA;AACtB,MAAW3B,KAAiBnC,KAC1BA,EAA0B8D,CAAI;AAEhC,IAAAlC,GAAYkC,CAAI,GAChB9B,EAAiB,EAAK;AAAA,EAAA;AAIxB,EAAA+B,GAAoBpD,IAAK,OAAO;AAAA,IAC9B,QAAQ,CAACwC,MAAY;AAEnB,UADAG,EAAWH,CAAO,GACdd,GAAa;AACf,cAAMQ,IAAQ/B,EAAiB;AAC/B,QAAI+B,KACIA,EAAA,OAAO,KAAK,MAAM;AACtB,UAAA5B,EAAmB,EAAI,GACLyB;QAAA,CACnB,EAAE,MAAM,MAAM;AAAA,QAAA,CAAE;AAAA,MACnB;AAEA,QAAAZ,EAAe,EAAI;AAEf,YAAAkC,IAAMd,EAAiBC,CAAO;AACpC,MAAAjB,EAAiB8B,CAAG,GACpB,WAAW,MAAM;;AACT,cAAAC,KAAQC,IAAAtD,EAAU,YAAV,gBAAAsD,EAAmB;AAC7B,QAAAD,KAAA,QAAAA,EAAQD,MACJC,EAAAD,CAAG,EAAE,eAAe,EAAE,UAAU,UAAU,OAAO,WAAW;AAAA,SAEnE,EAAE;AAAA,IACP;AAAA,EACA,EAAA;AAGI,QAAAG,KAA0B,CAACH,MAAQ;;AACnC,QAAA/B,MAAkB+B,KAAO1B,GAAe;AAC1C,UAAID,GAAa;AACf,cAAMQ,IAAQ/B,EAAiB;AAC3B,QAAA+B,KAAOA,EAAM,MAAM,GACNC,KACjB7B,EAAmB,EAAK;AAAA,MAC1B;AACA,MAAAa,EAAe,EAAK;AAAA,IAAA,OACf;AACL,YAAMuB,IAAWpE,IAAaiF,IAAAnF,EAAgBiF,CAAG,MAAnB,gBAAAE,EAAsB,IAAI;AAGxD,UAFAhC,EAAiB8B,CAAG,GACpBV,EAAWD,CAAQ,GACfhB,GAAa;AACf,cAAMQ,IAAQ/B,EAAiB;AAC/B,QAAI+B,MACFA,EAAM,cAAcQ,GACdR,EAAA,OAAO,KAAK,MAAM;AACtB,UAAA5B,EAAmB,EAAI,GACLyB;QAAA,CACnB,EAAE,MAAM,MAAM;AAAA,QAAA,CAAE;AAAA,MAErB;AACA,MAAAZ,EAAe,EAAI;AAAA,IACrB;AAAA,EAAA,GAIIsC,KAAkB,CAACC,GAASC,MAAU;AAC1C,QAAID,KAAW;AAAa;AACtB,UAAAE,IAAM,CAACC,MAAO;AAClB,YAAMC,IAAU,KAAK,MAAMD,IAAK,GAAK,GAC/B7F,IAAU,KAAK,MAAO6F,IAAK,MAAS,GAAI;AAC9C,aAAO,GAAGC,EAAQ,SAAS,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI9F,EAAQ,SAAS,EAAE,SAAS,GAAG,GAAG,CAAC;AAAA,IAAA;AAEtF,WAAO,GAAG4F,EAAIF,CAAO,CAAC,IAASC,KAAS,OAAOC,EAAID,CAAK,IAAIC,EAAIF,CAAO,CAAC;AAAA,EAAA,GAGpEK,KAAQR,KAAA9D,KAAA,gBAAAA,EAAY,aAAZ,QAAA8D,GAAsB,SAChC9D,EAAW,SAAS,IAAI,CAACxB,GAAGwE,MAAO;;AAAA;AAAA,MACjC,OAAOxE,EAAE,UAAU,YAAWsF,IAAA9D,EAAW,cAAX,gBAAA8D,EAAsB,UAAS,YAAYS,IAAAvE,EAAW,cAAX,gBAAAuE,EAAsB,aAAY;AAAA,MAC3G,WAAW/F,EAAE,UAAU,UAAU,UAAU;AAAA,MAC3C,MAAMA,EAAE,QAAQ;AAAA,MAChB,WAAWwF,GAAgBxF,EAAE,SAASA,EAAE,UAAUA,EAAE,OAAOA,EAAE,MAAM;AAAA,MACnE,eAAeyB,GAAiB,IAAI+C,CAAC;AAAA,MACrC,gBAAgBd,KAAiBhC,MAAoB8C,IAChDxE,EAAE,UAAU,UAAU,wBAAwB,0BAC/C;AAAA,MACJ,eAAe4B,GAAiB4C,CAAC,KAAK,CAAA,GAAI,IAAI,CAACwB,OAAS;AAAA,QACtD,GAAGA;AAAA,QACH,SAAS,MAAM;AACQ,UAAAnE,KAAA,QAAAA,EAAA,CAACiD,MAAS,oBAAI,IAAI,CAAC,GAAGA,GAAMkB,EAAI,SAAS,CAAC,IAC/D,WAAW,MAAM;AACf,kBAAMC,IAAK,SAAS,eAAe,UAAUD,EAAI,SAAS,EAAE;AACxD,YAAAC,KAAIA,EAAG,eAAe,EAAE,UAAU,UAAU,OAAO,WAAW;AAAA,aACjE,GAAG;AAAA,QACR;AAAA,MAAA,EACA;AAAA,IAAA;AAAA,GACF,IACF,MAGEC,IAAgB1C,IAAUX,KAAgB,IAAKc,IAC/CwC,IAAoBtC,KAAkB,KACtCuC,IAAWD,IAAoB,IAAKD,IAAgBC,IAAqB,MAAM,GAC/EE,KAAc,KAAK,MAAMH,CAAa;AAG1C,SAAA,gBAAAI,EAAC,SAAI,OAAO;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,EAGL,GAAA,UAAA;AAAA,IAAA,gBAAAA,EAAC,SAAI,OAAO;AAAA,MACV,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,OAAO;AAAA,IAEP,GAAA,UAAA;AAAA,MAAA,gBAAAC,EAAC,SAAI,OAAO;AAAA,QACV,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,YAAY;AAAA,QACZ,YAAY;AAAA,MACd,GACE,4BAACC,IAAW,EAAA,MAAM,IAAI,OAAM,WAAU,aAAa,IAAA,CAAK,EAC1D,CAAA;AAAA,MACA,gBAAAD,EAAC,UAAK,OAAO;AAAA,QACX,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,OAAO;AAAA,MAAA,GACN,UAEH,aAAA;AAAA,IAAA,GACF;AAAA,IAGA,gBAAAD,EAAC,SAAI,OAAO;AAAA,MACV,SAAS;AAAA,MACT,SAAS;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,YAAY;AAAA,IAMZ,GAAA,UAAA;AAAA,MAAC,gBAAAA,EAAA,OAAA,EAAI,OAAO,EAAE,OAAO,QAAQ,SAAS,QAAQ,eAAe,UAAU,KAAK,GAAA,GAG1E,UAAA;AAAA,QAAC,gBAAAA,EAAA,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,iBAAiB,KAAK,GAAA,GAC3F,UAAA;AAAA,UAAA,gBAAAA,EAAC,UAAK,OAAO;AAAA,YACX,UAAU;AAAA,YAAI,YAAY;AAAA,YAC1B,OAAO;AAAA,YACP,YAAY;AAAA,UAEX,GAAA,UAAA;AAAA,YAAAhF;AAAA,YAAU;AAAA,YAAIC;AAAA,UAAA,GACjB;AAAA,UAGA,gBAAA+E,EAAC,OAAI,EAAA,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,GAAA,GAExD,UAAA;AAAA,YAAA,gBAAAC,EAAC,QAAK,EAAA,OAAO,EAAE,UAAU,IAAI,YAAY,KAAK,OAAO,8BAA8B,YAAY,IAAI,GAAG,UAAE,MAAA;AAAA,YACxG,gBAAAA,EAAC,UAAO,EAAA,SAASxB,IAAgB,OAAO,EAAE,YAAY,QAAQ,QAAQ,QAAQ,QAAQ,WAAW,SAAS,GAAG,SAAS,QAAQ,YAAY,SAAS,GACjJ,UAAC,gBAAAwB,EAAAE,IAAA,EAAU,MAAM,IAAI,OAAM,WAAU,aAAa,IAAA,CAAK,EACzD,CAAA;AAAA,YAGC,gBAAAF,EAAA,UAAA,EAAO,SAAS1B,IAAkB,OAAO;AAAA,cACxC,YAAY;AAAA,cACZ,QAAQ;AAAA,cAAQ,QAAQ;AAAA,cACxB,OAAO;AAAA,cAAI,QAAQ;AAAA,cAAI,cAAc;AAAA,cACrC,SAAS;AAAA,cACT,SAAS;AAAA,cAAQ,YAAY;AAAA,cAAU,gBAAgB;AAAA,YACzD,GACG,UACGnB,IAAA,gBAAA6C,EAACG,IAAM,EAAA,MAAM,IAAI,OAAM,QAAO,MAAK,OAAO,CAAA,IACzC,gBAAAH,EAAAI,IAAA,EAAK,MAAM,IAAI,OAAM,QAAO,MAAK,QAAO,aAAa,KAAK,OAAO,EAAE,YAAY,EAAE,EAAA,CAAG,EAE3F,CAAA;AAAA,YAGA,gBAAAJ,EAAC,UAAO,EAAA,SAASvB,IAAmB,OAAO,EAAE,YAAY,QAAQ,QAAQ,QAAQ,QAAQ,WAAW,SAAS,GAAG,SAAS,QAAQ,YAAY,SAAS,GACpJ,UAAC,gBAAAuB,EAAAK,IAAA,EAAS,MAAM,IAAI,OAAM,WAAU,aAAa,IAAA,CAAK,EACxD,CAAA;AAAA,YACC,gBAAAL,EAAA,QAAA,EAAK,OAAO,EAAE,UAAU,IAAI,YAAY,KAAK,OAAO,8BAA8B,YAAY,IAAA,GAAO,UAAE,MAAA;AAAA,UAAA,GAC1G;AAAA,4BAGC,OAAI,EAAA,OAAO,EAAE,UAAU,WACtB,GAAA,UAAA;AAAA,YAAA,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS,MAAMlD,EAAiB,CAAC0B,MAAS,CAACA,CAAI;AAAA,gBAC/C,OAAO;AAAA,kBACL,YAAY;AAAA,kBACZ,QAAQ;AAAA,kBACR,cAAc;AAAA,kBACd,SAAS;AAAA,kBACT,QAAQ;AAAA,kBACR,UAAU;AAAA,kBACV,QAAQ;AAAA,kBACR,UAAU;AAAA,kBAAI,YAAY;AAAA,kBAC1B,OAAO;AAAA,kBACP,YAAY;AAAA,kBACZ,YAAY;AAAA,kBACZ,SAAS;AAAA,kBAAQ,YAAY;AAAA,kBAAU,gBAAgB;AAAA,kBAAU,KAAK;AAAA,gBACxE;AAAA,gBAEC,UAAA;AAAA,kBAAAlB;AAAA,kBAAW;AAAA,kBACX,gBAAA2C,EAAAM,IAAA,EAAY,MAAM,IAAI,OAAM,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACzC;AAAA,YAEC1D,MACE,gBAAAoD,EAAA,OAAA,EAAI,OAAO;AAAA,cACV,UAAU;AAAA,cACV,KAAK;AAAA,cACL,OAAO;AAAA,cACP,WAAW;AAAA,cACX,YAAY;AAAA,cACZ,QAAQ;AAAA,cACR,cAAc;AAAA,cACd,WAAW;AAAA,cACX,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,UAAU;AAAA,YAET,GAAA,UAAAnG,GAAc,IAAI,CAAC0G,MAClB,gBAAAR;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,SAAS,MAAMrB,GAAc6B,CAAK;AAAA,gBAClC,OAAO;AAAA,kBACL,SAAS;AAAA,kBACT,OAAO;AAAA,kBACP,SAAS;AAAA,kBACT,QAAQ;AAAA,kBACR,YAAYlD,MAAekD,IAAQ,kCAAkC;AAAA,kBACrE,QAAQ;AAAA,kBACR,UAAU;AAAA,kBACV,YAAYlD,MAAekD,IAAQ,MAAM;AAAA,kBACzC,OAAO;AAAA,kBACP,YAAY;AAAA,kBACZ,WAAW;AAAA,gBACb;AAAA,gBAEC,UAAA;AAAA,kBAAAA;AAAA,kBAAM;AAAA,gBAAA;AAAA,cAAA;AAAA,cAhBFA;AAAA,YAkBR,CAAA,GACH;AAAA,UAAA,GAEJ;AAAA,QAAA,GACF;AAAA,QAGCpG,KAAY6C,IAET,gBAAA+C,EAAAS,IAAA,EAAA,UAAA;AAAA,UAAA,gBAAAR;AAAA,YAACS;AAAA,YAAA;AAAA,cACC,UAAUrG;AAAA,cACV,iBAAAC;AAAA,cACA,oBAAoBC;AAAA,cACpB,QAAQG;AAAA,cACR,cAAc;AAAA,cACd,cAAY;AAAA,cACZ,iBAAiBF;AAAA,cACjB,cAAcC;AAAA,YAAA;AAAA,UAChB;AAAA,4BACC,SAAM,EAAA,KAAKM,GAAkB,SAAQ,QAAO,OAAO,EAAE,SAAS,UAC7D,UAAC,gBAAAkF,EAAA,UAAA,EAAO,KAAK7F,GAAU,MAAK,aAAa,CAAA,GAC3C;AAAA,QACF,EAAA,CAAA,IAEC,gBAAA4F,EAAA,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,GAAA,GAE3D,UAAA;AAAA,UAAC,gBAAAA,EAAA,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAA,GACxD,UAAA;AAAA,YAAA,gBAAAC,EAAC,UAAK,OAAO;AAAA,cACX,UAAU;AAAA,cAAI,YAAY;AAAA,cAC1B,OAAOH,IAAW,IAAI,kCAAkC;AAAA,cACxD,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,UAAU;AAAA,YACZ,GACG,UAAQtG,GAAAuG,EAAW,GACtB;AAAA,YACA,gBAAAC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS,CAAC,MAAM;AACR,wBAAAW,IAAO,EAAE,cAAc,sBAAsB,GAC7CC,IAAS,EAAE,UAAUD,EAAK,MAC1BE,IAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGD,IAASD,EAAK,KAAK,CAAC;AACxD,kBAAAvC,EAAWyC,IAAMhB,CAAiB;AAAA,gBACpC;AAAA,gBACA,OAAO;AAAA,kBACL,MAAM;AAAA,kBAAG,QAAQ;AAAA,kBACjB,UAAU;AAAA,kBACV,SAAS;AAAA,kBAAQ,YAAY;AAAA,kBAC7B,QAAQ;AAAA,gBACV;AAAA,gBAGA,UAAA;AAAA,kBAAA,gBAAAI,EAAC,SAAI,OAAO;AAAA,oBACV,UAAU;AAAA,oBAAY,MAAM;AAAA,oBAAG,OAAO;AAAA,oBACtC,QAAQ;AAAA,oBAAG,cAAc;AAAA,oBACzB,YAAY;AAAA,oBACZ,eAAe;AAAA,kBAAA,GACd;AAAA,kBAEH,gBAAAA,EAAC,SAAI,OAAO;AAAA,oBACV,UAAU;AAAA,oBAAY,MAAM;AAAA,oBAAG,KAAK;AAAA,oBACpC,WAAW;AAAA,oBACX,OAAO,GAAGH,CAAQ;AAAA,oBAClB,QAAQ;AAAA,oBAAG,cAAc;AAAA,oBACzB,YAAY;AAAA,oBACZ,eAAe;AAAA,kBAAA,GACd;AAAA,kBAEH,gBAAAG;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,OAAM;AAAA,sBAAK,QAAO;AAAA,sBAAK,SAAQ;AAAA,sBAAY,MAAK;AAAA,sBAChD,OAAM;AAAA,sBACN,OAAO;AAAA,wBACL,UAAU;AAAA,wBACV,MAAM,GAAGH,CAAQ;AAAA,wBACjB,KAAK;AAAA,wBACL,WAAW;AAAA,wBACX,eAAe;AAAA,sBACjB;AAAA,sBAEA,UAAA,gBAAAG;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,GAAE;AAAA,0BACF,MAAK;AAAA,0BACL,QAAO;AAAA,0BACP,aAAY;AAAA,wBAAA;AAAA,sBACd;AAAA,oBAAA;AAAA,kBACF;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA,GACF;AAAA,UAGA,gBAAAD,EAAC,OAAI,EAAA,OAAO,EAAE,UAAU,YAAY,eAAe,IAAI,QAAQ,UAAA,GAC5D,UAAA;AAAA,YAAC,CAAA,SAAS,UAAU,EAAE,IAAI,CAACc,GAASC,MAClC,gBAAAf,EAAA,OAAA,EAAkB,OAAO;AAAA,cACxB,SAAS;AAAA,cAAQ,YAAY;AAAA,cAAU,KAAK;AAAA,cAC5C,QAAQ;AAAA,cACR,cAAce,MAAW,IAAI,IAAI;AAAA,YAEjC,GAAA,UAAA;AAAA,cAAA,gBAAAd,EAAC,UAAK,OAAO;AAAA,gBACX,UAAU;AAAA,gBAAI,YAAY;AAAA,gBAC1B,OAAO;AAAA,gBACP,YAAY;AAAA,gBACZ,YAAY;AAAA,gBACZ,UAAU;AAAA,cAAA,GAET,UACHa,GAAA;AAAA,cACA,gBAAAd;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAS,CAACgB,MAAM;AACR,0BAAAL,IAAOK,EAAE,cAAc,sBAAsB,GAC7CH,IAAM,KAAK,IAAI,GAAG,KAAK,IAAI,IAAIG,EAAE,UAAUL,EAAK,QAAQA,EAAK,KAAK,CAAC;AACzE,oBAAAvC,EAAWyC,IAAMhB,CAAiB;AAAA,kBACpC;AAAA,kBACA,OAAO;AAAA,oBACL,MAAM;AAAA,oBAAG,QAAQ;AAAA,oBACjB,UAAU;AAAA,oBAAY,cAAc;AAAA,oBACpC,QAAQ;AAAA,kBACV;AAAA,kBAGA,UAAA;AAAA,oBAAA,gBAAAI,EAAC,SAAI,OAAO;AAAA,sBACV,UAAU;AAAA,sBAAY,MAAM;AAAA,sBAAG,OAAO;AAAA,sBACtC,KAAK;AAAA,sBAAO,WAAW;AAAA,sBACvB,QAAQ;AAAA,sBAAG,cAAc;AAAA,sBACzB,YAAY;AAAA,oBAAA,GACX;AAAA,oBAEFrG,GAAckH,CAAO,EAAE,IAAI,CAACG,GAAK,MAC/B,gBAAAhB,EAAA,OAAA,EAAY,OAAO;AAAA,sBAClB,UAAU;AAAA,sBACV,MAAM,GAAGgB,EAAI,QAAQ,GAAG;AAAA,sBACxB,OAAO,IAAIA,EAAI,MAAMA,EAAI,SAAS,GAAG;AAAA,sBACrC,KAAK;AAAA,sBAAG,QAAQ;AAAA,sBAAG,cAAc;AAAA,sBACjC,YAAYH,MAAY,UACpB,gCACA;AAAA,oBAAA,EACN,GARU,CAQP,CACJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACH;AAAA,YAAA,EAAA,GA7CQA,CA8CV,CACD;AAAA,YAGD,gBAAAd,EAAC,SAAI,OAAO;AAAA,cACV,UAAU;AAAA,cACV,MAAM;AAAA;AAAA,cACN,OAAO;AAAA,cACP,KAAK;AAAA,cACL,QAAQ;AAAA,cACR,eAAe;AAAA,YAGf,GAAA,UAAA;AAAA,cAAA,gBAAAC,EAAC,SAAI,OAAO;AAAA,gBACV,UAAU;AAAA,gBACV,MAAM,GAAGH,CAAQ;AAAA,gBACjB,KAAK;AAAA,gBACL,QAAQ;AAAA;AAAA,gBACR,WAAW;AAAA,gBACX,YAAY;AAAA,gBACZ,SAAS;AAAA,cAAA,GACR;AAAA,cAGH,gBAAAG,EAAC,SAAI,OAAO;AAAA,gBACV,UAAU;AAAA,gBACV,MAAM,GAAGH,CAAQ;AAAA,gBACjB,QAAQ;AAAA,gBACR,WAAW;AAAA,gBACX,YAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,UAAU;AAAA,gBAAI,YAAY;AAAA,gBAC1B,YAAY;AAAA,gBACZ,SAAS;AAAA,gBACT,cAAc;AAAA,gBACd,YAAY;AAAA,cACd,GACG,UAAQtG,GAAAuG,EAAW,GACtB;AAAA,YAAA,GACF;AAAA,UAAA,GACF;AAAA,UAGC5C,KACE,gBAAA8C,EAAA,SAAA,EAAM,KAAKrE,GAAkB,SAAQ,QAAO,OAAO,EAAE,SAAS,OAAA,GAC7D,UAAC,gBAAAqE,EAAA,UAAA,EAAO,KAAK7F,GAAU,MAAK,aAAa,CAAA,GAC3C;AAAA,QAAA,GAEJ;AAAA,MAAA,GAEJ;AAAA,MAMA,gBAAA4F,EAAC,SAAI,OAAO;AAAA,QACV,OAAO;AAAA,QACP,SAAS;AAAA,QAAQ,eAAe;AAAA,QAAU,KAAK;AAAA,MAG/C,GAAA,UAAA;AAAA,QAAA,gBAAAC,EAAC,SAAI,OAAO;AAAA,UACV,cAAc;AAAA,UACd,eAAe;AAAA,QACjB,GACE,UAAC,gBAAAA,EAAA,QAAA,EAAK,OAAO;AAAA,UACX,UAAU;AAAA,UAAI,YAAY;AAAA,UAC1B,OAAO;AAAA,UACP,YAAY;AAAA,QAAA,GACX,uBAEH,CAAA,GACF;AAAA,0BAGC,OAAI,EAAA,IAAG,wBAAuB,KAAKvE,GAAW,OAAO;AAAA,UACpD,SAAS;AAAA,UAAQ,eAAe;AAAA,UAChC,WAAW;AAAA,UAAK,WAAW;AAAA,QAAA,GAEzB,WAAA8D,KAAS3F,EAAgB,IAAI,CAACqH,OAAU;AAAA,UACxC,OAAOA,EAAK;AAAA,UACZ,WAAWA,EAAK;AAAA,UAChB,MAAMA,EAAK;AAAA,UACX,WAAWA,EAAK;AAAA,QAChB,EAAA,GAAG,IAAI,CAACA,GAAMhD,MAAM;AACd,gBAAAiD,IAAa,CAAC,CAAC3B,GACf4B,IAAWD,IACZ/D,KAAiBhC,MAAoB8C,IACrCA,MAAMnB,KAAiBK,GACtBiE,KAAcH,EAAK,aAAaA,EAAK,UAAU;AAGnD,iBAAA,gBAAAlB,EAAC,SAAY,OAAO;AAAA,YAClB,SAAS;AAAA,YACT,SAAS;AAAA,YACT,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,KAAK;AAAA,YACL,WAAW;AAAA,YACX,WAAW9B,IAAI,IAAI,0CAA0C;AAAA,YAC7D,YAAYkD,IAAW,kCAAkC;AAAA,UAGzD,GAAA,UAAA;AAAA,YAAA,gBAAApB,EAAC,SAAI,OAAO;AAAA,cACV,SAAS;AAAA,cAAQ,YAAY;AAAA,cAC7B,gBAAgB;AAAA,cAAiB,OAAO;AAAA,cACxC,KAAK;AAAA,YAEL,GAAA,UAAA;AAAA,cAAA,gBAAAC,EAAC,UAAK,OAAO;AAAA,gBACX,UAAU;AAAA,gBAAI,YAAY;AAAA,gBAC1B,YAAY;AAAA,gBACZ,OAAOoB,IAAa,gCAAgC;AAAA,cAAA,GAEnD,YAAK,OACR;AAAA,cACA,gBAAArB,EAAC,OAAI,EAAA,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAA,GACvD,UAAA;AAAA,gBAAAoB,KAEG,gBAAApB,EAAAS,IAAA,EAAA,UAAA;AAAA,kBAAA,gBAAAR,EAACqB,IAAW,EAAA,MAAM,IAAI,OAAM,WAAU;AAAA,kBACrC,gBAAArB,EAAAqB,IAAA,EAAW,MAAM,IAAI,OAAM,WAAU;AAAA,gBAAA,GACxC;AAAA,gBAEF,gBAAArB,EAAC,UAAK,OAAO;AAAA,kBACX,UAAU;AAAA,kBAAI,YAAY;AAAA,kBAC1B,YAAY;AAAA,kBACZ,OAAO;AAAA,gBAAA,GAEN,YAAK,WACR;AAAA,cAAA,GACF;AAAA,YAAA,GACF;AAAA,YAGC,gBAAAD,EAAA,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,cAAc,KAAK,GAAG,OAAO,OAAA,GACtE,UAAA;AAAA,cAAA,gBAAAC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAS,MAAM;AACb,oBAAIkB,KAAc3F,IAChBA,EAAgB0F,GAAMhD,CAAC,IAEvBe,GAAwBf,CAAC;AAAA,kBAE7B;AAAA,kBACA,OAAO;AAAA,oBACL,YAAY;AAAA,oBAAQ,QAAQ;AAAA,oBAC5B,QAAQ;AAAA,oBAAW,SAAS;AAAA,oBAC5B,YAAY;AAAA,oBACZ,SAAS;AAAA,kBACX;AAAA,kBAEC,cACE,gBAAA+B,EAAAsB,IAAA,EAAY,MAAM,IAAI,OAAM,WAAU,aAAa,IAAK,CAAA,sBAExDC,IAAW,EAAA,MAAM,IAAI,OAAM,WAAU,aAAa,GAAG;AAAA,gBAAA;AAAA,cAE1D;AAAA,cACA,gBAAAvB,EAAC,OAAE,OAAO;AAAA,gBACR,UAAU;AAAA,gBAAI,YAAY;AAAA,gBAC1B,OAAO;AAAA,gBACP,YAAY;AAAA,gBACZ,QAAQ;AAAA,gBACR,MAAM;AAAA,cAAA,GAEL,YAAK,MACR;AAAA,YAAA,GACF;AAAA,UAAA,EAAA,GAxEQ/B,CAyEV;AAAA,QAEH,CAAA,GACH;AAAA,MAAA,GACF;AAAA,IAAA,GACA;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"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=`
|
|
2
2
|
@keyframes updated-coaching-shimmer {
|
|
3
3
|
0% { background-position: -200% 0; }
|
|
4
4
|
100% { background-position: 200% 0; }
|
|
@@ -7,5 +7,5 @@
|
|
|
7
7
|
0%, 100% { opacity: 0.4; }
|
|
8
8
|
50% { opacity: 1; }
|
|
9
9
|
}
|
|
10
|
-
`,document.head.appendChild(t)}function xe({overall:t}){const n=he[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 ue({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 Z({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((a,g)=>e.jsx(ue,{item:a},g))})]})}const B=({data:t,loading:n,error:s})=>{var y,x;if(A.useEffect(()=>{ye()},[]),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 a=t.strengths||[],g=t.improvements||[],h=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"})]}),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:[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(xe,{overall:t.overall})]}),(a.length>0||g.length>0)&&e.jsxs("div",{style:{display:"flex",gap:24,paddingTop:24,borderTop:`1px solid ${c.absent}`},children:[e.jsx(Z,{icon:e.jsx(o.TrendingUp,{size:14,color:c.strong,strokeWidth:1.5}),label:"Key Strengths",items:a}),e.jsx(Z,{icon:e.jsx(o.Lightbulb,{size:14,color:c.strong,strokeWidth:1.5}),label:"Improvements",items:g})]})]})};function ve(t){const n=Math.floor(t/60),s=Math.round(t%60);return`${n}:${s.toString().padStart(2,"0")}`}const me={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)"},X={display:"flex",flexDirection:"column",flex:"1 0 0",gap:12,minWidth:0},se=({meta:t={},callPurpose:n={},classification:s={},dimensions:a=[],outcomeQuality:g="Neutral",onMoreDetails:h})=>{const m=t.duration_seconds!=null?ve(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},...a.filter((i,p)=>p%2===0).map(i=>({label:i.label||i.key,value:i.value})),{label:"Outcome Quality",value:g}].filter(Boolean),u=[y!=null&&{label:"Messages",value:y},S!=null&&{label:"Paradigm",value:S},...a.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:h,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:me,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:X,children:b.map(i=>l(i))}),e.jsx("div",{style:X,children:u.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,J=3,ee=t=>t!=null?Math.round(t*100)+"%":"—",te=t=>{if(t==null)return"—";const n=(t*100).toFixed(1);return t>0?`+${n}pp`:`${n}pp`},ie=({outcomeLift:t,driverLabels:n=[]})=>{var b;if(!t||t.lift==null)return null;const s=t.p_expected,a=t.p_full,g=t.lift_raw??(a!=null&&s!=null?a-s:null),h=t.lift,m=(b=t.interpretation)!=null&&b.lift_band?t.interpretation.lift_band.replace(/_/g," "):h>=0?"Positive":"Negative",y=m.charAt(0).toUpperCase()+m.slice(1),x=n.slice(0,J),S=n.length-J;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:te(h)}),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:ee(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:te(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:ee(a)}),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((u,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:u})},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]})})]})]})]})},ne=({children:t,size:n=28,onClick:s,title:a})=>{const[g,h]=A.useState(!1);return e.jsx("div",{title:a,onClick:s,onMouseEnter:()=>h(!0),onMouseLeave:()=>h(!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})},$=({signals:t={signals:[],present_count:0,total_signals_evaluated:0},expandedSignals:n=new Set,toggleSignal:s=()=>{},playEvidence:a=()=>{},highlightTurns:g=()=>{},onShowInTranscript:h=()=>{},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")}`},u=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 w,W,F;const p=l.key??l.id??i,f=n.has(p),C=((w=l.observations)==null?void 0:w.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||((W=l.key)==null?void 0:W.replace(/_/g," ")),C>0&&e.jsxs("span",{style:{fontWeight:600,color:"var(--text-dark, #0B0A0A)",marginLeft:6},children:["(",C,")"]})]}),f?e.jsx(o.ChevronUp,{size:20,color:"#767473"}):e.jsx(o.ChevronDown,{size:20,color:"#767473"})]}),f&&((F=l.observations)==null?void 0:F.length)>0&&e.jsx("div",{style:{display:"flex",flexDirection:"column",alignSelf:"stretch",gap:0},children:l.observations.map((I,M)=>{var H,E,_;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}),((E=(H=I.evidence)==null?void 0:H[0])==null?void 0:E.start_ms)!=null&&e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,flexShrink:0},children:[e.jsx(ne,{size:28,title:"Show in transcript",onClick:k=>{k.stopPropagation(),h(I.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(I.evidence[0].start_ms)})]})]}),(_=I.evidence)==null?void 0:_.map((k,R)=>k.text&&e.jsxs("div",{onClick:G=>{G.stopPropagation(),a(k)},onMouseEnter:()=>g(k.turn_ids??[]),onMouseLeave:()=>g([]),style:{display:"flex",alignItems:"center",gap:8,padding:"8px 0",cursor:"pointer"},children:[e.jsx(ne,{size:28,children:e.jsx(o.PlayCircle,{size:17,color:u(k)?"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:["“",k.text,"”"]})]},R))]},I.key??M)})})]},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)"},be=({score:t=4,maxScore:n=10})=>{const S=Math.min(Math.round(t/n*5),5),b=180/5,u=p=>{const f=p*Math.PI/180;return{x:121.5+85*Math.cos(f),y:123-85*Math.sin(f)}},l=(p,f)=>{const C=u(p),w=u(f),W=p-f>180?1:0;return`M ${C.x} ${C.y} A 85 85 0 ${W} 1 ${w.x} ${w.y}`},i=2;return e.jsx("svg",{width:243,height:130,viewBox:"0 0 243 130",fill:"none",children:Array.from({length:5},(p,f)=>{const C=180-f*b-(f>0?i/2:0),w=180-(f+1)*b+(f<5-1?i/2:0),W=f<S;return e.jsx("path",{d:l(C,w),stroke:W?j.strong:j.track,strokeWidth:30,strokeLinecap:"butt",fill:"none"},f)})})},je=({value:t=0,maxValue:n=5})=>e.jsx("div",{style:{display:"flex",gap:2},children:Array.from({length:n},(s,a)=>e.jsx("div",{style:{width:22,height:6,borderRadius:1,background:a<t?j.strong:j.track}},a))}),Se=({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(je,{value:n,maxValue:s})]}),oe=({score:t=83,maxScore:n=100,predictedScore:s=4,predictedLabel:a="Predicted Objective",description:g="",legends:h=[{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(be,{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:a})]}),e.jsx("div",{style:{width:"100%",height:1,background:j.absent}}),h.map((y,x)=>e.jsx(Se,{label:y.label,value:y.value},x))]})]})]})},ke=[{key:"overview",label:"Overview"},{key:"coaching",label:"Coaching Summary"},{key:"signals",label:"Signals & Guidance"},{key:"comments",label:"Comments"}],De=({title:t="Wheel Stud Replacement Enquiry",onBack:n,data:s,coachingData:a,audioUrl:g,prevSessionTitle:h,prevSessionDesc:m,nextSessionTitle:y,nextSessionDesc:x,onPreviousSession:S,onNextSession:b})=>{var Y,Q;const[u,l]=A.useState("overview"),[i,p]=A.useState(new Set),[f,C]=A.useState(!1),[w,W]=A.useState(null),F=A.useRef(null),I=[{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"}],M=d=>{var z;const D=d/1e3;(z=F.current)!=null&&z.seekTo&&F.current.seekTo(D)},H=d=>{p(D=>{const z=new Set(D);return z.has(d)?z.delete(d):z.add(d),z})},E=(s==null?void 0:s.blocks)||[],_=d=>{var D;return((D=E.find(z=>z.block_id===d))==null?void 0:D.payload)||{}},k=_("interaction-metadata"),R=_("interaction-context"),G=_("interaction-signals"),P=_("interaction-outcome-lift"),re=R.call_purpose||{},le=R.classification||{},T={duration_seconds:156,message_count:25,...k},U={interaction_driver:"General Information",interaction_direction:"inbound",...re},ae={interaction_paradigm:"Informational",...le},de={p_expected:.94,p_full:.83,lift_raw:-.11,lift:.043,interpretation:{lift_band:"positive"},...P},ce=((Y=P.driver_signal_keys)==null?void 0:Y.map(d=>d.replace(/^sig\./,"").replace(/_/g," ")))||["customer needs fully addressed","call flow expectations set","Opening expectations set","Active listening demonstrated","Resolution confirmed"],O=a||{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"},q=(Q=G==null?void 0:G.signals)!=null&&Q.length?G:{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."}]}]},ge="David",N="Sandra Bullock",V=8,pe=k.evaluated_dt?new Date(k.evaluated_dt).toLocaleString():"3/29/2026, 8:30:00 AM",fe=U.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:ke.map(d=>e.jsx("button",{onClick:()=>l(d.key),style:{display:"flex",padding:16,alignItems:"center",gap:10,background:"none",border:"none",borderBottom:u===d.key?"3px solid var(--Grey-Strong, #2E3236)":"3px solid transparent",cursor:"pointer",fontSize:15,fontWeight:u===d.key?500:400,color:u===d.key?"var(--Grey-Strong, #2E3236)":"var(--Grey-Muted, #808183)",whiteSpace:"nowrap",transition:"border-color 0.2s ease, color 0.2s ease"},children:d.label},d.key))}),e.jsxs("div",{style:{padding:24,flex:1,overflowY:"auto"},children:[u==="overview"&&e.jsxs("div",{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:pe})]}),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:fe})]}),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:ge})]}),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:()=>C(d=>!d),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:[N," (",V," Sessions)"]}),f?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})]}),f&&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:N}),e.jsxs("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1},children:[V," Sessions in past"]})]})]}),I.map((d,D)=>e.jsxs("div",{onMouseEnter:()=>W(D),onMouseLeave:()=>W(null),style:{display:"flex",width:264,padding:"12px 16px",justifyContent:"space-between",alignItems:"center",background:w===D?"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:d.title}),e.jsx("span",{style:{fontSize:12,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1},children:d.date})]}),w===D&&e.jsx(o.ExternalLink,{size:16,color:"var(--Grey-Muted, #808183)",strokeWidth:1,style:{flexShrink:0}})]},D)),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(oe,{})}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"stretch",justifyContent:"flex-end",gap:24,flex:1,minWidth:0},children:[e.jsx(se,{meta:T,callPurpose:U,classification:ae,outcomeQuality:"Neutral"}),e.jsx(ie,{outcomeLift:de,driverLabels:ce})]})]}),e.jsx(B,{data:O}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:16,alignSelf:"stretch"},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($,{signals:q,expandedSignals:i,toggleSignal:H,onShowInTranscript:M})}),e.jsx("div",{style:{flex:1,minWidth:0},children:e.jsx(L.UpdatedInteractionRecording,{ref:F,audioUrl:g,durationSeconds:T.duration_seconds,currentTimeSeconds:0})})]})]})]}),u==="coaching"&&e.jsx(B,{data:O}),u==="signals"&&e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:24},children:e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:24},children:[e.jsx("div",{style:{flex:1,minWidth:0},children:e.jsx($,{signals:q,expandedSignals:i,toggleSignal:H,onShowInTranscript:M})}),e.jsx("div",{style:{flex:1,minWidth:0},children:e.jsx(L.UpdatedInteractionRecording,{ref:F,audioUrl:g,durationSeconds:T.duration_seconds,currentTimeSeconds:0})})]})}),u==="comments"&&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:S,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:h||"Previous Session Title"}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"#000",lineHeight:1.2,opacity:.5,textAlign:"left"},children:m||"Short description of the session"})]})]}),e.jsxs("button",{onClick:b,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:y||"Next Session Title"}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"#000",lineHeight:1.2,opacity:.5,textAlign:"left"},children:x||"Short description of the session"})]}),e.jsx(o.ArrowRight,{size:24,color:"var(--Grey-Muted, #808183)",strokeWidth:2})]})]})]})};exports.UpdatedInteractionRecording=L.UpdatedInteractionRecording;exports.UpdatedCoachingSynthesisCard=B;exports.UpdatedCompassScore=oe;exports.UpdatedInteractionContext=se;exports.UpdatedInteractionDetails=De;exports.UpdatedInteractionScores=ie;exports.UpdatedInteractionSignals=$;
|
|
10
|
+
`,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;
|
|
11
11
|
//# sourceMappingURL=UpdatedInteractionDetails.cjs.js.map
|