chordia-ui 3.4.7 → 3.4.8

package/package.json

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

package/src/components/UpdatedInteractionDetails/UpdatedCoachingSynthesisCard.jsx

@@ -191,50 +191,61 @@ function CoachingColumn({ icon, label, items }) {
 const UpdatedCoachingSynthesisCard = ({ data, loading, error }) => {
   React.useEffect(() => { ensureKeyframes(); }, []);
 
-  // Loading state
+  // Loading state — ThreeCirclesSpinner
   if (loading) {
     return (
-      <div style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: 12,
-      }}>
+      <>
+        <style>{`
+          @keyframes coaching-spinner-spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        `}</style>
         <div style={{
           display: "flex",
+          flexDirection: "column",
           alignItems: "center",
-          gap: 8,
+          justifyContent: "center",
+          gap: 12,
+          padding: "48px 24px",
         }}>
-          <div style={{
-            width: 6,
-            height: 6,
-            borderRadius: "50%",
-            background: COLORS.accent,
-            animation: "updated-coaching-pulse 1.5s ease-in-out infinite",
-          }} />
+          <svg
+            width={48}
+            height={48}
+            viewBox="0 0 48 48"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            style={{ animation: "coaching-spinner-spin 1.2s linear infinite" }}
+          >
+            <path
+              d="M43 24C43 26.4951 42.5086 28.9658 41.5537 31.271C40.5989 33.5762 39.1993 35.6707 37.435 37.435C35.6707 39.1993 33.5762 40.5989 31.271 41.5537C28.9658 42.5086 26.4951 43 24 43C21.5049 43 19.0342 42.5086 16.729 41.5537C14.4238 40.5989 12.3293 39.1993 10.565 37.435C8.80066 35.6707 7.40113 33.5762 6.44629 31.271C5.49145 28.9658 5 26.4951 5 24"
+              stroke="#F3E7C7"
+              strokeWidth="4"
+              strokeLinecap="round"
+            />
+            <path
+              d="M12 24C12 22.4241 12.3104 20.8637 12.9134 19.4078C13.5165 17.9519 14.4004 16.629 15.5147 15.5147C16.629 14.4004 17.9519 13.5165 19.4078 12.9134C20.8637 12.3104 22.4241 12 24 12C25.5759 12 27.1363 12.3104 28.5922 12.9134C30.0481 13.5165 31.371 14.4004 32.4853 15.5147C33.5996 16.629 34.4835 17.9519 35.0866 19.4078C35.6896 20.8637 36 22.4241 36 24"
+              stroke="#00A66E"
+              strokeWidth="4"
+              strokeLinecap="round"
+            />
+            <path
+              d="M20 24C20 24.5253 20.1035 25.0454 20.3045 25.5307C20.5055 26.016 20.8001 26.457 21.1716 26.8284C21.543 27.1999 21.984 27.4945 22.4693 27.6955C22.9546 27.8965 23.4747 28 24 28C24.5253 28 25.0454 27.8965 25.5307 27.6955C26.016 27.4945 26.457 27.1999 26.8284 26.8284C27.1999 26.457 27.4945 26.016 27.6955 25.5307C27.8965 25.0454 28 24.5253 28 24"
+              stroke="#F3E7C7"
+              strokeWidth="4"
+              strokeLinecap="round"
+            />
+          </svg>
           <span style={{
             fontSize: 14,
             color: COLORS.muted,
             fontWeight: 500,
+            textAlign: "center",
           }}>
             Synthesizing coaching summary...
           </span>
         </div>
-        {[180, 260, 220].map((w, i) => (
-          <div
-            key={i}
-            style={{
-              height: 10,
-              width: w,
-              maxWidth: "100%",
-              borderRadius: 4,
-              background: `linear-gradient(90deg, ${COLORS.absent} 25%, var(--shimmer-mid, #ECECEC) 50%, ${COLORS.absent} 75%)`,
-              backgroundSize: "200% 100%",
-              animation: "updated-coaching-shimmer 1.8s ease-in-out infinite",
-              animationDelay: `${i * 0.2}s`,
-            }}
-          />
-        ))}
-      </div>
+      </>
     );
   }
 

package/src/components/UpdatedInteractionDetails/UpdatedInteractionContext.jsx

@@ -1,21 +1,8 @@
-import { ExternalLink } from 'lucide-react';
+import { useState } from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 
 /*
- * Figma node: 101-2385 (Context grid — right column top, inside Frame 53 > Frame 56)
- *
- * Outer: display: flex; gap: 24px; horizontal
- * Two columns: flex: 1, vertical, gap: 12px
- *
- * Each metadata row:
- *   padding: 8px 8px 12px 8px;
- *   justify-content: space-between;
- *   align-items: center;
- *   border-bottom: 1px solid #D9D9D9;
- *
- * Label: 13px / 400 / #2E3236 (Grey/Strong)
- * Value: 13px / 400 / #808183 (Grey/Muted)
- *
- * More Details: ExternalLink icon 16px #808183 + "More Details" 13px/400/#2E3236
+ * Figma node: 101-2385 / 495-803 (Context grid + More Details expandable)
  */
 
 function fmtDur(seconds) {
@@ -41,7 +28,7 @@ const COLUMN_STYLE = {
   display: 'flex',
   flexDirection: 'column',
   flex: '1 0 0',
-  gap: 12,
+  gap: 0,
   minWidth: 0,
 };
 
@@ -52,84 +39,212 @@ const UpdatedInteractionContext = ({
   dimensions = [],
   outcomeQuality = 'Neutral',
   onMoreDetails,
+  moreDetails = [],
+  resolutionOutcome,
+  customerIntent,
+  interactionId,
 }) => {
+  const [expanded, setExpanded] = useState(false);
+
   const duration = meta.duration_seconds != null ? fmtDur(meta.duration_seconds) : null;
   const messages = meta.message_count;
   const driver = callPurpose.interaction_driver;
   const paradigm = classification.interaction_paradigm;
 
-  // Left column rows
-  const leftRows = [
-    duration != null && { label: 'Duration', value: duration },
-    driver != null && { label: 'Driver', value: driver },
-    ...dimensions.filter((_, i) => i % 2 === 0).map((d) => ({ label: d.label || d.key, value: d.value })),
+  // Build paired rows: [left, right] per line
+  const pairedRows = [];
+  const rawPairs = [
+    [
+      duration != null ? { label: 'Duration', value: duration } : null,
+      messages != null ? { label: 'Messages', value: messages } : null,
+    ],
+    [
+      driver != null ? { label: 'Driver', value: driver } : null,
+      paradigm != null ? { label: 'Paradigm', value: paradigm } : null,
+    ],
+  ];
+
+  // Add dimension pairs
+  for (let i = 0; i < dimensions.length; i += 2) {
+    const left = dimensions[i] ? { label: dimensions[i].label || dimensions[i].key, value: dimensions[i].value } : null;
+    const right = dimensions[i + 1] ? { label: dimensions[i + 1].label || dimensions[i + 1].key, value: dimensions[i + 1].value } : null;
+    rawPairs.push([left, right]);
+  }
+
+  // Last row: Outcome Quality (left) + More details toggle (right)
+  rawPairs.push([
     { label: 'Outcome Quality', value: outcomeQuality },
-  ].filter(Boolean);
+    { isMoreDetails: true },
+  ]);
+
+  rawPairs.forEach((pair) => pairedRows.push(pair));
 
-  // Right column rows
-  const rightRows = [
-    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 },
+  // Build "More Details" expanded rows
+  const detailRows = [
+    resolutionOutcome != null && { label: 'Resolution Outcome', value: resolutionOutcome },
+    customerIntent != null && { label: 'Customer Intent', value: customerIntent },
+    interactionId != null && { label: 'Number', value: interactionId },
+    ...(moreDetails || []),
   ].filter(Boolean);
 
-  const renderRow = (item) => {
-    if (item.isLink) {
-      return (
-        <div
-          key={item.label}
-          onClick={onMoreDetails}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 6,
-            padding: '8px 0 8px 0',
-            cursor: 'pointer',
-            fontFamily: 'var(--font-sans)',
-          }}
-        >
-          <ExternalLink size={16} color="#808183" strokeWidth={1.5} />
-          <span style={{ color: 'var(--Grey-Strong, #2E3236)', fontSize: 13, fontWeight: 400 }}>
-            {item.label}
-          </span>
-        </div>
-      );
-    }
-
-    return (
-      <div
-        key={item.label}
-        style={ROW_STYLE}
-      >
-        <span style={{ color: 'var(--Grey-Strong, #2E3236)', whiteSpace: 'nowrap', flexShrink: 0 }}>
-          {item.label}
-        </span>
-        <span style={{ color: 'var(--Grey-Muted, #808183)', textAlign: 'right' }}>
-          {item.value}
-        </span>
-      </div>
-    );
-  };
+  const renderRow = (item) => (
+    <div
+      key={item.label}
+      style={ROW_STYLE}
+    >
+      <span style={{ color: 'var(--Grey-Strong, #2E3236)', whiteSpace: 'nowrap', flexShrink: 0 }}>
+        {item.label}
+      </span>
+      <span style={{
+        color: 'var(--Grey-Muted, #808183)',
+        textAlign: 'right',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        minWidth: 0,
+      }}>
+        {item.value}
+      </span>
+    </div>
+  );
+
+  const renderMoreDetailsToggle = () => (
+    <div
+      key="more-details"
+      onClick={() => {
+        setExpanded((p) => !p);
+        if (onMoreDetails && !expanded) onMoreDetails();
+      }}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 6,
+        padding: '8px 8px 12px 8px',
+        cursor: 'pointer',
+        fontFamily: 'var(--font-sans)',
+        borderBottom: '1px solid var(--Grey-absent, #D9D9D9)',
+      }}
+    >
+      <span style={{
+        color: 'var(--Grey-Strong, #2E3236)',
+        fontSize: 13,
+        fontWeight: 500,
+        lineHeight: 'normal',
+      }}>
+        More Details
+      </span>
+      {expanded
+        ? <ChevronUp size={16} color="var(--Grey-Muted, #808183)" strokeWidth={1.5} />
+        : <ChevronDown size={16} color="var(--Grey-Muted, #808183)" strokeWidth={1.5} />
+      }
+    </div>
+  );
 
   return (
     <div
       style={{
         display: 'flex',
-        alignItems: 'flex-start',
-        gap: 24,
+        flexDirection: 'column',
         alignSelf: 'stretch',
+        gap: 0,
+        position: 'relative',
+        overflow: 'visible',
       }}
     >
-      {/* Left column */}
-      <div style={COLUMN_STYLE}>
-        {leftRows.map((row) => renderRow(row))}
-      </div>
-
-      {/* Right column */}
-      <div style={COLUMN_STYLE}>
-        {rightRows.map((row) => renderRow(row))}
-      </div>
+      {/* Paired rows — two columns side by side */}
+      {pairedRows.map((pair, idx) => (
+        <div
+          key={idx}
+          style={{
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: 24,
+            alignSelf: 'stretch',
+          }}
+        >
+          {/* Left cell */}
+          <div style={COLUMN_STYLE}>
+            {pair[0] && !pair[0].isMoreDetails ? renderRow(pair[0]) : <div style={{ flex: 1 }} />}
+          </div>
+
+          {/* Right cell */}
+          <div style={COLUMN_STYLE}>
+            {pair[1] && !pair[1].isMoreDetails
+              ? renderRow(pair[1])
+              : pair[1]?.isMoreDetails
+              ? renderMoreDetailsToggle()
+              : <div style={{ flex: 1 }} />}
+          </div>
+        </div>
+      ))}
+
+      {/* More Details dropdown — absolute, full width, left-aligned */}
+      {expanded && detailRows.length > 0 && (
+        <div
+          style={{
+            position: 'absolute',
+            top: '100%',
+            right: 0,
+            marginTop: 4,
+            display: 'flex',
+            width: 340,
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            borderRadius: 4,
+            border: '1px solid var(--Grey-absent, #D9D9D9)',
+            background: 'var(--Grey-White, #FFF)',
+            boxShadow: '-2px 2px 2px 0 rgba(0, 0, 0, 0.25)',
+            overflow: 'hidden',
+            fontFamily: 'var(--font-sans)',
+            zIndex: 50,
+          }}
+        >
+          {/* Dropdown header */}
+          <div style={{
+            padding: '12px 16px',
+            fontSize: 13,
+            fontWeight: 600,
+            color: 'var(--Grey-Strong, #2E3236)',
+            borderBottom: '1px solid var(--Grey-absent, #D9D9D9)',
+            alignSelf: 'stretch',
+          }}>
+            More details
+          </div>
+
+          {/* Detail rows */}
+          {detailRows.map((row) => (
+            <div
+              key={row.label}
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                padding: '12px 16px',
+                gap: 24,
+                fontSize: 13,
+                fontWeight: 400,
+                lineHeight: 'normal',
+                borderBottom: '1px solid var(--Grey-absent, #D9D9D9)',
+                alignSelf: 'stretch',
+              }}
+            >
+              <span style={{ color: 'var(--Grey-Strong, #2E3236)', whiteSpace: 'nowrap', flexShrink: 0 }}>
+                {row.label}
+              </span>
+              <span style={{
+                color: 'var(--Grey-Muted, #808183)',
+                fontSize: 13,
+                fontStyle: 'normal',
+                fontWeight: 400,
+                lineHeight: '120%',
+                textAlign: 'right',
+              }}>
+                {row.value}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 };