Spaces:
Runtime error
Runtime error
| import { useEffect, useState } from "react"; | |
| import type { Artifact, ReportSuggestion } from "../api/types"; | |
| import { Dropdown } from "./Dropdown"; | |
| import { ThemePicker } from "./Infographic"; | |
| import { Modal } from "./ui"; | |
| const LABEL = { | |
| mind_map: "Mind Constellation", flashcards: "flashcards", quiz: "quiz", table: "comparison table", timeline: "timeline", | |
| key_terms: "key terms", infographic: "infographic", | |
| } as const; | |
| /** The visuals that also exist as their own artifact, so one already made can be reused. */ | |
| const HAS_STUDIO_ARTIFACT: string[] = ["mind_map", "flashcards", "quiz", "infographic"]; | |
| /** Add a suggested visual: make a new one from the report's sources, or use one the user already made. */ | |
| export function ReportAddDialog({ suggestion, existing, loading = false, busy, error, onClose, onAdd }: { | |
| suggestion: ReportSuggestion; | |
| /** Ready artifacts of this kind from the same notebook. */ | |
| existing: Artifact[]; | |
| /** The list is still on its way: the option waits instead of showing "none yet". */ | |
| loading?: boolean; | |
| busy: boolean; | |
| error: string | null; | |
| onClose: () => void; | |
| onAdd: (existingArtifactId: string | null, theme?: string) => void; | |
| }) { | |
| const [useExisting, setUseExisting] = useState(false); | |
| const [pick, setPick] = useState(existing[0]?.id ?? ""); | |
| const [theme, setTheme] = useState("launch"); | |
| // The list arrives after the dialog opens: pick its first one then, so choosing "use one you made" is never empty. | |
| useEffect(() => { | |
| if (!existing.some((a) => a.id === pick)) setPick(existing[0]?.id ?? ""); | |
| }, [existing, pick]); | |
| return ( | |
| <Modal title={`Add ${LABEL[suggestion.kind]}`} onClose={onClose} wide={suggestion.kind === "infographic"}> | |
| <div className="rp-add-options"> | |
| <p className="muted">{suggestion.brief}</p> | |
| <label className="vw-option"> | |
| <input type="radio" name="rp-add" checked={!useExisting} onChange={() => setUseExisting(false)} /> | |
| Make a new one from this report's sources | |
| </label> | |
| {HAS_STUDIO_ARTIFACT.includes(suggestion.kind) && ( | |
| <label className="vw-option"> | |
| <input type="radio" name="rp-add" checked={useExisting} disabled={loading || existing.length === 0} onChange={() => setUseExisting(true)} /> | |
| {loading ? "Use one you already made (looking...)" | |
| : existing.length === 0 ? "Use one you already made (none yet)" | |
| : `Use one you already made (${existing.length})`} | |
| </label> | |
| )} | |
| {useExisting && existing.length > 0 && ( | |
| <Dropdown label="Choose one" value={pick} onChange={setPick} | |
| options={existing.map((a) => ({ value: a.id, label: a.title }))} /> | |
| )} | |
| {suggestion.kind === "infographic" && !useExisting && ( | |
| <> | |
| <span className="vw-label">Theme</span> | |
| <ThemePicker value={theme} onChange={setTheme} /> | |
| </> | |
| )} | |
| {error && <p className="error-text">{error}</p>} | |
| <div className="row end"> | |
| <button type="button" className="btn" onClick={onClose}>Cancel</button> | |
| <button type="button" className="btn btn-primary" disabled={busy || (useExisting && !pick)} | |
| onClick={() => onAdd(useExisting ? pick : null, theme)}> | |
| {busy ? "Adding..." : "Add"} | |
| </button> | |
| </div> | |
| </div> | |
| </Modal> | |
| ); | |
| } | |