chordia-ui 3.7.0 → 3.7.2

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, ChevronUp, Headset, CircleUser, History, ExternalLink } from 'lucide-react';
+import { ArrowLeft, ArrowRight, CalendarDays, PhoneIncoming, 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';
@@ -8,6 +8,7 @@ import UpdatedInteractionSignals from './UpdatedInteractionSignals';
 import UpdatedCompassScore from './UpdatedCompassScore';
 import UpdatedThreads from './UpdatedThreads';
 import UpdatedGuidance from './UpdatedGuidance';
+import SideDrawer from '../common/SideDrawer';
 
 /* Hover tooltip — fixed position to escape overflow containers.
    Anchored below the trigger. */
@@ -124,7 +125,7 @@ const UpdatedInteractionDetails = ({
   predictedCsat,       // predicted objective number (e.g. compass_score) — shown as "03" top-right
   predictedLabel = 'Predicted Objective',
   compassLegends,
-  // Customer session dropdown
+  // Customer session history drawer
   customerSessions: customerSessionsList,
   customerSessionCount,
   onSessionClick,
@@ -152,7 +153,7 @@ const UpdatedInteractionDetails = ({
 }) => {
   const [activeTab, setActiveTab] = useState('overview');
   const [expandedSignals, setExpandedSignals] = useState(new Set());
-  const [showSessionDropdown, setShowSessionDropdown] = useState(false);
+  const [showSessionDrawer, setShowSessionDrawer] = useState(false);
   const [hoveredSessionIdx, setHoveredSessionIdx] = useState(null);
   const [internalPlaying, setInternalPlaying] = useState(false);
   const [internalCurrentTime, setInternalCurrentTime] = useState(0);
@@ -259,6 +260,7 @@ const UpdatedInteractionDetails = ({
   };
 
   const sessionHistory = customerSessionsList || [];
+  const hasPastSessions = sessionHistory.length > 1;
 
   /* Called from Signals/Guidance "Show in transcript" icon —
      switches to Signals section, then scrolls/highlights transcript card without playing audio. */
@@ -680,154 +682,61 @@ const UpdatedInteractionDetails = ({
                   </NameTooltip>
 
                   {/* Repeat icon */}
-                  <Repeat size={16} color="var(--color-input-border, #ACACAD)" strokeWidth={1.5} />
+                  {/* <Repeat size={16} color="var(--color-input-border, #ACACAD)" strokeWidth={1.5} /> */}
 
-                  {/* Customer — CircleUser icon + dropdown (only if > 1 session) */}
+                  {/* Customer — CircleUser icon + side drawer trigger (only if > 1 session) */}
                   {sessionCount > 1 ? (
-                    <div style={{ position: 'relative' }}>
+                    <div>
                       <NameTooltip text={customerFullName}>
                         <button
-                          onClick={() => setShowSessionDropdown((prev) => !prev)}
+                          onClick={() => setShowSessionDrawer(true)}
                           style={{
-                            display: 'flex', alignItems: 'center', gap: 4, padding: '8px 0',
-                            background: 'none', border: 'none', cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 16,
+                            padding: '0 16px',
+                            height: 34,
+                            borderRadius: 8,
+                            background: 'var(--Rail-Surface-2, #E3E1D7)',
+                            border: 'none',
+                            cursor: 'pointer',
                           }}
                         >
-                          <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} ({sessionCount} Sessions)
-                          </span>
-                        {showSessionDropdown
-                          ? <ChevronUp size={16} color="var(--Grey-Muted, #808183)" strokeWidth={1.5} />
-                          : <ChevronDown size={16} color="var(--Grey-Muted, #808183)" strokeWidth={1.5} />
-                        }
+                          <div style={{ display: 'flex', alignItems: 'center', gap: 4, minWidth: 0 }}>
+                            <CircleUser size={16} color="var(--Grey-Strong, #2E3236)" strokeWidth={1.5} />
+                            <span style={{ fontSize: 13, fontWeight: 400, color: 'var(--Grey-Strong, #2E3236)', lineHeight: 1.2, whiteSpace: 'nowrap' }}>
+                              <span style={{ fontWeight: 600 }}>{customerName}</span>{' '}
+                              <span>({sessionCount} Sessions)</span>
+                            </span>
+                          </div>
+                          <ChevronRight size={16} color="var(--Grey-Strong, #2E3236)" strokeWidth={1.7} />
                         </button>
                       </NameTooltip>
-
-                      {/* Figma node 311-1302: Session history dropdown */}
-                      {showSessionDropdown && (
-                        <div style={{
-                          position: 'absolute',
-                          top: '100%',
-                          right: 0,
-                          marginTop: 4,
-                          width: 264,
-                          background: 'var(--Grey-White, #FFF)',
-                          borderRadius: 4,
-                          border: '1px solid var(--Grey-absent, #D9D9D9)',
-                          boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
-                          zIndex: 50,
-                          overflow: 'hidden',
-                        }}>
-                          {/* Header — Figma node 312-1321: horizontal, gap: 8 */}
-                          <div style={{
-                            display: 'flex', alignItems: 'flex-start', gap: 8,
-                            padding: 16,
-                          }}>
-                            <CircleUser size={16} color="var(--Grey-Muted, #808183)" strokeWidth={1.5} style={{ marginTop: 2, flexShrink: 0 }} />
-                            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-                              <span style={{
-                                fontSize: 16, fontWeight: 600,
-                                color: 'var(--Grey-Strong, #2E3236)',
-                                lineHeight: 1,
-                              }}>
-                                {customerName}
-                              </span>
-                              <span style={{
-                                fontSize: 13, fontWeight: 400,
-                                color: 'var(--Grey-Muted, #808183)',
-                                lineHeight: 1,
-                              }}>
-                                {sessionCount} Sessions in past
-                              </span>
-                            </div>
-                          </div>
-
-                          {/* Session list */}
-                          {sessionHistory.slice(0, 5).map((session, i) => (
-                            <div
-                              key={session.id || i}
-                              onClick={() => { if (onSessionClick) onSessionClick(session); setShowSessionDropdown(false); }}
-                              onMouseEnter={() => setHoveredSessionIdx(i)}
-                              onMouseLeave={() => setHoveredSessionIdx(null)}
-                              style={{
-                                display: 'flex',
-                                width: 264,
-                                padding: '12px 16px',
-                                justifyContent: 'space-between',
-                                alignItems: 'center',
-                                background: hoveredSessionIdx === i
-                                  ? 'var(--surface-hover, #F3F7F7)'
-                                  : 'var(--Grey-White, #FFF)',
-                                borderTop: '1px solid var(--Grey-absent, #D9D9D9)',
-                                cursor: 'pointer',
-                                boxSizing: 'border-box',
-                                transition: 'background 0.15s',
-                              }}
-                            >
-                              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-                                <span style={{
-                                  fontSize: 13, fontWeight: 400,
-                                  color: 'var(--Grey-Strong, #2E3236)',
-                                  lineHeight: 1,
-                                }}>
-                                  {session.title}
-                                </span>
-                                <span style={{
-                                  fontSize: 12, fontWeight: 400,
-                                  color: 'var(--Grey-Muted, #808183)',
-                                  lineHeight: 1,
-                                }}>
-                                  {session.date}
-                                </span>
-                              </div>
-                              {hoveredSessionIdx === i && (
-                                <ExternalLink size={16} color="var(--Grey-Muted, #808183)" strokeWidth={1} style={{ flexShrink: 0 }} />
-                              )}
-                            </div>
-                          ))}
-
-                          {/* View All Sessions button */}
-                          <div style={{
-                            padding: 16,
-                            borderTop: '1px solid var(--Grey-absent, #D9D9D9)',
-                            display: 'flex',
-                            justifyContent: 'center',
-                          }}>
-                            <button
-                              onClick={() => { if (onViewAllSessions) onViewAllSessions(); setShowSessionDropdown(false); }}
-                              style={{
-                              display: 'flex',
-                              height: 32,
-                              padding: '16px 16px 16px 12px',
-                              justifyContent: 'center',
-                              alignItems: 'center',
-                              gap: 6,
-                              background: 'var(--Grey-White, #FFF)',
-                              border: '1px solid var(--Grey-absent, #D9D9D9)',
-                              borderRadius: 10,
-                              cursor: 'pointer',
-                            }}>
-                              <History size={16} color="var(--Grey-Muted, #808183)" strokeWidth={1.5} />
-                              <span style={{
-                                fontSize: 14, fontWeight: 600,
-                                color: 'var(--Grey-Strong, #2E3236)',
-                              }}>
-                                View All Sessions
-                              </span>
-                            </button>
-                          </div>
-                        </div>
-                      )}
                     </div>
                   ) : (
                     <NameTooltip text={customerFullName}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '8px 0', cursor: 'pointer' }}>
-                        <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}
-                        </span>
-                      </div>
+                      <button
+                        onClick={() => setShowSessionDrawer(true)}
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 16,
+                          padding: '0 16px',
+                          height: 34,
+                          borderRadius: 8,
+                          background: 'var(--Rail-Surface-2, #E3E1D7)',
+                          border: 'none',
+                          cursor: 'pointer',
+                        }}
+                      >
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, minWidth: 0 }}>
+                          <CircleUser size={16} color="var(--Grey-Strong, #2E3236)" strokeWidth={1.5} />
+                          <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--Grey-Strong, #2E3236)', lineHeight: 1.2, whiteSpace: 'nowrap' }}>
+                            {customerName}
+                          </span>
+                        </div>
+                        <ChevronRight size={16} color="var(--Grey-Strong, #2E3236)" strokeWidth={1.7} />
+                      </button>
                     </NameTooltip>
                   )}
                 </div>
@@ -995,6 +904,148 @@ const UpdatedInteractionDetails = ({
         </div>
       </div>
 
+      <SideDrawer
+        open={showSessionDrawer}
+        onClose={() => setShowSessionDrawer(false)}
+        title={(
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
+            <div style={{
+              width: 34,
+              height: 34,
+              borderRadius: '50%',
+              background: 'var(--surface-hover, #F3F7F7)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+            }}>
+              <CircleUser size={20} color="var(--Grey-Strong, #2E3236)" strokeWidth={1.7} />
+            </div>
+            <div style={{ minWidth: 0 }}>
+              <div style={{
+                fontSize: 16,
+                fontWeight: 600,
+                color: 'var(--Grey-Strong, #2E3236)',
+                lineHeight: 1.2,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}>
+                {customerName}
+              </div>
+            </div>
+          </div>
+        )}
+        subtitle={hasPastSessions ? (
+          <span style={{
+            fontSize: 13,
+            fontWeight: 400,
+            color: 'var(--Grey-Muted, #808183)',
+            lineHeight: 1.5,
+          }}>
+            {sessionCount} Sessions in Past
+          </span>
+        ) : null}
+        width={470}
+        height="100vh"
+        topOffset={70}
+        footer={hasPastSessions ? (
+          <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
+            <button
+              onClick={() => { if (onViewAllSessions) onViewAllSessions(); setShowSessionDrawer(false); }}
+              style={{
+                display: 'flex',
+                height: 32,
+                padding: '0 16px 0 12px',
+                justifyContent: 'center',
+                alignItems: 'center',
+                gap: 6,
+                background: 'var(--Grey-White, #FFF)',
+                border: '1px solid var(--Grey-absent, #D9D9D9)',
+                borderRadius: 10,
+                cursor: 'pointer',
+              }}
+            >
+              <History size={16} color="var(--Grey-Muted, #808183)" strokeWidth={1.5} />
+              <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--Grey-Strong, #2E3236)' }}>
+                View All Sessions
+              </span>
+            </button>
+          </div>
+        ) : null}
+      >
+        <div
+          style={{
+            borderTop: '1px solid var(--Grey-absent, #D9D9D9)',
+            maxHeight: '100%',
+            overflowY: 'auto',
+          }}
+        >
+          {hasPastSessions ? sessionHistory.map((session, i) => (
+            <div
+              key={session.id || i}
+              onClick={() => { if (onSessionClick) onSessionClick(session); setShowSessionDrawer(false); }}
+              onMouseEnter={() => setHoveredSessionIdx(i)}
+              onMouseLeave={() => setHoveredSessionIdx(null)}
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                gap: 12,
+                padding: '16px 12px',
+                borderTop: i === 0 ? 'none' : '1px solid var(--Grey-absent, #D9D9D9)',
+                background: hoveredSessionIdx === i ? 'var(--surface-hover, #F3F7F7)' : 'var(--Grey-White, #FFF)',
+                cursor: 'pointer',
+                transition: 'background 0.15s',
+              }}
+            >
+              <div style={{ minWidth: 0 }}>
+                <div style={{ fontSize: 14, display: 'flex', alignItems: 'center', gap: 6, fontWeight: 400, color: 'var(--Grey-Strong, #2E3236)', lineHeight: 1.2, marginBottom: 8, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                  {session.title}
+                </div>
+                {session.status && (
+                  <div style={{ fontSize: 13, color: 'var(--Grey-Strong, #2E3236)', marginBottom: 12, lineHeight: 1.2 }}>
+                    <span style={{ fontWeight: 400 }}>Status: </span>
+                    <span style={{ fontWeight: 400, color: 'var(--Grey-Muted, #808183)' }}>{session.status}</span>
+                  </div>
+                )}
+                <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
+                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 400, color: 'var(--Grey-Muted, #808183)', lineHeight: 1.1 }}>
+                    <CalendarDays size={16} color="var(--Grey-Muted, #808183)" strokeWidth={1.8} />
+                    {session.date}
+                  </span>
+                  {(session.agent || session.agent_name) && (
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 400, color: 'var(--Grey-Muted, #808183)', lineHeight: 1.1 }}>
+                      <Headset size={16} color="var(--Grey-Muted, #808183)" strokeWidth={1.8} />
+                      {session.agent || session.agent_name}
+                    </span>
+                  )}
+                </div>
+              </div>
+              {hoveredSessionIdx === i && (
+                <ExternalLink size={20} color="var(--Grey-Muted, #808183)" strokeWidth={1.7} style={{ flexShrink: 0 }} />
+              )}
+            </div>
+          )) : (
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                minHeight: 140,
+                padding: '24px 12px',
+                color: 'var(--Grey-Muted, #808183)',
+                fontSize: 14,
+                fontStyle: 'italic',
+                textAlign: 'center',
+              }}
+            >
+              No previous sessions available
+            </div>
+          )}
+        </div>
+      </SideDrawer>
+
     </div>
   );
 };