chordia-ui 3.4.0 → 3.4.2

package/src/components/UpdatedInteractionDetails/UpdatedInteractionRecording.jsx

@@ -1,11 +1,11 @@
-import { useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import { useRef, useState, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react';
 import {
   Play, Pause, RotateCcw, RotateCw,
   ChevronDown,
   AudioLines, PlayCircle, PauseCircle,
+  FileSignal,
 } from 'lucide-react';
 import Timeline from '../media/Timeline.jsx';
-import TranscriptCard from '../media/TranscriptCard.jsx';
 
 function fmtTime(seconds) {
   const m = Math.floor(seconds / 60);
@@ -15,7 +15,7 @@ function fmtTime(seconds) {
 
 /* ── Demo data for static preview ── */
 const DEMO_SEGMENTS = {
-  David: [
+  Agent: [
     { start: 0, end: 0.08 },
     { start: 0.18, end: 0.22 },
     { start: 0.38, end: 0.42 },
@@ -34,27 +34,40 @@ const DEMO_SEGMENTS = {
 };
 
 const DEMO_TRANSCRIPT = [
-  { speaker: 'David', type: 'agent', time: '00:04', text: 'Thanks for calling Miles Point S Pensau. This is Steve. How can I help you?' },
+  { speaker: 'Agent', type: 'agent', time: '00:04', text: 'Thanks for calling Miles Point S Pensau. This is Steve. How can I help you?' },
   { speaker: 'Customer', type: 'customer', time: '00:12', text: 'Hi, Steve. This is Sandra with Botai Catering.' },
-  { speaker: 'David', type: 'agent', time: '00:18', text: 'Hello. How are you?' },
+  { speaker: 'Agent', type: 'agent', time: '00:18', text: 'Hello. How are you?' },
   { speaker: 'Customer', type: 'customer', time: '00:20', text: "I'm doing really good. Hey. I brought my vans in last week, and I call it a beeping van, the one that beeps when you back up. Makes the crunchy noise. So I just took it on Saturday after, I think I had the, the Miles. I picked it up on Saturday morning, and I went to an event. So So I don't know if it's the tire or something, but makes it a little crunchy noise. Sometimes when I do the brake, but only if I turn the wheel too." },
-  { speaker: 'David', type: 'agent', time: '00:21', text: 'Oh, interesting. Okay. Can you swing by with it one of these days?' },
+  { speaker: 'Agent', type: 'agent', time: '00:21', text: 'Oh, interesting. Okay. Can you swing by with it one of these days?' },
 ];
 
+const SPEED_OPTIONS = [1, 1.25, 1.5, 2];
+
+function parseTimeStr(timeStr) {
+  if (!timeStr) return 0;
+  const parts = timeStr.split(':').map(Number);
+  return (parts[0] || 0) * 60 + (parts[1] || 0);
+}
+
 /* ── Component ── */
 const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecording({
   audioUrl,
   timelineSegments = [],
   durationSeconds = 0,
-  currentTimeSeconds = 0,
-  timelinePlaying = false,
-  playbackRate = 1,
-  onSeek,
-  onTogglePlay,
-  onSeekBack,
-  onSeekForward,
-  onSetPlaybackRate,
-  audioRef,
+  // Parent-managed audio props (optional — if not provided, component manages its own audio)
+  currentTimeSeconds: externalCurrentTime,
+  timelinePlaying: externalPlaying,
+  playbackRate: externalRate,
+  onSeek: externalOnSeek,
+  onTogglePlay: externalOnTogglePlay,
+  onSeekBack: externalOnSeekBack,
+  onSeekForward: externalOnSeekForward,
+  onSetPlaybackRate: externalOnSetPlaybackRate,
+  audioRef: externalAudioRef,
+  // Speaker names
+  agentName = 'Agent',
+  customerName = 'Customer',
+  // Transcript props
   transcript,
   highlightedTurns = new Set(),
   activeTurnIndex,
@@ -64,12 +77,69 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
   onTurnPlayPause,
 }, ref) {
   const scrollRef = useRef(null);
+  const internalAudioRef = useRef(null);
+  const animFrameRef = useRef(null);
+
+  // Internal audio state (used when audioUrl is provided but parent doesn't manage playback)
+  const [internalPlaying, setInternalPlaying] = useState(false);
+  const [internalCurrentTime, setInternalCurrentTime] = useState(0);
+  const [internalDuration, setInternalDuration] = useState(0);
+  const [internalRate, setInternalRate] = useState(1);
+
+  // Demo state (used when no audioUrl)
   const [demoSeekTime, setDemoSeekTime] = useState(null);
-  const [demoRate, setDemoRate] = useState(playbackRate || 1);
-  const [demoPlaying, setDemoPlaying] = useState(timelinePlaying);
+  const [demoRate, setDemoRate] = useState(1);
+  const [demoPlaying, setDemoPlaying] = useState(false);
   const [showSpeedMenu, setShowSpeedMenu] = useState(false);
   const [activeDemoIdx, setActiveDemoIdx] = useState(activeDemoIndex);
 
+  // Determine control mode
+  const parentManaged = !!externalAudioRef;
+  const isDemo = !audioUrl;
+  const selfManaged = audioUrl && !parentManaged;
+
+  // Unified state
+  const activePlaying = isDemo ? demoPlaying : (parentManaged ? (externalPlaying ?? false) : internalPlaying);
+  const activeCurrentTime = isDemo ? (demoSeekTime ?? 0) : (parentManaged ? (externalCurrentTime ?? 0) : internalCurrentTime);
+  const activeRate = isDemo ? demoRate : (parentManaged ? (externalRate ?? 1) : internalRate);
+  const activeDuration = isDemo ? (durationSeconds || 156) : (parentManaged ? durationSeconds : (internalDuration || durationSeconds || 0));
+  const audioRefToUse = parentManaged ? externalAudioRef : internalAudioRef;
+
+  /* ── Internal audio time tracking via requestAnimationFrame ── */
+  const startTimeTracking = useCallback(() => {
+    const tick = () => {
+      const audio = internalAudioRef.current;
+      if (audio) setInternalCurrentTime(audio.currentTime);
+      animFrameRef.current = requestAnimationFrame(tick);
+    };
+    animFrameRef.current = requestAnimationFrame(tick);
+  }, []);
+
+  const stopTimeTracking = useCallback(() => {
+    if (animFrameRef.current) {
+      cancelAnimationFrame(animFrameRef.current);
+      animFrameRef.current = null;
+    }
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => () => stopTimeTracking(), [stopTimeTracking]);
+
+  // Wire up internal audio element events
+  useEffect(() => {
+    if (!selfManaged) return;
+    const audio = internalAudioRef.current;
+    if (!audio) return;
+    const onLoaded = () => setInternalDuration(audio.duration || 0);
+    const onEnded = () => { setInternalPlaying(false); stopTimeTracking(); };
+    audio.addEventListener('loadedmetadata', onLoaded);
+    audio.addEventListener('ended', onEnded);
+    return () => {
+      audio.removeEventListener('loadedmetadata', onLoaded);
+      audio.removeEventListener('ended', onEnded);
+    };
+  }, [selfManaged, stopTimeTracking]);
+
   /* Compute which transcript card matches current playback time */
   const computeActiveIdx = (timeSec) => {
     for (let i = DEMO_TRANSCRIPT.length - 1; i >= 0; i--) {
@@ -79,75 +149,126 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
     return 0;
   };
 
-  const parseTimeStr = (timeStr) => {
-    if (!timeStr) return 0;
-    const parts = timeStr.split(':').map(Number);
-    return (parts[0] || 0) * 60 + (parts[1] || 0);
-  };
-
-  const SPEED_OPTIONS = [1, 1.25, 1.5, 2];
-  const isDemo = !audioUrl;
-  const activeRate = isDemo ? demoRate : playbackRate;
-  const activePlaying = isDemo ? demoPlaying : timelinePlaying;
-
-  /* Expose seekTo for parent to call via ref */
-  useImperativeHandle(ref, () => ({
-    seekTo: (timeSec) => {
-      handleSeek(timeSec);
-      setDemoPlaying(true);
-      // Scroll to matching transcript card
-      const idx = computeActiveIdx(timeSec);
-      setActiveDemoIdx(idx);
-      setTimeout(() => {
-        const cards = scrollRef.current?.children;
-        if (cards?.[idx]) {
-          cards[idx].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-        }
-      }, 50);
-    },
-  }));
-
-  /* Handle seek — updates local demo state or calls parent onSeek */
+  /* ── Unified handlers ── */
   const handleSeek = (timeSeconds) => {
-    const clamped = Math.max(0, Math.min(timeSeconds, durationSeconds || 156));
-    if (onSeek) onSeek(clamped);
+    const dur = activeDuration || 156;
+    const clamped = Math.max(0, Math.min(timeSeconds, dur));
+
+    if (selfManaged) {
+      const audio = internalAudioRef.current;
+      if (audio) audio.currentTime = clamped;
+      setInternalCurrentTime(clamped);
+    } else if (parentManaged && externalOnSeek) {
+      externalOnSeek(clamped);
+    }
+
+    // Always update demo state for UI
     setDemoSeekTime(clamped);
     setActiveDemoIdx(computeActiveIdx(clamped));
   };
 
   const handleTogglePlay = () => {
-    if (onTogglePlay) onTogglePlay();
-    else setDemoPlaying((prev) => !prev);
+    if (selfManaged) {
+      const audio = internalAudioRef.current;
+      if (!audio) return;
+      if (internalPlaying) {
+        audio.pause();
+        stopTimeTracking();
+        setInternalPlaying(false);
+      } else {
+        audio.play().then(() => {
+          setInternalPlaying(true);
+          startTimeTracking();
+        }).catch(() => {});
+      }
+    } else if (parentManaged && externalOnTogglePlay) {
+      externalOnTogglePlay();
+    } else {
+      // Demo mode
+      setDemoPlaying((prev) => !prev);
+    }
   };
 
   const handleSeekBack = () => {
-    if (onSeekBack) onSeekBack();
-    else handleSeek(Math.max(0, (demoSeekTime ?? 0) - 10));
+    if (parentManaged && externalOnSeekBack) externalOnSeekBack();
+    else {
+      const cur = selfManaged ? internalCurrentTime : (demoSeekTime ?? 0);
+      handleSeek(Math.max(0, cur - 10));
+    }
   };
 
   const handleSeekForward = () => {
-    if (onSeekForward) onSeekForward();
+    if (parentManaged && externalOnSeekForward) externalOnSeekForward();
     else {
-      const demoDur = durationSeconds || 156;
-      handleSeek(Math.min(demoDur, (demoSeekTime ?? 0) + 10));
+      const cur = selfManaged ? internalCurrentTime : (demoSeekTime ?? 0);
+      const dur = activeDuration || 156;
+      handleSeek(Math.min(dur, cur + 10));
     }
   };
 
   const handleSetRate = (rate) => {
-    if (onSetPlaybackRate) onSetPlaybackRate(rate);
+    if (selfManaged) {
+      const audio = internalAudioRef.current;
+      if (audio) audio.playbackRate = rate;
+      setInternalRate(rate);
+    } else if (parentManaged && externalOnSetPlaybackRate) {
+      externalOnSetPlaybackRate(rate);
+    }
     setDemoRate(rate);
     setShowSpeedMenu(false);
   };
 
+  /* Expose seekTo for parent to call via ref (e.g. from Signals "Show in transcript") */
+  useImperativeHandle(ref, () => ({
+    seekTo: (timeSec) => {
+      handleSeek(timeSec);
+      if (selfManaged) {
+        const audio = internalAudioRef.current;
+        if (audio) {
+          audio.play().then(() => {
+            setInternalPlaying(true);
+            startTimeTracking();
+          }).catch(() => {});
+        }
+      } else {
+        setDemoPlaying(true);
+      }
+      const idx = computeActiveIdx(timeSec);
+      setActiveDemoIdx(idx);
+      setTimeout(() => {
+        const cards = scrollRef.current?.children;
+        if (cards?.[idx]) {
+          cards[idx].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+      }, 50);
+    },
+  }));
+
   /* Handle transcript card play/pause */
   const handleDemoTurnPlayPause = (idx) => {
-    if (activeDemoIdx === idx && demoPlaying) {
+    if (activeDemoIdx === idx && activePlaying) {
+      if (selfManaged) {
+        const audio = internalAudioRef.current;
+        if (audio) audio.pause();
+        stopTimeTracking();
+        setInternalPlaying(false);
+      }
       setDemoPlaying(false);
     } else {
       const turnTime = parseTimeStr(DEMO_TRANSCRIPT[idx]?.time);
       setActiveDemoIdx(idx);
-      setDemoPlaying(true);
       handleSeek(turnTime);
+      if (selfManaged) {
+        const audio = internalAudioRef.current;
+        if (audio) {
+          audio.currentTime = turnTime;
+          audio.play().then(() => {
+            setInternalPlaying(true);
+            startTimeTracking();
+          }).catch(() => {});
+        }
+      }
+      setDemoPlaying(true);
     }
   };
 
@@ -169,7 +290,7 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
         text: m.text || '',
         timeRange: formatTimeRange(m.start ?? m.start_ms, m.end ?? m.end_ms),
         isHighlighted: highlightedTurns.has(i),
-        highlightColor: timelinePlaying && activeTurnIndex === i
+        highlightColor: activePlaying && activeTurnIndex === i
           ? (m.actor === 'agent' ? 'var(--rail-outcome)' : 'var(--rail-discovery)')
           : undefined,
         observations: (turnObservations[i] || []).map((obs) => ({
@@ -185,40 +306,75 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
       }))
     : null;
 
-  const demoDuration = durationSeconds || 156;
-  const effectiveTime = demoSeekTime != null ? demoSeekTime : (durationSeconds > 0 ? currentTimeSeconds : 0);
-  const progress = demoDuration > 0 ? (effectiveTime / demoDuration) * 100 : 0;
-  const demoCurrentTime = Math.round(effectiveTime);
+  // Computed display values
+  const effectiveTime = isDemo ? (demoSeekTime ?? 0) : activeCurrentTime;
+  const effectiveDuration = activeDuration || 156;
+  const progress = effectiveDuration > 0 ? (effectiveTime / effectiveDuration) * 100 : 0;
+  const displayTime = Math.round(effectiveTime);
 
   return (
     <div style={{
       display: 'flex',
-      padding: 24,
       flexDirection: 'column',
-      alignItems: 'flex-start',
-      gap: 24,
-      borderRadius: 8,
-      border: '1px solid var(--Grey-absent, #D9D9D9)',
-      background: 'var(--Grey-White, #FFF)',
+      gap: 16,
     }}>
+      {/* ── "Recording" title with icon — outside the card, matches Signals style ── */}
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 16,
+        width: '100%',
+      }}>
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 34,
+          height: 34,
+          borderRadius: 9999,
+          background: 'var(--surface-hover, #F3F7F7)',
+          flexShrink: 0,
+        }}>
+          <FileSignal size={20} color="#2E3236" strokeWidth={1.5} />
+        </div>
+        <span style={{
+          fontSize: 15,
+          fontWeight: 500,
+          color: 'var(--Grey-Strong, #2E3236)',
+        }}>
+          Recording
+        </span>
+      </div>
 
-      {/* ════════════════════════════════════════
-          RECORDING SECTION
-          ════════════════════════════════════════ */}
-      <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* ── Card with border ── */}
+      <div style={{
+        display: 'flex',
+        padding: 24,
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: 24,
+        borderRadius: 8,
+        border: '1px solid var(--Grey-absent, #D9D9D9)',
+        background: 'var(--Grey-White, #FFF)',
+      }}>
 
-        {/* ── Row 1: Title + Controls — Figma: Frame 35, horizontal, space-between, center ── */}
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
+        {/* ════════════════════════════════════════
+            RECORDING CONTROLS
+            ════════════════════════════════════════ */}
+        <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>
+
+          {/* ── "Agent / Customer" + Controls — horizontal, space-between, center ── */}
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
           <span style={{
-            fontSize: 15, fontWeight: 600,
+            fontSize: 14, fontWeight: 500,
             color: 'var(--Grey-Strong, #2E3236)',
             lineHeight: 1.2,
           }}>
-            Recording
+            {agentName} / {customerName}
           </span>
 
-          {/* Frame 34: controls — horizontal, gap: 12, center */}
-          <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, justifyContent: 'center' }}>
+          {/* Controls — horizontal, gap: 12, center */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
             {/* Skip back 10s */}
             <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--Grey-Muted, #808183)', lineHeight: 1.2 }}>10</span>
             <button onClick={handleSeekBack} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center' }}>
@@ -310,19 +466,19 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
         </div>
 
         {/* ── Row 2: Progress bar ── */}
-        {audioUrl ? (
+        {audioUrl && parentManaged ? (
           <>
             <Timeline
               segments={timelineSegments}
               durationSeconds={durationSeconds}
-              currentTimeSeconds={currentTimeSeconds}
-              onSeek={onSeek}
+              currentTimeSeconds={externalCurrentTime}
+              onSeek={externalOnSeek}
               showControls={false}
               hasRecording
-              timelinePlaying={timelinePlaying}
-              playbackRate={playbackRate}
+              timelinePlaying={externalPlaying}
+              playbackRate={externalRate}
             />
-            <audio ref={audioRef} preload="none" style={{ display: 'none' }}>
+            <audio ref={externalAudioRef} preload="none" style={{ display: 'none' }}>
               <source src={audioUrl} type="audio/mpeg" />
             </audio>
           </>
@@ -337,15 +493,14 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
                 lineHeight: 1.2,
                 minWidth: 60,
               }}>
-                {fmtTime(demoCurrentTime)}
+                {fmtTime(displayTime)}
               </span>
               <div
                 onClick={(e) => {
                   const rect = e.currentTarget.getBoundingClientRect();
                   const clickX = e.clientX - rect.left;
                   const pct = Math.max(0, Math.min(1, clickX / rect.width));
-                  const seekTime = pct * demoDuration;
-                  handleSeek(seekTime);
+                  handleSeek(pct * effectiveDuration);
                 }}
                 style={{
                   flex: 1, height: 16,
@@ -394,7 +549,7 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
 
             {/* ── Row 3: Speaker timeline bars + playback indicator ── */}
             <div style={{ position: 'relative', paddingBottom: 30, cursor: 'pointer' }}>
-              {['David', 'Customer'].map((speaker, rowIdx) => (
+              {['Agent', 'Customer'].map((speaker, rowIdx) => (
                 <div key={speaker} style={{
                   display: 'flex', alignItems: 'center', gap: 8,
                   height: 20,
@@ -413,7 +568,7 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
                     onClick={(e) => {
                       const rect = e.currentTarget.getBoundingClientRect();
                       const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-                      handleSeek(pct * demoDuration);
+                      handleSeek(pct * effectiveDuration);
                     }}
                     style={{
                       flex: 1, height: 6,
@@ -435,7 +590,7 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
                         left: `${seg.start * 100}%`,
                         width: `${(seg.end - seg.start) * 100}%`,
                         top: 0, bottom: 0, borderRadius: 3,
-                        background: speaker === 'David'
+                        background: speaker === 'Agent'
                           ? 'var(--Grey-Strong, #2E3236)'
                           : 'var(--Grey-Muted, #808183)',
                       }} />
@@ -444,7 +599,7 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
                 </div>
               ))}
 
-              {/* ── Playback position: dotted line + avatar + time tooltip ── */}
+              {/* ── Playback position: dotted line + time tooltip ── */}
               <div style={{
                 position: 'absolute',
                 left: 68,   /* 60 label + 8 gap */
@@ -478,10 +633,17 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
                   borderRadius: 4,
                   whiteSpace: 'nowrap',
                 }}>
-                  {fmtTime(demoCurrentTime)}
+                  {fmtTime(displayTime)}
                 </div>
               </div>
             </div>
+
+            {/* Hidden audio element for self-managed mode */}
+            {selfManaged && (
+              <audio ref={internalAudioRef} preload="auto" style={{ display: 'none' }}>
+                <source src={audioUrl} type="audio/mpeg" />
+              </audio>
+            )}
           </div>
         )}
       </div>
@@ -508,101 +670,103 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
           </span>
         </div>
 
-        {/* ── Cards ── */}
-        {turns ? (
-          <div id="transcript-container" ref={scrollRef} style={{ maxHeight: 600, overflowY: 'auto' }}>
-            <TranscriptCard
-              turns={turns}
-              audioUrl={audioUrl}
-              activeTurnIndex={activeTurnIndex}
-              autoScrollActiveTurn={timelinePlaying}
-              isExternalPlaying={timelinePlaying}
-              onTurnPlayPause={onTurnPlayPause}
-            />
-          </div>
-        ) : (
-          <div ref={scrollRef} style={{
-            display: 'flex', flexDirection: 'column',
-            maxHeight: 600, overflowY: 'auto',
-          }}>
-            {DEMO_TRANSCRIPT.map((card, i) => {
-              const isActive = i === activeDemoIdx && demoPlaying;
-              const isCustomer = card.type === 'customer';
-
-              return (
-                <div key={i} style={{
-                  display: 'flex',
-                  padding: 16,
-                  flexDirection: 'column',
-                  alignItems: 'flex-start',
-                  gap: 16,
-                  alignSelf: 'stretch',
-                  borderTop: i > 0 ? '1px solid var(--Grey-absent, #D9D9D9)' : 'none',
-                  background: isActive ? 'var(--surface-hover, #F3F7F7)' : 'var(--Grey-White, #FFF)',
+        {/* ── Cards — V4 style for both real and demo data ── */}
+        <div id="transcript-container" ref={scrollRef} style={{
+          display: 'flex', flexDirection: 'column',
+          maxHeight: 600, overflowY: 'auto',
+        }}>
+          {(turns || DEMO_TRANSCRIPT.map((card) => ({
+            actor: card.speaker,
+            actorType: card.type,
+            text: card.text,
+            timeRange: card.time,
+          }))).map((card, i) => {
+            const isRealData = !!turns;
+            const isActive = isRealData
+              ? (activePlaying && activeTurnIndex === i)
+              : (i === activeDemoIdx && activePlaying);
+            const isCustomer = (card.actorType || card.type) === 'customer';
+
+            return (
+              <div key={i} style={{
+                display: 'flex',
+                padding: 16,
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                gap: 16,
+                alignSelf: 'stretch',
+                borderTop: i > 0 ? '1px solid var(--Grey-absent, #D9D9D9)' : 'none',
+                background: isActive ? 'var(--surface-hover, #F3F7F7)' : 'var(--Grey-White, #FFF)',
+              }}>
+                {/* Speaker name + time */}
+                <div style={{
+                  display: 'flex', alignItems: 'center',
+                  justifyContent: 'space-between', width: '100%',
+                  gap: 8,
                 }}>
-                  {/* Frame 40: Speaker name + time — horizontal, space-between, center */}
-                  <div style={{
-                    display: 'flex', alignItems: 'center',
-                    justifyContent: 'space-between', width: '100%',
-                    gap: 8,
+                  <span style={{
+                    fontSize: 14, fontWeight: 600,
+                    lineHeight: 1.2,
+                    color: isCustomer ? 'var(--Grey-Strong, #2E3236)' : 'var(--Grey-Muted, #808183)',
                   }}>
+                    {card.actor}
+                  </span>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    {isActive && (
+                      <>
+                        <AudioLines size={12} color="#2E3236" />
+                        <AudioLines size={12} color="#2E3236" />
+                      </>
+                    )}
                     <span style={{
-                      fontSize: 14, fontWeight: 600,
+                      fontSize: 13, fontWeight: 400,
                       lineHeight: 1.2,
-                      color: isCustomer ? 'var(--Grey-Strong, #2E3236)' : 'var(--Grey-Muted, #808183)',
+                      color: 'var(--Grey-Muted, #808183)',
                     }}>
-                      {card.speaker}
+                      {card.timeRange}
                     </span>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                      {isActive && (
-                        <>
-                          <AudioLines size={12} color="#2E3236" />
-                          <AudioLines size={12} color="#2E3236" />
-                        </>
-                      )}
-                      <span style={{
-                        fontSize: 13, fontWeight: 400,
-                        lineHeight: 1.2,
-                        color: 'var(--Grey-Muted, #808183)',
-                      }}>
-                        {card.time}
-                      </span>
-                    </div>
                   </div>
+                </div>
 
-                  {/* Frame 39: Play/Pause icon + text — horizontal, gap: 8 */}
-                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, width: '100%' }}>
-                    <button
-                      onClick={() => handleDemoTurnPlayPause(i)}
-                      style={{
-                        background: 'none', border: 'none',
-                        cursor: 'pointer', padding: 0,
-                        flexShrink: 0,
-                        display: 'flex',
-                      }}
-                    >
-                      {isActive ? (
-                        <PauseCircle size={17} color="#2E3236" strokeWidth={1.5} />
-                      ) : (
-                        <PlayCircle size={17} color="#808183" strokeWidth={1} />
-                      )}
-                    </button>
-                    <p style={{
-                      fontSize: 13, fontWeight: 400,
-                      color: 'var(--Grey-Strong, #2E3236)',
-                      lineHeight: 1.2,
-                      margin: 0,
-                      flex: 1,
-                    }}>
-                      {card.text}
-                    </p>
-                  </div>
+                {/* Play/Pause icon + text */}
+                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, width: '100%' }}>
+                  <button
+                    onClick={() => {
+                      if (isRealData && onTurnPlayPause) {
+                        onTurnPlayPause(card, i);
+                      } else {
+                        handleDemoTurnPlayPause(i);
+                      }
+                    }}
+                    style={{
+                      background: 'none', border: 'none',
+                      cursor: 'pointer', padding: 0,
+                      flexShrink: 0,
+                      display: 'flex',
+                    }}
+                  >
+                    {isActive ? (
+                      <PauseCircle size={17} color="#2E3236" strokeWidth={1.5} />
+                    ) : (
+                      <PlayCircle size={17} color="#808183" strokeWidth={1} />
+                    )}
+                  </button>
+                  <p style={{
+                    fontSize: 13, fontWeight: 400,
+                    color: 'var(--Grey-Strong, #2E3236)',
+                    lineHeight: 1.2,
+                    margin: 0,
+                    flex: 1,
+                  }}>
+                    {card.text}
+                  </p>
                 </div>
-              );
-            })}
-          </div>
-        )}
+              </div>
+            );
+          })}
+        </div>
       </div>
+      </div>{/* end card */}
     </div>
   );
 });