1383 lines
48 KiB
TypeScript
1383 lines
48 KiB
TypeScript
import { configDefaults } from "./config-schema.js";
|
||
import { resolveRenders } from "./render-hooks.js";
|
||
import { readerExtensionSettings } from "./reader-extensions.js";
|
||
import { usePrompt } from "./drafts.js";
|
||
import {
|
||
LocalInput,
|
||
LocalSelect,
|
||
LocalTextArea,
|
||
Choice,
|
||
LocalChoice,
|
||
Toggle,
|
||
useCommandControl,
|
||
TextArea,
|
||
TextInput,
|
||
} from "@quixos/camino-react/ui";
|
||
import { useEffect, useRef, useState } from "react";
|
||
import {
|
||
referenceOf,
|
||
useCaminoMembers,
|
||
useCrdtText,
|
||
useInterface,
|
||
useMutationFeedback,
|
||
type ExactReference,
|
||
} from "@quixos/camino-react";
|
||
import { ColorPicker, FontPicker, NumberControl, Options, Switch } from "./controls.js";
|
||
import { configDefinition } from "./annotator-config.js";
|
||
import { authoringTitle, FeatureConversation } from "./tasks.js";
|
||
import { ReaderPreview } from "./preview.js";
|
||
import { interfaces } from "./gen/client.js";
|
||
import {
|
||
CustomConfig,
|
||
fontFields,
|
||
underlineFields,
|
||
configFields,
|
||
configValues,
|
||
type ConfigValues,
|
||
type ConfigValue,
|
||
} from "./annotator-config.js";
|
||
import {
|
||
accepted,
|
||
errorMessage,
|
||
type Catalog,
|
||
type FeatureNode,
|
||
type ReaderNode,
|
||
type Root,
|
||
type NavigationValues,
|
||
type DocNode,
|
||
} from "./model.js";
|
||
|
||
export const appearances = [
|
||
{ key: "overhead", title: "Text labels", description: "Words or notes above or below the text." },
|
||
{ key: "highlight", title: "Highlight", description: "Color behind the text." },
|
||
{ key: "underline", title: "Underline", description: "A line beneath the text." },
|
||
{ key: "color", title: "Text color", description: "Change the color of the text." },
|
||
{ key: "tooltip", title: "Tooltip", description: "A floating note on hover or click." },
|
||
{ key: "sidebar", title: "Sidebar", description: "Definitions, translations, or longer notes." },
|
||
{ key: "replace", title: "Replace text", description: "Display different text in place of a source span." },
|
||
{ key: "bold", title: "Bold", description: "Emphasize selected words." },
|
||
{ key: "italic", title: "Italic", description: "Set selected words in italics." },
|
||
];
|
||
export const revealOptions = (style: string) => [
|
||
...(["tooltip", "sidebar"].includes(style) ? [] : [{ value: "always", label: "Permanent" }]),
|
||
...(["overhead", "replace", "bold", "italic"].includes(style) ? [] : [{ value: "hover", label: "On hover" }]),
|
||
{ value: "click", label: "On click" },
|
||
];
|
||
export function Preview({
|
||
style,
|
||
color = "#53796c",
|
||
placement = "above",
|
||
pattern = "solid",
|
||
}: {
|
||
style: string;
|
||
color?: string;
|
||
placement?: string;
|
||
pattern?: string;
|
||
}) {
|
||
return (
|
||
<div
|
||
className={"lr-preview lr-preview-" + style + " lr-preview-" + placement + " lr-preview-line-" + pattern}
|
||
style={{ "--annotation": color } as React.CSSProperties}
|
||
aria-hidden="true"
|
||
>
|
||
<span className="lr-preview-source">
|
||
Un{" "}
|
||
<b>
|
||
{style === "overhead" && <small className="lr-preview-label">coffee</small>}
|
||
{style === "tooltip" && <small className="lr-preview-tip-label">coffee</small>}
|
||
{style === "replace" ? "coffee" : "café"}
|
||
</b>
|
||
</span>
|
||
{style === "sidebar" && (
|
||
<small className="lr-preview-margin">
|
||
café
|
||
<br />
|
||
coffee
|
||
</small>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
export function Modal({
|
||
title,
|
||
children,
|
||
close,
|
||
wide = false,
|
||
heading,
|
||
}: {
|
||
title: string;
|
||
children: React.ReactNode;
|
||
close: () => void;
|
||
wide?: boolean;
|
||
heading?: React.ReactNode;
|
||
}) {
|
||
const panel = useRef<HTMLDivElement>(null),
|
||
previous = useRef<Element | null>(null);
|
||
useEffect(() => {
|
||
previous.current = (panel.current?.getRootNode() as Document | ShadowRoot)?.activeElement ?? document.activeElement;
|
||
panel.current?.focus();
|
||
return () => {
|
||
if (previous.current instanceof HTMLElement && previous.current.isConnected) previous.current.focus();
|
||
};
|
||
}, []);
|
||
return (
|
||
<div
|
||
className="lr-backdrop"
|
||
onPointerDown={(event) => {
|
||
if (event.target === event.currentTarget) close();
|
||
}}
|
||
>
|
||
<div
|
||
className={wide ? "lr-modal lr-settings-modal" : "lr-modal"}
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-label={title}
|
||
tabIndex={-1}
|
||
ref={panel}
|
||
onKeyDown={(event) => {
|
||
if ((event.target as Element).closest("dialog[open], [popover]:popover-open")) return;
|
||
if (event.key === "Escape") close();
|
||
if (event.key === "Tab") {
|
||
const elements = Array.from(
|
||
panel.current?.querySelectorAll<HTMLElement>(
|
||
"button:not([disabled]),input:not([disabled]),textarea:not([disabled]),select:not([disabled]),a[href]",
|
||
) ?? [],
|
||
);
|
||
const active =
|
||
(panel.current?.getRootNode() as Document | ShadowRoot)?.activeElement ?? document.activeElement;
|
||
const first = elements[0],
|
||
last = elements[elements.length - 1];
|
||
if (event.shiftKey && (active === first || active === panel.current)) {
|
||
event.preventDefault();
|
||
last?.focus();
|
||
} else if (!event.shiftKey && active === last) {
|
||
event.preventDefault();
|
||
first?.focus();
|
||
}
|
||
}
|
||
}}
|
||
>
|
||
<header>
|
||
<div>{heading ?? <h2>{title}</h2>}</div>
|
||
<button className="lr-icon" onClick={close} aria-label="Close dialog">
|
||
×
|
||
</button>
|
||
</header>
|
||
{children}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
export function FeatureToggle({
|
||
feature,
|
||
onIntent,
|
||
}: {
|
||
feature: FeatureNode;
|
||
onIntent?: (enabled: boolean | null) => void;
|
||
}) {
|
||
const ops = useInterface(interfaces.ReadingFeature, referenceOf(feature));
|
||
const [intent, setIntent] = useState<boolean | null>(null),
|
||
[busy, setBusy] = useState(false),
|
||
[error, setError] = useState("");
|
||
const enabled = intent ?? feature.data.enabled;
|
||
useEffect(() => {
|
||
if (intent !== null && intent === feature.data.enabled) {
|
||
setIntent(null);
|
||
onIntent?.(null);
|
||
}
|
||
}, [intent, feature.data.enabled, onIntent]);
|
||
return (
|
||
<div className="lr-feature-toggle">
|
||
<Switch
|
||
label={feature.data.name + " enabled"}
|
||
value={enabled}
|
||
disabled={busy || ops.status !== "ready"}
|
||
change={(value) => {
|
||
if (ops.status !== "ready") return;
|
||
setIntent(value);
|
||
onIntent?.(value);
|
||
setBusy(true);
|
||
setError("");
|
||
const ticket = ops.value.setEnabled.call(value);
|
||
void ticket.local.catch((e) => {
|
||
setIntent(null);
|
||
onIntent?.(null);
|
||
setError(errorMessage(e));
|
||
});
|
||
void ticket.settled.then(
|
||
(result) => {
|
||
setBusy(false);
|
||
if (result.status !== "accepted") {
|
||
setIntent(null);
|
||
onIntent?.(null);
|
||
setError("Could not change this annotator");
|
||
}
|
||
},
|
||
(e) => {
|
||
setBusy(false);
|
||
setIntent(null);
|
||
onIntent?.(null);
|
||
setError(errorMessage(e));
|
||
},
|
||
);
|
||
}}
|
||
/>
|
||
<span>{enabled ? "Enabled" : "Disabled"}</span>
|
||
{error && <small role="alert">{error}</small>}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** Reader reassignment checks the complete inverse relation, not a paginated query window. */
|
||
function ReaderAssignmentInputs({
|
||
reader,
|
||
ready,
|
||
}: {
|
||
reader: ReaderNode;
|
||
ready: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
|
||
}) {
|
||
const ref = referenceOf(reader);
|
||
const inputs = useCaminoMembers({
|
||
subject: ref,
|
||
interface: "interface:reading:reader@1",
|
||
members: ["reading:reader:documents", "reading:reader:features"],
|
||
complete: { "reading:reader:documents": 512, "reading:reader:features": 512 },
|
||
});
|
||
useEffect(() => {
|
||
const available = inputs.status === "ready";
|
||
ready((current) => (current[ref.object] === available ? current : { ...current, [ref.object]: available }));
|
||
}, [inputs.status, ref.object, ready]);
|
||
return null;
|
||
}
|
||
|
||
export function ReaderSettings({
|
||
library,
|
||
document,
|
||
root,
|
||
catalog,
|
||
initialReader,
|
||
navigation,
|
||
navigationValues,
|
||
previewDocument = null,
|
||
previewCursor = 0,
|
||
close,
|
||
}: {
|
||
library: ExactReference;
|
||
document?: ExactReference;
|
||
root: Root;
|
||
catalog: Catalog;
|
||
initialReader?: string;
|
||
navigation: ExactReference;
|
||
navigationValues: NavigationValues;
|
||
previewDocument?: DocNode | null;
|
||
previewCursor?: number;
|
||
close: () => void;
|
||
}) {
|
||
const api = useInterface(interfaces.LanguageReader, library),
|
||
nav = useInterface({ selectSettings: interfaces.ReadingNavigation.selectSettings }, navigation);
|
||
const chosen =
|
||
navigationValues.settingsReader?._camino.ref.object ??
|
||
initialReader ??
|
||
root.defaultReader?._camino.ref.object ??
|
||
"";
|
||
const settingsWrite = useRef<string | null>(null);
|
||
const section =
|
||
navigationValues.ui.section === "feature"
|
||
? (navigationValues.settingsFeature?._camino.ref.object ?? "general")
|
||
: navigationValues.ui.section;
|
||
const setSection = (section: string) => {
|
||
if (nav.status !== "ready") return;
|
||
const feature = root.features.entries.find((e) => referenceOf(e.node).object === section)?.node;
|
||
const ticket = nav.value.selectSettings.call(
|
||
{
|
||
reader: null,
|
||
feature: feature ? referenceOf(feature) : null,
|
||
section: feature ? "feature" : section,
|
||
open: false,
|
||
document: null,
|
||
},
|
||
{ requires: settingsWrite.current ? [settingsWrite.current] : [] },
|
||
);
|
||
settingsWrite.current = ticket.operationId;
|
||
void accepted(ticket).catch((e) => {
|
||
if (settingsWrite.current === ticket.operationId) settingsWrite.current = null;
|
||
setError(errorMessage(e));
|
||
});
|
||
};
|
||
const selectReader = (ref: ExactReference) => {
|
||
if (nav.status !== "ready") return;
|
||
const ticket = nav.value.selectSettings.call(
|
||
{
|
||
reader: asReader(ref),
|
||
feature: null,
|
||
section: "general",
|
||
open: false,
|
||
document: document
|
||
? { ...document, expectation: { kind: "interface", id: "interface:reading:document@1" } }
|
||
: null,
|
||
},
|
||
{ requires: settingsWrite.current ? [settingsWrite.current] : [] },
|
||
);
|
||
settingsWrite.current = ticket.operationId;
|
||
void accepted(ticket).catch((e) => {
|
||
if (settingsWrite.current === ticket.operationId) settingsWrite.current = null;
|
||
setError(errorMessage(e));
|
||
});
|
||
};
|
||
const selectFeature = (ref: ExactReference) => {
|
||
if (nav.status !== "ready") return;
|
||
const ticket = nav.value.selectSettings.call(
|
||
{
|
||
reader: null,
|
||
feature: { ...ref, expectation: { kind: "interface", id: "interface:reading:feature@1" } },
|
||
section: "feature",
|
||
open: false,
|
||
document: null,
|
||
},
|
||
{ requires: settingsWrite.current ? [settingsWrite.current] : [] },
|
||
);
|
||
settingsWrite.current = ticket.operationId;
|
||
void accepted(ticket).catch((e) => {
|
||
if (settingsWrite.current === ticket.operationId) settingsWrite.current = null;
|
||
setError(errorMessage(e));
|
||
});
|
||
};
|
||
const setChosen = (object: string) => {
|
||
const reader = readers.find((r) => referenceOf(r).object === object);
|
||
if (reader) selectReader(referenceOf(reader));
|
||
};
|
||
const [error, setError] = useState(""),
|
||
[creating, setCreating] = useState(false),
|
||
[assignmentReady, setAssignmentReady] = useState<Record<string, boolean>>({});
|
||
const readers = root.readers.entries.map((e) => e.node);
|
||
const retainedReader = navigationValues.settingsReader;
|
||
if (retainedReader && !readers.some((r) => referenceOf(r).object === referenceOf(retainedReader).object))
|
||
readers.push(retainedReader);
|
||
const reader = readers.find((r) => referenceOf(r).object === chosen);
|
||
const members = new Set(reader?.features.entries.map((e) => referenceOf(e.node).object) ?? []),
|
||
features = root.features.entries.map((e) => e.node).filter((f) => members.has(referenceOf(f).object));
|
||
const selected = features.find((f) => referenceOf(f).object === section);
|
||
const settingsExtension = readerExtensionSettings.find((extension) => section === `extension:${extension.id}`);
|
||
const ExtensionSettings = settingsExtension?.Settings;
|
||
const [previewReader, setPreviewReader] = useState<ReaderNode | null>(null),
|
||
[previewFeature, setPreviewFeature] = useState<FeatureNode | null>(null);
|
||
const shownReader =
|
||
previewReader && reader && referenceOf(previewReader).object === referenceOf(reader).object
|
||
? previewReader
|
||
: reader;
|
||
const shownFeatures = features.map((feature) =>
|
||
previewFeature && referenceOf(previewFeature).object === referenceOf(feature).object ? previewFeature : feature,
|
||
);
|
||
async function add(copy: boolean) {
|
||
if (api.status !== "ready" || !reader || creating) return;
|
||
setCreating(true);
|
||
try {
|
||
const ref = await accepted(
|
||
api.value.addReader.call({
|
||
name: copy ? reader.data.name + " copy" : "New reader",
|
||
copy: copy ? { ...referenceOf(reader), expectation: { kind: "atom", id: "atom:reading:reader" } } : null,
|
||
}),
|
||
);
|
||
selectReader(ref);
|
||
} catch (e) {
|
||
setError(errorMessage(e));
|
||
} finally {
|
||
setCreating(false);
|
||
}
|
||
}
|
||
return (
|
||
<Modal wide title="Reader settings" close={close}>
|
||
<div className="lr-settings-top">
|
||
<LocalChoice
|
||
aria-label="Configure reader"
|
||
className="lr-reader-choice"
|
||
value={reader ? referenceOf(reader).object : ""}
|
||
onValueChange={setChosen}
|
||
disabled={nav.status !== "ready"}
|
||
options={readers.map((r) => ({
|
||
value: referenceOf(r).object,
|
||
label: r.data.name,
|
||
disabled: !assignmentReady[referenceOf(r).object],
|
||
}))}
|
||
/>
|
||
<div className="lr-reader-actions">
|
||
<button disabled={!reader || creating} onClick={() => void add(true)}>
|
||
Clone reader
|
||
</button>
|
||
<details className="lr-new-reader">
|
||
<summary>New reader</summary>
|
||
<div>
|
||
<button disabled={creating} onClick={() => void add(false)}>
|
||
Blank reader
|
||
</button>
|
||
<button
|
||
disabled={creating || api.status !== "ready"}
|
||
onClick={(event) => {
|
||
if (api.status !== "ready") return;
|
||
event.currentTarget.closest("details")?.removeAttribute("open");
|
||
setCreating(true);
|
||
void accepted(api.value.addFrenchReader.call(null))
|
||
.then(
|
||
(ref) => {
|
||
selectReader(ref);
|
||
},
|
||
(e) => setError(errorMessage(e)),
|
||
)
|
||
.finally(() => setCreating(false));
|
||
}}
|
||
>
|
||
French · click glosses
|
||
</button>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
{readers.map((r) => (
|
||
<ReaderAssignmentInputs key={referenceOf(r).object} reader={r} ready={setAssignmentReady} />
|
||
))}
|
||
</div>
|
||
<div className="lr-settings-body lr-settings-with-preview">
|
||
<nav className="lr-settings-nav" aria-label="Reader settings sections">
|
||
<button
|
||
disabled={nav.status !== "ready"}
|
||
aria-current={section === "general" ? "page" : undefined}
|
||
onClick={() => setSection("general")}
|
||
>
|
||
General
|
||
</button>
|
||
{readerExtensionSettings
|
||
.filter((extension) => extension.Settings)
|
||
.map((extension) => (
|
||
<button
|
||
key={extension.id}
|
||
disabled={nav.status !== "ready"}
|
||
aria-current={section === `extension:${extension.id}` ? "page" : undefined}
|
||
onClick={() => setSection(`extension:${extension.id}`)}
|
||
>
|
||
{extension.title}
|
||
</button>
|
||
))}
|
||
<div className="lr-nav-label">Annotators</div>
|
||
{features.map((f) => (
|
||
<button
|
||
key={referenceOf(f).object}
|
||
disabled={nav.status !== "ready"}
|
||
aria-current={section === referenceOf(f).object ? "page" : undefined}
|
||
onClick={() => setSection(referenceOf(f).object)}
|
||
>
|
||
<i className="lr-annotator-dot" />
|
||
{f.data.name}
|
||
{!f.data.enabled && <small>Off</small>}
|
||
</button>
|
||
))}
|
||
{root.tasks.entries
|
||
.map((e) => e.node)
|
||
.filter(
|
||
(t) =>
|
||
t.data.kind === "customize" &&
|
||
t.reader?._camino.ref.object === chosen &&
|
||
!features.some((f) => f.authoring?._camino.ref.object === referenceOf(t).object) &&
|
||
["queued", "running", "waiting_input"].includes(
|
||
t.thread?.active?.progress.status ?? t.request?.progress.status ?? t.data.status,
|
||
),
|
||
)
|
||
.map((t) => (
|
||
<div className="lr-building-annotator" role="status" key={referenceOf(t).object}>
|
||
<span className="lr-spinner" />
|
||
<span>
|
||
{authoringTitle(t)}
|
||
<small>Building…</small>
|
||
</span>
|
||
</div>
|
||
))}
|
||
<button disabled={nav.status !== "ready"} onClick={() => setSection("new")}>
|
||
＋ New annotator
|
||
</button>
|
||
</nav>
|
||
<div className="lr-settings-content" key={`${reader ? referenceOf(reader).object : ""}:${section}`}>
|
||
<nav className="lr-breadcrumb" aria-label="Settings path">
|
||
<button onClick={() => setSection("general")}>{reader?.data.name ?? "Reader"}</button>
|
||
<span>
|
||
{" "}
|
||
/{" "}
|
||
{selected?.data.name ??
|
||
(settingsExtension
|
||
? settingsExtension.title
|
||
: section === "new"
|
||
? "New annotator"
|
||
: section === "templates"
|
||
? "New annotator"
|
||
: "General")}
|
||
</span>
|
||
</nav>
|
||
{reader &&
|
||
(selected ? (
|
||
<ExistingFeature
|
||
key={referenceOf(selected).object}
|
||
feature={selected}
|
||
catalog={catalog}
|
||
onPreviewChange={setPreviewFeature}
|
||
/>
|
||
) : ExtensionSettings ? (
|
||
<ExtensionSettings
|
||
library={library}
|
||
reader={reader}
|
||
defaultVocabulary={root.defaultVocabulary ? referenceOf(root.defaultVocabulary) : null}
|
||
/>
|
||
) : section === "new" || section === "templates" ? (
|
||
<NewAnnotator
|
||
key={referenceOf(reader).object}
|
||
library={library}
|
||
reader={reader}
|
||
navigation={navigation}
|
||
navigationValues={navigationValues}
|
||
catalog={catalog}
|
||
archivedTypes={root.archivedTypes}
|
||
added={selectFeature}
|
||
libraryOpen={section === "templates"}
|
||
created={() => setSection("general")}
|
||
/>
|
||
) : (
|
||
<GeneralReader key={referenceOf(reader).object} reader={reader} onPreviewChange={setPreviewReader} />
|
||
))}
|
||
{reader && selected && !selected.authoring && (
|
||
<AskForChange library={library} reader={reader} feature={selected} navigation={navigation} />
|
||
)}
|
||
{reader && (
|
||
<FeatureConversation
|
||
library={library}
|
||
reader={referenceOf(reader)}
|
||
navigation={navigation}
|
||
tasks={root.tasks.entries
|
||
.map((e) => e.node)
|
||
.filter(
|
||
(t) =>
|
||
t.data.kind === "customize" &&
|
||
t.reader?._camino.ref.object === referenceOf(reader).object &&
|
||
(selected
|
||
? selected.authoring?._camino.ref.object === referenceOf(t).object
|
||
: section === "general"),
|
||
)}
|
||
/>
|
||
)}
|
||
</div>
|
||
{shownReader && (
|
||
<ReaderPreview
|
||
defaultVocabulary={root.defaultVocabulary ? referenceOf(root.defaultVocabulary) : null}
|
||
document={previewDocument}
|
||
cursor={previewCursor}
|
||
reader={shownReader}
|
||
features={shownFeatures}
|
||
selected={selected}
|
||
catalog={catalog}
|
||
/>
|
||
)}
|
||
</div>
|
||
{error && <p role="alert">{error}</p>}
|
||
</Modal>
|
||
);
|
||
}
|
||
const asReader = (ref: ExactReference) => ({
|
||
...ref,
|
||
expectation: { kind: "interface" as const, id: "interface:reading:reader@1" as const },
|
||
});
|
||
function GeneralReader({
|
||
reader,
|
||
onPreviewChange,
|
||
}: {
|
||
reader: ReaderNode;
|
||
onPreviewChange?: (reader: ReaderNode | null) => void;
|
||
}) {
|
||
const api = useInterface(interfaces.ReadingReader, referenceOf(reader)),
|
||
feedback = useMutationFeedback();
|
||
const [intent, setIntent] = useState<ReaderNode["data"] | null>(null),
|
||
[paletteIntent, setPaletteIntent] = useState<ReaderNode["palette"] | null>(null),
|
||
[saveError, setSaveError] = useState("");
|
||
const saved = useRef(reader.data),
|
||
queued = useRef<Partial<ReaderNode["data"]>>({}),
|
||
running = useRef(false);
|
||
saved.current = reader.data.configRevision >= saved.current.configRevision ? reader.data : saved.current;
|
||
const d = intent ?? reader.data,
|
||
[name, setName] = useState(d.name),
|
||
[width, setWidth] = useState(d.width);
|
||
useEffect(() => {
|
||
onPreviewChange?.({ ...reader, data: d, palette: paletteIntent ?? reader.palette });
|
||
}, [reader, d, paletteIntent, onPreviewChange]);
|
||
useEffect(() => () => onPreviewChange?.(null), [onPreviewChange]);
|
||
useEffect(() => {
|
||
if (paletteIntent && paletteIntent.text === reader.palette.text && paletteIntent.accent === reader.palette.accent)
|
||
setPaletteIntent(null);
|
||
}, [reader.palette, paletteIntent]);
|
||
useEffect(() => {
|
||
setName(d.name);
|
||
setWidth(d.width);
|
||
}, [d.name, d.width]);
|
||
useEffect(() => {
|
||
if (
|
||
!running.current &&
|
||
!Object.keys(queued.current).length &&
|
||
intent &&
|
||
reader.data.configRevision >= intent.configRevision
|
||
)
|
||
setIntent(null);
|
||
}, [reader.data, intent]);
|
||
function update(changes: Partial<typeof d>) {
|
||
if (api.status !== "ready") return;
|
||
setIntent((previous) => ({ ...saved.current, ...previous, ...changes }));
|
||
Object.assign(queued.current, changes);
|
||
if (running.current) return;
|
||
running.current = true;
|
||
setSaveError("");
|
||
void (async () => {
|
||
try {
|
||
while (Object.keys(queued.current).length) {
|
||
const next = queued.current;
|
||
queued.current = {};
|
||
const { configRevision, ...settings } = saved.current;
|
||
const value = { ...settings, ...next };
|
||
await accepted(api.value.configure.call({ ...value, expectedRevision: configRevision }));
|
||
saved.current = { ...value, configRevision: configRevision + 1 };
|
||
}
|
||
setIntent(saved.current);
|
||
} catch (error) {
|
||
queued.current = {};
|
||
setIntent(null);
|
||
saved.current = reader.data;
|
||
setSaveError(errorMessage(error));
|
||
} finally {
|
||
running.current = false;
|
||
}
|
||
})();
|
||
}
|
||
const widths = [640, 800, 1000, 1200, 1600, 0];
|
||
return (
|
||
<section className="lr-settings-section">
|
||
<h3>General</h3>
|
||
{saveError && <p role="alert">{saveError}</p>}
|
||
<p className="lr-muted">Applies to all texts using this reader.</p>
|
||
<label className="lr-field lr-name-field">
|
||
Reader name
|
||
<LocalInput
|
||
aria-label="Reader name"
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
onBlur={() => name !== d.name && update({ name })}
|
||
maxLength={100}
|
||
/>
|
||
</label>
|
||
<div className="lr-setting-row">
|
||
<div>
|
||
<strong>Text size</strong>
|
||
</div>
|
||
<NumberControl label="Reader font size" value={d.size} min={12} max={64} change={(size) => update({ size })} />
|
||
</div>
|
||
<div className="lr-setting-row">
|
||
<div>
|
||
<strong>Text width</strong>
|
||
<small>Text stays centered beside your notes.</small>
|
||
</div>
|
||
<div className="lr-width-control">
|
||
<LocalInput
|
||
aria-label="Maximum reading width"
|
||
type="range"
|
||
min={0}
|
||
max={5}
|
||
step={1}
|
||
value={Math.max(0, widths.indexOf(width))}
|
||
onChange={(e) => setWidth(widths[Number(e.target.value)])}
|
||
onPointerUp={() => width !== d.width && update({ width })}
|
||
onKeyUp={() => width !== d.width && update({ width })}
|
||
/>
|
||
<small>{width ? width + " px" : "Full width"}</small>
|
||
</div>
|
||
</div>
|
||
<div className="lr-setting-block">
|
||
<h4>Reading fonts</h4>
|
||
<FontPicker label="Reader font and fallbacks" value={d.font} change={(font) => update({ font })} />
|
||
</div>
|
||
<div className="lr-setting-block">
|
||
<h4>Text color</h4>
|
||
<ColorPicker
|
||
label="Reader text color"
|
||
value={reader.palette.text}
|
||
change={(text) => {
|
||
if (api.status !== "ready") return;
|
||
const palette = { ...reader.palette, ...paletteIntent, text };
|
||
setPaletteIntent(palette);
|
||
feedback.track(api.value.palette.set(palette));
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="lr-setting-block">
|
||
<h4>Accent color</h4>
|
||
<ColorPicker
|
||
label="Reader accent color"
|
||
value={reader.palette.accent}
|
||
change={(accent) => {
|
||
if (api.status !== "ready") return;
|
||
const palette = { ...reader.palette, ...paletteIntent, accent };
|
||
setPaletteIntent(palette);
|
||
feedback.track(api.value.palette.set(palette));
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="lr-setting-block">
|
||
<h4>Background color</h4>
|
||
<ColorPicker
|
||
label="Reader background"
|
||
background
|
||
value={d.background}
|
||
change={(background) => update({ background })}
|
||
/>
|
||
</div>
|
||
{feedback.message && <p role="alert">{feedback.message}</p>}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function AnnotatorLibrary({
|
||
library,
|
||
reader,
|
||
catalog,
|
||
archivedTypes,
|
||
added,
|
||
initiallyOpen,
|
||
}: {
|
||
library: ExactReference;
|
||
reader: ReaderNode;
|
||
catalog: Catalog;
|
||
archivedTypes: readonly string[];
|
||
added: (ref: ExactReference) => void;
|
||
initiallyOpen: boolean;
|
||
}) {
|
||
const api = useInterface(interfaces.LanguageReader, library);
|
||
const [selected, setSelected] = useState<string | null>(null),
|
||
[values, setValues] = useState<ConfigValues>({}),
|
||
[title, setTitle] = useState(""),
|
||
[archiveIntent, setArchiveIntent] = useState<Record<string, boolean>>({}),
|
||
[busy, setBusy] = useState(false),
|
||
[error, setError] = useState("");
|
||
useEffect(() => {
|
||
setArchiveIntent((previous) =>
|
||
Object.fromEntries(
|
||
Object.entries(previous).filter(([key, archived]) => archivedTypes.includes(key) !== archived),
|
||
),
|
||
);
|
||
}, [archivedTypes]);
|
||
const isArchived = (key: string) => archiveIntent[key] ?? archivedTypes.includes(key);
|
||
const item = catalog.find((candidate) => candidate.key === selected);
|
||
const definition = configDefinition(item?.config ?? "{}");
|
||
const channels = resolveRenders(definition.renders, values);
|
||
const style = channels[0]?.style ?? "color";
|
||
const choose = (candidate: Catalog[number]) => {
|
||
const fields = configDefinition(candidate.config).fields;
|
||
setValues(configDefaults(fields));
|
||
setTitle(candidate.label);
|
||
setSelected(candidate.key);
|
||
setError("");
|
||
};
|
||
async function archive(candidate: Catalog[number], archived: boolean) {
|
||
if (api.status !== "ready") return;
|
||
setArchiveIntent((previous) => ({ ...previous, [candidate.key]: archived }));
|
||
setError("");
|
||
try {
|
||
await accepted(api.value.archiveType.call({ processor: candidate.key, archived }));
|
||
if (selected === candidate.key && archived) setSelected(null);
|
||
} catch (error) {
|
||
setArchiveIntent((previous) => {
|
||
const next = { ...previous };
|
||
delete next[candidate.key];
|
||
return next;
|
||
});
|
||
setError(errorMessage(error));
|
||
}
|
||
}
|
||
async function add() {
|
||
if (api.status !== "ready" || !item) return;
|
||
setBusy(true);
|
||
setError("");
|
||
try {
|
||
added(
|
||
await accepted(
|
||
api.value.addFeature.call({
|
||
authoring: null,
|
||
reader: { ...referenceOf(reader), expectation: { kind: "atom", id: "atom:reading:reader" } },
|
||
name: title.trim() || item.label,
|
||
processor: item.key,
|
||
options: JSON.stringify(values),
|
||
}),
|
||
),
|
||
);
|
||
} catch (error) {
|
||
setError(errorMessage(error));
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
return (
|
||
<details className="lr-type-library" open={initiallyOpen || undefined}>
|
||
<summary>
|
||
<span className="lr-library-symbol" aria-hidden="true">
|
||
▦
|
||
</span>
|
||
<span>
|
||
<strong>Use an existing type</strong>
|
||
<small>Add another annotator with its own settings.</small>
|
||
</span>
|
||
<span className="lr-library-chevron" aria-hidden="true">
|
||
⌄
|
||
</span>
|
||
</summary>
|
||
<div className="lr-type-library-content">
|
||
{item ? (
|
||
<div className="lr-type-instance">
|
||
<button className="lr-type-back" onClick={() => setSelected(null)}>
|
||
← All types
|
||
</button>
|
||
<header>
|
||
<h4>{item.label}</h4>
|
||
<p>{definition.description}</p>
|
||
</header>
|
||
<label className="lr-field">
|
||
Name
|
||
<LocalInput
|
||
aria-label="Existing type annotator name"
|
||
value={title}
|
||
onChange={(event) => setTitle(event.target.value)}
|
||
maxLength={100}
|
||
/>
|
||
</label>
|
||
<CustomConfig
|
||
processor={item.key}
|
||
fields={definition.fields}
|
||
values={values}
|
||
disabled={busy}
|
||
change={(key, value) => setValues((previous) => ({ ...previous, [key]: value }))}
|
||
/>
|
||
<footer>
|
||
<span>
|
||
{style === "overhead"
|
||
? "Text labels"
|
||
: (appearances.find((appearance) => appearance.key === style)?.title ?? style)}{" "}
|
||
·{" "}
|
||
{channels[0]?.reveal === "click" ? "On click" : channels[0]?.reveal === "hover" ? "On hover" : "Always"}
|
||
</span>
|
||
<button className="lr-primary" disabled={busy || api.status !== "ready"} onClick={() => void add()}>
|
||
{busy ? "Adding…" : "Add to reader"}
|
||
</button>
|
||
</footer>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<div className="lr-type-list">
|
||
{catalog
|
||
.filter((candidate) => !isArchived(candidate.key))
|
||
.map((candidate) => {
|
||
const config = configDefinition(candidate.config);
|
||
return (
|
||
<article className="lr-type-card" key={candidate.key}>
|
||
<button className="lr-type-card-select" onClick={() => choose(candidate)}>
|
||
<span className="lr-type-mark" aria-hidden="true">
|
||
{config.renders?.[0]?.style === "overhead"
|
||
? "Ā"
|
||
: config.renders?.[0]?.style === "sidebar"
|
||
? "☷"
|
||
: config.renders?.[0]?.style === "tooltip"
|
||
? "◌"
|
||
: "Aa"}
|
||
</span>
|
||
<span>
|
||
<strong>{candidate.label}</strong>
|
||
<small>{config.description}</small>
|
||
</span>
|
||
<span className="lr-type-card-arrow" aria-hidden="true">
|
||
›
|
||
</span>
|
||
</button>
|
||
<button
|
||
className="lr-type-archive"
|
||
aria-label={"Archive type: " + candidate.label}
|
||
title="Hide this type from the library; existing annotators stay active."
|
||
disabled={api.status !== "ready"}
|
||
onClick={() => void archive(candidate, true)}
|
||
>
|
||
<svg viewBox="0 0 20 20" aria-hidden="true">
|
||
<path d="M3 3h14v4H3zM4 7v10h12V7M8 10h4" />
|
||
</svg>
|
||
</button>
|
||
</article>
|
||
);
|
||
})}
|
||
{!catalog.some((candidate) => !isArchived(candidate.key)) && (
|
||
<p className="lr-muted">No types in the library. Restore an archived type or create one below.</p>
|
||
)}
|
||
</div>
|
||
{catalog.some((candidate) => isArchived(candidate.key)) && (
|
||
<details className="lr-archived-types">
|
||
<summary>Archived types ({catalog.filter((candidate) => isArchived(candidate.key)).length})</summary>
|
||
<p>Existing annotators are unaffected.</p>
|
||
{catalog
|
||
.filter((candidate) => isArchived(candidate.key))
|
||
.map((candidate) => (
|
||
<div key={candidate.key}>
|
||
<span>{candidate.label}</span>
|
||
<button
|
||
disabled={api.status !== "ready"}
|
||
onClick={() => void archive(candidate, false)}
|
||
aria-label={"Restore type: " + candidate.label}
|
||
>
|
||
Restore
|
||
</button>
|
||
</div>
|
||
))}
|
||
</details>
|
||
)}
|
||
</>
|
||
)}
|
||
{error && <p role="alert">{error}</p>}
|
||
</div>
|
||
</details>
|
||
);
|
||
}
|
||
function LabelPosition({
|
||
value,
|
||
change,
|
||
disabled = false,
|
||
}: {
|
||
value: string;
|
||
change: (value: string) => void;
|
||
disabled?: boolean;
|
||
}) {
|
||
return (
|
||
<div className="lr-field lr-label-position">
|
||
<span>Label position</span>
|
||
<Options
|
||
label="Label position"
|
||
value={value}
|
||
disabled={disabled}
|
||
options={[
|
||
{
|
||
value: "above",
|
||
label: "Above",
|
||
preview: (
|
||
<span className="lr-position-preview lr-position-above">
|
||
<small>note</small>
|
||
<span>mot</span>
|
||
</span>
|
||
),
|
||
},
|
||
{
|
||
value: "below",
|
||
label: "Below",
|
||
preview: (
|
||
<span className="lr-position-preview lr-position-below">
|
||
<small>note</small>
|
||
<span>mot</span>
|
||
</span>
|
||
),
|
||
},
|
||
]}
|
||
change={change}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
function NewAnnotator({
|
||
library,
|
||
reader,
|
||
navigation,
|
||
navigationValues,
|
||
catalog,
|
||
archivedTypes,
|
||
added,
|
||
libraryOpen,
|
||
created,
|
||
}: {
|
||
library: ExactReference;
|
||
reader: ReaderNode;
|
||
navigation: ExactReference;
|
||
navigationValues: NavigationValues;
|
||
catalog: Catalog;
|
||
archivedTypes: readonly string[];
|
||
added: (ref: ExactReference) => void;
|
||
libraryOpen: boolean;
|
||
created: () => void;
|
||
}) {
|
||
const api = useInterface(interfaces.LanguageReader, library),
|
||
nav = useInterface(interfaces.ReadingNavigation, navigation);
|
||
const title = usePrompt(navigation, "name");
|
||
const instructions = useCrdtText({
|
||
key: navigation.object + "/annotator-instructions",
|
||
reference: navigation,
|
||
operation: interfaces.ReadingNavigation.draft.edit,
|
||
path: ["custom"],
|
||
});
|
||
const name = title.text,
|
||
text = instructions.text;
|
||
const { style, reveal, color } = navigationValues.builder,
|
||
options = configValues(navigationValues.builder.options);
|
||
const updateBuilder = (changes: Partial<typeof navigationValues.builder>) => {
|
||
if (nav.status === "ready")
|
||
void accepted(nav.value.builder.set({ ...navigationValues.builder, ...changes })).catch((e) =>
|
||
setError(errorMessage(e)),
|
||
);
|
||
};
|
||
const setStyle = (style: string) =>
|
||
updateBuilder({
|
||
style,
|
||
reveal: revealOptions(style).some((o) => o.value === reveal) ? reveal : revealOptions(style)[0].value,
|
||
});
|
||
const setReveal = (reveal: string) => updateBuilder({ reveal });
|
||
const setColor = (color: string) => updateBuilder({ color });
|
||
const [busy, setBusy] = useState(false),
|
||
[error, setError] = useState("");
|
||
async function build() {
|
||
await Promise.all([title.flush(), instructions.flush()]);
|
||
if (api.status !== "ready") return;
|
||
setBusy(true);
|
||
setError("");
|
||
try {
|
||
await accepted(
|
||
api.value.customize.call({
|
||
feature: null,
|
||
reader: { ...referenceOf(reader), expectation: { kind: "atom", id: "atom:reading:reader" } },
|
||
configuration: JSON.stringify({ name, style, reveal, color, ...options, instructions: text }),
|
||
text: text.trim(),
|
||
createdAt: new Date().toISOString(),
|
||
}),
|
||
);
|
||
created();
|
||
} catch (e) {
|
||
setError(errorMessage(e));
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}
|
||
return (
|
||
<section className="lr-new-annotator">
|
||
<AnnotatorLibrary
|
||
library={library}
|
||
reader={reader}
|
||
catalog={catalog}
|
||
archivedTypes={archivedTypes}
|
||
added={added}
|
||
initiallyOpen={libraryOpen}
|
||
/>
|
||
<div className="lr-create-divider">
|
||
<span>Create a new type</span>
|
||
</div>
|
||
<label className="lr-field lr-new-title">
|
||
Title
|
||
<TextInput aria-label="Annotator title" binding={title} placeholder="New Annotator" maxLength={100} />
|
||
</label>
|
||
<h3 className="lr-create-heading">How should it appear?</h3>
|
||
<div className="lr-appearance-grid">
|
||
{appearances
|
||
.filter((a) => !["underline", "color", "bold", "italic"].includes(a.key))
|
||
.map((a) => (
|
||
<button
|
||
key={a.key}
|
||
className="lr-appearance"
|
||
aria-pressed={
|
||
a.key === "highlight"
|
||
? ["highlight", "underline", "color", "bold", "italic"].includes(style)
|
||
: style === a.key
|
||
}
|
||
onClick={() => setStyle(a.key)}
|
||
>
|
||
<Preview style={a.key} color={color} placement={String(options.placement ?? "above")} />
|
||
<strong>{a.key === "highlight" ? "Formatting" : a.title}</strong>
|
||
<small>{a.key === "highlight" ? "Highlight, underline, color, bold, or italic." : a.description}</small>
|
||
</button>
|
||
))}
|
||
</div>
|
||
{["highlight", "underline", "color", "bold", "italic"].includes(style) && (
|
||
<div className="lr-field lr-format-picker">
|
||
Format
|
||
<Options
|
||
label="Formatting style"
|
||
value={style}
|
||
options={appearances
|
||
.filter((a) => ["highlight", "underline", "color", "bold", "italic"].includes(a.key))
|
||
.map((a) => ({
|
||
value: a.key,
|
||
label: a.title,
|
||
preview: (
|
||
<span
|
||
className={"lr-format-sample lr-format-sample-" + a.key}
|
||
style={{ "--annotation": color } as React.CSSProperties}
|
||
>
|
||
mot
|
||
</span>
|
||
),
|
||
}))}
|
||
change={setStyle}
|
||
/>
|
||
</div>
|
||
)}
|
||
<div className="lr-creation-options">
|
||
<label className="lr-field">
|
||
Show it
|
||
<Options
|
||
label="When to show annotations"
|
||
value={reveal}
|
||
options={revealOptions(style).map((o) => ({
|
||
...o,
|
||
label: o.value === "always" ? "Always" : o.value === "hover" ? "When hovering" : "When clicked",
|
||
}))}
|
||
change={setReveal}
|
||
/>
|
||
</label>
|
||
{["overhead", "highlight", "underline", "color"].includes(style) && (
|
||
<label className="lr-field">
|
||
Suggested color
|
||
<ColorPicker label="Suggested annotation color" value={color} change={setColor} />
|
||
</label>
|
||
)}
|
||
</div>
|
||
{style === "underline" && (
|
||
<CustomConfig
|
||
processor="underline-pattern"
|
||
fields={underlineFields}
|
||
values={options}
|
||
disabled={busy}
|
||
change={(key, value) => updateBuilder({ options: JSON.stringify({ ...options, [key]: value }) })}
|
||
/>
|
||
)}
|
||
{style === "overhead" && (
|
||
<div className="lr-label-options">
|
||
<LabelPosition
|
||
value={String(options.placement ?? "above")}
|
||
disabled={busy}
|
||
change={(placement) => updateBuilder({ options: JSON.stringify({ ...options, placement }) })}
|
||
/>
|
||
<details className="lr-label-font-options">
|
||
<summary>Label font and size</summary>
|
||
<CustomConfig
|
||
processor="overhead-font"
|
||
fields={fontFields}
|
||
values={options}
|
||
disabled={busy}
|
||
change={(key, value) => updateBuilder({ options: JSON.stringify({ ...options, [key]: value }) })}
|
||
/>
|
||
</details>
|
||
</div>
|
||
)}
|
||
<label className="lr-field lr-build-instructions">
|
||
What should it do?
|
||
<TextArea
|
||
binding={instructions}
|
||
aria-label="Annotator instructions"
|
||
rows={3}
|
||
placeholder="Describe the words to annotate and the information to show."
|
||
maxLength={12000}
|
||
/>
|
||
</label>
|
||
<div className="lr-intents">
|
||
{["Translate to English", "Define unfamiliar words", "Transliterate"].map((intent) => (
|
||
<button key={intent} onClick={() => instructions.appendText((instructions.text ? "\n" : "") + intent)}>
|
||
{intent}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<footer className="lr-create-footer">
|
||
<small>Built and checked by the agent. A title is generated if left empty.</small>
|
||
<button
|
||
className="lr-primary"
|
||
disabled={busy || api.status !== "ready" || !text.trim()}
|
||
onClick={() => void build()}
|
||
>
|
||
{busy ? "Starting…" : "Create annotator"}
|
||
</button>
|
||
</footer>
|
||
{error && <p role="alert">{error}</p>}
|
||
</section>
|
||
);
|
||
}
|
||
export function ExistingFeature({
|
||
feature,
|
||
catalog,
|
||
onPreviewChange,
|
||
}: {
|
||
feature: FeatureNode;
|
||
catalog: Catalog;
|
||
onPreviewChange?: (feature: FeatureNode | null) => void;
|
||
}) {
|
||
const ops = useInterface(interfaces.ReadingFeature, referenceOf(feature)),
|
||
feedback = useMutationFeedback();
|
||
const d = feature.data;
|
||
const [title, setTitle] = useState(d.name),
|
||
[enabledIntent, setEnabledIntent] = useState<boolean | null>(null),
|
||
[appearanceIntent, setAppearanceIntent] = useState<Partial<FeatureNode["data"]> | null>(null),
|
||
[draft, setDraft] = useState<{ values: ConfigValues; revision: number } | null>(null),
|
||
[saving, setSaving] = useState(false),
|
||
[error, setError] = useState("");
|
||
useEffect(() => setTitle(d.name), [d.name]);
|
||
function update(changes: Partial<typeof d>) {
|
||
if (ops.status !== "ready") return;
|
||
const { processor: _, configRevision, ...settings } = d;
|
||
setAppearanceIntent((previous) => ({ ...previous, ...changes }));
|
||
feedback.track(ops.value.configure.call({ ...settings, ...changes, expectedRevision: configRevision }));
|
||
}
|
||
const definition = configDefinition(catalog.find((item) => item.key === d.processor)?.config ?? "{}"),
|
||
persisted = configValues(feature.options),
|
||
values = draft?.values ?? persisted;
|
||
useEffect(() => {
|
||
onPreviewChange?.({
|
||
...feature,
|
||
data: { ...d, ...appearanceIntent, ...(enabledIntent === null ? {} : { enabled: enabledIntent }) },
|
||
options: JSON.stringify(values),
|
||
});
|
||
}, [feature, appearanceIntent, enabledIntent, draft, onPreviewChange]);
|
||
useEffect(() => () => onPreviewChange?.(null), [onPreviewChange]);
|
||
useEffect(() => {
|
||
if (
|
||
appearanceIntent &&
|
||
Object.entries(appearanceIntent).every(([key, value]) => d[key as keyof typeof d] === value)
|
||
)
|
||
setAppearanceIntent(null);
|
||
}, [d, appearanceIntent]);
|
||
const change = (key: string, value: ConfigValue) =>
|
||
setDraft((previous) => ({
|
||
revision: previous?.revision ?? d.configRevision,
|
||
values: { ...persisted, ...previous?.values, [key]: value },
|
||
}));
|
||
async function save() {
|
||
if (ops.status !== "ready" || !draft) return;
|
||
setSaving(true);
|
||
setError("");
|
||
try {
|
||
await accepted(
|
||
ops.value.configureOptions.call({ expectedRevision: draft.revision, options: JSON.stringify(draft.values) }),
|
||
);
|
||
setDraft(null);
|
||
} catch (e) {
|
||
setError(errorMessage(e));
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
}
|
||
return (
|
||
<section className="lr-existing-row lr-settings-section">
|
||
<header className="lr-annotator-head">
|
||
<div>
|
||
<h3>{d.name}</h3>
|
||
<p className="lr-muted">{definition.description}</p>
|
||
</div>
|
||
<FeatureToggle feature={feature} onIntent={setEnabledIntent} />
|
||
</header>
|
||
<label className="lr-field lr-name-field">
|
||
Title
|
||
<LocalInput
|
||
aria-label="Annotator title"
|
||
value={title}
|
||
maxLength={100}
|
||
onChange={(e) => setTitle(e.target.value)}
|
||
onBlur={() => title !== d.name && update({ name: title })}
|
||
/>
|
||
</label>
|
||
<p className="lr-output-summary">
|
||
{resolveRenders(definition.renders, values)
|
||
.map(
|
||
(render) =>
|
||
`${appearances.find((a) => a.key === render.style)?.title ?? render.style} · ${render.reveal === "always" ? "Always" : render.reveal === "hover" ? "On hover" : "On click"}`,
|
||
)
|
||
.join("; ")}
|
||
</p>
|
||
<CustomConfig
|
||
processor={d.processor}
|
||
fields={definition.fields}
|
||
values={values}
|
||
disabled={saving}
|
||
change={change}
|
||
/>
|
||
{draft && (
|
||
<div className="lr-config-save">
|
||
<button className="lr-primary" disabled={saving} onClick={() => void save()}>
|
||
{saving ? "Saving…" : "Save annotation options"}
|
||
</button>
|
||
<button disabled={saving} onClick={() => setDraft(null)}>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
)}
|
||
{(error || feedback.message) && <p role="alert">{error || feedback.message}</p>}
|
||
<div className="lr-annotator-footer">
|
||
<small>To change what this annotator does, ask its authoring agent.</small>
|
||
<button
|
||
className="lr-danger"
|
||
disabled={feedback.pending > 0}
|
||
onClick={() => ops.status === "ready" && feedback.track(ops.value.remove.call(null))}
|
||
>
|
||
Remove annotator
|
||
</button>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
function AskForChange({
|
||
library,
|
||
reader,
|
||
feature,
|
||
navigation,
|
||
}: {
|
||
library: ExactReference;
|
||
reader: ReaderNode;
|
||
feature: FeatureNode;
|
||
navigation: ExactReference;
|
||
}) {
|
||
const prompt = usePrompt(navigation, "change");
|
||
const text = prompt.text;
|
||
const api = useInterface(interfaces.LanguageReader, library),
|
||
[busy, setBusy] = useState(false),
|
||
[error, setError] = useState("");
|
||
return (
|
||
<details className="lr-ask-change">
|
||
<summary>
|
||
<span>Change this annotator</span>
|
||
<small>Describe a change for its agent to build</small>
|
||
</summary>
|
||
<form
|
||
onSubmit={(event) => {
|
||
event.preventDefault();
|
||
if (api.status !== "ready") return;
|
||
setBusy(true);
|
||
setError("");
|
||
void accepted(
|
||
api.value.customize.call({
|
||
feature: { ...referenceOf(feature), expectation: { kind: "atom", id: "atom:reading:feature" } },
|
||
reader: { ...referenceOf(reader), expectation: { kind: "atom", id: "atom:reading:reader" } },
|
||
configuration: JSON.stringify({
|
||
name: feature.data.name,
|
||
instructions: text,
|
||
feature: referenceOf(feature),
|
||
}),
|
||
text: `Modify the existing annotator ${feature.data.name} (${referenceOf(feature).object}), preserving its other settings. ${text}`,
|
||
createdAt: new Date().toISOString(),
|
||
}),
|
||
).then(
|
||
() => {
|
||
prompt.clearSubmitted(text);
|
||
setBusy(false);
|
||
},
|
||
(e) => {
|
||
setError(errorMessage(e));
|
||
setBusy(false);
|
||
},
|
||
);
|
||
}}
|
||
>
|
||
<TextArea
|
||
binding={prompt}
|
||
aria-label="Change this annotator"
|
||
rows={3}
|
||
placeholder="Describe what you want to change"
|
||
/>
|
||
<button disabled={busy || !text.trim()} className="lr-primary">
|
||
{busy ? "Starting…" : "Send change"}
|
||
</button>
|
||
{error && <p role="alert">{error}</p>}
|
||
</form>
|
||
</details>
|
||
);
|
||
}
|