Spaces:
Running
Running
File size: 2,621 Bytes
958ebfa | 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 | import React, { useEffect, useRef, useState } from 'react';
import { MoreHorizontal, UserPlus, UserCheck, Table2 } from 'lucide-react';
/**
* Mobile header overflow for wide labeled actions (human participant,
* table view). Mirrors DownloadMenu's open/close pattern.
*/
export default function HeaderMoreMenu({
humanParticipant,
onOpenHumanModal,
hasChat,
onShowTableView,
}) {
const [open, setOpen] = useState(false);
const wrapRef = useRef(null);
useEffect(() => {
function handleClickOutside(e) {
if (wrapRef.current && !wrapRef.current.contains(e.target)) {
setOpen(false);
}
}
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
const fire = (fn) => () => { fn?.(); setOpen(false); };
return (
<div className="dev-wrap header-actions-mobile" ref={wrapRef}>
<div className="dev-dropdown-header">
<button
type="button"
className="icon-btn"
onClick={() => setOpen(o => !o)}
title="More actions"
aria-label="More actions"
aria-expanded={open}
>
<MoreHorizontal size={16} />
</button>
{open && (
<div className="dev-panel">
<button
type="button"
className={
'dev-panel-row'
+ (humanParticipant ? ' ccai-human-add-btn-active' : '')
}
onClick={fire(onOpenHumanModal)}
title={humanParticipant
? `Edit ${humanParticipant.name}'s credential summary`
: 'Add a human participant to the conversation'}
>
{humanParticipant ? (
<>
<UserCheck size={14} className="dev-check-icon" />
{humanParticipant.name}
</>
) : (
<>
<UserPlus size={14} className="dev-check-icon" />
Add a Human Participant
</>
)}
</button>
<button
type="button"
className="dev-panel-row"
disabled={!hasChat}
onClick={fire(onShowTableView)}
title={hasChat
? 'Open the conversation summary table'
: 'Start a chat to view the summary table'}
>
<Table2 size={14} className="dev-check-icon" />
Table View
</button>
</div>
)}
</div>
</div>
);
}
|