Spaces:
Sleeping
Sleeping
File size: 3,698 Bytes
1bb18a0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | import React, { useState } from 'react';
const ACTIONS = [
{
type: 'reply',
icon: '↩',
label: 'Reply',
desc: 'Personally respond and handle',
color: '#3b82f6',
bg: 'rgba(59,130,246,0.15)',
hoverBg: 'rgba(59,130,246,0.25)',
},
{
type: 'schedule',
icon: '📅',
label: 'Schedule',
desc: 'Book a meeting slot',
color: '#8b5cf6',
bg: 'rgba(139,92,246,0.15)',
hoverBg: 'rgba(139,92,246,0.25)',
},
{
type: 'delegate',
icon: '→',
label: 'Delegate',
desc: 'Assign to team member',
color: '#f97316',
bg: 'rgba(249,115,22,0.15)',
hoverBg: 'rgba(249,115,22,0.25)',
},
{
type: 'ignore',
icon: '✕',
label: 'Ignore',
desc: 'Skip this item',
color: '#64748b',
bg: 'rgba(100,116,139,0.15)',
hoverBg: 'rgba(100,116,139,0.25)',
},
];
export default function ActionPanel({ selectedEmail, onAction, done, loading }) {
const [hoveredAction, setHoveredAction] = useState(null);
const [lastAction, setLastAction] = useState(null);
const handleAction = (actionType) => {
if (!selectedEmail || done || loading) return;
setLastAction(actionType);
onAction({ type: actionType, email_id: selectedEmail.id });
setTimeout(() => setLastAction(null), 600);
};
const isDisabled = !selectedEmail || done || loading;
return (
<div className="panel action-panel">
<div className="panel-header">
<span className="panel-title">⚡ Actions</span>
</div>
{selectedEmail ? (
<div className="selected-email-preview">
<div className="selected-label">SELECTED</div>
<div className="selected-subject">{selectedEmail.subject}</div>
<div className="selected-sender">{selectedEmail.sender.split('<')[0].trim()}</div>
</div>
) : (
<div className="no-selection">
<span className="no-selection-icon">👆</span>
<span>Select an email<br />from the inbox</span>
</div>
)}
<div className="action-buttons">
{ACTIONS.map(action => {
const isActive = lastAction === action.type;
const isHovered = hoveredAction === action.type;
return (
<button
key={action.type}
className={`action-btn ${isActive ? 'active' : ''}`}
style={{
borderColor: isDisabled ? 'rgba(148,163,184,0.15)' : action.color,
background: isDisabled
? 'rgba(148,163,184,0.05)'
: isActive
? action.color
: isHovered
? action.hoverBg
: action.bg,
color: isDisabled ? '#475569' : isActive ? '#fff' : action.color,
transform: isActive ? 'scale(0.96)' : 'scale(1)',
cursor: isDisabled ? 'not-allowed' : 'pointer',
}}
disabled={isDisabled}
onClick={() => handleAction(action.type)}
onMouseEnter={() => setHoveredAction(action.type)}
onMouseLeave={() => setHoveredAction(null)}
>
<span className="action-btn-icon">{action.icon}</span>
<div className="action-btn-text">
<span className="action-btn-label">{action.label}</span>
<span className="action-btn-desc">{action.desc}</span>
</div>
</button>
);
})}
</div>
{done && (
<div className="done-overlay">
<span className="done-icon">✓</span>
<span className="done-text">Simulation Complete</span>
</div>
)}
</div>
);
}
|