@theoremjs/react 0.3.0 → 0.3.1

package/ui/DecisionAnswers.d.ts

@@ -1,4 +1,6 @@
-import type { DecisionResult } from '@theoremjs/agents';
+import type { DecisionJson, DecisionResult } from '@theoremjs/agents';
+import { type ReactNode } from 'react';
+import { type DecisionImages } from '../client/decision-images.ts';
 import type { DecisionInterface } from '../client/decision-transport.ts';
 export type TheoremDecisionAnswersProps = {
     iface: DecisionInterface;
@@ -7,9 +9,45 @@ export type TheoremDecisionAnswersProps = {
     elapsedMs?: number | null;
     /** A newer decision is running: the answers dim until it lands. */
     isStale?: boolean;
+    /** The images and state the answers were asked about, which box answers are cut from. Without an image, a box is drawn in a plain frame. */
+    asked?: {
+        images: DecisionImages;
+        state: DecisionJson;
+    };
+    /** Opens a question where it is set up. Each answer then has a button that calls it with the question's id. */
+    onQuestion?: (id: string) => void;
+    /** Each question's text by its id, shown under its answer's title. The page is never sent a question's instructions, so it shows only what it is given here. */
+    questionText?: Readonly<Record<string, string>>;
 };
+/** The reader's locale's percent, decimal and dollar formats. */
+export declare function useNumbers(): {
+    percent: Intl.NumberFormat;
+    decimal: Intl.NumberFormat;
+    usd: Intl.NumberFormat;
+};
+/** The option's share as a bar, drawn like the trace's. */
+export declare function Share({ value, isLead }: {
+    value: number;
+    isLead: boolean;
+}): import("react").JSX.Element;
+/**
+ * A console's result as it streams in: dimmed while the next one runs, then
+ * one quiet line for the model, time, tokens, and cost.
+ */
+export declare function ResultStack({ model, usage, elapsedMs, isStale, tokens, children, }: {
+    model: string;
+    usage?: {
+        inputTokens?: number;
+        costUsd?: number;
+    };
+    elapsedMs?: number | null;
+    isStale?: boolean;
+    /** The tokens read, as the console words them. */
+    tokens: (count: number) => string;
+    children: ReactNode;
+}): import("react").JSX.Element;
 /**
  * A decision's answers, one card per question in the order the profile asks
  * them, and one quiet line for the model, time, tokens, and cost.
  */
-export declare function TheoremDecisionAnswers({ iface, result, elapsedMs, isStale }: TheoremDecisionAnswersProps): import("react").JSX.Element;
+export declare function TheoremDecisionAnswers({ iface, result, elapsedMs, isStale, asked, onQuestion, questionText, }: TheoremDecisionAnswersProps): import("react").JSX.Element;

package/ui/DecisionAnswers.js

@@ -1,22 +1,35 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Grid } from '@astryxdesign/core/Grid';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ClickableCard } from '@astryxdesign/core/ClickableCard';
 import { HStack } from '@astryxdesign/core/HStack';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { useLocale } from '@astryxdesign/core/i18n';
+import { Lightbox } from '@astryxdesign/core/Lightbox';
 import { Text } from '@astryxdesign/core/Text';
+import { Tooltip } from '@astryxdesign/core/Tooltip';
 import { VStack } from '@astryxdesign/core/VStack';
-import { useLocale } from '@astryxdesign/core/i18n';
-import { useMemo } from 'react';
-import { workDuration } from "./labels.js";
-import { ChartCard, TRACE_RADIUS, traceFill } from "./trace-patterns.js";
+import { IconPencil } from '@tabler/icons-react';
+import { useEffect, useMemo, useState } from 'react';
+import { boxSource, cropOf, imageSrc, markedBox, } from "../client/decision-images.js";
+import { Arrive, Stream } from "./arrive.js";
+import { CardWall } from "./CardWall.js";
+import { resultMeta } from "./labels.js";
 import { useLabels } from "./labels-provider.js";
+import { ChartCard, TRACE_RADIUS, traceFill } from "./trace-patterns.js";
 const EASE = 'var(--duration-medium) var(--ease-standard)';
 /** Height of a share bar, as the trace draws one. */
 const SHARE_PX = 12;
-function useNumbers() {
+/** The reader's locale's percent, decimal and dollar formats. */
+export function useNumbers() {
     const locale = useLocale();
     return useMemo(() => ({
         percent: new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 0 }),
         decimal: new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }),
-        usd: new Intl.NumberFormat(locale, { style: 'currency', currency: 'USD', maximumSignificantDigits: 2 }),
+        usd: new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency: 'USD',
+            maximumSignificantDigits: 2,
+        }),
     }), [locale]);
 }
 /** The pick in the trace's clear series, the rest in its shade. */
@@ -24,7 +37,7 @@ function answerFill(isLead) {
     return traceFill(isLead ? 'clear' : 'shade2');
 }
 /** The option's share as a bar, drawn like the trace's. */
-function Share({ value, isLead }) {
+export function Share({ value, isLead }) {
     return (_jsx("div", { style: {
             height: SHARE_PX,
             width: `${String(Math.max(value, 0.01) * 100)}%`,
@@ -33,11 +46,11 @@ function Share({ value, isLead }) {
             transition: `width ${EASE}`,
         } }));
 }
-function ChoiceAnswer({ title, answer }) {
+function ChoiceAnswer({ title, aside, detail, answer, }) {
     const t = useLabels();
     const n = useNumbers();
     const options = Object.entries(answer.probabilities).sort(([, a], [, b]) => b - a);
-    return (_jsx(ChartCard, { title: title, value: answer.choice, note: t('@theorem.decision.confidence', { percent: n.percent.format(answer.confidence) }), children: _jsx(VStack, { gap: 2, role: "list", children: options.map(([label, p]) => (_jsxs(VStack, { gap: 1, role: "listitem", "aria-label": t('@theorem.decision.option', { label, percent: n.percent.format(p) }), children: [_jsxs(HStack, { gap: 2, hAlign: "between", "aria-hidden": true, children: [_jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: label }), _jsx(Text, { type: "supporting", hasTabularNumbers: true, children: n.percent.format(p) })] }), _jsx(Share, { value: p, isLead: label === answer.choice })] }, label))) }) }));
+    return (_jsx(ChartCard, { title: title, aside: aside, detail: detail, value: answer.choice, note: t('@theorem.decision.confidence', { percent: n.percent.format(answer.confidence) }), children: _jsx(VStack, { gap: 2, role: "list", children: options.map(([label, p]) => (_jsxs(VStack, { gap: 1, role: "listitem", "aria-label": t('@theorem.decision.option', { label, percent: n.percent.format(p) }), children: [_jsxs(HStack, { gap: 2, hAlign: "between", "aria-hidden": true, children: [_jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: label }), _jsx(Text, { type: "supporting", hasTabularNumbers: true, children: n.percent.format(p) })] }), _jsx(Share, { value: p, isLead: label === answer.choice })] }, label))) }) }));
 }
 const SCALE_HEIGHT = 56;
 /** A level's short name: the words before its colon or dash ("Low: reversible…" → "Low"), when there are few. */
@@ -46,15 +59,24 @@ function levelName(label) {
     return head && head.length <= 32 && head !== label ? head : label;
 }
 /** Each level's probability as a column, with a mark where the score falls between them. */
-function ScoreAnswer({ title, answer, labels }) {
+function ScoreAnswer({ title, aside, detail, answer, labels, }) {
     const t = useLabels();
     const n = useNumbers();
     const levels = labels.length;
     const nearest = Math.min(levels - 1, Math.max(0, Math.round(answer.score)));
-    return (_jsx(ChartCard, { title: title, value: labels[nearest] === undefined ? n.decimal.format(answer.score) : levelName(labels[nearest]), note: [
-            t('@theorem.decision.score_of', { score: n.decimal.format(answer.score), max: n.decimal.format(levels - 1) }),
+    return (_jsx(ChartCard, { title: title, aside: aside, detail: detail, value: labels[nearest] === undefined ? n.decimal.format(answer.score) : levelName(labels[nearest]), note: [
+            t('@theorem.decision.score_of', {
+                score: n.decimal.format(answer.score),
+                max: n.decimal.format(levels - 1),
+            }),
             t('@theorem.decision.confidence', { percent: n.percent.format(answer.confidence) }),
-        ].join(' · '), children: _jsxs(VStack, { gap: 1, children: [_jsxs("div", { "aria-hidden": true, style: { position: 'relative', display: 'flex', alignItems: 'flex-end', gap: 4, height: SCALE_HEIGHT }, children: [labels.map((label, level) => (_jsx("div", { style: {
+        ].join(' · '), children: _jsxs(VStack, { gap: 1, children: [_jsxs("div", { "aria-hidden": true, style: {
+                        position: 'relative',
+                        display: 'flex',
+                        alignItems: 'flex-end',
+                        gap: 4,
+                        height: SCALE_HEIGHT,
+                    }, children: [labels.map((label, level) => (_jsx("div", { style: {
                                 flex: 1,
                                 height: `${String(Math.max(0.04, answer.probabilities[String(level)] ?? 0) * 100)}%`,
                                 borderRadius: TRACE_RADIUS,
@@ -67,36 +89,145 @@ function ScoreAnswer({ title, answer, labels }) {
                                 width: 0,
                                 borderInlineStart: '1.5px dashed var(--color-text-secondary)',
                                 transition: `left ${EASE}`,
-                            } })] }), _jsx("div", { style: { display: 'flex', gap: 4 }, children: labels.map((label, level) => (_jsx("div", { style: { flex: 1, minWidth: 0 }, title: label, children: _jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: levelName(label) }) }, `${String(level)}:${label}`))) }), _jsx("span", { style: { position: 'absolute', width: 1, height: 1, overflow: 'hidden', clipPath: 'inset(50%)' }, children: labels.map((label, level) => t('@theorem.decision.option', { label, percent: n.percent.format(answer.probabilities[String(level)] ?? 0) })).join('; ') })] }) }));
+                            } })] }), _jsx("div", { style: { display: 'flex', gap: 4 }, children: labels.map((label, level) => (_jsx("div", { style: { flex: 1, minWidth: 0 }, title: label, children: _jsx(Text, { type: "supporting", color: "secondary", maxLines: 1, children: levelName(label) }) }, `${String(level)}:${label}`))) }), _jsx("span", { style: {
+                        position: 'absolute',
+                        width: 1,
+                        height: 1,
+                        overflow: 'hidden',
+                        clipPath: 'inset(50%)',
+                    }, children: labels
+                        .map((label, level) => t('@theorem.decision.option', {
+                        label,
+                        percent: n.percent.format(answer.probabilities[String(level)] ?? 0),
+                    }))
+                        .join('; ') })] }) }));
+}
+function NumberAnswer({ title, aside, detail, answer, }) {
+    const n = useNumbers();
+    return (_jsx(ChartCard, { title: title, aside: aside, detail: detail, value: n.decimal.format(answer.noul) }));
+}
+const BOX_FRAME_HEIGHT = 72;
+const CROP_HEIGHT = 168;
+/** An image's natural size, once the page has loaded it. */
+function useImageSize(src) {
+    const [size, setSize] = useState(null);
+    useEffect(() => {
+        const image = new Image();
+        image.onload = () => {
+            setSize({ width: image.naturalWidth, height: image.naturalHeight });
+        };
+        image.src = src;
+    }, [src]);
+    return size;
+}
+/** A theme colour as the page draws it, for a canvas that cannot read the theme's tokens. */
+function themeColor(element, token) {
+    const shown = element.style.color;
+    element.style.color = `var(${token})`;
+    const color = getComputedStyle(element).color;
+    element.style.color = shown;
+    return color;
+}
+/** The part of the image the box covers, cut out at its own proportions. It opens the whole image with the box outlined. */
+function BoxCrop({ source, box, caption, }) {
+    const t = useLabels();
+    const src = imageSrc(source);
+    const size = useImageSize(src);
+    const [marked, setMarked] = useState(null);
+    if (!size)
+        return null;
+    const crop = cropOf(box);
+    const ratio = (size.width * (box.right - box.left)) / (size.height * (box.bottom - box.top));
+    const open = t('@theorem.decision.open_box');
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { content: open, children: _jsx(ClickableCard, { label: open, padding: 0, onClick: (event) => {
+                        const marks = {
+                            outline: themeColor(event.currentTarget, '--color-accent'),
+                            shade: themeColor(event.currentTarget, '--color-overlay'),
+                        };
+                        void markedBox(src, box, marks).then(setMarked);
+                    }, children: _jsx("div", { role: "img", "aria-label": t('@theorem.decision.box_in'), style: {
+                            position: 'relative',
+                            overflow: 'hidden',
+                            aspectRatio: String(ratio),
+                            height: CROP_HEIGHT,
+                            maxWidth: '100%',
+                            borderRadius: TRACE_RADIUS,
+                        }, children: _jsx("img", { src: src, alt: "", style: {
+                                position: 'absolute',
+                                width: `${String(crop.width)}%`,
+                                height: `${String(crop.height)}%`,
+                                left: `${String(crop.left)}%`,
+                                top: `${String(crop.top)}%`,
+                                maxWidth: 'none',
+                            } }) }) }) }), _jsx(Lightbox, { isOpen: marked !== null, onOpenChange: (isOpen) => {
+                    if (!isOpen)
+                        setMarked(null);
+                }, media: { src: marked ?? src, alt: t('@theorem.decision.box_marked'), caption }, hasZoom: true })] }));
 }
-function NumberAnswer({ title, answer }) {
+/** The box cut from the image its question names, or drawn in a frame that stands for the whole image. */
+function BoxAnswer({ title, aside, detail, answer, field, asked, }) {
+    const t = useLabels();
+    const source = asked && boxSource(asked.images, asked.state, field);
     const n = useNumbers();
-    return _jsx(ChartCard, { title: title, value: n.decimal.format(answer.noul) });
+    const { top, bottom, left, right } = answer.box;
+    const edges = t('@theorem.decision.box_edges', {
+        left: n.percent.format(left),
+        top: n.percent.format(top),
+        right: n.percent.format(right),
+        bottom: n.percent.format(bottom),
+    });
+    return (_jsx(ChartCard, { title: title, aside: aside, detail: detail, value: edges, note: t('@theorem.decision.confidence', { percent: n.percent.format(answer.confidence) }), children: source ? (_jsx(BoxCrop, { source: source, box: answer.box, caption: `${title}: ${edges}` })) : (_jsx("div", { "aria-hidden": true, style: {
+                position: 'relative',
+                height: BOX_FRAME_HEIGHT,
+                borderRadius: TRACE_RADIUS,
+                border: '1px solid var(--color-border)',
+            }, children: _jsx("div", { style: {
+                    position: 'absolute',
+                    insetInlineStart: `${String(left * 100)}%`,
+                    insetBlockStart: `${String(top * 100)}%`,
+                    width: `${String((right - left) * 100)}%`,
+                    height: `${String((bottom - top) * 100)}%`,
+                    borderRadius: 2,
+                    background: answerFill(true),
+                    transition: `all ${EASE}`,
+                } }) })) }));
 }
 /** One question's answer in the trace's chart card, titled by the question and its kind. */
-function AnswerCard({ question, answer }) {
+function AnswerCard({ question, answer, asked, onQuestion, detail, }) {
     const t = useLabels();
     const title = `${question.id} · ${t(`@theorem.decision.type.${question.type}`)}`;
-    if (answer?.type === 'choice')
-        return _jsx(ChoiceAnswer, { title: title, answer: answer });
-    if (answer?.type === 'score')
-        return _jsx(ScoreAnswer, { title: title, answer: answer, labels: question.labels });
-    if (answer?.type === 'noul')
-        return _jsx(NumberAnswer, { title: title, answer: answer });
-    return null;
+    if (!answer)
+        return null;
+    const edit = t('@theorem.decision.edit_question', { question: question.id });
+    const head = {
+        title,
+        detail,
+        aside: onQuestion ? (_jsx(IconButton, { label: edit, tooltip: edit, size: "sm", variant: "ghost", icon: _jsx(Icon, { icon: IconPencil, size: "xsm", color: "secondary" }), onClick: () => {
+                onQuestion(question.id);
+            } })) : undefined,
+    };
+    if (answer.type === 'choice')
+        return _jsx(ChoiceAnswer, { ...head, answer: answer });
+    if (answer.type === 'score')
+        return _jsx(ScoreAnswer, { ...head, answer: answer, labels: question.labels });
+    if (answer.type === 'noul')
+        return _jsx(NumberAnswer, { ...head, answer: answer });
+    return _jsx(BoxAnswer, { ...head, answer: answer, field: question.field, asked: asked });
+}
+/**
+ * A console's result as it streams in: dimmed while the next one runs, then
+ * one quiet line for the model, time, tokens, and cost.
+ */
+export function ResultStack({ model, usage, elapsedMs, isStale, tokens, children, }) {
+    const t = useLabels();
+    const n = useNumbers();
+    return (_jsx(Stream, { children: _jsxs(VStack, { gap: 3, style: { opacity: isStale ? 0.5 : 1, transition: `opacity ${EASE}` }, "aria-busy": isStale, children: [children, _jsx(Arrive, { children: _jsx(Text, { type: "supporting", color: "secondary", hasTabularNumbers: true, children: resultMeta(t, n.usd, { model, usage, elapsedMs, tokens }) }) })] }, elapsedMs ?? 0) }));
 }
 /**
  * A decision's answers, one card per question in the order the profile asks
  * them, and one quiet line for the model, time, tokens, and cost.
  */
-export function TheoremDecisionAnswers({ iface, result, elapsedMs, isStale }) {
+export function TheoremDecisionAnswers({ iface, result, elapsedMs, isStale, asked, onQuestion, questionText, }) {
     const t = useLabels();
-    const n = useNumbers();
-    const meta = [
-        result.model,
-        elapsedMs == null ? null : workDuration(t, elapsedMs),
-        result.usage ? t('@theorem.decision.tokens', { count: result.usage.inputTokens }) : null,
-        result.usage?.costUsd === undefined ? null : n.usd.format(result.usage.costUsd),
-    ].filter(Boolean);
-    return (_jsxs(VStack, { gap: 3, style: { opacity: isStale ? 0.5 : 1, transition: `opacity ${EASE}` }, "aria-busy": isStale, children: [_jsx(Grid, { columns: { minWidth: 260, repeat: 'fill' }, gap: 3, children: iface.questions.map((question) => (_jsx(AnswerCard, { question: question, answer: result.answers[question.id] }, question.id))) }), _jsx(Text, { type: "supporting", color: "secondary", hasTabularNumbers: true, children: meta.join(' · ') })] }));
+    return (_jsx(ResultStack, { model: result.model, usage: result.usage, elapsedMs: elapsedMs, isStale: isStale, tokens: (count) => t('@theorem.decision.tokens', { count }), children: _jsx(CardWall, { minWidth: 260, children: iface.questions.map((question) => (_jsx(Arrive, { children: _jsx(AnswerCard, { question: question, answer: result.answers[question.id], asked: asked, onQuestion: onQuestion, detail: questionText?.[question.id] }) }, question.id))) }) }));
 }

package/ui/DecisionImages.d.ts

@@ -0,0 +1,16 @@
+import { type DecisionImages } from '../client/decision-images.ts';
+/**
+ * Reads each file as an image and hands over the ones that are, with the name of the first that
+ * is not as the refusal to show.
+ */
+export declare function useImageReader(): {
+    read: (files: File | File[] | null) => Promise<[File, import("../../../mod.ts").DecisionAsset][]>;
+    status: {
+        type: "error";
+        message: string;
+    } | undefined;
+};
+/** A drop area under the state: each PNG or JPEG dropped or chosen becomes a field that holds it. */
+export declare function ImageDrop({ onImages, }: {
+    onImages: (files: [File, DecisionImages[string]][]) => void;
+}): import("react").JSX.Element;

package/ui/DecisionImages.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FileInput } from '@astryxdesign/core/FileInput';
+import { useState } from 'react';
+import { IMAGE_ACCEPT, readImage } from "../client/decision-images.js";
+import { useLabels } from "./labels-provider.js";
+/** The files a file input reports, as a list. */
+function asList(files) {
+    if (files === null)
+        return [];
+    return Array.isArray(files) ? files : [files];
+}
+/**
+ * Reads each file as an image and hands over the ones that are, with the name of the first that
+ * is not as the refusal to show.
+ */
+export function useImageReader() {
+    const t = useLabels();
+    const [refused, setRefused] = useState(null);
+    const read = async (files) => {
+        setRefused(null);
+        const held = [];
+        for (const file of asList(files)) {
+            const image = await readImage(file);
+            if (image)
+                held.push([file, image]);
+            else
+                setRefused(file.name);
+        }
+        return held;
+    };
+    const status = refused === null
+        ? undefined
+        : { type: 'error', message: t('@theorem.decision.image_bad', { file: refused }) };
+    return { read, status };
+}
+/** A drop area under the state: each PNG or JPEG dropped or chosen becomes a field that holds it. */
+export function ImageDrop({ onImages, }) {
+    const t = useLabels();
+    const { read, status } = useImageReader();
+    return (_jsx(FileInput, { label: t('@theorem.decision.add_image'), isLabelHidden: true, mode: "dropzone", isMultiple: true, accept: IMAGE_ACCEPT, value: null, placeholder: t('@theorem.decision.add_image_hint'), status: status, statusVariant: "detached", onChange: (files) => {
+            void read(files).then((images) => {
+                if (images.length > 0)
+                    onImages(images);
+            });
+        } }));
+}

package/ui/EmbeddingDocuments.d.ts

@@ -0,0 +1,78 @@
+import { type EmbeddingInput } from '@theoremjs/agents';
+import { type ReactNode } from 'react';
+import { type EmbeddingInputCheck, type EmbeddingMediaPart } from '../client/embedding-input.ts';
+import type { EmbeddingInterface } from '../client/embedding-transport.ts';
+import { type ConsoleView } from './ConsoleFrame.tsx';
+import type { LabelText } from './labels.ts';
+/** The profile's `inputs`, which every request is held to. */
+export type Rules = EmbeddingInterface['inputs'];
+/** A document as the list shows it: what it sends, and the file it came from. */
+export type EmbeddingDocument = {
+    input: EmbeddingInput;
+    from?: string;
+};
+type SplitChoice = 'whole' | 'lines' | 'paragraphs' | 'commas' | 'custom';
+/** What the check says is wrong, about the input it names. */
+export declare function inputIssue(t: LabelText, check: EmbeddingInputCheck, name: string): string | null;
+/**
+ * The documents: pasted text split as chosen, then files and JSON, in that
+ * order. Text files are split as the text is; any other file is one document.
+ */
+export declare function useEmbeddingDocuments(defaultText: string, rules: Rules, defaultDocuments?: readonly EmbeddingDocument[]): {
+    text: string;
+    setText: import("react").Dispatch<import("react").SetStateAction<string>>;
+    choice: SplitChoice;
+    setChoice: import("react").Dispatch<import("react").SetStateAction<SplitChoice>>;
+    separator: string;
+    setSeparator: import("react").Dispatch<import("react").SetStateAction<string>>;
+    documents: EmbeddingDocument[];
+    inputs: EmbeddingInput[];
+    issue: string | null;
+    requests: number;
+    view: ConsoleView;
+    setView: (next: ConsoleView) => void;
+    json: string;
+    jsonInvalid: boolean;
+    setJson: (next: string) => void;
+    addFiles: (files: readonly File[]) => Promise<void>;
+    remove: (at: readonly number[]) => void;
+    /** Where the pasted text's documents end and the removable ones begin. */
+    fromText: number;
+};
+export type EmbeddingDocumentsForm = ReturnType<typeof useEmbeddingDocuments>;
+/** What a document reads as in a list: its text, or its file's name, type, and size. */
+export declare function documentLabel(t: LabelText, bytes: (count: number) => string, document: EmbeddingDocument, number: number): {
+    label: string;
+    detail: string | null;
+};
+/** Where the text is cut, and the separator when it is one of the user's own. */
+/** A file field that reads what is dropped or chosen, and says which files it could not read. */
+export declare function EmbeddingFileDrop({ label, placeholder, accept, isMultiple, onFiles, }: {
+    label: string;
+    placeholder: string;
+    accept: readonly string[];
+    isMultiple?: boolean;
+    onFiles: (files: File[]) => Promise<void>;
+}): import("react").JSX.Element;
+/** One file: its picture above its type, with its name and size on hover and Remove. */
+export declare function FileTile({ part, name, label, onRemove, }: {
+    part: EmbeddingMediaPart;
+    /** The file's name; a query's file keeps none, so its type stands in. */
+    name?: string;
+    label: string;
+    onRemove: () => void;
+}): import("react").JSX.Element;
+/** Text with its file beside it at two thirds and one third, or whichever of them there is. */
+export declare function TextBesideFile({ text, file }: {
+    text: ReactNode;
+    file: ReactNode;
+}): import("react").JSX.Element;
+/** The documents card: text and files as fields, or the inputs as JSON, and Index. */
+export declare function EmbeddingDocuments({ form, rules, isRunning, onRun, onStop, }: {
+    form: EmbeddingDocumentsForm;
+    rules: Rules;
+    isRunning: boolean;
+    onRun: () => void;
+    onStop: () => void;
+}): import("react").JSX.Element;
+export {};