chordia-ui 3.4.4 → 3.4.6

package/package.json

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

package/src/components/UpdatedInteractionDetails/UpdatedCompassScore.jsx

@@ -60,7 +60,7 @@ const GaugeMeter = ({ score = 4, maxScore = 10 }) => {
   const gap = 2; // degrees gap between segments
 
   return (
-    <svg width={svgW} height={svgH} viewBox={`0 0 ${svgW} ${svgH}`} fill="none">
+    <svg width="100%" viewBox={`0 0 ${svgW} ${svgH}`} fill="none" style={{ maxWidth: svgW }}>
       {/* Segments from left (180°) to right (0°) */}
       {Array.from({ length: totalSeg }, (_, i) => {
         const fromA = 180 - i * segDeg - (i > 0 ? gap / 2 : 0);
@@ -201,6 +201,7 @@ const UpdatedCompassScore = ({
       border: `1px solid ${COLORS.absent}`,
       background: COLORS.white,
       alignSelf: 'stretch',
+      flex: 1,
       gap: 24,
     }}>
       {/* Section Title — left-aligned, vertical, gap: 8 */}
@@ -234,24 +235,48 @@ const UpdatedCompassScore = ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        gap: 48,
+        gap: 24,
         flex: 1,
+        overflow: 'hidden',
       }}>
         {/* Left: Gauge + Pin + Score number */}
         <div style={{
-          display: 'flex',
-          width: 243,
+          position: 'relative',
+          maxWidth: 243,
+          minWidth: 160,
+          flex: '0 1 243px',
           flexDirection: 'column',
           alignItems: 'center',
-          flexShrink: 0,
+          display: 'flex',
         }}>
           <GaugeMeter score={score} maxScore={maxScore} />
 
-          {/* Compass pin icon — exact Figma export */}
-          <svg width="34" height="35" viewBox="0 0 34 35" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ marginTop: -24 }}>
-            <path d="M16 25.2169C19.958 25.2169 23.1667 22.0083 23.1667 18.0503C23.1667 14.0922 19.958 10.8836 16 10.8836C12.042 10.8836 8.83334 14.0922 8.83334 18.0503C8.83334 22.0083 12.042 25.2169 16 25.2169Z" fill="var(--rail-orange, #C98A5A)" />
-            <path fillRule="evenodd" clipRule="evenodd" d="M30.4791 11.2328L33.4351 0L21.6888 3.09113C19.9212 2.41855 18.0036 2.05025 16 2.05025C7.16344 2.05025 0 9.2137 0 18.0503C0 26.8868 7.16344 34.0503 16 34.0503C24.8366 34.0503 32 26.8868 32 18.0503C32 15.6119 31.4546 13.301 30.4791 11.2328ZM16 30.5503C22.9036 30.5503 28.5 24.9538 28.5 18.0503C28.5 11.1467 22.9036 5.55025 16 5.55025C9.09644 5.55025 3.5 11.1467 3.5 18.0503C3.5 24.9538 9.09644 30.5503 16 30.5503Z" fill="var(--rail-orange, #C98A5A)" />
-          </svg>
+          {/* Compass pin — centered below gauge, needle rotates to point at score */}
+          {(() => {
+            // Pin sits at gauge center; needle rotates from 180° (score=0) to 0° (score=max)
+            const pct = maxScore > 0 ? Math.min(score / maxScore, 1) : 0;
+            // SVG pin's default needle points to top-right (~45°)
+            // We need: score=0 → needle points left (180°), score=max → needle points right (0°)
+            // Target angle on gauge: 180 - pct*180
+            // Pin default orientation: needle at ~45° from top → offset is 45
+            // Rotation needed: -(targetAngle - 45) to align needle with gauge position
+            const targetAngle = 180 - pct * 180;
+            const rotateDeg = -(targetAngle - 45);
+            return (
+              <svg
+                width="34" height="35" viewBox="0 0 34 35" fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                style={{
+                  marginTop: -24,
+                  transform: `rotate(${rotateDeg}deg)`,
+                  transformOrigin: 'center center',
+                }}
+              >
+                <path d="M16 25.2169C19.958 25.2169 23.1667 22.0083 23.1667 18.0503C23.1667 14.0922 19.958 10.8836 16 10.8836C12.042 10.8836 8.83334 14.0922 8.83334 18.0503C8.83334 22.0083 12.042 25.2169 16 25.2169Z" fill="var(--rail-orange, #C98A5A)" />
+                <path fillRule="evenodd" clipRule="evenodd" d="M30.4791 11.2328L33.4351 0L21.6888 3.09113C19.9212 2.41855 18.0036 2.05025 16 2.05025C7.16344 2.05025 0 9.2137 0 18.0503C0 26.8868 7.16344 34.0503 16 34.0503C24.8366 34.0503 32 26.8868 32 18.0503C32 15.6119 31.4546 13.301 30.4791 11.2328ZM16 30.5503C22.9036 30.5503 28.5 24.9538 28.5 18.0503C28.5 11.1467 22.9036 5.55025 16 5.55025C9.09644 5.55025 3.5 11.1467 3.5 18.0503C3.5 24.9538 9.09644 30.5503 16 30.5503Z" fill="var(--rail-orange, #C98A5A)" />
+              </svg>
+            );
+          })()}
 
           {/* Score number below gauge */}
           <div style={{

package/src/components/UpdatedInteractionDetails/UpdatedInteractionContext.jsx

@@ -71,7 +71,7 @@ const UpdatedInteractionContext = ({
     messages != null && { label: 'Messages', value: messages },
     paradigm != null && { label: 'Paradigm', value: paradigm },
     ...dimensions.filter((_, i) => i % 2 === 1).map((d) => ({ label: d.label || d.key, value: d.value })),
-    { label: 'More Details', isLink: true },
+    // { label: 'More Details', isLink: true },
   ].filter(Boolean);
 
   const renderRow = (item) => {

package/src/components/UpdatedInteractionDetails/UpdatedInteractionDetails.jsx

@@ -46,9 +46,16 @@ const UpdatedInteractionDetails = ({
   // Signal evidence playback — host app can provide to play audio segments from signals
   onPlayEvidence,
   onHighlightTurns,
+  // Context props — pass from host app to override block-derived defaults
+  callPurpose: externalCallPurpose,
+  classification: externalClassification,
+  outcomeQuality: externalOutcomeQuality,
   // Compass score props
-  compassScore,
-  predictedCsat,
+  compassScore,        // gauge meter value (e.g. outcomeLift.p_full) — drives meter fill, range 1-10
+  compassMaxScore = 10,
+  predictedCsat,       // predicted objective number (e.g. compass_score) — shown as "03" top-right
+  predictedLabel = 'Predicted Objective',
+  compassLegends,
   // Customer session dropdown
   customerSessions: customerSessionsList,
   customerSessionCount,
@@ -57,8 +64,10 @@ const UpdatedInteractionDetails = ({
   // Footer navigation
   prevSessionTitle,
   prevSessionDesc,
+  prevSessionDisabled = false,
   nextSessionTitle,
   nextSessionDesc,
+  nextSessionDisabled = false,
   onPreviousSession,
   onNextSession,
 }) => {
@@ -199,7 +208,9 @@ const UpdatedInteractionDetails = ({
   const direction = demoCallPurpose.interaction_direction === 'inbound' ? 'Inbound' : 'Outbound';
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', width: '100%', background: 'var(--Grey-White, #FFF)' }}>
+    <div style={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%', background: 'var(--Grey-White, #FFF)' }}>
+      {/* Sticky Header + Tabs */}
+      <div style={{ position: 'sticky', top: 0, zIndex: 20, background: 'var(--Grey-White, #FFF)' }}>
       {/* Header */}
       <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '24px 24px 0' }}>
         <button
@@ -267,6 +278,7 @@ const UpdatedInteractionDetails = ({
           </button>
         ))}
       </div>
+      </div>{/* end sticky header + tabs */}
 
       {/* All sections rendered — tabs scroll to them */}
       <div style={{ padding: 24, flex: 1, overflowY: 'auto' }}>
@@ -396,7 +408,7 @@ const UpdatedInteractionDetails = ({
                         </div>
 
                         {/* Session list — Figma: 264px, pad 12 16, space-between, center */}
-                        {sessionHistory.map((session, i) => (
+                        {sessionHistory.slice(0, 5).map((session, i) => (
                           <div
                             key={session.id || i}
                             onClick={() => { if (onSessionClick) onSessionClick(session); setShowSessionDropdown(false); }}
@@ -482,17 +494,18 @@ const UpdatedInteractionDetails = ({
             */}
             <div style={{
               display: 'flex',
-              alignItems: 'flex-start',
+              alignItems: 'stretch',
               gap: 24,
               alignSelf: 'stretch',
             }}>
               {/* Left — Compass Score */}
-              <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ flex: 1, minWidth: 0, display: 'flex' }}>
                 <UpdatedCompassScore
-                  score={compassScore ?? 0}
+                  score={compassScore != null ? Math.round(compassScore * 100) : 0}
                   maxScore={100}
                   predictedScore={predictedCsat ?? 0}
-                  predictedLabel="Predicted Objective"
+                  predictedLabel={predictedLabel}
+                  legends={compassLegends}
                 />
               </div>
 
@@ -508,9 +521,9 @@ const UpdatedInteractionDetails = ({
               }}>
                 <UpdatedInteractionContext
                   meta={demoMeta}
-                  callPurpose={demoCallPurpose}
-                  classification={demoClassification}
-                  outcomeQuality="Neutral"
+                  callPurpose={externalCallPurpose || demoCallPurpose}
+                  classification={externalClassification || demoClassification}
+                  outcomeQuality={externalOutcomeQuality || 'Neutral'}
                 />
                 <UpdatedInteractionScores
                   outcomeLift={demoOutcomeLift}
@@ -618,7 +631,8 @@ const UpdatedInteractionDetails = ({
       }}>
         {/* Previous Session */}
         <button
-          onClick={onPreviousSession}
+          onClick={prevSessionDisabled ? undefined : onPreviousSession}
+          disabled={prevSessionDisabled}
           style={{
             display: 'flex',
             alignItems: 'center',
@@ -627,7 +641,9 @@ const UpdatedInteractionDetails = ({
             flex: 1,
             background: 'var(--Grey-White, #FFF)',
             border: '1px solid var(--Grey-absent, #D9D9D9)',
-            cursor: 'pointer',
+            cursor: prevSessionDisabled ? 'default' : 'pointer',
+            opacity: prevSessionDisabled ? 0.4 : 1,
+            pointerEvents: prevSessionDisabled ? 'none' : 'auto',
           }}
         >
           <ArrowLeft size={24} color="var(--Grey-Muted, #808183)" strokeWidth={2} />
@@ -654,7 +670,8 @@ const UpdatedInteractionDetails = ({
 
         {/* Next Session */}
         <button
-          onClick={onNextSession}
+          onClick={nextSessionDisabled ? undefined : onNextSession}
+          disabled={nextSessionDisabled}
           style={{
             display: 'flex',
             alignItems: 'center',
@@ -664,7 +681,9 @@ const UpdatedInteractionDetails = ({
             flex: 1,
             background: 'var(--Grey-White, #FFF)',
             border: '1px solid var(--Grey-absent, #D9D9D9)',
-            cursor: 'pointer',
+            cursor: nextSessionDisabled ? 'default' : 'pointer',
+            opacity: nextSessionDisabled ? 0.4 : 1,
+            pointerEvents: nextSessionDisabled ? 'none' : 'auto',
           }}
         >
           <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>

package/src/components/UpdatedInteractionDetails/UpdatedInteractionRecording.jsx

@@ -311,6 +311,19 @@ const UpdatedInteractionRecording = forwardRef(function UpdatedInteractionRecord
       }))
     : null;
 
+  // Auto-scroll transcript to active card during playback
+  useEffect(() => {
+    if (!activePlaying) return;
+    const activeIdx = turns ? activeTurnIndex : activeDemoIdx;
+    if (activeIdx == null || activeIdx < 0) return;
+    const container = scrollRef.current;
+    if (!container) return;
+    const cards = container.children;
+    if (cards?.[activeIdx]) {
+      cards[activeIdx].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+  }, [activeTurnIndex, activeDemoIdx, activePlaying, turns]);
+
   // Computed display values
   const effectiveTime = isDemo ? (demoSeekTime ?? 0) : activeCurrentTime;
   const effectiveDuration = activeDuration || 156;

package/src/components/UpdatedInteractionDetails/UpdatedInteractionSignals.jsx

@@ -266,13 +266,14 @@ const UpdatedInteractionSignals = ({
                       </div>
 
                       {/* Evidence quotes — Frame 39 */}
-                      {obs.evidence?.map((ev, evIdx) => (
-                        ev.text && (
+                      {obs.evidence?.map((ev, evIdx) => {
+                        const hasTimestamps = ev.start_ms != null && ev.end_ms != null;
+                        return ev.text && (
                           <div
                             key={evIdx}
                             onClick={(e) => {
                               e.stopPropagation();
-                              playEvidence(ev);
+                              if (hasTimestamps) playEvidence(ev);
                             }}
                             onMouseEnter={() => highlightTurns(ev.turn_ids ?? [])}
                             onMouseLeave={() => highlightTurns([])}
@@ -281,24 +282,26 @@ const UpdatedInteractionSignals = ({
                               alignItems: 'center',
                               gap: 8,
                               padding: '8px 0',
-                              cursor: 'pointer',
+                              cursor: hasTimestamps ? 'pointer' : 'default',
                             }}
                           >
-                            <HoverIcon size={28}>
-                              {isEvPlaying(ev) ? (
-                                <PauseCircle
-                                  size={17}
-                                  color="var(--Grey-Muted, #808183)"
-                                  strokeWidth={1.5}
-                                />
-                              ) : (
-                                <PlayCircle
-                                  size={17}
-                                  color="var(--Grey-Muted, #808183)"
-                                  strokeWidth={1}
-                                />
-                              )}
-                            </HoverIcon>
+                            {hasTimestamps && (
+                              <HoverIcon size={28}>
+                                {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,
                               fontWeight: 400,
@@ -308,8 +311,8 @@ const UpdatedInteractionSignals = ({
                               &ldquo;{ev.text}&rdquo;
                             </span>
                           </div>
-                        )
-                      ))}
+                        );
+                      })}
                     </div>
                   ))}
                 </div>