chordia-ui 3.4.0 → 3.4.2

package/package.json

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

package/src/components/UpdatedInteractionDetails/UpdatedInteractionDetails.jsx

@@ -10,7 +10,7 @@ import UpdatedCompassScore from './UpdatedCompassScore';
 const TABS = [
   { key: 'overview', label: 'Overview' },
   { key: 'coaching', label: 'Coaching Summary' },
-  { key: 'signals', label: 'Signals & Guidance' },
+  { key: 'signals', label: 'Signals & Recording' },
   { key: 'comments', label: 'Comments' },
 ];
 
@@ -21,6 +21,28 @@ const UpdatedInteractionDetails = ({
   data,
   coachingData,
   audioUrl,
+  // Audio/playback props — pass these when the host app manages audio externally
+  // (like InteractionDetailPanel does). If omitted, UpdatedInteractionRecording
+  // manages its own audio element internally.
+  audioRef: externalAudioRef,
+  currentTimeSeconds,
+  timelinePlaying,
+  playbackRate,
+  timelineSegments,
+  onSeek,
+  onTogglePlay,
+  onSeekBack,
+  onSeekForward,
+  onSetPlaybackRate,
+  // Speaker names
+  agentName: externalAgentName,
+  customerName: externalCustomerName,
+  // Transcript props — pass real transcript data from the host app
+  transcript,
+  activeTurnIndex,
+  turnObservations,
+  highlightedTurns,
+  onTurnPlayPause,
   // Footer navigation
   prevSessionTitle,
   prevSessionDesc,
@@ -35,6 +57,21 @@ const UpdatedInteractionDetails = ({
   const [hoveredSessionIdx, setHoveredSessionIdx] = useState(null);
   const recordingRef = useRef(null);
 
+  // Section refs for scroll-to-section tab behavior
+  const overviewRef = useRef(null);
+  const coachingRef = useRef(null);
+  const signalsRef = useRef(null);
+  const commentsRef = useRef(null);
+  const sectionRefs = { overview: overviewRef, coaching: coachingRef, signals: signalsRef, comments: commentsRef };
+
+  const handleTabClick = (key) => {
+    setActiveTab(key);
+    const ref = sectionRefs[key];
+    if (ref?.current) {
+      ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
   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' },
@@ -123,8 +160,8 @@ const UpdatedInteractionDetails = ({
     ],
   };
 
-  const agentName = 'David';
-  const customerName = 'Sandra Bullock';
+  const agentName = externalAgentName || 'Agent';
+  const customerName = externalCustomerName || 'Customer';
   const customerSessions = 8;
   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';
@@ -173,7 +210,7 @@ const UpdatedInteractionDetails = ({
         {TABS.map((tab) => (
           <button
             key={tab.key}
-            onClick={() => setActiveTab(tab.key)}
+            onClick={() => handleTabClick(tab.key)}
             style={{
               display: 'flex',
               padding: 16,
@@ -199,18 +236,17 @@ const UpdatedInteractionDetails = ({
         ))}
       </div>
 
-      {/* Tab Content */}
+      {/* All sections rendered — tabs scroll to them */}
       <div style={{ padding: 24, flex: 1, overflowY: 'auto' }}>
-        {/* ═══ OVERVIEW TAB ═══ */}
-        {activeTab === 'overview' && (
-          <div style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'flex-end',
-            alignItems: 'flex-start',
-            gap: 24,
-            alignSelf: 'stretch',
-          }}>
+        {/* ═══ OVERVIEW SECTION ═══ */}
+        <div ref={overviewRef} style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'flex-end',
+          alignItems: 'flex-start',
+          gap: 24,
+          alignSelf: 'stretch',
+        }}>
             {/* Figma node 106-3508: Section Header — horizontal, gap: 16, height: 40, center */}
             <div style={{
               display: 'flex',
@@ -443,108 +479,90 @@ const UpdatedInteractionDetails = ({
               </div>
             </div>
 
-            {/* Coaching Summary — full width */}
-            <UpdatedCoachingSynthesisCard data={demoCoaching} />
-
-            {/* Figma node 222-660: SIGNALS & RECORDING section */}
-            <div style={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 16,
-              alignSelf: 'stretch',
-            }}>
-              {/* Section header — Figma: FileSignal icon + "Signals & Recording" 16px/700 */}
-              <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 8,
-              }}>
-                <FileSignal size={24} color="#C98A5A" strokeWidth={2} />
-                <span style={{
-                  fontSize: 16,
-                  fontWeight: 600,
-                  color: 'var(--Grey-Strong, #2E3236)',
-                  lineHeight: 1.2,
-                  textTransform: 'uppercase',
-                }}>
-                  Signals & Recording
-                </span>
-              </div>
-
-              {/* Content: Signals (left) | Recording+Transcript (right) */}
-              <div style={{
-                display: 'flex',
-                alignItems: 'flex-start',
-                gap: 24,
-                alignSelf: 'stretch',
-                paddingTop: 16,
-                borderTop: '1px solid #D9D9D9',
-              }}>
-                {/* Left — Signals */}
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <UpdatedInteractionSignals
-                    signals={demoSignals}
-                    expandedSignals={expandedSignals}
-                    toggleSignal={toggleSignal}
-                    onShowInTranscript={handleShowInTranscript}
-                  />
-                </div>
-
-                {/* Right — Recording + Transcript */}
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <UpdatedInteractionRecording
-                    ref={recordingRef}
-                    audioUrl={audioUrl}
-                    durationSeconds={demoMeta.duration_seconds}
-                    currentTimeSeconds={0}
-                  />
-                </div>
-              </div>
-            </div>
-
           </div>
-        )}
 
-        {/* ═══ COACHING SUMMARY TAB ═══ */}
-        {activeTab === 'coaching' && (
+        {/* ═══ COACHING SUMMARY SECTION ═══ */}
+        <div ref={coachingRef} style={{ paddingTop: 24 }}>
           <UpdatedCoachingSynthesisCard data={demoCoaching} />
-        )}
-
-        {/* ═══ SIGNALS & GUIDANCE TAB ═══ */}
-        {activeTab === 'signals' && (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-            {/* Signals (left) | Recording + Transcript (right) */}
-            <div style={{
-              display: 'flex',
-              alignItems: 'flex-start',
-              gap: 24,
+        </div>
+
+        {/* ═══ SIGNALS & RECORDING SECTION ═══ */}
+        <div ref={signalsRef} style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 16,
+          alignSelf: 'stretch',
+          paddingTop: 24,
+        }}>
+          {/* Section header */}
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+          }}>
+            <FileSignal size={24} color="#C98A5A" strokeWidth={2} />
+            <span style={{
+              fontSize: 16,
+              fontWeight: 600,
+              color: 'var(--Grey-Strong, #2E3236)',
+              lineHeight: 1.2,
+              textTransform: 'uppercase',
             }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <UpdatedInteractionSignals
-                  signals={demoSignals}
-                  expandedSignals={expandedSignals}
-                  toggleSignal={toggleSignal}
-                  onShowInTranscript={handleShowInTranscript}
-                />
-              </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <UpdatedInteractionRecording
-                  ref={recordingRef}
-                  audioUrl={audioUrl}
-                  durationSeconds={demoMeta.duration_seconds}
-                  currentTimeSeconds={0}
-                />
-              </div>
+              Signals & Recording
+            </span>
+          </div>
+
+          {/* Content: Signals (left) | Recording+Transcript (right) */}
+          <div style={{
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: 24,
+            alignSelf: 'stretch',
+            paddingTop: 16,
+            borderTop: '1px solid #D9D9D9',
+          }}>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <UpdatedInteractionSignals
+                signals={demoSignals}
+                expandedSignals={expandedSignals}
+                toggleSignal={toggleSignal}
+                onShowInTranscript={handleShowInTranscript}
+              />
+            </div>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <UpdatedInteractionRecording
+                ref={recordingRef}
+                audioUrl={audioUrl}
+                durationSeconds={demoMeta.duration_seconds}
+                audioRef={externalAudioRef}
+                agentName={agentName}
+                customerName={customerName.split(' ')[0]}
+                currentTimeSeconds={currentTimeSeconds}
+                timelinePlaying={timelinePlaying}
+                playbackRate={playbackRate}
+                timelineSegments={timelineSegments}
+                onSeek={onSeek}
+                onTogglePlay={onTogglePlay}
+                onSeekBack={onSeekBack}
+                onSeekForward={onSeekForward}
+                onSetPlaybackRate={onSetPlaybackRate}
+                transcript={transcript}
+                activeTurnIndex={activeTurnIndex}
+                turnObservations={turnObservations}
+                highlightedTurns={highlightedTurns}
+                onTurnPlayPause={onTurnPlayPause}
+                setExpandedSignals={setExpandedSignals}
+              />
             </div>
           </div>
-        )}
+        </div>
 
-        {/* ═══ COMMENTS TAB ═══ */}
-        {activeTab === 'comments' && (
+        {/* ═══ COMMENTS SECTION ═══ */}
+        <div ref={commentsRef} style={{ paddingTop: 24 }}>
           <div style={{ fontSize: 14, color: 'var(--Grey-Muted, #808183)', fontFamily: 'var(--font-sans)' }}>
             No comments yet.
           </div>
-        )}
+        </div>
       </div>
 
       {/* Figma node 113-8262: Sticky Footer — Previous / Next Session */}