@rebasepro/plugin-ai 0.17.3-canary.gdd23447 → 0.18.0

package/src/components/DataEnhancementControllerProvider.tsx

@@ -1,320 +0,0 @@
-import React, { PropsWithChildren, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-
-import {
-    AutofillReview,
-    DataEnhancementController,
-    GenerateParams,
-    InputProperty,
-    ProposedField
-} from "../types/data_enhancement_controller";
-import { CollectionConfig, User } from "@rebasepro/types";
-import { PluginFormActionProps } from "@rebasepro/cms-types";
-import { useAuthController } from "@rebasepro/app";
-import { autofillStream, fetchAiStatusCached, fetchPromptSuggestions } from "../api";
-import { getSimplifiedProperties } from "../utils/properties";
-import { flatMapEntityValues, omitDisabledValues } from "../utils/values";
-import { useEditorAIController } from "../editor/useEditorAIController";
-import { getValueInPath } from "@rebasepro/utils";
-
-const DataEnhancementControllerContext = React.createContext<DataEnhancementController>(null! as DataEnhancementController);
-
-type DataEnhancementControllerProviderProps = {
-
-    /**
-     * Kept in step with `DataEnhancementPluginProps.getConfigForPath`, which is
-     * the signature the host app actually writes against: the plugin hands this
-     * component through as `ComponentType<any>`, so nothing but agreement here
-     * makes the two match.
-     */
-    getConfigForPath?: (props: {
-        path: string,
-        collection: CollectionConfig,
-        user: User | null
-    }) => boolean;
-
-    endpoint?: string;
-}
-
-export const useDataEnhancementController = (): DataEnhancementController => useContext(DataEnhancementControllerContext);
-
-function getPropertyFromKey(properties: Record<string, InputProperty>, propertyKey: string): InputProperty | undefined {
-    if (propertyKey in properties) {
-        return properties[propertyKey];
-    }
-    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({
-    getConfigForPath,
-    children,
-    endpoint,
-    path,
-    collection,
-    formContext
-}: PropsWithChildren<DataEnhancementControllerProviderProps & PluginFormActionProps>) {
-
-    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 ?? {}),
-        [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.
-     *
-     * `user` is part of the documented signature and was never passed, so
-     * `getConfigForPath: ({ user }) => user?.roles?.includes("editor")` was
-     * `Boolean(undefined)` for everyone — an access rule that silently decided
-     * nothing, in whichever direction the host had written it.
-     */
-    const authController = useAuthController();
-    const user: User | null = authController?.user ?? null;
-
-    useEffect(() => {
-        if (!getConfigForPath) {
-            setAllowedHere(true);
-            return;
-        }
-        setAllowedHere(Boolean(getConfigForPath({ path,
-collection,
-user })));
-    }, [getConfigForPath, path, collection, user]);
-
-    /**
-     * 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.
-     *
-     * Asked through the session cache: this provider is form-scoped, so an
-     * uncached probe is one request to the host per record opened, by an install
-     * that may never use the feature. The probe is shared rather than aborted on
-     * unmount — cancelling it would cancel it for whatever else is waiting on the
-     * same answer — so unmounting only stops this component from reading it.
-     */
-    useEffect(() => {
-        if (!allowedHere) return;
-        let cancelled = false;
-        fetchAiStatusCached({ endpoint })
-            .then((status) => {
-                if (!cancelled) setServiceAvailable(status.available);
-            });
-        return () => {
-            cancelled = true;
-        };
-    }, [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 generate = useCallback(async (params: GenerateParams<Record<string, unknown>>): Promise<void> => {
-
-        const currentProperties = propertiesRef.current;
-        const flatValues = omitDisabledValues(
-            flatMapEntityValues(params.values ?? {}),
-            currentProperties
-        );
-
-        setReview({
-            status: "generating",
-            fields: [],
-            instructions: params.instructions
-        });
-
-        const labelFor = (key: string) => currentProperties[key]?.name ?? key;
-
-        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`.
-                    // Exactly the same rule in both directions — an array or a
-                    // date is one value under one key here because it is one
-                    // property under one key there. Where they disagreed, the
-                    // service read a filled field as empty and offered to
-                    // rewrite it. Values of properties nobody may edit do not
-                    // travel at all.
-                    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
-                    }));
-                }
-            });
-
-            setReview((current) => current && {
-                ...current,
-                status: "ready",
-                // Fields still pending when the run ended never received a final
-                // value — the model's JSON was cut off mid-string, so all we
-                // hold is a half-written sentence. Marking them complete would
-                // make that sentence applicable, which is the exact outcome the
-                // review exists to prevent. They are dropped instead: the review
-                // only ever offers what the service actually finished.
-                fields: current.fields.filter((f) => !f.pending)
-            });
-        } 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,
-                // Same rule as the success path: a field interrupted mid-write
-                // is not something the operator can be offered.
-                fields: current.fields.filter((f) => !f.pending)
-            });
-        }
-    }, [collection, endpoint, upsertField]);
-
-    const toggleField = useCallback((key: string) => {
-        setReview((current) => current && {
-            ...current,
-            fields: current.fields.map((f) => (f.key === key ? { ...f,
-selected: !f.selected } : f))
-        });
-    }, []);
-
-    const toggleAll = useCallback((selected: boolean) => {
-        setReview((current) => current && {
-            ...current,
-            fields: current.fields.map((f) => ({ ...f,
-selected }))
-        });
-    }, []);
-
-    const dismissReview = useCallback(() => setReview(null), []);
-
-    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;
-        });
-    }, [formContext]);
-
-    const editorAIController = useEditorAIController({ endpoint });
-
-    const getSamplePrompts = useCallback(
-        (entityName: string, input?: string) => fetchPromptSuggestions({
-            endpoint,
-            entityName,
-            entityDescription: collection.description,
-            input
-        }),
-        [endpoint, collection.description]
-    );
-
-    const dataEnhancementController: DataEnhancementController = useMemo(() => ({
-        enabled,
-        review,
-        generate,
-        toggleField,
-        toggleAll,
-        applyReview,
-        dismissReview,
-        getSamplePrompts,
-        editorAIController
-    }), [
-        enabled,
-        review,
-        generate,
-        toggleField,
-        toggleAll,
-        applyReview,
-        dismissReview,
-        getSamplePrompts,
-        editorAIController
-    ]);
-
-    return (
-        <DataEnhancementControllerContext.Provider
-            value={dataEnhancementController}>
-            {children}
-        </DataEnhancementControllerContext.Provider>
-    );
-}

package/src/components/FormEnhanceAction.tsx

@@ -1,307 +0,0 @@
-import React, { useCallback, useEffect, useRef } from "react";
-
-import {
-    CircularProgress,
-    cls,
-    fieldBackgroundMixin,
-    focusedDisabled,
-    IconButton,
-    iconSize,
-    Menu,
-    MenuItem,
-    SendIcon,
-    Separator,
-    TextareaAutosize,
-    XIcon
-} from "@rebasepro/ui";
-import {
-    AIIcon
-} from "@rebasepro/app";
-import { EntityStatus, Properties, Property } from "@rebasepro/types";
-import { PluginFormActionProps } from "@rebasepro/cms-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({
-    path,
-    status,
-    collection,
-    formContext
-}: PluginFormActionProps) {
-
-    const storageKey = createLocalStorageKey(path, status);
-
-    const dataEnhancementController = useDataEnhancementController();
-
-    const [samplePrompts, setSamplePrompts] = React.useState<SamplePrompt[] | undefined>(undefined);
-    const [instructions, setInstructions] = React.useState<string>("");
-
-    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;
-        if (loadingPrompts.current) return;
-        loadingPrompts.current = true;
-        const prompts = status === "new"
-            ? (await getSamplePrompts(collection.singularName ?? collection.name, instructions)).prompts
-            : getPromptsForExistingEntities(collection.properties);
-
-        const recentPromptsFromStorage = getRecentPromptsFromStorage(storageKey);
-        const recentPrompts = recentPromptsFromStorage.map(prompt => prompt.prompt);
-        setSamplePrompts([...recentPromptsFromStorage, ...prompts.filter(p => !recentPrompts.includes(p.prompt))].slice(0, 5));
-        loadingPrompts.current = false;
-    },
-        [collection.name, collection.singularName, getSamplePrompts, status]);
-
-    useEffect(() => {
-        if (!dataEnhancementController) return;
-        if (!samplePrompts) {
-            setSamplePrompts(getRecentPromptsFromStorage(storageKey));
-            updateSuggestedPrompts().then();
-        }
-    }, [dataEnhancementController, samplePrompts, storageKey, updateSuggestedPrompts, instructions, status]);
-
-    useEffect(() => {
-        if (!dataEnhancementController) return;
-        updateSuggestedPrompts().then();
-    }, [dataEnhancementController, status]);
-
-    /**
-     * 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;
-        if (prompt) {
-            addRecentPrompt(storageKey, prompt);
-            setSamplePrompts([{
-                prompt,
-                type: "recent"
-            }, ...(samplePrompts ?? []).slice(0, 5)]);
-        }
-        // 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;
-
-    function submit() {
-        generate(instructions);
-    }
-
-    return (
-        <>
-            <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.
-                // Icon only. The label is carried by `aria-label`/`title` — a
-                // `Tooltip` here would swallow the menu: both it and
-                // `DropdownMenu.Trigger` render `asChild`, and `Tooltip` drops
-                // the props Radix clones onto it, so the menu never opens.
-                trigger={<IconButton variant={"filled"}
-                    size={"small"}
-                    aria-label={"Autofill"}
-                    title={"Autofill"}
-                    disabled={loading}>
-                    {!loading && <AIIcon size={"small"}/>}
-                    {loading && <CircularProgress size={"small"}/>}
-                </IconButton>}>
-
-                <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);
-                        }}
-                    >
-                        <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>
-
-                    <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>
-
-                </div>
-
-            </Menu>
-
-            <AutofillReviewDialog/>
-        </>
-    );
-}
-
-function getPromptsForExistingEntities(properties: Properties): SamplePrompt[] {
-
-    const multilineProperties = Object.values(properties).filter((p: Property) => {
-        if (isPropertyBuilder(p)) {
-            return false;
-        }
-        return p.type === "string" && (p.admin?.markdown || p.admin?.multiline);
-    });
-
-    const multilinePrompt: Property | undefined = multilineProperties.length > 0
-        ? multilineProperties[Math.floor(Math.random() * multilineProperties.length)] as Property
-        : undefined;
-
-    const prompts = [
-        "Fill the missing fields",
-        "Translate the missing content"
-    ];
-    if (multilinePrompt) {
-        prompts.push(`Add 2 paragraphs to '${multilinePrompt.name}'`);
-    }
-    return prompts.map(p => ({
-        prompt: p,
-        type: "sample"
-    }));
-}
-
-const createLocalStorageKey = (path: string, status: EntityStatus) => {
-    const statusString = status === "new" ? "new" : "existing";
-    return `data_enhancement::${statusString}::${stripCollectionPath(path)}`;
-};
-
-const getRecentPromptsFromStorage = (storageKey: string): SamplePrompt[] => {
-    const item = localStorage.getItem(storageKey);
-    return item ? JSON.parse(item).map((e: string) => ({
-        prompt: e,
-        type: "recent"
-    })) : [];
-};
-
-const addRecentPrompt = (storageKey: string, prompt: string) => {
-    if (!prompt || prompt.trim().length === 0) {
-        return;
-    }
-    const recentPrompts = getRecentPromptsFromStorage(storageKey);
-    localStorage.setItem(storageKey, JSON.stringify([prompt, ...recentPrompts
-        .map(e => e.prompt)
-        .filter(e => e !== prompt)
-        .slice(0, 5)]));
-};
-
-const removeRecentPrompt = (storageKey: string, prompt: string) => {
-    localStorage.setItem(storageKey, JSON.stringify(getRecentPromptsFromStorage(storageKey)
-        .map(e => e.prompt)
-        .filter(e => e !== prompt)));
-};

package/src/editor/useEditorAIController.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import { autocompleteStream } from "../api";
-import { EditorAIController } from "@rebasepro/cms";
-
-/**
- * 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]);
-}

package/src/index.ts

@@ -1,9 +0,0 @@
-export {
-    useDataEnhancementPlugin
-} from "./useDataEnhancementPlugin";
-export type {
-    DataEnhancementPluginProps
-} from "./useDataEnhancementPlugin";
-
-
-export * from "./editor/useEditorAIController";