Spaces:
Sleeping
Sleeping
| 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> | |
| ); | |
| } | |