chordia-ui 3.4.9 → 3.5.1

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.
Files changed (48) hide show
  1. package/README.md +3 -3
  2. package/dist/UpdatedInteractionRecording.cjs.js +1 -1
  3. package/dist/UpdatedInteractionRecording.cjs.js.map +1 -1
  4. package/dist/UpdatedInteractionRecording.es.js +1 -1
  5. package/dist/UpdatedInteractionRecording.es.js.map +1 -1
  6. package/dist/components/UpdatedInteractionDetails.cjs.js +4 -3
  7. package/dist/components/UpdatedInteractionDetails.cjs.js.map +1 -1
  8. package/dist/components/UpdatedInteractionDetails.es.js +1677 -1005
  9. package/dist/components/UpdatedInteractionDetails.es.js.map +1 -1
  10. package/dist/components/data.cjs.js +1 -1
  11. package/dist/components/data.cjs.js.map +1 -1
  12. package/dist/components/data.es.js +177 -170
  13. package/dist/components/data.es.js.map +1 -1
  14. package/dist/components/layout.cjs.js +1 -1
  15. package/dist/components/layout.cjs.js.map +1 -1
  16. package/dist/components/layout.es.js +14 -13
  17. package/dist/components/layout.es.js.map +1 -1
  18. package/dist/components/login.cjs.js +1 -1
  19. package/dist/components/login.cjs.js.map +1 -1
  20. package/dist/components/login.es.js +1689 -6
  21. package/dist/components/login.es.js.map +1 -1
  22. package/dist/index.cjs.js +1 -1
  23. package/dist/index.es.js +101 -100
  24. package/dist/index.es.js.map +1 -1
  25. package/dist/pages/interactionDetails.cjs.js +1 -1
  26. package/dist/pages/interactionDetails.cjs.js.map +1 -1
  27. package/dist/pages/interactionDetails.es.js +16 -15
  28. package/dist/pages/interactionDetails.es.js.map +1 -1
  29. package/package.json +1 -1
  30. package/src/components/UpdatedInteractionDetails/UpdatedCompassScore.jsx +33 -37
  31. package/src/components/UpdatedInteractionDetails/UpdatedInteractionContext.jsx +0 -1
  32. package/src/components/UpdatedInteractionDetails/UpdatedInteractionDetails.jsx +200 -102
  33. package/src/components/UpdatedInteractionDetails/UpdatedInteractionRecording.jsx +2 -2
  34. package/src/components/UpdatedInteractionDetails/UpdatedThreads.jsx +947 -379
  35. package/src/components/data/DataTable.jsx +9 -3
  36. package/src/components/layout/SplitPane.jsx +1 -0
  37. package/dist/debugger-wc.cjs.js +0 -133
  38. package/dist/debugger-wc.cjs.js.map +0 -1
  39. package/dist/debugger-wc.es.js +0 -202
  40. package/dist/debugger-wc.es.js.map +0 -1
  41. package/dist/index.cjs2.js +0 -3
  42. package/dist/index.cjs2.js.map +0 -1
  43. package/dist/index.cjs3.js +0 -50
  44. package/dist/index.cjs3.js.map +0 -1
  45. package/dist/index.es2.js +0 -3103
  46. package/dist/index.es2.js.map +0 -1
  47. package/dist/index.es3.js +0 -1951
  48. package/dist/index.es3.js.map +0 -1
package/README.md CHANGED
@@ -71,7 +71,7 @@ import { OverlayPanel } from 'chordia-ui/components/models';
71
71
 
72
72
  ### 4. Optional toast integration (DataTable)
73
73
 
74
- Some components (like `DataTable`) emit **semantic events** instead of importing a toast library directly. For example, `DataTable` exposes an `onMaxColumnsError` callback that fires when a user tries to select more than the allowed number of columns. How you surface that error is up to the host app:
74
+ Some components (like `DataTable`) emit **semantic events** instead of importing a toast library directly. For example, `DataTable` exposes an `onMaxColumnsError` callback that fires when a user tries to select more than the allowed number of columns, or makes an invalid drag-and-drop move involving the pinned `action` column. How you surface that error is up to the host app:
75
75
 
76
76
  ```bash
77
77
  npm install react-hot-toast
@@ -102,7 +102,7 @@ import { DataTable } from 'chordia-ui/components/data';
102
102
  />;
103
103
  ```
104
104
 
105
- If you omit `onMaxColumnsError`, the table still works; users just won’t see a toast for the max‑columns case.
105
+ If you omit `onMaxColumnsError`, the table still works; users just will not see feedback for these blocked column actions.
106
106
 
107
107
  ### 5. DataTable theming note
108
108
 
@@ -179,7 +179,7 @@ set `error` to that message in host state to show it in the UI.
179
179
  | **Media** | TranscriptCard, Timeline, ConversationTurn, InteractionSummaryCard |
180
180
  | **Chat** | ChatInterface, ChatMessage, ChatHistoryPanel, MessageThread |
181
181
  | **Navigation** | Sidebar, NavigationBar |
182
- | **Layout** | FirstCallScreen, OnboardingChecklist, DemoProjectBanner, IntegrationCard |
182
+ | **Layout** | FirstCallScreen, OnboardingChecklist, DemoProjectBanner, IntegrationCard, SplitPane |
183
183
  | **Notifications** | NotificationPanel, NotificationItem |
184
184
 
185
185
  ## Utilities
@@ -1,2 +1,2 @@
1
- "use strict";const t=require("react/jsx-runtime"),a=require("react"),h=require("lucide-react");function ne(m){const d=Math.floor(m/60),x=Math.round(m%60);return`${d}:${x.toString().padStart(2,"0")}`}const De={Agent:[{start:0,end:.08},{start:.18,end:.22},{start:.38,end:.42},{start:.55,end:.58},{start:.68,end:.72},{start:.82,end:.88},{start:.94,end:1}],Customer:[{start:.1,end:.16},{start:.24,end:.36},{start:.44,end:.52},{start:.6,end:.66},{start:.74,end:.8}]},W=[{speaker:"Agent",type:"agent",time:"00:04",text:"Thanks for calling Miles Point S Pensau. This is Steve. How can I help you?"},{speaker:"Customer",type:"customer",time:"00:12",text:"Hi, Steve. This is Sandra with Botai Catering."},{speaker:"Agent",type:"agent",time:"00:18",text:"Hello. How are you?"},{speaker:"Customer",type:"customer",time:"00:20",text:"I'm doing really good. Hey. I brought my vans in last week, and I call it a beeping van, the one that beeps when you back up. Makes the crunchy noise. So I just took it on Saturday after, I think I had the, the Miles. I picked it up on Saturday morning, and I went to an event. So So I don't know if it's the tire or something, but makes it a little crunchy noise. Sometimes when I do the brake, but only if I turn the wheel too."},{speaker:"Agent",type:"agent",time:"00:21",text:"Oh, interesting. Okay. Can you swing by with it one of these days?"}],Ee=[1,1.25,1.5,2];function oe(m){if(!m)return 0;const d=m.split(":").map(Number);return(d[0]||0)*60+(d[1]||0)}const Ge=a.forwardRef(function({audioUrl:d,timelineSegments:x=[],durationSeconds:M=0,currentTimeSeconds:re,timelinePlaying:q,playbackRate:ie,onSeek:X,onTogglePlay:T,onSeekBack:Y,onSeekForward:K,onSetPlaybackRate:V,audioRef:Z,agentName:z="Agent",customerName:H="Customer",transcript:u,highlightedTurns:se=new Set,activeTurnIndex:F,activeDemoIndex:ae=1,turnObservations:le={},setExpandedSignals:A,onTurnPlayPause:J},ce){var ee;const R=a.useRef(null),f=a.useRef(null),k=a.useRef(null),[N,v]=a.useState(!1),[B,Q]=a.useState(0),[de,ue]=a.useState(0),[he,fe]=a.useState(1),[C,ge]=a.useState(null),[pe,ye]=a.useState(1),[me,w]=a.useState(!1),[xe,O]=a.useState(!1),[I,D]=a.useState(ae),[ve,be]=a.useState(null),l=!!Z,S=!d,c=d&&!l,y=S?me:l?q??!1:N,je=S?C??0:l?re??0:B,P=S?pe:l?ie??1:he,$=S?M||156:l?M:de||M||0,L=a.useCallback(()=>{const e=()=>{const n=f.current;n&&Q(n.currentTime),k.current=requestAnimationFrame(e)};k.current=requestAnimationFrame(e)},[]),b=a.useCallback(()=>{k.current&&(cancelAnimationFrame(k.current),k.current=null)},[]);a.useEffect(()=>()=>b(),[b]),a.useEffect(()=>{if(!c)return;const e=f.current;if(!e)return;const n=()=>ue(e.duration||0),o=()=>{v(!1),b()};return e.addEventListener("loadedmetadata",n),e.addEventListener("ended",o),()=>{e.removeEventListener("loadedmetadata",n),e.removeEventListener("ended",o)}},[c,b]);const _=e=>{for(let n=W.length-1;n>=0;n--){const o=oe(W[n].time);if(e>=o)return n}return 0},j=e=>{const o=Math.max(0,Math.min(e,$||156));if(c){const r=f.current;r&&(r.currentTime=o),Q(o)}else l&&X&&X(o);ge(o),D(_(o))},ke=()=>{if(c){const e=f.current;if(!e)return;N?(e.pause(),b(),v(!1)):e.play().then(()=>{v(!0),L()}).catch(()=>{})}else l&&T?T():w(e=>!e)},Se=()=>{l&&Y?Y():j(Math.max(0,(c?B:C??0)-10))},Te=()=>{l&&K?K():j(Math.min($||156,(c?B:C??0)+10))},Fe=e=>{if(c){const n=f.current;n&&(n.playbackRate=e),fe(e)}else l&&V&&V(e);ye(e),O(!1)};a.useImperativeHandle(ce,()=>({seekTo:e=>{if(j(e),l)!q&&T&&T();else if(c){const o=f.current;o&&o.play().then(()=>{v(!0),L()}).catch(()=>{})}else w(!0);const n=_(e);D(n),setTimeout(()=>{var i;const o=R.current,r=(i=o==null?void 0:o.children)==null?void 0:i[n];if(o&&r){const s=o.getBoundingClientRect().top,te=r.getBoundingClientRect().top-s+o.scrollTop;o.scrollTo({top:te-20,behavior:"smooth"})}},50)},scrollToTranscript:e=>{var o;let n;if((o=u==null?void 0:u.messages)!=null&&o.length){const r=u.messages;n=0;for(let i=r.length-1;i>=0;i--){const s=(r[i].start??r[i].start_ms??0)/1e3;if(e>=s){n=i;break}}}else n=_(e);D(n),be(n),setTimeout(()=>{var s;const r=R.current,i=(s=r==null?void 0:r.children)==null?void 0:s[n];if(r&&i){const p=r.getBoundingClientRect().top,Ie=i.getBoundingClientRect().top-p+r.scrollTop;r.scrollTo({top:Ie-20,behavior:"smooth"})}},50)}}));const Re=e=>{var n;if(I===e&&y){if(c){const o=f.current;o&&o.pause(),b(),v(!1)}w(!1)}else{const o=oe((n=W[e])==null?void 0:n.time);if(D(e),j(o),c){const r=f.current;r&&(r.currentTime=o,r.play().then(()=>{v(!0),L()}).catch(()=>{}))}w(!0)}},Ce=(e,n)=>{if(e==null)return;const o=r=>{const i=Math.floor(r/6e4),s=Math.floor(r%6e4/1e3);return`${i.toString().padStart(2,"0")}:${s.toString().padStart(2,"0")}`};return`${o(e)}–${n!=null?o(n):o(e)}`},E=(ee=u==null?void 0:u.messages)!=null&&ee.length?u.messages.map((e,n)=>{var o,r;return{actor:e.actor==="agent"?((o=u.actor_map)==null?void 0:o.agent)||"Agent":((r=u.actor_map)==null?void 0:r.customer)||"Customer",actorType:e.actor==="agent"?"agent":"customer",text:e.text||"",timeRange:Ce(e.start??e.start_ms,e.end??e.end_ms),isHighlighted:se.has(n),highlightColor:y&&F===n?e.actor==="agent"?"var(--rail-outcome)":"var(--rail-discovery)":void 0,observations:(le[n]||[]).map(i=>({...i,onClick:()=>{A==null||A(s=>new Set([...s,i.signalKey])),setTimeout(()=>{const s=document.getElementById(`signal-${i.signalKey}`);s&&s.scrollIntoView({behavior:"smooth",block:"nearest"})},100)}}))}}):null;a.useEffect(()=>{var r;if(!y)return;const e=E?F:I;if(e==null||e<0)return;const n=R.current;if(!n)return;const o=(r=n.children)==null?void 0:r[e];if(o){const i=n.getBoundingClientRect().top,p=o.getBoundingClientRect().top-i+n.scrollTop;n.scrollTo({top:p-20,behavior:"smooth"})}},[F,I,y,E]);const U=S?C??0:je,g=$||156,G=g>0?U/g*100:0,we=Math.round(U);return t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:16},children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16,width:"100%"},children:[t.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:34,height:34,borderRadius:9999,background:"var(--surface-hover, #F3F7F7)",flexShrink:0},children:t.jsx(h.FileSignal,{size:20,color:"#2E3236",strokeWidth:1.5})}),t.jsx("span",{style:{fontSize:15,fontWeight:500,color:"var(--Grey-Strong, #2E3236)"},children:"Recording"})]}),t.jsxs("div",{style:{display:"flex",padding:24,flexDirection:"column",alignItems:"flex-start",gap:24,borderRadius:8,border:"1px solid var(--Grey-absent, #D9D9D9)",background:"var(--Grey-White, #FFF)"},children:[t.jsxs("div",{style:{width:"100%",display:"flex",flexDirection:"column",gap:16},children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:24},children:[t.jsxs("span",{style:{fontSize:14,fontWeight:500,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2},children:[z," / ",H]}),t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12},children:[t.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1.2},children:"10"}),t.jsx("button",{onClick:Se,style:{background:"none",border:"none",cursor:"pointer",padding:0,display:"flex",alignItems:"center"},children:t.jsx(h.RotateCcw,{size:20,color:"#808183",strokeWidth:1.5})}),t.jsx("button",{onClick:ke,style:{background:"var(--Grey-Strong, #2E3236)",border:"none",cursor:"pointer",width:32,height:32,borderRadius:48,padding:0,display:"flex",alignItems:"center",justifyContent:"center"},children:y?t.jsx(h.Pause,{size:14,color:"#FFF",fill:"#FFF"}):t.jsx(h.Play,{size:14,color:"#FFF",fill:"#FFF",strokeWidth:1.5,style:{marginLeft:2}})}),t.jsx("button",{onClick:Te,style:{background:"none",border:"none",cursor:"pointer",padding:0,display:"flex",alignItems:"center"},children:t.jsx(h.RotateCw,{size:20,color:"#808183",strokeWidth:1.5})}),t.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1.2},children:"10"})]}),t.jsxs("div",{style:{position:"relative"},children:[t.jsxs("button",{onClick:()=>O(e=>!e),style:{background:"var(--Grey-White, #FFF)",border:"1px solid var(--Grey-absent, #D9D9D9)",borderRadius:20,padding:"0 5px 0 10px",height:24,minWidth:56,cursor:"pointer",fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",lineHeight:1.2,display:"flex",alignItems:"center",justifyContent:"center",gap:4},children:[P,"x",t.jsx(h.ChevronDown,{size:12,color:"#808183"})]}),xe&&t.jsx("div",{style:{position:"absolute",top:"100%",right:0,marginTop:4,background:"var(--Grey-White, #FFF)",border:"1px solid var(--Grey-absent, #D9D9D9)",borderRadius:8,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:10,overflow:"hidden",minWidth:80},children:Ee.map(e=>t.jsxs("button",{onClick:()=>Fe(e),style:{display:"block",width:"100%",padding:"8px 12px",border:"none",background:P===e?"var(--surface-hover, #F3F7F7)":"var(--Grey-White, #FFF)",cursor:"pointer",fontSize:13,fontWeight:P===e?600:400,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",textAlign:"left"},children:[e,"x"]},e))})]})]}),t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[t.jsx("span",{style:{fontSize:13,fontWeight:500,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",lineHeight:1.2,minWidth:60},children:ne(g)}),t.jsxs("div",{onClick:e=>{const n=e.currentTarget.getBoundingClientRect(),o=e.clientX-n.left,r=Math.max(0,Math.min(1,o/n.width));j(r*g)},style:{flex:1,height:16,position:"relative",display:"flex",alignItems:"center",cursor:"pointer"},children:[t.jsx("div",{style:{position:"absolute",left:0,right:0,height:4,borderRadius:2,background:"var(--rail-surface-2, #E3E1D7)",pointerEvents:"none"}}),t.jsx("div",{style:{position:"absolute",left:0,top:"50%",transform:"translateY(-50%)",width:`${G}%`,height:4,borderRadius:2,background:"var(--Green-Primary, #00925F)",pointerEvents:"none"}}),t.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{position:"absolute",left:`${G}%`,top:"50%",transform:"translate(-50%, -50%)",pointerEvents:"none"},children:t.jsx("path",{d:"M7.875 1C11.6572 1 14.75 4.1191 14.75 8C14.75 11.8809 11.6572 15 7.875 15C4.09284 15 1 11.8809 1 8C1 4.1191 4.09284 1 7.875 1Z",fill:"#FFF",stroke:"#00925F",strokeWidth:"2"})})]})]}),t.jsxs("div",{style:{position:"relative",paddingBottom:30,cursor:"pointer"},children:[[z,H].map((e,n)=>{const o=n===0,r=x!=null&&x.length?x.filter(i=>o?i.actor===z:i.actor===H).map(i=>({start:g>0?i.startTime/g:0,end:g>0?i.endTime/g:0})):De[o?"Agent":"Customer"]||[];return t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,height:20,marginBottom:n===0?4:0},children:[t.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",fontFamily:"var(--font-sans)",lineHeight:1.2,minWidth:60},children:e}),t.jsxs("div",{onClick:i=>{const s=i.currentTarget.getBoundingClientRect(),p=Math.max(0,Math.min(1,(i.clientX-s.left)/s.width));j(p*g)},style:{flex:1,height:6,position:"relative",borderRadius:3,cursor:"pointer"},children:[t.jsx("div",{style:{position:"absolute",left:0,right:0,top:"50%",transform:"translateY(-50%)",height:4,borderRadius:2,background:"var(--rail-surface-2, #E3E1D7)"}}),r.map((i,s)=>t.jsx("div",{style:{position:"absolute",left:`${i.start*100}%`,width:`${(i.end-i.start)*100}%`,top:0,bottom:0,borderRadius:3,background:o?"var(--Grey-Strong, #2E3236)":"var(--Grey-Muted, #808183)"}},s))]})]},e)}),t.jsxs("div",{style:{position:"absolute",left:68,right:0,top:0,bottom:0,pointerEvents:"none"},children:[t.jsx("div",{style:{position:"absolute",left:`${G}%`,top:0,height:44,transform:"translateX(-50%)",borderLeft:"1.5px dashed var(--Grey-Muted, #808183)",opacity:.5}}),t.jsx("div",{style:{position:"absolute",left:`${G}%`,bottom:0,transform:"translateX(-50%)",background:"var(--Grey-Strong, #2E3236)",color:"var(--Grey-White, #FFF)",fontSize:14,fontWeight:600,lineHeight:1.2,padding:"4px 6px",borderRadius:4,whiteSpace:"nowrap"},children:ne(we)})]})]}),c&&t.jsx("audio",{ref:f,preload:"auto",style:{display:"none"},children:t.jsx("source",{src:d,type:"audio/mpeg"})}),l&&d&&t.jsx("audio",{ref:Z,preload:"auto",style:{display:"none"},children:t.jsx("source",{src:d,type:"audio/mpeg"})})]})]}),t.jsxs("div",{style:{width:"100%",display:"flex",flexDirection:"column",gap:16},children:[t.jsx("div",{style:{borderBottom:"1px solid var(--Grey-absent, #D9D9D9)",paddingBottom:16},children:t.jsx("span",{style:{fontSize:14,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2},children:"Transcript"})}),t.jsx("div",{id:"transcript-container",ref:R,style:{display:"flex",flexDirection:"column",maxHeight:600,overflowY:"auto"},children:(E||W.map(e=>({actor:e.speaker,actorType:e.type,text:e.text,timeRange:e.time}))).map((e,n)=>{const o=!!E,r=ve===n,i=o?y&&F===n:n===I&&y,s=i||r,p=(e.actorType||e.type)==="customer";return t.jsxs("div",{style:{display:"flex",padding:16,flexDirection:"column",alignItems:"flex-start",gap:16,alignSelf:"stretch",borderTop:n>0?"1px solid var(--Grey-absent, #D9D9D9)":"none",background:s?"var(--surface-hover, #F3F7F7)":"var(--Grey-White, #FFF)"},children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",gap:8},children:[t.jsx("span",{style:{fontSize:14,fontWeight:600,lineHeight:1.2,color:p?"var(--Grey-Strong, #2E3236)":"var(--Grey-Muted, #808183)"},children:e.actor}),t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[i&&t.jsxs(t.Fragment,{children:[t.jsx(h.AudioLines,{size:12,color:"#2E3236"}),t.jsx(h.AudioLines,{size:12,color:"#2E3236"})]}),t.jsx("span",{style:{fontSize:13,fontWeight:400,lineHeight:1.2,color:"var(--Grey-Muted, #808183)"},children:e.timeRange})]})]}),t.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:8,width:"100%"},children:[t.jsx("button",{onClick:()=>{o&&J?J(e,n):Re(n)},style:{background:"none",border:"none",cursor:"pointer",padding:0,flexShrink:0,display:"flex"},children:i?t.jsx(h.PauseCircle,{size:17,color:"#2E3236",strokeWidth:1.5}):t.jsx(h.PlayCircle,{size:17,color:"#808183",strokeWidth:1})}),t.jsx("p",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2,margin:0,flex:1},children:e.text})]})]},n)})})]})]})]})});exports.UpdatedInteractionRecording=Ge;
1
+ "use strict";const t=require("react/jsx-runtime"),a=require("react"),h=require("lucide-react");function ne(m){const d=Math.floor(m/60),x=Math.round(m%60);return`${d}:${x.toString().padStart(2,"0")}`}const De={Agent:[{start:0,end:.08},{start:.18,end:.22},{start:.38,end:.42},{start:.55,end:.58},{start:.68,end:.72},{start:.82,end:.88},{start:.94,end:1}],Customer:[{start:.1,end:.16},{start:.24,end:.36},{start:.44,end:.52},{start:.6,end:.66},{start:.74,end:.8}]},W=[{speaker:"Agent",type:"agent",time:"00:04",text:"Thanks for calling Miles Point S Pensau. This is Steve. How can I help you?"},{speaker:"Customer",type:"customer",time:"00:12",text:"Hi, Steve. This is Sandra with Botai Catering."},{speaker:"Agent",type:"agent",time:"00:18",text:"Hello. How are you?"},{speaker:"Customer",type:"customer",time:"00:20",text:"I'm doing really good. Hey. I brought my vans in last week, and I call it a beeping van, the one that beeps when you back up. Makes the crunchy noise. So I just took it on Saturday after, I think I had the, the Miles. I picked it up on Saturday morning, and I went to an event. So So I don't know if it's the tire or something, but makes it a little crunchy noise. Sometimes when I do the brake, but only if I turn the wheel too."},{speaker:"Agent",type:"agent",time:"00:21",text:"Oh, interesting. Okay. Can you swing by with it one of these days?"}],Ee=[1,1.25,1.5,2];function oe(m){if(!m)return 0;const d=m.split(":").map(Number);return(d[0]||0)*60+(d[1]||0)}const Ge=a.forwardRef(function({audioUrl:d,timelineSegments:x=[],durationSeconds:M=0,currentTimeSeconds:re,timelinePlaying:q,playbackRate:ie,onSeek:X,onTogglePlay:T,onSeekBack:Y,onSeekForward:K,onSetPlaybackRate:V,audioRef:Z,agentName:z="Agent",customerName:H="Customer",transcript:u,highlightedTurns:se=new Set,activeTurnIndex:F,activeDemoIndex:ae=1,turnObservations:le={},setExpandedSignals:A,onTurnPlayPause:J},ce){var ee;const R=a.useRef(null),f=a.useRef(null),k=a.useRef(null),[N,v]=a.useState(!1),[B,Q]=a.useState(0),[de,ue]=a.useState(0),[he,fe]=a.useState(1),[C,ge]=a.useState(null),[pe,ye]=a.useState(1),[me,w]=a.useState(!1),[xe,O]=a.useState(!1),[I,D]=a.useState(ae),[ve,be]=a.useState(null),l=!!Z,S=!d,c=d&&!l,y=S?me:l?q??!1:N,je=S?C??0:l?re??0:B,P=S?pe:l?ie??1:he,$=S?M||156:l?M:de||M||0,L=a.useCallback(()=>{const e=()=>{const n=f.current;n&&Q(n.currentTime),k.current=requestAnimationFrame(e)};k.current=requestAnimationFrame(e)},[]),b=a.useCallback(()=>{k.current&&(cancelAnimationFrame(k.current),k.current=null)},[]);a.useEffect(()=>()=>b(),[b]),a.useEffect(()=>{if(!c)return;const e=f.current;if(!e)return;const n=()=>ue(e.duration||0),o=()=>{v(!1),b()};return e.addEventListener("loadedmetadata",n),e.addEventListener("ended",o),()=>{e.removeEventListener("loadedmetadata",n),e.removeEventListener("ended",o)}},[c,b]);const _=e=>{for(let n=W.length-1;n>=0;n--){const o=oe(W[n].time);if(e>=o)return n}return 0},j=e=>{const o=Math.max(0,Math.min(e,$||156));if(c){const r=f.current;r&&(r.currentTime=o),Q(o)}else l&&X&&X(o);ge(o),D(_(o))},ke=()=>{if(c){const e=f.current;if(!e)return;N?(e.pause(),b(),v(!1)):e.play().then(()=>{v(!0),L()}).catch(()=>{})}else l&&T?T():w(e=>!e)},Se=()=>{l&&Y?Y():j(Math.max(0,(c?B:C??0)-10))},Te=()=>{l&&K?K():j(Math.min($||156,(c?B:C??0)+10))},Fe=e=>{if(c){const n=f.current;n&&(n.playbackRate=e),fe(e)}else l&&V&&V(e);ye(e),O(!1)};a.useImperativeHandle(ce,()=>({seekTo:e=>{if(j(e),l)!q&&T&&T();else if(c){const o=f.current;o&&o.play().then(()=>{v(!0),L()}).catch(()=>{})}else w(!0);const n=_(e);D(n),setTimeout(()=>{var i;const o=R.current,r=(i=o==null?void 0:o.children)==null?void 0:i[n];if(o&&r){const s=o.getBoundingClientRect().top,te=r.getBoundingClientRect().top-s+o.scrollTop;o.scrollTo({top:te-20,behavior:"smooth"})}},50)},scrollToTranscript:e=>{var o;let n;if((o=u==null?void 0:u.messages)!=null&&o.length){const r=u.messages;n=0;for(let i=r.length-1;i>=0;i--){const s=(r[i].start??r[i].start_ms??0)/1e3;if(e>=s){n=i;break}}}else n=_(e);D(n),be(n),setTimeout(()=>{var s;const r=R.current,i=(s=r==null?void 0:r.children)==null?void 0:s[n];if(r&&i){const p=r.getBoundingClientRect().top,Ie=i.getBoundingClientRect().top-p+r.scrollTop;r.scrollTo({top:Ie-20,behavior:"smooth"})}},50)}}));const Re=e=>{var n;if(I===e&&y){if(c){const o=f.current;o&&o.pause(),b(),v(!1)}w(!1)}else{const o=oe((n=W[e])==null?void 0:n.time);if(D(e),j(o),c){const r=f.current;r&&(r.currentTime=o,r.play().then(()=>{v(!0),L()}).catch(()=>{}))}w(!0)}},Ce=(e,n)=>{if(e==null)return;const o=r=>{const i=Math.floor(r/6e4),s=Math.floor(r%6e4/1e3);return`${i.toString().padStart(2,"0")}:${s.toString().padStart(2,"0")}`};return`${o(e)}–${n!=null?o(n):o(e)}`},E=(ee=u==null?void 0:u.messages)!=null&&ee.length?u.messages.map((e,n)=>{var o,r;return{actor:e.actor==="agent"?((o=u.actor_map)==null?void 0:o.agent)||"Agent":((r=u.actor_map)==null?void 0:r.customer)||"Customer",actorType:e.actor==="agent"?"agent":"customer",text:e.text||"",timeRange:Ce(e.start??e.start_ms,e.end??e.end_ms),isHighlighted:se.has(n),highlightColor:y&&F===n?e.actor==="agent"?"var(--rail-outcome)":"var(--rail-discovery)":void 0,observations:(le[n]||[]).map(i=>({...i,onClick:()=>{A==null||A(s=>new Set([...s,i.signalKey])),setTimeout(()=>{const s=document.getElementById(`signal-${i.signalKey}`);s&&s.scrollIntoView({behavior:"smooth",block:"nearest"})},100)}}))}}):null;a.useEffect(()=>{var r;if(!y)return;const e=E?F:I;if(e==null||e<0)return;const n=R.current;if(!n)return;const o=(r=n.children)==null?void 0:r[e];if(o){const i=n.getBoundingClientRect().top,p=o.getBoundingClientRect().top-i+n.scrollTop;n.scrollTo({top:p-20,behavior:"smooth"})}},[F,I,y,E]);const U=S?C??0:je,g=$||156,G=g>0?U/g*100:0,we=Math.round(U);return t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:16},children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16,width:"100%"},children:[t.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:34,height:34,borderRadius:9999,background:"var(--surface-hover, #F3F7F7)",flexShrink:0},children:t.jsx(h.FilePlay,{size:20,color:"#2E3236",strokeWidth:1.5})}),t.jsx("span",{style:{fontSize:15,fontWeight:500,color:"var(--Grey-Strong, #2E3236)"},children:"Recording"})]}),t.jsxs("div",{style:{display:"flex",padding:24,flexDirection:"column",alignItems:"flex-start",gap:24,borderRadius:8,border:"1px solid var(--Grey-absent, #D9D9D9)",background:"var(--Grey-White, #FFF)"},children:[t.jsxs("div",{style:{width:"100%",display:"flex",flexDirection:"column",gap:16},children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:24},children:[t.jsxs("span",{style:{fontSize:14,fontWeight:500,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2},children:[z," / ",H]}),t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12},children:[t.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1.2},children:"10"}),t.jsx("button",{onClick:Se,style:{background:"none",border:"none",cursor:"pointer",padding:0,display:"flex",alignItems:"center"},children:t.jsx(h.RotateCcw,{size:20,color:"#808183",strokeWidth:1.5})}),t.jsx("button",{onClick:ke,style:{background:"var(--Grey-Strong, #2E3236)",border:"none",cursor:"pointer",width:32,height:32,borderRadius:48,padding:0,display:"flex",alignItems:"center",justifyContent:"center"},children:y?t.jsx(h.Pause,{size:14,color:"#FFF",fill:"#FFF"}):t.jsx(h.Play,{size:14,color:"#FFF",fill:"#FFF",strokeWidth:1.5,style:{marginLeft:2}})}),t.jsx("button",{onClick:Te,style:{background:"none",border:"none",cursor:"pointer",padding:0,display:"flex",alignItems:"center"},children:t.jsx(h.RotateCw,{size:20,color:"#808183",strokeWidth:1.5})}),t.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1.2},children:"10"})]}),t.jsxs("div",{style:{position:"relative"},children:[t.jsxs("button",{onClick:()=>O(e=>!e),style:{background:"var(--Grey-White, #FFF)",border:"1px solid var(--Grey-absent, #D9D9D9)",borderRadius:20,padding:"0 5px 0 10px",height:24,minWidth:56,cursor:"pointer",fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",lineHeight:1.2,display:"flex",alignItems:"center",justifyContent:"center",gap:4},children:[P,"x",t.jsx(h.ChevronDown,{size:12,color:"#808183"})]}),xe&&t.jsx("div",{style:{position:"absolute",top:"100%",right:0,marginTop:4,background:"var(--Grey-White, #FFF)",border:"1px solid var(--Grey-absent, #D9D9D9)",borderRadius:8,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:10,overflow:"hidden",minWidth:80},children:Ee.map(e=>t.jsxs("button",{onClick:()=>Fe(e),style:{display:"block",width:"100%",padding:"8px 12px",border:"none",background:P===e?"var(--surface-hover, #F3F7F7)":"var(--Grey-White, #FFF)",cursor:"pointer",fontSize:13,fontWeight:P===e?600:400,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",textAlign:"left"},children:[e,"x"]},e))})]})]}),t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[t.jsx("span",{style:{fontSize:13,fontWeight:500,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",lineHeight:1.2,minWidth:60},children:ne(g)}),t.jsxs("div",{onClick:e=>{const n=e.currentTarget.getBoundingClientRect(),o=e.clientX-n.left,r=Math.max(0,Math.min(1,o/n.width));j(r*g)},style:{flex:1,height:16,position:"relative",display:"flex",alignItems:"center",cursor:"pointer"},children:[t.jsx("div",{style:{position:"absolute",left:0,right:0,height:4,borderRadius:2,background:"var(--rail-surface-2, #E3E1D7)",pointerEvents:"none"}}),t.jsx("div",{style:{position:"absolute",left:0,top:"50%",transform:"translateY(-50%)",width:`${G}%`,height:4,borderRadius:2,background:"var(--Green-Primary, #00925F)",pointerEvents:"none"}}),t.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{position:"absolute",left:`${G}%`,top:"50%",transform:"translate(-50%, -50%)",pointerEvents:"none"},children:t.jsx("path",{d:"M7.875 1C11.6572 1 14.75 4.1191 14.75 8C14.75 11.8809 11.6572 15 7.875 15C4.09284 15 1 11.8809 1 8C1 4.1191 4.09284 1 7.875 1Z",fill:"#FFF",stroke:"#00925F",strokeWidth:"2"})})]})]}),t.jsxs("div",{style:{position:"relative",paddingBottom:30,cursor:"pointer"},children:[[z,H].map((e,n)=>{const o=n===0,r=x!=null&&x.length?x.filter(i=>o?i.actor===z:i.actor===H).map(i=>({start:g>0?i.startTime/g:0,end:g>0?i.endTime/g:0})):De[o?"Agent":"Customer"]||[];return t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,height:20,marginBottom:n===0?4:0},children:[t.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",fontFamily:"var(--font-sans)",lineHeight:1.2,minWidth:60},children:e}),t.jsxs("div",{onClick:i=>{const s=i.currentTarget.getBoundingClientRect(),p=Math.max(0,Math.min(1,(i.clientX-s.left)/s.width));j(p*g)},style:{flex:1,height:6,position:"relative",borderRadius:3,cursor:"pointer"},children:[t.jsx("div",{style:{position:"absolute",left:0,right:0,top:"50%",transform:"translateY(-50%)",height:4,borderRadius:2,background:"var(--rail-surface-2, #E3E1D7)"}}),r.map((i,s)=>t.jsx("div",{style:{position:"absolute",left:`${i.start*100}%`,width:`${(i.end-i.start)*100}%`,top:0,bottom:0,borderRadius:3,background:o?"var(--Grey-Strong, #2E3236)":"var(--Grey-Muted, #808183)"}},s))]})]},e)}),t.jsxs("div",{style:{position:"absolute",left:68,right:0,top:0,bottom:0,pointerEvents:"none"},children:[t.jsx("div",{style:{position:"absolute",left:`${G}%`,top:0,height:44,transform:"translateX(-50%)",borderLeft:"1.5px dashed var(--Grey-Muted, #808183)",opacity:.5}}),t.jsx("div",{style:{position:"absolute",left:`${G}%`,bottom:0,transform:"translateX(-50%)",background:"var(--Grey-Strong, #2E3236)",color:"var(--Grey-White, #FFF)",fontSize:14,fontWeight:600,lineHeight:1.2,padding:"4px 6px",borderRadius:4,whiteSpace:"nowrap"},children:ne(we)})]})]}),c&&t.jsx("audio",{ref:f,preload:"auto",style:{display:"none"},children:t.jsx("source",{src:d,type:"audio/mpeg"})}),l&&d&&t.jsx("audio",{ref:Z,preload:"auto",style:{display:"none"},children:t.jsx("source",{src:d,type:"audio/mpeg"})})]})]}),t.jsxs("div",{style:{width:"100%",display:"flex",flexDirection:"column",gap:16},children:[t.jsx("div",{style:{borderBottom:"1px solid var(--Grey-absent, #D9D9D9)",paddingBottom:16},children:t.jsx("span",{style:{fontSize:14,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2},children:"Transcript"})}),t.jsx("div",{id:"transcript-container",ref:R,style:{display:"flex",flexDirection:"column",maxHeight:600,overflowY:"auto"},children:(E||W.map(e=>({actor:e.speaker,actorType:e.type,text:e.text,timeRange:e.time}))).map((e,n)=>{const o=!!E,r=ve===n,i=o?y&&F===n:n===I&&y,s=i||r,p=(e.actorType||e.type)==="customer";return t.jsxs("div",{style:{display:"flex",padding:16,flexDirection:"column",alignItems:"flex-start",gap:16,alignSelf:"stretch",borderTop:n>0?"1px solid var(--Grey-absent, #D9D9D9)":"none",background:s?"var(--surface-hover, #F3F7F7)":"var(--Grey-White, #FFF)"},children:[t.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",gap:8},children:[t.jsx("span",{style:{fontSize:14,fontWeight:600,lineHeight:1.2,color:p?"var(--Grey-Strong, #2E3236)":"var(--Grey-Muted, #808183)"},children:e.actor}),t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[i&&t.jsxs(t.Fragment,{children:[t.jsx(h.AudioLines,{size:12,color:"#2E3236"}),t.jsx(h.AudioLines,{size:12,color:"#2E3236"})]}),t.jsx("span",{style:{fontSize:13,fontWeight:400,lineHeight:1.2,color:"var(--Grey-Muted, #808183)"},children:e.timeRange})]})]}),t.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:8,width:"100%"},children:[t.jsx("button",{onClick:()=>{o&&J?J(e,n):Re(n)},style:{background:"none",border:"none",cursor:"pointer",padding:0,flexShrink:0,display:"flex"},children:i?t.jsx(h.PauseCircle,{size:17,color:"#2E3236",strokeWidth:1.5}):t.jsx(h.PlayCircle,{size:17,color:"#808183",strokeWidth:1})}),t.jsx("p",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2,margin:0,flex:1},children:e.text})]})]},n)})})]})]})]})});exports.UpdatedInteractionRecording=Ge;
2
2
  //# sourceMappingURL=UpdatedInteractionRecording.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"UpdatedInteractionRecording.cjs.js","sources":["../src/components/UpdatedInteractionDetails/UpdatedInteractionRecording.jsx"],"sourcesContent":["import { useRef, useState, useEffect, useCallback, forwardRef, useImperativeHandle } from 'react';\nimport {\n Play, Pause, RotateCcw, RotateCw,\n ChevronDown,\n AudioLines, PlayCircle, PauseCircle,\n FileSignal,\n} from 'lucide-react';\n\nfunction fmtTime(seconds) {\n const m = Math.floor(seconds / 60);\n const s = Math.round(seconds % 60);\n return `${m}:${s.toString().padStart(2, '0')}`;\n}\n\n/* ── Demo data for static preview ── */\nconst DEMO_SEGMENTS = {\n Agent: [\n { start: 0, end: 0.08 },\n { start: 0.18, end: 0.22 },\n { start: 0.38, end: 0.42 },\n { start: 0.55, end: 0.58 },\n { start: 0.68, end: 0.72 },\n { start: 0.82, end: 0.88 },\n { start: 0.94, end: 1 },\n ],\n Customer: [\n { start: 0.1, end: 0.16 },\n { start: 0.24, end: 0.36 },\n { start: 0.44, end: 0.52 },\n { start: 0.6, end: 0.66 },\n { start: 0.74, end: 0.80 },\n ],\n};\n\nconst DEMO_TRANSCRIPT = [\n { speaker: 'Agent', type: 'agent', time: '00:04', text: 'Thanks for calling Miles Point S Pensau. This is Steve. How can I help you?' },\n { speaker: 'Customer', type: 'customer', time: '00:12', text: 'Hi, Steve. This is Sandra with Botai Catering.' },\n { speaker: 'Agent', type: 'agent', time: '00:18', text: 'Hello. How are you?' },\n { speaker: 'Customer', type: 'customer', time: '00:20', text: \"I'm doing really good. Hey. I brought my vans in last week, and I call it a beeping van, the one that beeps when you back up. Makes the crunchy noise. So I just took it on Saturday after, I think I had the, the Miles. I picked it up on Saturday morning, and I went to an event. So So I don't know if it's the tire or something, but makes it a little crunchy noise. Sometimes when I do the brake, but only if I turn the wheel too.\" },\n { speaker: 'Agent', type: 'agent', time: '00:21', text: 'Oh, interesting. Okay. Can you swing by with it one of these days?' },\n];\n\nconst SPEED_OPTIONS = [1, 1.25, 1.5, 2];\n\nfunction parseTimeStr(timeStr) {\n if (!timeStr) return 0;\n const parts = timeStr.split(':').map(Number);\n return (parts[0] || 0) * 60 + (parts[1] || 0);\n}\n\n/* ── Component ── */\nconst UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecording({\n audioUrl,\n timelineSegments = [],\n durationSeconds = 0,\n // Parent-managed audio props (optional — if not provided, component manages its own audio)\n currentTimeSeconds: externalCurrentTime,\n timelinePlaying: externalPlaying,\n playbackRate: externalRate,\n onSeek: externalOnSeek,\n onTogglePlay: externalOnTogglePlay,\n onSeekBack: externalOnSeekBack,\n onSeekForward: externalOnSeekForward,\n onSetPlaybackRate: externalOnSetPlaybackRate,\n audioRef: externalAudioRef,\n // Speaker names\n agentName = 'Agent',\n customerName = 'Customer',\n // Transcript props\n transcript,\n highlightedTurns = new Set(),\n activeTurnIndex,\n activeDemoIndex = 1,\n turnObservations = {},\n setExpandedSignals,\n onTurnPlayPause,\n}, ref) {\n const scrollRef = useRef(null);\n const internalAudioRef = useRef(null);\n const animFrameRef = useRef(null);\n\n // Internal audio state (used when audioUrl is provided but parent doesn't manage playback)\n const [internalPlaying, setInternalPlaying] = useState(false);\n const [internalCurrentTime, setInternalCurrentTime] = useState(0);\n const [internalDuration, setInternalDuration] = useState(0);\n const [internalRate, setInternalRate] = useState(1);\n\n // Demo state (used when no audioUrl)\n const [demoSeekTime, setDemoSeekTime] = useState(null);\n const [demoRate, setDemoRate] = useState(1);\n const [demoPlaying, setDemoPlaying] = useState(false);\n const [showSpeedMenu, setShowSpeedMenu] = useState(false);\n const [activeDemoIdx, setActiveDemoIdx] = useState(activeDemoIndex);\n const [highlightedTranscriptIdx, setHighlightedTranscriptIdx] = useState(null);\n\n // Determine control mode\n const parentManaged = !!externalAudioRef;\n const isDemo = !audioUrl;\n const selfManaged = audioUrl && !parentManaged;\n\n // Unified state\n const activePlaying = isDemo ? demoPlaying : (parentManaged ? (externalPlaying ?? false) : internalPlaying);\n const activeCurrentTime = isDemo ? (demoSeekTime ?? 0) : (parentManaged ? (externalCurrentTime ?? 0) : internalCurrentTime);\n const activeRate = isDemo ? demoRate : (parentManaged ? (externalRate ?? 1) : internalRate);\n const activeDuration = isDemo ? (durationSeconds || 156) : (parentManaged ? durationSeconds : (internalDuration || durationSeconds || 0));\n const audioRefToUse = parentManaged ? externalAudioRef : internalAudioRef;\n\n /* ── Internal audio time tracking via requestAnimationFrame ── */\n const startTimeTracking = useCallback(() => {\n const tick = () => {\n const audio = internalAudioRef.current;\n if (audio) setInternalCurrentTime(audio.currentTime);\n animFrameRef.current = requestAnimationFrame(tick);\n };\n animFrameRef.current = requestAnimationFrame(tick);\n }, []);\n\n const stopTimeTracking = useCallback(() => {\n if (animFrameRef.current) {\n cancelAnimationFrame(animFrameRef.current);\n animFrameRef.current = null;\n }\n }, []);\n\n // Cleanup on unmount\n useEffect(() => () => stopTimeTracking(), [stopTimeTracking]);\n\n // Wire up internal audio element events\n useEffect(() => {\n if (!selfManaged) return;\n const audio = internalAudioRef.current;\n if (!audio) return;\n const onLoaded = () => setInternalDuration(audio.duration || 0);\n const onEnded = () => { setInternalPlaying(false); stopTimeTracking(); };\n audio.addEventListener('loadedmetadata', onLoaded);\n audio.addEventListener('ended', onEnded);\n return () => {\n audio.removeEventListener('loadedmetadata', onLoaded);\n audio.removeEventListener('ended', onEnded);\n };\n }, [selfManaged, stopTimeTracking]);\n\n /* Compute which transcript card matches current playback time */\n const computeActiveIdx = (timeSec) => {\n for (let i = DEMO_TRANSCRIPT.length - 1; i >= 0; i--) {\n const turnTime = parseTimeStr(DEMO_TRANSCRIPT[i].time);\n if (timeSec >= turnTime) return i;\n }\n return 0;\n };\n\n /* ── Unified handlers ── */\n const handleSeek = (timeSeconds) => {\n const dur = activeDuration || 156;\n const clamped = Math.max(0, Math.min(timeSeconds, dur));\n\n if (selfManaged) {\n const audio = internalAudioRef.current;\n if (audio) audio.currentTime = clamped;\n setInternalCurrentTime(clamped);\n } else if (parentManaged && externalOnSeek) {\n externalOnSeek(clamped);\n }\n\n // Always update demo state for UI\n setDemoSeekTime(clamped);\n setActiveDemoIdx(computeActiveIdx(clamped));\n };\n\n const handleTogglePlay = () => {\n if (selfManaged) {\n const audio = internalAudioRef.current;\n if (!audio) return;\n if (internalPlaying) {\n audio.pause();\n stopTimeTracking();\n setInternalPlaying(false);\n } else {\n audio.play().then(() => {\n setInternalPlaying(true);\n startTimeTracking();\n }).catch(() => {});\n }\n } else if (parentManaged && externalOnTogglePlay) {\n externalOnTogglePlay();\n } else {\n // Demo mode\n setDemoPlaying((prev) => !prev);\n }\n };\n\n const handleSeekBack = () => {\n if (parentManaged && externalOnSeekBack) externalOnSeekBack();\n else {\n const cur = selfManaged ? internalCurrentTime : (demoSeekTime ?? 0);\n handleSeek(Math.max(0, cur - 10));\n }\n };\n\n const handleSeekForward = () => {\n if (parentManaged && externalOnSeekForward) externalOnSeekForward();\n else {\n const cur = selfManaged ? internalCurrentTime : (demoSeekTime ?? 0);\n const dur = activeDuration || 156;\n handleSeek(Math.min(dur, cur + 10));\n }\n };\n\n const handleSetRate = (rate) => {\n if (selfManaged) {\n const audio = internalAudioRef.current;\n if (audio) audio.playbackRate = rate;\n setInternalRate(rate);\n } else if (parentManaged && externalOnSetPlaybackRate) {\n externalOnSetPlaybackRate(rate);\n }\n setDemoRate(rate);\n setShowSpeedMenu(false);\n };\n\n /* Expose seekTo for parent to call via ref (e.g. from Signals \"Show in transcript\") */\n useImperativeHandle(ref, () => ({\n seekTo: (timeSec) => {\n handleSeek(timeSec);\n if (parentManaged) {\n // Parent manages audio — seek was already called via handleSeek → externalOnSeek\n // Now trigger play if not already playing\n if (!externalPlaying && externalOnTogglePlay) {\n externalOnTogglePlay();\n }\n } else if (selfManaged) {\n const audio = internalAudioRef.current;\n if (audio) {\n audio.play().then(() => {\n setInternalPlaying(true);\n startTimeTracking();\n }).catch(() => {});\n }\n } else {\n setDemoPlaying(true);\n }\n const idx = computeActiveIdx(timeSec);\n setActiveDemoIdx(idx);\n setTimeout(() => {\n const container = scrollRef.current;\n const card = container?.children?.[idx];\n if (container && card) {\n const containerTop = container.getBoundingClientRect().top;\n const cardTop = card.getBoundingClientRect().top;\n const offset = cardTop - containerTop + container.scrollTop;\n container.scrollTo({ top: offset - 20, behavior: 'smooth' });\n }\n }, 50);\n },\n // Scroll to transcript card and highlight it, without seeking or playing audio\n scrollToTranscript: (timeSec) => {\n let idx;\n // Use real transcript data if available\n if (transcript?.messages?.length) {\n const msgs = transcript.messages;\n idx = 0;\n for (let i = msgs.length - 1; i >= 0; i--) {\n const startSec = (msgs[i].start ?? msgs[i].start_ms ?? 0) / 1000;\n if (timeSec >= startSec) { idx = i; break; }\n }\n } else {\n idx = computeActiveIdx(timeSec);\n }\n setActiveDemoIdx(idx);\n setHighlightedTranscriptIdx(idx);\n setTimeout(() => {\n const container = scrollRef.current;\n const card = container?.children?.[idx];\n if (container && card) {\n const containerTop = container.getBoundingClientRect().top;\n const cardTop = card.getBoundingClientRect().top;\n const offset = cardTop - containerTop + container.scrollTop;\n container.scrollTo({ top: offset - 20, behavior: 'smooth' });\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 // Auto-scroll transcript to active card — only within the transcript container, not the main page\n useEffect(() => {\n if (!activePlaying) return;\n const activeIdx = turns ? activeTurnIndex : activeDemoIdx;\n if (activeIdx == null || activeIdx < 0) return;\n const container = scrollRef.current;\n if (!container) return;\n const card = container.children?.[activeIdx];\n if (card) {\n const containerTop = container.getBoundingClientRect().top;\n const cardTop = card.getBoundingClientRect().top;\n const offset = cardTop - containerTop + container.scrollTop;\n container.scrollTo({ top: offset - 20, behavior: 'smooth' });\n }\n }, [activeTurnIndex, activeDemoIdx, activePlaying, turns]);\n\n // Computed display values\n const effectiveTime = isDemo ? (demoSeekTime ?? 0) : activeCurrentTime;\n const effectiveDuration = activeDuration || 156;\n const progress = effectiveDuration > 0 ? (effectiveTime / effectiveDuration) * 100 : 0;\n const displayTime = Math.round(effectiveTime);\n\n return (\n <div style={{\n display: 'flex',\n flexDirection: 'column',\n gap: 16,\n }}>\n {/* ── \"Recording\" title with icon — outside the card, matches Signals style ── */}\n <div style={{\n display: 'flex',\n alignItems: 'center',\n gap: 16,\n width: '100%',\n }}>\n <div style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: 34,\n height: 34,\n borderRadius: 9999,\n background: 'var(--surface-hover, #F3F7F7)',\n flexShrink: 0,\n }}>\n <FileSignal size={20} color=\"#2E3236\" strokeWidth={1.5} />\n </div>\n <span style={{\n fontSize: 15,\n fontWeight: 500,\n color: 'var(--Grey-Strong, #2E3236)',\n }}>\n Recording\n </span>\n </div>\n\n {/* ── Card with border ── */}\n <div style={{\n display: 'flex',\n padding: 24,\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: 24,\n borderRadius: 8,\n border: '1px solid var(--Grey-absent, #D9D9D9)',\n background: 'var(--Grey-White, #FFF)',\n }}>\n\n {/* ════════════════════════════════════════\n RECORDING CONTROLS\n ════════════════════════════════════════ */}\n <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>\n\n {/* ── \"Agent / Customer\" + Controls — horizontal, space-between, center ── */}\n <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>\n <span style={{\n fontSize: 14, fontWeight: 500,\n color: 'var(--Grey-Strong, #2E3236)',\n lineHeight: 1.2,\n }}>\n {agentName} / {customerName}\n </span>\n\n {/* Controls — horizontal, gap: 12, center */}\n <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>\n {/* Skip back 10s */}\n <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--Grey-Muted, #808183)', lineHeight: 1.2 }}>10</span>\n <button onClick={handleSeekBack} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center' }}>\n <RotateCcw size={20} color=\"#808183\" strokeWidth={1.5} />\n </button>\n\n {/* Play / Pause — 32x32 dark circle */}\n <button onClick={handleTogglePlay} style={{\n background: 'var(--Grey-Strong, #2E3236)',\n border: 'none', cursor: 'pointer',\n width: 32, height: 32, borderRadius: 48,\n padding: 0,\n display: 'flex', alignItems: 'center', justifyContent: 'center',\n }}>\n {activePlaying\n ? <Pause size={14} color=\"#FFF\" fill=\"#FFF\" />\n : <Play size={14} color=\"#FFF\" fill=\"#FFF\" strokeWidth={1.5} style={{ marginLeft: 2 }} />\n }\n </button>\n\n {/* Skip forward 10s */}\n <button onClick={handleSeekForward} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center' }}>\n <RotateCw size={20} color=\"#808183\" strokeWidth={1.5} />\n </button>\n <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--Grey-Muted, #808183)', lineHeight: 1.2 }}>10</span>\n </div>\n\n {/* Speed pill with dropdown */}\n <div style={{ position: 'relative' }}>\n <button\n onClick={() => setShowSpeedMenu((prev) => !prev)}\n style={{\n background: 'var(--Grey-White, #FFF)',\n border: '1px solid var(--Grey-absent, #D9D9D9)',\n borderRadius: 20,\n padding: '0 5px 0 10px',\n height: 24,\n minWidth: 56,\n cursor: 'pointer',\n fontSize: 13, fontWeight: 400,\n color: 'var(--Grey-Strong, #2E3236)',\n fontFamily: 'var(--font-sans)',\n lineHeight: 1.2,\n display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,\n }}\n >\n {activeRate}x\n <ChevronDown size={12} color=\"#808183\" />\n </button>\n\n {showSpeedMenu && (\n <div style={{\n position: 'absolute',\n top: '100%',\n right: 0,\n marginTop: 4,\n background: 'var(--Grey-White, #FFF)',\n border: '1px solid var(--Grey-absent, #D9D9D9)',\n borderRadius: 8,\n boxShadow: '0 4px 12px rgba(0,0,0,0.1)',\n zIndex: 10,\n overflow: 'hidden',\n minWidth: 80,\n }}>\n {SPEED_OPTIONS.map((speed) => (\n <button\n key={speed}\n onClick={() => handleSetRate(speed)}\n style={{\n display: 'block',\n width: '100%',\n padding: '8px 12px',\n border: 'none',\n background: activeRate === speed ? 'var(--surface-hover, #F3F7F7)' : 'var(--Grey-White, #FFF)',\n cursor: 'pointer',\n fontSize: 13,\n fontWeight: activeRate === speed ? 600 : 400,\n color: 'var(--Grey-Strong, #2E3236)',\n fontFamily: 'var(--font-sans)',\n textAlign: 'left',\n }}\n >\n {speed}x\n </button>\n ))}\n </div>\n )}\n </div>\n </div>\n\n {/* ── Row 2: Progress bar (V4 style for all modes) ── */}\n <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n {/* Time label + scrubber bar — same layout as speaker rows: 60px label + 8px gap + flex bar */}\n <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n <span style={{\n fontSize: 13, fontWeight: 500,\n color: 'var(--Grey-Strong, #2E3236)',\n fontFamily: 'var(--font-sans)',\n lineHeight: 1.2,\n minWidth: 60,\n }}>\n {fmtTime(effectiveDuration)}\n </span>\n <div\n onClick={(e) => {\n const rect = e.currentTarget.getBoundingClientRect();\n const clickX = e.clientX - rect.left;\n const pct = Math.max(0, Math.min(1, clickX / rect.width));\n handleSeek(pct * effectiveDuration);\n }}\n style={{\n flex: 1, height: 16,\n position: 'relative',\n display: 'flex', alignItems: 'center',\n cursor: 'pointer',\n }}\n >\n {/* Background track */}\n <div style={{\n position: 'absolute', left: 0, right: 0,\n height: 4, borderRadius: 2,\n background: 'var(--rail-surface-2, #E3E1D7)',\n pointerEvents: 'none',\n }} />\n {/* Played portion */}\n <div style={{\n position: 'absolute', left: 0, top: '50%',\n transform: 'translateY(-50%)',\n width: `${progress}%`,\n height: 4, borderRadius: 2,\n background: 'var(--Green-Primary, #00925F)',\n pointerEvents: 'none',\n }} />\n {/* Scrubber handle */}\n <svg\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{\n position: 'absolute',\n left: `${progress}%`,\n top: '50%',\n transform: 'translate(-50%, -50%)',\n pointerEvents: 'none',\n }}\n >\n <path\n d=\"M7.875 1C11.6572 1 14.75 4.1191 14.75 8C14.75 11.8809 11.6572 15 7.875 15C4.09284 15 1 11.8809 1 8C1 4.1191 4.09284 1 7.875 1Z\"\n fill=\"#FFF\"\n stroke=\"#00925F\"\n strokeWidth=\"2\"\n />\n </svg>\n </div>\n </div>\n\n {/* ── Speaker timeline bars + playback indicator ── */}\n <div style={{ position: 'relative', paddingBottom: 30, cursor: 'pointer' }}>\n {[agentName, customerName].map((speaker, rowIdx) => {\n const isAgent = rowIdx === 0;\n // Build segments from real timelineSegments or fall back to demo\n const speakerSegments = timelineSegments?.length\n ? timelineSegments\n .filter(s => isAgent ? s.actor === agentName : s.actor === customerName)\n .map(s => ({\n start: effectiveDuration > 0 ? s.startTime / effectiveDuration : 0,\n end: effectiveDuration > 0 ? s.endTime / effectiveDuration : 0,\n }))\n : (DEMO_SEGMENTS[isAgent ? 'Agent' : 'Customer'] || []);\n\n return (\n <div key={speaker} style={{\n display: 'flex', alignItems: 'center', gap: 8,\n height: 20,\n marginBottom: rowIdx === 0 ? 4 : 0,\n }}>\n <span style={{\n fontSize: 13, fontWeight: 400,\n color: 'var(--Grey-Muted, #808183)',\n fontFamily: 'var(--font-sans)',\n lineHeight: 1.2,\n minWidth: 60,\n }}>\n {speaker}\n </span>\n <div\n onClick={(e) => {\n const rect = e.currentTarget.getBoundingClientRect();\n const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n handleSeek(pct * effectiveDuration);\n }}\n style={{\n flex: 1, height: 6,\n position: 'relative', borderRadius: 3,\n cursor: 'pointer',\n }}\n >\n {/* Thin baseline */}\n <div style={{\n position: 'absolute', left: 0, right: 0,\n top: '50%', transform: 'translateY(-50%)',\n height: 4, borderRadius: 2,\n background: 'var(--rail-surface-2, #E3E1D7)',\n }} />\n {/* Speech segments */}\n {speakerSegments.map((seg, i) => (\n <div key={i} style={{\n position: 'absolute',\n left: `${seg.start * 100}%`,\n width: `${(seg.end - seg.start) * 100}%`,\n top: 0, bottom: 0, borderRadius: 3,\n background: isAgent\n ? 'var(--Grey-Strong, #2E3236)'\n : 'var(--Grey-Muted, #808183)',\n }} />\n ))}\n </div>\n </div>\n );\n })}\n\n {/* ── Playback position: dotted line + time tooltip ── */}\n <div style={{\n position: 'absolute',\n left: 68, /* 60 label + 8 gap */\n right: 0,\n top: 0,\n bottom: 0,\n pointerEvents: 'none',\n }}>\n {/* Dotted vertical line */}\n <div style={{\n position: 'absolute',\n left: `${progress}%`,\n top: 0,\n height: 44,\n transform: 'translateX(-50%)',\n borderLeft: '1.5px dashed var(--Grey-Muted, #808183)',\n opacity: 0.5,\n }} />\n\n {/* Time tooltip */}\n <div style={{\n position: 'absolute',\n left: `${progress}%`,\n bottom: 0,\n transform: 'translateX(-50%)',\n background: 'var(--Grey-Strong, #2E3236)',\n color: 'var(--Grey-White, #FFF)',\n fontSize: 14, fontWeight: 600,\n lineHeight: 1.2,\n padding: '4px 6px',\n borderRadius: 4,\n whiteSpace: 'nowrap',\n }}>\n {fmtTime(displayTime)}\n </div>\n </div>\n </div>\n\n {/* Hidden audio element — only for self-managed mode */}\n {selfManaged && (\n <audio ref={internalAudioRef} preload=\"auto\" style={{ display: 'none' }}>\n <source src={audioUrl} type=\"audio/mpeg\" />\n </audio>\n )}\n {/* Hidden audio element — for parent-managed mode */}\n {parentManaged && audioUrl && (\n <audio ref={externalAudioRef} preload=\"auto\" style={{ display: 'none' }}>\n <source src={audioUrl} type=\"audio/mpeg\" />\n </audio>\n )}\n </div>\n </div>\n\n {/* ════════════════════════════════════════\n TRANSCRIPT SECTION\n ════════════════════════════════════════ */}\n {/* Figma: Frame 49, vertical, gap: 16 */}\n <div style={{\n width: '100%',\n display: 'flex', flexDirection: 'column', gap: 16,\n }}>\n {/* ── Header: Transcript ── */}\n <div style={{\n borderBottom: '1px solid var(--Grey-absent, #D9D9D9)',\n paddingBottom: 16,\n }}>\n <span style={{\n fontSize: 14, fontWeight: 400,\n color: 'var(--Grey-Strong, #2E3236)',\n lineHeight: 1.2,\n }}>\n Transcript\n </span>\n </div>\n\n {/* ── Cards — V4 style for both real and demo data ── */}\n <div id=\"transcript-container\" ref={scrollRef} style={{\n display: 'flex', flexDirection: 'column',\n maxHeight: 600, overflowY: 'auto',\n }}>\n {(turns || DEMO_TRANSCRIPT.map((card) => ({\n actor: card.speaker,\n actorType: card.type,\n text: card.text,\n timeRange: card.time,\n }))).map((card, i) => {\n const isRealData = !!turns;\n const isHighlightedByTranscript = highlightedTranscriptIdx === i;\n const isPlaying = isRealData\n ? (activePlaying && activeTurnIndex === i)\n : (i === activeDemoIdx && activePlaying);\n const isActive = isPlaying || isHighlightedByTranscript;\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 {isPlaying && (\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 {isPlaying ? (\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","highlightedTranscriptIdx","setHighlightedTranscriptIdx","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","container","card","_a","containerTop","offset","msgs","startSec","handleDemoTurnPlayPause","formatTimeRange","startMs","endMs","fmt","ms","minutes","turns","_b","obs","el","activeIdx","effectiveTime","effectiveDuration","progress","displayTime","jsxs","jsx","FileSignal","RotateCcw","Pause","Play","RotateCw","ChevronDown","speed","rect","clickX","pct","speaker","rowIdx","isAgent","speakerSegments","e","seg","isRealData","isHighlightedByTranscript","isPlaying","isActive","isCustomer","Fragment","AudioLines","PauseCircle","PlayCircle"],"mappings":"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"}
1
+ {"version":3,"file":"UpdatedInteractionRecording.cjs.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 FilePlay,\n} from 'lucide-react';\n\nfunction fmtTime(seconds) {\n const m = Math.floor(seconds / 60);\n const s = Math.round(seconds % 60);\n return `${m}:${s.toString().padStart(2, '0')}`;\n}\n\n/* ── Demo data for static preview ── */\nconst DEMO_SEGMENTS = {\n Agent: [\n { start: 0, end: 0.08 },\n { start: 0.18, end: 0.22 },\n { start: 0.38, end: 0.42 },\n { start: 0.55, end: 0.58 },\n { start: 0.68, end: 0.72 },\n { start: 0.82, end: 0.88 },\n { start: 0.94, end: 1 },\n ],\n Customer: [\n { start: 0.1, end: 0.16 },\n { start: 0.24, end: 0.36 },\n { start: 0.44, end: 0.52 },\n { start: 0.6, end: 0.66 },\n { start: 0.74, end: 0.80 },\n ],\n};\n\nconst DEMO_TRANSCRIPT = [\n { speaker: 'Agent', type: 'agent', time: '00:04', text: 'Thanks for calling Miles Point S Pensau. This is Steve. How can I help you?' },\n { speaker: 'Customer', type: 'customer', time: '00:12', text: 'Hi, Steve. This is Sandra with Botai Catering.' },\n { speaker: 'Agent', type: 'agent', time: '00:18', text: 'Hello. How are you?' },\n { speaker: 'Customer', type: 'customer', time: '00:20', text: \"I'm doing really good. Hey. I brought my vans in last week, and I call it a beeping van, the one that beeps when you back up. Makes the crunchy noise. So I just took it on Saturday after, I think I had the, the Miles. I picked it up on Saturday morning, and I went to an event. So So I don't know if it's the tire or something, but makes it a little crunchy noise. Sometimes when I do the brake, but only if I turn the wheel too.\" },\n { speaker: 'Agent', type: 'agent', time: '00:21', text: 'Oh, interesting. Okay. Can you swing by with it one of these days?' },\n];\n\nconst SPEED_OPTIONS = [1, 1.25, 1.5, 2];\n\nfunction parseTimeStr(timeStr) {\n if (!timeStr) return 0;\n const parts = timeStr.split(':').map(Number);\n return (parts[0] || 0) * 60 + (parts[1] || 0);\n}\n\n/* ── Component ── */\nconst UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecording({\n audioUrl,\n timelineSegments = [],\n durationSeconds = 0,\n // Parent-managed audio props (optional — if not provided, component manages its own audio)\n currentTimeSeconds: externalCurrentTime,\n timelinePlaying: externalPlaying,\n playbackRate: externalRate,\n onSeek: externalOnSeek,\n onTogglePlay: externalOnTogglePlay,\n onSeekBack: externalOnSeekBack,\n onSeekForward: externalOnSeekForward,\n onSetPlaybackRate: externalOnSetPlaybackRate,\n audioRef: externalAudioRef,\n // Speaker names\n agentName = 'Agent',\n customerName = 'Customer',\n // Transcript props\n transcript,\n highlightedTurns = new Set(),\n activeTurnIndex,\n activeDemoIndex = 1,\n turnObservations = {},\n setExpandedSignals,\n onTurnPlayPause,\n}, ref) {\n const scrollRef = useRef(null);\n const internalAudioRef = useRef(null);\n const animFrameRef = useRef(null);\n\n // Internal audio state (used when audioUrl is provided but parent doesn't manage playback)\n const [internalPlaying, setInternalPlaying] = useState(false);\n const [internalCurrentTime, setInternalCurrentTime] = useState(0);\n const [internalDuration, setInternalDuration] = useState(0);\n const [internalRate, setInternalRate] = useState(1);\n\n // Demo state (used when no audioUrl)\n const [demoSeekTime, setDemoSeekTime] = useState(null);\n const [demoRate, setDemoRate] = useState(1);\n const [demoPlaying, setDemoPlaying] = useState(false);\n const [showSpeedMenu, setShowSpeedMenu] = useState(false);\n const [activeDemoIdx, setActiveDemoIdx] = useState(activeDemoIndex);\n const [highlightedTranscriptIdx, setHighlightedTranscriptIdx] = useState(null);\n\n // Determine control mode\n const parentManaged = !!externalAudioRef;\n const isDemo = !audioUrl;\n const selfManaged = audioUrl && !parentManaged;\n\n // Unified state\n const activePlaying = isDemo ? demoPlaying : (parentManaged ? (externalPlaying ?? false) : internalPlaying);\n const activeCurrentTime = isDemo ? (demoSeekTime ?? 0) : (parentManaged ? (externalCurrentTime ?? 0) : internalCurrentTime);\n const activeRate = isDemo ? demoRate : (parentManaged ? (externalRate ?? 1) : internalRate);\n const activeDuration = isDemo ? (durationSeconds || 156) : (parentManaged ? durationSeconds : (internalDuration || durationSeconds || 0));\n const audioRefToUse = parentManaged ? externalAudioRef : internalAudioRef;\n\n /* ── Internal audio time tracking via requestAnimationFrame ── */\n const startTimeTracking = useCallback(() => {\n const tick = () => {\n const audio = internalAudioRef.current;\n if (audio) setInternalCurrentTime(audio.currentTime);\n animFrameRef.current = requestAnimationFrame(tick);\n };\n animFrameRef.current = requestAnimationFrame(tick);\n }, []);\n\n const stopTimeTracking = useCallback(() => {\n if (animFrameRef.current) {\n cancelAnimationFrame(animFrameRef.current);\n animFrameRef.current = null;\n }\n }, []);\n\n // Cleanup on unmount\n useEffect(() => () => stopTimeTracking(), [stopTimeTracking]);\n\n // Wire up internal audio element events\n useEffect(() => {\n if (!selfManaged) return;\n const audio = internalAudioRef.current;\n if (!audio) return;\n const onLoaded = () => setInternalDuration(audio.duration || 0);\n const onEnded = () => { setInternalPlaying(false); stopTimeTracking(); };\n audio.addEventListener('loadedmetadata', onLoaded);\n audio.addEventListener('ended', onEnded);\n return () => {\n audio.removeEventListener('loadedmetadata', onLoaded);\n audio.removeEventListener('ended', onEnded);\n };\n }, [selfManaged, stopTimeTracking]);\n\n /* Compute which transcript card matches current playback time */\n const computeActiveIdx = (timeSec) => {\n for (let i = DEMO_TRANSCRIPT.length - 1; i >= 0; i--) {\n const turnTime = parseTimeStr(DEMO_TRANSCRIPT[i].time);\n if (timeSec >= turnTime) return i;\n }\n return 0;\n };\n\n /* ── Unified handlers ── */\n const handleSeek = (timeSeconds) => {\n const dur = activeDuration || 156;\n const clamped = Math.max(0, Math.min(timeSeconds, dur));\n\n if (selfManaged) {\n const audio = internalAudioRef.current;\n if (audio) audio.currentTime = clamped;\n setInternalCurrentTime(clamped);\n } else if (parentManaged && externalOnSeek) {\n externalOnSeek(clamped);\n }\n\n // Always update demo state for UI\n setDemoSeekTime(clamped);\n setActiveDemoIdx(computeActiveIdx(clamped));\n };\n\n const handleTogglePlay = () => {\n if (selfManaged) {\n const audio = internalAudioRef.current;\n if (!audio) return;\n if (internalPlaying) {\n audio.pause();\n stopTimeTracking();\n setInternalPlaying(false);\n } else {\n audio.play().then(() => {\n setInternalPlaying(true);\n startTimeTracking();\n }).catch(() => {});\n }\n } else if (parentManaged && externalOnTogglePlay) {\n externalOnTogglePlay();\n } else {\n // Demo mode\n setDemoPlaying((prev) => !prev);\n }\n };\n\n const handleSeekBack = () => {\n if (parentManaged && externalOnSeekBack) externalOnSeekBack();\n else {\n const cur = selfManaged ? internalCurrentTime : (demoSeekTime ?? 0);\n handleSeek(Math.max(0, cur - 10));\n }\n };\n\n const handleSeekForward = () => {\n if (parentManaged && externalOnSeekForward) externalOnSeekForward();\n else {\n const cur = selfManaged ? internalCurrentTime : (demoSeekTime ?? 0);\n const dur = activeDuration || 156;\n handleSeek(Math.min(dur, cur + 10));\n }\n };\n\n const handleSetRate = (rate) => {\n if (selfManaged) {\n const audio = internalAudioRef.current;\n if (audio) audio.playbackRate = rate;\n setInternalRate(rate);\n } else if (parentManaged && externalOnSetPlaybackRate) {\n externalOnSetPlaybackRate(rate);\n }\n setDemoRate(rate);\n setShowSpeedMenu(false);\n };\n\n /* Expose seekTo for parent to call via ref (e.g. from Signals \"Show in transcript\") */\n useImperativeHandle(ref, () => ({\n seekTo: (timeSec) => {\n handleSeek(timeSec);\n if (parentManaged) {\n // Parent manages audio — seek was already called via handleSeek → externalOnSeek\n // Now trigger play if not already playing\n if (!externalPlaying && externalOnTogglePlay) {\n externalOnTogglePlay();\n }\n } else if (selfManaged) {\n const audio = internalAudioRef.current;\n if (audio) {\n audio.play().then(() => {\n setInternalPlaying(true);\n startTimeTracking();\n }).catch(() => {});\n }\n } else {\n setDemoPlaying(true);\n }\n const idx = computeActiveIdx(timeSec);\n setActiveDemoIdx(idx);\n setTimeout(() => {\n const container = scrollRef.current;\n const card = container?.children?.[idx];\n if (container && card) {\n const containerTop = container.getBoundingClientRect().top;\n const cardTop = card.getBoundingClientRect().top;\n const offset = cardTop - containerTop + container.scrollTop;\n container.scrollTo({ top: offset - 20, behavior: 'smooth' });\n }\n }, 50);\n },\n // Scroll to transcript card and highlight it, without seeking or playing audio\n scrollToTranscript: (timeSec) => {\n let idx;\n // Use real transcript data if available\n if (transcript?.messages?.length) {\n const msgs = transcript.messages;\n idx = 0;\n for (let i = msgs.length - 1; i >= 0; i--) {\n const startSec = (msgs[i].start ?? msgs[i].start_ms ?? 0) / 1000;\n if (timeSec >= startSec) { idx = i; break; }\n }\n } else {\n idx = computeActiveIdx(timeSec);\n }\n setActiveDemoIdx(idx);\n setHighlightedTranscriptIdx(idx);\n setTimeout(() => {\n const container = scrollRef.current;\n const card = container?.children?.[idx];\n if (container && card) {\n const containerTop = container.getBoundingClientRect().top;\n const cardTop = card.getBoundingClientRect().top;\n const offset = cardTop - containerTop + container.scrollTop;\n container.scrollTo({ top: offset - 20, behavior: 'smooth' });\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 // Auto-scroll transcript to active card — only within the transcript container, not the main page\n useEffect(() => {\n if (!activePlaying) return;\n const activeIdx = turns ? activeTurnIndex : activeDemoIdx;\n if (activeIdx == null || activeIdx < 0) return;\n const container = scrollRef.current;\n if (!container) return;\n const card = container.children?.[activeIdx];\n if (card) {\n const containerTop = container.getBoundingClientRect().top;\n const cardTop = card.getBoundingClientRect().top;\n const offset = cardTop - containerTop + container.scrollTop;\n container.scrollTo({ top: offset - 20, behavior: 'smooth' });\n }\n }, [activeTurnIndex, activeDemoIdx, activePlaying, turns]);\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 <FilePlay size={20} color=\"#2E3236\" strokeWidth={1.5} />\n </div>\n <span style={{\n fontSize: 15,\n fontWeight: 500,\n color: 'var(--Grey-Strong, #2E3236)',\n }}>\n Recording\n </span>\n </div>\n\n {/* ── Card with border ── */}\n <div style={{\n display: 'flex',\n padding: 24,\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: 24,\n borderRadius: 8,\n border: '1px solid var(--Grey-absent, #D9D9D9)',\n background: 'var(--Grey-White, #FFF)',\n }}>\n\n {/* ════════════════════════════════════════\n RECORDING CONTROLS\n ════════════════════════════════════════ */}\n <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>\n\n {/* ── \"Agent / Customer\" + Controls — horizontal, space-between, center ── */}\n <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>\n <span style={{\n fontSize: 14, fontWeight: 500,\n color: 'var(--Grey-Strong, #2E3236)',\n lineHeight: 1.2,\n }}>\n {agentName} / {customerName}\n </span>\n\n {/* Controls — horizontal, gap: 12, center */}\n <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>\n {/* Skip back 10s */}\n <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--Grey-Muted, #808183)', lineHeight: 1.2 }}>10</span>\n <button onClick={handleSeekBack} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center' }}>\n <RotateCcw size={20} color=\"#808183\" strokeWidth={1.5} />\n </button>\n\n {/* Play / Pause — 32x32 dark circle */}\n <button onClick={handleTogglePlay} style={{\n background: 'var(--Grey-Strong, #2E3236)',\n border: 'none', cursor: 'pointer',\n width: 32, height: 32, borderRadius: 48,\n padding: 0,\n display: 'flex', alignItems: 'center', justifyContent: 'center',\n }}>\n {activePlaying\n ? <Pause size={14} color=\"#FFF\" fill=\"#FFF\" />\n : <Play size={14} color=\"#FFF\" fill=\"#FFF\" strokeWidth={1.5} style={{ marginLeft: 2 }} />\n }\n </button>\n\n {/* Skip forward 10s */}\n <button onClick={handleSeekForward} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center' }}>\n <RotateCw size={20} color=\"#808183\" strokeWidth={1.5} />\n </button>\n <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--Grey-Muted, #808183)', lineHeight: 1.2 }}>10</span>\n </div>\n\n {/* Speed pill with dropdown */}\n <div style={{ position: 'relative' }}>\n <button\n onClick={() => setShowSpeedMenu((prev) => !prev)}\n style={{\n background: 'var(--Grey-White, #FFF)',\n border: '1px solid var(--Grey-absent, #D9D9D9)',\n borderRadius: 20,\n padding: '0 5px 0 10px',\n height: 24,\n minWidth: 56,\n cursor: 'pointer',\n fontSize: 13, fontWeight: 400,\n color: 'var(--Grey-Strong, #2E3236)',\n fontFamily: 'var(--font-sans)',\n lineHeight: 1.2,\n display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,\n }}\n >\n {activeRate}x\n <ChevronDown size={12} color=\"#808183\" />\n </button>\n\n {showSpeedMenu && (\n <div style={{\n position: 'absolute',\n top: '100%',\n right: 0,\n marginTop: 4,\n background: 'var(--Grey-White, #FFF)',\n border: '1px solid var(--Grey-absent, #D9D9D9)',\n borderRadius: 8,\n boxShadow: '0 4px 12px rgba(0,0,0,0.1)',\n zIndex: 10,\n overflow: 'hidden',\n minWidth: 80,\n }}>\n {SPEED_OPTIONS.map((speed) => (\n <button\n key={speed}\n onClick={() => handleSetRate(speed)}\n style={{\n display: 'block',\n width: '100%',\n padding: '8px 12px',\n border: 'none',\n background: activeRate === speed ? 'var(--surface-hover, #F3F7F7)' : 'var(--Grey-White, #FFF)',\n cursor: 'pointer',\n fontSize: 13,\n fontWeight: activeRate === speed ? 600 : 400,\n color: 'var(--Grey-Strong, #2E3236)',\n fontFamily: 'var(--font-sans)',\n textAlign: 'left',\n }}\n >\n {speed}x\n </button>\n ))}\n </div>\n )}\n </div>\n </div>\n\n {/* ── Row 2: Progress bar (V4 style for all modes) ── */}\n <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n {/* Time label + scrubber bar — same layout as speaker rows: 60px label + 8px gap + flex bar */}\n <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n <span style={{\n fontSize: 13, fontWeight: 500,\n color: 'var(--Grey-Strong, #2E3236)',\n fontFamily: 'var(--font-sans)',\n lineHeight: 1.2,\n minWidth: 60,\n }}>\n {fmtTime(effectiveDuration)}\n </span>\n <div\n onClick={(e) => {\n const rect = e.currentTarget.getBoundingClientRect();\n const clickX = e.clientX - rect.left;\n const pct = Math.max(0, Math.min(1, clickX / rect.width));\n handleSeek(pct * effectiveDuration);\n }}\n style={{\n flex: 1, height: 16,\n position: 'relative',\n display: 'flex', alignItems: 'center',\n cursor: 'pointer',\n }}\n >\n {/* Background track */}\n <div style={{\n position: 'absolute', left: 0, right: 0,\n height: 4, borderRadius: 2,\n background: 'var(--rail-surface-2, #E3E1D7)',\n pointerEvents: 'none',\n }} />\n {/* Played portion */}\n <div style={{\n position: 'absolute', left: 0, top: '50%',\n transform: 'translateY(-50%)',\n width: `${progress}%`,\n height: 4, borderRadius: 2,\n background: 'var(--Green-Primary, #00925F)',\n pointerEvents: 'none',\n }} />\n {/* Scrubber handle */}\n <svg\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{\n position: 'absolute',\n left: `${progress}%`,\n top: '50%',\n transform: 'translate(-50%, -50%)',\n pointerEvents: 'none',\n }}\n >\n <path\n d=\"M7.875 1C11.6572 1 14.75 4.1191 14.75 8C14.75 11.8809 11.6572 15 7.875 15C4.09284 15 1 11.8809 1 8C1 4.1191 4.09284 1 7.875 1Z\"\n fill=\"#FFF\"\n stroke=\"#00925F\"\n strokeWidth=\"2\"\n />\n </svg>\n </div>\n </div>\n\n {/* ── Speaker timeline bars + playback indicator ── */}\n <div style={{ position: 'relative', paddingBottom: 30, cursor: 'pointer' }}>\n {[agentName, customerName].map((speaker, rowIdx) => {\n const isAgent = rowIdx === 0;\n // Build segments from real timelineSegments or fall back to demo\n const speakerSegments = timelineSegments?.length\n ? timelineSegments\n .filter(s => isAgent ? s.actor === agentName : s.actor === customerName)\n .map(s => ({\n start: effectiveDuration > 0 ? s.startTime / effectiveDuration : 0,\n end: effectiveDuration > 0 ? s.endTime / effectiveDuration : 0,\n }))\n : (DEMO_SEGMENTS[isAgent ? 'Agent' : 'Customer'] || []);\n\n return (\n <div key={speaker} style={{\n display: 'flex', alignItems: 'center', gap: 8,\n height: 20,\n marginBottom: rowIdx === 0 ? 4 : 0,\n }}>\n <span style={{\n fontSize: 13, fontWeight: 400,\n color: 'var(--Grey-Muted, #808183)',\n fontFamily: 'var(--font-sans)',\n lineHeight: 1.2,\n minWidth: 60,\n }}>\n {speaker}\n </span>\n <div\n onClick={(e) => {\n const rect = e.currentTarget.getBoundingClientRect();\n const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n handleSeek(pct * effectiveDuration);\n }}\n style={{\n flex: 1, height: 6,\n position: 'relative', borderRadius: 3,\n cursor: 'pointer',\n }}\n >\n {/* Thin baseline */}\n <div style={{\n position: 'absolute', left: 0, right: 0,\n top: '50%', transform: 'translateY(-50%)',\n height: 4, borderRadius: 2,\n background: 'var(--rail-surface-2, #E3E1D7)',\n }} />\n {/* Speech segments */}\n {speakerSegments.map((seg, i) => (\n <div key={i} style={{\n position: 'absolute',\n left: `${seg.start * 100}%`,\n width: `${(seg.end - seg.start) * 100}%`,\n top: 0, bottom: 0, borderRadius: 3,\n background: isAgent\n ? 'var(--Grey-Strong, #2E3236)'\n : 'var(--Grey-Muted, #808183)',\n }} />\n ))}\n </div>\n </div>\n );\n })}\n\n {/* ── Playback position: dotted line + time tooltip ── */}\n <div style={{\n position: 'absolute',\n left: 68, /* 60 label + 8 gap */\n right: 0,\n top: 0,\n bottom: 0,\n pointerEvents: 'none',\n }}>\n {/* Dotted vertical line */}\n <div style={{\n position: 'absolute',\n left: `${progress}%`,\n top: 0,\n height: 44,\n transform: 'translateX(-50%)',\n borderLeft: '1.5px dashed var(--Grey-Muted, #808183)',\n opacity: 0.5,\n }} />\n\n {/* Time tooltip */}\n <div style={{\n position: 'absolute',\n left: `${progress}%`,\n bottom: 0,\n transform: 'translateX(-50%)',\n background: 'var(--Grey-Strong, #2E3236)',\n color: 'var(--Grey-White, #FFF)',\n fontSize: 14, fontWeight: 600,\n lineHeight: 1.2,\n padding: '4px 6px',\n borderRadius: 4,\n whiteSpace: 'nowrap',\n }}>\n {fmtTime(displayTime)}\n </div>\n </div>\n </div>\n\n {/* Hidden audio element — only for self-managed mode */}\n {selfManaged && (\n <audio ref={internalAudioRef} preload=\"auto\" style={{ display: 'none' }}>\n <source src={audioUrl} type=\"audio/mpeg\" />\n </audio>\n )}\n {/* Hidden audio element — for parent-managed mode */}\n {parentManaged && audioUrl && (\n <audio ref={externalAudioRef} preload=\"auto\" style={{ display: 'none' }}>\n <source src={audioUrl} type=\"audio/mpeg\" />\n </audio>\n )}\n </div>\n </div>\n\n {/* ════════════════════════════════════════\n TRANSCRIPT SECTION\n ════════════════════════════════════════ */}\n {/* Figma: Frame 49, vertical, gap: 16 */}\n <div style={{\n width: '100%',\n display: 'flex', flexDirection: 'column', gap: 16,\n }}>\n {/* ── Header: Transcript ── */}\n <div style={{\n borderBottom: '1px solid var(--Grey-absent, #D9D9D9)',\n paddingBottom: 16,\n }}>\n <span style={{\n fontSize: 14, fontWeight: 400,\n color: 'var(--Grey-Strong, #2E3236)',\n lineHeight: 1.2,\n }}>\n Transcript\n </span>\n </div>\n\n {/* ── Cards — V4 style for both real and demo data ── */}\n <div id=\"transcript-container\" ref={scrollRef} style={{\n display: 'flex', flexDirection: 'column',\n maxHeight: 600, overflowY: 'auto',\n }}>\n {(turns || DEMO_TRANSCRIPT.map((card) => ({\n actor: card.speaker,\n actorType: card.type,\n text: card.text,\n timeRange: card.time,\n }))).map((card, i) => {\n const isRealData = !!turns;\n const isHighlightedByTranscript = highlightedTranscriptIdx === i;\n const isPlaying = isRealData\n ? (activePlaying && activeTurnIndex === i)\n : (i === activeDemoIdx && activePlaying);\n const isActive = isPlaying || isHighlightedByTranscript;\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 {isPlaying && (\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 {isPlaying ? (\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","highlightedTranscriptIdx","setHighlightedTranscriptIdx","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","container","card","_a","containerTop","offset","msgs","startSec","handleDemoTurnPlayPause","formatTimeRange","startMs","endMs","fmt","ms","minutes","turns","_b","obs","el","activeIdx","effectiveTime","effectiveDuration","progress","displayTime","jsxs","jsx","FilePlay","RotateCcw","Pause","Play","RotateCw","ChevronDown","speed","rect","clickX","pct","speaker","rowIdx","isAgent","speakerSegments","e","seg","isRealData","isHighlightedByTranscript","isPlaying","isActive","isCustomer","Fragment","AudioLines","PauseCircle","PlayCircle"],"mappings":"+FAQA,SAASA,GAAQC,EAAS,CACxB,MAAMC,EAAI,KAAK,MAAMD,EAAU,EAAE,EAC3BE,EAAI,KAAK,MAAMF,EAAU,EAAE,EAC1B,MAAA,GAAGC,CAAC,IAAIC,EAAE,WAAW,SAAS,EAAG,GAAG,CAAC,EAC9C,CAGA,MAAMC,GAAgB,CACpB,MAAO,CACL,CAAE,MAAO,EAAG,IAAK,GAAK,EACtB,CAAE,MAAO,IAAM,IAAK,GAAK,EACzB,CAAE,MAAO,IAAM,IAAK,GAAK,EACzB,CAAE,MAAO,IAAM,IAAK,GAAK,EACzB,CAAE,MAAO,IAAM,IAAK,GAAK,EACzB,CAAE,MAAO,IAAM,IAAK,GAAK,EACzB,CAAE,MAAO,IAAM,IAAK,CAAE,CACxB,EACA,SAAU,CACR,CAAE,MAAO,GAAK,IAAK,GAAK,EACxB,CAAE,MAAO,IAAM,IAAK,GAAK,EACzB,CAAE,MAAO,IAAM,IAAK,GAAK,EACzB,CAAE,MAAO,GAAK,IAAK,GAAK,EACxB,CAAE,MAAO,IAAM,IAAK,EAAK,CAC3B,CACF,EAEMC,EAAkB,CACtB,CAAE,QAAS,QAAS,KAAM,QAAS,KAAM,QAAS,KAAM,6EAA8E,EACtI,CAAE,QAAS,WAAY,KAAM,WAAY,KAAM,QAAS,KAAM,gDAAiD,EAC/G,CAAE,QAAS,QAAS,KAAM,QAAS,KAAM,QAAS,KAAM,qBAAsB,EAC9E,CAAE,QAAS,WAAY,KAAM,WAAY,KAAM,QAAS,KAAM,+aAAgb,EAC9e,CAAE,QAAS,QAAS,KAAM,QAAS,KAAM,QAAS,KAAM,oEAAqE,CAC/H,EAEMC,GAAgB,CAAC,EAAG,KAAM,IAAK,CAAC,EAEtC,SAASC,GAAaC,EAAS,CAC7B,GAAI,CAACA,EAAgB,MAAA,GACrB,MAAMC,EAAQD,EAAQ,MAAM,GAAG,EAAE,IAAI,MAAM,EAC3C,OAAQC,EAAM,CAAC,GAAK,GAAK,IAAMA,EAAM,CAAC,GAAK,EAC7C,CAGM,MAAAC,GAA8BC,EAAAA,WAAW,SAAqC,CAClF,SAAAC,EACA,iBAAAC,EAAmB,CAAC,EACpB,gBAAAC,EAAkB,EAElB,mBAAoBC,GACpB,gBAAiBC,EACjB,aAAcC,GACd,OAAQC,EACR,aAAcC,EACd,WAAYC,EACZ,cAAeC,EACf,kBAAmBC,EACnB,SAAUC,EAEV,UAAAC,EAAY,QACZ,aAAAC,EAAe,WAEf,WAAAC,EACA,iBAAAC,OAAuB,IACvB,gBAAAC,EACA,gBAAAC,GAAkB,EAClB,iBAAAC,GAAmB,CAAC,EACpB,mBAAAC,EACA,gBAAAC,CACF,EAAGC,GAAK,QACA,MAAAC,EAAYC,SAAO,IAAI,EACvBC,EAAmBD,SAAO,IAAI,EAC9BE,EAAeF,SAAO,IAAI,EAG1B,CAACG,EAAiBC,CAAkB,EAAIC,WAAS,EAAK,EACtD,CAACC,EAAqBC,CAAsB,EAAIF,WAAS,CAAC,EAC1D,CAACG,GAAkBC,EAAmB,EAAIJ,WAAS,CAAC,EACpD,CAACK,GAAcC,EAAe,EAAIN,WAAS,CAAC,EAG5C,CAACO,EAAcC,EAAe,EAAIR,WAAS,IAAI,EAC/C,CAACS,GAAUC,EAAW,EAAIV,WAAS,CAAC,EACpC,CAACW,GAAaC,CAAc,EAAIZ,WAAS,EAAK,EAC9C,CAACa,GAAeC,CAAgB,EAAId,WAAS,EAAK,EAClD,CAACe,EAAeC,CAAgB,EAAIhB,WAASX,EAAe,EAC5D,CAAC4B,GAA0BC,EAA2B,EAAIlB,WAAS,IAAI,EAGvEmB,EAAgB,CAAC,CAACpC,EAClBqC,EAAS,CAAChD,EACViD,EAAcjD,GAAY,CAAC+C,EAG3BG,EAAgBF,EAAST,GAAeQ,EAAiB3C,GAAmB,GAASsB,EACrFyB,GAAoBH,EAAUb,GAAgB,EAAMY,EAAiB5C,IAAuB,EAAK0B,EACjGuB,EAAaJ,EAASX,GAAYU,EAAiB1C,IAAgB,EAAK4B,GACxEoB,EAAiBL,EAAU9C,GAAmB,IAAQ6C,EAAgB7C,EAAmB6B,IAAoB7B,GAAmB,EAIhIoD,EAAoBC,EAAAA,YAAY,IAAM,CAC1C,MAAMC,EAAO,IAAM,CACjB,MAAMC,EAAQjC,EAAiB,QAC3BiC,GAAO3B,EAAuB2B,EAAM,WAAW,EACtChC,EAAA,QAAU,sBAAsB+B,CAAI,CAAA,EAEtC/B,EAAA,QAAU,sBAAsB+B,CAAI,CACnD,EAAG,CAAE,CAAA,EAECE,EAAmBH,EAAAA,YAAY,IAAM,CACrC9B,EAAa,UACf,qBAAqBA,EAAa,OAAO,EACzCA,EAAa,QAAU,KAE3B,EAAG,CAAE,CAAA,EAGLkC,EAAAA,UAAU,IAAM,IAAMD,EAAoB,EAAA,CAACA,CAAgB,CAAC,EAG5DC,EAAAA,UAAU,IAAM,CACd,GAAI,CAACV,EAAa,OAClB,MAAMQ,EAAQjC,EAAiB,QAC/B,GAAI,CAACiC,EAAO,OACZ,MAAMG,EAAW,IAAM5B,GAAoByB,EAAM,UAAY,CAAC,EACxDI,EAAU,IAAM,CAAElC,EAAmB,EAAK,EAAoB+B,GAAA,EAC9D,OAAAD,EAAA,iBAAiB,iBAAkBG,CAAQ,EAC3CH,EAAA,iBAAiB,QAASI,CAAO,EAChC,IAAM,CACLJ,EAAA,oBAAoB,iBAAkBG,CAAQ,EAC9CH,EAAA,oBAAoB,QAASI,CAAO,CAAA,CAC5C,EACC,CAACZ,EAAaS,CAAgB,CAAC,EAG5B,MAAAI,EAAoBC,GAAY,CACpC,QAASC,EAAIvE,EAAgB,OAAS,EAAGuE,GAAK,EAAGA,IAAK,CACpD,MAAMC,EAAWtE,GAAaF,EAAgBuE,CAAC,EAAE,IAAI,EACrD,GAAID,GAAWE,EAAiB,OAAAD,CAClC,CACO,MAAA,EAAA,EAIHE,EAAcC,GAAgB,CAE5B,MAAAC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAID,EADzBd,GAAkB,GACuB,CAAC,EAEtD,GAAIJ,EAAa,CACf,MAAMQ,EAAQjC,EAAiB,QAC3BiC,IAAOA,EAAM,YAAcW,GAC/BtC,EAAuBsC,CAAO,CAAA,MACrBrB,GAAiBzC,GAC1BA,EAAe8D,CAAO,EAIxBhC,GAAgBgC,CAAO,EACNxB,EAAAkB,EAAiBM,CAAO,CAAC,CAAA,EAGtCC,GAAmB,IAAM,CAC7B,GAAIpB,EAAa,CACf,MAAMQ,EAAQjC,EAAiB,QAC/B,GAAI,CAACiC,EAAO,OACR/B,GACF+B,EAAM,MAAM,EACKC,IACjB/B,EAAmB,EAAK,GAElB8B,EAAA,OAAO,KAAK,IAAM,CACtB9B,EAAmB,EAAI,EACL2B,GAAA,CACnB,EAAE,MAAM,IAAM,CAAA,CAAE,CACnB,MACSP,GAAiBxC,EACLA,IAGNiC,EAAC8B,GAAS,CAACA,CAAI,CAChC,EAGIC,GAAiB,IAAM,CACvBxB,GAAiBvC,EAAuCA,IAG1D0D,EAAW,KAAK,IAAI,GADRjB,EAAcpB,EAAuBM,GAAgB,GACpC,EAAE,CAAC,CAClC,EAGIqC,GAAoB,IAAM,CAC1BzB,GAAiBtC,EAA6CA,IAIhEyD,EAAW,KAAK,IADJb,GAAkB,KADlBJ,EAAcpB,EAAuBM,GAAgB,GAElC,EAAE,CAAC,CACpC,EAGIsC,GAAiBC,GAAS,CAC9B,GAAIzB,EAAa,CACf,MAAMQ,EAAQjC,EAAiB,QAC3BiC,IAAOA,EAAM,aAAeiB,GAChCxC,GAAgBwC,CAAI,CAAA,MACX3B,GAAiBrC,GAC1BA,EAA0BgE,CAAI,EAEhCpC,GAAYoC,CAAI,EAChBhC,EAAiB,EAAK,CAAA,EAIxBiC,EAAA,oBAAoBtD,GAAK,KAAO,CAC9B,OAAS0C,GAAY,CAEnB,GADAG,EAAWH,CAAO,EACdhB,EAGE,CAAC3C,GAAmBG,GACDA,YAEd0C,EAAa,CACtB,MAAMQ,EAAQjC,EAAiB,QAC3BiC,GACIA,EAAA,OAAO,KAAK,IAAM,CACtB9B,EAAmB,EAAI,EACL2B,GAAA,CACnB,EAAE,MAAM,IAAM,CAAA,CAAE,CACnB,MAEAd,EAAe,EAAI,EAEf,MAAAoC,EAAMd,EAAiBC,CAAO,EACpCnB,EAAiBgC,CAAG,EACpB,WAAW,IAAM,OACf,MAAMC,EAAYvD,EAAU,QACtBwD,GAAOC,EAAAF,GAAA,YAAAA,EAAW,WAAX,YAAAE,EAAsBH,GACnC,GAAIC,GAAaC,EAAM,CACf,MAAAE,EAAeH,EAAU,sBAAA,EAAwB,IAEjDI,GADUH,EAAK,sBAAA,EAAwB,IACpBE,EAAeH,EAAU,UAClDA,EAAU,SAAS,CAAE,IAAKI,GAAS,GAAI,SAAU,SAAU,CAC7D,GACC,EAAE,CACP,EAEA,mBAAqBlB,GAAY,OAC3B,IAAAa,EAEA,IAAAG,EAAAjE,GAAA,YAAAA,EAAY,WAAZ,MAAAiE,EAAsB,OAAQ,CAChC,MAAMG,EAAOpE,EAAW,SAClB8D,EAAA,EACN,QAAS,EAAIM,EAAK,OAAS,EAAG,GAAK,EAAG,IAAK,CACnC,MAAAC,GAAYD,EAAK,CAAC,EAAE,OAASA,EAAK,CAAC,EAAE,UAAY,GAAK,IAC5D,GAAInB,GAAWoB,EAAU,CAAQP,EAAA,EAAG,KAAO,CAC7C,CAAA,MAEAA,EAAMd,EAAiBC,CAAO,EAEhCnB,EAAiBgC,CAAG,EACpB9B,GAA4B8B,CAAG,EAC/B,WAAW,IAAM,OACf,MAAMC,EAAYvD,EAAU,QACtBwD,GAAOC,EAAAF,GAAA,YAAAA,EAAW,WAAX,YAAAE,EAAsBH,GACnC,GAAIC,GAAaC,EAAM,CACf,MAAAE,EAAeH,EAAU,sBAAA,EAAwB,IAEjDI,GADUH,EAAK,sBAAA,EAAwB,IACpBE,EAAeH,EAAU,UAClDA,EAAU,SAAS,CAAE,IAAKI,GAAS,GAAI,SAAU,SAAU,CAC7D,GACC,EAAE,CACP,CACA,EAAA,EAGI,MAAAG,GAA2BR,GAAQ,OACnC,GAAAjC,IAAkBiC,GAAO1B,EAAe,CAC1C,GAAID,EAAa,CACf,MAAMQ,EAAQjC,EAAiB,QAC3BiC,GAAOA,EAAM,MAAM,EACNC,IACjB/B,EAAmB,EAAK,CAC1B,CACAa,EAAe,EAAK,CAAA,KACf,CACL,MAAMyB,EAAWtE,IAAaoF,EAAAtF,EAAgBmF,CAAG,IAAnB,YAAAG,EAAsB,IAAI,EAGxD,GAFAnC,EAAiBgC,CAAG,EACpBV,EAAWD,CAAQ,EACfhB,EAAa,CACf,MAAMQ,EAAQjC,EAAiB,QAC3BiC,IACFA,EAAM,YAAcQ,EACdR,EAAA,OAAO,KAAK,IAAM,CACtB9B,EAAmB,EAAI,EACL2B,GAAA,CACnB,EAAE,MAAM,IAAM,CAAA,CAAE,EAErB,CACAd,EAAe,EAAI,CACrB,CAAA,EAII6C,GAAkB,CAACC,EAASC,IAAU,CAC1C,GAAID,GAAW,KAAa,OACtB,MAAAE,EAAOC,GAAO,CAClB,MAAMC,EAAU,KAAK,MAAMD,EAAK,GAAK,EAC/BpG,EAAU,KAAK,MAAOoG,EAAK,IAAS,GAAI,EAC9C,MAAO,GAAGC,EAAQ,SAAS,EAAE,SAAS,EAAG,GAAG,CAAC,IAAIrG,EAAQ,SAAS,EAAE,SAAS,EAAG,GAAG,CAAC,EAAA,EAEtF,MAAO,GAAGmG,EAAIF,CAAO,CAAC,IAASC,GAAS,KAAOC,EAAID,CAAK,EAAIC,EAAIF,CAAO,CAAC,EAAA,EAGpEK,GAAQZ,GAAAjE,GAAA,YAAAA,EAAY,WAAZ,MAAAiE,GAAsB,OAChCjE,EAAW,SAAS,IAAI,CAACxB,EAAG0E,IAAO,SAAA,OACjC,MAAO1E,EAAE,QAAU,UAAWyF,EAAAjE,EAAW,YAAX,YAAAiE,EAAsB,QAAS,UAAYa,EAAA9E,EAAW,YAAX,YAAA8E,EAAsB,WAAY,WAC3G,UAAWtG,EAAE,QAAU,QAAU,QAAU,WAC3C,KAAMA,EAAE,MAAQ,GAChB,UAAW+F,GAAgB/F,EAAE,OAASA,EAAE,SAAUA,EAAE,KAAOA,EAAE,MAAM,EACnE,cAAeyB,GAAiB,IAAIiD,CAAC,EACrC,eAAgBd,GAAiBlC,IAAoBgD,EAChD1E,EAAE,QAAU,QAAU,sBAAwB,wBAC/C,OACJ,cAAe4B,GAAiB8C,CAAC,GAAK,CAAA,GAAI,IAAK6B,IAAS,CACtD,GAAGA,EACH,QAAS,IAAM,CACQ1E,GAAA,MAAAA,EAACmD,GAAS,IAAI,IAAI,CAAC,GAAGA,EAAMuB,EAAI,SAAS,CAAC,GAC/D,WAAW,IAAM,CACf,MAAMC,EAAK,SAAS,eAAe,UAAUD,EAAI,SAAS,EAAE,EACxDC,GAAIA,EAAG,eAAe,CAAE,SAAU,SAAU,MAAO,UAAW,GACjE,GAAG,CACR,CAAA,EACA,CAAA,EACF,EACF,KAGJnC,EAAAA,UAAU,IAAM,OACd,GAAI,CAACT,EAAe,OACd,MAAA6C,EAAYJ,EAAQ3E,EAAkB2B,EACxC,GAAAoD,GAAa,MAAQA,EAAY,EAAG,OACxC,MAAMlB,EAAYvD,EAAU,QAC5B,GAAI,CAACuD,EAAW,OACV,MAAAC,GAAOC,EAAAF,EAAU,WAAV,YAAAE,EAAqBgB,GAClC,GAAIjB,EAAM,CACF,MAAAE,EAAeH,EAAU,sBAAA,EAAwB,IAEjDI,EADUH,EAAK,sBAAA,EAAwB,IACpBE,EAAeH,EAAU,UAClDA,EAAU,SAAS,CAAE,IAAKI,EAAS,GAAI,SAAU,SAAU,CAC7D,GACC,CAACjE,EAAiB2B,EAAeO,EAAeyC,CAAK,CAAC,EAGnD,MAAAK,EAAgBhD,EAAUb,GAAgB,EAAKgB,GAC/C8C,EAAoB5C,GAAkB,IACtC6C,EAAWD,EAAoB,EAAKD,EAAgBC,EAAqB,IAAM,EAC/EE,GAAc,KAAK,MAAMH,CAAa,EAG1C,OAAAI,EAAA,KAAC,OAAI,MAAO,CACV,QAAS,OACT,cAAe,SACf,IAAK,EAGL,EAAA,SAAA,CAAAA,OAAC,OAAI,MAAO,CACV,QAAS,OACT,WAAY,SACZ,IAAK,GACL,MAAO,MAEP,EAAA,SAAA,CAAAC,MAAC,OAAI,MAAO,CACV,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,MAAO,GACP,OAAQ,GACR,aAAc,KACd,WAAY,gCACZ,WAAY,CACd,EACE,eAACC,EAAS,SAAA,CAAA,KAAM,GAAI,MAAM,UAAU,YAAa,GAAA,CAAK,CACxD,CAAA,EACAD,MAAC,QAAK,MAAO,CACX,SAAU,GACV,WAAY,IACZ,MAAO,6BAAA,EACN,SAEH,YAAA,CAAA,EACF,EAGAD,OAAC,OAAI,MAAO,CACV,QAAS,OACT,QAAS,GACT,cAAe,SACf,WAAY,aACZ,IAAK,GACL,aAAc,EACd,OAAQ,wCACR,WAAY,yBAMZ,EAAA,SAAA,CAACA,EAAAA,KAAA,MAAA,CAAI,MAAO,CAAE,MAAO,OAAQ,QAAS,OAAQ,cAAe,SAAU,IAAK,EAAA,EAG1E,SAAA,CAACA,EAAAA,KAAA,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,WAAY,SAAU,eAAgB,gBAAiB,IAAK,EAAA,EAC3F,SAAA,CAAAA,OAAC,QAAK,MAAO,CACX,SAAU,GAAI,WAAY,IAC1B,MAAO,8BACP,WAAY,GAEX,EAAA,SAAA,CAAAxF,EAAU,MAAIC,CAAA,EACjB,EAGAuF,EAAAA,KAAC,MAAI,CAAA,MAAO,CAAE,QAAS,OAAQ,WAAY,SAAU,IAAK,EAAA,EAExD,SAAA,CAAAC,EAAA,IAAC,OAAK,CAAA,MAAO,CAAE,SAAU,GAAI,WAAY,IAAK,MAAO,6BAA8B,WAAY,GAAI,EAAG,SAAE,KAAA,EACxGA,EAAAA,IAAC,SAAO,CAAA,QAAS9B,GAAgB,MAAO,CAAE,WAAY,OAAQ,OAAQ,OAAQ,OAAQ,UAAW,QAAS,EAAG,QAAS,OAAQ,WAAY,QAAS,EACjJ,SAAC8B,EAAAA,IAAAE,EAAAA,UAAA,CAAU,KAAM,GAAI,MAAM,UAAU,YAAa,GAAA,CAAK,CACzD,CAAA,EAGCF,EAAAA,IAAA,SAAA,CAAO,QAAShC,GAAkB,MAAO,CACxC,WAAY,8BACZ,OAAQ,OAAQ,OAAQ,UACxB,MAAO,GAAI,OAAQ,GAAI,aAAc,GACrC,QAAS,EACT,QAAS,OAAQ,WAAY,SAAU,eAAgB,QACzD,EACG,SACGnB,EAAAmD,MAACG,EAAAA,MAAM,CAAA,KAAM,GAAI,MAAM,OAAO,KAAK,MAAO,CAAA,EACzCH,EAAAA,IAAAI,EAAAA,KAAA,CAAK,KAAM,GAAI,MAAM,OAAO,KAAK,OAAO,YAAa,IAAK,MAAO,CAAE,WAAY,CAAE,CAAA,CAAG,CAE3F,CAAA,EAGAJ,EAAAA,IAAC,SAAO,CAAA,QAAS7B,GAAmB,MAAO,CAAE,WAAY,OAAQ,OAAQ,OAAQ,OAAQ,UAAW,QAAS,EAAG,QAAS,OAAQ,WAAY,QAAS,EACpJ,SAAC6B,EAAAA,IAAAK,EAAAA,SAAA,CAAS,KAAM,GAAI,MAAM,UAAU,YAAa,GAAA,CAAK,CACxD,CAAA,EACCL,EAAA,IAAA,OAAA,CAAK,MAAO,CAAE,SAAU,GAAI,WAAY,IAAK,MAAO,6BAA8B,WAAY,GAAA,EAAO,SAAE,KAAA,CAAA,EAC1G,SAGC,MAAI,CAAA,MAAO,CAAE,SAAU,UACtB,EAAA,SAAA,CAAAD,EAAA,KAAC,SAAA,CACC,QAAS,IAAM1D,EAAkB4B,GAAS,CAACA,CAAI,EAC/C,MAAO,CACL,WAAY,0BACZ,OAAQ,wCACR,aAAc,GACd,QAAS,eACT,OAAQ,GACR,SAAU,GACV,OAAQ,UACR,SAAU,GAAI,WAAY,IAC1B,MAAO,8BACP,WAAY,mBACZ,WAAY,IACZ,QAAS,OAAQ,WAAY,SAAU,eAAgB,SAAU,IAAK,CACxE,EAEC,SAAA,CAAAlB,EAAW,IACXiD,EAAA,IAAAM,EAAA,YAAA,CAAY,KAAM,GAAI,MAAM,UAAU,CAAA,CAAA,CACzC,EAEClE,IACE4D,EAAA,IAAA,MAAA,CAAI,MAAO,CACV,SAAU,WACV,IAAK,OACL,MAAO,EACP,UAAW,EACX,WAAY,0BACZ,OAAQ,wCACR,aAAc,EACd,UAAW,6BACX,OAAQ,GACR,SAAU,SACV,SAAU,EAET,EAAA,SAAA3G,GAAc,IAAKkH,GAClBR,EAAA,KAAC,SAAA,CAEC,QAAS,IAAM3B,GAAcmC,CAAK,EAClC,MAAO,CACL,QAAS,QACT,MAAO,OACP,QAAS,WACT,OAAQ,OACR,WAAYxD,IAAewD,EAAQ,gCAAkC,0BACrE,OAAQ,UACR,SAAU,GACV,WAAYxD,IAAewD,EAAQ,IAAM,IACzC,MAAO,8BACP,WAAY,mBACZ,UAAW,MACb,EAEC,SAAA,CAAAA,EAAM,GAAA,CAAA,EAhBFA,CAkBR,CAAA,EACH,CAAA,EAEJ,CAAA,EACF,EAGAR,EAAAA,KAAC,MAAI,CAAA,MAAO,CAAE,QAAS,OAAQ,cAAe,SAAU,IAAK,EAAA,EAE3D,SAAA,CAACA,EAAAA,KAAA,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,WAAY,SAAU,IAAK,CAAA,EACxD,SAAA,CAAAC,MAAC,QAAK,MAAO,CACX,SAAU,GAAI,WAAY,IAC1B,MAAO,8BACP,WAAY,mBACZ,WAAY,IACZ,SAAU,EACZ,EACG,SAAQjH,GAAA6G,CAAiB,EAC5B,EACAG,EAAA,KAAC,MAAA,CACC,QAAU,GAAM,CACR,MAAAS,EAAO,EAAE,cAAc,sBAAsB,EAC7CC,EAAS,EAAE,QAAUD,EAAK,KAC1BE,EAAM,KAAK,IAAI,EAAG,KAAK,IAAI,EAAGD,EAASD,EAAK,KAAK,CAAC,EACxD3C,EAAW6C,EAAMd,CAAiB,CACpC,EACA,MAAO,CACL,KAAM,EAAG,OAAQ,GACjB,SAAU,WACV,QAAS,OAAQ,WAAY,SAC7B,OAAQ,SACV,EAGA,SAAA,CAAAI,MAAC,OAAI,MAAO,CACV,SAAU,WAAY,KAAM,EAAG,MAAO,EACtC,OAAQ,EAAG,aAAc,EACzB,WAAY,iCACZ,cAAe,MAAA,EACd,EAEHA,MAAC,OAAI,MAAO,CACV,SAAU,WAAY,KAAM,EAAG,IAAK,MACpC,UAAW,mBACX,MAAO,GAAGH,CAAQ,IAClB,OAAQ,EAAG,aAAc,EACzB,WAAY,gCACZ,cAAe,MAAA,EACd,EAEHG,EAAA,IAAC,MAAA,CACC,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAChD,MAAM,6BACN,MAAO,CACL,SAAU,WACV,KAAM,GAAGH,CAAQ,IACjB,IAAK,MACL,UAAW,wBACX,cAAe,MACjB,EAEA,SAAAG,EAAA,IAAC,OAAA,CACC,EAAE,iIACF,KAAK,OACL,OAAO,UACP,YAAY,GAAA,CACd,CAAA,CACF,CAAA,CAAA,CACF,CAAA,EACF,EAGAD,EAAAA,KAAC,MAAI,CAAA,MAAO,CAAE,SAAU,WAAY,cAAe,GAAI,OAAQ,SAAA,EAC5D,SAAA,CAAA,CAACxF,EAAWC,CAAY,EAAE,IAAI,CAACmG,EAASC,IAAW,CAClD,MAAMC,EAAUD,IAAW,EAErBE,EAAkBlH,GAAA,MAAAA,EAAkB,OACtCA,EACG,OAAYV,GAAA2H,EAAU3H,EAAE,QAAUqB,EAAYrB,EAAE,QAAUsB,CAAY,EACtE,IAAUtB,IAAA,CACT,MAAO0G,EAAoB,EAAI1G,EAAE,UAAY0G,EAAoB,EACjE,IAAKA,EAAoB,EAAI1G,EAAE,QAAU0G,EAAoB,CAAA,EAC7D,EACHzG,GAAc0H,EAAU,QAAU,UAAU,GAAK,GAGpD,OAAAd,EAAA,KAAC,OAAkB,MAAO,CACxB,QAAS,OAAQ,WAAY,SAAU,IAAK,EAC5C,OAAQ,GACR,aAAca,IAAW,EAAI,EAAI,CAEjC,EAAA,SAAA,CAAAZ,MAAC,QAAK,MAAO,CACX,SAAU,GAAI,WAAY,IAC1B,MAAO,6BACP,WAAY,mBACZ,WAAY,IACZ,SAAU,EAAA,EAET,SACHW,EAAA,EACAZ,EAAA,KAAC,MAAA,CACC,QAAUgB,GAAM,CACR,MAAAP,EAAOO,EAAE,cAAc,sBAAsB,EAC7CL,EAAM,KAAK,IAAI,EAAG,KAAK,IAAI,GAAIK,EAAE,QAAUP,EAAK,MAAQA,EAAK,KAAK,CAAC,EACzE3C,EAAW6C,EAAMd,CAAiB,CACpC,EACA,MAAO,CACL,KAAM,EAAG,OAAQ,EACjB,SAAU,WAAY,aAAc,EACpC,OAAQ,SACV,EAGA,SAAA,CAAAI,MAAC,OAAI,MAAO,CACV,SAAU,WAAY,KAAM,EAAG,MAAO,EACtC,IAAK,MAAO,UAAW,mBACvB,OAAQ,EAAG,aAAc,EACzB,WAAY,gCAAA,EACX,EAEFc,EAAgB,IAAI,CAACE,EAAKrD,IACzBqC,MAAC,OAAY,MAAO,CAClB,SAAU,WACV,KAAM,GAAGgB,EAAI,MAAQ,GAAG,IACxB,MAAO,IAAIA,EAAI,IAAMA,EAAI,OAAS,GAAG,IACrC,IAAK,EAAG,OAAQ,EAAG,aAAc,EACjC,WAAYH,EACR,8BACA,4BAAA,CACN,EARUlD,CAQP,CACJ,CAAA,CAAA,CACH,CAAA,CAAA,EA7CQgD,CA8CV,CAAA,CAEH,EAGDZ,OAAC,OAAI,MAAO,CACV,SAAU,WACV,KAAM,GACN,MAAO,EACP,IAAK,EACL,OAAQ,EACR,cAAe,MAGf,EAAA,SAAA,CAAAC,MAAC,OAAI,MAAO,CACV,SAAU,WACV,KAAM,GAAGH,CAAQ,IACjB,IAAK,EACL,OAAQ,GACR,UAAW,mBACX,WAAY,0CACZ,QAAS,EAAA,EACR,EAGHG,MAAC,OAAI,MAAO,CACV,SAAU,WACV,KAAM,GAAGH,CAAQ,IACjB,OAAQ,EACR,UAAW,mBACX,WAAY,8BACZ,MAAO,0BACP,SAAU,GAAI,WAAY,IAC1B,WAAY,IACZ,QAAS,UACT,aAAc,EACd,WAAY,QACd,EACG,SAAQ9G,GAAA+G,EAAW,EACtB,CAAA,EACF,CAAA,EACF,EAGClD,GACEoD,EAAAA,IAAA,QAAA,CAAM,IAAK7E,EAAkB,QAAQ,OAAO,MAAO,CAAE,QAAS,MAAA,EAC7D,SAAC6E,MAAA,SAAA,CAAO,IAAKrG,EAAU,KAAK,YAAa,CAAA,EAC3C,EAGD+C,GAAiB/C,GAChBqG,EAAA,IAAC,SAAM,IAAK1F,EAAkB,QAAQ,OAAO,MAAO,CAAE,QAAS,QAC7D,SAAC0F,EAAA,IAAA,SAAA,CAAO,IAAKrG,EAAU,KAAK,YAAa,CAAA,EAC3C,CAAA,EAEJ,CAAA,EACF,EAMAoG,OAAC,OAAI,MAAO,CACV,MAAO,OACP,QAAS,OAAQ,cAAe,SAAU,IAAK,EAG/C,EAAA,SAAA,CAAAC,MAAC,OAAI,MAAO,CACV,aAAc,wCACd,cAAe,EACjB,EACE,SAACA,EAAAA,IAAA,OAAA,CAAK,MAAO,CACX,SAAU,GAAI,WAAY,IAC1B,MAAO,8BACP,WAAY,GAAA,EACX,qBAEH,CAAA,EACF,QAGC,MAAI,CAAA,GAAG,uBAAuB,IAAK/E,EAAW,MAAO,CACpD,QAAS,OAAQ,cAAe,SAChC,UAAW,IAAK,UAAW,MAAA,EAEzB,UAAAqE,GAASlG,EAAgB,IAAKqF,IAAU,CACxC,MAAOA,EAAK,QACZ,UAAWA,EAAK,KAChB,KAAMA,EAAK,KACX,UAAWA,EAAK,IAChB,EAAA,GAAG,IAAI,CAACA,EAAMd,IAAM,CACd,MAAAsD,EAAa,CAAC,CAAC3B,EACf4B,EAA4B1E,KAA6BmB,EACzDwD,EAAYF,EACbpE,GAAiBlC,IAAoBgD,EACrCA,IAAMrB,GAAiBO,EACtBuE,EAAWD,GAAaD,EACxBG,GAAc5C,EAAK,WAAaA,EAAK,QAAU,WAGnD,OAAAsB,EAAA,KAAC,OAAY,MAAO,CAClB,QAAS,OACT,QAAS,GACT,cAAe,SACf,WAAY,aACZ,IAAK,GACL,UAAW,UACX,UAAWpC,EAAI,EAAI,wCAA0C,OAC7D,WAAYyD,EAAW,gCAAkC,yBAGzD,EAAA,SAAA,CAAArB,OAAC,OAAI,MAAO,CACV,QAAS,OAAQ,WAAY,SAC7B,eAAgB,gBAAiB,MAAO,OACxC,IAAK,CAEL,EAAA,SAAA,CAAAC,MAAC,QAAK,MAAO,CACX,SAAU,GAAI,WAAY,IAC1B,WAAY,IACZ,MAAOqB,EAAa,8BAAgC,4BAAA,EAEnD,WAAK,MACR,EACAtB,EAAAA,KAAC,MAAI,CAAA,MAAO,CAAE,QAAS,OAAQ,WAAY,SAAU,IAAK,CAAA,EACvD,SAAA,CAAAoB,GAEGpB,EAAA,KAAAuB,WAAA,CAAA,SAAA,CAAAtB,EAAA,IAACuB,EAAW,WAAA,CAAA,KAAM,GAAI,MAAM,UAAU,EACrCvB,EAAA,IAAAuB,EAAA,WAAA,CAAW,KAAM,GAAI,MAAM,UAAU,CAAA,EACxC,EAEFvB,MAAC,QAAK,MAAO,CACX,SAAU,GAAI,WAAY,IAC1B,WAAY,IACZ,MAAO,4BAAA,EAEN,WAAK,UACR,CAAA,EACF,CAAA,EACF,EAGCD,EAAAA,KAAA,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,WAAY,aAAc,IAAK,EAAG,MAAO,MAAA,EACtE,SAAA,CAAAC,EAAA,IAAC,SAAA,CACC,QAAS,IAAM,CACTiB,GAAclG,EAChBA,EAAgB0D,EAAMd,CAAC,EAEvBoB,GAAwBpB,CAAC,CAE7B,EACA,MAAO,CACL,WAAY,OAAQ,OAAQ,OAC5B,OAAQ,UAAW,QAAS,EAC5B,WAAY,EACZ,QAAS,MACX,EAEC,WACEqC,EAAA,IAAAwB,cAAA,CAAY,KAAM,GAAI,MAAM,UAAU,YAAa,GAAK,CAAA,QAExDC,aAAW,CAAA,KAAM,GAAI,MAAM,UAAU,YAAa,EAAG,CAAA,CAE1D,EACAzB,MAAC,KAAE,MAAO,CACR,SAAU,GAAI,WAAY,IAC1B,MAAO,8BACP,WAAY,IACZ,OAAQ,EACR,KAAM,CAAA,EAEL,WAAK,KACR,CAAA,EACF,CAAA,CAAA,EAxEQrC,CAyEV,CAEH,CAAA,EACH,CAAA,EACF,CAAA,EACA,CACF,CAAA,CAAA,CAEJ,CAAC"}
@@ -1,6 +1,6 @@
1
1
  import { jsxs as s, jsx as o, Fragment as ze } from "react/jsx-runtime";
2
2
  import { forwardRef as He, useRef as X, useState as u, useCallback as re, useEffect as Y, useImperativeHandle as Ae } from "react";
3
- import { FileSignal as Be, RotateCcw as Pe, Pause as $e, Play as je, RotateCw as Le, ChevronDown as _e, AudioLines as ie, PauseCircle as Xe, PlayCircle as Ye } from "lucide-react";
3
+ import { FilePlay as Be, RotateCcw as Pe, Pause as $e, Play as je, RotateCw as Le, ChevronDown as _e, AudioLines as ie, PauseCircle as Xe, PlayCircle as Ye } from "lucide-react";
4
4
  function se(m) {
5
5
  const d = Math.floor(m / 60), v = Math.round(m % 60);
6
6
  return `${d}:${v.toString().padStart(2, "0")}`;