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

package/src/components/DataEnhancementControllerProvider.tsx

@@ -1,22 +1,17 @@
 import React, { PropsWithChildren, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 
 import {
+    AutofillReview,
     DataEnhancementController,
-    EnhancedDataResult,
-    EnhanceParams,
-    InputProperty
+    GenerateParams,
+    InputProperty,
+    ProposedField
 } from "../types/data_enhancement_controller";
-import {
-    useAuthController,
-    useCustomizationController,
-    useSnackbarController
-} from "@rebasepro/app";
-import { useUrlController } from "@rebasepro/admin";
-import { DataDriver, Entity, CollectionConfig } from "@rebasepro/types";
+import { CollectionConfig } from "@rebasepro/types";
 import { PluginFormActionProps } from "@rebasepro/admin-types";
-import { enhanceDataAPIStream, fetchEntityPromptSuggestion } from "../api";
-import { getAppendableSuggestion } from "../utils/suggestions";
+import { autofillStream, fetchAiStatus, fetchPromptSuggestions } from "../api";
 import { getSimplifiedProperties } from "../utils/properties";
+import { flatMapEntityValues } from "../utils/values";
 import { useEditorAIController } from "../editor/useEditorAIController";
 import { getValueInPath } from "@rebasepro/utils";
 
@@ -24,311 +19,250 @@ const DataEnhancementControllerContext = React.createContext<DataEnhancementCont
 
 type DataEnhancementControllerProviderProps = {
 
-    apiKey: string;
-
     getConfigForPath?: (props: {
         path: string,
         collection: CollectionConfig
     }) => boolean;
 
-    host?: string;
+    endpoint?: string;
 }
 
 export const useDataEnhancementController = (): DataEnhancementController => useContext(DataEnhancementControllerContext);
 
-function getPropertyFromKey(properties: Record<string, InputProperty>, propertyKey: string) {
+function getPropertyFromKey(properties: Record<string, InputProperty>, propertyKey: string): InputProperty | undefined {
     if (propertyKey in properties) {
         return properties[propertyKey];
-    } else {
-        //split the property key
-        const split = propertyKey.split(".");
-        if (split.length === 1) {
-            return undefined;
-        }
-        const parentKey = split.slice(0, split.length - 1).join(".");
-        return getPropertyFromKey(properties, parentKey);
+    }
+    const split = propertyKey.split(".");
+    if (split.length === 1) return undefined;
+    return getPropertyFromKey(properties, split.slice(0, -1).join("."));
+}
 
+/**
+ * Convert a value off the wire into what the form field expects.
+ *
+ * Only dates need converting: the service answers ISO-8601 strings because JSON
+ * has no date type, and handing a date field a string stores the wrong type
+ * without complaining. Everything else — strings, numbers, booleans, arrays of
+ * scalars — is already the shape the field wants, which is the point of having
+ * the service constrain its answer to a schema derived from these properties.
+ */
+function coerceToProperty(value: unknown, property: InputProperty | undefined): unknown {
+    if (property?.type === "date" && typeof value === "string") {
+        const date = new Date(value);
+        return Number.isNaN(date.getTime()) ? undefined : date;
     }
+    return value;
 }
 
 export function DataEnhancementControllerProvider({
-    apiKey,
     getConfigForPath,
     children,
-    host,
+    endpoint,
     path,
     collection,
     formContext
 }: PropsWithChildren<DataEnhancementControllerProviderProps & PluginFormActionProps>) {
 
-    const [enabled, setEnabled] = useState(false);
-    const [suggestions, setSuggestions] = useState<Record<string, string | number>>({});
-    const [loadingSuggestions, setLoadingSuggestions] = useState<string[]>([]);
-
-    const enhancingInProgress = useRef(false);
-
-    const authController = useAuthController();
-    const snackbarController = useSnackbarController();
-
+    const [allowedHere, setAllowedHere] = useState(false);
+    const [serviceAvailable, setServiceAvailable] = useState(false);
+    const [review, setReview] = useState<AutofillReview | null>(null);
 
-    const properties = useMemo(() => getSimplifiedProperties(collection.properties, formContext?.values ?? {}), [formContext?.values]);
-    // const preEnhanceValuesRef = React.useRef(formContext?.values ?? {});
-    const valuesRef = React.useRef(formContext?.values ?? {});
-    useEffect(() => {
-        if (!enhancingInProgress.current)
-            valuesRef.current = formContext?.values ?? {};
-    }, [formContext?.values]);
-
-    const allowReferenceDataSelection = false;
-
-    const updateConfig = useCallback(async () => {
-        if (!getConfigForPath) return;
-        const config = getConfigForPath({
-            path,
-            collection
-        });
-        if (config) {
-            setEnabled(true);
-        }
-    }, [collection, getConfigForPath, path]);
+    const properties = useMemo(
+        () => getSimplifiedProperties(collection.properties, formContext?.values ?? {}),
+        [collection.properties, formContext?.values]
+    );
 
+    /**
+     * Read inside the streaming callbacks, which outlive the render that
+     * started the run.
+     *
+     * The operator is free to keep typing while the model works — nothing here
+     * writes to the form — so the callbacks must not close over a stale
+     * property map from whichever render happened to kick the run off.
+     */
+    const propertiesRef = useRef(properties);
+    propertiesRef.current = properties;
+
+    /** The host app's own opt-out. */
     useEffect(() => {
         if (!getConfigForPath) {
-            setEnabled(true);
-        } else {
-            updateConfig();
+            setAllowedHere(true);
+            return;
         }
-
-    }, [getConfigForPath, updateConfig]);
-
-
-    const urlController = useUrlController();
-
-    const clearSuggestion = useCallback((propertyKey: string) => {
-        setSuggestions((prev) => {
-            //remove propertyKey from prev
-            const {
-                [propertyKey]: _,
-                ...rest
-            } = prev;
-            return rest;
+        setAllowedHere(Boolean(getConfigForPath({ path,
+collection })));
+    }, [getConfigForPath, path, collection]);
+
+    /**
+     * The service's own availability.
+     *
+     * Nothing renders until this comes back true. An unreachable host, an
+     * unconfigured provider key or an exhausted daily quota all land here, and
+     * all of them mean the same thing to the operator: no Autofill button,
+     * rather than a button that fails when clicked.
+     */
+    useEffect(() => {
+        if (!allowedHere) return;
+        const abort = new AbortController();
+        fetchAiStatus({ endpoint,
+signal: abort.signal })
+            .then((status) => setServiceAvailable(status.available))
+            .catch(() => setServiceAvailable(false));
+        return () => abort.abort();
+    }, [allowedHere, endpoint]);
+
+    const enabled = allowedHere && serviceAvailable;
+
+    /** Add or update one row in the review, preserving arrival order. */
+    const upsertField = useCallback((key: string, update: (existing: ProposedField | undefined) => ProposedField) => {
+        setReview((current) => {
+            if (!current) return current;
+            const index = current.fields.findIndex((f) => f.key === key);
+            const next = update(index === -1 ? undefined : current.fields[index]);
+            const fields = index === -1
+                ? [...current.fields, next]
+                : current.fields.map((f, i) => (i === index ? next : f));
+            return { ...current,
+fields };
         });
     }, []);
 
-    const appendValueDelta = useCallback((propertyKey: string, delta: string) => {
-
-        const property = getPropertyFromKey(properties, propertyKey);
-        if (delta === null || property?.disabled) {
-            return;
-        }
-
-        // clearSuggestion(propertyKey);
-        const value = getValueInPath(valuesRef.current, propertyKey);
+    const generate = useCallback(async (params: GenerateParams<Record<string, unknown>>): Promise<void> => {
 
-        const currentValue = value ? (value as string) + "" : "";
-        const updatedValue = currentValue + delta;
-        // if (currentValue.length === 0) updatedValue = updatedValue.trimStart();
-        valuesRef.current = {
-            ...valuesRef.current,
-            [propertyKey]: updatedValue
-        };
-        formContext?.setFieldValue(propertyKey, updatedValue, false);
-        setSuggestions(prev => ({
-            ...prev,
-            [propertyKey]: (prev[propertyKey] ?? "") + delta
-        }));
-    }, [properties, formContext]);
+        const currentProperties = propertiesRef.current;
+        const flatValues = flatMapEntityValues(params.values ?? {}) as Record<string, unknown>;
 
-    const updateSuggestedValues = useCallback((currentValues: object, updatedValues: Record<string, string | number>, replaceValues: boolean) => {
-
-        setLoadingSuggestions((prev) => {
-            return prev.filter(p => !Object.keys(updatedValues).includes(p));
+        setReview({
+            status: "generating",
+            fields: [],
+            instructions: params.instructions
         });
 
-        Object.entries(updatedValues).forEach(([propertyKey, suggestion]) => {
-
-            const value = getValueInPath(currentValues, propertyKey);
-            const property = getPropertyFromKey(properties, propertyKey);
-
-            if (!property || suggestion === null || property?.disabled) {
-                return;
-            }
-
-            if (typeof suggestion === "number") {
-                formContext?.setFieldValue(propertyKey, suggestion);
-                return;
-            }
-
-            if (replaceValues) {
-                formContext?.setFieldValue(propertyKey, suggestion);
-                return;
-            }
-
-            const appendableValue = getAppendableSuggestion(suggestion, value);
+        const labelFor = (key: string) => currentProperties[key]?.name ?? key;
 
-            const currentValue = value ? (value as string) + "" : "";
-            if (appendableValue) {
-                formContext?.setFieldValue(propertyKey, suggestion);
-            } else {
-                const multiline = property?.fieldConfigId === "multiline" || property?.fieldConfigId === "markdown";
-                const trimmedValue = currentValue.trimEnd();
-                if (multiline && (trimmedValue.endsWith(".") || trimmedValue.endsWith("?") || trimmedValue.endsWith("!") || trimmedValue.endsWith(":"))) {
-                    formContext?.setFieldValue(propertyKey, trimmedValue + "\n\n" + (suggestion as string).trimStart());
-                } else {
-                    formContext?.setFieldValue(propertyKey, trimmedValue + (trimmedValue.length > 0 ? " " : "") + (suggestion as string));
+        try {
+            await autofillStream({
+                endpoint,
+                request: {
+                    entityName: collection.singularName ?? collection.name,
+                    entityDescription: collection.description,
+                    // Flattened to dotted paths so the keys line up with the
+                    // property map: the service is told about `seo.title`, so it
+                    // has to be told the value of `seo.title` too, not of `seo`.
+                    values: flatValues,
+                    properties: currentProperties,
+                    propertyKey: params.propertyKey,
+                    propertyInstructions: params.propertyInstructions,
+                    instructions: params.instructions
+                },
+                onDelta: (key, text) => {
+                    upsertField(key, (existing) => existing
+                        ? { ...existing,
+proposed: String(existing.proposed ?? "") + text }
+                        : {
+                            key,
+                            label: labelFor(key),
+                            currentValue: getValueInPath(params.values, key),
+                            proposed: text,
+                            pending: true,
+                            selected: true
+                        });
+                },
+                onValue: (key, value) => {
+                    const coerced = coerceToProperty(value, getPropertyFromKey(currentProperties, key));
+                    upsertField(key, (existing) => ({
+                        key,
+                        label: existing?.label ?? labelFor(key),
+                        currentValue: existing?.currentValue ?? getValueInPath(params.values, key),
+                        proposed: coerced,
+                        pending: false,
+                        // A row the operator already deselected mid-stream stays
+                        // deselected when its final value lands.
+                        selected: existing?.selected ?? true
+                    }));
                 }
-            }
-        });
-
-        setSuggestions(prev => ({
-            ...prev,
-            ...Object.keys(updatedValues)
-                .reduce((acc, key) => {
-                    const value = getValueInPath(formContext?.values, key);
-                    const suggestion = updatedValues[key];
-                    return {
-                        ...acc,
-                        [key]: getAppendableSuggestion(suggestion, value) ?? suggestion
-                    };
-                }, {})
-        }));
-    }, [properties, formContext]);
-
-    const displayNeededSubscriptionSnackbar = useCallback((projectId: unknown) => {
-        snackbarController.open({
-            type: "warning",
-            message: "A valid subscription is needed in order to use this function.",
-            autoHideDuration: 4000
-        });
-    }, [snackbarController]);
-
-    const editorAIController = useEditorAIController({ getAuthToken: authController.getAuthToken });
-
-    const clearAllSuggestions = useCallback(() => {
-        setSuggestions({});
-    }, []);
-
-    const enhance = useCallback(async (props: EnhanceParams<Record<string, unknown>>): Promise<EnhancedDataResult | null> => {
-
-        if (!authController.user) {
-            snackbarController.open({
-                type: "warning",
-                message: "You need to be logged in to enhance data"
             });
-            return Promise.reject(new Error("Not logged in"));
-        }
 
-        const resolvedPath = urlController.resolveDatabasePathsFrom(path);
-        const firebaseToken = await authController.getAuthToken();
-
-        if (props.propertyKey) {
-            clearSuggestion(props.propertyKey)
-        } else {
-            clearAllSuggestions();
+            setReview((current) => current && {
+                ...current,
+                status: "ready",
+                fields: current.fields.map((f) => ({ ...f,
+pending: false }))
+            });
+        } catch (e: unknown) {
+            const message = e instanceof Error ? e.message : "Autofill could not be completed";
+            // Kept in the review rather than fired into a snackbar: a run that
+            // produced three good fields and then failed should still let the
+            // operator apply the three.
+            setReview((current) => current && {
+                ...current,
+                status: "failed",
+                error: message,
+                fields: current.fields.map((f) => ({ ...f,
+pending: false }))
+            });
         }
+    }, [collection, endpoint, upsertField]);
 
-        setLoadingSuggestions((prev) => [...prev, ...(props.propertyKey ? [props.propertyKey] : Object.keys(properties))]);
-        enhancingInProgress.current = true;
-
-        const currentValues = valuesRef.current ?? {};
+    const toggleField = useCallback((key: string) => {
+        setReview((current) => current && {
+            ...current,
+            fields: current.fields.map((f) => (f.key === key ? { ...f,
+selected: !f.selected } : f))
+        });
+    }, []);
 
-        return new Promise((resolve, reject) => {
-            function onError(e: unknown) {
-                setLoadingSuggestions([]);
-                const err = e instanceof Error ? e : typeof e === "object" && e !== null ? e : new Error(String(e));
-                const errorObj = err as Record<string, unknown>;
-                if (errorObj.code === "payment-required") {
-                    const data = errorObj.data as Record<string, unknown> | undefined;
-                    const projectId = data?.projectId;
-                    displayNeededSubscriptionSnackbar(projectId);
-                } else {
-                    console.error("Enhance error", e);
-                }
-                reject(e);
-                enhancingInProgress.current = false;
-            }
+    const toggleAll = useCallback((selected: boolean) => {
+        setReview((current) => current && {
+            ...current,
+            fields: current.fields.map((f) => ({ ...f,
+selected }))
+        });
+    }, []);
 
-            try {
-                enhanceDataAPIStream({
-                    ...props,
-                    host,
-                    apiKey,
-                    properties,
-                    path: resolvedPath,
-                    entityName: collection.singularName ?? collection.name,
-                    entityDescription: collection.description,
+    const dismissReview = useCallback(() => setReview(null), []);
 
-                    firebaseToken,
-                    onUpdate: (suggestions) => {
-                        console.debug("de onUpdate", suggestions);
-                        updateSuggestedValues(currentValues, suggestions, props.replaceValues ?? false);
-                    },
-                    onUpdateDelta: (propertyKey: string, partialValue: string) => {
-                        // console.debug("de delta", propertyKey, partialValue);
-                        appendValueDelta(propertyKey, partialValue);
-                    },
-                    onError,
-                    onEnd: (result) => {
-                        console.debug("de onEnd", result);
-                        if (result.errors) {
-                            result.errors.forEach((error) => {
-                                snackbarController.open({
-                                    type: "warning",
-                                    message: error
-                                })
-                            });
-                        }
-                        if (Object.keys(result.suggestions).length === 0) {
-                            snackbarController.open({
-                                type: "info",
-                                autoHideDuration: 1800,
-                                message: "No fields were updated"
-                            })
-                        }
-                        setLoadingSuggestions([]);
-                        resolve(result);
-                        enhancingInProgress.current = false;
-                    }
-                }).catch(onError);
-            } catch (e: unknown) {
-                onError(e);
+    const applyReview = useCallback(() => {
+        setReview((current) => {
+            if (!current) return null;
+            for (const field of current.fields) {
+                if (!field.selected || field.pending) continue;
+                if (field.proposed === undefined || field.proposed === null) continue;
+                formContext?.setFieldValue(field.key, field.proposed);
             }
+            return null;
         });
-    }, [
-        authController, urlController, path, clearSuggestion, clearAllSuggestions,
-        properties, host, apiKey, collection, updateSuggestedValues, appendValueDelta, displayNeededSubscriptionSnackbar, snackbarController
-    ]);
+    }, [formContext]);
 
-    const getSamplePrompts = useCallback(async (entityName: string, input?: string) => {
-        const firebaseToken = await authController.getAuthToken()
-        return fetchEntityPromptSuggestion({
-            host,
-            entityName,
-            firebaseToken,
-            apiKey,
-            input
-        });
-    }, [apiKey, authController.getAuthToken, host]);
+    const editorAIController = useEditorAIController({ endpoint });
+
+    const getSamplePrompts = useCallback(
+        (entityName: string, input?: string) => fetchPromptSuggestions({ endpoint,
+entityName,
+input }),
+        [endpoint]
+    );
 
     const dataEnhancementController: DataEnhancementController = useMemo(() => ({
         enabled,
-        suggestions,
-        clearSuggestion,
-        enhance,
-        allowReferenceDataSelection,
-        clearAllSuggestions,
+        review,
+        generate,
+        toggleField,
+        toggleAll,
+        applyReview,
+        dismissReview,
         getSamplePrompts,
-        loadingSuggestions,
         editorAIController
     }), [
         enabled,
-        suggestions,
-        clearSuggestion,
-        enhance,
-        allowReferenceDataSelection,
-        clearAllSuggestions,
+        review,
+        generate,
+        toggleField,
+        toggleAll,
+        applyReview,
+        dismissReview,
         getSamplePrompts,
-        loadingSuggestions,
         editorAIController
     ]);
 
@@ -339,5 +273,3 @@ export function DataEnhancementControllerProvider({
         </DataEnhancementControllerContext.Provider>
     );
 }
-
-