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

package/src/components/FormEnhanceAction.tsx

@@ -1,5 +1,4 @@
-
-import React, { useCallback, useDeferredValue, useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 
 import {
     Button,
@@ -16,29 +15,24 @@ import {
     XIcon
 } from "@rebasepro/ui";
 import {
-    AIIcon,
-    useLargeLayout
+    AIIcon
 } from "@rebasepro/app";
 import { EntityStatus, Properties, Property } from "@rebasepro/types";
 import { PluginFormActionProps } from "@rebasepro/admin-types";
 import { isPropertyBuilder, stripCollectionPath } from "@rebasepro/common";
 import { useDataEnhancementController } from "./DataEnhancementControllerProvider";
+import { AutofillReviewDialog } from "./AutofillReviewDialog";
 import { SamplePrompt } from "../types/data_enhancement_controller";
 
 export function FormEnhanceAction({
-    entityId,
     path,
     status,
     collection,
-    formContext,
-    openEntityMode
+    formContext
 }: PluginFormActionProps) {
 
-    const largeLayout = useLargeLayout();
-
     const storageKey = createLocalStorageKey(path, status);
 
-    const [loading, setLoading] = React.useState(false);
     const dataEnhancementController = useDataEnhancementController();
 
     const [samplePrompts, setSamplePrompts] = React.useState<SamplePrompt[] | undefined>(undefined);
@@ -46,6 +40,15 @@ export function FormEnhanceAction({
 
     const getSamplePrompts = dataEnhancementController?.getSamplePrompts;
 
+    /**
+     * Driven by the controller rather than by local state.
+     *
+     * There is exactly one run at a time, and the review owns it — a second
+     * `loading` flag here could disagree with the dialog about whether the
+     * model is still writing.
+     */
+    const loading = dataEnhancementController?.review?.status === "generating";
+
     const loadingPrompts = useRef(false);
     const updateSuggestedPrompts = useCallback(async function updateSuggestedPrompts(instructions?: string) {
         if (!getSamplePrompts) return;
@@ -62,9 +65,6 @@ export function FormEnhanceAction({
     },
         [collection.name, collection.singularName, getSamplePrompts, status]);
 
-    const deferredValues = useDeferredValue(formContext?.values);
-    // const enoughData = countStringCharacters(deferredValues, collection.properties) > 20;
-
     useEffect(() => {
         if (!dataEnhancementController) return;
         if (!samplePrompts) {
@@ -78,9 +78,12 @@ export function FormEnhanceAction({
         updateSuggestedPrompts().then();
     }, [dataEnhancementController, status]);
 
-    const enhance = (prompt?: string) => {
+    /**
+     * Starts a run and opens the review. Nothing is written to the form here —
+     * see {@link AutofillReviewDialog}.
+     */
+    const generate = (prompt?: string) => {
         if (!dataEnhancementController || !formContext?.values) return;
-        setLoading(true);
         if (prompt) {
             addRecentPrompt(storageKey, prompt);
             setSamplePrompts([{
@@ -88,136 +91,133 @@ export function FormEnhanceAction({
                 type: "recent"
             }, ...(samplePrompts ?? []).slice(0, 5)]);
         }
-        return dataEnhancementController.enhance({
-            entityId,
-            values: formContext!.values,
-            instructions: prompt,
-            replaceValues: true
-        }).finally(() => {
-            setLoading(false);
-        });
+        // The controller records a failure in the review itself, so there is
+        // nothing to catch here — but the promise is still explicitly handled
+        // so a rejection can never surface as an unhandled one.
+        dataEnhancementController.generate({
+            values: formContext.values,
+            instructions: prompt
+        }).catch(() => undefined);
     };
 
     if (!dataEnhancementController?.enabled)
         return null;
 
-    const suggestions = dataEnhancementController.suggestions;
-    const hasSuggestions = Object.values(suggestions).filter(Boolean).length > 0;
-
-    const disabledSuggestionActions = !hasSuggestions;
-    const promptSuggestionsEnabled = (samplePrompts ?? []).length > 0 && instructions.length === 0;
-
-    // const noIdSet = !formContext?.entityId;
-
     function submit() {
-        enhance(instructions);
+        generate(instructions);
     }
 
     return (
-        <Menu
-            align={"end"}
-            sideOffset={8}
-            className={"max-w-[100vw]"}
-            trigger={<Button variant={"filled"}
-                color={"neutral"}
-                fullWidth={largeLayout && openEntityMode === "full_screen"}
-                size={"small"}
-                disabled={loading}>
-                {!loading && <AIIcon size={"small"}/>}
-                {loading && <CircularProgress size={"small"}/>}
-                Autofill
-            </Button>}>
-
-            <MenuItem className={"py-4"}
-                onClick={() => {
-                    enhance();
-                }}>
-                <AIIcon size={"small"}/>
-                Autofill based on the current content
-            </MenuItem>
-
-            <Separator orientation={"horizontal"} className={"mt-2"}/>
-
-            {samplePrompts?.map((samplePrompt, index) => {
-                return <MenuItem
-                    key={index + "_" + samplePrompt.prompt}
+        <>
+            <Menu
+                align={"end"}
+                sideOffset={8}
+                className={"max-w-[100vw]"}
+                // Never full width: this used to stretch to fill the form's
+                // `w-80 2xl:w-96` side rail in full screen. That rail is gone, and
+                // in the footer a stretched button reads as the primary action.
+                trigger={<Button variant={"filled"}
+                    color={"neutral"}
+                    size={"small"}
+                    disabled={loading}>
+                    {!loading && <AIIcon size={"small"}/>}
+                    {loading && <CircularProgress size={"small"}/>}
+                    Autofill
+                </Button>}>
+
+                <MenuItem className={"py-4"}
                     onClick={() => {
-                        setInstructions(samplePrompt.prompt);
-                        enhance(samplePrompt.prompt);
-                    }}
-                >
-                    <div className={"pl-9 grow text-text-secondary dark:text-text-secondary-dark"}>
-                        {samplePrompt.prompt}
-                    </div>
-
-                    {samplePrompt.type === "recent" && <IconButton
-                        onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            removeRecentPrompt(storageKey, samplePrompt.prompt);
-                            setSamplePrompts((samplePrompts ?? []).filter(p => p.prompt !== samplePrompt.prompt));
+                        generate();
+                    }}>
+                    <AIIcon size={"small"}/>
+                    Autofill based on the current content
+                </MenuItem>
+
+                <Separator orientation={"horizontal"} className={"mt-2"}/>
+
+                {samplePrompts?.map((samplePrompt, index) => {
+                    return <MenuItem
+                        key={index + "_" + samplePrompt.prompt}
+                        onClick={() => {
+                            setInstructions(samplePrompt.prompt);
+                            generate(samplePrompt.prompt);
                         }}
-                        size={"smallest"}
                     >
-                        <XIcon size={iconSize.smallest}/>
-                    </IconButton>
-                    }
-                </MenuItem>;
-            })}
-
-            <Separator orientation={"horizontal"}/>
-
-            <div
-                className={cls(
-                    "my-2 w-[500px] max-w-full flex items-start text-surface-700 dark:text-surface-200"
-                )}>
-
-                <TextareaAutosize
-                    className={cls("p-4 rounded-lg resize-none bg-surface-100 dark:bg-surface-950 mx-2 w-full grow outline-hidden max-h-[300px] overflow-auto", focusedDisabled)}
-                    value={instructions}
-                    autoFocus={status === "new"}
-                    disabled={loading}
-                    onFocus={(event) => {
-                        event.stopPropagation();
-                    }}
-                    placeholder={"...or provide instructions"}
-                    onKeyDown={(e) => {
-                        e.stopPropagation();
-                        if (e.key === "Enter" && !e.shiftKey) {
-                            e.preventDefault();
-                            submit();
+                        <div className={"pl-9 grow text-text-secondary dark:text-text-secondary-dark"}>
+                            {samplePrompt.prompt}
+                        </div>
+
+                        {samplePrompt.type === "recent" && <IconButton
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                removeRecentPrompt(storageKey, samplePrompt.prompt);
+                                setSamplePrompts((samplePrompts ?? []).filter(p => p.prompt !== samplePrompt.prompt));
+                            }}
+                            size={"smallest"}
+                        >
+                            <XIcon size={iconSize.smallest}/>
+                        </IconButton>
                         }
+                    </MenuItem>;
+                })}
+
+                <Separator orientation={"horizontal"}/>
+
+                <div
+                    className={cls(
+                        "my-2 w-[500px] max-w-full flex items-start text-surface-700 dark:text-surface-200"
+                    )}>
+
+                    <TextareaAutosize
+                        className={cls("p-4 rounded-lg resize-none bg-surface-100 dark:bg-surface-950 mx-2 w-full grow outline-hidden max-h-[300px] overflow-auto", focusedDisabled)}
+                        value={instructions}
+                        autoFocus={status === "new"}
+                        disabled={loading}
+                        onFocus={(event) => {
+                            event.stopPropagation();
+                        }}
+                        placeholder={"...or provide instructions"}
+                        onKeyDown={(e) => {
+                            e.stopPropagation();
+                            if (e.key === "Enter" && !e.shiftKey) {
+                                e.preventDefault();
+                                submit();
+                            }
 
-                    }}
-                    onChange={(e) => {
-                        setInstructions(e.target.value);
-                    }}
-                />
+                        }}
+                        onChange={(e) => {
+                            setInstructions(e.target.value);
+                        }}
+                    />
 
-                <IconButton
-                    size={"small"}
-                    onClick={() => {
-                        setInstructions("");
-                    }}
-                    color={!instructions ? "primary" : undefined}
-                    disabled={loading || !instructions}>
-                    <XIcon size={iconSize.small}/>
-                </IconButton>
-
-                <IconButton
-                    onClick={() => enhance(instructions)}
-                    size={"small"}
-                    color={!instructions ? "primary" : undefined}
-                    disabled={loading || !instructions}>
-                    {loading &&
-                        <CircularProgress size={"smallest"}/>}
-                    {!loading &&
-                        <SendIcon color={"primary"}/>}
-                </IconButton>
+                    <IconButton
+                        size={"small"}
+                        onClick={() => {
+                            setInstructions("");
+                        }}
+                        color={!instructions ? "primary" : undefined}
+                        disabled={loading || !instructions}>
+                        <XIcon size={iconSize.small}/>
+                    </IconButton>
+
+                    <IconButton
+                        onClick={() => generate(instructions)}
+                        size={"small"}
+                        color={!instructions ? "primary" : undefined}
+                        disabled={loading || !instructions}>
+                        {loading &&
+                            <CircularProgress size={"smallest"}/>}
+                        {!loading &&
+                            <SendIcon color={"primary"}/>}
+                    </IconButton>
+
+                </div>
 
-            </div>
+            </Menu>
 
-        </Menu>
+            <AutofillReviewDialog/>
+        </>
     );
 }
 

package/src/editor/useEditorAIController.tsx

@@ -1,37 +1,24 @@
+import React from "react";
 import { autocompleteStream } from "../api";
 import { EditorAIController } from "@rebasepro/admin";
 
-export function useEditorAIController({ getAuthToken }: { getAuthToken?: () => Promise<string> }): EditorAIController {
-    const autocomplete = async (textBefore: string, textAfter: string, onUpdate: (delta: string) => void) => {
-        if (!getAuthToken) {
-            throw new Error("Firebase token is required");
-        }
-        const firebaseToken = await getAuthToken();
-        return autocompleteStream({
-            firebaseToken,
-            textBefore,
-            textAfter,
-            onUpdate
-        });
-    }
-
-    return {
-        autocomplete
-    };
+/**
+ * Inline continuation for the rich-text editor's slash command.
+ *
+ * No token is threaded through any more. The previous version demanded a
+ * Firebase ID token and threw `"Firebase token is required"` when it could not
+ * get one — in a Rebase app there is no such thing, and the token it actually
+ * sent was a Rebase JWT the receiving service had no way to verify. The hosted
+ * service authenticates nobody; see `src/api.ts`.
+ */
+export function useEditorAIController({ endpoint }: { endpoint?: string } = {}): EditorAIController {
+    return React.useMemo(() => ({
+        autocomplete: (textBefore: string, textAfter: string, onUpdate: (delta: string) => void) =>
+            autocompleteStream({
+                endpoint,
+                textBefore,
+                textAfter,
+                onDelta: onUpdate
+            })
+    }), [endpoint]);
 }
-
-// async function * generateLoremIpsum(): AsyncGenerator<string> {
-//     const loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n# Heading\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
-//
-//     const words = loremIpsum.split(" ");
-//
-//     for (const word of words) {
-//         yield word;
-//         await new Promise(resolve => setTimeout(resolve, 100));
-//     }
-// }
-//
-// const generator = generateLoremIpsum();
-// for await (const word of generator) {
-//
-// }

package/src/tests/api.test.ts

@@ -0,0 +1,283 @@
+import { TextEncoder, TextDecoder } from "util";
+Object.assign(global, { TextEncoder,
+TextDecoder });
+
+import {
+    DEFAULT_AI_ENDPOINT,
+    autocompleteStream,
+    autofillStream,
+    fetchAiStatus,
+    fetchPromptSuggestions
+} from "../api";
+import { AutofillRequest } from "../types/data_enhancement_controller";
+
+/**
+ * The transport.
+ *
+ * This exists because of what it replaced. The old client split each network
+ * chunk on the literal `"&$# "` and `JSON.parse`d the pieces — so a delimiter
+ * landing across two reads corrupted the parse, and reads land wherever the
+ * network puts them. The central test below therefore re-delivers the same
+ * response one byte at a time and asserts the result is identical to
+ * delivering it whole. Anything that only ever feeds a complete body would
+ * have passed against the old code too.
+ */
+
+/** A `Response` whose body yields exactly the chunks given, in order. */
+function streamingResponse(chunks: string[], ok = true): any {
+    const encoder = new TextEncoder();
+    let i = 0;
+    return {
+        ok,
+        status: ok ? 200 : 500,
+        body: {
+            getReader: () => ({
+                read: async () =>
+                    i < chunks.length
+                        ? { done: false,
+value: encoder.encode(chunks[i++]) }
+                        : { done: true,
+value: undefined }
+            })
+        }
+    };
+}
+
+function jsonResponse(body: unknown, ok = true, status = 200): any {
+    return { ok,
+status,
+json: async () => body };
+}
+
+/** Split a string into fixed-size pieces, to force boundaries anywhere. */
+function chunked(body: string, size: number): string[] {
+    const out: string[] = [];
+    for (let i = 0; i < body.length; i += size) out.push(body.slice(i, i + size));
+    return out;
+}
+
+const REQUEST: AutofillRequest = {
+    entityName: "Product",
+    values: {},
+    properties: { title: { type: "string",
+fieldConfigId: "text_field" } }
+};
+
+const BODY = [
+    "event: suggestion_delta",
+    'data: {"key":"title","text":"Blue "}',
+    "",
+    "event: suggestion_delta",
+    'data: {"key":"title","text":"widget"}',
+    "",
+    "event: suggestion",
+    'data: {"key":"title","value":"Blue widget"}',
+    "",
+    "event: suggestion",
+    'data: {"key":"stock","value":42}',
+    "",
+    "event: done",
+    'data: {"suggestions":{"title":"Blue widget","stock":42},"usage":{"outputTokens":9}}',
+    "",
+    ""
+].join("\n");
+
+async function runAutofill(chunks: string[]) {
+    (global as any).fetch = jest.fn().mockResolvedValue(streamingResponse(chunks));
+    const deltas: [string, string][] = [];
+    const values: [string, unknown][] = [];
+    const result = await autofillStream({
+        request: REQUEST,
+        onDelta: (k, t) => deltas.push([k, t]),
+        onValue: (k, v) => values.push([k, v])
+    });
+    return { deltas,
+values,
+result };
+}
+
+afterEach(() => {
+    jest.restoreAllMocks();
+});
+
+describe("autofillStream", () => {
+    it("reads deltas, values and the final result", async () => {
+        const { deltas, values, result } = await runAutofill([BODY]);
+        expect(deltas).toEqual([
+            ["title", "Blue "],
+            ["title", "widget"]
+        ]);
+        expect(values).toEqual([
+            ["title", "Blue widget"],
+            ["stock", 42]
+        ]);
+        expect(result.suggestions).toEqual({ title: "Blue widget",
+stock: 42 });
+        expect(result.usage).toEqual({ outputTokens: 9 });
+    });
+
+    it("produces identical results at every chunk boundary", async () => {
+        const whole = await runAutofill([BODY]);
+        for (let size = 1; size <= BODY.length; size++) {
+            const split = await runAutofill(chunked(BODY, size));
+            expect(split.deltas).toEqual(whole.deltas);
+            expect(split.values).toEqual(whole.values);
+            expect(split.result).toEqual(whole.result);
+        }
+    });
+
+    it("handles CRLF record separators", async () => {
+        // Proxies rewrite line endings, and a four-character separator sliced as
+        // if it were two leaves a stray newline that eats the next `event:`.
+        const { values } = await runAutofill([BODY.replace(/\n/g, "\r\n")]);
+        expect(values).toEqual([
+            ["title", "Blue widget"],
+            ["stock", 42]
+        ]);
+    });
+
+    it("ignores keep-alive comments", async () => {
+        const withComments = ":keep-alive\n\n" + BODY;
+        const { result } = await runAutofill([withComments]);
+        expect(result.suggestions).toEqual({ title: "Blue widget",
+stock: 42 });
+    });
+
+    it("joins a multi-line data field", async () => {
+        const body = 'event: suggestion\ndata: {"key":"body",\ndata: "value":"two lines"}\n\n';
+        const { values } = await runAutofill([body]);
+        expect(values).toEqual([["body", "two lines"]]);
+    });
+
+    it("keeps going past one malformed record", async () => {
+        // A single bad frame must not discard fields that arrived correctly.
+        const body = "event: suggestion\ndata: {not json\n\n" + BODY;
+        const { values } = await runAutofill([body]);
+        expect(values).toEqual([
+            ["title", "Blue widget"],
+            ["stock", 42]
+        ]);
+    });
+
+    it("throws the message carried on an error event", async () => {
+        (global as any).fetch = jest.fn().mockResolvedValue(
+            streamingResponse(['event: error\ndata: {"message":"quota exhausted"}\n\n'])
+        );
+        await expect(
+            autofillStream({ request: REQUEST,
+onDelta: () => undefined,
+onValue: () => undefined })
+        ).rejects.toThrow("quota exhausted");
+    });
+
+    it("surfaces the server's error envelope on a non-2xx", async () => {
+        // `{ error: { message } }` is the control plane's contract. Reading it
+        // is the difference between telling the operator the quota reset time
+        // and telling them "Request failed with status 429".
+        (global as any).fetch = jest.fn().mockResolvedValue(
+            jsonResponse({ error: { message: "The free AI quota for today has been used up.",
+code: "upstream_error" } }, false, 429)
+        );
+        await expect(
+            autofillStream({ request: REQUEST,
+onDelta: () => undefined,
+onValue: () => undefined })
+        ).rejects.toThrow(/quota for today/);
+    });
+
+    it("sends no credentials of any kind", async () => {
+        // The FireCMS-era client sent the tenant's JWT as `Authorization: Basic`
+        // plus a hardcoded `fcms-…` key. No external service could verify the
+        // former, and the latter shipped in the published package.
+        const fetchMock = jest.fn().mockResolvedValue(streamingResponse([BODY]));
+        (global as any).fetch = fetchMock;
+        await autofillStream({ request: REQUEST,
+onDelta: () => undefined,
+onValue: () => undefined });
+        const [, init] = fetchMock.mock.calls[0];
+        expect(init.headers).toEqual({ "Content-Type": "application/json" });
+        expect(JSON.stringify(init)).not.toMatch(/fcms-|Bearer|Basic/);
+    });
+
+    it("posts to the hosted endpoint by default and to an override when given", async () => {
+        const fetchMock = jest.fn().mockResolvedValue(streamingResponse([BODY]));
+        (global as any).fetch = fetchMock;
+
+        await autofillStream({ request: REQUEST,
+onDelta: () => undefined,
+onValue: () => undefined });
+        expect(fetchMock.mock.calls[0][0]).toBe(`${DEFAULT_AI_ENDPOINT}/autofill`);
+
+        await autofillStream({
+            request: REQUEST,
+            endpoint: "https://ai.example.com/",
+            onDelta: () => undefined,
+            onValue: () => undefined
+        });
+        // Trailing slash trimmed — otherwise the override 404s on `//autofill`.
+        expect(fetchMock.mock.calls[1][0]).toBe("https://ai.example.com/autofill");
+    });
+});
+
+describe("autocompleteStream", () => {
+    it("concatenates deltas and returns the full continuation", async () => {
+        const body = [
+            'event: delta\ndata: {"text":"the quick "}',
+            'event: delta\ndata: {"text":"brown fox"}',
+            "event: done\ndata: {}",
+            ""
+        ].join("\n\n");
+        (global as any).fetch = jest.fn().mockResolvedValue(streamingResponse(chunked(body, 7)));
+
+        const seen: string[] = [];
+        const text = await autocompleteStream({
+            textBefore: "I saw ",
+            textAfter: "",
+            onDelta: (t) => seen.push(t)
+        });
+
+        expect(seen.join("")).toBe("the quick brown fox");
+        expect(text).toBe("the quick brown fox");
+    });
+});
+
+describe("fetchAiStatus", () => {
+    it("reports available when the service says so", async () => {
+        (global as any).fetch = jest.fn().mockResolvedValue(
+            jsonResponse({ available: true,
+model: "claude-opus-5",
+features: ["autofill"] })
+        );
+        await expect(fetchAiStatus({})).resolves.toEqual({
+            available: true,
+            model: "claude-opus-5",
+            features: ["autofill"]
+        });
+    });
+
+    it("reports unavailable rather than throwing when the service errors", async () => {
+        // This value decides whether a button renders. Any doubt must resolve to
+        // "no button" — that is the whole fix for the 404-on-click failure.
+        (global as any).fetch = jest.fn().mockResolvedValue(jsonResponse({}, false, 503));
+        await expect(fetchAiStatus({})).resolves.toEqual({ available: false });
+    });
+});
+
+describe("fetchPromptSuggestions", () => {
+    it("maps the service's prompts", async () => {
+        (global as any).fetch = jest.fn().mockResolvedValue(jsonResponse({ prompts: ["A blue widget", "A red one"] }));
+        await expect(fetchPromptSuggestions({ entityName: "Product" })).resolves.toEqual({
+            prompts: [
+                { prompt: "A blue widget",
+type: "sample" },
+                { prompt: "A red one",
+type: "sample" }
+            ]
+        });
+    });
+
+    it("degrades to no suggestions instead of failing the menu", async () => {
+        (global as any).fetch = jest.fn().mockRejectedValue(new Error("offline"));
+        await expect(fetchPromptSuggestions({ entityName: "Product" })).resolves.toEqual({ prompts: [] });
+    });
+});