chordia-ui 3.3.7 → 3.3.9

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 (16) hide show
  1. package/dist/UpdatedInteractionRecording.cjs.js +1 -1
  2. package/dist/UpdatedInteractionRecording.cjs.js.map +1 -1
  3. package/dist/UpdatedInteractionRecording.es.js +73 -94
  4. package/dist/UpdatedInteractionRecording.es.js.map +1 -1
  5. package/dist/components/UpdatedInteractionDetails.cjs.js +2 -2
  6. package/dist/components/UpdatedInteractionDetails.cjs.js.map +1 -1
  7. package/dist/components/UpdatedInteractionDetails.es.js +589 -372
  8. package/dist/components/UpdatedInteractionDetails.es.js.map +1 -1
  9. package/dist/index.cjs2.js +2 -2
  10. package/dist/index.cjs2.js.map +1 -1
  11. package/dist/index.es2.js +269 -272
  12. package/dist/index.es2.js.map +1 -1
  13. package/package.json +1 -1
  14. package/src/components/UpdatedInteractionDetails/UpdatedInteractionDetails.jsx +318 -77
  15. package/src/components/UpdatedInteractionDetails/UpdatedInteractionRecording.jsx +7 -17
  16. package/src/components/login/LoginPage.jsx +1 -1
package/dist/UpdatedInteractionRecording.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";const e=require("react/jsx-runtime"),a=require("react"),i=require("lucide-react"),O=require("./Timeline.cjs.js");function X(b){const l=Math.floor(b/60),j=Math.round(b%60);return`${l}:${j.toString().padStart(2,"0")}`}const de={David:[{start:0,end:.08},{start:.18,end:.22},{start:.38,end:.42},{start:.55,end:.58},{start:.68,end:.72},{start:.82,end:.88},{start:.94,end:1}],Customer:[{start:.1,end:.16},{start:.24,end:.36},{start:.44,end:.52},{start:.6,end:.66},{start:.74,end:.8}]},v=[{speaker:"David",type:"agent",time:"00:04",text:"Thanks for calling Miles Point S Pensau. This is Steve. How can I help you?"},{speaker:"Customer",type:"customer",time:"00:12",text:"Hi, Steve. This is Sandra with Botai Catering."},{speaker:"David",type:"agent",time:"00:18",text:"Hello. How are you?"},{speaker:"Customer",type:"customer",time:"00:20",text:"I'm doing really good. Hey. I brought my vans in last week, and I call it a beeping van, the one that beeps when you back up. Makes the crunchy noise. So I just took it on Saturday after, I think I had the, the Miles. I picked it up on Saturday morning, and I went to an event. So So I don't know if it's the tire or something, but makes it a little crunchy noise. Sometimes when I do the brake, but only if I turn the wheel too."},{speaker:"David",type:"agent",time:"00:21",text:"Oh, interesting. Okay. Can you swing by with it one of these days?"}],ce=a.forwardRef(function({audioUrl:l,timelineSegments:j=[],durationSeconds:g=0,currentTimeSeconds:I=0,timelinePlaying:d=!1,playbackRate:k=1,onSeek:S,onTogglePlay:R,onSeekBack:G,onSeekForward:W,onSetPlaybackRate:T,audioRef:q,transcript:c,highlightedTurns:N=new Set,activeTurnIndex:M,activeDemoIndex:Y=1,turnObservations:K={},setExpandedSignals:F,onTurnPlayPause:V},Z){var L;const p=a.useRef(null),[y,J]=a.useState(null),[Q,U]=a.useState(k||1),[w,x]=a.useState(d),[ee,E]=a.useState(!1),[z,C]=a.useState(Y),H=t=>{for(let n=v.length-1;n>=0;n--){const o=$(v[n].time);if(t>=o)return n}return 0},$=t=>{if(!t)return 0;const n=t.split(":").map(Number);return(n[0]||0)*60+(n[1]||0)},te=[1,1.25,1.5,2],P=!l,D=P?Q:k,ne=P?w:d;a.useImperativeHandle(Z,()=>({seekTo:t=>{h(t),x(!0);const n=H(t);C(n),setTimeout(()=>{var r;const o=(r=p.current)==null?void 0:r.children;o!=null&&o[n]&&o[n].scrollIntoView({behavior:"smooth",block:"nearest"})},50)}}));const h=t=>{const n=Math.max(0,Math.min(t,g||156));S&&S(n),J(n),C(H(n))},oe=()=>{R?R():x(t=>!t)},re=()=>{G?G():h(Math.max(0,(y??0)-10))},ie=()=>{W?W():h(Math.min(g||156,(y??0)+10))},se=t=>{T&&T(t),U(t),E(!1)},ae=t=>{var n;if(z===t&&w)x(!1);else{const o=$((n=v[t])==null?void 0:n.time);C(t),x(!0),h(o)}},le=(t,n)=>{if(t==null)return;const o=r=>{const s=Math.floor(r/6e4),u=Math.floor(r%6e4/1e3);return`${s.toString().padStart(2,"0")}:${u.toString().padStart(2,"0")}`};return`${o(t)}–${n!=null?o(n):o(t)}`},A=(L=c==null?void 0:c.messages)!=null&&L.length?c.messages.map((t,n)=>{var o,r;return{actor:t.actor==="agent"?((o=c.actor_map)==null?void 0:o.agent)||"Agent":((r=c.actor_map)==null?void 0:r.customer)||"Customer",actorType:t.actor==="agent"?"agent":"customer",text:t.text||"",timeRange:le(t.start??t.start_ms,t.end??t.end_ms),isHighlighted:N.has(n),highlightColor:d&&M===n?t.actor==="agent"?"var(--rail-outcome)":"var(--rail-discovery)":void 0,observations:(K[n]||[]).map(s=>({...s,onClick:()=>{F==null||F(u=>new Set([...u,s.signalKey])),setTimeout(()=>{const u=document.getElementById(`signal-${s.signalKey}`);u&&u.scrollIntoView({behavior:"smooth",block:"nearest"})},100)}}))}}):null,m=g||156,B=y??(g>0?I:0),f=m>0?B/m*100:0,_=Math.round(B);return e.jsxs("div",{style:{display:"flex",padding:24,flexDirection:"column",alignItems:"flex-start",gap:24,borderRadius:8,border:"1px solid var(--Grey-absent, #D9D9D9)",background:"var(--Grey-White, #FFF)"},children:[e.jsxs("div",{style:{width:"100%",display:"flex",flexDirection:"column",gap:16},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:24},children:[e.jsx("span",{style:{fontSize:15,fontWeight:600,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2},children:"Recording"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,flex:1,justifyContent:"center"},children:[e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1.2},children:"10"}),e.jsx("button",{onClick:re,style:{background:"none",border:"none",cursor:"pointer",padding:0,display:"flex",alignItems:"center"},children:e.jsx(i.RotateCcw,{size:20,color:"#808183",strokeWidth:1.5})}),e.jsx("button",{onClick:oe,style:{background:"var(--Grey-Strong, #2E3236)",border:"none",cursor:"pointer",width:32,height:32,borderRadius:48,padding:0,display:"flex",alignItems:"center",justifyContent:"center"},children:ne?e.jsx(i.Pause,{size:14,color:"#FFF",fill:"#FFF"}):e.jsx(i.Play,{size:14,color:"#FFF",fill:"#FFF",strokeWidth:1.5,style:{marginLeft:2}})}),e.jsx("button",{onClick:ie,style:{background:"none",border:"none",cursor:"pointer",padding:0,display:"flex",alignItems:"center"},children:e.jsx(i.RotateCw,{size:20,color:"#808183",strokeWidth:1.5})}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1.2},children:"10"})]}),e.jsxs("div",{style:{position:"relative"},children:[e.jsxs("button",{onClick:()=>E(t=>!t),style:{background:"var(--Grey-White, #FFF)",border:"1px solid var(--Grey-absent, #D9D9D9)",borderRadius:20,padding:"0 5px 0 10px",height:24,minWidth:56,cursor:"pointer",fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",lineHeight:1.2,display:"flex",alignItems:"center",justifyContent:"center",gap:4},children:[D,"x",e.jsx(i.ChevronDown,{size:12,color:"#808183"})]}),ee&&e.jsx("div",{style:{position:"absolute",top:"100%",right:0,marginTop:4,background:"var(--Grey-White, #FFF)",border:"1px solid var(--Grey-absent, #D9D9D9)",borderRadius:8,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:10,overflow:"hidden",minWidth:80},children:te.map(t=>e.jsxs("button",{onClick:()=>se(t),style:{display:"block",width:"100%",padding:"8px 12px",border:"none",background:D===t?"var(--surface-hover, #F3F7F7)":"var(--Grey-White, #FFF)",cursor:"pointer",fontSize:13,fontWeight:D===t?600:400,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",textAlign:"left"},children:[t,"x"]},t))})]})]}),l?e.jsxs(e.Fragment,{children:[e.jsx(O.Timeline,{segments:j,durationSeconds:g,currentTimeSeconds:I,onSeek:S,showControls:!1,hasRecording:!0,timelinePlaying:d,playbackRate:k}),e.jsx("audio",{ref:q,preload:"none",style:{display:"none"},children:e.jsx("source",{src:l,type:"audio/mpeg"})})]}):e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("span",{style:{fontSize:13,fontWeight:600,color:f>0?"var(--Green-Primary, #00925F)":"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",lineHeight:1.2,minWidth:60},children:X(_)}),e.jsxs("div",{onClick:t=>{const n=t.currentTarget.getBoundingClientRect(),o=t.clientX-n.left,s=Math.max(0,Math.min(1,o/n.width))*m;h(s)},style:{flex:1,height:16,position:"relative",display:"flex",alignItems:"center",cursor:"pointer"},children:[e.jsx("div",{style:{position:"absolute",left:0,right:0,height:4,borderRadius:2,background:"var(--rail-surface-2, #E3E1D7)",pointerEvents:"none"}}),e.jsx("div",{style:{position:"absolute",left:0,top:"50%",transform:"translateY(-50%)",width:`${f}%`,height:4,borderRadius:2,background:"var(--Green-Primary, #00925F)",pointerEvents:"none"}}),e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{position:"absolute",left:`${f}%`,top:"50%",transform:"translate(-50%, -50%)",pointerEvents:"none"},children:e.jsx("path",{d:"M7.875 1C11.6572 1 14.75 4.1191 14.75 8C14.75 11.8809 11.6572 15 7.875 15C4.09284 15 1 11.8809 1 8C1 4.1191 4.09284 1 7.875 1Z",fill:"#FFF",stroke:"#00925F",strokeWidth:"2"})})]})]}),e.jsxs("div",{style:{position:"relative",paddingBottom:30,cursor:"pointer"},children:[["David","Customer"].map((t,n)=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,height:20,marginBottom:n===0?4:0},children:[e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",fontFamily:"var(--font-sans)",lineHeight:1.2,minWidth:60},children:t}),e.jsxs("div",{onClick:o=>{const r=o.currentTarget.getBoundingClientRect(),s=Math.max(0,Math.min(1,(o.clientX-r.left)/r.width));h(s*m)},style:{flex:1,height:6,position:"relative",borderRadius:3,cursor:"pointer"},children:[e.jsx("div",{style:{position:"absolute",left:0,right:0,top:"50%",transform:"translateY(-50%)",height:4,borderRadius:2,background:"var(--rail-surface-2, #E3E1D7)"}}),de[t].map((o,r)=>e.jsx("div",{style:{position:"absolute",left:`${o.start*100}%`,width:`${(o.end-o.start)*100}%`,top:0,bottom:0,borderRadius:3,background:t==="David"?"var(--Grey-Strong, #2E3236)":"var(--Grey-Muted, #808183)"}},r))]})]},t)),e.jsxs("div",{style:{position:"absolute",left:68,right:0,top:0,bottom:0,pointerEvents:"none"},children:[e.jsx("div",{style:{position:"absolute",left:`${f}%`,top:0,height:44,transform:"translateX(-50%)",borderLeft:"1.5px dashed var(--Grey-Muted, #808183)",opacity:.5}}),e.jsx("div",{style:{position:"absolute",left:`${f}%`,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:X(_)})]})]})]})]}),e.jsxs("div",{style:{width:"100%",display:"flex",flexDirection:"column",gap:16},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12},children:[e.jsx("span",{style:{fontSize:14,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2},children:"Transcript"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,marginLeft:"auto"},children:[e.jsx("button",{onClick:()=>{var t;return(t=p.current)==null?void 0:t.scrollBy({top:-200,behavior:"smooth"})},style:{background:"none",border:"none",cursor:"pointer",padding:0,display:"flex"},children:e.jsx(i.ChevronLeft,{size:16,color:"#808183",strokeWidth:1.5})}),e.jsx("button",{onClick:()=>{var t;return(t=p.current)==null?void 0:t.scrollBy({top:200,behavior:"smooth"})},style:{background:"none",border:"none",cursor:"pointer",padding:0,display:"flex"},children:e.jsx(i.ChevronRight,{size:16,color:"#808183",strokeWidth:1.5})})]})]}),A?e.jsx("div",{id:"transcript-container",ref:p,style:{maxHeight:600,overflowY:"auto"},children:e.jsx(O.TranscriptCard,{turns:A,audioUrl:l,activeTurnIndex:M,autoScrollActiveTurn:d,isExternalPlaying:d,onTurnPlayPause:V})}):e.jsx("div",{ref:p,style:{display:"flex",flexDirection:"column",maxHeight:600,overflowY:"auto"},children:v.map((t,n)=>{const o=n===z&&w,r=t.type==="customer";return e.jsxs("div",{style:{display:"flex",padding:16,flexDirection:"column",alignItems:"flex-start",gap:16,alignSelf:"stretch",border:"1px solid var(--Grey-absent, #D9D9D9)",background:o?"var(--surface-hover, #F3F7F7)":"var(--Grey-White, #FFF)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",gap:8},children:[e.jsx("span",{style:{fontSize:14,fontWeight:600,lineHeight:1.2,color:r?"var(--Grey-Strong, #2E3236)":"var(--Grey-Muted, #808183)"},children:t.speaker}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[o&&e.jsxs(e.Fragment,{children:[e.jsx(i.AudioLines,{size:12,color:"#2E3236"}),e.jsx(i.AudioLines,{size:12,color:"#2E3236"})]}),e.jsx("span",{style:{fontSize:13,fontWeight:400,lineHeight:1.2,color:"var(--Grey-Muted, #808183)"},children:t.time})]})]}),e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:8,width:"100%"},children:[e.jsx("button",{onClick:()=>ae(n),style:{background:"none",border:"none",cursor:"pointer",padding:0,flexShrink:0,display:"flex"},children:o?e.jsx(i.PauseCircle,{size:17,color:"#2E3236",strokeWidth:1.5}):e.jsx(i.PlayCircle,{size:17,color:"#808183",strokeWidth:1})}),e.jsx("p",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2,margin:0,flex:1},children:t.text})]})]},n)})})]})]})});exports.UpdatedInteractionRecording=ce;
1
+ "use strict";const e=require("react/jsx-runtime"),a=require("react"),s=require("lucide-react"),X=require("./Timeline.cjs.js");function q(v){const l=Math.floor(v/60),b=Math.round(v%60);return`${l}:${b.toString().padStart(2,"0")}`}const de={David:[{start:0,end:.08},{start:.18,end:.22},{start:.38,end:.42},{start:.55,end:.58},{start:.68,end:.72},{start:.82,end:.88},{start:.94,end:1}],Customer:[{start:.1,end:.16},{start:.24,end:.36},{start:.44,end:.52},{start:.6,end:.66},{start:.74,end:.8}]},x=[{speaker:"David",type:"agent",time:"00:04",text:"Thanks for calling Miles Point S Pensau. This is Steve. How can I help you?"},{speaker:"Customer",type:"customer",time:"00:12",text:"Hi, Steve. This is Sandra with Botai Catering."},{speaker:"David",type:"agent",time:"00:18",text:"Hello. How are you?"},{speaker:"Customer",type:"customer",time:"00:20",text:"I'm doing really good. Hey. I brought my vans in last week, and I call it a beeping van, the one that beeps when you back up. Makes the crunchy noise. So I just took it on Saturday after, I think I had the, the Miles. I picked it up on Saturday morning, and I went to an event. So So I don't know if it's the tire or something, but makes it a little crunchy noise. Sometimes when I do the brake, but only if I turn the wheel too."},{speaker:"David",type:"agent",time:"00:21",text:"Oh, interesting. Okay. Can you swing by with it one of these days?"}],ce=a.forwardRef(function({audioUrl:l,timelineSegments:b=[],durationSeconds:g=0,currentTimeSeconds:I=0,timelinePlaying:d=!1,playbackRate:j=1,onSeek:k,onTogglePlay:G,onSeekBack:R,onSeekForward:T,onSetPlaybackRate:W,audioRef:L,transcript:c,highlightedTurns:N=new Set,activeTurnIndex:M,activeDemoIndex:Y=1,turnObservations:K={},setExpandedSignals:S,onTurnPlayPause:V},Z){var O;const F=a.useRef(null),[f,J]=a.useState(null),[Q,U]=a.useState(j||1),[w,y]=a.useState(d),[ee,E]=a.useState(!1),[z,D]=a.useState(Y),H=t=>{for(let n=x.length-1;n>=0;n--){const o=$(x[n].time);if(t>=o)return n}return 0},$=t=>{if(!t)return 0;const n=t.split(":").map(Number);return(n[0]||0)*60+(n[1]||0)},te=[1,1.25,1.5,2],P=!l,C=P?Q:j,ne=P?w:d;a.useImperativeHandle(Z,()=>({seekTo:t=>{h(t),y(!0);const n=H(t);D(n),setTimeout(()=>{var r;const o=(r=F.current)==null?void 0:r.children;o!=null&&o[n]&&o[n].scrollIntoView({behavior:"smooth",block:"nearest"})},50)}}));const h=t=>{const n=Math.max(0,Math.min(t,g||156));k&&k(n),J(n),D(H(n))},oe=()=>{G?G():y(t=>!t)},re=()=>{R?R():h(Math.max(0,(f??0)-10))},ie=()=>{T?T():h(Math.min(g||156,(f??0)+10))},se=t=>{W&&W(t),U(t),E(!1)},ae=t=>{var n;if(z===t&&w)y(!1);else{const o=$((n=x[t])==null?void 0:n.time);D(t),y(!0),h(o)}},le=(t,n)=>{if(t==null)return;const o=r=>{const i=Math.floor(r/6e4),u=Math.floor(r%6e4/1e3);return`${i.toString().padStart(2,"0")}:${u.toString().padStart(2,"0")}`};return`${o(t)}–${n!=null?o(n):o(t)}`},A=(O=c==null?void 0:c.messages)!=null&&O.length?c.messages.map((t,n)=>{var o,r;return{actor:t.actor==="agent"?((o=c.actor_map)==null?void 0:o.agent)||"Agent":((r=c.actor_map)==null?void 0:r.customer)||"Customer",actorType:t.actor==="agent"?"agent":"customer",text:t.text||"",timeRange:le(t.start??t.start_ms,t.end??t.end_ms),isHighlighted:N.has(n),highlightColor:d&&M===n?t.actor==="agent"?"var(--rail-outcome)":"var(--rail-discovery)":void 0,observations:(K[n]||[]).map(i=>({...i,onClick:()=>{S==null||S(u=>new Set([...u,i.signalKey])),setTimeout(()=>{const u=document.getElementById(`signal-${i.signalKey}`);u&&u.scrollIntoView({behavior:"smooth",block:"nearest"})},100)}}))}}):null,m=g||156,B=f??(g>0?I:0),p=m>0?B/m*100:0,_=Math.round(B);return e.jsxs("div",{style:{display:"flex",padding:24,flexDirection:"column",alignItems:"flex-start",gap:24,borderRadius:8,border:"1px solid var(--Grey-absent, #D9D9D9)",background:"var(--Grey-White, #FFF)"},children:[e.jsxs("div",{style:{width:"100%",display:"flex",flexDirection:"column",gap:16},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:24},children:[e.jsx("span",{style:{fontSize:15,fontWeight:600,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2},children:"Recording"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,flex:1,justifyContent:"center"},children:[e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1.2},children:"10"}),e.jsx("button",{onClick:re,style:{background:"none",border:"none",cursor:"pointer",padding:0,display:"flex",alignItems:"center"},children:e.jsx(s.RotateCcw,{size:20,color:"#808183",strokeWidth:1.5})}),e.jsx("button",{onClick:oe,style:{background:"var(--Grey-Strong, #2E3236)",border:"none",cursor:"pointer",width:32,height:32,borderRadius:48,padding:0,display:"flex",alignItems:"center",justifyContent:"center"},children:ne?e.jsx(s.Pause,{size:14,color:"#FFF",fill:"#FFF"}):e.jsx(s.Play,{size:14,color:"#FFF",fill:"#FFF",strokeWidth:1.5,style:{marginLeft:2}})}),e.jsx("button",{onClick:ie,style:{background:"none",border:"none",cursor:"pointer",padding:0,display:"flex",alignItems:"center"},children:e.jsx(s.RotateCw,{size:20,color:"#808183",strokeWidth:1.5})}),e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",lineHeight:1.2},children:"10"})]}),e.jsxs("div",{style:{position:"relative"},children:[e.jsxs("button",{onClick:()=>E(t=>!t),style:{background:"var(--Grey-White, #FFF)",border:"1px solid var(--Grey-absent, #D9D9D9)",borderRadius:20,padding:"0 5px 0 10px",height:24,minWidth:56,cursor:"pointer",fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",lineHeight:1.2,display:"flex",alignItems:"center",justifyContent:"center",gap:4},children:[C,"x",e.jsx(s.ChevronDown,{size:12,color:"#808183"})]}),ee&&e.jsx("div",{style:{position:"absolute",top:"100%",right:0,marginTop:4,background:"var(--Grey-White, #FFF)",border:"1px solid var(--Grey-absent, #D9D9D9)",borderRadius:8,boxShadow:"0 4px 12px rgba(0,0,0,0.1)",zIndex:10,overflow:"hidden",minWidth:80},children:te.map(t=>e.jsxs("button",{onClick:()=>se(t),style:{display:"block",width:"100%",padding:"8px 12px",border:"none",background:C===t?"var(--surface-hover, #F3F7F7)":"var(--Grey-White, #FFF)",cursor:"pointer",fontSize:13,fontWeight:C===t?600:400,color:"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",textAlign:"left"},children:[t,"x"]},t))})]})]}),l?e.jsxs(e.Fragment,{children:[e.jsx(X.Timeline,{segments:b,durationSeconds:g,currentTimeSeconds:I,onSeek:k,showControls:!1,hasRecording:!0,timelinePlaying:d,playbackRate:j}),e.jsx("audio",{ref:L,preload:"none",style:{display:"none"},children:e.jsx("source",{src:l,type:"audio/mpeg"})})]}):e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("span",{style:{fontSize:13,fontWeight:600,color:p>0?"var(--Green-Primary, #00925F)":"var(--Grey-Strong, #2E3236)",fontFamily:"var(--font-sans)",lineHeight:1.2,minWidth:60},children:q(_)}),e.jsxs("div",{onClick:t=>{const n=t.currentTarget.getBoundingClientRect(),o=t.clientX-n.left,i=Math.max(0,Math.min(1,o/n.width))*m;h(i)},style:{flex:1,height:16,position:"relative",display:"flex",alignItems:"center",cursor:"pointer"},children:[e.jsx("div",{style:{position:"absolute",left:0,right:0,height:4,borderRadius:2,background:"var(--rail-surface-2, #E3E1D7)",pointerEvents:"none"}}),e.jsx("div",{style:{position:"absolute",left:0,top:"50%",transform:"translateY(-50%)",width:`${p}%`,height:4,borderRadius:2,background:"var(--Green-Primary, #00925F)",pointerEvents:"none"}}),e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{position:"absolute",left:`${p}%`,top:"50%",transform:"translate(-50%, -50%)",pointerEvents:"none"},children:e.jsx("path",{d:"M7.875 1C11.6572 1 14.75 4.1191 14.75 8C14.75 11.8809 11.6572 15 7.875 15C4.09284 15 1 11.8809 1 8C1 4.1191 4.09284 1 7.875 1Z",fill:"#FFF",stroke:"#00925F",strokeWidth:"2"})})]})]}),e.jsxs("div",{style:{position:"relative",paddingBottom:30,cursor:"pointer"},children:[["David","Customer"].map((t,n)=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,height:20,marginBottom:n===0?4:0},children:[e.jsx("span",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Muted, #808183)",fontFamily:"var(--font-sans)",lineHeight:1.2,minWidth:60},children:t}),e.jsxs("div",{onClick:o=>{const r=o.currentTarget.getBoundingClientRect(),i=Math.max(0,Math.min(1,(o.clientX-r.left)/r.width));h(i*m)},style:{flex:1,height:6,position:"relative",borderRadius:3,cursor:"pointer"},children:[e.jsx("div",{style:{position:"absolute",left:0,right:0,top:"50%",transform:"translateY(-50%)",height:4,borderRadius:2,background:"var(--rail-surface-2, #E3E1D7)"}}),de[t].map((o,r)=>e.jsx("div",{style:{position:"absolute",left:`${o.start*100}%`,width:`${(o.end-o.start)*100}%`,top:0,bottom:0,borderRadius:3,background:t==="David"?"var(--Grey-Strong, #2E3236)":"var(--Grey-Muted, #808183)"}},r))]})]},t)),e.jsxs("div",{style:{position:"absolute",left:68,right:0,top:0,bottom:0,pointerEvents:"none"},children:[e.jsx("div",{style:{position:"absolute",left:`${p}%`,top:0,height:44,transform:"translateX(-50%)",borderLeft:"1.5px dashed var(--Grey-Muted, #808183)",opacity:.5}}),e.jsx("div",{style:{position:"absolute",left:`${p}%`,bottom:0,transform:"translateX(-50%)",background:"var(--Grey-Strong, #2E3236)",color:"var(--Grey-White, #FFF)",fontSize:14,fontWeight:600,lineHeight:1.2,padding:"4px 6px",borderRadius:4,whiteSpace:"nowrap"},children:q(_)})]})]})]})]}),e.jsxs("div",{style:{width:"100%",display:"flex",flexDirection:"column",gap:16},children:[e.jsx("div",{style:{borderBottom:"1px solid var(--Grey-absent, #D9D9D9)",paddingBottom:16},children:e.jsx("span",{style:{fontSize:14,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2},children:"Transcript"})}),A?e.jsx("div",{id:"transcript-container",ref:F,style:{maxHeight:600,overflowY:"auto"},children:e.jsx(X.TranscriptCard,{turns:A,audioUrl:l,activeTurnIndex:M,autoScrollActiveTurn:d,isExternalPlaying:d,onTurnPlayPause:V})}):e.jsx("div",{ref:F,style:{display:"flex",flexDirection:"column",maxHeight:600,overflowY:"auto"},children:x.map((t,n)=>{const o=n===z&&w,r=t.type==="customer";return e.jsxs("div",{style:{display:"flex",padding:16,flexDirection:"column",alignItems:"flex-start",gap:16,alignSelf:"stretch",borderTop:n>0?"1px solid var(--Grey-absent, #D9D9D9)":"none",background:o?"var(--surface-hover, #F3F7F7)":"var(--Grey-White, #FFF)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",gap:8},children:[e.jsx("span",{style:{fontSize:14,fontWeight:600,lineHeight:1.2,color:r?"var(--Grey-Strong, #2E3236)":"var(--Grey-Muted, #808183)"},children:t.speaker}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[o&&e.jsxs(e.Fragment,{children:[e.jsx(s.AudioLines,{size:12,color:"#2E3236"}),e.jsx(s.AudioLines,{size:12,color:"#2E3236"})]}),e.jsx("span",{style:{fontSize:13,fontWeight:400,lineHeight:1.2,color:"var(--Grey-Muted, #808183)"},children:t.time})]})]}),e.jsxs("div",{style:{display:"flex",alignItems:"flex-start",gap:8,width:"100%"},children:[e.jsx("button",{onClick:()=>ae(n),style:{background:"none",border:"none",cursor:"pointer",padding:0,flexShrink:0,display:"flex"},children:o?e.jsx(s.PauseCircle,{size:17,color:"#2E3236",strokeWidth:1.5}):e.jsx(s.PlayCircle,{size:17,color:"#808183",strokeWidth:1})}),e.jsx("p",{style:{fontSize:13,fontWeight:400,color:"var(--Grey-Strong, #2E3236)",lineHeight:1.2,margin:0,flex:1},children:t.text})]})]},n)})})]})]})});exports.UpdatedInteractionRecording=ce;
2
2
  //# sourceMappingURL=UpdatedInteractionRecording.cjs.js.map
package/dist/UpdatedInteractionRecording.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"UpdatedInteractionRecording.cjs.js","sources":["../src/components/UpdatedInteractionDetails/UpdatedInteractionRecording.jsx"],"sourcesContent":["import { useRef, useState, forwardRef, useImperativeHandle } from 'react';\nimport {\n Play, Pause, RotateCcw, RotateCw,\n ChevronLeft, ChevronRight, ChevronDown,\n AudioLines, PlayCircle, PauseCircle,\n} from 'lucide-react';\nimport Timeline from '../media/Timeline.jsx';\nimport TranscriptCard from '../media/TranscriptCard.jsx';\n\nfunction fmtTime(seconds) {\n const m = Math.floor(seconds / 60);\n const s = Math.round(seconds % 60);\n return `${m}:${s.toString().padStart(2, '0')}`;\n}\n\n/* ── Demo data for static preview ── */\nconst DEMO_SEGMENTS = {\n David: [\n { start: 0, end: 0.08 },\n { start: 0.18, end: 0.22 },\n { start: 0.38, end: 0.42 },\n { start: 0.55, end: 0.58 },\n { start: 0.68, end: 0.72 },\n { start: 0.82, end: 0.88 },\n { start: 0.94, end: 1 },\n ],\n Customer: [\n { start: 0.1, end: 0.16 },\n { start: 0.24, end: 0.36 },\n { start: 0.44, end: 0.52 },\n { start: 0.6, end: 0.66 },\n { start: 0.74, end: 0.80 },\n ],\n};\n\nconst DEMO_TRANSCRIPT = [\n { speaker: 'David', type: 'agent', time: '00:04', text: 'Thanks for calling Miles Point S Pensau. This is Steve. How can I help you?' },\n { speaker: 'Customer', type: 'customer', time: '00:12', text: 'Hi, Steve. This is Sandra with Botai Catering.' },\n { speaker: 'David', type: 'agent', time: '00:18', text: 'Hello. How are you?' },\n { speaker: 'Customer', type: 'customer', time: '00:20', text: \"I'm doing really good. Hey. I brought my vans in last week, and I call it a beeping van, the one that beeps when you back up. Makes the crunchy noise. So I just took it on Saturday after, I think I had the, the Miles. I picked it up on Saturday morning, and I went to an event. So So I don't know if it's the tire or something, but makes it a little crunchy noise. Sometimes when I do the brake, but only if I turn the wheel too.\" },\n { speaker: 'David', type: 'agent', time: '00:21', text: 'Oh, interesting. Okay. Can you swing by with it one of these days?' },\n];\n\n/* ── Component ── */\nconst UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecording({\n audioUrl,\n timelineSegments = [],\n durationSeconds = 0,\n currentTimeSeconds = 0,\n timelinePlaying = false,\n playbackRate = 1,\n onSeek,\n onTogglePlay,\n onSeekBack,\n onSeekForward,\n onSetPlaybackRate,\n audioRef,\n transcript,\n highlightedTurns = new Set(),\n activeTurnIndex,\n activeDemoIndex = 1,\n turnObservations = {},\n setExpandedSignals,\n onTurnPlayPause,\n}, ref) {\n const scrollRef = useRef(null);\n const [demoSeekTime, setDemoSeekTime] = useState(null);\n const [demoRate, setDemoRate] = useState(playbackRate || 1);\n const [demoPlaying, setDemoPlaying] = useState(timelinePlaying);\n const [showSpeedMenu, setShowSpeedMenu] = useState(false);\n const [activeDemoIdx, setActiveDemoIdx] = useState(activeDemoIndex);\n\n /* Compute which transcript card matches current playback time */\n const computeActiveIdx = (timeSec) => {\n for (let i = DEMO_TRANSCRIPT.length - 1; i >= 0; i--) {\n const turnTime = parseTimeStr(DEMO_TRANSCRIPT[i].time);\n if (timeSec >= turnTime) return i;\n }\n return 0;\n };\n\n const parseTimeStr = (timeStr) => {\n if (!timeStr) return 0;\n const parts = timeStr.split(':').map(Number);\n return (parts[0] || 0) * 60 + (parts[1] || 0);\n };\n\n const SPEED_OPTIONS = [1, 1.25, 1.5, 2];\n const isDemo = !audioUrl;\n const activeRate = isDemo ? demoRate : playbackRate;\n const activePlaying = isDemo ? demoPlaying : timelinePlaying;\n\n /* Expose seekTo for parent to call via ref */\n useImperativeHandle(ref, () => ({\n seekTo: (timeSec) => {\n handleSeek(timeSec);\n setDemoPlaying(true);\n // Scroll to matching transcript card\n const idx = computeActiveIdx(timeSec);\n setActiveDemoIdx(idx);\n setTimeout(() => {\n const cards = scrollRef.current?.children;\n if (cards?.[idx]) {\n cards[idx].scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }, 50);\n },\n }));\n\n /* Handle seek — updates local demo state or calls parent onSeek */\n const handleSeek = (timeSeconds) => {\n const clamped = Math.max(0, Math.min(timeSeconds, durationSeconds || 156));\n if (onSeek) onSeek(clamped);\n setDemoSeekTime(clamped);\n setActiveDemoIdx(computeActiveIdx(clamped));\n };\n\n const handleTogglePlay = () => {\n if (onTogglePlay) onTogglePlay();\n else setDemoPlaying((prev) => !prev);\n };\n\n const handleSeekBack = () => {\n if (onSeekBack) onSeekBack();\n else handleSeek(Math.max(0, (demoSeekTime ?? 0) - 10));\n };\n\n const handleSeekForward = () => {\n if (onSeekForward) onSeekForward();\n else {\n const demoDur = durationSeconds || 156;\n handleSeek(Math.min(demoDur, (demoSeekTime ?? 0) + 10));\n }\n };\n\n const handleSetRate = (rate) => {\n if (onSetPlaybackRate) onSetPlaybackRate(rate);\n setDemoRate(rate);\n setShowSpeedMenu(false);\n };\n\n /* Handle transcript card play/pause */\n const handleDemoTurnPlayPause = (idx) => {\n if (activeDemoIdx === idx && demoPlaying) {\n setDemoPlaying(false);\n } else {\n const turnTime = parseTimeStr(DEMO_TRANSCRIPT[idx]?.time);\n setActiveDemoIdx(idx);\n setDemoPlaying(true);\n handleSeek(turnTime);\n }\n };\n\n /* transcript turn builder */\n const formatTimeRange = (startMs, endMs) => {\n if (startMs == null) return undefined;\n const fmt = (ms) => {\n const minutes = Math.floor(ms / 60000);\n const seconds = Math.floor((ms % 60000) / 1000);\n return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n };\n return `${fmt(startMs)}\\u2013${endMs != null ? fmt(endMs) : fmt(startMs)}`;\n };\n\n const turns = transcript?.messages?.length\n ? transcript.messages.map((m, i) => ({\n actor: m.actor === 'agent' ? (transcript.actor_map?.agent || 'Agent') : (transcript.actor_map?.customer || 'Customer'),\n actorType: m.actor === 'agent' ? 'agent' : 'customer',\n text: m.text || '',\n timeRange: formatTimeRange(m.start ?? m.start_ms, m.end ?? m.end_ms),\n isHighlighted: highlightedTurns.has(i),\n highlightColor: timelinePlaying && activeTurnIndex === i\n ? (m.actor === 'agent' ? 'var(--rail-outcome)' : 'var(--rail-discovery)')\n : undefined,\n observations: (turnObservations[i] || []).map((obs) => ({\n ...obs,\n onClick: () => {\n setExpandedSignals?.((prev) => new Set([...prev, obs.signalKey]));\n setTimeout(() => {\n const el = document.getElementById(`signal-${obs.signalKey}`);\n if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }, 100);\n },\n })),\n }))\n : null;\n\n const demoDuration = durationSeconds || 156;\n const effectiveTime = demoSeekTime != null ? demoSeekTime : (durationSeconds > 0 ? currentTimeSeconds : 0);\n const progress = demoDuration > 0 ? (effectiveTime / demoDuration) * 100 : 0;\n const demoCurrentTime = Math.round(effectiveTime);\n\n return (\n <div style={{\n display: 'flex',\n padding: 24,\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: 24,\n borderRadius: 8,\n border: '1px solid var(--Grey-absent, #D9D9D9)',\n background: 'var(--Grey-White, #FFF)',\n }}>\n\n {/* ════════════════════════════════════════\n RECORDING SECTION\n ════════════════════════════════════════ */}\n <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>\n\n {/* ── Row 1: Title + Controls — Figma: Frame 35, horizontal, space-between, center ── */}\n <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>\n <span style={{\n fontSize: 15, fontWeight: 600,\n color: 'var(--Grey-Strong, #2E3236)',\n lineHeight: 1.2,\n }}>\n Recording\n </span>\n\n {/* Frame 34: controls — horizontal, gap: 12, center */}\n <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, justifyContent: 'center' }}>\n {/* Skip back 10s */}\n <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--Grey-Muted, #808183)', lineHeight: 1.2 }}>10</span>\n <button onClick={handleSeekBack} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center' }}>\n <RotateCcw size={20} color=\"#808183\" strokeWidth={1.5} />\n </button>\n\n {/* Play / Pause — 32x32 dark circle */}\n <button onClick={handleTogglePlay} style={{\n background: 'var(--Grey-Strong, #2E3236)',\n border: 'none', cursor: 'pointer',\n width: 32, height: 32, borderRadius: 48,\n padding: 0,\n display: 'flex', alignItems: 'center', justifyContent: 'center',\n }}>\n {activePlaying\n ? <Pause size={14} color=\"#FFF\" fill=\"#FFF\" />\n : <Play size={14} color=\"#FFF\" fill=\"#FFF\" strokeWidth={1.5} style={{ marginLeft: 2 }} />\n }\n </button>\n\n {/* Skip forward 10s */}\n <button onClick={handleSeekForward} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center' }}>\n <RotateCw size={20} color=\"#808183\" strokeWidth={1.5} />\n </button>\n <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--Grey-Muted, #808183)', lineHeight: 1.2 }}>10</span>\n </div>\n\n {/* Speed pill with dropdown */}\n <div style={{ position: 'relative' }}>\n <button\n onClick={() => setShowSpeedMenu((prev) => !prev)}\n style={{\n background: 'var(--Grey-White, #FFF)',\n border: '1px solid var(--Grey-absent, #D9D9D9)',\n borderRadius: 20,\n padding: '0 5px 0 10px',\n height: 24,\n minWidth: 56,\n cursor: 'pointer',\n fontSize: 13, fontWeight: 400,\n color: 'var(--Grey-Strong, #2E3236)',\n fontFamily: 'var(--font-sans)',\n lineHeight: 1.2,\n display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,\n }}\n >\n {activeRate}x\n <ChevronDown size={12} color=\"#808183\" />\n </button>\n\n {showSpeedMenu && (\n <div style={{\n position: 'absolute',\n top: '100%',\n right: 0,\n marginTop: 4,\n background: 'var(--Grey-White, #FFF)',\n border: '1px solid var(--Grey-absent, #D9D9D9)',\n borderRadius: 8,\n boxShadow: '0 4px 12px rgba(0,0,0,0.1)',\n zIndex: 10,\n overflow: 'hidden',\n minWidth: 80,\n }}>\n {SPEED_OPTIONS.map((speed) => (\n <button\n key={speed}\n onClick={() => handleSetRate(speed)}\n style={{\n display: 'block',\n width: '100%',\n padding: '8px 12px',\n border: 'none',\n background: activeRate === speed ? 'var(--surface-hover, #F3F7F7)' : 'var(--Grey-White, #FFF)',\n cursor: 'pointer',\n fontSize: 13,\n fontWeight: activeRate === speed ? 600 : 400,\n color: 'var(--Grey-Strong, #2E3236)',\n fontFamily: 'var(--font-sans)',\n textAlign: 'left',\n }}\n >\n {speed}x\n </button>\n ))}\n </div>\n )}\n </div>\n </div>\n\n {/* ── Row 2: Progress bar ── */}\n {audioUrl ? (\n <>\n <Timeline\n segments={timelineSegments}\n durationSeconds={durationSeconds}\n currentTimeSeconds={currentTimeSeconds}\n onSeek={onSeek}\n showControls={false}\n hasRecording\n timelinePlaying={timelinePlaying}\n playbackRate={playbackRate}\n />\n <audio ref={audioRef} preload=\"none\" style={{ display: 'none' }}>\n <source src={audioUrl} type=\"audio/mpeg\" />\n </audio>\n </>\n ) : (\n <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n {/* Time label + scrubber bar */}\n <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n <span style={{\n fontSize: 13, fontWeight: 600,\n color: progress > 0 ? 'var(--Green-Primary, #00925F)' : 'var(--Grey-Strong, #2E3236)',\n fontFamily: 'var(--font-sans)',\n lineHeight: 1.2,\n minWidth: 60,\n }}>\n {fmtTime(demoCurrentTime)}\n </span>\n <div\n onClick={(e) => {\n const rect = e.currentTarget.getBoundingClientRect();\n const clickX = e.clientX - rect.left;\n const pct = Math.max(0, Math.min(1, clickX / rect.width));\n const seekTime = pct * demoDuration;\n handleSeek(seekTime);\n }}\n style={{\n flex: 1, height: 16,\n position: 'relative',\n display: 'flex', alignItems: 'center',\n cursor: 'pointer',\n }}\n >\n {/* Background track — Figma: #E3E1D7, stroke w=4 */}\n <div style={{\n position: 'absolute', left: 0, right: 0,\n height: 4, borderRadius: 2,\n background: 'var(--rail-surface-2, #E3E1D7)',\n pointerEvents: 'none',\n }} />\n {/* Played portion — Figma: #00925F, stroke w=4 */}\n <div style={{\n position: 'absolute', left: 0, top: '50%',\n transform: 'translateY(-50%)',\n width: `${progress}%`,\n height: 4, borderRadius: 2,\n background: 'var(--Green-Primary, #00925F)',\n pointerEvents: 'none',\n }} />\n {/* Scrubber handle — Figma ellipse */}\n <svg\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{\n position: 'absolute',\n left: `${progress}%`,\n top: '50%',\n transform: 'translate(-50%, -50%)',\n pointerEvents: 'none',\n }}\n >\n <path\n d=\"M7.875 1C11.6572 1 14.75 4.1191 14.75 8C14.75 11.8809 11.6572 15 7.875 15C4.09284 15 1 11.8809 1 8C1 4.1191 4.09284 1 7.875 1Z\"\n fill=\"#FFF\"\n stroke=\"#00925F\"\n strokeWidth=\"2\"\n />\n </svg>\n </div>\n </div>\n\n {/* ── Row 3: Speaker timeline bars + playback indicator ── */}\n <div style={{ position: 'relative', paddingBottom: 30, cursor: 'pointer' }}>\n {['David', 'Customer'].map((speaker, rowIdx) => (\n <div key={speaker} style={{\n display: 'flex', alignItems: 'center', gap: 8,\n height: 20,\n marginBottom: rowIdx === 0 ? 4 : 0,\n }}>\n <span style={{\n fontSize: 13, fontWeight: 400,\n color: 'var(--Grey-Muted, #808183)',\n fontFamily: 'var(--font-sans)',\n lineHeight: 1.2,\n minWidth: 60,\n }}>\n {speaker}\n </span>\n <div\n onClick={(e) => {\n const rect = e.currentTarget.getBoundingClientRect();\n const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n handleSeek(pct * demoDuration);\n }}\n style={{\n flex: 1, height: 6,\n position: 'relative', borderRadius: 3,\n cursor: 'pointer',\n }}\n >\n {/* Thin baseline — Figma: #E3E1D7, stroke w=4 */}\n <div style={{\n position: 'absolute', left: 0, right: 0,\n top: '50%', transform: 'translateY(-50%)',\n height: 4, borderRadius: 2,\n background: 'var(--rail-surface-2, #E3E1D7)',\n }} />\n {/* Speech segments */}\n {DEMO_SEGMENTS[speaker].map((seg, i) => (\n <div key={i} style={{\n position: 'absolute',\n left: `${seg.start * 100}%`,\n width: `${(seg.end - seg.start) * 100}%`,\n top: 0, bottom: 0, borderRadius: 3,\n background: speaker === 'David'\n ? 'var(--Grey-Strong, #2E3236)'\n : 'var(--Grey-Muted, #808183)',\n }} />\n ))}\n </div>\n </div>\n ))}\n\n {/* ── Playback position: dotted line + avatar + time tooltip ── */}\n <div style={{\n position: 'absolute',\n left: 68, /* 60 label + 8 gap */\n right: 0,\n top: 0,\n bottom: 0,\n pointerEvents: 'none',\n }}>\n {/* Dotted vertical line */}\n <div style={{\n position: 'absolute',\n left: `${progress}%`,\n top: 0,\n height: 44, /* spans both rows */\n transform: 'translateX(-50%)',\n borderLeft: '1.5px dashed var(--Grey-Muted, #808183)',\n opacity: 0.5,\n }} />\n\n {/* Time tooltip — Figma: Frame 30, bg=#2E3236, pad 4 6, r=4, 14px/600/#FFF */}\n <div style={{\n position: 'absolute',\n left: `${progress}%`,\n bottom: 0,\n transform: 'translateX(-50%)',\n background: 'var(--Grey-Strong, #2E3236)',\n color: 'var(--Grey-White, #FFF)',\n fontSize: 14, fontWeight: 600,\n lineHeight: 1.2,\n padding: '4px 6px',\n borderRadius: 4,\n whiteSpace: 'nowrap',\n }}>\n {fmtTime(demoCurrentTime)}\n </div>\n </div>\n </div>\n </div>\n )}\n </div>\n\n {/* ════════════════════════════════════════\n TRANSCRIPT SECTION\n ════════════════════════════════════════ */}\n {/* Figma: Frame 49, vertical, gap: 16 */}\n <div style={{\n width: '100%',\n display: 'flex', flexDirection: 'column', gap: 16,\n }}>\n {/* ── Header: Frame 50 — Transcript + nav arrows, horizontal, gap: 12, center ── */}\n <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>\n <span style={{\n fontSize: 14, fontWeight: 400,\n color: 'var(--Grey-Strong, #2E3236)',\n lineHeight: 1.2,\n }}>\n Transcript\n </span>\n {/* Frame 51: nav arrows — horizontal, gap: 12, align: end, center */}\n <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginLeft: 'auto' }}>\n <button onClick={() => scrollRef.current?.scrollBy({ top: -200, behavior: 'smooth' })} style={{\n background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex',\n }}>\n <ChevronLeft size={16} color=\"#808183\" strokeWidth={1.5} />\n </button>\n <button onClick={() => scrollRef.current?.scrollBy({ top: 200, behavior: 'smooth' })} style={{\n background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex',\n }}>\n <ChevronRight size={16} color=\"#808183\" strokeWidth={1.5} />\n </button>\n </div>\n </div>\n\n {/* ── Cards ── */}\n {turns ? (\n <div id=\"transcript-container\" ref={scrollRef} style={{ maxHeight: 600, overflowY: 'auto' }}>\n <TranscriptCard\n turns={turns}\n audioUrl={audioUrl}\n activeTurnIndex={activeTurnIndex}\n autoScrollActiveTurn={timelinePlaying}\n isExternalPlaying={timelinePlaying}\n onTurnPlayPause={onTurnPlayPause}\n />\n </div>\n ) : (\n <div ref={scrollRef} style={{\n display: 'flex', flexDirection: 'column',\n maxHeight: 600, overflowY: 'auto',\n }}>\n {DEMO_TRANSCRIPT.map((card, i) => {\n const isActive = i === activeDemoIdx && demoPlaying;\n const isCustomer = card.type === 'customer';\n\n return (\n <div key={i} style={{\n display: 'flex',\n padding: 16,\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: 16,\n alignSelf: 'stretch',\n border: '1px solid var(--Grey-absent, #D9D9D9)',\n background: isActive ? 'var(--surface-hover, #F3F7F7)' : 'var(--Grey-White, #FFF)',\n }}>\n {/* Frame 40: Speaker name + time — horizontal, space-between, center */}\n <div style={{\n display: 'flex', alignItems: 'center',\n justifyContent: 'space-between', width: '100%',\n gap: 8,\n }}>\n <span style={{\n fontSize: 14, fontWeight: 600,\n lineHeight: 1.2,\n color: isCustomer ? 'var(--Grey-Strong, #2E3236)' : 'var(--Grey-Muted, #808183)',\n }}>\n {card.speaker}\n </span>\n <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n {isActive && (\n <>\n <AudioLines size={12} color=\"#2E3236\" />\n <AudioLines size={12} color=\"#2E3236\" />\n </>\n )}\n <span style={{\n fontSize: 13, fontWeight: 400,\n lineHeight: 1.2,\n color: 'var(--Grey-Muted, #808183)',\n }}>\n {card.time}\n </span>\n </div>\n </div>\n\n {/* Frame 39: Play/Pause icon + text — horizontal, gap: 8 */}\n <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, width: '100%' }}>\n <button\n onClick={() => handleDemoTurnPlayPause(i)}\n style={{\n background: 'none', border: 'none',\n cursor: 'pointer', padding: 0,\n flexShrink: 0,\n display: 'flex',\n }}\n >\n {isActive ? (\n <PauseCircle size={17} color=\"#2E3236\" strokeWidth={1.5} />\n ) : (\n <PlayCircle size={17} color=\"#808183\" strokeWidth={1} />\n )}\n </button>\n <p style={{\n fontSize: 13, fontWeight: 400,\n color: 'var(--Grey-Strong, #2E3236)',\n lineHeight: 1.2,\n margin: 0,\n flex: 1,\n }}>\n {card.text}\n </p>\n </div>\n </div>\n );\n })}\n </div>\n )}\n </div>\n </div>\n );\n});\n\nexport default UpdatedInteractionRecording;\n"],"names":["fmtTime","seconds","m","s","DEMO_SEGMENTS","DEMO_TRANSCRIPT","UpdatedInteractionRecording","forwardRef","audioUrl","timelineSegments","durationSeconds","currentTimeSeconds","timelinePlaying","playbackRate","onSeek","onTogglePlay","onSeekBack","onSeekForward","onSetPlaybackRate","audioRef","transcript","highlightedTurns","activeTurnIndex","activeDemoIndex","turnObservations","setExpandedSignals","onTurnPlayPause","ref","scrollRef","useRef","demoSeekTime","setDemoSeekTime","useState","demoRate","setDemoRate","demoPlaying","setDemoPlaying","showSpeedMenu","setShowSpeedMenu","activeDemoIdx","setActiveDemoIdx","computeActiveIdx","timeSec","i","turnTime","parseTimeStr","timeStr","parts","SPEED_OPTIONS","isDemo","activeRate","activePlaying","useImperativeHandle","handleSeek","idx","cards","_a","timeSeconds","clamped","handleTogglePlay","prev","handleSeekBack","handleSeekForward","handleSetRate","rate","handleDemoTurnPlayPause","formatTimeRange","startMs","endMs","fmt","ms","minutes","turns","_b","obs","el","demoDuration","effectiveTime","progress","demoCurrentTime","jsxs","jsx","RotateCcw","Pause","Play","RotateCw","ChevronDown","speed","Fragment","Timeline","e","rect","clickX","seekTime","speaker","rowIdx","pct","seg","ChevronLeft","ChevronRight","TranscriptCard","card","isActive","isCustomer","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, forwardRef, useImperativeHandle } from 'react';\nimport {\n Play, Pause, RotateCcw, RotateCw,\n ChevronDown,\n AudioLines, PlayCircle, PauseCircle,\n} from 'lucide-react';\nimport Timeline from '../media/Timeline.jsx';\nimport TranscriptCard from '../media/TranscriptCard.jsx';\n\nfunction fmtTime(seconds) {\n const m = Math.floor(seconds / 60);\n const s = Math.round(seconds % 60);\n return `${m}:${s.toString().padStart(2, '0')}`;\n}\n\n/* ── Demo data for static preview ── */\nconst DEMO_SEGMENTS = {\n David: [\n { start: 0, end: 0.08 },\n { start: 0.18, end: 0.22 },\n { start: 0.38, end: 0.42 },\n { start: 0.55, end: 0.58 },\n { start: 0.68, end: 0.72 },\n { start: 0.82, end: 0.88 },\n { start: 0.94, end: 1 },\n ],\n Customer: [\n { start: 0.1, end: 0.16 },\n { start: 0.24, end: 0.36 },\n { start: 0.44, end: 0.52 },\n { start: 0.6, end: 0.66 },\n { start: 0.74, end: 0.80 },\n ],\n};\n\nconst DEMO_TRANSCRIPT = [\n { speaker: 'David', type: 'agent', time: '00:04', text: 'Thanks for calling Miles Point S Pensau. This is Steve. How can I help you?' },\n { speaker: 'Customer', type: 'customer', time: '00:12', text: 'Hi, Steve. This is Sandra with Botai Catering.' },\n { speaker: 'David', type: 'agent', time: '00:18', text: 'Hello. How are you?' },\n { speaker: 'Customer', type: 'customer', time: '00:20', text: \"I'm doing really good. Hey. I brought my vans in last week, and I call it a beeping van, the one that beeps when you back up. Makes the crunchy noise. So I just took it on Saturday after, I think I had the, the Miles. I picked it up on Saturday morning, and I went to an event. So So I don't know if it's the tire or something, but makes it a little crunchy noise. Sometimes when I do the brake, but only if I turn the wheel too.\" },\n { speaker: 'David', type: 'agent', time: '00:21', text: 'Oh, interesting. Okay. Can you swing by with it one of these days?' },\n];\n\n/* ── Component ── */\nconst UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecording({\n audioUrl,\n timelineSegments = [],\n durationSeconds = 0,\n currentTimeSeconds = 0,\n timelinePlaying = false,\n playbackRate = 1,\n onSeek,\n onTogglePlay,\n onSeekBack,\n onSeekForward,\n onSetPlaybackRate,\n audioRef,\n transcript,\n highlightedTurns = new Set(),\n activeTurnIndex,\n activeDemoIndex = 1,\n turnObservations = {},\n setExpandedSignals,\n onTurnPlayPause,\n}, ref) {\n const scrollRef = useRef(null);\n const [demoSeekTime, setDemoSeekTime] = useState(null);\n const [demoRate, setDemoRate] = useState(playbackRate || 1);\n const [demoPlaying, setDemoPlaying] = useState(timelinePlaying);\n const [showSpeedMenu, setShowSpeedMenu] = useState(false);\n const [activeDemoIdx, setActiveDemoIdx] = useState(activeDemoIndex);\n\n /* Compute which transcript card matches current playback time */\n const computeActiveIdx = (timeSec) => {\n for (let i = DEMO_TRANSCRIPT.length - 1; i >= 0; i--) {\n const turnTime = parseTimeStr(DEMO_TRANSCRIPT[i].time);\n if (timeSec >= turnTime) return i;\n }\n return 0;\n };\n\n const parseTimeStr = (timeStr) => {\n if (!timeStr) return 0;\n const parts = timeStr.split(':').map(Number);\n return (parts[0] || 0) * 60 + (parts[1] || 0);\n };\n\n const SPEED_OPTIONS = [1, 1.25, 1.5, 2];\n const isDemo = !audioUrl;\n const activeRate = isDemo ? demoRate : playbackRate;\n const activePlaying = isDemo ? demoPlaying : timelinePlaying;\n\n /* Expose seekTo for parent to call via ref */\n useImperativeHandle(ref, () => ({\n seekTo: (timeSec) => {\n handleSeek(timeSec);\n setDemoPlaying(true);\n // Scroll to matching transcript card\n const idx = computeActiveIdx(timeSec);\n setActiveDemoIdx(idx);\n setTimeout(() => {\n const cards = scrollRef.current?.children;\n if (cards?.[idx]) {\n cards[idx].scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }, 50);\n },\n }));\n\n /* Handle seek — updates local demo state or calls parent onSeek */\n const handleSeek = (timeSeconds) => {\n const clamped = Math.max(0, Math.min(timeSeconds, durationSeconds || 156));\n if (onSeek) onSeek(clamped);\n setDemoSeekTime(clamped);\n setActiveDemoIdx(computeActiveIdx(clamped));\n };\n\n const handleTogglePlay = () => {\n if (onTogglePlay) onTogglePlay();\n else setDemoPlaying((prev) => !prev);\n };\n\n const handleSeekBack = () => {\n if (onSeekBack) onSeekBack();\n else handleSeek(Math.max(0, (demoSeekTime ?? 0) - 10));\n };\n\n const handleSeekForward = () => {\n if (onSeekForward) onSeekForward();\n else {\n const demoDur = durationSeconds || 156;\n handleSeek(Math.min(demoDur, (demoSeekTime ?? 0) + 10));\n }\n };\n\n const handleSetRate = (rate) => {\n if (onSetPlaybackRate) onSetPlaybackRate(rate);\n setDemoRate(rate);\n setShowSpeedMenu(false);\n };\n\n /* Handle transcript card play/pause */\n const handleDemoTurnPlayPause = (idx) => {\n if (activeDemoIdx === idx && demoPlaying) {\n setDemoPlaying(false);\n } else {\n const turnTime = parseTimeStr(DEMO_TRANSCRIPT[idx]?.time);\n setActiveDemoIdx(idx);\n setDemoPlaying(true);\n handleSeek(turnTime);\n }\n };\n\n /* transcript turn builder */\n const formatTimeRange = (startMs, endMs) => {\n if (startMs == null) return undefined;\n const fmt = (ms) => {\n const minutes = Math.floor(ms / 60000);\n const seconds = Math.floor((ms % 60000) / 1000);\n return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n };\n return `${fmt(startMs)}\\u2013${endMs != null ? fmt(endMs) : fmt(startMs)}`;\n };\n\n const turns = transcript?.messages?.length\n ? transcript.messages.map((m, i) => ({\n actor: m.actor === 'agent' ? (transcript.actor_map?.agent || 'Agent') : (transcript.actor_map?.customer || 'Customer'),\n actorType: m.actor === 'agent' ? 'agent' : 'customer',\n text: m.text || '',\n timeRange: formatTimeRange(m.start ?? m.start_ms, m.end ?? m.end_ms),\n isHighlighted: highlightedTurns.has(i),\n highlightColor: timelinePlaying && activeTurnIndex === i\n ? (m.actor === 'agent' ? 'var(--rail-outcome)' : 'var(--rail-discovery)')\n : undefined,\n observations: (turnObservations[i] || []).map((obs) => ({\n ...obs,\n onClick: () => {\n setExpandedSignals?.((prev) => new Set([...prev, obs.signalKey]));\n setTimeout(() => {\n const el = document.getElementById(`signal-${obs.signalKey}`);\n if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }, 100);\n },\n })),\n }))\n : null;\n\n const demoDuration = durationSeconds || 156;\n const effectiveTime = demoSeekTime != null ? demoSeekTime : (durationSeconds > 0 ? currentTimeSeconds : 0);\n const progress = demoDuration > 0 ? (effectiveTime / demoDuration) * 100 : 0;\n const demoCurrentTime = Math.round(effectiveTime);\n\n return (\n <div style={{\n display: 'flex',\n padding: 24,\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: 24,\n borderRadius: 8,\n border: '1px solid var(--Grey-absent, #D9D9D9)',\n background: 'var(--Grey-White, #FFF)',\n }}>\n\n {/* ════════════════════════════════════════\n RECORDING SECTION\n ════════════════════════════════════════ */}\n <div style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>\n\n {/* ── Row 1: Title + Controls — Figma: Frame 35, horizontal, space-between, center ── */}\n <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>\n <span style={{\n fontSize: 15, fontWeight: 600,\n color: 'var(--Grey-Strong, #2E3236)',\n lineHeight: 1.2,\n }}>\n Recording\n </span>\n\n {/* Frame 34: controls — horizontal, gap: 12, center */}\n <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, justifyContent: 'center' }}>\n {/* Skip back 10s */}\n <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--Grey-Muted, #808183)', lineHeight: 1.2 }}>10</span>\n <button onClick={handleSeekBack} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center' }}>\n <RotateCcw size={20} color=\"#808183\" strokeWidth={1.5} />\n </button>\n\n {/* Play / Pause — 32x32 dark circle */}\n <button onClick={handleTogglePlay} style={{\n background: 'var(--Grey-Strong, #2E3236)',\n border: 'none', cursor: 'pointer',\n width: 32, height: 32, borderRadius: 48,\n padding: 0,\n display: 'flex', alignItems: 'center', justifyContent: 'center',\n }}>\n {activePlaying\n ? <Pause size={14} color=\"#FFF\" fill=\"#FFF\" />\n : <Play size={14} color=\"#FFF\" fill=\"#FFF\" strokeWidth={1.5} style={{ marginLeft: 2 }} />\n }\n </button>\n\n {/* Skip forward 10s */}\n <button onClick={handleSeekForward} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center' }}>\n <RotateCw size={20} color=\"#808183\" strokeWidth={1.5} />\n </button>\n <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--Grey-Muted, #808183)', lineHeight: 1.2 }}>10</span>\n </div>\n\n {/* Speed pill with dropdown */}\n <div style={{ position: 'relative' }}>\n <button\n onClick={() => setShowSpeedMenu((prev) => !prev)}\n style={{\n background: 'var(--Grey-White, #FFF)',\n border: '1px solid var(--Grey-absent, #D9D9D9)',\n borderRadius: 20,\n padding: '0 5px 0 10px',\n height: 24,\n minWidth: 56,\n cursor: 'pointer',\n fontSize: 13, fontWeight: 400,\n color: 'var(--Grey-Strong, #2E3236)',\n fontFamily: 'var(--font-sans)',\n lineHeight: 1.2,\n display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,\n }}\n >\n {activeRate}x\n <ChevronDown size={12} color=\"#808183\" />\n </button>\n\n {showSpeedMenu && (\n <div style={{\n position: 'absolute',\n top: '100%',\n right: 0,\n marginTop: 4,\n background: 'var(--Grey-White, #FFF)',\n border: '1px solid var(--Grey-absent, #D9D9D9)',\n borderRadius: 8,\n boxShadow: '0 4px 12px rgba(0,0,0,0.1)',\n zIndex: 10,\n overflow: 'hidden',\n minWidth: 80,\n }}>\n {SPEED_OPTIONS.map((speed) => (\n <button\n key={speed}\n onClick={() => handleSetRate(speed)}\n style={{\n display: 'block',\n width: '100%',\n padding: '8px 12px',\n border: 'none',\n background: activeRate === speed ? 'var(--surface-hover, #F3F7F7)' : 'var(--Grey-White, #FFF)',\n cursor: 'pointer',\n fontSize: 13,\n fontWeight: activeRate === speed ? 600 : 400,\n color: 'var(--Grey-Strong, #2E3236)',\n fontFamily: 'var(--font-sans)',\n textAlign: 'left',\n }}\n >\n {speed}x\n </button>\n ))}\n </div>\n )}\n </div>\n </div>\n\n {/* ── Row 2: Progress bar ── */}\n {audioUrl ? (\n <>\n <Timeline\n segments={timelineSegments}\n durationSeconds={durationSeconds}\n currentTimeSeconds={currentTimeSeconds}\n onSeek={onSeek}\n showControls={false}\n hasRecording\n timelinePlaying={timelinePlaying}\n playbackRate={playbackRate}\n />\n <audio ref={audioRef} preload=\"none\" style={{ display: 'none' }}>\n <source src={audioUrl} type=\"audio/mpeg\" />\n </audio>\n </>\n ) : (\n <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n {/* Time label + scrubber bar */}\n <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n <span style={{\n fontSize: 13, fontWeight: 600,\n color: progress > 0 ? 'var(--Green-Primary, #00925F)' : 'var(--Grey-Strong, #2E3236)',\n fontFamily: 'var(--font-sans)',\n lineHeight: 1.2,\n minWidth: 60,\n }}>\n {fmtTime(demoCurrentTime)}\n </span>\n <div\n onClick={(e) => {\n const rect = e.currentTarget.getBoundingClientRect();\n const clickX = e.clientX - rect.left;\n const pct = Math.max(0, Math.min(1, clickX / rect.width));\n const seekTime = pct * demoDuration;\n handleSeek(seekTime);\n }}\n style={{\n flex: 1, height: 16,\n position: 'relative',\n display: 'flex', alignItems: 'center',\n cursor: 'pointer',\n }}\n >\n {/* Background track — Figma: #E3E1D7, stroke w=4 */}\n <div style={{\n position: 'absolute', left: 0, right: 0,\n height: 4, borderRadius: 2,\n background: 'var(--rail-surface-2, #E3E1D7)',\n pointerEvents: 'none',\n }} />\n {/* Played portion — Figma: #00925F, stroke w=4 */}\n <div style={{\n position: 'absolute', left: 0, top: '50%',\n transform: 'translateY(-50%)',\n width: `${progress}%`,\n height: 4, borderRadius: 2,\n background: 'var(--Green-Primary, #00925F)',\n pointerEvents: 'none',\n }} />\n {/* Scrubber handle — Figma ellipse */}\n <svg\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{\n position: 'absolute',\n left: `${progress}%`,\n top: '50%',\n transform: 'translate(-50%, -50%)',\n pointerEvents: 'none',\n }}\n >\n <path\n d=\"M7.875 1C11.6572 1 14.75 4.1191 14.75 8C14.75 11.8809 11.6572 15 7.875 15C4.09284 15 1 11.8809 1 8C1 4.1191 4.09284 1 7.875 1Z\"\n fill=\"#FFF\"\n stroke=\"#00925F\"\n strokeWidth=\"2\"\n />\n </svg>\n </div>\n </div>\n\n {/* ── Row 3: Speaker timeline bars + playback indicator ── */}\n <div style={{ position: 'relative', paddingBottom: 30, cursor: 'pointer' }}>\n {['David', 'Customer'].map((speaker, rowIdx) => (\n <div key={speaker} style={{\n display: 'flex', alignItems: 'center', gap: 8,\n height: 20,\n marginBottom: rowIdx === 0 ? 4 : 0,\n }}>\n <span style={{\n fontSize: 13, fontWeight: 400,\n color: 'var(--Grey-Muted, #808183)',\n fontFamily: 'var(--font-sans)',\n lineHeight: 1.2,\n minWidth: 60,\n }}>\n {speaker}\n </span>\n <div\n onClick={(e) => {\n const rect = e.currentTarget.getBoundingClientRect();\n const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n handleSeek(pct * demoDuration);\n }}\n style={{\n flex: 1, height: 6,\n position: 'relative', borderRadius: 3,\n cursor: 'pointer',\n }}\n >\n {/* Thin baseline — Figma: #E3E1D7, stroke w=4 */}\n <div style={{\n position: 'absolute', left: 0, right: 0,\n top: '50%', transform: 'translateY(-50%)',\n height: 4, borderRadius: 2,\n background: 'var(--rail-surface-2, #E3E1D7)',\n }} />\n {/* Speech segments */}\n {DEMO_SEGMENTS[speaker].map((seg, i) => (\n <div key={i} style={{\n position: 'absolute',\n left: `${seg.start * 100}%`,\n width: `${(seg.end - seg.start) * 100}%`,\n top: 0, bottom: 0, borderRadius: 3,\n background: speaker === 'David'\n ? 'var(--Grey-Strong, #2E3236)'\n : 'var(--Grey-Muted, #808183)',\n }} />\n ))}\n </div>\n </div>\n ))}\n\n {/* ── Playback position: dotted line + avatar + time tooltip ── */}\n <div style={{\n position: 'absolute',\n left: 68, /* 60 label + 8 gap */\n right: 0,\n top: 0,\n bottom: 0,\n pointerEvents: 'none',\n }}>\n {/* Dotted vertical line */}\n <div style={{\n position: 'absolute',\n left: `${progress}%`,\n top: 0,\n height: 44, /* spans both rows */\n transform: 'translateX(-50%)',\n borderLeft: '1.5px dashed var(--Grey-Muted, #808183)',\n opacity: 0.5,\n }} />\n\n {/* Time tooltip — Figma: Frame 30, bg=#2E3236, pad 4 6, r=4, 14px/600/#FFF */}\n <div style={{\n position: 'absolute',\n left: `${progress}%`,\n bottom: 0,\n transform: 'translateX(-50%)',\n background: 'var(--Grey-Strong, #2E3236)',\n color: 'var(--Grey-White, #FFF)',\n fontSize: 14, fontWeight: 600,\n lineHeight: 1.2,\n padding: '4px 6px',\n borderRadius: 4,\n whiteSpace: 'nowrap',\n }}>\n {fmtTime(demoCurrentTime)}\n </div>\n </div>\n </div>\n </div>\n )}\n </div>\n\n {/* ════════════════════════════════════════\n TRANSCRIPT SECTION\n ════════════════════════════════════════ */}\n {/* Figma: Frame 49, vertical, gap: 16 */}\n <div style={{\n width: '100%',\n display: 'flex', flexDirection: 'column', gap: 16,\n }}>\n {/* ── Header: Transcript ── */}\n <div style={{\n borderBottom: '1px solid var(--Grey-absent, #D9D9D9)',\n paddingBottom: 16,\n }}>\n <span style={{\n fontSize: 14, fontWeight: 400,\n color: 'var(--Grey-Strong, #2E3236)',\n lineHeight: 1.2,\n }}>\n Transcript\n </span>\n </div>\n\n {/* ── Cards ── */}\n {turns ? (\n <div id=\"transcript-container\" ref={scrollRef} style={{ maxHeight: 600, overflowY: 'auto' }}>\n <TranscriptCard\n turns={turns}\n audioUrl={audioUrl}\n activeTurnIndex={activeTurnIndex}\n autoScrollActiveTurn={timelinePlaying}\n isExternalPlaying={timelinePlaying}\n onTurnPlayPause={onTurnPlayPause}\n />\n </div>\n ) : (\n <div ref={scrollRef} style={{\n display: 'flex', flexDirection: 'column',\n maxHeight: 600, overflowY: 'auto',\n }}>\n {DEMO_TRANSCRIPT.map((card, i) => {\n const isActive = i === activeDemoIdx && demoPlaying;\n const isCustomer = card.type === 'customer';\n\n return (\n <div key={i} style={{\n display: 'flex',\n padding: 16,\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: 16,\n alignSelf: 'stretch',\n borderTop: i > 0 ? '1px solid var(--Grey-absent, #D9D9D9)' : 'none',\n background: isActive ? 'var(--surface-hover, #F3F7F7)' : 'var(--Grey-White, #FFF)',\n }}>\n {/* Frame 40: Speaker name + time — horizontal, space-between, center */}\n <div style={{\n display: 'flex', alignItems: 'center',\n justifyContent: 'space-between', width: '100%',\n gap: 8,\n }}>\n <span style={{\n fontSize: 14, fontWeight: 600,\n lineHeight: 1.2,\n color: isCustomer ? 'var(--Grey-Strong, #2E3236)' : 'var(--Grey-Muted, #808183)',\n }}>\n {card.speaker}\n </span>\n <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n {isActive && (\n <>\n <AudioLines size={12} color=\"#2E3236\" />\n <AudioLines size={12} color=\"#2E3236\" />\n </>\n )}\n <span style={{\n fontSize: 13, fontWeight: 400,\n lineHeight: 1.2,\n color: 'var(--Grey-Muted, #808183)',\n }}>\n {card.time}\n </span>\n </div>\n </div>\n\n {/* Frame 39: Play/Pause icon + text — horizontal, gap: 8 */}\n <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, width: '100%' }}>\n <button\n onClick={() => handleDemoTurnPlayPause(i)}\n style={{\n background: 'none', border: 'none',\n cursor: 'pointer', padding: 0,\n flexShrink: 0,\n display: 'flex',\n }}\n >\n {isActive ? (\n <PauseCircle size={17} color=\"#2E3236\" strokeWidth={1.5} />\n ) : (\n <PlayCircle size={17} color=\"#808183\" strokeWidth={1} />\n )}\n </button>\n <p style={{\n fontSize: 13, fontWeight: 400,\n color: 'var(--Grey-Strong, #2E3236)',\n lineHeight: 1.2,\n margin: 0,\n flex: 1,\n }}>\n {card.text}\n </p>\n </div>\n </div>\n );\n })}\n </div>\n )}\n </div>\n </div>\n );\n});\n\nexport default UpdatedInteractionRecording;\n"],"names":["fmtTime","seconds","m","s","DEMO_SEGMENTS","DEMO_TRANSCRIPT","UpdatedInteractionRecording","forwardRef","audioUrl","timelineSegments","durationSeconds","currentTimeSeconds","timelinePlaying","playbackRate","onSeek","onTogglePlay","onSeekBack","onSeekForward","onSetPlaybackRate","audioRef","transcript","highlightedTurns","activeTurnIndex","activeDemoIndex","turnObservations","setExpandedSignals","onTurnPlayPause","ref","scrollRef","useRef","demoSeekTime","setDemoSeekTime","useState","demoRate","setDemoRate","demoPlaying","setDemoPlaying","showSpeedMenu","setShowSpeedMenu","activeDemoIdx","setActiveDemoIdx","computeActiveIdx","timeSec","i","turnTime","parseTimeStr","timeStr","parts","SPEED_OPTIONS","isDemo","activeRate","activePlaying","useImperativeHandle","handleSeek","idx","cards","_a","timeSeconds","clamped","handleTogglePlay","prev","handleSeekBack","handleSeekForward","handleSetRate","rate","handleDemoTurnPlayPause","formatTimeRange","startMs","endMs","fmt","ms","minutes","turns","_b","obs","el","demoDuration","effectiveTime","progress","demoCurrentTime","jsxs","jsx","RotateCcw","Pause","Play","RotateCw","ChevronDown","speed","Fragment","Timeline","e","rect","clickX","seekTime","speaker","rowIdx","pct","seg","TranscriptCard","card","isActive","isCustomer","AudioLines","PauseCircle","PlayCircle"],"mappings":"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"}