@rebasepro/plugin-ai 0.12.1-canary.gf5f1d39 → 0.13.0

package/src/components/FormEnhanceAction.tsx

@@ -1,10 +1,10 @@
-
-import React, { useCallback, useDeferredValue, useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 
 import {
     Button,
     CircularProgress,
     cls,
+    fieldBackgroundMixin,
     focusedDisabled,
     IconButton,
     iconSize,
@@ -16,29 +16,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 +41,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 +66,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 +79,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 +92,158 @@ 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}
-                    onClick={() => {
-                        setInstructions(samplePrompt.prompt);
-                        enhance(samplePrompt.prompt);
-                    }}
-                >
-                    <div className={"pl-9 grow text-text-secondary dark:text-text-secondary-dark"}>
-                        {samplePrompt.prompt}
-                    </div>
+        <>
+            <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>}>
 
-                    {samplePrompt.type === "recent" && <IconButton
-                        onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            removeRecentPrompt(storageKey, samplePrompt.prompt);
-                            setSamplePrompts((samplePrompts ?? []).filter(p => p.prompt !== samplePrompt.prompt));
+                <MenuItem className={"py-4"}
+                    onClick={() => {
+                        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"}/>
+
+                {/* `px-4` and `gap-4` are MenuItem's own paddings, so the input
+                    row lines up with the items above it instead of sitting 8px
+                    to their left — which is what `mx-2` on the textarea did. */}
+                {/* `items-center` so the send button sits on the field's centre
+                    line rather than pinned to its top edge as the textarea grows. */}
+                <div
+                    className={cls(
+                        "my-2 px-4 py-2 gap-4 w-[500px] max-w-full flex items-center text-surface-700 dark:text-surface-200"
+                    )}>
+
+                    <div className={"relative w-full grow"}>
+                        {/* `fieldBackgroundMixin`, the same surface every other input
+                            in the codebase uses. It was `dark:bg-surface-950`, which
+                            theme.css defines as literal `#000000` — a pure black
+                            rectangle inside an already-dark menu. */}
+                        <TextareaAutosize
+                            className={cls("p-3 pr-12 rounded-lg resize-none w-full outline-hidden max-h-[300px] overflow-auto", fieldBackgroundMixin, 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);
+                            }}
+                        />
+
+                        {/* Inside the field and only when there is something to
+                            clear — a permanently-visible X on an empty box is a
+                            control that does nothing. Positioned exactly as
+                            `TextFieldBinding` positions its own clearable X, so
+                            it stays centred as the textarea grows. */}
+                        {instructions.length > 0 && !loading && (
+                            <div
+                                className={"flex flex-row justify-center items-center absolute h-full right-0 top-0 mr-2"}>
+                                <IconButton
+                                    size={"small"}
+                                    onClick={() => {
+                                        setInstructions("");
+                                    }}>
+                                    <XIcon size={iconSize.small}/>
+                                </IconButton>
+                            </div>
+                        )}
+                    </div>
 
-                    }}
-                    onChange={(e) => {
-                        setInstructions(e.target.value);
-                    }}
-                />
+                    <IconButton
+                        onClick={() => generate(instructions)}
+                        size={"small"}
+                        color={!instructions ? "primary" : undefined}
+                        disabled={loading || !instructions}>
+                        {loading &&
+                            <CircularProgress size={"smallest"}/>}
+                        {/* Sized, and no `color`. These icons are re-exported
+                            straight from lucide, so `color` lands on the SVG as
+                            a CSS colour — and `"primary"` is not one, which is
+                            why this button rendered empty. Every other icon in
+                            the codebase passes `size` alone and inherits
+                            `currentColor` from the button. */}
+                        {!loading &&
+                            <SendIcon size={iconSize.small}/>}
+                    </IconButton>
 
-                <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>
+                </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) {
-//
-// }