Spaces:
Runtime error
Runtime error
| import { useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from "react"; | |
| import { createPortal } from "react-dom"; | |
| import type { ChatSummary, Doc } from "../../api/types"; | |
| import { DocPicker } from "../DocPicker"; | |
| import { ChevronIcon } from "../icons/Icons"; | |
| /** Pick posts from a dropdown: a button that says how many are chosen, and a panel under it with the search box and the | |
| * ticks. Replaces the list that would otherwise sit under the source dropdown. `single` picks one post from the whole | |
| * archive (the picker loads the list itself). */ | |
| /** A button that opens a panel under it (or above it when the window is short below). Used by the posts and chats menus. */ | |
| export function MenuPanel({ label, disabled = false, ariaLabel, children }: { | |
| label: string; | |
| disabled?: boolean; | |
| ariaLabel: string; | |
| children: ReactNode; | |
| }) { | |
| const [open, setOpen] = useState(false); | |
| const [place, setPlace] = useState<CSSProperties>({}); | |
| const button = useRef<HTMLButtonElement>(null); | |
| const panel = useRef<HTMLDivElement>(null); | |
| // Under the button, as wide as it (at least 440px), or above it when the window is short below. | |
| useLayoutEffect(() => { | |
| if (!open || !button.current) return; | |
| const r = button.current.getBoundingClientRect(); | |
| const width = Math.min(Math.max(r.width, 440), window.innerWidth - 24); | |
| const left = Math.min(Math.max(12, r.left), window.innerWidth - width - 12); | |
| const below = window.innerHeight - r.bottom; | |
| setPlace(below >= 360 || below >= r.top | |
| ? { top: r.bottom + 6, left, width, maxHeight: Math.max(240, below - 18) } | |
| : { bottom: window.innerHeight - r.top + 6, left, width, maxHeight: Math.max(240, r.top - 18) }); | |
| }, [open]); | |
| useEffect(() => { | |
| if (!open) return; | |
| const away = (e: MouseEvent) => { | |
| const t = e.target as Node; | |
| if (!panel.current?.contains(t) && !button.current?.contains(t)) setOpen(false); | |
| }; | |
| const close = () => setOpen(false); | |
| document.addEventListener("mousedown", away); | |
| window.addEventListener("resize", close); | |
| return () => { | |
| document.removeEventListener("mousedown", away); | |
| window.removeEventListener("resize", close); | |
| }; | |
| }, [open]); | |
| return ( | |
| <> | |
| <button type="button" ref={button} className={`sp-trigger${open ? " open" : ""}`} aria-haspopup="dialog" aria-expanded={open} | |
| disabled={disabled} onClick={() => setOpen((o) => !o)}> | |
| <span className="sp-trigger-text">{label}</span> | |
| <ChevronIcon size={16} className={`chevron${open ? " open" : ""}`} /> | |
| </button> | |
| {open && createPortal( | |
| <div ref={panel} className="sp-panel" role="dialog" aria-label={ariaLabel} style={place}> | |
| {children} | |
| </div>, | |
| document.body, | |
| )} | |
| </> | |
| ); | |
| } | |
| /** Pick posts from a dropdown: a button that says how many are chosen, and a panel under it with the search box and the | |
| * ticks. `single` picks one post from the whole archive (the picker loads the list itself). */ | |
| export function PostsMenu({ docs, selected, onChange, max, single = false, loading = false }: { | |
| docs?: Doc[] | null; | |
| selected: string[]; | |
| onChange: (ids: string[]) => void; | |
| max?: number; | |
| single?: boolean; | |
| loading?: boolean; | |
| }) { | |
| const total = docs?.length ?? 0; | |
| const label = loading ? "Loading posts" | |
| : single ? (selected.length ? "1 post selected" : "Pick a post") | |
| : selected.length === 0 ? "Posts: none" | |
| : `Posts: ${selected.length} of ${total}`; | |
| return ( | |
| <MenuPanel label={label} ariaLabel="Choose posts" disabled={loading || (!single && total === 0)}> | |
| {single | |
| ? <DocPicker selected={selected} onChange={onChange} single /> | |
| : <DocPicker docs={docs ?? []} selected={selected} onChange={onChange} max={max} count={false} />} | |
| {!single && max && <p className="muted small sp-note">Up to {max} posts. They are combined into one.</p>} | |
| </MenuPanel> | |
| ); | |
| } | |
| /** Pick notebook chats from a dropdown, the same way: a button with the count, and the chats to tick in a panel. */ | |
| export function ChatsMenu({ chats, selected, onChange, max }: { | |
| chats: ChatSummary[]; | |
| selected: string[]; | |
| onChange: (ids: string[]) => void; | |
| max: number; | |
| }) { | |
| const toggle = (id: string) => | |
| onChange(selected.includes(id) ? selected.filter((x) => x !== id) : selected.length < max ? [...selected, id] : selected); | |
| const label = chats.length === 0 ? "Chats: none yet" : selected.length === 0 ? "Chats: none" : `Chats: ${selected.length} of ${chats.length}`; | |
| return ( | |
| <MenuPanel label={label} ariaLabel="Choose chats" disabled={chats.length === 0}> | |
| <div className="picker"> | |
| <ul className="picker-list"> | |
| {chats.map((c) => ( | |
| <li key={c.id}> | |
| <label className={`picker-row${selected.includes(c.id) ? " on" : ""}`}> | |
| <input type="checkbox" checked={selected.includes(c.id)} disabled={!selected.includes(c.id) && selected.length >= max} | |
| onChange={() => toggle(c.id)} /> | |
| <span className="picker-title">{c.title?.trim() || "Untitled chat"}</span> | |
| </label> | |
| </li> | |
| ))} | |
| </ul> | |
| </div> | |
| <p className="muted small sp-note">Up to {max} chats. Questions come from what was said in them.</p> | |
| </MenuPanel> | |
| ); | |
| } | |