@rebasepro/plugin-data-enhancement 0.0.1-canary.4d4fb3e

package/src/components/fields/AdvancedTextField.tsx

@@ -0,0 +1,200 @@
+import React, { useCallback, useEffect, useRef } from "react";
+
+import {
+    cls,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundMixin,
+    InputLabel,
+    TextareaAutosize,
+    TextField
+} from "@rebasepro/ui";
+
+export type AdvancedInputType<T> = T extends string ? "text" : "number";
+
+export function AdvancedTextField({
+    value,
+    setValue,
+    label,
+    inputType,
+    multiline = false,
+    highlight,
+    disabled,
+    error,
+    size = "large",
+    className
+}: {
+    inputType: AdvancedInputType<string | number>,
+    value: string | number,
+    setValue: (value: string | number | null) => void,
+    highlight?: string,
+    label: React.ReactNode,
+    multiline?: boolean,
+    disabled?: boolean,
+    error?: boolean,
+    size?: "smallest" | "small" | "medium" | "large",
+    className?: string,
+}) {
+
+    const inputRef = useRef(null);
+    const ref = useRef<HTMLDivElement>(null);
+
+    const [internalValue, setInternalValue] = React.useState<string>(value ? value.toString() : "");
+
+    useEffect(() => {
+        setInternalValue(value ? value.toString() : "");
+    }, [value]);
+
+    const onScroll = useCallback((e: any) => {
+        if (!ref.current) return;
+        ref.current.scrollTop = e.target.scrollTop;
+        ref.current.scrollLeft = e.target.scrollLeft;
+    }, []);
+
+    const [focused, setFocused] = React.useState(document.activeElement === inputRef.current);
+
+    const hasValue = internalValue !== undefined && internalValue !== null && internalValue !== "";
+
+    const endsWithHighlight = !!highlight && (value === highlight || String(value).endsWith(highlight));
+    const originalValue = endsWithHighlight
+        ? String(value).substring(0, String(value).length - highlight.length)
+        : internalValue;
+
+    const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const stringValue = event.target.value;
+        if (inputType === "number") {
+            if (stringValue === "-" || stringValue.startsWith(".") || stringValue.endsWith(".")) {
+                setInternalValue(stringValue);
+            } else {
+                const numberValue = stringValue ? parseFloat(stringValue) : undefined;
+                if (numberValue && isNaN(numberValue)) {
+                    setValue(null);
+                    setInternalValue("");
+                } else if (numberValue !== undefined && numberValue !== null) {
+                    setValue(numberValue as string | number);
+                    setInternalValue(numberValue.toString());
+                } else {
+                    setValue(null);
+                    setInternalValue("");
+                }
+            }
+        } else {
+            setValue(stringValue as string | number);
+            setInternalValue(stringValue);
+        }
+    }, [inputType, setValue]);
+
+    const numberInputOnWheelPreventChange = useCallback((e: any) => {
+        e.target.blur()
+        e.stopPropagation()
+        setTimeout(() => {
+            e.target.focus()
+        }, 0)
+    }, []);
+
+    if (disabled) {
+        return <TextField label={label}
+            disabled={true}
+            value={internalValue} />
+    }
+
+    const additional: any = {
+        onKeyPress: (e: any) => {
+            // if (e.key === "Enter") {
+            //     e.preventDefault();
+            //     e.stopPropagation();
+            // }
+            if (!multiline && e.key === "Enter") {
+                e.preventDefault();
+            }
+        }
+    }
+
+    return (
+        <div className={cls(
+            "rounded-md relative max-w-full",
+            fieldBackgroundMixin,
+            disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+            error ? "border border-red-500 dark:border-red-600" : "",
+            {
+                "min-h-[28px]": size === "smallest",
+                "min-h-[32px]": size === "small",
+                "min-h-[44px]": size === "medium",
+                "min-h-[64px]": size === "large",
+            },
+            className)}>
+
+            {label && (
+                <InputLabel
+                    className={cls("absolute pointer-events-none",
+                        !error ? (focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark") : "text-red-500 dark:text-red-600",
+                        disabled ? "opacity-50" : "",
+                        size === "large" ? "top-1" : "-top-px")}
+                    shrink={hasValue || focused}
+                >
+                    {label}
+                </InputLabel>
+            )}
+
+            <div ref={ref}
+                className={cls("inset-0 whitespace-pre-wrap overflow-x-auto select-none pb-2 px-3",
+                    {
+                        "pt-8": size === "large",
+                        "pt-4": size === "medium" || size === "small",
+                    })}>
+
+                {addLineBreaks(originalValue, !endsWithHighlight && multiline)}
+
+                {endsWithHighlight &&
+                    <span className="dark:bg-surface-700 bg-surface-300 p-px -m-px rounded-xs">
+                        {addLineBreaks(highlight, multiline)}
+                    </span>}
+
+            </div>
+
+            <TextareaAutosize
+                className={cls(
+                    {
+                        "min-h-[28px]": size === "smallest",
+                        "min-h-[32px]": size === "small",
+                        "min-h-[44px]": size === "medium",
+                        "min-h-[64px]": size === "large",
+                    },
+                    "rounded-md resize-none w-full outline-hidden text-base bg-transparent ",
+                    disabled && "border border-transparent outline-hidden opacity-50 text-surface-600 dark:text-surface-500",
+                    "absolute top-0 right-0 left-0 max-w-full bg-transparent text-transparent caret-text-primary dark:caret-text-primary-dark",
+                    "pt-8 pb-2 px-3",
+                    label ? (size === "large" ? "pt-8 pb-2" : "pt-4 pb-2") : "py-2"
+                )}
+                ignoreBoxSizing={true}
+                ref={inputRef}
+                onFocus={() => setFocused(true)}
+                onBlur={() => setFocused(false)}
+                value={internalValue}
+                sizeRef={ref}
+                onChange={onChange}
+                onScroll={onScroll}
+                {...additional} />
+
+        </div>
+    );
+}
+
+function addLineBreaks(value?: string | number, addLastBreak = false) {
+    if (typeof value === "number" || value === undefined)
+        return value;
+    if (typeof value !== "string") {
+        console.error("addLineBreaks: value is not a string", value)
+        return "";
+    }
+    const lines = value.split("\n");
+    if (lines.length === 1)
+        return <span className="break-words"
+        >{value ?? " "}</span>;
+    // @ts-ignore
+    return lines.map((p, i) => <React.Fragment key={i}>
+        <span className="break-words"
+        >{p ?? " "}</span>
+        {(lines.length - 1 !== i || addLastBreak) && <br />}
+    </React.Fragment>);
+}

package/src/components/fields/EnhanceTextField.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { deepEqual as equal } from "fast-equals"
+
+import { FieldHelperText, LabelWithIconAndTooltip, PropertyIdCopyTooltip, useClearRestoreValue, getIconForProperty } from "@rebasepro/cms";
+import { FieldProps, NumberProperty, StringProperty } from "@rebasepro/types";
+import { AdvancedTextField } from "./AdvancedTextField";
+
+/**
+ * Generic text field.
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export const EnhanceTextFieldBinding = React.memo(function EnhanceTextFieldBinding({
+    propertyKey,
+    value,
+    setValue,
+    error,
+    showError,
+    disabled,
+    autoFocus,
+    property,
+    includeDescription,
+    highlight,
+    size
+}: FieldProps<StringProperty | NumberProperty> & {
+    highlight?: string
+}) {
+
+    let multiline: boolean | undefined = false;
+    if (property.type === "string") {
+        multiline = (property.multiline || property.markdown) ?? false;
+    }
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const internalValue: string | number = value ?? (property.type === "string" ? "" : value === 0 ? 0 : "");
+
+    return (
+        <>
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                <AdvancedTextField
+                    inputType={property.type === "number" ? "number" : "text"}
+                    label={<LabelWithIconAndTooltip
+                        propertyKey={propertyKey}
+                        icon={getIconForProperty(property)}
+                        title={(property.name ?? "") + (property.validation?.required ? " *" : "")}
+                    />}
+                    value={internalValue}
+                    multiline={multiline}
+                    highlight={highlight}
+                    setValue={setValue}
+                    disabled={disabled}
+                    error={showError}
+                    size={size}
+                />
+
+            </PropertyIdCopyTooltip>
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property} />
+        </>
+    );
+
+}, (prevProps, nextProps) => {
+    return prevProps.value === nextProps.value &&
+        prevProps.error === nextProps.error &&
+        prevProps.showError === nextProps.showError &&
+        prevProps.disabled === nextProps.disabled &&
+        equal(prevProps.property, nextProps.property) &&
+        prevProps.highlight === nextProps.highlight;
+});

package/src/editor/useEditorAIController.tsx

@@ -0,0 +1,37 @@
+import { autocompleteStream } from "../api";
+import { EditorAIController } from "@rebasepro/cms";
+
+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,10 @@
+export {
+    useDataEnhancementPlugin
+} from "./useDataEnhancementPlugin";
+export type {
+    DataEnhancementPluginProps
+} from "./useDataEnhancementPlugin";
+
+export type { SubscriptionMessageProps } from "./types/subscriptions_message_props";
+
+export * from "./editor/useEditorAIController";

package/src/locales/de.ts

@@ -0,0 +1,21 @@
+export const dataEnhancementTranslationsDe = {
+    autofill: "Automatisch ausfüllen",
+    autofill_current_content: "Basierend auf dem aktuellen Inhalt automatisch ausfüllen",
+    set_id_first: "Bitte zuerst eine ID festlegen",
+    provide_instructions: "Anweisungen für die Datenerweiterung angeben",
+    fill_missing_fields: "Fehlende Felder ausfüllen",
+    translate_missing_content: "Fehlenden Inhalt übersetzen",
+    add_2_paragraphs_to: "2 Absätze zum Inhalt hinzufügen",
+    use_openai_generate_content: "Verwenden Sie Google Vertex AI oder OpenAI, um Inhalte automatisch zu generieren.",
+    autofill_this_field: "Dieses Feld automatisch ausfüllen",
+    autofill_property: "Eigenschaft automatisch ausfüllen",
+    input_data_before_enhancing: "Vor der Erweiterung Daten eingeben",
+    input_data_before_enhancing_property: "Sie müssen Daten in anderen Eigenschaften eingeben, bevor Sie diese erweitern können.",
+    based_on_rest_of_entity: "Basierend auf dem Rest der Entität",
+    this_field: "dieses Feld",
+    subscription_needed: "Für die Nutzung dieser Funktion ist ein gültiges Abonnement erforderlich.",
+    login_to_enhance: "Sie müssen angemeldet sein, um Daten zu erweitern",
+    no_fields_updated: "Keine Felder wurden aktualisiert",
+    ask_ai_to_write: "KI zum Schreiben auffordern",
+    instructions: "Anweisungen"
+};

package/src/locales/en.ts

@@ -0,0 +1,21 @@
+export const dataEnhancementTranslationsEn = {
+    autofill: "Autofill",
+    autofill_current_content: "Autofill based on current content",
+    set_id_first: "You must set an ID first",
+    provide_instructions: "Provide instructions to Data Enhancement",
+    fill_missing_fields: "Fill missing fields",
+    translate_missing_content: "Translate missing content",
+    add_2_paragraphs_to: "Add 2 paragraphs to the content",
+    use_openai_generate_content: "Use Google Vertex AI or OpenAI to generate content automatically.",
+    autofill_this_field: "Autofill this field",
+    autofill_property: "Autofill property",
+    input_data_before_enhancing: "Input some data before enhancing",
+    input_data_before_enhancing_property: "You need to input some data in other properties before enhancing this one.",
+    based_on_rest_of_entity: "Based on the rest of the entity",
+    this_field: "this field",
+    subscription_needed: "A valid subscription is needed in order to use this function.",
+    login_to_enhance: "You need to be logged in to enhance data",
+    no_fields_updated: "No fields were updated",
+    ask_ai_to_write: "Ask AI to write",
+    instructions: "Instructions"
+};

package/src/locales/es.ts

@@ -0,0 +1,21 @@
+export const dataEnhancementTranslationsEs = {
+    autofill: "Autocompletar",
+    autofill_current_content: "Autocompletar basado en el contenido actual",
+    set_id_first: "Debes establecer un ID primero",
+    provide_instructions: "Proporcionar instrucciones para Mejora de datos",
+    fill_missing_fields: "Llenar campos faltantes",
+    translate_missing_content: "Traducir contenido faltante",
+    add_2_paragraphs_to: "Añadir 2 párrafos al contenido",
+    use_openai_generate_content: "Usa Google Vertex AI u OpenAI para generar contenido automáticamente.",
+    autofill_this_field: "Autocompletar este campo",
+    autofill_property: "Propiedad de autocompletado",
+    input_data_before_enhancing: "Introduce algunos datos antes de mejorar el contenido",
+    input_data_before_enhancing_property: "Necesitas ingresar datos en otras propiedades antes de mejorar esta.",
+    based_on_rest_of_entity: "Basado en el resto de la entidad",
+    this_field: "este campo",
+    subscription_needed: "Se necesita una suscripción válida para usar esta función.",
+    login_to_enhance: "Necesitas iniciar sesión para mejorar datos",
+    no_fields_updated: "No se actualizaron campos",
+    ask_ai_to_write: "Pídele a la IA que escriba",
+    instructions: "Instrucciones"
+};

package/src/locales/fr.ts

@@ -0,0 +1,21 @@
+export const dataEnhancementTranslationsFr = {
+    autofill: "Remplissage automatique",
+    autofill_current_content: "Remplissage automatique basé sur le contenu actuel",
+    set_id_first: "Vous devez d'abord définir un identifiant",
+    provide_instructions: "Fournir des instructions pour l'amélioration des données",
+    fill_missing_fields: "Remplir les champs manquants",
+    translate_missing_content: "Traduire le contenu manquant",
+    add_2_paragraphs_to: "Ajouter 2 paragraphes au contenu",
+    use_openai_generate_content: "Utilisez Google Vertex AI ou OpenAI pour générer du contenu automatiquement.",
+    autofill_this_field: "Remplir automatiquement ce champ",
+    autofill_property: "Propriété de remplissage automatique",
+    input_data_before_enhancing: "Saisir des données avant l'amélioration",
+    input_data_before_enhancing_property: "Vous devez saisir des données dans d'autres propriétés avant d'améliorer celle-ci.",
+    based_on_rest_of_entity: "Basé sur le reste de l'entité",
+    this_field: "ce champ",
+    subscription_needed: "Un abonnement valide est nécessaire pour utiliser cette fonctionnalité.",
+    login_to_enhance: "Vous devez être connecté pour améliorer les données",
+    no_fields_updated: "Aucun champ n'a été mis à jour",
+    ask_ai_to_write: "Demander à l'IA d'écrire",
+    instructions: "Instructions"
+};

package/src/locales/hi.ts

@@ -0,0 +1,21 @@
+export const dataEnhancementTranslationsHi = {
+    autofill: "ऑटोफ़िल",
+    autofill_current_content: "वर्तमान सामग्री के आधार पर ऑटोफ़िल करें",
+    set_id_first: "पहले एक ID सेट करना आवश्यक है",
+    provide_instructions: "डेटा एन्हांसमेंट के लिए निर्देश प्रदान करें",
+    fill_missing_fields: "अनुपस्थित फ़ील्ड भरें",
+    translate_missing_content: "अनुपस्थित सामग्री अनुवाद करें",
+    add_2_paragraphs_to: "सामग्री में 2 पैराग्राफ जोड़ें",
+    use_openai_generate_content: "सामग्री स्वचालित रूप से जनरेट करने के लिए Google Vertex AI या OpenAI का उपयोग करें।",
+    autofill_this_field: "इस फ़ील्ड को ऑटोफ़िल करें",
+    autofill_property: "ऑटोफ़िल प्रॉपर्टी",
+    input_data_before_enhancing: "एन्हांस करने से पहले कुछ डेटा दर्ज करें",
+    input_data_before_enhancing_property: "इस प्रॉपर्टी को एन्हांस करने से पहले आपको अन्य प्रॉपर्टीज़ में डेटा दर्ज करना होगा।",
+    based_on_rest_of_entity: "एंटिटी के बाकी भाग के आधार पर",
+    this_field: "यह फ़ील्ड",
+    subscription_needed: "इस फ़ंक्शन का उपयोग करने के लिए एक वैध सब्सक्रिप्शन आवश्यक है।",
+    login_to_enhance: "डेटा एन्हांस करने के लिए लॉग इन करना आवश्यक है",
+    no_fields_updated: "कोई फ़ील्ड अपडेट नहीं हुई",
+    ask_ai_to_write: "AI से लिखने के लिए कहें",
+    instructions: "निर्देश"
+};

package/src/locales/it.ts

@@ -0,0 +1,21 @@
+export const dataEnhancementTranslationsIt = {
+    autofill: "Compilazione automatica",
+    autofill_current_content: "Compilazione automatica basata sul contenuto attuale",
+    set_id_first: "È necessario impostare prima un ID",
+    provide_instructions: "Fornisci istruzioni per il miglioramento dei dati",
+    fill_missing_fields: "Compila i campi mancanti",
+    translate_missing_content: "Traduci il contenuto mancante",
+    add_2_paragraphs_to: "Aggiungi 2 paragrafi al contenuto",
+    use_openai_generate_content: "Usa Google Vertex AI o OpenAI per generare contenuti automaticamente.",
+    autofill_this_field: "Compila automaticamente questo campo",
+    autofill_property: "Proprietà di compilazione automatica",
+    input_data_before_enhancing: "Inserisci alcuni dati prima di migliorare",
+    input_data_before_enhancing_property: "Devi inserire dati in altre proprietà prima di migliorare questa.",
+    based_on_rest_of_entity: "Basato sul resto dell'entità",
+    this_field: "questo campo",
+    subscription_needed: "È necessario un abbonamento valido per utilizzare questa funzione.",
+    login_to_enhance: "Devi essere connesso per migliorare i dati",
+    no_fields_updated: "Nessun campo è stato aggiornato",
+    ask_ai_to_write: "Chiedi all'IA di scrivere",
+    instructions: "Istruzioni"
+};

package/src/locales/pt.ts

@@ -0,0 +1,21 @@
+export const dataEnhancementTranslationsPt = {
+    autofill: "Preenchimento automático",
+    autofill_current_content: "Preencher automaticamente com base no conteúdo atual",
+    set_id_first: "Deve definir primeiro um ID",
+    provide_instructions: "Forneça instruções ao Data Enhancement",
+    fill_missing_fields: "Preencher campos em falta",
+    translate_missing_content: "Traduzir conteúdo em falta",
+    add_2_paragraphs_to: "Adicionar 2 parágrafos ao conteúdo",
+    use_openai_generate_content: "Use o Google Vertex AI ou OpenAI para gerar conteúdo automaticamente.",
+    autofill_this_field: "Preencher automaticamente este campo",
+    autofill_property: "Preencher propriedade automaticamente",
+    input_data_before_enhancing: "Introduza alguns dados antes de melhorar",
+    input_data_before_enhancing_property: "Precisa de introduzir alguns dados noutras propriedades antes de melhorar esta.",
+    based_on_rest_of_entity: "Com base no resto da entidade",
+    this_field: "este campo",
+    subscription_needed: "É necessária uma subscrição válida para usar esta função.",
+    login_to_enhance: "Precisa de iniciar sessão para melhorar os dados",
+    no_fields_updated: "Nenhum campo foi atualizado",
+    ask_ai_to_write: "Pedir à IA para escrever",
+    instructions: "Instruções"
+};

package/src/tests/diffStrings.test.ts

@@ -0,0 +1,128 @@
+// Import the diffStrings function from your module
+// import { diffStrings } from './your-module';
+
+import { Change, diffStrings } from "../utils/diffStrings";
+
+describe("diffStrings", () => {
+    test("equal strings", () => {
+        const oldStr = "This is a test string";
+        const newStr = "This is a test string";
+        const expected: Change[] = [
+            {
+                type: "equal",
+                value: "This is a test string"
+            }
+        ];
+        expect(diffStrings(oldStr, newStr)).toEqual(expected);
+    });
+
+    test("insertions only", () => {
+        const oldStr = "This is a test string";
+        const newStr = "This is a new test string";
+        const expected: Change[] = [
+            {
+                type: "equal",
+                value: "This is a"
+            },
+            {
+                type: "insert",
+                value: " new"
+            },
+            {
+                type: "equal",
+                value: " test string"
+            }
+        ];
+        expect(diffStrings(oldStr, newStr)).toEqual(expected);
+    });
+
+    test("deletions only", () => {
+        const oldStr = "This is an old test string";
+        const newStr = "This is a test string";
+        const expected: Change[] = [
+            {
+                type: "equal",
+                value: "This is a"
+            },
+            {
+                type: "delete",
+                value: "n old"
+            },
+            {
+                type: "equal",
+                value: " test string"
+            }
+        ];
+        expect(diffStrings(oldStr, newStr)).toEqual(expected);
+    });
+
+    test("insertions and deletions", () => {
+        const oldStr = "This is an old test string";
+        const newStr = "This is a new modified test string";
+        // The LCS algorithm finds the longest common substrings correctly
+        // Even though the output is more granular, it correctly represents the diff
+        const expected: Change[] = [
+            {
+                type: "equal",
+                value: "This is a"
+            },
+            {
+                type: "insert",
+                value: " "
+            },
+            {
+                type: "equal",
+                value: "n"
+            },
+            {
+                type: "insert",
+                value: "ew"
+            },
+            {
+                type: "equal",
+                value: " "
+            },
+            {
+                type: "insert",
+                value: "m"
+            },
+            {
+                type: "equal",
+                value: "o"
+            },
+            {
+                type: "delete",
+                value: "l"
+            },
+            {
+                type: "insert",
+                value: "difie"
+            },
+            {
+                type: "equal",
+                value: "d test string"
+            }
+        ];
+        expect(diffStrings(oldStr, newStr)).toEqual(expected);
+    });
+
+    test("completely different strings", () => {
+        const oldStr = "Old string";
+        const newStr = "New string";
+        const expected: Change[] = [
+            {
+                type: "delete",
+                value: "Old"
+            },
+            {
+                type: "insert",
+                value: "New"
+            },
+            {
+                type: "equal",
+                value: " string"
+            }
+        ];
+        expect(diffStrings(oldStr, newStr)).toEqual(expected);
+    });
+});