@rebasepro/plugin-ai 0.0.1-canary.4829d6e

package/src/components/DataEnhancementControllerProvider.tsx

@@ -0,0 +1,342 @@
+import React, { PropsWithChildren, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+
+import {
+    DataEnhancementController,
+    EnhancedDataResult,
+    EnhanceParams,
+    InputProperty
+} from "../types/data_enhancement_controller";
+import {
+    useAuthController,
+    useCustomizationController,
+    useSnackbarController
+} from "@rebasepro/app";
+import { useUrlController } from "@rebasepro/admin";
+import { DataDriver, Entity, CollectionConfig, PluginFormActionProps } from "@rebasepro/types";
+import { enhanceDataAPIStream, fetchEntityPromptSuggestion } from "../api";
+import { getAppendableSuggestion } from "../utils/suggestions";
+import { getSimplifiedProperties } from "../utils/properties";
+import { useEditorAIController } from "../editor/useEditorAIController";
+import { getValueInPath } from "@rebasepro/utils";
+
+const DataEnhancementControllerContext = React.createContext<DataEnhancementController>(null! as DataEnhancementController);
+
+type DataEnhancementControllerProviderProps = {
+
+    apiKey: string;
+
+    getConfigForPath?: (props: {
+        path: string,
+        collection: CollectionConfig
+    }) => boolean;
+
+    host?: string;
+}
+
+export const useDataEnhancementController = (): DataEnhancementController => useContext(DataEnhancementControllerContext);
+
+function getPropertyFromKey(properties: Record<string, InputProperty>, propertyKey: string) {
+    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);
+
+    }
+}
+
+export function DataEnhancementControllerProvider({
+    apiKey,
+    getConfigForPath,
+    children,
+    host,
+    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 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]);
+
+    useEffect(() => {
+        if (!getConfigForPath) {
+            setEnabled(true);
+        } else {
+            updateConfig();
+        }
+
+    }, [getConfigForPath, updateConfig]);
+
+
+    const urlController = useUrlController();
+
+    const clearSuggestion = useCallback((propertyKey: string) => {
+        setSuggestions((prev) => {
+            //remove propertyKey from prev
+            const {
+                [propertyKey]: _,
+                ...rest
+            } = prev;
+            return rest;
+        });
+    }, []);
+
+    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 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 updateSuggestedValues = useCallback((currentValues: object, updatedValues: Record<string, string | number>, replaceValues: boolean) => {
+
+        setLoadingSuggestions((prev) => {
+            return prev.filter(p => !Object.keys(updatedValues).includes(p));
+        });
+
+        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 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));
+                }
+            }
+        });
+
+        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();
+        }
+
+        setLoadingSuggestions((prev) => [...prev, ...(props.propertyKey ? [props.propertyKey] : Object.keys(properties))]);
+        enhancingInProgress.current = true;
+
+        const currentValues = valuesRef.current ?? {};
+
+        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;
+            }
+
+            try {
+                enhanceDataAPIStream({
+                    ...props,
+                    host,
+                    apiKey,
+                    properties,
+                    path: resolvedPath,
+                    entityName: collection.singularName ?? collection.name,
+                    entityDescription: collection.description,
+
+                    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);
+            }
+        });
+    }, [
+        authController, urlController, path, clearSuggestion, clearAllSuggestions,
+        properties, host, apiKey, collection, updateSuggestedValues, appendValueDelta, displayNeededSubscriptionSnackbar, snackbarController
+    ]);
+
+    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 dataEnhancementController: DataEnhancementController = useMemo(() => ({
+        enabled,
+        suggestions,
+        clearSuggestion,
+        enhance,
+        allowReferenceDataSelection,
+        clearAllSuggestions,
+        getSamplePrompts,
+        loadingSuggestions,
+        editorAIController
+    }), [
+        enabled,
+        suggestions,
+        clearSuggestion,
+        enhance,
+        allowReferenceDataSelection,
+        clearAllSuggestions,
+        getSamplePrompts,
+        loadingSuggestions,
+        editorAIController
+    ]);
+
+    return (
+        <DataEnhancementControllerContext.Provider
+            value={dataEnhancementController}>
+            {children}
+        </DataEnhancementControllerContext.Provider>
+    );
+}
+
+

package/src/components/FormEnhanceAction.tsx

@@ -0,0 +1,277 @@
+
+import React, { useCallback, useDeferredValue, useEffect, useRef } from "react";
+
+import {
+    Button,
+    CircularProgress,
+    cls,
+    focusedDisabled,
+    IconButton,
+    iconSize,
+    Menu,
+    MenuItem,
+    SendIcon,
+    Separator,
+    TextareaAutosize,
+    XIcon
+} from "@rebasepro/ui";
+import {
+    AIIcon,
+    useLargeLayout
+} from "@rebasepro/app";
+import { EntityStatus, PluginFormActionProps, Properties, Property } from "@rebasepro/types";
+import { isPropertyBuilder, stripCollectionPath } from "@rebasepro/common";
+import { useDataEnhancementController } from "./DataEnhancementControllerProvider";
+import { SamplePrompt } from "../types/data_enhancement_controller";
+
+export function FormEnhanceAction({
+    entityId,
+    path,
+    status,
+    collection,
+    formContext,
+    openEntityMode
+}: 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);
+    const [instructions, setInstructions] = React.useState<string>("");
+
+    const getSamplePrompts = dataEnhancementController?.getSamplePrompts;
+
+    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]);
+
+    const deferredValues = useDeferredValue(formContext?.values);
+    // const enoughData = countStringCharacters(deferredValues, collection.properties) > 20;
+
+    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]);
+
+    const enhance = (prompt?: string) => {
+        if (!dataEnhancementController || !formContext?.values) return;
+        setLoading(true);
+        if (prompt) {
+            addRecentPrompt(storageKey, prompt);
+            setSamplePrompts([{
+                prompt,
+                type: "recent"
+            }, ...(samplePrompts ?? []).slice(0, 5)]);
+        }
+        return dataEnhancementController.enhance({
+            entityId,
+            values: formContext!.values,
+            instructions: prompt,
+            replaceValues: true
+        }).finally(() => {
+            setLoading(false);
+        });
+    };
+
+    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);
+    }
+
+    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>
+
+                    {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);
+                    }}
+                />
+
+                <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>
+
+        </Menu>
+    );
+}
+
+function getPromptsForExistingEntities(properties: Properties): SamplePrompt[] {
+
+    const multilineProperties = Object.values(properties).filter((p: Property) => {
+        if (isPropertyBuilder(p)) {
+            return false;
+        }
+        return p.type === "string" && (p.ui?.markdown || p.ui?.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

@@ -0,0 +1,37 @@
+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
+    };
+}
+
+// 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/index.ts

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