chordia-ui 3.4.2 → 3.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chordia-ui",
-  "version": "3.4.2",
+  "version": "3.4.4",
   "description": "Chordia Design System - UI components, tokens, and Tailwind preset",
   "type": "module",
   "main": "dist/index.cjs.js",

package/src/components/UpdatedInteractionDetails/UpdatedCompassScore.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Info } from 'lucide-react';
 
 /*
@@ -97,6 +97,56 @@ const ScoreBar = ({ value = 0, maxValue = 5 }) => (
   </div>
 );
 
+const LEGEND_TOOLTIPS = {
+  'CSAT': 'Predicted Customer Satisfaction',
+  'Resolution': 'Predicted Resolution: was the issue fully resolved?',
+  'Process Adherence': 'Process Adherence: Did the agent follow procedures?',
+  'Communication': 'Predicted Communication Quality: Clarity, Empathy, Professionalism',
+};
+
+const InfoTooltip = ({ text, children }) => {
+  const [show, setShow] = useState(false);
+  return (
+    <div
+      style={{ position: 'relative', display: 'inline-flex' }}
+      onMouseEnter={() => setShow(true)}
+      onMouseLeave={() => setShow(false)}
+    >
+      {children}
+      {show && (
+        <div style={{
+          position: 'absolute',
+          bottom: '100%',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          marginBottom: 6,
+          display: 'flex',
+          width: 160,
+          padding: 10,
+          alignItems: 'center',
+          gap: 10,
+          borderRadius: 4,
+          border: '1px solid var(--Grey-absent, #D9D9D9)',
+          background: 'var(--Grey-Strong, #2E3236)',
+          zIndex: 20,
+          pointerEvents: 'none',
+        }}>
+          <span style={{
+            width: 140,
+            flexShrink: 0,
+            color: '#FFF',
+            fontSize: 12,
+            fontWeight: 400,
+            lineHeight: 'normal',
+          }}>
+            {text}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
 const LegendItem = ({ label, value = 0, maxValue = 5 }) => (
   <div style={{
     display: 'flex',
@@ -119,7 +169,9 @@ const LegendItem = ({ label, value = 0, maxValue = 5 }) => (
       }}>
         {label}
       </span>
-      <Info size={14} color={COLORS.infoIcon} strokeWidth={1} />
+      <InfoTooltip text={LEGEND_TOOLTIPS[label] || label}>
+        <Info size={14} color={COLORS.infoIcon} strokeWidth={1} style={{ cursor: 'pointer' }} />
+      </InfoTooltip>
     </div>
     <ScoreBar value={value} maxValue={maxValue} />
   </div>

package/src/components/UpdatedInteractionDetails/UpdatedInteractionDetails.jsx

@@ -43,6 +43,17 @@ const UpdatedInteractionDetails = ({
   turnObservations,
   highlightedTurns,
   onTurnPlayPause,
+  // Signal evidence playback — host app can provide to play audio segments from signals
+  onPlayEvidence,
+  onHighlightTurns,
+  // Compass score props
+  compassScore,
+  predictedCsat,
+  // Customer session dropdown
+  customerSessions: customerSessionsList,
+  customerSessionCount,
+  onSessionClick,
+  onViewAllSessions,
   // Footer navigation
   prevSessionTitle,
   prevSessionDesc,
@@ -55,6 +66,8 @@ const UpdatedInteractionDetails = ({
   const [expandedSignals, setExpandedSignals] = useState(new Set());
   const [showSessionDropdown, setShowSessionDropdown] = useState(false);
   const [hoveredSessionIdx, setHoveredSessionIdx] = useState(null);
+  const [internalPlaying, setInternalPlaying] = useState(false);
+  const [internalCurrentTime, setInternalCurrentTime] = useState(0);
   const recordingRef = useRef(null);
 
   // Section refs for scroll-to-section tab behavior
@@ -72,23 +85,42 @@ const UpdatedInteractionDetails = ({
     }
   };
 
-  const sessionHistory = [
-    { title: 'Tire Repair Appointment', date: '11/12/2025, 2:30:00 PM' },
-    { title: 'Quote Confirmation', date: '10/1/2025, 9:00:00 AM' },
-    { title: 'Automative Repair Enquiry', date: '09/15/2025, 11:45:00 AM' },
-    { title: 'Vehicle Inspection Reminder', date: '07/20/2025, 1:00:00 PM' },
-    { title: 'Oil Change Service', date: '05/5/2025, 10:00:00 AM' },
-  ];
+  const sessionHistory = customerSessionsList || [];
 
   /* Called from Signals "Show in transcript" icon — seeks recording to that time */
   const handleShowInTranscript = (startMs) => {
     const timeSec = startMs / 1000;
-    // Call the recording component's seek via ref
     if (recordingRef.current?.seekTo) {
       recordingRef.current.seekTo(timeSec);
     }
   };
 
+  /* Called from Signals evidence play button — seeks + plays audio segment */
+  const handlePlayEvidence = (ev) => {
+    if (onPlayEvidence) {
+      onPlayEvidence(ev);
+    } else {
+      // Default: seek to evidence start time via recording ref
+      const startMs = ev.start_ms ?? ev.startMs;
+      if (startMs != null && recordingRef.current?.seekTo) {
+        recordingRef.current.seekTo(startMs / 1000);
+        setInternalPlaying(true);
+        setInternalCurrentTime(startMs / 1000);
+        // Stop playing after evidence duration
+        const endMs = ev.end_ms ?? ev.endMs ?? (startMs + 5000);
+        const durationMs = endMs - startMs;
+        setTimeout(() => setInternalPlaying(false), durationMs);
+      }
+    }
+  };
+
+  /* Called to highlight transcript turns related to evidence */
+  const handleHighlightTurns = (turnIds) => {
+    if (onHighlightTurns) {
+      onHighlightTurns(turnIds);
+    }
+  };
+
   const toggleSignal = (key) => {
     setExpandedSignals((prev) => {
       const next = new Set(prev);
@@ -162,7 +194,7 @@ const UpdatedInteractionDetails = ({
 
   const agentName = externalAgentName || 'Agent';
   const customerName = externalCustomerName || 'Customer';
-  const customerSessions = 8;
+  const sessionCount = customerSessionCount ?? sessionHistory.length;
   const dateStr = meta.evaluated_dt ? new Date(meta.evaluated_dt).toLocaleString() : '3/29/2026, 8:30:00 AM';
   const direction = demoCallPurpose.interaction_direction === 'inbound' ? 'Inbound' : 'Outbound';
 
@@ -315,7 +347,7 @@ const UpdatedInteractionDetails = ({
                     >
                       <CircleUser size={16} color="var(--Grey-Muted, #808183)" strokeWidth={1.5} />
                       <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--Grey-Strong, #2E3236)', lineHeight: 1.2 }}>
-                        {customerName} ({customerSessions} Sessions)
+                        {customerName} ({sessionCount} Sessions)
                       </span>
                       {showSessionDropdown
                         ? <ChevronUp size={16} color="var(--Grey-Muted, #808183)" strokeWidth={1.5} />
@@ -358,7 +390,7 @@ const UpdatedInteractionDetails = ({
                               color: 'var(--Grey-Muted, #808183)',
                               lineHeight: 1,
                             }}>
-                              {customerSessions} Sessions in past
+                              {sessionCount} Sessions in past
                             </span>
                           </div>
                         </div>
@@ -366,7 +398,8 @@ const UpdatedInteractionDetails = ({
                         {/* Session list — Figma: 264px, pad 12 16, space-between, center */}
                         {sessionHistory.map((session, i) => (
                           <div
-                            key={i}
+                            key={session.id || i}
+                            onClick={() => { if (onSessionClick) onSessionClick(session); setShowSessionDropdown(false); }}
                             onMouseEnter={() => setHoveredSessionIdx(i)}
                             onMouseLeave={() => setHoveredSessionIdx(null)}
                             style={{
@@ -413,7 +446,9 @@ const UpdatedInteractionDetails = ({
                           display: 'flex',
                           justifyContent: 'center',
                         }}>
-                          <button style={{
+                          <button
+                            onClick={() => { if (onViewAllSessions) onViewAllSessions(); setShowSessionDropdown(false); }}
+                            style={{
                             display: 'flex',
                             height: 32,
                             padding: '16px 16px 16px 12px',
@@ -453,7 +488,12 @@ const UpdatedInteractionDetails = ({
             }}>
               {/* Left — Compass Score */}
               <div style={{ flex: 1, minWidth: 0 }}>
-                <UpdatedCompassScore />
+                <UpdatedCompassScore
+                  score={compassScore ?? 0}
+                  maxScore={100}
+                  predictedScore={predictedCsat ?? 0}
+                  predictedLabel="Predicted Objective"
+                />
               </div>
 
               {/* Right — Context grid + Agent Lift Analysis stacked */}
@@ -526,7 +566,11 @@ const UpdatedInteractionDetails = ({
                 signals={demoSignals}
                 expandedSignals={expandedSignals}
                 toggleSignal={toggleSignal}
+                playEvidence={handlePlayEvidence}
+                highlightTurns={handleHighlightTurns}
                 onShowInTranscript={handleShowInTranscript}
+                timelinePlaying={timelinePlaying || internalPlaying}
+                currentTimeSeconds={currentTimeSeconds ?? internalCurrentTime}
               />
             </div>
             <div style={{ flex: 1, minWidth: 0 }}>

package/src/components/UpdatedInteractionDetails/UpdatedInteractionRecording.jsx

@@ -5,7 +5,6 @@ import {
   AudioLines, PlayCircle, PauseCircle,
   FileSignal,
 } from 'lucide-react';
-import Timeline from '../media/Timeline.jsx';
 
 function fmtTime(seconds) {
   const m = Math.floor(seconds / 60);
@@ -222,7 +221,13 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
   useImperativeHandle(ref, () => ({
     seekTo: (timeSec) => {
       handleSeek(timeSec);
-      if (selfManaged) {
+      if (parentManaged) {
+        // Parent manages audio — seek was already called via handleSeek → externalOnSeek
+        // Now trigger play if not already playing
+        if (!externalPlaying && externalOnTogglePlay) {
+          externalOnTogglePlay();
+        }
+      } else if (selfManaged) {
         const audio = internalAudioRef.current;
         if (audio) {
           audio.play().then(() => {
@@ -465,91 +470,86 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
           </div>
         </div>
 
-        {/* ── Row 2: Progress bar ── */}
-        {audioUrl && parentManaged ? (
-          <>
-            <Timeline
-              segments={timelineSegments}
-              durationSeconds={durationSeconds}
-              currentTimeSeconds={externalCurrentTime}
-              onSeek={externalOnSeek}
-              showControls={false}
-              hasRecording
-              timelinePlaying={externalPlaying}
-              playbackRate={externalRate}
-            />
-            <audio ref={externalAudioRef} preload="none" style={{ display: 'none' }}>
-              <source src={audioUrl} type="audio/mpeg" />
-            </audio>
-          </>
-        ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-            {/* Time label + scrubber bar */}
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-              <span style={{
-                fontSize: 13, fontWeight: 600,
-                color: progress > 0 ? 'var(--Green-Primary, #00925F)' : 'var(--Grey-Strong, #2E3236)',
-                fontFamily: 'var(--font-sans)',
-                lineHeight: 1.2,
-                minWidth: 60,
-              }}>
-                {fmtTime(displayTime)}
-              </span>
-              <div
-                onClick={(e) => {
-                  const rect = e.currentTarget.getBoundingClientRect();
-                  const clickX = e.clientX - rect.left;
-                  const pct = Math.max(0, Math.min(1, clickX / rect.width));
-                  handleSeek(pct * effectiveDuration);
-                }}
+        {/* ── Row 2: Progress bar (V4 style for all modes) ── */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          {/* Time label + scrubber bar — same layout as speaker rows: 60px label + 8px gap + flex bar */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <span style={{
+              fontSize: 13, fontWeight: 500,
+              color: 'var(--Grey-Strong, #2E3236)',
+              fontFamily: 'var(--font-sans)',
+              lineHeight: 1.2,
+              minWidth: 60,
+            }}>
+              {fmtTime(effectiveDuration)}
+            </span>
+            <div
+              onClick={(e) => {
+                const rect = e.currentTarget.getBoundingClientRect();
+                const clickX = e.clientX - rect.left;
+                const pct = Math.max(0, Math.min(1, clickX / rect.width));
+                handleSeek(pct * effectiveDuration);
+              }}
+              style={{
+                flex: 1, height: 16,
+                position: 'relative',
+                display: 'flex', alignItems: 'center',
+                cursor: 'pointer',
+              }}
+            >
+              {/* Background track */}
+              <div style={{
+                position: 'absolute', left: 0, right: 0,
+                height: 4, borderRadius: 2,
+                background: 'var(--rail-surface-2, #E3E1D7)',
+                pointerEvents: 'none',
+              }} />
+              {/* Played portion */}
+              <div style={{
+                position: 'absolute', left: 0, top: '50%',
+                transform: 'translateY(-50%)',
+                width: `${progress}%`,
+                height: 4, borderRadius: 2,
+                background: 'var(--Green-Primary, #00925F)',
+                pointerEvents: 'none',
+              }} />
+              {/* Scrubber handle */}
+              <svg
+                width="16" height="16" viewBox="0 0 16 16" fill="none"
+                xmlns="http://www.w3.org/2000/svg"
                 style={{
-                  flex: 1, height: 16,
-                  position: 'relative',
-                  display: 'flex', alignItems: 'center',
-                  cursor: 'pointer',
+                  position: 'absolute',
+                  left: `${progress}%`,
+                  top: '50%',
+                  transform: 'translate(-50%, -50%)',
+                  pointerEvents: 'none',
                 }}
               >
-                {/* Background track — Figma: #E3E1D7, stroke w=4 */}
-                <div style={{
-                  position: 'absolute', left: 0, right: 0,
-                  height: 4, borderRadius: 2,
-                  background: 'var(--rail-surface-2, #E3E1D7)',
-                  pointerEvents: 'none',
-                }} />
-                {/* Played portion — Figma: #00925F, stroke w=4 */}
-                <div style={{
-                  position: 'absolute', left: 0, top: '50%',
-                  transform: 'translateY(-50%)',
-                  width: `${progress}%`,
-                  height: 4, borderRadius: 2,
-                  background: 'var(--Green-Primary, #00925F)',
-                  pointerEvents: 'none',
-                }} />
-                {/* Scrubber handle — Figma ellipse */}
-                <svg
-                  width="16" height="16" viewBox="0 0 16 16" fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                  style={{
-                    position: 'absolute',
-                    left: `${progress}%`,
-                    top: '50%',
-                    transform: 'translate(-50%, -50%)',
-                    pointerEvents: 'none',
-                  }}
-                >
-                  <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"
-                  />
-                </svg>
-              </div>
+                <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"
+                />
+              </svg>
             </div>
+          </div>
 
-            {/* ── Row 3: Speaker timeline bars + playback indicator ── */}
-            <div style={{ position: 'relative', paddingBottom: 30, cursor: 'pointer' }}>
-              {['Agent', 'Customer'].map((speaker, rowIdx) => (
+          {/* ── Speaker timeline bars + playback indicator ── */}
+          <div style={{ position: 'relative', paddingBottom: 30, cursor: 'pointer' }}>
+            {[agentName, customerName].map((speaker, rowIdx) => {
+              const isAgent = rowIdx === 0;
+              // Build segments from real timelineSegments or fall back to demo
+              const speakerSegments = timelineSegments?.length
+                ? timelineSegments
+                    .filter(s => isAgent ? s.actor === agentName : s.actor === customerName)
+                    .map(s => ({
+                      start: effectiveDuration > 0 ? s.startTime / effectiveDuration : 0,
+                      end: effectiveDuration > 0 ? s.endTime / effectiveDuration : 0,
+                    }))
+                : (DEMO_SEGMENTS[isAgent ? 'Agent' : 'Customer'] || []);
+
+              return (
                 <div key={speaker} style={{
                   display: 'flex', alignItems: 'center', gap: 8,
                   height: 20,
@@ -576,7 +576,7 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
                       cursor: 'pointer',
                     }}
                   >
-                    {/* Thin baseline — Figma: #E3E1D7, stroke w=4 */}
+                    {/* Thin baseline */}
                     <div style={{
                       position: 'absolute', left: 0, right: 0,
                       top: '50%', transform: 'translateY(-50%)',
@@ -584,68 +584,74 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
                       background: 'var(--rail-surface-2, #E3E1D7)',
                     }} />
                     {/* Speech segments */}
-                    {DEMO_SEGMENTS[speaker].map((seg, i) => (
+                    {speakerSegments.map((seg, i) => (
                       <div key={i} style={{
                         position: 'absolute',
                         left: `${seg.start * 100}%`,
                         width: `${(seg.end - seg.start) * 100}%`,
                         top: 0, bottom: 0, borderRadius: 3,
-                        background: speaker === 'Agent'
+                        background: isAgent
                           ? 'var(--Grey-Strong, #2E3236)'
                           : 'var(--Grey-Muted, #808183)',
                       }} />
                     ))}
                   </div>
                 </div>
-              ))}
-
-              {/* ── Playback position: dotted line + time tooltip ── */}
+              );
+            })}
+
+            {/* ── Playback position: dotted line + time tooltip ── */}
+            <div style={{
+              position: 'absolute',
+              left: 68,   /* 60 label + 8 gap */
+              right: 0,
+              top: 0,
+              bottom: 0,
+              pointerEvents: 'none',
+            }}>
+              {/* Dotted vertical line */}
               <div style={{
                 position: 'absolute',
-                left: 68,   /* 60 label + 8 gap */
-                right: 0,
+                left: `${progress}%`,
                 top: 0,
+                height: 44,
+                transform: 'translateX(-50%)',
+                borderLeft: '1.5px dashed var(--Grey-Muted, #808183)',
+                opacity: 0.5,
+              }} />
+
+              {/* Time tooltip */}
+              <div style={{
+                position: 'absolute',
+                left: `${progress}%`,
                 bottom: 0,
-                pointerEvents: 'none',
+                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',
               }}>
-                {/* Dotted vertical line */}
-                <div style={{
-                  position: 'absolute',
-                  left: `${progress}%`,
-                  top: 0,
-                  height: 44, /* spans both rows */
-                  transform: 'translateX(-50%)',
-                  borderLeft: '1.5px dashed var(--Grey-Muted, #808183)',
-                  opacity: 0.5,
-                }} />
-
-                {/* Time tooltip — Figma: Frame 30, bg=#2E3236, pad 4 6, r=4, 14px/600/#FFF */}
-                <div style={{
-                  position: 'absolute',
-                  left: `${progress}%`,
-                  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',
-                }}>
-                  {fmtTime(displayTime)}
-                </div>
+                {fmtTime(displayTime)}
               </div>
             </div>
-
-            {/* Hidden audio element for self-managed mode */}
-            {selfManaged && (
-              <audio ref={internalAudioRef} preload="auto" style={{ display: 'none' }}>
-                <source src={audioUrl} type="audio/mpeg" />
-              </audio>
-            )}
           </div>
-        )}
+
+          {/* Hidden audio element — only for self-managed mode */}
+          {selfManaged && (
+            <audio ref={internalAudioRef} preload="auto" style={{ display: 'none' }}>
+              <source src={audioUrl} type="audio/mpeg" />
+            </audio>
+          )}
+          {/* Hidden audio element — for parent-managed mode */}
+          {parentManaged && audioUrl && (
+            <audio ref={externalAudioRef} preload="auto" style={{ display: 'none' }}>
+              <source src={audioUrl} type="audio/mpeg" />
+            </audio>
+          )}
+        </div>
       </div>
 
       {/* ════════════════════════════════════════

package/src/components/UpdatedInteractionDetails/UpdatedInteractionSignals.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ChevronDown, ChevronUp, PlayCircle, FileSignal, ScrollText } from 'lucide-react';
+import { ChevronDown, ChevronUp, PlayCircle, PauseCircle, FileSignal, ScrollText } from 'lucide-react';
 
 /* Hover circle wrapper for icons */
 const HoverIcon = ({ children, size = 28, onClick, title }) => {
@@ -285,11 +285,19 @@ const UpdatedInteractionSignals = ({
                             }}
                           >
                             <HoverIcon size={28}>
-                              <PlayCircle
-                                size={17}
-                                color={isEvPlaying(ev) ? 'var(--rail-orange, #C98A5A)' : 'var(--Grey-Muted, #808183)'}
-                                strokeWidth={1}
-                              />
+                              {isEvPlaying(ev) ? (
+                                <PauseCircle
+                                  size={17}
+                                  color="var(--Grey-Muted, #808183)"
+                                  strokeWidth={1.5}
+                                />
+                              ) : (
+                                <PlayCircle
+                                  size={17}
+                                  color="var(--Grey-Muted, #808183)"
+                                  strokeWidth={1}
+                                />
+                              )}
                             </HoverIcon>
                             <span style={{
                               fontSize: 13,

package/src/components/login/LoginPage.jsx

@@ -830,10 +830,11 @@ export default function LoginPage({
 
       {/* ── RIGHT — Form Panel ── */}
       <div style={{
-        flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center',
-        alignItems: 'center', padding: view === 'waitlist' ? '20px 48px' : '32px 72px', position: 'relative',
+        flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column',
+        alignItems: 'center', padding: view === 'waitlist' ? '20px 48px' : '32px 72px 40px', position: 'relative',
         background: 'white',
         overflowY: 'auto', minHeight: 0,
+        justifyContent: 'center',
       }}>
         <div style={{
           display: 'flex',
@@ -1414,12 +1415,26 @@ export default function LoginPage({
                   }}
                 />
                 {/* <NavRow text="Not a member yet?" linkText="Sign Up" onClick={() => { setFirstName(''); setLastName(''); setSignupEmail(''); setSignupPassword(''); setSignupConfirm(''); setSignupError(''); setView('signup'); onSignUp?.(); }} /> */}
-                <TermsFooter onTerms={onTerms} onPrivacyPolicy={onPrivacyPolicy} paddingTop={16} />
               </div>
             </div>
           )}
 
         </div>
+        {/* Terms footer pinned to bottom — only for sign-in view (other views have inline footer) */}
+        {view === 'signin' && (
+          <div style={{
+            position: 'absolute',
+            bottom: 40,
+            left: 0,
+            right: 0,
+            display: 'flex',
+            justifyContent: 'center',
+          }}>
+            <div style={{ width: '100%', maxWidth: 360 }}>
+              <TermsFooter onTerms={onTerms} onPrivacyPolicy={onPrivacyPolicy} paddingTop={0} />
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

package/dist/TranscriptCard.cjs.js

@@ -1,7 +0,0 @@
-"use strict";const r=require("react/jsx-runtime"),l=require("react"),T=require("lucide-react"),w={customer:{label:"Customer",railColor:"var(--rail-discovery)",cardBg:"var(--card-customer)",cardBgHighlight:"rgba(94, 136, 176, 0.12)",borderColor:"var(--border-subtle)"},agent:{label:"Agent",railColor:"var(--rail-outcome)",cardBg:"var(--card-agent)",cardBgHighlight:"rgba(107, 124, 147, 0.10)",borderColor:"var(--border-subtle)"},assistant:{label:"AI Assistant",railColor:"var(--rail-purple)",cardBg:"var(--card-assistant)",cardBgHighlight:"rgba(155, 122, 168, 0.10)",borderColor:"var(--border-subtle)"},system:{label:"System",railColor:"var(--text-faint)",cardBg:"transparent",cardBgHighlight:"transparent",borderColor:"transparent"}},E="conversation-turn-keyframes";function L(){if(typeof document>"u"||document.getElementById(E))return;const i=document.createElement("style");i.id=E,i.textContent=`
-    @keyframes turn-playing-pulse {
-      0%, 100% { opacity: 0.4; }
-      50% { opacity: 0.9; }
-    }
-  `,document.head.appendChild(i)}function A({role:i="agent",text:s,actorLabel:c,actorRailColor:h,actionKicker:x,toolBadges:f,streaming:d=!1,meta:v,timeRange:b,isHighlighted:m=!1,highlightRailColor:t,observations:n,onObservationClick:y,children:k}){l.useEffect(()=>{L()},[]);const p=w[i]||w.agent,j=c||p.label,C=h||p.railColor,B=m||d;return i==="system"?r.jsx("div",{style:{textAlign:"center",padding:"6px 0",flexShrink:0,fontSize:"var(--text-sm, 11px)",color:"var(--text-faint, rgba(30,33,37,0.36))",fontWeight:500,letterSpacing:"0.02em"},children:s}):r.jsxs("div",{style:{position:"relative",padding:"10px 14px 10px 18px",borderRadius:10,overflow:"hidden",flexShrink:0,background:B?p.cardBgHighlight:p.cardBg,border:`1px solid ${d?C:p.borderColor}`,boxShadow:d?`0 0 8px ${p.cardBgHighlight}`:"none",transition:"background 0.2s, border-color 0.2s, box-shadow 0.2s"},children:[r.jsx("div",{style:{position:"absolute",left:0,top:0,bottom:0,width:"var(--rail-width-thin, 4px)",backgroundColor:C,borderRadius:"10px 0 0 10px"}}),r.jsxs("div",{style:{display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:8,marginBottom:4},children:[r.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:2},children:[x?r.jsx("div",{style:{fontSize:"var(--text-xs-plus, 10.5px)",fontWeight:650,textTransform:"uppercase",letterSpacing:"var(--tracking-label, 0.16em)",color:C},children:x}):null,r.jsx("div",{style:{fontSize:"var(--text-xs-plus, 10.5px)",fontWeight:650,textTransform:"uppercase",letterSpacing:"var(--tracking-label, 0.16em)",color:"var(--text-faint, rgba(30,33,37,0.36))"},children:j})]}),f&&f.length>0?r.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:4,flexShrink:0,justifyContent:"flex-end"},children:f.map((e,a)=>{const o=e.pending,g=!o&&e.success===!1,u=o?"var(--rail-discovery, #5E88B0)":g?"var(--rail-compliance, #C98A5A)":"var(--text-xfaint, rgba(30,33,37,0.28))";return r.jsxs("span",{style:{display:"inline-flex",alignItems:"center",gap:5,fontSize:"var(--text-xs, 10px)",padding:"2px 8px 2px 6px",borderRadius:999,background:"var(--paper, rgba(255,255,255,0.78))",border:"1px solid var(--border-subtle, rgba(52,58,64,0.08))",color:"var(--text-faint, rgba(30,33,37,0.36))",fontWeight:500,fontFamily:"var(--font-fira-code, var(--font-mono, monospace))",letterSpacing:"0.01em",lineHeight:1.4,whiteSpace:"nowrap"},children:[r.jsx("span",{style:{width:5,height:5,borderRadius:"50%",backgroundColor:u,flexShrink:0}}),e.name]},a)})}):null]}),r.jsxs("div",{style:{fontSize:"var(--text-md, 13px)",lineHeight:"var(--leading-normal, 1.5)",color:d?"var(--text-strong, rgba(30,33,37,0.92))":"var(--text-base, rgba(30,33,37,0.78))",fontWeight:d?550:400},children:[s,d?r.jsx("span",{style:{display:"inline-block",width:6,height:14,background:C,marginLeft:2,borderRadius:1,animation:"cursorBlink 0.8s ease-in-out infinite",verticalAlign:"text-bottom"}}):null]}),b||k||n&&n.length>0?r.jsxs("div",{style:{marginTop:6,display:"flex",alignItems:"center",gap:6},children:[k,b?r.jsx("span",{style:{fontSize:"var(--text-sm, 11px)",padding:"2px 8px",borderRadius:999,border:"1px solid var(--border, rgba(52,58,64,0.12))",background:"var(--timestamp-bg, rgba(255,255,255,0.70))",color:"var(--text-muted, rgba(30,33,37,0.56))",fontFamily:"var(--font-mono, monospace)"},children:b}):null,n&&n.length>0?r.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:4,marginLeft:"auto"},children:n.map((e,a)=>r.jsxs("span",{onClick:e.onClick||(y?()=>y(e):void 0),style:{display:"inline-flex",alignItems:"center",gap:4,fontSize:"var(--text-xs, 10px)",padding:"2px 8px",borderRadius:999,background:`color-mix(in srgb, ${e.color||"var(--state-present)"} 12%, transparent)`,border:`1px solid color-mix(in srgb, ${e.color||"var(--state-present)"} 25%, transparent)`,color:e.color||"var(--state-present)",fontWeight:550,lineHeight:1.4,whiteSpace:"nowrap",cursor:e.onClick||y?"pointer":"default",transition:"background 0.15s"},title:e.reason||e.label,children:[r.jsx("span",{style:{width:4,height:4,borderRadius:"50%",backgroundColor:e.color||"var(--state-present)",flexShrink:0,opacity:.7}}),e.label]},a))}):null]}):null,v?r.jsx("div",{style:{marginTop:6,fontSize:"var(--text-xs-plus, 10.5px)",color:"var(--text-faint, rgba(30,33,37,0.36))",fontFamily:"var(--font-mono, monospace)"},children:v}):null,B&&t?r.jsx("div",{style:{position:"absolute",right:8,top:8,bottom:8,width:6,borderRadius:4,backgroundColor:t,opacity:.7,animation:"turn-playing-pulse 1.5s ease-in-out infinite"}}):null]})}const P=i=>{const[s,c]=i.split("–").map(h=>{const[x,f]=h.split(":").map(Number);return x*60+f});return{start:s,end:c}},W=i=>({customer:"customer",agent:"agent",third_party:"agent",system:"system",assistant:"assistant"})[i]||"agent";function z({turns:i,audioUrl:s,activeTurnIndex:c=-1,autoScrollActiveTurn:h=!1,isExternalPlaying:x=!1,onTurnPlayPause:f}){const[d,v]=l.useState(null),[b,m]=l.useState(!1),t=l.useRef(null),n=l.useRef(null),y=l.useRef([]),k=l.useRef(null),p=l.useRef(-1),j=typeof f=="function",C=x!==void 0;l.useEffect(()=>{if(s)return t.current=new Audio(s),t.current.preload="auto",()=>{t.current&&(t.current.pause(),t.current=null)}},[s]),l.useEffect(()=>()=>{t.current&&(t.current.pause(),n.current&&t.current.removeEventListener("timeupdate",n.current))},[]),l.useEffect(()=>{if(!h||c<0)return;const e=k.current,a=y.current[c];if(!a||!e)return;const o=e.getBoundingClientRect(),g=a.getBoundingClientRect(),u=12,R=g.top>=o.top+u&&g.bottom<=o.bottom-8;if(!(p.current===c)||!R){const H=g.top-o.top+e.scrollTop;e.scrollTop=Math.max(H-u,0)}p.current=c},[c,h]);const B=(e,a)=>{if(j){f(i[a],a);return}if(d===a&&b)t.current&&(t.current.pause(),n.current&&(t.current.removeEventListener("timeupdate",n.current),n.current=null)),m(!1);else{const o=d;if(v(a),s&&t.current){const{start:g,end:u}=P(e);o!==null&&o!==a&&(t.current.pause(),n.current&&(t.current.removeEventListener("timeupdate",n.current),n.current=null));const R=()=>{if(t.current){if(t.current.currentTime=g,u){const S=()=>{t.current&&t.current.currentTime>=u&&(t.current.pause(),m(!1),v(null),n.current&&(t.current.removeEventListener("timeupdate",n.current),n.current=null))};n.current=S,t.current.addEventListener("timeupdate",S)}t.current.play().then(()=>m(!0)).catch(S=>{S&&S.name==="AbortError"||(m(!1),v(null))})}};t.current.readyState>=2?R():(t.current.addEventListener("loadedmetadata",R,{once:!0}),t.current.load())}else m(!0)}};return r.jsxs("div",{ref:k,className:"custom-thin-scrollbar-library",style:{maxHeight:560,overflowY:"auto",scrollBehavior:"smooth",border:"1px solid var(--border, rgba(52,58,64,0.12))",borderRadius:"12px 0px 0px 12px",background:"var(--paper-elevated, rgba(255,255,255,0.82))",padding:16},children:[r.jsx("div",{style:{fontSize:"var(--text-xs-plus, 10.5px)",fontWeight:650,textTransform:"uppercase",letterSpacing:"var(--tracking-label, 0.16em)",color:"var(--text-faint, rgba(30,33,37,0.36))",marginBottom:12},children:"Transcript"}),r.jsx("div",{style:{display:"flex",flexDirection:"column",gap:8},children:i.map((e,a)=>{const o=j||C?!!x&&c===a:d===a&&b,g=!!e.isHighlighted||o,u=W(e.actorType);return r.jsx("div",{ref:R=>{y.current[a]=R},children:r.jsx(A,{role:u,text:e.text,actorLabel:e.actor,actorRailColor:e.actorColor,timeRange:e.timeRange,isHighlighted:g,highlightRailColor:o?e.highlightColor||(u==="agent"?"var(--rail-outcome)":"var(--rail-discovery)"):e.highlightColor,toolBadges:e.toolBadges,observations:e.observations,onObservationClick:e.onObservationClick,children:e.timeRange?r.jsx("button",{onClick:()=>B(e.timeRange,a),style:{width:24,height:24,borderRadius:"50%",border:"1px solid var(--border, rgba(52,58,64,0.12))",background:o?"var(--rail-discovery, #5E88B0)":"var(--paper, rgba(255,255,255,0.78))",display:"inline-flex",alignItems:"center",justifyContent:"center",cursor:"pointer",padding:0,transition:"all 0.15s"},"aria-label":o?`Pause segment ${e.timeRange}`:`Play segment ${e.timeRange}`,children:o?r.jsx(T.Pause,{style:{width:12,height:12,color:"var(--paper, #fff)",fill:"var(--paper, #fff)"},strokeWidth:0}):r.jsx(T.Play,{style:{width:12,height:12,color:"var(--text-muted, rgba(30,33,37,0.56))",fill:"var(--text-muted, rgba(30,33,37,0.56))",marginLeft:1},strokeWidth:0})}):null})},a)})})]})}exports.ConversationTurn=A;exports.TranscriptCard=z;
-//# sourceMappingURL=TranscriptCard.cjs.js.map