chordia-ui 3.8.2 → 3.8.3

package/package.json

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

package/src/components/UpdatedInteractionDetails/UpdatedInteractionContext.jsx

@@ -72,6 +72,7 @@ const UpdatedInteractionContext = ({
   const resolvedResolutionOutcome = resolutionOutcome ?? (dimResolution ? fmtValue(dimResolution.value) : null);
   const resolvedCustomerIntent = customerIntent ?? (dimIntent ? fmtValue(dimIntent.value) : null);
   const resolvedLocation = location ?? (dimLocation ? fmtValue(dimLocation.value) : null);
+  const resolvedParadigm = paradigm != null ? fmtValue(paradigm) : null;
 
   // Keys to exclude from the generic dimensions grid (they go in dedicated spots)
   const excludedKeys = new Set(['resolution_outcome', 'customer_intent', 'location', 'outcome_quality'].map((k) => `dim.${k}`));
@@ -86,7 +87,8 @@ const UpdatedInteractionContext = ({
     ],
     [
       driver != null ? { label: 'Driver', value: driver } : null,
-      paradigm != null ? { label: 'Paradigm', value: paradigm } : null,
+      // paradigm != null ? { label: 'Paradigm', value: paradigm } : null,
+      resolvedLocation != null ? { label: 'Location', value: resolvedLocation } : null,
     ],
   ];
 
@@ -109,7 +111,8 @@ const UpdatedInteractionContext = ({
   const detailRows = [
     resolvedResolutionOutcome != null && { label: 'Resolution Outcome', value: resolvedResolutionOutcome },
     resolvedCustomerIntent != null && { label: 'Customer Intent', value: resolvedCustomerIntent },
-    resolvedLocation != null && { label: 'Location', value: resolvedLocation },
+    // resolvedLocation != null && { label: 'Location', value: resolvedLocation },
+    resolvedParadigm != null && { label: 'Paradigm', value: resolvedParadigm },
     ...(moreDetails || []),
   ].filter(Boolean);
 

package/src/components/UpdatedInteractionDetails/UpdatedInteractionDetails.jsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from 'react';
-import { ArrowLeft, ArrowRight, CalendarDays, PhoneIncoming, ClipboardList, FileSignal, Repeat, ChevronDown, ChevronRight, Headset, CircleUser, History, ExternalLink, Mail } from 'lucide-react';
+import { ArrowLeft, ArrowRight, CalendarDays, PhoneIncoming, PhoneOutgoing, ClipboardList, FileSignal, Repeat, ChevronDown, ChevronRight, Headset, CircleUser, History, ExternalLink, Mail } from 'lucide-react';
 import UpdatedInteractionContext from './UpdatedInteractionContext';
 import UpdatedInteractionRecording from './UpdatedInteractionRecording';
 import UpdatedInteractionScores from './UpdatedInteractionScores';
@@ -75,6 +75,20 @@ const TABS = [
   { key: 'comments', label: 'Feedback' },
 ];
 
+/** inbound | outbound | null — for session drawer title icons */
+function resolveSessionDirection(session, fallbackDirection) {
+  const raw =
+    session?.direction ??
+    session?.interaction_direction ??
+    session?.call_direction ??
+    fallbackDirection;
+  if (raw == null || raw === '') return null;
+  const d = String(raw).toLowerCase().trim();
+  if (d === 'outbound' || d.startsWith('outbound')) return 'outbound';
+  if (d === 'inbound' || d.startsWith('inbound')) return 'inbound';
+  return null;
+}
+
 const UpdatedInteractionDetails = ({
   title = 'Wheel Stud Replacement Enquiry',
   onBack,
@@ -975,6 +989,12 @@ const UpdatedInteractionDetails = ({
             // page you're already on).
             const isCurrent = !!session.isCurrent;
             const isHovered = !isCurrent && hoveredSessionIdx === i;
+            const sessionDirection = resolveSessionDirection(
+              session,
+              resolvedCallPurpose.interaction_direction
+            );
+            const SessionDirectionIcon =
+              sessionDirection === 'outbound' ? PhoneOutgoing : PhoneIncoming;
             return (
               <div
                 key={session.id || i}
@@ -1021,7 +1041,25 @@ const UpdatedInteractionDetails = ({
                       textOverflow: 'ellipsis',
                     }}
                   >
-                    {session.title}
+                    {/* {session.title} */}
+                    {sessionDirection && (
+                      <SessionDirectionIcon
+                        size={16}
+                        color="var(--Grey-Muted, #808183)"
+                        strokeWidth={1.5}
+                        style={{ flexShrink: 0 }}
+                        aria-hidden
+                      />
+                    )}
+                    <span
+                      style={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        minWidth: 0,
+                      }}
+                    >
+                      {session.title}
+                    </span>
                   </div>
                   {session.status && (
                     <div style={{ fontSize: 13, color: 'var(--Grey-Strong, #2E3236)', marginBottom: 12, lineHeight: 1.2 }}>