@rebasepro/plugin-ai 0.12.0 → 0.12.1-canary.g009ed95

package/src/api.ts

@@ -1,198 +1,262 @@
 import {
-    DataEnhancementRequest,
-    EnhancedDataResult,
-    InputEntity,
-    InputProperty,
+    AutofillRequest,
+    AutofillResult,
+    AiStatus,
     SamplePromptsResult
 } from "./types/data_enhancement_controller";
-import { EntityValues } from "@rebasepro/types";
-import { flatMapEntityValues } from "./utils/values";
-
-// const DEFAULT_SERVER = "http://localhost:5001/rebase-dev-2da42/europe-west3/api"; // Local
-
-const DEFAULT_SERVER = "https://api.rebase.pro";
-
-export async function enhanceDataAPIStream<M extends Record<string, unknown>>(props: {
-    apiKey: string,
-    entityId?: string | number,
-    entityName: string,
-    entityDescription?: string,
-    propertyKey?: string,
-    propertyInstructions?: string;
-    values: EntityValues<M>,
-    path: string,
-    properties: Record<string, InputProperty>,
-
-    instructions?: string,
-    firebaseToken: string,
-    onUpdate: (suggestions: Record<string, string | number>) => void;
-    onUpdateDelta: (propertyKey: string, partialValue: string) => void;
-    onError: (error: Error) => void;
-    onEnd: (result: EnhancedDataResult) => void;
-    host?: string;
-}) {
-
-    const flatValues = flatMapEntityValues(props.values);
-
-    const properties = props.properties;
-
-    const inputEntity: InputEntity = {
-        entityId: props.entityId,
-        values: flatValues
-    }
 
-    const request: DataEnhancementRequest = {
-        inputEntity,
-        properties,
-        entityName: props.entityName,
-        entityDescription: props.entityDescription,
-        propertyKey: props.propertyKey,
-        propertyInstructions: props.propertyInstructions,
-        instructions: props.instructions
-    };
+/**
+ * The hosted service Rebase runs for this plugin.
+ *
+ * The previous value here was `https://api.rebase.pro`, a FireCMS-era host that
+ * resolves but serves nothing — every path 404s — so Autofill had never worked
+ * in a Rebase install. This one is served by the control plane
+ * (`saas/backend/functions/ai.ts`). Point `endpoint` somewhere else to run your
+ * own; the wire format below is the whole contract.
+ */
+export const DEFAULT_AI_ENDPOINT = "https://app.rebase.pro/api/functions/ai";
+
+/**
+ * ## No credentials cross this boundary
+ *
+ * The old client sent the tenant's Rebase JWT as `Authorization: Basic <jwt>`
+ * plus a hardcoded `fcms-…` key compiled into the published package. Both were
+ * wrong in the same way: a self-hosted backend signs its tokens with its own
+ * secret, so no external service can verify one — sending it only handed a live
+ * credential to a third party that had no use for it.
+ *
+ * These requests are anonymous. The service bounds cost by rate limit and daily
+ * ceiling rather than by identity, and reports through {@link fetchAiStatus}
+ * when it can no longer serve — which is what keeps the UI from offering an
+ * action that is going to fail.
+ */
+function endpointOf(endpoint: string | undefined, path: string): string {
+    return (endpoint ?? DEFAULT_AI_ENDPOINT).replace(/\/+$/, "") + path;
+}
 
-    console.debug("enhanceDataAPIStream", request);
+/** One `event:`/`data:` pair off the wire. */
+type ServerSentEvent = { event: string; data: string };
 
-    return fetch((props.host ?? DEFAULT_SERVER) + "/data/enhance_stream/",
-        {
-            // mode: "no-cors",
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                Authorization: `Basic ${props.firebaseToken}`,
-                "x-de-api-key": `Basic ${props.apiKey}`
-                // "x-de-version": version
-            },
-            body: JSON.stringify(request)
-        })
-        .then(async (res) => {
-            if (!res.ok) {
-                console.error("enhanceDataAPIStream error", res)
-                throw await res.json();
-            }
-            const reader = res.body?.getReader();
-            if (!reader) {
-                throw new Error("No reader");
-            }
-
-            for await (const chunk of readChunks(reader)) {
-                const str = new TextDecoder().decode(chunk);
-                try {
-                    str.split("&$# ").forEach((s) => {
-                        if (s && s.length > 0) {
-                            const data = JSON.parse(s.trim());
-                            if (data.type === "suggestion_delta")
-                                props.onUpdateDelta(data.data.propertyKey, data.data.partialValue);
-                            else if (data.type === "suggestion")
-                                props.onUpdate(data.data);
-                            else if (data.type === "result")
-                                props.onEnd(data.data);
-                        }
-                    });
-                } catch (e: unknown) {
-                    console.error("str", str);
-                    console.error("Error parsing stream", e);
-                    props.onError(e instanceof Error ? e : new Error(String(e)));
-                }
-            }
+/** Not global: `exec` must not carry `lastIndex` between buffer reads. */
+const SSE_SEPARATOR = /\r?\n\r?\n/;
 
-        });
+/**
+ * Parse an SSE body incrementally.
+ *
+ * The framing this replaces split each chunk on the literal `"&$# "` and
+ * `JSON.parse`d the pieces, which corrupted itself the moment a delimiter
+ * straddled two reads — and network reads land wherever they land. Buffering
+ * until a blank line is the fix, and it is also just what SSE specifies.
+ */
+async function* readServerSentEvents(response: Response): AsyncGenerator<ServerSentEvent> {
+    const reader = response.body?.getReader();
+    if (!reader) throw new Error("The AI service returned no response body");
 
+    const decoder = new TextDecoder();
+    let buffer = "";
+
+    for (;;) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+
+        // A record ends at a blank line. `\r\n` is tolerated because proxies
+        // rewrite line endings. The separator is located with `exec` rather
+        // than `search` so its actual length is known — a `\r\n\r\n` boundary
+        // is four characters, not two, and slicing by the wrong count leaves a
+        // stray newline that swallows the next record's `event:` field.
+        let match = SSE_SEPARATOR.exec(buffer);
+        while (match) {
+            const raw = buffer.slice(0, match.index);
+            buffer = buffer.slice(match.index + match[0].length);
+            const parsed = parseEventBlock(raw);
+            if (parsed) yield parsed;
+            match = SSE_SEPARATOR.exec(buffer);
+        }
+    }
 }
 
-function readChunks(reader: ReadableStreamDefaultReader) {
+function parseEventBlock(block: string): ServerSentEvent | undefined {
+    let event = "message";
+    const dataLines: string[] = [];
+    for (const line of block.split(/\r?\n/)) {
+        if (line.startsWith(":")) continue; // comment / keep-alive
+        const separator = line.indexOf(":");
+        const field = separator === -1 ? line : line.slice(0, separator);
+        const rawValue = separator === -1 ? "" : line.slice(separator + 1);
+        const value = rawValue.startsWith(" ") ? rawValue.slice(1) : rawValue;
+        if (field === "event") event = value;
+        else if (field === "data") dataLines.push(value);
+    }
+    if (dataLines.length === 0) return undefined;
+    return { event,
+data: dataLines.join("\n") };
+}
+
+/** Pull a message out of the control plane's `{ error: { message } }` envelope. */
+async function errorFrom(response: Response, fallback: string): Promise<Error> {
+    try {
+        const body = await response.json();
+        const message = body?.error?.message;
+        if (typeof message === "string" && message) return new Error(message);
+    } catch {
+        /* not JSON — fall through */
+    }
+    return new Error(fallback);
+}
+
+/**
+ * Ask the service whether it can serve a request at all.
+ *
+ * The plugin gates every affordance on this. A missing provider key, an
+ * exhausted daily quota or an unreachable host all resolve to `available:
+ * false`, and the Autofill button is simply not rendered — rather than
+ * rendered, clicked, and failed.
+ */
+export async function fetchAiStatus(props: { endpoint?: string; signal?: AbortSignal }): Promise<AiStatus> {
+    const response = await fetch(endpointOf(props.endpoint, "/status"), {
+        method: "GET",
+        signal: props.signal
+    });
+    if (!response.ok) return { available: false };
+    const body = await response.json();
     return {
-        async *[Symbol.asyncIterator]() {
-            let readResult = await reader.read();
-            while (!readResult.done) {
-                yield readResult.value;
-                readResult = await reader.read();
-            }
-        }
+        available: Boolean(body?.available),
+        model: typeof body?.model === "string" ? body.model : undefined,
+        features: Array.isArray(body?.features) ? body.features : undefined
     };
 }
 
-export async function fetchEntityPromptSuggestion<M extends object>(props: {
-    input?: string,
-    entityName: string,
-    firebaseToken: string,
-    apiKey: string,
-    host?: string
-}): Promise<SamplePromptsResult> {
+/**
+ * Fill a record, streaming each field as the service writes it.
+ *
+ * `onDelta` fires with more text for a field still being written; `onValue`
+ * fires once a field is complete and carries its final, correctly typed value.
+ * A caller that implements only `onValue` still ends up with the right record —
+ * the deltas exist so a long text field fills in visibly instead of appearing
+ * all at once.
+ */
+export async function autofillStream(props: {
+    request: AutofillRequest;
+    endpoint?: string;
+    signal?: AbortSignal;
+    onDelta: (key: string, text: string) => void;
+    onValue: (key: string, value: unknown) => void;
+}): Promise<AutofillResult> {
+    const response = await fetch(endpointOf(props.endpoint, "/autofill"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(props.request),
+        signal: props.signal
+    });
 
-    return fetch((props.host ?? DEFAULT_SERVER) + "/data/prompt_autocomplete/",
-        {
-            // mode: "no-cors",
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                Authorization: `Basic ${props.firebaseToken}`,
-                "x-de-api-key": `Basic ${props.apiKey}`
-            },
-            body: JSON.stringify({
-                entityName: props.entityName,
-                input: props.input ?? null
-            })
-        })
-        .then(async (res) => {
-            const data = await res.json();
-            if (!res.ok) {
-                console.error("fetchEntityPromptSuggestion", data);
-                throw Error(data.message);
-            }
-            return {
-                prompts: data.data.prompts.map((e: string) => ({
-                    prompt: e,
-                    type: "sample"
-                }))
+    if (!response.ok) {
+        throw await errorFrom(response, "The AI service could not complete this request.");
+    }
+
+    let result: AutofillResult = { suggestions: {} };
+
+    for await (const { event, data } of readServerSentEvents(response)) {
+        let payload: any;
+        try {
+            payload = JSON.parse(data);
+        } catch {
+            // One malformed record must not abort a stream that is otherwise
+            // delivering good fields.
+            continue;
+        }
+
+        if (event === "suggestion_delta") {
+            props.onDelta(payload.key, payload.text);
+        } else if (event === "suggestion") {
+            props.onValue(payload.key, payload.value);
+        } else if (event === "done") {
+            result = {
+                suggestions: payload.suggestions ?? {},
+                usage: payload.usage
             };
-        });
+        } else if (event === "error") {
+            throw new Error(payload.message ?? "The AI service reported an error.");
+        }
+    }
 
+    return result;
 }
 
+/** Inline continuation for the rich-text editor. Streams plain text. */
 export async function autocompleteStream(props: {
-    firebaseToken: string,
-    textBefore?: string,
-    textAfter: string,
-    host?: string;
-    onUpdate: (delta: string) => void;
-}) {
-
-    let result = "";
-    return fetch((props.host ?? DEFAULT_SERVER) + "/data/autocomplete/",
-        {
-            // mode: "no-cors",
+    textBefore?: string;
+    textAfter?: string;
+    endpoint?: string;
+    signal?: AbortSignal;
+    onDelta: (text: string) => void;
+}): Promise<string> {
+    const response = await fetch(endpointOf(props.endpoint, "/autocomplete"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+            textBefore: props.textBefore ?? "",
+            textAfter: props.textAfter ?? ""
+        }),
+        signal: props.signal
+    });
+
+    if (!response.ok) {
+        throw await errorFrom(response, "The AI service could not complete this request.");
+    }
+
+    let text = "";
+    for await (const { event, data } of readServerSentEvents(response)) {
+        let payload: any;
+        try {
+            payload = JSON.parse(data);
+        } catch {
+            continue;
+        }
+        if (event === "error") {
+            throw new Error(payload?.message ?? "The AI service reported an error.");
+        }
+        if (event === "delta" && typeof payload?.text === "string") {
+            text += payload.text;
+            props.onDelta(payload.text);
+        }
+    }
+    return text;
+}
+
+/**
+ * Sample prompts for the Autofill menu.
+ *
+ * Failure is deliberately not thrown: the menu has built-in prompts to fall
+ * back on, and an empty suggestion list is a far better outcome than an error
+ * toast for something nobody asked for.
+ */
+export async function fetchPromptSuggestions(props: {
+    entityName: string;
+    input?: string;
+    endpoint?: string;
+    signal?: AbortSignal;
+}): Promise<SamplePromptsResult> {
+    try {
+        const response = await fetch(endpointOf(props.endpoint, "/prompts"), {
             method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                Authorization: `Basic ${props.firebaseToken}`
-                // "x-de-version": version
-            },
+            headers: { "Content-Type": "application/json" },
             body: JSON.stringify({
-                textBefore: props.textBefore,
-                textAfter: props.textAfter
-            })
-        })
-        .then(async (res) => {
-            if (!res.ok) {
-                console.error("enhanceDataAPIStream error", res)
-                throw await res.json();
-            }
-            const reader = res.body?.getReader();
-            if (!reader) {
-                throw new Error("No reader");
-            }
-
-            for await (const chunk of readChunks(reader)) {
-                const str = new TextDecoder().decode(chunk);
-                result += str;
-                console.debug("Autocomplete update:", str);
-                props.onUpdate(str);
-            }
-
-        }).then(() => {
-            console.debug("Autocomplete result:", result);
-            return result;
+                entityName: props.entityName,
+                input: props.input
+            }),
+            signal: props.signal
         });
-
+        if (!response.ok) return { prompts: [] };
+        const body = await response.json();
+        const prompts: string[] = Array.isArray(body?.prompts) ? body.prompts : [];
+        return {
+            prompts: prompts
+                .filter((p): p is string => typeof p === "string")
+                .map((prompt) => ({ prompt,
+type: "sample" as const }))
+        };
+    } catch {
+        return { prompts: [] };
+    }
 }

package/src/components/AutofillReviewDialog.tsx

@@ -0,0 +1,203 @@
+import React from "react";
+
+import {
+    Button,
+    Checkbox,
+    CircularProgress,
+    cls,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    Separator,
+    Typography
+} from "@rebasepro/ui";
+
+import { ProposedField } from "../types/data_enhancement_controller";
+import { useDataEnhancementController } from "./DataEnhancementControllerProvider";
+
+/**
+ * The review step.
+ *
+ * Autofill used to write generated text into the live form as it streamed —
+ * fields mutating under the cursor, half-written sentences that looked like
+ * bugs, and a pile of heuristics deciding whether each token should append to
+ * or replace what the operator had already typed. Getting the old value back
+ * meant retyping it.
+ *
+ * So the generated values land here instead. Streaming still happens, and is
+ * still worth having — rows appear and fill in as the model works, so a long
+ * run shows progress — but it happens in a surface that owns nothing. The
+ * record changes on **Apply**, once, for the rows still ticked.
+ */
+export function AutofillReviewDialog() {
+
+    const controller = useDataEnhancementController();
+    const review = controller?.review;
+
+    if (!review) return null;
+
+    const generating = review.status === "generating";
+    const applicable = review.fields.filter((f) => !f.pending && f.selected);
+    const allSelected = review.fields.length > 0 && review.fields.every((f) => f.selected);
+
+    return (
+        <Dialog
+            open={true}
+            maxWidth={"2xl"}
+            onOpenChange={(open) => {
+                if (!open) controller.dismissReview();
+            }}>
+
+            <DialogTitle variant={"subtitle1"} gutterBottom={false}>
+                Review autofill
+            </DialogTitle>
+
+            <DialogContent className={"flex flex-col gap-2"}>
+
+                {review.instructions && (
+                    <Typography variant={"body2"} color={"secondary"} className={"italic"}>
+                        “{review.instructions}”
+                    </Typography>
+                )}
+
+                {review.fields.length > 1 && (
+                    <>
+                        <label className={"flex items-center gap-3 py-1 cursor-pointer select-none"}>
+                            <Checkbox
+                                checked={allSelected}
+                                size={"small"}
+                                onCheckedChange={() => controller.toggleAll(!allSelected)}
+                            />
+                            <Typography variant={"label"} color={"secondary"}>
+                                {allSelected ? "Deselect all" : "Select all"}
+                            </Typography>
+                        </label>
+                        <Separator orientation={"horizontal"} className={"my-0"}/>
+                    </>
+                )}
+
+                <div className={"flex flex-col divide-y divide-surface-accent-100 dark:divide-surface-accent-800"}>
+                    {review.fields.map((field) => (
+                        <ProposedFieldRow
+                            key={field.key}
+                            field={field}
+                            onToggle={() => controller.toggleField(field.key)}
+                        />
+                    ))}
+                </div>
+
+                {generating && (
+                    <div className={"flex items-center gap-3 py-4 text-text-secondary dark:text-text-secondary-dark"}>
+                        <CircularProgress size={"smallest"}/>
+                        <Typography variant={"body2"} color={"secondary"}>
+                            {review.fields.length === 0 ? "Thinking…" : "Writing the remaining fields…"}
+                        </Typography>
+                    </div>
+                )}
+
+                {review.status === "failed" && (
+                    <Typography variant={"body2"} className={"py-2 text-red-600 dark:text-red-400"}>
+                        {review.error}
+                        {review.fields.length > 0 && " You can still apply what was written before it stopped."}
+                    </Typography>
+                )}
+
+                {!generating && review.fields.length === 0 && review.status !== "failed" && (
+                    <Typography variant={"body2"} color={"secondary"} className={"py-4"}>
+                        Nothing to fill in — every field either already has a value the model would not
+                        improve on, or is not one it can write.
+                    </Typography>
+                )}
+
+            </DialogContent>
+
+            <DialogActions>
+                <Button variant={"text"}
+                    color={"neutral"}
+                    onClick={controller.dismissReview}>
+                    {/* Named for what it does to the record, not to the dialog:
+                        nothing has been written, so there is nothing to undo. */}
+                    Discard
+                </Button>
+                <Button variant={"filled"}
+                    disabled={applicable.length === 0}
+                    onClick={controller.applyReview}>
+                    {applicable.length === 1 ? "Apply 1 field" : `Apply ${applicable.length} fields`}
+                </Button>
+            </DialogActions>
+
+        </Dialog>
+    );
+}
+
+function ProposedFieldRow({ field, onToggle }: { field: ProposedField, onToggle: () => void }) {
+
+    const replaces = hasValue(field.currentValue) && !isSameValue(field.currentValue, field.proposed);
+
+    return (
+        <label className={cls(
+            "flex items-start gap-3 py-3 cursor-pointer",
+            !field.selected && "opacity-50"
+        )}>
+            <div className={"mt-0.5 shrink-0"}>
+                <Checkbox
+                    checked={field.selected}
+                    size={"small"}
+                    onCheckedChange={onToggle}
+                />
+            </div>
+
+            <div className={"flex flex-col gap-1 min-w-0 grow"}>
+                <div className={"flex items-center gap-2"}>
+                    <Typography variant={"label"}>{field.label}</Typography>
+                    {replaces && (
+                        <Typography variant={"caption"} color={"secondary"}>
+                            replaces the current value
+                        </Typography>
+                    )}
+                    {field.pending && <CircularProgress size={"smallest"}/>}
+                </div>
+
+                {replaces && (
+                    <Typography
+                        variant={"body2"}
+                        color={"secondary"}
+                        className={"line-through whitespace-pre-wrap break-words"}>
+                        {renderValue(field.currentValue)}
+                    </Typography>
+                )}
+
+                <Typography variant={"body2"} className={"whitespace-pre-wrap break-words"}>
+                    {renderValue(field.proposed)}
+                </Typography>
+            </div>
+        </label>
+    );
+}
+
+function hasValue(value: unknown): boolean {
+    if (value === null || value === undefined) return false;
+    if (typeof value === "string") return value.trim().length > 0;
+    if (Array.isArray(value)) return value.length > 0;
+    return true;
+}
+
+function isSameValue(a: unknown, b: unknown): boolean {
+    if (a === b) return true;
+    if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+    if (Array.isArray(a) && Array.isArray(b)) {
+        return a.length === b.length && a.every((v, i) => isSameValue(v, b[i]));
+    }
+    return false;
+}
+
+/** Values are shown, never edited here — so a readable string is all that is needed. */
+function renderValue(value: unknown): string {
+    if (value === null || value === undefined) return "";
+    if (value instanceof Date) return value.toLocaleString();
+    if (Array.isArray(value)) return value.map((v) => renderValue(v)).join(", ");
+    if (typeof value === "boolean") return value ? "Yes" : "No";
+    if (typeof value === "object") return JSON.stringify(value);
+    return String(value);
+}